source: trunk/admin/themes/default/template/photos_add_direct.tpl @ 28539

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

bug fixed: on upload form, display existing albums
File size: 12.7 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{include file='include/colorbox.inc.tpl'}
10{include file='include/add_album.inc.tpl'}
11
12{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
13
14{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
15{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"}
16
17{footer_script}
18{* <!-- CATEGORIES --> *}
19var categoriesCache = new LocalStorageCache({
20  key: 'categoriesAdminList',
21  serverKey: '{$CACHE_KEYS.categories}',
22  serverId: '{$CACHE_KEYS._hash}',
23
24  loader: function(callback) {
25    jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
26      callback(data.result.categories);
27    });
28  }
29});
30
31jQuery('[data-selectize=categories]').selectize({
32  valueField: 'id',
33  labelField: 'fullname',
34  sortField: 'fullname',
35  searchField: ['fullname'],
36  plugins: ['remove_button']
37});
38
39categoriesCache.get(function(categories) {
40  if (categories.length > 0) {
41    jQuery("#albumSelection").show();
42  }
43
44  categories.sort(function(a, b) {
45    return a.fullname.localeCompare(b.fullname);
46  });
47 
48  jQuery('[data-selectize=categories]').each(function() {
49    this.selectize.load(function(callback) {
50      callback(categories);
51    });
52
53    if (jQuery(this).data('value')) {
54      this.selectize.setValue(jQuery(this).data('value')[0]);
55    }
56   
57    // prevent empty value
58    if (this.selectize.getValue() == '') {
59      this.selectize.setValue(categories[0].id);
60    }
61    this.selectize.on('dropdown_close', function() {
62      if (this.getValue() == '') {
63        this.setValue(categories[0].id);
64      }
65    });
66  });
67});
68
69jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache });
70
71
72{literal}
73jQuery(document).ready(function(){
74  function checkUploadStart() {
75    var nbErrors = 0;
76    jQuery("#formErrors").hide();
77    jQuery("#formErrors li").hide();
78
79    if (jQuery("select[name=category]").val() == '') {
80      jQuery("#formErrors #noAlbum").show();
81      nbErrors++;
82    }
83
84    var nbFiles = 0;
85    if (jQuery("#uploadBoxes").size() == 1) {
86      jQuery("input[name^=image_upload]").each(function() {
87        if (jQuery(this).val() != "") {
88          nbFiles++;
89        }
90      });
91    }
92    else {
93      nbFiles = jQuery(".uploadifyQueueItem").size();
94    }
95
96    if (nbFiles == 0) {
97      jQuery("#formErrors #noPhoto").show();
98      nbErrors++;
99    }
100
101    if (nbErrors != 0) {
102      jQuery("#formErrors").show();
103      return false;
104    }
105    else {
106      return true;
107    }
108
109  }
110
111  function humanReadableFileSize(bytes) {
112    var byteSize = Math.round(bytes / 1024 * 100) * .01;
113    var suffix = 'KB';
114
115    if (byteSize > 1000) {
116      byteSize = Math.round(byteSize *.001 * 100) * .01;
117      suffix = 'MB';
118    }
119
120    var sizeParts = byteSize.toString().split('.');
121    if (sizeParts.length > 1) {
122      byteSize = sizeParts[0] + '.' + sizeParts[1].substr(0,2);
123    }
124    else {
125      byteSize = sizeParts[0];
126    }
127
128    return byteSize+suffix;
129  }
130
131  jQuery("#hideErrors").click(function() {
132    jQuery("#formErrors").hide();
133    return false;
134  });
135
136  jQuery("#uploadWarningsSummary a.showInfo").click(function() {
137    jQuery("#uploadWarningsSummary").hide();
138    jQuery("#uploadWarnings").show();
139    return false;
140  });
141
142  jQuery("#showPermissions").click(function() {
143    jQuery(this).parent(".showFieldset").hide();
144    jQuery("#permissions").show();
145    return false;
146  });
147
148{/literal}
149{if $upload_mode eq 'html'}
150{literal}
151  function addUploadBox() {
152    var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
153    jQuery(uploadBox).appendTo("#uploadBoxes");
154  }
155
156  addUploadBox();
157
158  jQuery("#addUploadBox A").click(function () {
159    addUploadBox();
160  });
161
162  jQuery("#uploadForm").submit(function() {
163    return checkUploadStart();
164  });
165{/literal}
166{elseif $upload_mode eq 'multiple'}
167
168var uploadify_path = '{$uploadify_path}';
169var upload_id = '{$upload_id}';
170var session_id = '{$session_id}';
171var pwg_token = '{$pwg_token}';
172var buttonText = "{'Select files'|@translate}";
173var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
174
175{literal}
176  jQuery("#uploadify").uploadify({
177    'uploader'       : uploadify_path + '/uploadify.php',
178    'langFile'       : uploadify_path + '/uploadifyLang_en.js',
179    'swf'            : uploadify_path + '/uploadify.swf',
180    'checkExisting'  : false,
181
182    buttonCursor     : 'pointer',
183    'buttonText'     : buttonText,
184    'width'          : 300,
185    'cancelImage'    : uploadify_path + '/cancel.png',
186    'queueID'        : 'fileQueue',
187    'auto'           : false,
188    'multi'          : true,
189    'fileTypeDesc'   : 'Photo files',
190    'fileTypeExts'   : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG;*.gif;*.GIF;{/literal}{if $tif_enabled}*.tif;*.TIF;*.tiff;*.TIFF{/if}{literal}',
191    'fileSizeLimit'  : sizeLimit,
192    'progressData'   : 'percentage',
193    requeueErrors   : false,
194    'onSelect'       : function(event,ID,fileObj) {
195      jQuery("#fileQueue").show();
196    },
197    'onQueueComplete'  : function(stats) {
198      jQuery("input[name=submit_upload]").click();
199    },
200    onUploadError: function (file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
201      /* uploadify calls the onUploadError trigger when the user cancels a file! */
202      /* There no error so we skip it to avoid panic.                            */
203      if ("Cancelled" == errorString) {
204        return false;
205      }
206
207      var msg = file.name+', '+errorString;
208
209      /* Let's put the error message in the form to display once the form is     */
210      /* performed, it makes support easier when user can copy/paste the error   */
211      /* thrown.                                                                 */
212      jQuery("#uploadForm").append('<input type="hidden" name="onUploadError[]" value="'+msg+'">');
213
214      jQuery.jGrowl(
215        '<p></p>onUploadError '+msg,
216        {
217          theme:  'error',
218          header: 'ERROR',
219          life:   4000,
220          sticky: false
221        }
222      );
223
224      return false;
225    },
226    onUploadSuccess: function (file,data,response) {
227      var data = jQuery.parseJSON(data);
228      jQuery("#uploadedPhotos").parent("fieldset").show();
229
230      /* Let's display the thumbnail of the uploaded photo, no need to wait the  */
231      /* end of the queue                                                        */
232      jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
233    },
234    onUploadComplete: function(file,swfuploadifyQueue) {
235      var max = parseInt(jQuery("#progressMax").text());
236      var next = parseInt(jQuery("#progressCurrent").text())+1;
237      var addToProgressBar = 2;
238      if (next <= max) {
239        jQuery("#progressCurrent").text(next);
240      }
241      else {
242        addToProgressBar = 1;
243      }
244
245      jQuery("#progressbar").progressbar({
246        value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
247      });
248    }
249  });
250
251  jQuery("input[type=button]").click(function() {
252    if (!checkUploadStart()) {
253      return false;
254    }
255
256    jQuery("#uploadify").uploadifySettings(
257      'postData',
258      {
259        'category_id' : jQuery("select[name=category]").val(),
260        'level' : jQuery("select[name=level] option:selected").val(),
261        'upload_id' : upload_id,
262        'session_id' : session_id,
263        'pwg_token' : pwg_token
264      }
265    );
266
267    nb_files = jQuery(".uploadifyQueueItem").size();
268    jQuery("#progressMax").text(nb_files);
269    jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
270    jQuery("#progressCurrent").text(1);
271
272    jQuery("#uploadProgress").show();
273
274    jQuery("#uploadify").uploadifyUpload();
275  });
276
277{/literal}
278{/if}
279});
280{/footer_script}
281
282<div class="titrePage">
283  <h2>{'Upload Photos'|@translate} {$TABSHEET_TITLE}</h2>
284</div>
285
286<div id="photosAddContent">
287
288{if count($setup_errors) > 0}
289<div class="errors">
290  <ul>
291  {foreach from=$setup_errors item=error}
292    <li>{$error}</li>
293  {/foreach}
294  </ul>
295</div>
296{else}
297
298  {if count($setup_warnings) > 0}
299<div class="warnings">
300  <ul>
301    {foreach from=$setup_warnings item=warning}
302    <li>{$warning}</li>
303    {/foreach}
304  </ul>
305  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
306</div>
307  {/if}
308
309
310{if !empty($thumbnails)}
311<fieldset>
312  <legend>{'Uploaded Photos'|@translate}</legend>
313  <div>
314  {foreach from=$thumbnails item=thumbnail}
315    <a href="{$thumbnail.link}" class="externalLink">
316      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
317    </a>
318  {/foreach}
319  </div>
320  <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
321</fieldset>
322<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
323{else}
324
325<div id="formErrors" class="errors" style="display:none">
326  <ul>
327    <li id="noAlbum">{'Select an album'|@translate}</li>
328    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
329  </ul>
330  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
331</div>
332
333
334<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
335{if $upload_mode eq 'multiple'}
336    <input name="upload_id" value="{$upload_id}" type="hidden">
337{/if}
338
339    <fieldset>
340      <legend>{'Drop into album'|@translate}</legend>
341
342      <span id="albumSelection" style="display:none">
343      <select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
344        name="category" style="width:400px"></select>
345      <br>{'... or '|@translate}</span>
346      <a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
347    </fieldset>
348
349    <fieldset>
350      <legend>{'Select files'|@translate}</legend>
351 
352    {if isset($original_resize_maxheight)}<p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>{/if}
353
354    <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
355
356    <p id="uploadWarnings">
357{'Maximum file size: %sB.'|@translate:$upload_max_filesize_shorthand}
358{'Allowed file types: %s.'|@translate:$upload_file_types}
359  {if isset($max_upload_resolution)}
360{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
361  {/if}
362    </p>
363
364
365
366{if $upload_mode eq 'html'}
367      <div id="uploadBoxes"></div>
368      <div id="addUploadBox">
369        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
370      </div>
371
372    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate:$switch_url}</p>
373
374{elseif $upload_mode eq 'multiple'}
375    <div id="uploadify">You've got a problem with your JavaScript</div>
376
377    <div id="fileQueue" style="display:none"></div>
378
379    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate:$switch_url}</p>
380
381{/if}
382    </fieldset>
383
384    <p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
385
386    <fieldset id="permissions" style="display:none">
387      <legend>{'Who can see these photos?'|@translate}</legend>
388
389      <select name="level" size="1">
390        {html_options options=$level_options selected=$level_options_selected}
391      </select>
392    </fieldset>
393
394{if $upload_mode eq 'html'}
395    <p>
396      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
397    </p>
398{elseif $upload_mode eq 'multiple'}
399    <p style="margin-bottom:1em">
400      <input class="submit" type="button" value="{'Start Upload'|@translate}">
401      <input type="submit" name="submit_upload" style="display:none">
402    </p>
403{/if}
404</form>
405
406<div id="uploadProgress" style="display:none">
407{'Photo %s of %s'|@translate:'<span id="progressCurrent">1</span>':'<span id="progressMax">10</span>'}
408<br>
409<div id="progressbar"></div>
410</div>
411
412<fieldset style="display:none">
413  <legend>{'Uploaded Photos'|@translate}</legend>
414  <div id="uploadedPhotos"></div>
415</fieldset>
416
417{/if} {* empty($thumbnails) *}
418{/if} {* $setup_errors *}
419
420</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.