root/trunk/admin/themes/default/template/photos_add_direct.tpl @ 12065

Revision 12065, 13.4 KB (checked in by plg, 21 months ago)

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