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                                         $(function() {
  42                                                 getTranslation("WebInterface.DefaultText.UploadImage.Title", function(text) {
  43                                                         $("#upload-image :input[name='title']").each(function() {
  44                                                                 registerInputTextareaSwap(this, text, "title", false, true);
  45                                                         });
  46                                                 });
  47                                                 getTranslation("WebInterface.DefaultText.UploadImage.Description", function(text) {
  48                                                         $("#upload-image :input[name='description']").each(function() {
  49                                                                 registerInputTextareaSwap(this, text, "description", true, false);
  50                                                         });
  51                                                 });
  52                                                 $("#upload-image label").hide();
  53                                                 getTranslation("WebInterface.DefaultText.CreateAlbum.Name", function(text) {
  54                                                         $("#create-album input[name='name']").each(function() {
  55                                                                 registerInputTextareaSwap(this, text, "name", false, true);
  56                                                         });
  57                                                 });
  58                                                 getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
  59                                                         $("#create-album input[name='description']").each(function() {
  60                                                                 registerInputTextareaSwap(this, text, "description", true, true);
  61                                                         });
  62                                                 });
  63                                                 $("#create-album label").hide();
  64                                                 getTranslation("WebInterface.DefaultText.EditAlbum.Title", function(text) {
  65                                                         $("#edit-album input[name='title']").each(function() {
  66                                                                 registerInputTextareaSwap(this, text, "title", false, true);
  67                                                         });
  68                                                 });
  69                                                 getTranslation("WebInterface.DefaultText.EditAlbum.Description", function(text) {
  70                                                         $("#edit-album :input[name='description']").each(function() {
  71                                                                 registerInputTextareaSwap(this, text, "description", true, false);
  72                                                         });
  73                                                 });
  74                                                 $("#edit-album label").hide();
  75
  76                                                 hideAndShowBlock(".edit-album", ".show-edit-album", ".hide-edit-album");
  77                                                 hideAndShowBlock(".create-album", ".show-create-album", ".hide-create-album");
  78                                                 hideAndShowBlock(".upload-image", ".show-upload-image", ".hide-upload-image");
  79                                                 hideAndShowBlock(".delete-album", ".show-delete-album", ".hide-delete-album");
  80
  81                                                 hideAndShowData = function(activationElements, activeElements, hideElement, showElement) {
  82                                                         $(activationElements).click(function() {
  83                                                                 imageId = $(this).closest(".image").find(".image-id").text();
  84                                                                 $(hideElement, $("#image-" + imageId)).hide();
  85                                                                 $(showElement, $("#image-" + imageId)).show();
  86                                                                 $(document).click(function(event) {
  87                                                                         if ($(event.target).closest("#image-" + imageId).size() == 0) {
  88                                                                                 $(showElement).hide();
  89                                                                                 $(hideElement).show();
  90                                                                         }
  91                                                                         return $(event.target).is("button");
  92                                                                 });
  93                                                         });
  94                                                 };
  95
  96                                                 hideAndShowData(".image-title, .image-description", ".image", ".show-data", ".edit-data");
  97                                         });
  98                                 </script>
  99                         <%/if>
 100
 101                         <h1 class="backlink"><%= Page.ImageBrowser.Album.Title|l10n|replace needle='{album}' replacementKey=album.title|html></h1>
 102
 103                         <div class="backlinks">
 104                                 <%foreach album.backlinks backlink backlinks>
 105                                         <div class="backlink">
 106                                                 <a href="<% backlink.target|html>"><% backlink.name|html></a>
 107                                         </div>
 108                                         <%if ! backlinks.last>
 109                                                 <div class="separator">&gt;</div>
 110                                         <%/if>
 111                                 <%/foreach>
 112                         </div>
 113
 114                         <p id="description"><% album.description|html></p>
 115
 116                         <%if album.sone.local>
 117                                 <div class="show-edit-album hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Album.Edit.Title|l10n|html></a></div>
 118                                 <div class="hide-edit-album hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Album.Edit.Title|l10n|html></a></div>
 119                                 <div class="edit-album">
 120                                         <h2><%= Page.ImageBrowser.Album.Edit.Title|l10n|html></h2>
 121
 122                                         <form id="edit-album" action="editAlbum.html" method="post">
 123                                                 <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 124                                                 <input type="hidden" name="album" value="<%album.id|html>" />
 125
 126                                                 <div>
 127                                                         <label for="title"><%= Page.ImageBrowser.Album.Label.Title|l10n|html></label>
 128                                                         <input type="text" name="title" value="<%album.title|html>" />
 129                                                 </div>
 130                                                 <div>
 131                                                         <label for="description"><%= Page.ImageBrowser.Album.Label.Description|l10n|html></label>
 132                                                         <textarea name="description"><%album.description|html></textarea>
 133                                                 </div>
 134                                                 <button type="submit"><%= Page.ImageBrowser.Album.Button.Save|l10n|html></button>
 135                                         </form>
 136                                 </div>
 137                         <%/if>
 138
 139                         <%foreach album.albums album>
 140                                 <%first><h2><%= Page.ImageBrowser.Header.Albums|l10n|html></h2><%/first>
 141                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 142                                 <div class="album image">
 143                                         <div class="image-container">
 144                                                 <a href="imageBrowser.html?album=<% album.id|html>" title="<% album.title|html>">
 145                                                         <%ifnull album.albumImage>
 146                                                                 <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;" />
 147                                                         <%else><!-- TODO -->
 148                                                                 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
 149                                                         <%/if>
 150                                                 </a>
 151                                         </div>
 152                                         <div class="show-data">
 153                                                 <div class="album-title"><% album.title|html></div>
 154                                                 <div class="album-description"><% album.description|html></div>
 155                                         </div>
 156                                 </div>
 157                                 <%= false|store key=endRow>
 158                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 159                                 <%last><%= true|store key=endRow><%/last>
 160                                 <%if endRow></div><%/if>
 161                         <%/foreach>
 162
 163                         <%if album.sone.local>
 164                                 <div class="show-create-album hidden toggle-link"><a class="small-link">» <%= View.CreateAlbum.Title|l10n|html></a></div>
 165                                 <div class="hide-create-album hidden toggle-link"><a class="small-link">« <%= View.CreateAlbum.Title|l10n|html></a></div>
 166                                 <div class="create-album">
 167                                         <%include include/createAlbum.html>
 168                                 </div>
 169                         <%/if>
 170
 171                         <%foreach album.images image>
 172                                 <%first><h2><%= Page.ImageBrowser.Header.Images|l10n|html></h2><%/first>
 173                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 174                                 <div id="image-<% image.id|html>" class="image">
 175                                         <div class="image-id hidden"><% image.id|html></div>
 176                                         <div class="image-container">
 177                                                 <a href="imageBrowser.html?image=<%image.id|html>"><% image|image-link max-width=200 max-height=200 mode=enlarge title==image.title></a>
 178                                         </div>
 179                                         <%if album.sone.local>
 180                                                 <form class="edit-image" action="editImage.html" method="post">
 181                                                         <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 182                                                         <input type="hidden" name="returnPage" value="<%request.uri|html>" />
 183                                                         <input type="hidden" name="image" value="<%image.id|html>" />
 184
 185                                                         <div class="show-data">
 186                                                                 <div class="image-title"><% image.title|html></div>
 187                                                                 <div class="image-description"><% image.description|html></div>
 188                                                         </div>
 189                                                         <div class="edit-data hidden">
 190                                                                 <div>
 191                                                                         <input type="text" name="title" value="<%image.title|html>" />
 192                                                                 </div>
 193                                                                 <div>
 194                                                                         <textarea name="description"><%image.description|html></textarea>
 195                                                                 </div>
 196                                                                 <div>
 197                                                                         <button type="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
 198                                                                 </div>
 199                                                         </div>
 200                                                 </form>
 201                                         <%/if>
 202                                 </div>
 203                                 <%= false|store key=endRow>
 204                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 205                                 <%last><%= true|store key=endRow><%/last>
 206                                 <%if endRow></div><%/if>
 207                         <%/foreach>
 208
 209                         <%if album.sone.local>
 210                                 <div class="show-upload-image hidden toggle-link"><a class="small-link">» <%= View.UploadImage.Title|l10n|html></a></div>
 211                                 <div class="hide-upload-image hidden toggle-link"><a class="small-link">« <%= View.UploadImage.Title|l10n|html></a></div>
 212                                 <div class="upload-image">
 213                                         <%include include/uploadImage.html>
 214                                 </div>
 215
 216                                 <%if album.empty>
 217                                         <div class="show-delete-album hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Album.Delete.Title|l10n|html></a></div>
 218                                         <div class="hide-delete-album hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Album.Delete.Title|l10n|html></a></div>
 219                                         <div class="delete-album">
 220                                                 <form id="delete-album" action="deleteAlbum.html" method="get">
 221                                                         <input type="hidden" name="album" value="<%album.id|html>" />
 222                                                         <button type="submit"><%= Page.ImageBrowser.Album.Button.Delete|l10n|html></button>
 223                                                 </form>
 224                                         </div>
 225                                 <%/if>
 226
 227                         <%/if>
 228
 229                 <%/if>
 230
 231         <%elseif imageRequested>
 232
 233                 <h1 class="backlink"><%image.title|html></h1>
 234
 235                 <div class="backlinks">
 236                         <%foreach image.album.backlinks backlink backlinks>
 237                                 <div class="backlink">
 238                                         <a href="<% backlink.target|html>"><% backlink.name|html></a>
 239                                 </div>
 240                                 <%if ! backlinks.last>
 241                                         <div class="separator">&gt;</div>
 242                                 <%/if>
 243                         <%/foreach>
 244                 </div>
 245
 246                 <%ifnull image>
 247
 248                 <%else>
 249
 250                         <%if image.sone.local>
 251                                 <script language="javascript">
 252                                         $(function() {
 253                                                 getTranslation("WebInterface.DefaultText.EditImage.Title", function(text) {
 254                                                         $("#edit-image input[name='title']").each(function() {
 255                                                                 registerInputTextareaSwap(this, text, "title", false, true);
 256                                                         });
 257                                                 });
 258                                                 getTranslation("WebInterface.DefaultText.EditImage.Description", function(text) {
 259                                                         $("#edit-image :input[name='description']").each(function() {
 260                                                                 registerInputTextareaSwap(this, text, "description", true, false);
 261                                                         });
 262                                                 });
 263                                                 $("#edit-image label").hide();
 264
 265                                                 hideAndShowBlock(".edit-image", ".show-edit-image", ".hide-edit-image");
 266                                                 hideAndShowBlock(".delete-image", ".show-delete-image", ".hide-delete-image");
 267                                         });
 268                                 </script>
 269                         <%/if>
 270
 271                         <div class="single-image">
 272                                 <%ifnull !image.key>
 273                                         <a href="/<%image.key|html>"><% image|image-link max-width=640 max-height=480></a>
 274                                 <%else>
 275                                         <a href="imageBrowser.html?image=<%image.id|html>"><% image|image-link max-width=640 max-height=480></a>
 276                                 <%/if>
 277                         </div>
 278
 279                         <p class="parsed"><%image.description|parse sone=image.sone></p>
 280
 281                         <%if image.sone.local>
 282
 283                                 <div class="show-edit-image hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Image.Edit.Title|l10n|html></a></div>
 284                                 <div class="hide-edit-image hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Image.Edit.Title|l10n|html></a></div>
 285                                 <div class="edit-image">
 286                                         <h2><%= Page.ImageBrowser.Image.Edit.Title|l10n|html></h2>
 287
 288                                         <form id="edit-image" action="editImage.html" method="post">
 289                                                 <input type="hidden" name="formPassword" value="<%formPassword|html>" />
 290                                                 <input type="hidden" name="returnPage" value="<%request.uri|html>" />
 291                                                 <input type="hidden" name="image" value="<%image.id|html>" />
 292
 293                                                 <div>
 294                                                         <label for="title"><%= Page.ImageBrowser.Image.Title.Label|l10n|html></label>
 295                                                         <input type="text" name="title" value="<%image.title|html>" />
 296                                                 </div>
 297                                                 <div>
 298                                                         <label for="description"><%= Page.ImageBrowser.Image.Description.Label|l10n|html></label>
 299                                                         <textarea name="description"><%image.description|html></textarea>
 300                                                 </div>
 301                                                 <div>
 302                                                         <button type="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
 303                                                 </div>
 304                                         </form>
 305                                 </div>
 306
 307                                 <div class="show-delete-image hidden toggle-link"><a class="small-link">» <%= Page.ImageBrowser.Image.Delete.Title|l10n|html></a></div>
 308                                 <div class="hide-delete-image hidden toggle-link"><a class="small-link">« <%= Page.ImageBrowser.Image.Delete.Title|l10n|html></a></div>
 309                                 <div class="delete-image">
 310                                         <h2><%= Page.ImageBrowser.Image.Delete.Title|l10n|html></h2>
 311
 312                                         <form id="delete-image" action="deleteImage.html" method="get">
 313                                                 <input type="hidden" name="image" value="<%image.id|html>" />
 314                                                 <button type="submit"><%= Page.ImageBrowser.Image.Button.Delete|l10n|html></button>
 315                                         </form>
 316                                 </div>
 317
 318                         <%/if>
 319
 320                 <%/if>
 321
 322         <%elseif soneRequested>
 323
 324                 <%if sone.local>
 325                         <script language="javascript">
 326                                 $(function() {
 327                                         getTranslation("WebInterface.DefaultText.CreateAlbum.Name", function(text) {
 328                                                 $("#create-album input[name='name']").each(function() {
 329                                                         registerInputTextareaSwap(this, text, "name", false, true);
 330                                                 });
 331                                         });
 332                                         getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
 333                                                 $("#create-album input[name='description']").each(function() {
 334                                                         registerInputTextareaSwap(this, text, "description", true, true);
 335                                                 });
 336                                         });
 337                                         $("#create-album label").hide();
 338
 339                                         hideAndShowBlock(".create-album", ".show-create-album", ".hide-create-album");
 340                                 });
 341                         </script>
 342                 <%/if>
 343
 344                 <%ifnull sone>
 345
 346                         <p><%= Page.ImageBrowser.Sone.Error.NotFound.Text|l10n|html></p>
 347
 348                 <%else>
 349
 350                         <h1><%= Page.ImageBrowser.Sone.Title|l10n|replace needle='{sone}' replacementKey=sone.niceName|html></h1>
 351
 352                         <%foreach sone.albums album>
 353                                 <%if loop.count|mod divisor=3><div class="image-row"><%/if>
 354                                 <div class="album image">
 355                                         <div class="image-container">
 356                                                 <a href="imageBrowser.html?album=<% album.id|html>" title="<% album.title|html>">
 357                                                         <%ifnull album.albumImage>
 358                                                                 <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;"/>
 359                                                         <%else><!-- TODO -->
 360                                                                 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
 361                                                         <%/if>
 362                                                 </a>
 363                                         </div>
 364                                         <div class="show-data">
 365                                                 <div class="album-title"><% album.title|html></div>
 366                                                 <div class="album-description"><% album.description|html></div>
 367                                         </div>
 368                                 </div>
 369                                 <%= false|store key=endRow>
 370                                 <%if loop.count|mod divisor=3 offset=1><%= true|store key=endRow><%/if>
 371                                 <%last><%= true|store key=endRow><%/last>
 372                                 <%if endRow></div><%/if>
 373                         <%/foreach>
 374
 375                         <%if sone.local>
 376                                 <div class="show-create-album hidden toggle-link"><a class="small-link">» <%= View.CreateAlbum.Title|l10n|html></a></div>
 377                                 <div class="hide-create-album hidden toggle-link"><a class="small-link">« <%= View.CreateAlbum.Title|l10n|html></a></div>
 378                                 <div class="create-album">
 379                                         <%include include/createAlbum.html>
 380                                 </div>
 381                         <%/if>
 382
 383                 <%/if>
 384
 385         <%/if>
 386
 387 <%include include/tail.html>