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.

2 files changed, 27 insertions, 14 deletions

diff --git a/mod/photos.php b/mod/photos.php
index 8c168c21d..c43beb8d4 100644
--- a/mod/photos.php
+++ b/mod/photos.php
@@ -927,6 +927,10 @@ function photos_content(&$a) {
 
 		$edit = null;
 		if($can_post) {
+			if(array_key_exists('albums', $a->data))
+                        	$albums = get_app()->data['albums'];
+	                else
+        	                $albums = photos_albums_list($a->data['channel'],$a->data['observer']);
 
 			$album_e = $ph[0]['album'];
 			$caption_e = $ph[0]['description'];
@@ -937,6 +941,7 @@ function photos_content(&$a) {
 				'id' => $ph[0]['id'],
 				'rotatecw' => t('Rotate CW (right)'),
 				'rotateccw' => t('Rotate CCW (left)'),
+				'albums' => $albums['albums'],
 				'album' => $album_e,
 				'newalbum' => t('New album name'), 
 				'nickname' => $a->data['channel']['channel_address'],
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>