source: extensions/community/add_photos.tpl @ 31061

Last change on this file since 31061 was 29970, checked in by plg, 10 years ago

compatibility with Piwigo 2.7

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