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

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

feature 2409 added: by default, hide the "who can see these photos?" field in the upload form.
File size: 13.1 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='swfobject' load='footer' path='admin/include/uploadify/swfobject.js'}
4{combine_script id='jquery.uploadify' load='footer' require='jquery' path='admin/include/uploadify/jquery.uploadify.v2.1.0.min.js' }
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 = "";
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 = 'Browse';
180var sizeLimit = {$upload_max_filesize};
181
182{literal}
183  jQuery("#uploadify").uploadify({
184    'uploader'       : uploadify_path + '/uploadify.swf',
185    'script'         : uploadify_path + '/uploadify.php',
186    'scriptData'     : {
187      'upload_id' : upload_id,
188      'session_id' : session_id,
189      'pwg_token' : pwg_token,
190    },
191    'cancelImg'      : uploadify_path + '/cancel.png',
192    'queueID'        : 'fileQueue',
193    'auto'           : false,
194    'buttonText'     : buttonText,
195    'multi'          : true,
196    'fileDesc'       : 'Photo files (*.jpg,*.jpeg,*.png)',
197    'fileExt'        : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG',
198    'sizeLimit'      : sizeLimit,
199    'onSelect'       : function(event,ID,fileObj) {
200      jQuery("#fileQueue").show();
201    },
202    'onAllComplete'  : function(event, data) {
203      if (data.errors) {
204        return false;
205      }
206      else {
207        jQuery("input[name=submit_upload]").click();
208      }
209    },
210    onError: function (event, queueID ,fileObj, errorObj) {
211      var msg;
212
213      if (errorObj.type === "HTTP") {
214        if (errorObj.info === 404) {
215          alert('Could not find upload script.');
216          msg = 'Could not find upload script.';
217        }
218        else {
219          msg = errorObj.type+": "+errorObj.info;
220        }
221      }
222      else if (errorObj.type ==="File Size") {
223        msg = "File too big";
224        msg = msg + '<br>'+fileObj.name+': '+humanReadableFileSize(fileObj.size);
225        msg = msg + '<br>Limit: '+humanReadableFileSize(sizeLimit);
226      }
227      else {
228        msg = errorObj.type+": "+errorObj.info;
229      }
230
231      jQuery.jGrowl(
232        '<p></p>'+msg,
233        {
234          theme:  'error',
235          header: 'ERROR',
236          sticky: true
237        }
238      );
239
240      jQuery("#fileUploadgrowl" + queueID).fadeOut(
241        250,
242        function() {
243          jQuery("#fileUploadgrowl" + queueID).remove()
244        }
245      );
246      return false;
247    },
248    onCancel: function (a, b, c, d) {
249      var msg = "Cancelled uploading: "+c.name;
250      jQuery.jGrowl(
251        '<p></p>'+msg,
252        {
253          theme:  'warning',
254          header: 'Cancelled Upload',
255          life:   4000,
256          sticky: false
257        }
258      );
259    },
260    onClearQueue: function (a, b) {
261      var msg = "Cleared "+b.fileCount+" files from queue";
262      jQuery.jGrowl(
263        '<p></p>'+msg,
264        {
265          theme:  'warning',
266          header: 'Cleared Queue',
267          life:   4000,
268          sticky: false
269        }
270      );
271    },
272    onComplete: function (a, b ,c, response, e) {
273      var size = Math.round(c.size/1024);
274
275      var response = jQuery.parseJSON(response);
276
277      jQuery("#uploadedPhotos").parent("fieldset").show();
278      jQuery("#uploadedPhotos").prepend('<img src="'+response.thumbnail_url+'" class="thumbnail"> ');
279
280      jQuery.jGrowl(
281        '<p></p>'+c.name+' - '+size+'KB',
282        {
283          theme:  'success',
284          header: 'Upload Complete',
285          life:   4000,
286          sticky: false
287        }
288      );
289    }
290  });
291
292  jQuery("input[type=button]").click(function() {
293    if (!checkUploadStart()) {
294      return false;
295    }
296
297    jQuery("#uploadify").uploadifySettings(
298      'scriptData',
299      {
300        'category_id' : jQuery("select[name=category] option:selected").val(),
301        'level' : jQuery("select[name=level] option:selected").val(),
302      }
303    );
304
305    jQuery("#uploadify").uploadifyUpload();
306  });
307
308{/literal}
309{/if}
310});
311{/footer_script}
312
313<div class="titrePage">
314  <h2>{'Upload Photos'|@translate}</h2>
315</div>
316
317<div id="photosAddContent">
318
319{if count($setup_errors) > 0}
320<div class="errors">
321  <ul>
322  {foreach from=$setup_errors item=error}
323    <li>{$error}</li>
324  {/foreach}
325  </ul>
326</div>
327{else}
328
329  {if count($setup_warnings) > 0}
330<div class="warnings">
331  <ul>
332    {foreach from=$setup_warnings item=warning}
333    <li>{$warning}</li>
334    {/foreach}
335  </ul>
336  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
337</div>
338  {/if}
339
340
341{if !empty($thumbnails)}
342<fieldset>
343  <legend>{'Uploaded Photos'|@translate}</legend>
344  <div>
345  {foreach from=$thumbnails item=thumbnail}
346    <a href="{$thumbnail.link}" class="externalLink">
347      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
348    </a>
349  {/foreach}
350  </div>
351  <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
352</fieldset>
353<p style="margin:10px"><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
354{else}
355
356<div id="formErrors" class="errors" style="display:none">
357  <ul>
358    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
359  </ul>
360  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
361</div>
362
363<div style="display:none">
364  <div id="addAlbumForm" style="text-align:left;padding:1em;">
365    <form>
366      {'Parent album'|@translate}<br>
367      <select id ="category_parent" name="category_parent">
368        <option value="0">------------</option>
369        {html_options options=$category_parent_options selected=$category_parent_options_selected}
370      </select>
371
372      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
373      <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>
374    </form>
375  </div>
376</div>
377
378<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
379{if $upload_mode eq 'multiple'}
380    <input name="upload_id" value="{$upload_id}" type="hidden">
381{/if}
382
383    <fieldset>
384      <legend>{'Drop into album'|@translate}</legend>
385
386      <select id="albumSelect" name="category">
387        {html_options options=$category_options selected=$category_options_selected}
388      </select>
389      <br>{'... or '|@translate}<a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
390     
391    </fieldset>
392
393    <fieldset>
394      <legend>{'Select files'|@translate}</legend>
395
396    <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>
397
398    <p id="uploadWarnings">
399{'Maximum file size: %sB.'|@translate|@sprintf:$upload_max_filesize_shorthand}
400{'Allowed file types: %s.'|@translate|@sprintf:$upload_file_types}
401  {if isset($max_upload_resolution)}
402{'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate|@sprintf:$max_upload_resolution:$max_upload_width:$max_upload_height}
403  {/if}
404    </p>
405
406{if $upload_mode eq 'html'}
407      <div id="uploadBoxes"></div>
408      <div id="addUploadBox">
409        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
410      </div>
411
412    <p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
413
414{elseif $upload_mode eq 'multiple'}
415   
416    <p>
417      <input type="file" name="uploadify" id="uploadify">
418    </p>
419
420    <div id="fileQueue" style="display:none"></div>
421
422    <p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate|@sprintf:$switch_url}</p>
423
424{/if}
425    </fieldset>
426
427    <p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
428
429    <fieldset id="permissions" style="display:none">
430      <legend>{'Who can see these photos?'|@translate}</legend>
431
432      <select name="level" size="1">
433        {html_options options=$level_options selected=$level_options_selected}
434      </select>
435    </fieldset>
436
437{if $upload_mode eq 'html'}
438    <p>
439      <input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
440    </p>
441{elseif $upload_mode eq 'multiple'}
442    <p>
443      <input class="submit" type="button" value="{'Start Upload'|@translate}">
444      <input type="submit" name="submit_upload" style="display:none">
445    </p>
446{/if}
447</form>
448
449<fieldset style="display:none">
450  <legend>{'Uploaded Photos'|@translate}</legend>
451  <div id="uploadedPhotos"></div>
452</fieldset>
453
454{/if} {* empty($thumbnails) *}
455{/if} {* $setup_errors *}
456
457</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.