Allow user to edit image data inline.
authorDavid ‘Bombe’ Roden <bombe@pterodactylus.net>
Fri, 23 Sep 2011 19:06:29 +0000 (21:06 +0200)
committerDavid ‘Bombe’ Roden <bombe@pterodactylus.net>
Fri, 23 Sep 2011 19:06:29 +0000 (21:06 +0200)
src/main/java/net/pterodactylus/sone/web/WebInterface.java
src/main/java/net/pterodactylus/sone/web/ajax/EditImageAjaxPage.java [new file with mode: 0644]
src/main/resources/templates/imageBrowser.html

index 4572497..9dd9954 100644 (file)
@@ -75,6 +75,7 @@ import net.pterodactylus.sone.web.ajax.DeleteProfileFieldAjaxPage;
 import net.pterodactylus.sone.web.ajax.DeleteReplyAjaxPage;
 import net.pterodactylus.sone.web.ajax.DismissNotificationAjaxPage;
 import net.pterodactylus.sone.web.ajax.DistrustAjaxPage;
+import net.pterodactylus.sone.web.ajax.EditImageAjaxPage;
 import net.pterodactylus.sone.web.ajax.EditProfileFieldAjaxPage;
 import net.pterodactylus.sone.web.ajax.FollowSoneAjaxPage;
 import net.pterodactylus.sone.web.ajax.GetLikesAjaxPage;
@@ -664,6 +665,7 @@ public class WebInterface implements CoreListener {
                pageToadlets.add(pageToadletFactory.createPageToadlet(new UnlockSoneAjaxPage(this)));
                pageToadlets.add(pageToadletFactory.createPageToadlet(new FollowSoneAjaxPage(this)));
                pageToadlets.add(pageToadletFactory.createPageToadlet(new UnfollowSoneAjaxPage(this)));
+               pageToadlets.add(pageToadletFactory.createPageToadlet(new EditImageAjaxPage(this)));
                pageToadlets.add(pageToadletFactory.createPageToadlet(new TrustAjaxPage(this)));
                pageToadlets.add(pageToadletFactory.createPageToadlet(new DistrustAjaxPage(this)));
                pageToadlets.add(pageToadletFactory.createPageToadlet(new UntrustAjaxPage(this)));
diff --git a/src/main/java/net/pterodactylus/sone/web/ajax/EditImageAjaxPage.java b/src/main/java/net/pterodactylus/sone/web/ajax/EditImageAjaxPage.java
new file mode 100644 (file)
index 0000000..17d171b
--- /dev/null
@@ -0,0 +1,76 @@
+/*
+ * Sone - EditImageAjaxPage.java - Copyright © 2011 David Roden
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package net.pterodactylus.sone.web.ajax;
+
+import net.pterodactylus.sone.data.Image;
+import net.pterodactylus.sone.web.WebInterface;
+import net.pterodactylus.sone.web.page.FreenetRequest;
+import net.pterodactylus.util.json.JsonObject;
+
+/**
+ * Page that stores a user’s image modifications.
+ *
+ * @author <a href="mailto:bombe@pterodactylus.net">David ‘Bombe’ Roden</a>
+ */
+public class EditImageAjaxPage extends JsonPage {
+
+       /**
+        * Creates a new edit image AJAX page.
+        *
+        * @param webInterface
+        *            The Sone web interface
+        */
+       public EditImageAjaxPage(WebInterface webInterface) {
+               super("editImage.ajax", webInterface);
+       }
+
+       //
+       // JSONPAGE METHODS
+       //
+
+       /**
+        * {@inheritDoc}
+        */
+       @Override
+       protected JsonObject createJsonObject(FreenetRequest request) {
+               String imageId = request.getHttpRequest().getParam("image");
+               Image image = webInterface.getCore().getImage(imageId, false);
+               if (image == null) {
+                       return createErrorJsonObject("invalid-image-id");
+               }
+               if (!webInterface.getCore().isLocalSone(image.getSone())) {
+                       return createErrorJsonObject("not-authorized");
+               }
+               if ("true".equals(request.getHttpRequest().getParam("moveLeft"))) {
+                       Image swappedImage = image.getAlbum().moveImageUp(image);
+                       webInterface.getCore().touchConfiguration();
+                       return createSuccessJsonObject().put("sourceImageId", image.getId()).put("destinationImageId", swappedImage.getId());
+               }
+               if ("true".equals(request.getHttpRequest().getParam("moveRight"))) {
+                       Image swappedImage = image.getAlbum().moveImageDown(image);
+                       webInterface.getCore().touchConfiguration();
+                       return createSuccessJsonObject().put("sourceImageId", image.getId()).put("destinationImageId", swappedImage.getId());
+               }
+               String title = request.getHttpRequest().getParam("title").trim();
+               String description = request.getHttpRequest().getParam("description").trim();
+               image.setTitle(title).setDescription(description);
+               webInterface.getCore().touchConfiguration();
+               return createSuccessJsonObject().put("imageId", image.getId()).put("title", image.getTitle()).put("description", image.getDescription());
+       }
+
+}
index 74dac80..987b97a 100644 (file)
                                                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");
+                                               }
+                                       }
+
                                        $(function() {
                                                getTranslation("WebInterface.DefaultText.UploadImage.Title", function(text) {
                                                        $("#upload-image :input[name='title']").each(function() {
                                                                $(".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").text(data.description);
+                                                                                       getImage(data.imageId).find(":input[name='title']").attr("defaultValue", title);
+                                                                                       getImage(data.imageId).find(":input[name='description']").attr("defaultValue", description);
+                                                                                       cancelEditing();
+                                                                               }
+                                                                       });
+                                                                       return false;
+                                                               });
                                                        })(this, imageId);
-                                                       });
                                                });
                                        });
                                </script>
                                                                        <textarea name="description"><%image.description|html></textarea>
                                                                </div>
                                                                <div>
-                                                                       <%notfirst><button type="submit" name="moveLeft" value="true"><%= Page.ImageBrowser.Image.Button.MoveLeft|l10n|html></button><%/notfirst>
-                                                                       <button type="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
-                                                                       <%notlast><button type="submit" name="moveRight" value="true"><%= Page.ImageBrowser.Image.Button.MoveRight|l10n|html></button><%/notlast>
+                                                                       <button <%first>class="hidden" <%/first>type="submit" name="moveLeft" value="true"><%= Page.ImageBrowser.Image.Button.MoveLeft|l10n|html></button>
+                                                                       <button type="submit" name="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
+                                                                       <button <%last>class="hidden" <%/last>type="submit" name="moveRight" value="true"><%= Page.ImageBrowser.Image.Button.MoveRight|l10n|html></button>
                                                                </div>
                                                        </div>
                                                </form>