X-Git-Url: https://git.pterodactylus.net/?a=blobdiff_plain;ds=inline;f=src%2Fmain%2Fresources%2Ftemplates%2FimageBrowser.html;h=da8d032301cbb3a9af1aee079e1ac68e7113605b;hb=d8c06351d49f7495e023f43310b8d2d666ed0339;hp=bc1cb72ff9269b5306d208bd0ac7e087e5f564f0;hpb=308c05fe34c4820bada0e9051bb536ab0a42412e;p=Sone.git diff --git a/src/main/resources/templates/imageBrowser.html b/src/main/resources/templates/imageBrowser.html index bc1cb72..da8d032 100644 --- a/src/main/resources/templates/imageBrowser.html +++ b/src/main/resources/templates/imageBrowser.html @@ -1,25 +1,252 @@ <%include include/head.html> +
+ + /* ID of the image currently being edited. */ + var editingImageId = null; - + /** + * Shows the form for editing an image. + * + * @param imageId The ID of the image to edit. + */ + function editImage(imageId) { + if (editingImageId != imageId) { + cancelImageEditing(); + } else { + return; + } + editingImageId = imageId; + $(".show-data", getImage(imageId)).hide(); + $(".edit-data", getImage(imageId)).show(); + $(document).bind("click.sone", function(event) { + if ($(event.target).closest("#image-" + imageId).size() == 0) { + cancelImageEditing(); + } + }); + } + + /** + * Cancels all image editing. + */ + function cancelImageEditing() { + $(".image .show-data").show(); + $(".image .edit-data").hide(); + $("form.edit-image").each(function() { + this.reset(); + }); + $(document).unbind("click.sone"); + editingImageId = null; + } + + /** + * Returns the image element with the given ID. + * + * @param imageId The ID of the image + * @return The image element + */ + function getImage(imageId) { + return $("#sone .image .image-id:contains('" + imageId + "')").closest(".image"); + } + + /** + * Swaps two images. + * + * @param sourceId The ID of the source image + * @param destinationId The ID of the destionation image + */ + function swapImage(sourceId, destinationId) { + sourceElement = getImage(sourceId); + destinationElement = getImage(destinationId); + sourceParent = sourceElement.closest(".image-row"); + sourcePrevSibling = sourceElement.prev(); + sourceElement.detach(); + destinationElement.before(sourceElement); + if (sourcePrevSibling.get(0) != destinationElement.get(0)) { + destinationElement.detach(); + (sourcePrevSibling.size() > 0) ? sourcePrevSibling.after(destinationElement) : sourceParent.prepend(destinationElement); + } + if ($("button[name='moveLeft']", sourceElement).hasClass("hidden") != $("button[name='moveLeft']", destinationElement).hasClass("hidden")) { + $("button[name='moveLeft']", sourceElement).toggleClass("hidden"); + $("button[name='moveLeft']", destinationElement).toggleClass("hidden"); + } + if ($("button[name='moveRight']", sourceElement).hasClass("hidden") != $("button[name='moveRight']", destinationElement).hasClass("hidden")) { + $("button[name='moveRight']", sourceElement).toggleClass("hidden"); + $("button[name='moveRight']", destinationElement).toggleClass("hidden"); + } + } + + /** + * Prepare all images for inline editing. + */ + function prepareImages() { + $(".image").each(function() { + imageId = $(this).closest(".image").find(".image-id").text(); + (function(element, imageId) { + $(".show-data", element).click(function() { + editImage(imageId); + }); + $("button[name='moveLeft'], button[name='moveRight']", element).click(function() { + ajaxGet("editImage.ajax", { "formPassword": getFormPassword(), "image": imageId, "moveLeft": this.name == "moveLeft", "moveRight": this.name == "moveRight" }, function(data) { + if (data && data.success) { + swapImage(data.sourceImageId, data.destinationImageId); + } + }); + return false; + }); + $("button[name='submit']", element).click(function() { + title = $(":input[name='title']:enabled", this.form).val(); + description = $(":input[name='description']:enabled", this.form).val(); + ajaxGet("editImage.ajax", { "formPassword": getFormPassword(), "image": imageId, "title": title, "description": description }, function(data) { + if (data && data.success) { + getImage(data.imageId).find(".image-title").text(data.title); + getImage(data.imageId).find(".image-description").html(data.parsedDescription); + getImage(data.imageId).find(":input[name='title']").attr("defaultValue", title); + getImage(data.imageId).find(":input[name='description']").attr("defaultValue", data.description); + cancelImageEditing(); + } + }); + return false; + }); + })(this, imageId); + }); + } + + /* ID of the album currently being edited. */ + var editingAlbumId = null; + + /** + * Shows the form for editing an album. + * + * @param albumId The ID of the album to edit. + */ + function editAlbum(albumId) { + if (editingAlbumId != albumId) { + if (editingAlbumId != null) { + cancelAlbumEditing(); + } + } else { + console.log("already editing " + albumId); + return; + } + editingAlbumId = albumId; + $(".show-data", getAlbum(albumId)).hide(); + $(".edit-data", getAlbum(albumId)).show(); + console.log(getAlbum(albumId)); + $(document).bind("click.sone", function(event) { + if ($(event.target).closest("#album-" + albumId).size() == 0) { + cancelAlbumEditing(); + } + }); + } + + /** + * Cancels all album editing. + */ + function cancelAlbumEditing() { + console.log("cancel-album-edit"); + $(".album .show-data").show(); + $(".album .edit-data").hide(); + $("form.edit-album").each(function() { + this.reset(); + }); + $(document).unbind("click.sone"); + editingAlbumId = null; + } + + /** + * Returns the album element with the given ID. + * + * @param albumId The ID of the album + * @return The album element + */ + function getAlbum(albumId) { + return $("#sone .album .album-id:contains('" + albumId + "')").closest(".album"); + } + + /** + * Swaps two albums. + * + * @param sourceId The ID of the source album + * @param destinationId The ID of the destionation album + */ + function swapAlbum(sourceId, destinationId) { + sourceElement = getAlbum(sourceId); + destinationElement = getAlbum(destinationId); + sourceParent = sourceElement.closest(".album-row"); + sourcePrevSibling = sourceElement.prev(); + sourceElement.detach(); + destinationElement.before(sourceElement); + if (sourcePrevSibling.get(0) != destinationElement.get(0)) { + destinationElement.detach(); + (sourcePrevSibling.size() > 0) ? sourcePrevSibling.after(destinationElement) : sourceParent.prepend(destinationElement); + } + if ($("button[name='moveLeft']", sourceElement).hasClass("hidden") != $("button[name='moveLeft']", destinationElement).hasClass("hidden")) { + $("button[name='moveLeft']", sourceElement).toggleClass("hidden"); + $("button[name='moveLeft']", destinationElement).toggleClass("hidden"); + } + if ($("button[name='moveRight']", sourceElement).hasClass("hidden") != $("button[name='moveRight']", destinationElement).hasClass("hidden")) { + $("button[name='moveRight']", sourceElement).toggleClass("hidden"); + $("button[name='moveRight']", destinationElement).toggleClass("hidden"); + } + } + + /** + * Prepare all albums for inline editing. + */ + function prepareAlbums() { + $(".album").each(function() { + albumId = $(this).closest(".album").find(".album-id").text(); + (function(element, albumId) { + $(".show-data", element).click(function() { + console.log("show-data"); + editAlbum(albumId); + }); + $("button[name='moveLeft'], button[name='moveRight']", element).click(function() { + ajaxGet("editAlbum.ajax", { "formPassword": getFormPassword(), "album": albumId, "moveLeft": this.name == "moveLeft", "moveRight": this.name == "moveRight" }, function(data) { + if (data && data.success) { + swapAlbum(data.sourceAlbumId, data.destinationAlbumId); + } + }); + return false; + }); + $("button[name='submit']", element).click(function() { + title = $(":input[name='title']:enabled", this.form).val(); + description = $(":input[name='description']:enabled", this.form).val(); + ajaxGet("editAlbum.ajax", { "formPassword": getFormPassword(), "album": albumId, "title": title, "description": description }, function(data) { + if (data && data.success) { + getAlbum(data.albumId).find(".album-title").text(data.title); + getAlbum(data.albumId).find(".album-description").text(data.description); + getAlbum(data.albumId).find(":input[name='title']").attr("defaultValue", title); + getAlbum(data.albumId).find(":input[name='description']").attr("defaultValue", description); + cancelAlbumEditing(); + } + }); + return false; + }); + })(this, albumId); + }); + } + + <%if albumRequested> @@ -27,15 +254,69 @@<%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html>
- <%elseifnull album.name> + <%elseifnull album.title><%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html>
<%else> -<% album.description|parse sone=album.sone>
+ + <%if album.sone.local> + + +<%image.description|parse sone=image.sone>
+ + <%if image.sone.local> + + + +<%= Page.ImageBrowser.Sone.Error.NotFound.Text|l10n|html>
<%else> -