src/main/resources/templates/imageBrowser.html

   1 <%include include/head.html>
   2
   3         <div class="page-id hidden">image-browser</div>
   4
   5         <script language="javascript">
   6                 $(function() {
   7
   8                         /* hide all those forms. */
   9                         hideAndShowBlock = function(blockElement, clickToShowElement, clickToHideElement) {
  10                                 $(blockElement).hide();
  11                                 $(clickToShowElement).removeClass("hidden");
  12                                 $(clickToShowElement).click(function() {
  13                                         $(blockElement).slideDown();
  14                                         $(clickToShowElement).addClass("hidden");
  15                                         $(clickToHideElement).removeClass("hidden");
  16                                 });
  17                                 $(clickToHideElement).click(function() {
  18                                         $(blockElement).slideUp();
  19                                         $(clickToHideElement).addClass("hidden");
  20                                         $(clickToShowElement).removeClass("hidden");
  21                                 });
  22                         };
  23
  24                 });
  25         </script>
  26
  27         <%if albumRequested>
  28
  29                 <%ifnull album>
  30
  31                         <p><%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html></p>
  32
  33                 <%elseifnull album.title>
  34
  35                         <p><%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html></p>
  36
  37                 <%else>
  38
  39                         <%if album.sone.local>
  40                                 <script language="javascript">
  41
  42                                         /* ID of the image currently being edited. */
  43                                         var editingImageId = null;
  44
  45                                         /**
  46                                          * Shows the form for editing an image.
  47                                          *
  48                                          * @param imageId The ID of the image to edit.
  49                                          */
  50                                         function editImage(imageId) {
  51                                                 if (editingImageId != imageId) {
  52                                                         cancelEditing();
  53                                                 } else {
  54                                                         return;
  55                                                 }
  56                                                 $(".show-data", "#image-" + imageId).hide();
  57                                                 $(".edit-data", "#image-" + imageId).show();
  58                                                 $(document).bind("click.sone", function(event) {
  59                                                         if ($(event.target).closest("#image-" + imageId).size() == 0) {
  60                                                                 cancelEditing();
  61                                                         }
  62                                                 });
  63                                         }
  64
  65                                         /**
  66                                          * Cancels all image editing.
  67                                          */
  68                                         function cancelEditing() {
  69                                                 $(".show-data").show();
  70                                                 $(".edit-data").hide();
  71                                                 $("form.edit-image").each(function() {
  72                                                         this.reset();
  73                                                 });
  74                                                 $(document).unbind("click.sone");
  75                                                 editingImageId = null;
  76                                         }
  77
  78                                         /**
  79                                          * Returns the image element with the given ID.
  80                                          *
  81                                          * @param imageId The ID of the image
  82                                          * @return The image element
  83                                          */
  84                                         function getImage(imageId) {
  85                                                 return $("#sone .image .image-id:contains('" + imageId + "')").closest(".image");
  86                                         }
  87
  88                                         /**
  89                                          * Swaps two images.
  90                                          *
  91                                          * @param sourceId The ID of the source image
  92                                          * @param destinationId The ID of the destionation image
  93                                          */
  94                                         function swapImage(sourceId, destinationId) {
  95                                                 sourceElement = getImage(sourceId);
  96                                                 destinationElement = getImage(destinationId);
  97                                                 sourceParent = sourceElement.closest(".image-row");
  98                                                 sourcePrevSibling = sourceElement.prev();
  99                                                 sourceElement.detach();
 100                                                 destinationElement.before(sourceElement);
 101                                                 if (sourcePrevSibling.get(0) != destinationElement.get(0)) {
 102                                                         destinationElement.detach();
 103                                                         (sourcePrevSibling.size() > 0) ? sourcePrevSibling.after(destinationElement) : sourceParent.prepend(destinationElement);
 104                                                 }
 105                                                 if ($("button[name='moveLeft']", sourceElement).hasClass("hidden") != $("button[name='moveLeft']", destinationElement).hasClass("hidden")) {
 106                                                         $("button[name='moveLeft']", sourceElement).toggleClass("hidden");
 107                                                         $("button[name='moveLeft']", destinationElement).toggleClass("hidden");
 108                                                 }
 109                                                 if ($("button[name='moveRight']", sourceElement).hasClass("hidden") != $("button[name='moveRight']", destinationElement).hasClass("hidden")) {
 110                                                         $("button[name='moveRight']", sourceElement).toggleClass("hidden");
 111                                                         $("button[name='moveRight']", destinationElement).toggleClass("hidden");
 112                                                 }
 113                                         }
 114
 115                                         $(function() {
 116                                                 getTranslation("WebInterface.DefaultText.UploadImage.Title", function(text) {
 117                                                         $("#upload-image :input[name='title']").each(function() {
 118                                                                 registerInputTextareaSwap(this, text, "title", false, true);
 119                                                         });
 120                                                 });
 121                                                 getTranslation("WebInterface.DefaultText.UploadImage.Description", function(text) {
 122                                                         $("#upload-image :input[name='description']").each(function() {
 123                                                                 registerInputTextareaSwap(this, text, "description", true, false);
 124                                                         });
 125                                                 });
 126                                                 $("#upload-image label").hide();
 127                                                 getTranslation("WebInterface.DefaultText.CreateAlbum.Name", function(text) {
 128                                                         $("#create-album input[name='name']").each(function() {
 129                                                                 registerInputTextareaSwap(this, text, "name", false, true);
 130                                                         });
 131                                                 });
 132                                                 getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
 133                                                         $("#create-album input[name='description']").each(function() {
 134                                                                 registerInputTextareaSwap(this, text, "description", true, true);
 135                                                         });
 136                                                 });
 137                                                 $("#create-album label").hide();
 138                                                 getTranslation("WebInterface.DefaultText.EditAlbum.Title", function(text) {
 139                                                         $("#edit-album input[name='title']").each(function() {
 140                                                                 registerInputTextareaSwap(this, text, "title", false, true);
 141                                                         });
 142                                                 });
 143                                                 getTranslation("WebInterface.DefaultText.EditAlbum.Description", function(text) {
 144                                                         $("#edit-album :input[name='description']").each(function() {
 145                                                                 registerInputTextareaSwap(this, text, "description", true, false);
 146                                                         });
 147                                                 });
 148                                                 $("#edit-album label").hide();
 149
 150                                                 hideAndShowBlock(".edit-album", ".show-edit-album", ".hide-edit-album");
 151                                                 hideAndShowBlock(".create-album", ".show-create-album", ".hide-create-album");
 152                                                 hideAndShowBlock(".upload-image", ".show-upload-image", ".hide-upload-image");
 153                                                 hideAndShowBlock(".delete-album", ".show-delete-album", ".hide-delete-album");
 154
 155                                                 $(".image").each(function() {
 156                                                         imageId = $(this).closest(".image").find(".image-id").text();
 157                                                         (function(element, imageId) {
 158                                                                 $(".show-data", element).click(function() {
 159                                                                         editImage(imageId);
 160                                                                 });
 161                                                                 $("button[name='moveLeft'], button[name='moveRight']", element).click(function() {
 162                                                                         ajaxGet("editImage.ajax", { "formPassword": getFormPassword(), "image": imageId, "moveLeft": this.name == "moveLeft", "moveRight": this.name == "moveRight" }, function(data) {
 163                                                                                 if (data && data.success) {
 164                                                                                         swapImage(data.sourceImageId, data.destinationImageId);
 165                                                                                 }
 166                                                                         });
 167                                                                         return false;
 168                                                                 });
 169                                                                 $("button[name='submit']", element).click(function() {
 170                                                                         title = $(":input[name='title']:enabled", this.form).val();
 171                                                                         description = $(":input[name='description']:enabled", this.form).val();
 172                                                                         ajaxGet("editImage.ajax", { "formPassword": getFormPassword(), "image": imageId, "title": title, "description": description }, function(data) {
 173                                                                                 if (data && data.success) {
 174                                                                                         getImage(data.imageId).find(".image-title").text(data.title);
 175                                                                                         getImage(data.imageId).find(".image-description").text(data.description);
 176                                                                                         getImage(data.imageId).find(":input[name='title']").attr("defaultValue", title);
 177                                                                                         getImage(data.imageId).find(":input[name='description']").attr("defaultValue", description);
 178                                                                                         cancelEditing();
 179                                                                                 }
 180                                                                         });
 181                                                                         return false;
 182                                                                 });
 183                                                         })(this, imageId);
 184                                                 });
 185                                         });
 186                                 </script>
 187                         <%/if>
 188
 189                         <h1 class="backlink"><%= Page.ImageBrowser.Album.Title|l10n|replace needle='{album}' replacementKey=album.title|html></h1>
 190
 191                         <div class="backlinks">
 192                                 <%foreach album.backlinks backlink backlinks>
 193                                         <div class="backlink">
 194                                                 <a href="<% backlink.target|html>"><% backlink.name|html></a>
 195                                         </div>
 196                                         <%if ! backlinks.last>
 197                                                 <div class="separator">&gt;</div>
 198                                         <%/if>
 199                                 <%/foreach>
 200                         </div>
 201
 202                         <p id="description"><% album.description|html></p>
 203
 204                         <%if album.sone.local>
 205                                 <div class="show-edit-album hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Album.Edit.Title|l10n|html></a></div>
 206                                 <div class="hide-edit-album hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Album.Edit.Title|l10n|html></a></div>
 207                                 <div class="edit-album">
 208                                         <h2><%= Page.ImageBrowser.Album.Edit.Title|l10n|html></h2>
 209
 210                                         <form id="edit-album" action="editAlbum.html" method="post">
 211                                                 <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 212                                                 <input type="hidden" name="album" value="<%album.id|html>" />
 213
 214                                                 <%if ! album.images.empty>
 215                                                         <div>
 216                                                                 <label for="album-image"><%= Page.ImageBrowser.Album.Label.AlbumImage|l10n|html></label>
 217                                                                 <select name="album-image">
 218                                                                         <option disabled="disabled"><%= Page.ImageBrowser.Album.AlbumImage.Choose|l10n|html></option>
 219                                                                         <%foreach album.images image>
 220                                                                                 <option value="<% image.id|html>"<%if album.albumImage.id|match key=image.id> selected="selected"<%/if>><% image.title|html></option>
 221                                                                         <%/foreach>
 222                                                                 </select>
 223                                                         </div>
 224                                                 <%/if>
 225                                                 <div>
 226                                                         <label for="title"><%= Page.ImageBrowser.Album.Label.Title|l10n|html></label>
 227                                                         <input type="text" name="title" value="<%album.title|html>" />
 228                                                 </div>
 229                                                 <div>
 230                                                         <label for="description"><%= Page.ImageBrowser.Album.Label.Description|l10n|html></label>
 231                                                         <textarea name="description"><%album.description|html></textarea>
 232                                                 </div>
 233                                                 <button type="submit"><%= Page.ImageBrowser.Album.Button.Save|l10n|html></button>
 234                                         </form>
 235                                 </div>
 236                         <%/if>
 237
 238                         <%foreach album.albums album>
 239                                 <%first><h2><%= Page.ImageBrowser.Header.Albums|l10n|html></h2><%/first>
 240                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 241                                 <div class="album image">
 242                                         <div class="image-container">
 243                                                 <a href="imageBrowser.html?album=<% album.id|html>" title="<% album.title|html>">
 244                                                         <%ifnull album.albumImage>
 245                                                                 <img src="images/unknown-image-0.png" width="266" height="200" alt="<% album.title|html>" title="<% album.title|html>" style="position: relative; top: 0px; left: -33px;" />
 246                                                         <%else><!-- TODO -->
 247                                                                 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
 248                                                         <%/if>
 249                                                 </a>
 250                                         </div>
 251                                         <div class="show-data">
 252                                                 <div class="album-title"><% album.title|html></div>
 253                                                 <div class="album-description"><% album.description|html></div>
 254                                         </div>
 255                                 </div>
 256                                 <%= false|store key=endRow>
 257                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 258                                 <%last><%= true|store key=endRow><%/last>
 259                                 <%if endRow></div><%/if>
 260                         <%/foreach>
 261
 262                         <%if album.sone.local>
 263                                 <div class="show-create-album hidden toggle-link"><a class="small-link">» <%= View.CreateAlbum.Title|l10n|html></a></div>
 264                                 <div class="hide-create-album hidden toggle-link"><a class="small-link">« <%= View.CreateAlbum.Title|l10n|html></a></div>
 265                                 <div class="create-album">
 266                                         <%include include/createAlbum.html>
 267                                 </div>
 268                         <%/if>
 269
 270                         <%foreach album.images image>
 271                                 <%first><h2><%= Page.ImageBrowser.Header.Images|l10n|html></h2><%/first>
 272                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 273                                 <div id="image-<% image.id|html>" class="image">
 274                                         <div class="image-id hidden"><% image.id|html></div>
 275                                         <div class="image-container">
 276                                                 <a href="imageBrowser.html?image=<%image.id|html>"><% image|image-link max-width=200 max-height=200 mode=enlarge title==image.title></a>
 277                                         </div>
 278                                         <div class="show-data">
 279                                                 <div class="image-title"><% image.title|html></div>
 280                                                 <div class="image-description"><% image.description|html></div>
 281                                         </div>
 282                                         <%if album.sone.local>
 283                                                 <form class="edit-image" action="editImage.html" method="post">
 284                                                         <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 285                                                         <input type="hidden" name="returnPage" value="<%request.uri|html>" />
 286                                                         <input type="hidden" name="image" value="<%image.id|html>" />
 287
 288                                                         <div class="edit-data hidden">
 289                                                                 <div>
 290                                                                         <input type="text" name="title" value="<%image.title|html>" />
 291                                                                 </div>
 292                                                                 <div>
 293                                                                         <textarea name="description"><%image.description|html></textarea>
 294                                                                 </div>
 295                                                                 <div>
 296                                                                         <button <%first>class="hidden" <%/first>type="submit" name="moveLeft" value="true"><%= Page.ImageBrowser.Image.Button.MoveLeft|l10n|html></button>
 297                                                                         <button type="submit" name="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
 298                                                                         <button <%last>class="hidden" <%/last>type="submit" name="moveRight" value="true"><%= Page.ImageBrowser.Image.Button.MoveRight|l10n|html></button>
 299                                                                 </div>
 300                                                         </div>
 301                                                 </form>
 302                                         <%/if>
 303                                 </div>
 304                                 <%= false|store key=endRow>
 305                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 306                                 <%last><%= true|store key=endRow><%/last>
 307                                 <%if endRow></div><%/if>
 308                         <%/foreach>
 309
 310                         <%if album.sone.local>
 311                                 <div class="show-upload-image hidden toggle-link"><a class="small-link">» <%= View.UploadImage.Title|l10n|html></a></div>
 312                                 <div class="hide-upload-image hidden toggle-link"><a class="small-link">« <%= View.UploadImage.Title|l10n|html></a></div>
 313                                 <div class="upload-image">
 314                                         <%include include/uploadImage.html>
 315                                 </div>
 316
 317                                 <%if album.empty>
 318                                         <div class="show-delete-album hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Album.Delete.Title|l10n|html></a></div>
 319                                         <div class="hide-delete-album hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Album.Delete.Title|l10n|html></a></div>
 320                                         <div class="delete-album">
 321                                                 <form id="delete-album" action="deleteAlbum.html" method="get">
 322                                                         <input type="hidden" name="album" value="<%album.id|html>" />
 323                                                         <button type="submit"><%= Page.ImageBrowser.Album.Button.Delete|l10n|html></button>
 324                                                 </form>
 325                                         </div>
 326                                 <%/if>
 327
 328                         <%/if>
 329
 330                 <%/if>
 331
 332         <%elseif imageRequested>
 333
 334                 <h1 class="backlink"><%image.title|html></h1>
 335
 336                 <div class="backlinks">
 337                         <%foreach image.album.backlinks backlink backlinks>
 338                                 <div class="backlink">
 339                                         <a href="<% backlink.target|html>"><% backlink.name|html></a>
 340                                 </div>
 341                                 <%if ! backlinks.last>
 342                                         <div class="separator">&gt;</div>
 343                                 <%/if>
 344                         <%/foreach>
 345                 </div>
 346
 347                 <%ifnull image>
 348
 349                 <%else>
 350
 351                         <%if image.sone.local>
 352                                 <script language="javascript">
 353                                         $(function() {
 354                                                 getTranslation("WebInterface.DefaultText.EditImage.Title", function(text) {
 355                                                         $("#edit-image input[name='title']").each(function() {
 356                                                                 registerInputTextareaSwap(this, text, "title", false, true);
 357                                                         });
 358                                                 });
 359                                                 getTranslation("WebInterface.DefaultText.EditImage.Description", function(text) {
 360                                                         $("#edit-image :input[name='description']").each(function() {
 361                                                                 registerInputTextareaSwap(this, text, "description", true, false);
 362                                                         });
 363                                                 });
 364                                                 $("#edit-image label").hide();
 365
 366                                                 hideAndShowBlock(".edit-image", ".show-edit-image", ".hide-edit-image");
 367                                                 hideAndShowBlock(".delete-image", ".show-delete-image", ".hide-delete-image");
 368                                         });
 369                                 </script>
 370                         <%/if>
 371
 372                         <div class="single-image">
 373                                 <%ifnull !image.key>
 374                                         <a href="/<%image.key|html>"><% image|image-link max-width=640 max-height=480></a>
 375                                 <%else>
 376                                         <a href="imageBrowser.html?image=<%image.id|html>"><% image|image-link max-width=640 max-height=480></a>
 377                                 <%/if>
 378                         </div>
 379
 380                         <p class="parsed"><%image.description|parse sone=image.sone></p>
 381
 382                         <%if image.sone.local>
 383
 384                                 <div class="show-edit-image hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Image.Edit.Title|l10n|html></a></div>
 385                                 <div class="hide-edit-image hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Image.Edit.Title|l10n|html></a></div>
 386                                 <div class="edit-image">
 387                                         <h2><%= Page.ImageBrowser.Image.Edit.Title|l10n|html></h2>
 388
 389                                         <form id="edit-image" action="editImage.html" method="post">
 390                                                 <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 391                                                 <input type="hidden" name="returnPage" value="<%request.uri|html>" />
 392                                                 <input type="hidden" name="image" value="<%image.id|html>" />
 393
 394                                                 <div>
 395                                                         <label for="title"><%= Page.ImageBrowser.Image.Title.Label|l10n|html></label>
 396                                                         <input type="text" name="title" value="<%image.title|html>" />
 397                                                 </div>
 398                                                 <div>
 399                                                         <label for="description"><%= Page.ImageBrowser.Image.Description.Label|l10n|html></label>
 400                                                         <textarea name="description"><%image.description|html></textarea>
 401                                                 </div>
 402                                                 <div>
 403                                                         <button type="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
 404                                                 </div>
 405                                         </form>
 406                                 </div>
 407
 408                                 <div class="show-delete-image hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Image.Delete.Title|l10n|html></a></div>
 409                                 <div class="hide-delete-image hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Image.Delete.Title|l10n|html></a></div>
 410                                 <div class="delete-image">
 411                                         <h2><%= Page.ImageBrowser.Image.Delete.Title|l10n|html></h2>
 412
 413                                         <form id="delete-image" action="deleteImage.html" method="get">
 414                                                 <input type="hidden" name="image" value="<%image.id|html>" />
 415                                                 <button type="submit"><%= Page.ImageBrowser.Image.Button.Delete|l10n|html></button>
 416                                         </form>
 417                                 </div>
 418
 419                         <%/if>
 420
 421                 <%/if>
 422
 423         <%elseif soneRequested>
 424
 425                 <%if sone.local>
 426                         <script language="javascript">
 427                                 $(function() {
 428                                         getTranslation("WebInterface.DefaultText.CreateAlbum.Name", function(text) {
 429                                                 $("#create-album input[name='name']").each(function() {
 430                                                         registerInputTextareaSwap(this, text, "name", false, true);
 431                                                 });
 432                                         });
 433                                         getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
 434                                                 $("#create-album input[name='description']").each(function() {
 435                                                         registerInputTextareaSwap(this, text, "description", true, true);
 436                                                 });
 437                                         });
 438                                         $("#create-album label").hide();
 439
 440                                         hideAndShowBlock(".create-album", ".show-create-album", ".hide-create-album");
 441                                 });
 442                         </script>
 443                 <%/if>
 444
 445                 <%ifnull sone>
 446
 447                         <p><%= Page.ImageBrowser.Sone.Error.NotFound.Text|l10n|html></p>
 448
 449                 <%else>
 450
 451                         <h1><%= Page.ImageBrowser.Sone.Title|l10n|replace needle='{sone}' replacementKey=sone.niceName|html></h1>
 452
 453                         <%foreach sone.albums album>
 454                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 455                                 <div class="album image">
 456                                         <div class="image-container">
 457                                                 <a href="imageBrowser.html?album=<% album.id|html>" title="<% album.title|html>">
 458                                                         <%ifnull album.albumImage>
 459                                                                 <img src="images/unknown-image-0.png" width="266" height="200" alt="<% album.title|html>" title="<% album.title|html>" style="position: relative; top: 0px; left: -33px;"/>
 460                                                         <%else><!-- TODO -->
 461                                                                 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
 462                                                         <%/if>
 463                                                 </a>
 464                                         </div>
 465                                         <div class="show-data">
 466                                                 <div class="album-title"><% album.title|html></div>
 467                                                 <div class="album-description"><% album.description|html></div>
 468                                         </div>
 469                                 </div>
 470                                 <%= false|store key=endRow>
 471                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 472                                 <%last><%= true|store key=endRow><%/last>
 473                                 <%if endRow></div><%/if>
 474                         <%/foreach>
 475
 476                         <%if sone.local>
 477                                 <div class="show-create-album hidden toggle-link"><a class="small-link">» <%= View.CreateAlbum.Title|l10n|html></a></div>
 478                                 <div class="hide-create-album hidden toggle-link"><a class="small-link">« <%= View.CreateAlbum.Title|l10n|html></a></div>
 479                                 <div class="create-album">
 480                                         <%include include/createAlbum.html>
 481                                 </div>
 482                         <%/if>
 483
 484                 <%/if>
 485
 486         <%/if>
 487
 488 <%include include/tail.html>