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

Last change on this file since 13018 was 13018, checked in by plg, 12 years ago

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