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