source: extensions/community/add_photos.tpl @ 28805

Last change on this file since 28805 was 27037, checked in by plg, 11 years ago

compatibility with Piwigo 2.6
File size: 20.1 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="themes/default/js/plugins/jquery.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(){
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
263    buttonCursor     : 'pointer',
264    'buttonText'     : buttonText,
265    'width'          : 300,
266    'cancelImage'    : uploadify_path + '/cancel.png',
267    'queueID'        : 'fileQueue',
268    'auto'           : false,
269    'multi'          : true,
270    'fileTypeDesc'   : 'Photo files',
271    'fileTypeExts'   : '{/literal}{$uploadify_fileTypeExts}{literal}',
272    'fileSizeLimit'  : sizeLimit,
273    'progressData'   : 'percentage',
274{/literal}
275  {if isset($limit_nb_photos)}
276    'queueSizeLimit' : {$limit_nb_photos},
277  {/if}
278{literal}
279    requeueErrors   : false,
280    'onSelect'       : function(file) {
281      console.log('filesize = '+file.size+'bytes');
282
283      if (typeof limit_storage != 'undefined') {
284        if (sumQueueFilesize + file.size > limit_storage) {
285          jQuery.jGrowl(
286            '<p></p>'+sprintf(
287              '{/literal}{'File %s too big (%uMB), quota of %uMB exceeded'|@translate}{literal}',
288              file.name,
289              Math.round(file.size/(1024*1024)),
290              limit_storage/(1024*1024)
291            ),
292            {
293              theme:  'error',
294              header: 'ERROR',
295              life:   4000,
296              sticky: false
297            }
298          );
299
300          jQuery('#uploadify').uploadifyCancel(file.id);
301          return false;
302        }
303        else {
304          sumQueueFilesize += file.size;
305        }
306      }
307
308      jQuery("#fileQueue").show();
309    },
310    'onCancel' : function(file) {
311      console.log('The file ' + file.name + ' was cancelled ('+file.size+')');
312    },
313    'onQueueComplete'  : function(stats) {
314      jQuery("input[name=submit_upload]").click();
315    },
316    onUploadError: function (file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
317      /* uploadify calls the onUploadError trigger when the user cancels a file! */
318      /* There no error so we skip it to avoid panic.                            */
319      if ("Cancelled" == errorString) {
320        return false;
321      }
322
323      var msg = file.name+', '+errorString;
324
325      /* Let's put the error message in the form to display once the form is     */
326      /* performed, it makes support easier when user can copy/paste the error   */
327      /* thrown.                                                                 */
328      jQuery("#uploadForm").append('<input type="hidden" name="onUploadError[]" value="'+msg+'">');
329
330      jQuery.jGrowl(
331        '<p></p>onUploadError '+msg,
332        {
333          theme:  'error',
334          header: 'ERROR',
335          life:   4000,
336          sticky: false
337        }
338      );
339
340      return false;
341    },
342    onUploadSuccess: function (file,data,response) {
343      var data = jQuery.parseJSON(data);
344      jQuery("#uploadedPhotos").parent("fieldset").show();
345
346      /* Let's display the thumbnail of the uploaded photo, no need to wait the  */
347      /* end of the queue                                                        */
348      jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
349    },
350    onUploadComplete: function(file,swfuploadifyQueue) {
351      var max = parseInt(jQuery("#progressMax").text());
352      var next = parseInt(jQuery("#progressCurrent").text())+1;
353      var addToProgressBar = 2;
354      if (next <= max) {
355        jQuery("#progressCurrent").text(next);
356      }
357      else {
358        addToProgressBar = 1;
359      }
360
361      jQuery("#progressbar").progressbar({
362        value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
363      });
364    }
365  });
366
367  jQuery("input[type=button]").click(function() {
368    if (!checkUploadStart()) {
369      return false;
370    }
371
372    jQuery("#uploadify").uploadifySettings(
373      'postData',
374      {
375        'category_id' : jQuery("select[name=category] option:selected").val(),
376        'level' : jQuery("select[name=level] option:selected").val(),
377        'upload_id' : upload_id,
378        'session_id' : session_id,
379        'pwg_token' : pwg_token,
380      }
381    );
382
383    nb_files = jQuery(".uploadifyQueueItem").size();
384    jQuery("#progressMax").text(nb_files);
385    jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
386    jQuery("#progressCurrent").text(1);
387
388    jQuery("#uploadProgress").show();
389
390    jQuery("#uploadify").uploadifyUpload();
391  });
392
393{/literal}
394{/if}
395});
396{/footer_script}
397
398{literal}
399<style type="text/css">
400/*
401#photosAddContent form p {
402  text-align:left;
403}
404*/
405
406#photosAddContent FIELDSET {
407  width:650px;
408  margin:20px auto;
409}
410
411#photosAddContent fieldset#photoProperties {padding-bottom:0}
412#photosAddContent fieldset#photoProperties p {text-align:left;margin:0 0 1em 0;line-height:20px;}
413#photosAddContent fieldset#photoProperties input[type="text"] {width:320px}
414#photosAddContent fieldset#photoProperties textarea {width:500px; height:100px}
415
416#photosAddContent P {
417  margin:0;
418}
419
420#uploadBoxes P {
421  margin:0;
422  margin-bottom:2px;
423  padding:0;
424}
425
426#uploadBoxes .file {margin-bottom:5px;text-align:left;}
427#uploadBoxes {margin-top:20px;}
428#addUploadBox {margin-bottom:2em;}
429
430p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
431p#uploadWarningsSummary .showInfo {position:static;display:inline;padding:1px 6px;margin-left:3px;}
432p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
433p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
434
435#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
436
437#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
438#progressbar {border:1px solid #ccc; background-color:#eee;}
439.ui-progressbar-value { background-image: url(admin/themes/default/images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;}
440
441.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;}
442.showInfo:hover {cursor:pointer}
443.showInfo {color:#fff;background-color:#999; }
444.showInfo:hover {color:#fff;border:none;background-color:#333}
445</style>
446{/literal}
447
448<div id="photosAddContent">
449
450{if count($setup_errors) > 0}
451<div class="errors">
452  <ul>
453  {foreach from=$setup_errors item=error}
454    <li>{$error}</li>
455  {/foreach}
456  </ul>
457</div>
458{else}
459
460  {if count($setup_warnings) > 0}
461<div class="warnings">
462  <ul>
463    {foreach from=$setup_warnings item=warning}
464    <li>{$warning}</li>
465    {/foreach}
466  </ul>
467  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
468</div>
469  {/if}
470
471
472{if !empty($thumbnails)}
473<fieldset>
474  <legend>{'Uploaded Photos'|@translate}</legend>
475  <div>
476  {foreach from=$thumbnails item=thumbnail}
477    <a href="{$thumbnail.link}"  class="{if isset($thumbnail.lightbox)}colorboxThumb{else}externalLink{/if}">
478      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
479    </a>
480  {/foreach}
481  </div>
482</fieldset>
483<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
484{else}
485
486<div id="formErrors" class="errors" style="display:none">
487  <ul>
488    <li id="noAlbum">{'Select an album'|@translate}</li>
489    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
490  </ul>
491  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
492</div>
493
494<div style="display:none">
495  <div id="addAlbumForm" style="text-align:left;padding:1em;">
496    <form>
497      {'Parent album'|@translate}<br>
498      <select id ="category_parent" name="category_parent">
499        <option value="0">------------</option>
500        {html_options options=$category_parent_options selected=$category_parent_options_selected}
501      </select>
502
503      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
504      <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>
505    </form>
506  </div>
507</div>
508
509<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
510{if $upload_mode eq 'multiple'}
511    <input name="upload_id" value="{$upload_id}" type="hidden">
512{/if}
513
514    <fieldset>
515      <legend>{'Drop into album'|@translate}</legend>
516
517      <span class="albumSelection"{if count($category_options) == 0} style="display:none"{/if}>
518      <select id="albumSelect" name="category">
519        {html_options options=$category_options selected=$category_options_selected}
520      </select>
521      </span>
522{if $create_subcategories}
523      <div id="linkToCreate">
524      <span class="albumSelection">{'... or '|@translate}</span><a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
525      </div>
526{/if}     
527    </fieldset>
528
529    <fieldset>
530      <legend>{'Select files'|@translate}</legend>
531
532    <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}
533<a class="showInfo" title="{'Learn more'|@translate}">i</a></p>
534
535    <p id="uploadWarnings">
536{'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand}
537{'Allowed file types: %s.'|@translate|@sprintf:$upload_file_types}
538  {if isset($max_upload_resolution)}
539{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate|@sprintf:$max_upload_resolution:$max_upload_width:$max_upload_height}
540  {/if}
541{$quota_details}
542    </p>
543
544{if $upload_mode eq 'html'}
545      <div id="uploadBoxes"></div>
546      <div id="addUploadBox">
547        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
548      </div>
549
550    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
551
552{elseif $upload_mode eq 'multiple'}
553    <div id="uploadify">You've got a problem with your JavaScript</div>
554
555    <div id="fileQueue" style="display:none"></div>
556
557    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
558
559{/if}
560    </fieldset>
561
562    <p class="showFieldset"><a id="showPhotoProperties" href="#">{'Set Photo Properties'|@translate}</a></p>
563
564    <fieldset id="photoProperties" style="display:none">
565      <legend>{'Photo Properties'|@translate}</legend>
566
567      <input type="checkbox" name="set_photo_properties" style="display:none">
568
569      <p>
570        {'Title'|@translate}<br>
571        <input type="text" class="large" name="name" value="">
572      </p>
573
574      <p>
575        {'Author'|@translate}<br>
576        <input type="text" class="large" name="author" value="">
577      </p>
578
579      <p>
580        {'Description'|@translate}<br>
581        <textarea name="description" id="description" class="description" style="margin:0"></textarea>
582      </p>
583
584    </fieldset>
585
586{if $upload_mode eq 'html'}
587    <p>
588      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
589    </p>
590{elseif $upload_mode eq 'multiple'}
591    <p style="margin-bottom:1em">
592      <input class="submit" type="button" value="{'Start Upload'|@translate}">
593      <input type="submit" name="submit_upload" style="display:none">
594    </p>
595{/if}
596</form>
597
598<div id="uploadProgress" style="display:none">
599{'Photo %s of %s'|@translate|@sprintf:'<span id="progressCurrent">1</span>':'<span id="progressMax">10</span>'}
600<br>
601<div id="progressbar"></div>
602</div>
603
604<fieldset style="display:none">
605  <legend>{'Uploaded Photos'|@translate}</legend>
606  <div id="uploadedPhotos"></div>
607</fieldset>
608
609{/if} {* empty($thumbnails) *}
610{/if} {* $setup_errors *}
611
612</div> <!-- photosAddContent -->
613
614{* Community specific *}
615{footer_script}{literal}
616jQuery(document).ready(function(){
617  jQuery("a.colorboxThumb").colorbox({rel:"colorboxThumb"});
618
619  jQuery("a.externalLink").click(function() {
620    window.open($(this).attr("href"));
621    return false;
622  });
623});
624{/literal}{/footer_script}
Note: See TracBrowser for help on using the repository browser.