source: extensions/community/add_photos.tpl @ 15824

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

bug 2505 fixed: uploading more than 10 photos (using specific code in mass_updates) doesn't show MySQL warning and doesn't fail on set photo properties
File size: 16.5 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="externalLink">
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 -->
Note: See TracBrowser for help on using the repository browser.