source: extensions/community/add_photos.tpl @ 16859

Last change on this file since 16859 was 16637, checked in by plg, 12 years ago

Compatibility with Piwigo 2.4

Better "zoom" feature on gallery side and admin side

Bug fixed: the "Upload Photos" link in menubar is hidden when Advanced Menu Manager is activated.
File size: 16.8 KB
Line 
1{if $upload_mode eq 'multiple'}
2{combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js' }
3{combine_script id='jquery.uploadify' load='footer' require='jquery' path='admin/include/uploadify/jquery.uploadify.v3.0.0.min.js' }
4{combine_script id='jquery.ui.progressbar' load='footer'}
5{combine_css path="admin/themes/default/uploadify.jGrowl.css"}
6{combine_css path="admin/include/uploadify/uploadify.css"}
7{/if}
8
9{combine_script id='jquery.colorbox' load='footer' require='jquery' path='themes/default/js/plugins/jquery.colorbox.min.js'}
10{combine_css path="themes/default/js/plugins/colorbox/style2/colorbox.css"}
11
12{footer_script}{literal}
13jQuery(document).ready(function(){
14  function checkUploadStart() {
15    var nbErrors = 0;
16    jQuery("#formErrors").hide();
17    jQuery("#formErrors li").hide();
18
19    if (jQuery("#albumSelect option:selected").length == 0) {
20      jQuery("#formErrors #noAlbum").show();
21      nbErrors++;
22    }
23
24    var nbFiles = 0;
25    if (jQuery("#uploadBoxes").size() == 1) {
26      jQuery("input[name^=image_upload]").each(function() {
27        if (jQuery(this).val() != "") {
28          nbFiles++;
29        }
30      });
31    }
32    else {
33      nbFiles = jQuery(".uploadifyQueueItem").size();
34    }
35
36    if (nbFiles == 0) {
37      jQuery("#formErrors #noPhoto").show();
38      nbErrors++;
39    }
40
41    if (nbErrors != 0) {
42      jQuery("#formErrors").show();
43      return false;
44    }
45    else {
46      return true;
47    }
48
49  }
50
51  function humanReadableFileSize(bytes) {
52    var byteSize = Math.round(bytes / 1024 * 100) * .01;
53    var suffix = 'KB';
54
55    if (byteSize > 1000) {
56      byteSize = Math.round(byteSize *.001 * 100) * .01;
57      suffix = 'MB';
58    }
59
60    var sizeParts = byteSize.toString().split('.');
61    if (sizeParts.length > 1) {
62      byteSize = sizeParts[0] + '.' + sizeParts[1].substr(0,2);
63    }
64    else {
65      byteSize = sizeParts[0];
66    }
67
68    return byteSize+suffix;
69  }
70
71  function fillCategoryListbox(selectId, selectedValue) {
72    jQuery.getJSON(
73      "ws.php?format=json&method=pwg.categories.getList",
74      {
75        recursive: true,
76        fullname: true,
77        format: "json",
78      },
79      function(data) {
80        jQuery.each(
81          data.result.categories,
82          function(i,category) {
83            var selected = null;
84            if (category.id == selectedValue) {
85              selected = "selected";
86            }
87           
88            jQuery("<option/>")
89              .attr("value", category.id)
90              .attr("selected", selected)
91              .text(category.name)
92              .appendTo("#"+selectId)
93              ;
94          }
95        );
96      }
97    );
98  }
99
100  jQuery(".addAlbumOpen").colorbox({
101    inline:true,
102    href:"#addAlbumForm",
103    onComplete:function(){
104      jQuery("input[name=category_name]").focus();
105    }
106  });
107
108  jQuery("#addAlbumForm form").submit(function(){
109      jQuery("#categoryNameError").text("");
110
111      jQuery.ajax({
112        url: "ws.php?format=json&method=pwg.categories.add",
113        data: {
114          parent: jQuery("select[name=category_parent] option:selected").val(),
115          name: jQuery("input[name=category_name]").val(),
116        },
117        beforeSend: function() {
118          jQuery("#albumCreationLoading").show();
119        },
120        success:function(html) {
121          jQuery("#albumCreationLoading").hide();
122
123          var newAlbum = jQuery.parseJSON(html).result.id;
124          jQuery(".addAlbumOpen").colorbox.close();
125
126          jQuery("#albumSelect").find("option").remove();
127          fillCategoryListbox("albumSelect", newAlbum);
128
129          jQuery(".albumSelection").show();
130
131          /* we hide the ability to create another album, this is different from the admin upload form */
132          /* in Community, it's complicated to refresh the list of parent albums                       */
133          jQuery("#linkToCreate").hide();
134
135          return true;
136        },
137        error:function(XMLHttpRequest, textStatus, errorThrows) {
138            jQuery("#albumCreationLoading").hide();
139            jQuery("#categoryNameError").text(errorThrows).css("color", "red");
140        }
141      });
142
143      return false;
144  });
145
146  jQuery("#hideErrors").click(function() {
147    jQuery("#formErrors").hide();
148    return false;
149  });
150
151  jQuery("#uploadWarningsSummary a.showInfo").click(function() {
152    jQuery("#uploadWarningsSummary").hide();
153    jQuery("#uploadWarnings").show();
154  });
155
156  jQuery("#showPermissions").click(function() {
157    jQuery(this).parent(".showFieldset").hide();
158    jQuery("#permissions").show();
159  });
160
161  jQuery("#showPhotoProperties").click(function() {
162    jQuery(this).parent(".showFieldset").hide();
163    jQuery("#photoProperties").show();
164    jQuery("input[name=set_photo_properties]").attr('checked', true);
165  });
166
167{/literal}
168{if $upload_mode eq 'html'}
169{literal}
170  function addUploadBox() {
171    var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
172    jQuery(uploadBox).appendTo("#uploadBoxes");
173  }
174
175  addUploadBox();
176
177  jQuery("#addUploadBox A").click(function () {
178    addUploadBox();
179  });
180
181  jQuery("#uploadForm").submit(function() {
182    return checkUploadStart();
183  });
184{/literal}
185{elseif $upload_mode eq 'multiple'}
186
187var uploadify_path = '{$uploadify_path}';
188var upload_id = '{$upload_id}';
189var session_id = '{$session_id}';
190var pwg_token = '{$pwg_token}';
191var buttonText = "{'Select files'|@translate}";
192var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
193
194{literal}
195  jQuery("#uploadify").uploadify({
196    'uploader'       : uploadify_path + '/uploadify.php',
197    'langFile'       : uploadify_path + '/uploadifyLang_en.js',
198    'swf'            : uploadify_path + '/uploadify.swf',
199
200    buttonCursor     : 'pointer',
201    'buttonText'     : buttonText,
202    'width'          : 300,
203    'cancelImage'    : uploadify_path + '/cancel.png',
204    'queueID'        : 'fileQueue',
205    'auto'           : false,
206    'multi'          : true,
207    'fileTypeDesc'   : 'Photo files',
208    'fileTypeExts'   : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG;*.gif;*.GIF',
209    'fileSizeLimit'  : sizeLimit,
210    'progressData'   : 'percentage',
211    requeueErrors   : false,
212    'onSelect'       : function(event,ID,fileObj) {
213      jQuery("#fileQueue").show();
214    },
215    'onQueueComplete'  : function(stats) {
216      jQuery("input[name=submit_upload]").click();
217    },
218    onUploadError: function (file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
219      /* uploadify calls the onUploadError trigger when the user cancels a file! */
220      /* There no error so we skip it to avoid panic.                            */
221      if ("Cancelled" == errorString) {
222        return false;
223      }
224
225      var msg = file.name+', '+errorString;
226
227      /* Let's put the error message in the form to display once the form is     */
228      /* performed, it makes support easier when user can copy/paste the error   */
229      /* thrown.                                                                 */
230      jQuery("#uploadForm").append('<input type="hidden" name="onUploadError[]" value="'+msg+'">');
231
232      jQuery.jGrowl(
233        '<p></p>onUploadError '+msg,
234        {
235          theme:  'error',
236          header: 'ERROR',
237          life:   4000,
238          sticky: false
239        }
240      );
241
242      return false;
243    },
244    onUploadSuccess: function (file,data,response) {
245      var data = jQuery.parseJSON(data);
246      jQuery("#uploadedPhotos").parent("fieldset").show();
247
248      /* Let's display the thumbnail of the uploaded photo, no need to wait the  */
249      /* end of the queue                                                        */
250      jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
251    },
252    onUploadComplete: function(file,swfuploadifyQueue) {
253      var max = parseInt(jQuery("#progressMax").text());
254      var next = parseInt(jQuery("#progressCurrent").text())+1;
255      var addToProgressBar = 2;
256      if (next <= max) {
257        jQuery("#progressCurrent").text(next);
258      }
259      else {
260        addToProgressBar = 1;
261      }
262
263      jQuery("#progressbar").progressbar({
264        value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
265      });
266    }
267  });
268
269  jQuery("input[type=button]").click(function() {
270    if (!checkUploadStart()) {
271      return false;
272    }
273
274    jQuery("#uploadify").uploadifySettings(
275      'postData',
276      {
277        'category_id' : jQuery("select[name=category] option:selected").val(),
278        'level' : jQuery("select[name=level] option:selected").val(),
279        'upload_id' : upload_id,
280        'session_id' : session_id,
281        'pwg_token' : pwg_token,
282      }
283    );
284
285    nb_files = jQuery(".uploadifyQueueItem").size();
286    jQuery("#progressMax").text(nb_files);
287    jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
288    jQuery("#progressCurrent").text(1);
289
290    jQuery("#uploadProgress").show();
291
292    jQuery("#uploadify").uploadifyUpload();
293  });
294
295{/literal}
296{/if}
297});
298{/footer_script}
299
300{literal}
301<style type="text/css">
302/*
303#photosAddContent form p {
304  text-align:left;
305}
306*/
307
308#photosAddContent FIELDSET {
309  width:650px;
310  margin:20px auto;
311}
312
313#photosAddContent fieldset#photoProperties {padding-bottom:0}
314#photosAddContent fieldset#photoProperties p {text-align:left;margin:0 0 1em 0;line-height:20px;}
315#photosAddContent fieldset#photoProperties input[type="text"] {width:320px}
316#photosAddContent fieldset#photoProperties textarea {width:500px; height:100px}
317
318#photosAddContent P {
319  margin:0;
320}
321
322#uploadBoxes P {
323  margin:0;
324  margin-bottom:2px;
325  padding:0;
326}
327
328#uploadBoxes .file {margin-bottom:5px;text-align:left;}
329#uploadBoxes {margin-top:20px;}
330#addUploadBox {margin-bottom:2em;}
331
332p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
333p#uploadWarningsSummary .showInfo {position:static;display:inline;padding:1px 6px;margin-left:3px;}
334p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
335p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
336
337#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
338
339#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
340#progressbar {border:1px solid #ccc; background-color:#eee;}
341.ui-progressbar-value { background-image: url(admin/themes/default/images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;}
342
343.showInfo {display:block;position:absolute;top:0;right:5px;width:15px;font-style:italic;font-family:"Georgia",serif;background-color:#464646;font-size:0.9em;border-radius:10px;-moz-border-radius:10px;}
344.showInfo:hover {cursor:pointer}
345.showInfo {color:#fff;background-color:#999; }
346.showInfo:hover {color:#fff;border:none;background-color:#333}
347</style>
348{/literal}
349
350<div id="photosAddContent">
351
352{if count($setup_errors) > 0}
353<div class="errors">
354  <ul>
355  {foreach from=$setup_errors item=error}
356    <li>{$error}</li>
357  {/foreach}
358  </ul>
359</div>
360{else}
361
362  {if count($setup_warnings) > 0}
363<div class="warnings">
364  <ul>
365    {foreach from=$setup_warnings item=warning}
366    <li>{$warning}</li>
367    {/foreach}
368  </ul>
369  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
370</div>
371  {/if}
372
373
374{if !empty($thumbnails)}
375<fieldset>
376  <legend>{'Uploaded Photos'|@translate}</legend>
377  <div>
378  {foreach from=$thumbnails item=thumbnail}
379    <a href="{$thumbnail.link}"  class="{if isset($thumbnail.lightbox)}colorboxThumb{else}externalLink{/if}">
380      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
381    </a>
382  {/foreach}
383  </div>
384</fieldset>
385<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
386{else}
387
388<div id="formErrors" class="errors" style="display:none">
389  <ul>
390    <li id="noAlbum">{'Select an album'|@translate}</li>
391    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
392  </ul>
393  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
394</div>
395
396<div style="display:none">
397  <div id="addAlbumForm" style="text-align:left;padding:1em;">
398    <form>
399      {'Parent album'|@translate}<br>
400      <select id ="category_parent" name="category_parent">
401        <option value="0">------------</option>
402        {html_options options=$category_parent_options selected=$category_parent_options_selected}
403      </select>
404
405      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
406      <br><br><br><input type="submit" value="{'Create'|@translate}"> <span id="albumCreationLoading" style="display:none"><img src="themes/default/images/ajax-loader-small.gif"></span>
407    </form>
408  </div>
409</div>
410
411<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
412{if $upload_mode eq 'multiple'}
413    <input name="upload_id" value="{$upload_id}" type="hidden">
414{/if}
415
416    <fieldset>
417      <legend>{'Drop into album'|@translate}</legend>
418
419      <span class="albumSelection"{if count($category_options) == 0} style="display:none"{/if}>
420      <select id="albumSelect" name="category">
421        {html_options options=$category_options selected=$category_options_selected}
422      </select>
423      </span>
424{if $create_subcategories}
425      <div id="linkToCreate">
426      <span class="albumSelection">{'... or '|@translate}</span><a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
427      </div>
428{/if}     
429    </fieldset>
430
431    <fieldset>
432      <legend>{'Select files'|@translate}</legend>
433
434    <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="showInfo" title="{'Learn more'|@translate}">i</a></p>
435
436    <p id="uploadWarnings">
437{'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand}
438{'Allowed file types: %s.'|@translate|@sprintf:$upload_file_types}
439  {if isset($max_upload_resolution)}
440{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate|@sprintf:$max_upload_resolution:$max_upload_width:$max_upload_height}
441  {/if}
442    </p>
443
444{if $upload_mode eq 'html'}
445      <div id="uploadBoxes"></div>
446      <div id="addUploadBox">
447        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
448      </div>
449
450    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
451
452{elseif $upload_mode eq 'multiple'}
453    <div id="uploadify">You've got a problem with your JavaScript</div>
454
455    <div id="fileQueue" style="display:none"></div>
456
457    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
458
459{/if}
460    </fieldset>
461
462    <p class="showFieldset"><a id="showPhotoProperties" href="#">{'Set Photo Properties'|@translate}</a></p>
463
464    <fieldset id="photoProperties" style="display:none">
465      <legend>{'Photo Properties'|@translate}</legend>
466
467      <input type="checkbox" name="set_photo_properties" style="display:none">
468
469      <p>
470        {'Name'|@translate}<br>
471        <input type="text" class="large" name="name" value="{$NAME}">
472      </p>
473
474      <p>
475        {'Author'|@translate}<br>
476        <input type="text" class="large" name="author" value="{$AUTHOR}">
477      </p>
478
479      <p>
480        {'Description'|@translate}<br>
481        <textarea name="description" id="description" class="description" style="margin:0">{$DESCRIPTION}</textarea>
482      </p>
483
484    </fieldset>
485
486{if $enable_permissions}
487    <p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
488
489    <fieldset id="permissions" style="display:none">
490      <legend>{'Who can see these photos?'|@translate}</legend>
491
492      <select name="level" size="1">
493        {html_options options=$level_options selected=$level_options_selected}
494      </select>
495    </fieldset>
496{/if}
497
498{if $upload_mode eq 'html'}
499    <p>
500      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
501    </p>
502{elseif $upload_mode eq 'multiple'}
503    <p style="margin-bottom:1em">
504      <input class="submit" type="button" value="{'Start Upload'|@translate}">
505      <input type="submit" name="submit_upload" style="display:none">
506    </p>
507{/if}
508</form>
509
510<div id="uploadProgress" style="display:none">
511{'Photo %s of %s'|@translate|@sprintf:'<span id="progressCurrent">1</span>':'<span id="progressMax">10</span>'}
512<br>
513<div id="progressbar"></div>
514</div>
515
516<fieldset style="display:none">
517  <legend>{'Uploaded Photos'|@translate}</legend>
518  <div id="uploadedPhotos"></div>
519</fieldset>
520
521{/if} {* empty($thumbnails) *}
522{/if} {* $setup_errors *}
523
524</div> <!-- photosAddContent -->
525
526{* Community specific *}
527{footer_script}{literal}
528jQuery(document).ready(function(){
529  jQuery("a.colorboxThumb").colorbox({rel:"colorboxThumb"});
530
531  jQuery("a.externalLink").click(function() {
532    window.open($(this).attr("href"));
533    return false;
534  });
535});
536{/literal}{/footer_script}
Note: See TracBrowser for help on using the repository browser.