source: extensions/community/add_photos.tpl @ 12333

Last change on this file since 12333 was 12333, checked in by plg, 13 years ago

Make Community plugin compatible with the new upload form

The privacy level is set at the beginning of uploadify because Piwigo core
don't use 8 by default.

As soon as the user has created an album, he can't create another one (too
complicated to refresh the list of parent albums: this feature doesn't deserve
to make the code more complexe)
File size: 16.4 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  });
165
166{/literal}
167{if $upload_mode eq 'html'}
168{literal}
169  function addUploadBox() {
170    var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
171    jQuery(uploadBox).appendTo("#uploadBoxes");
172  }
173
174  addUploadBox();
175
176  jQuery("#addUploadBox A").click(function () {
177    addUploadBox();
178  });
179
180  jQuery("#uploadForm").submit(function() {
181    return checkUploadStart();
182  });
183{/literal}
184{elseif $upload_mode eq 'multiple'}
185
186var uploadify_path = '{$uploadify_path}';
187var upload_id = '{$upload_id}';
188var session_id = '{$session_id}';
189var pwg_token = '{$pwg_token}';
190var buttonText = "{'Select files'|@translate}";
191var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
192
193{literal}
194  jQuery("#uploadify").uploadify({
195    'uploader'       : uploadify_path + '/uploadify.php',
196    'langFile'       : uploadify_path + '/uploadifyLang_en.js',
197    'swf'            : uploadify_path + '/uploadify.swf',
198
199    buttonCursor     : 'pointer',
200    'buttonText'     : buttonText,
201    'width'          : 300,
202    'cancelImage'    : uploadify_path + '/cancel.png',
203    'queueID'        : 'fileQueue',
204    'auto'           : false,
205    'multi'          : true,
206    'fileTypeDesc'   : 'Photo files',
207    'fileTypeExts'   : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG;*.gif;*.GIF',
208    'fileSizeLimit'  : sizeLimit,
209    'progressData'   : 'percentage',
210    requeueErrors   : false,
211    'onSelect'       : function(event,ID,fileObj) {
212      jQuery("#fileQueue").show();
213    },
214    'onQueueComplete'  : function(stats) {
215      jQuery("input[name=submit_upload]").click();
216    },
217    onUploadError: function (file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
218      /* uploadify calls the onUploadError trigger when the user cancels a file! */
219      /* There no error so we skip it to avoid panic.                            */
220      if ("Cancelled" == errorString) {
221        return false;
222      }
223
224      var msg = file.name+', '+errorString;
225
226      /* Let's put the error message in the form to display once the form is     */
227      /* performed, it makes support easier when user can copy/paste the error   */
228      /* thrown.                                                                 */
229      jQuery("#uploadForm").append('<input type="hidden" name="onUploadError[]" value="'+msg+'">');
230
231      jQuery.jGrowl(
232        '<p></p>onUploadError '+msg,
233        {
234          theme:  'error',
235          header: 'ERROR',
236          life:   4000,
237          sticky: false
238        }
239      );
240
241      return false;
242    },
243    onUploadSuccess: function (file,data,response) {
244      var data = jQuery.parseJSON(data);
245      jQuery("#uploadedPhotos").parent("fieldset").show();
246
247      /* Let's display the thumbnail of the uploaded photo, no need to wait the  */
248      /* end of the queue                                                        */
249      jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
250    },
251    onUploadComplete: function(file,swfuploadifyQueue) {
252      var max = parseInt(jQuery("#progressMax").text());
253      var next = parseInt(jQuery("#progressCurrent").text())+1;
254      var addToProgressBar = 2;
255      if (next <= max) {
256        jQuery("#progressCurrent").text(next);
257      }
258      else {
259        addToProgressBar = 1;
260      }
261
262      jQuery("#progressbar").progressbar({
263        value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
264      });
265    }
266  });
267
268  jQuery("input[type=button]").click(function() {
269    if (!checkUploadStart()) {
270      return false;
271    }
272
273    jQuery("#uploadify").uploadifySettings(
274      'postData',
275      {
276        'category_id' : jQuery("select[name=category] option:selected").val(),
277        'level' : jQuery("select[name=level] option:selected").val(),
278        'upload_id' : upload_id,
279        'session_id' : session_id,
280        'pwg_token' : pwg_token,
281      }
282    );
283
284    nb_files = jQuery(".uploadifyQueueItem").size();
285    jQuery("#progressMax").text(nb_files);
286    jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
287    jQuery("#progressCurrent").text(1);
288
289    jQuery("#uploadProgress").show();
290
291    jQuery("#uploadify").uploadifyUpload();
292  });
293
294{/literal}
295{/if}
296});
297{/footer_script}
298
299{literal}
300<style type="text/css">
301/*
302#photosAddContent form p {
303  text-align:left;
304}
305*/
306
307#photosAddContent FIELDSET {
308  width:650px;
309  margin:20px auto;
310}
311
312#photosAddContent fieldset#photoProperties {padding-bottom:0}
313#photosAddContent fieldset#photoProperties p {text-align:left;margin:0 0 1em 0;line-height:20px;}
314#photosAddContent fieldset#photoProperties input[type="text"] {width:320px}
315#photosAddContent fieldset#photoProperties textarea {width:500px; height:100px}
316
317#photosAddContent P {
318  margin:0;
319}
320
321#uploadBoxes P {
322  margin:0;
323  margin-bottom:2px;
324  padding:0;
325}
326
327#uploadBoxes .file {margin-bottom:5px;text-align:left;}
328#uploadBoxes {margin-top:20px;}
329#addUploadBox {margin-bottom:2em;}
330
331p#uploadWarningsSummary {text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
332p#uploadWarningsSummary .showInfo {position:static;display:inline;padding:1px 6px;margin-left:3px;}
333p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
334p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
335
336#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
337
338#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
339#progressbar {border:1px solid #ccc; background-color:#eee;}
340.ui-progressbar-value { background-image: url(admin/themes/default/images/pbar-ani.gif); height:10px;margin:-1px;border:1px solid #E78F08;}
341
342.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;}
343.showInfo:hover {cursor:pointer}
344.showInfo {color:#fff;background-color:#999; }
345.showInfo:hover {color:#fff;border:none;background-color:#333}
346</style>
347{/literal}
348
349<div id="photosAddContent">
350
351{if count($setup_errors) > 0}
352<div class="errors">
353  <ul>
354  {foreach from=$setup_errors item=error}
355    <li>{$error}</li>
356  {/foreach}
357  </ul>
358</div>
359{else}
360
361  {if count($setup_warnings) > 0}
362<div class="warnings">
363  <ul>
364    {foreach from=$setup_warnings item=warning}
365    <li>{$warning}</li>
366    {/foreach}
367  </ul>
368  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
369</div>
370  {/if}
371
372
373{if !empty($thumbnails)}
374<fieldset>
375  <legend>{'Uploaded Photos'|@translate}</legend>
376  <div>
377  {foreach from=$thumbnails item=thumbnail}
378    <a href="{$thumbnail.link}" class="externalLink">
379      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
380    </a>
381  {/foreach}
382  </div>
383</fieldset>
384<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
385{else}
386
387<div id="formErrors" class="errors" style="display:none">
388  <ul>
389    <li id="noAlbum">{'Select an album'|@translate}</li>
390    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
391  </ul>
392  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
393</div>
394
395<div style="display:none">
396  <div id="addAlbumForm" style="text-align:left;padding:1em;">
397    <form>
398      {'Parent album'|@translate}<br>
399      <select id ="category_parent" name="category_parent">
400        <option value="0">------------</option>
401        {html_options options=$category_parent_options selected=$category_parent_options_selected}
402      </select>
403
404      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
405      <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>
406    </form>
407  </div>
408</div>
409
410<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
411{if $upload_mode eq 'multiple'}
412    <input name="upload_id" value="{$upload_id}" type="hidden">
413{/if}
414
415    <fieldset>
416      <legend>{'Drop into album'|@translate}</legend>
417
418      <span class="albumSelection"{if count($category_options) == 0} style="display:none"{/if}>
419      <select id="albumSelect" name="category">
420        {html_options options=$category_options selected=$category_options_selected}
421      </select>
422      </span>
423{if $create_subcategories}
424      <div id="linkToCreate">
425      <span class="albumSelection">{'... or '|@translate}</span><a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
426      </div>
427{/if}     
428    </fieldset>
429
430    <fieldset>
431      <legend>{'Select files'|@translate}</legend>
432
433    <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>
434
435    <p id="uploadWarnings">
436{'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand}
437{'Allowed file types: %s.'|@translate|@sprintf:$upload_file_types}
438  {if isset($max_upload_resolution)}
439{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate|@sprintf:$max_upload_resolution:$max_upload_width:$max_upload_height}
440  {/if}
441    </p>
442
443{if $upload_mode eq 'html'}
444      <div id="uploadBoxes"></div>
445      <div id="addUploadBox">
446        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
447      </div>
448
449    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
450
451{elseif $upload_mode eq 'multiple'}
452    <div id="uploadify">You've got a problem with your JavaScript</div>
453
454    <div id="fileQueue" style="display:none"></div>
455
456    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
457
458{/if}
459    </fieldset>
460
461    <p class="showFieldset"><a id="showPhotoProperties" href="#">{'Set Photo Properties'|@translate}</a></p>
462
463    <fieldset id="photoProperties" style="display:none">
464      <legend>{'Photo Properties'|@translate}</legend>
465
466      <p>
467        {'Name'|@translate}<br>
468        <input type="text" class="large" name="name" value="{$NAME}">
469      </p>
470
471      <p>
472        {'Author'|@translate}<br>
473        <input type="text" class="large" name="author" value="{$AUTHOR}">
474      </p>
475
476      <p>
477        {'Description'|@translate}<br>
478        <textarea name="description" id="description" class="description" style="margin:0">{$DESCRIPTION}</textarea>
479      </p>
480
481    </fieldset>
482
483{if $enable_permissions}
484    <p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
485
486    <fieldset id="permissions" style="display:none">
487      <legend>{'Who can see these photos?'|@translate}</legend>
488
489      <select name="level" size="1">
490        {html_options options=$level_options selected=$level_options_selected}
491      </select>
492    </fieldset>
493{/if}
494
495{if $upload_mode eq 'html'}
496    <p>
497      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
498    </p>
499{elseif $upload_mode eq 'multiple'}
500    <p style="margin-bottom:1em">
501      <input class="submit" type="button" value="{'Start Upload'|@translate}">
502      <input type="submit" name="submit_upload" style="display:none">
503    </p>
504{/if}
505</form>
506
507<div id="uploadProgress" style="display:none">
508{'Photo %s of %s'|@translate|@sprintf:'<span id="progressCurrent">1</span>':'<span id="progressMax">10</span>'}
509<br>
510<div id="progressbar"></div>
511</div>
512
513<fieldset style="display:none">
514  <legend>{'Uploaded Photos'|@translate}</legend>
515  <div id="uploadedPhotos"></div>
516</fieldset>
517
518{/if} {* empty($thumbnails) *}
519{/if} {* $setup_errors *}
520
521</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.