From 2504d4c2a2fb42325652d2a47f43eda403b16b06 Mon Sep 17 00:00:00 2001
From: Klaus Weidenbach <Klaus.Weidenbach@gmx.net>
Date: Sun, 22 Jun 2014 01:03:48 +0200
Subject: Add HTML5 datalist to edit photo album field.

This patch provides a datalist for the edit photo album field.
This makes it easier to move a picture to another existing folder in
the way that it provides a list of all available albums as values for
the album field.
---
 view/tpl/photo_view.tpl | 36 ++++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 14 deletions(-)

(limited to 'view/tpl')

diff --git a/view/tpl/photo_view.tpl b/view/tpl/photo_view.tpl
index b34f3fcf5..0c16eb362 100755
--- a/view/tpl/photo_view.tpl
+++ b/view/tpl/photo_view.tpl
@@ -5,11 +5,11 @@
 {{if $tools}}
 <a id="photo-toprofile-link" href="{{$tools.profile.0}}">{{$tools.profile.1}}</a>
 {{/if}}
-{{if $lock}} | <i class="lockview icon-lock" title="{{$lock}}" onclick="lockview(event,'photo/{{$id}}');" ></i> {{/if}}
+{{if $lock}} | <i class="lockview icon-lock" title="{{$lock}}" onclick="lockview(event,'photo/{{$id}}');"></i> {{/if}}
 </div>
 
 {{if $prevlink}}<div id="photo-prev-link"><a href="{{$prevlink.0}}"><i class="icon-backward photo-icons"></i></div>{{/if}}
-<div id="photo-photo"><a href="{{$photo.href}}" title="{{$photo.title}}" onclick="$.colorbox({href: '{{$photo.href}}'}); return false;" ><img style="max-width: 100%;" src="{{$photo.src}}" /></a></div>
+<div id="photo-photo"><a href="{{$photo.href}}" title="{{$photo.title}}" onclick="$.colorbox({href: '{{$photo.href}}'}); return false;"><img style="max-width: 100%;" src="{{$photo.src}}"></a></div>
 {{if $nextlink}}<div id="photo-next-link"><a href="{{$nextlink.0}}"><i class="icon-forward photo-icons"></i></a></div>{{/if}}
 <div id="photo-photo-end"></div>
 <div id="photo-caption">{{$desc}}</div>
@@ -24,22 +24,30 @@
 {{if $edit}}
 <div id="photo-edit-edit-wrapper" class="fakelink" onclick="openClose('photo-edit-edit');">{{$edit.edit}}</div>
 <div id="photo-edit-edit" style="display: none;">
-<form action="photos/{{$edit.nickname}}/{{$edit.resource_id}}" method="post" id="photo_edit_form" >
+<form action="photos/{{$edit.nickname}}/{{$edit.resource_id}}" method="post" id="photo_edit_form">
 
-	<input type="hidden" name="item_id" value="{{$edit.item_id}}" />
+	<input type="hidden" name="item_id" value="{{$edit.item_id}}">
 
 	<label id="photo-edit-albumname-label" for="photo-edit-albumname">{{$edit.newalbum}}</label>
-	<input id="photo-edit-albumname" type="text" size="32" name="albname" value="{{$edit.album}}" />
-
+	<input id="photo-edit-albumname" type="text" size="32" name="albname" value="{{$edit.album}}" list="dl-albums">
+{{if $edit.albums}}
+	<datalist id="dl-albums">
+	{{foreach $edit.albums as $al}}
+		{{if $al.text}}
+		<option value="{{$al.text}}">
+		{{/if}}
+	{{/foreach}}
+	</datalist>
+{{/if}}
 	<div id="photo-edit-albumname-end"></div>
 
 	<label id="photo-edit-caption-label" for="photo-edit-caption">{{$edit.capt_label}}</label>
-	<input id="photo-edit-caption" type="text" size="84" name="desc" value="{{$edit.caption}}" />
+	<input id="photo-edit-caption" type="text" size="84" name="desc" value="{{$edit.caption}}">
 
 	<div id="photo-edit-caption-end"></div>
 
 	<label id="photo-edit-tags-label" for="photo-edit-newtag" >{{$edit.tag_label}}</label>
-	<input name="newtag" id="photo-edit-newtag" size="84" title="{{$edit.help_tags}}" type="text" />
+	<input name="newtag" id="photo-edit-newtag" size="84" title="{{$edit.help_tags}}" type="text">
 
 	<div id="photo-edit-tags-end"></div>
 	<div id="photo-edit-rotate-wrapper">
@@ -47,13 +55,13 @@
 			{{$edit.rotatecw}}<br>
 			{{$edit.rotateccw}}
 		</div>
-		<input type="radio" name="rotate" value="1" /><br>
-		<input type="radio" name="rotate" value="2" />
+		<input type="radio" name="rotate" value="1"><br>
+		<input type="radio" name="rotate" value="2">
 	</div>
 	<div id="photo-edit-rotate-end"></div>
 
-	<div id="settings-default-perms" class="settings-default-perms" >
-		<span id="jot-perms-icon" class="{{$edit.lockstate}}" ></span>
+	<div id="settings-default-perms" class="settings-default-perms">
+		<span id="jot-perms-icon" class="{{$edit.lockstate}}"></span>
 		<button class="btn btn-default btn-xs" data-toggle="modal" data-target="#aclModal" onclick="return false;">{{$edit.permissions}}</button>
 		{{$edit.aclselect}}
 		<div id="settings-default-perms-menu-end"></div>
@@ -61,8 +69,8 @@
 	<br/>
 	<div id="settings-default-perms-end"></div>
 
-	<input id="photo-edit-submit-button" type="submit" name="submit" value="{{$edit.submit}}" />
-	<input id="photo-edit-delete-button" type="submit" name="delete" value="{{$edit.delete}}" onclick="return confirmDelete()"; />
+	<input id="photo-edit-submit-button" type="submit" name="submit" value="{{$edit.submit}}">
+	<input id="photo-edit-delete-button" type="submit" name="delete" value="{{$edit.delete}}" onclick="return confirmDelete();">
 
 	<div id="photo-edit-end"></div>
 </form>
-- 
cgit v1.2.3