1 <%include include/head.html>
3 <div class="page-id hidden">image-browser</div>
5 <script language="javascript">
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");
17 $(clickToHideElement).click(function() {
18 $(blockElement).slideUp();
19 $(clickToHideElement).addClass("hidden");
20 $(clickToShowElement).removeClass("hidden");
31 <p><%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html></p>
33 <%elseifnull album.title>
35 <p><%= Page.ImageBrowser.Album.Error.NotFound.Text|l10n|html></p>
39 <%if album.sone.local>
40 <script language="javascript">
42 /* ID of the image currently being edited. */
43 var editingImageId = null;
46 * Shows the form for editing an image.
48 * @param imageId The ID of the image to edit.
50 function editImage(imageId) {
51 if (editingImageId != imageId) {
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) {
66 * Cancels all image editing.
68 function cancelEditing() {
69 $(".show-data").show();
70 $(".edit-data").hide();
71 $("form.edit-image").each(function() {
74 $(document).unbind("click.sone");
75 editingImageId = null;
79 * Returns the image element with the given ID.
81 * @param imageId The ID of the image
82 * @return The image element
84 function getImage(imageId) {
85 return $("#sone .image .image-id:contains('" + imageId + "')").closest(".image");
91 * @param sourceId The ID of the source image
92 * @param destinationId The ID of the destionation image
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);
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");
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");
116 getTranslation("WebInterface.DefaultText.UploadImage.Title", function(text) {
117 $("#upload-image :input[name='title']").each(function() {
118 registerInputTextareaSwap(this, text, "title", false, true);
121 getTranslation("WebInterface.DefaultText.UploadImage.Description", function(text) {
122 $("#upload-image :input[name='description']").each(function() {
123 registerInputTextareaSwap(this, text, "description", true, false);
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);
132 getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
133 $("#create-album input[name='description']").each(function() {
134 registerInputTextareaSwap(this, text, "description", true, true);
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);
143 getTranslation("WebInterface.DefaultText.EditAlbum.Description", function(text) {
144 $("#edit-album :input[name='description']").each(function() {
145 registerInputTextareaSwap(this, text, "description", true, false);
148 $("#edit-album label").hide();
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");
155 $(".image").each(function() {
156 imageId = $(this).closest(".image").find(".image-id").text();
157 (function(element, imageId) {
158 $(".show-data", element).click(function() {
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);
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);
189 <h1 class="backlink"><%= Page.ImageBrowser.Album.Title|l10n|replace needle='{album}' replacementKey=album.title|html></h1>
191 <div class="backlinks">
192 <%foreach album.backlinks backlink backlinks>
193 <div class="backlink">
194 <a href="<% backlink.target|html>"><% backlink.name|html></a>
196 <%if ! backlinks.last>
197 <div class="separator">></div>
202 <p id="description"><% album.description|html></p>
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>
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>" />
214 <%if ! album.images.empty>
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>
226 <label for="title"><%= Page.ImageBrowser.Album.Label.Title|l10n|html></label>
227 <input type="text" name="title" value="<%album.title|html>" />
230 <label for="description"><%= Page.ImageBrowser.Album.Label.Description|l10n|html></label>
231 <textarea name="description"><%album.description|html></textarea>
233 <button type="submit"><%= Page.ImageBrowser.Album.Button.Save|l10n|html></button>
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;" />
247 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
251 <div class="show-data">
252 <div class="album-title"><% album.title|html></div>
253 <div class="album-description"><% album.description|html></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>
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>
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>
278 <div class="show-data">
279 <div class="image-title"><% image.title|html></div>
280 <div class="image-description"><% image.description|html></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>" />
288 <div class="edit-data hidden">
290 <input type="text" name="title" value="<%image.title|html>" />
293 <textarea name="description"><%image.description|html></textarea>
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>
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>
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>
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>
332 <%elseif imageRequested>
334 <h1 class="backlink"><%image.title|html></h1>
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>
341 <%if ! backlinks.last>
342 <div class="separator">></div>
351 <%if image.sone.local>
352 <script language="javascript">
354 getTranslation("WebInterface.DefaultText.EditImage.Title", function(text) {
355 $("#edit-image input[name='title']").each(function() {
356 registerInputTextareaSwap(this, text, "title", false, true);
359 getTranslation("WebInterface.DefaultText.EditImage.Description", function(text) {
360 $("#edit-image :input[name='description']").each(function() {
361 registerInputTextareaSwap(this, text, "description", true, false);
364 $("#edit-image label").hide();
366 hideAndShowBlock(".edit-image", ".show-edit-image", ".hide-edit-image");
367 hideAndShowBlock(".delete-image", ".show-delete-image", ".hide-delete-image");
372 <div class="single-image">
374 <a href="/<%image.key|html>"><% image|image-link max-width=640 max-height=480></a>
376 <a href="imageBrowser.html?image=<%image.id|html>"><% image|image-link max-width=640 max-height=480></a>
380 <p class="parsed"><%image.description|parse sone=image.sone></p>
382 <%if image.sone.local>
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>
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>" />
395 <label for="title"><%= Page.ImageBrowser.Image.Title.Label|l10n|html></label>
396 <input type="text" name="title" value="<%image.title|html>" />
399 <label for="description"><%= Page.ImageBrowser.Image.Description.Label|l10n|html></label>
400 <textarea name="description"><%image.description|html></textarea>
403 <button type="submit"><%= Page.ImageBrowser.Image.Button.Save|l10n|html></button>
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>
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>
423 <%elseif soneRequested>
426 <script language="javascript">
428 getTranslation("WebInterface.DefaultText.CreateAlbum.Name", function(text) {
429 $("#create-album input[name='name']").each(function() {
430 registerInputTextareaSwap(this, text, "name", false, true);
433 getTranslation("WebInterface.DefaultText.CreateAlbum.Description", function(text) {
434 $("#create-album input[name='description']").each(function() {
435 registerInputTextareaSwap(this, text, "description", true, true);
438 $("#create-album label").hide();
440 hideAndShowBlock(".create-album", ".show-create-album", ".hide-create-album");
447 <p><%= Page.ImageBrowser.Sone.Error.NotFound.Text|l10n|html></p>
451 <h1><%= Page.ImageBrowser.Sone.Title|l10n|replace needle='{sone}' replacementKey=sone.niceName|html></h1>
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;"/>
461 <% album.albumImage|image-link max-width=200 max-height=200 mode=enlarge title==album.title>
465 <div class="show-data">
466 <div class="album-title"><% album.title|html></div>
467 <div class="album-description"><% album.description|html></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>
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>
488 <%include include/tail.html>