Merge pull request #5726 from rabuzarus/201805_-_edit_album_modal

Frio - fix missing modal for editing photo albums

view/theme/frio/js/mod_photos.js

@@ -15,7 +15,14 @@ $(document).ready(function() {
 
 	}).trigger('change');
 
+	// Click event listener for the album edit link/button.
+	$("body").on('click', '#album-edit-link', function() {
+		var modalUrl = $(this).attr("data-modal-url");
 
+		if (typeof modalUrl !== "undefined") {
+			addToModal(modalUrl, 'photo-album-edit-wrapper');
+		}
+	});
 });
 
 $(window).load(function() {

view/theme/frio/js/modal.js

@@ -188,14 +188,25 @@ function loadModalTitle() {
 	}
 }
 
-// This function loads html content from a friendica page
-// into a modal.
-function addToModal(url) {
+
+/**
+ * This function loads html content from a friendica page into a modal.
+ * 
+ * @param {string} url The url with html content.
+ * @param {string} id The ID of a html element (can be undefined).
+ * @returns {void}
+ */
+function addToModal(url, id) {
 	var char = qOrAmp(url);
 
 	url = url + char + 'mode=none';
 	var modal = $('#modal').modal();
 
+	// Only search for an element if we have an ID.
+	if (typeof id !== "undefined") {
+		url = url + " div#" + id;
+	}
+
 	modal
 		.find('#modal-body')
 		.load(url, function (responseText, textStatus) {
@@ -215,7 +226,7 @@ function addToModal(url) {
 		});
 }
 
-// Add a element (by it's id) to a bootstrap modal.
+// Add an element (by its id) to a bootstrap modal.
 function addElmToModal(id) {
 	var elm = $(id).html();
 	var modal = $('#modal').modal();

view/theme/frio/templates/album_edit.tpl

@@ -2,7 +2,7 @@
 	<form name="photo-album-edit-form" id="photo-album-edit-form" action="photos/{{$nickname}}/album/{{$hexalbum}}" method="post" >
 		<label id="photo-album-edit-name-label" for="photo-album-edit-name" >{{$nametext}}</label>
 		<div class="pull-left photo-album-edit-name">
-	<input class="form-control" type="text" size="64" name="albumname" value="{{$album|escape:'html'}}" id="photo-album-edit-name" style="width: 100%;">
+			<input class="form-control" type="text" size="64" name="albumname" value="{{$album|escape:'html'}}" id="photo-album-edit-name">
 		</div>
 
 		<div class="pull-right">
@@ -10,5 +10,6 @@
 			<input class="btn-primary btn btn-small" id="photo-album-edit-drop" type="submit" name="dropalbum" value="{{$dropsubmit|escape:'html'}}" onclick="return confirmDelete();" />
 		</div>
 	</form>
+	<div class="clear"></div>
 </div>
 <div class="clear"></div>

view/theme/frio/templates/photo_album.tpl

@@ -12,9 +12,9 @@
 
 		{{if $edit}}
 		<span class="icon-padding"> </span>
-		<a id="album-edit-link" class="page-action faded-icon" href="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
+		<button id="album-edit-link" class="btn-link page-action faded-icon" type="button" data-modal-url="{{$edit.1}}" title="{{$edit.0}}" data-toggle="tooltip">
 			<i class="fa fa-pencil"></i>
-		</a>
+		</button>
 		{{/if}}
 
 		{{if ! $noorder}}