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

Revision 11962, 11.8 KB checked in by plg, 8 years ago (diff)

feature 2406 added: if the user wants a new album in the upload form, the album
is created before the start of the upload. The ergonomy is now simpler, the
page is smaller and cleaner.

bug 2373 fixed: now that album is created before upload, uploadify.php gets the
category_id and the level: as soon as it is uploaded (function add_uploaded_file)
the photo gets its final privacy level and is directly associated to the album.
This way, we can have an error on a photo without making orphan all photos of
the same upload group.

feature 2405 added: as soon as a photo is uploaded, its thumbnail is displayed
in the "Uploaded Photos" fieldset, without waiting for other photos to be
uploaded. The latest photos comes first.

I have slighlty changed the integration of colorbox in core. Now we have 2
styles available and by default, we use style2 (overlay in black, title and
control icons outside the popup). It is also used for zooming on bulk manager
in unit mode.

display change: on each uploading photos, instead of showing the transfer
speed, we display the transfer progression in %

bug fixed: the color of the "Start Upload" button was not correct because the
button was not a submit button but a simple type=button.

language: "Upload" button becomes "Start Upload" button.

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{/literal}
146{if $upload_mode eq 'html'}
147{literal}
148  function addUploadBox() {
149    var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
150    jQuery(uploadBox).appendTo("#uploadBoxes");
151  }
152
153  addUploadBox();
154
155  jQuery("#addUploadBox A").click(function () {
156    addUploadBox();
157  });
158
159  jQuery("#uploadForm").submit(function() {
160    return checkUploadStart();
161  });
162{/literal}
163{elseif $upload_mode eq 'multiple'}
164
165var uploadify_path = '{$uploadify_path}';
166var upload_id = '{$upload_id}';
167var session_id = '{$session_id}';
168var pwg_token = '{$pwg_token}';
169var buttonText = 'Browse';
170var sizeLimit = {$upload_max_filesize};
171
172{literal}
173  jQuery("#uploadify").uploadify({
174    'uploader'       : uploadify_path + '/uploadify.swf',
175    'script'         : uploadify_path + '/uploadify.php',
176    'scriptData'     : {
177      'upload_id' : upload_id,
178      'session_id' : session_id,
179      'pwg_token' : pwg_token,
180    },
181    'cancelImg'      : uploadify_path + '/cancel.png',
182    'queueID'        : 'fileQueue',
183    'auto'           : false,
184    'buttonText'     : buttonText,
185    'multi'          : true,
186    'fileDesc'       : 'Photo files (*.jpg,*.jpeg,*.png)',
187    'fileExt'        : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG',
188    'sizeLimit'      : sizeLimit,
189    'onAllComplete'  : function(event, data) {
190      if (data.errors) {
191        return false;
192      }
193      else {
194        jQuery("input[name=submit_upload]").click();
195      }
196    },
197    onError: function (event, queueID ,fileObj, errorObj) {
198      var msg;
199
200      if (errorObj.type === "HTTP") {
201        if (errorObj.info === 404) {
202          alert('Could not find upload script.');
203          msg = 'Could not find upload script.';
204        }
205        else {
206          msg = errorObj.type+": "+errorObj.info;
207        }
208      }
209      else if (errorObj.type ==="File Size") {
210        msg = "File too big";
211        msg = msg + '<br>'+fileObj.name+': '+humanReadableFileSize(fileObj.size);
212        msg = msg + '<br>Limit: '+humanReadableFileSize(sizeLimit);
213      }
214      else {
215        msg = errorObj.type+": "+errorObj.info;
216      }
217
218      jQuery.jGrowl(
219        '<p></p>'+msg,
220        {
221          theme:  'error',
222          header: 'ERROR',
223          sticky: true
224        }
225      );
226
227      jQuery("#fileUploadgrowl" + queueID).fadeOut(
228        250,
229        function() {
230          jQuery("#fileUploadgrowl" + queueID).remove()
231        }
232      );
233      return false;
234    },
235    onCancel: function (a, b, c, d) {
236      var msg = "Cancelled uploading: "+c.name;
237      jQuery.jGrowl(
238        '<p></p>'+msg,
239        {
240          theme:  'warning',
241          header: 'Cancelled Upload',
242          life:   4000,
243          sticky: false
244        }
245      );
246    },
247    onClearQueue: function (a, b) {
248      var msg = "Cleared "+b.fileCount+" files from queue";
249      jQuery.jGrowl(
250        '<p></p>'+msg,
251        {
252          theme:  'warning',
253          header: 'Cleared Queue',
254          life:   4000,
255          sticky: false
256        }
257      );
258    },
259    onComplete: function (a, b ,c, response, e) {
260      var size = Math.round(c.size/1024);
261
262      var response = jQuery.parseJSON(response);
263
264      jQuery("#uploadedPhotos").parent("fieldset").show();
265      jQuery("#uploadedPhotos").prepend('<img src="'+response.thumbnail_url+'" class="thumbnail"> ');
266
267      jQuery.jGrowl(
268        '<p></p>'+c.name+' - '+size+'KB',
269        {
270          theme:  'success',
271          header: 'Upload Complete',
272          life:   4000,
273          sticky: false
274        }
275      );
276    }
277  });
278
279  jQuery("input[type=button]").click(function() {
280    if (!checkUploadStart()) {
281      return false;
282    }
283
284    jQuery("#uploadify").uploadifySettings(
285      'scriptData',
286      {
287        'category_id' : jQuery("select[name=category] option:selected").val(),
288        'level' : jQuery("select[name=level] option:selected").val(),
289      }
290    );
291
292    jQuery("#uploadify").uploadifyUpload();
293  });
294
295{/literal}
296{/if}
297});
298{/footer_script}
299
300<div class="titrePage">
301  <h2>{'Upload Photos'|@translate}</h2>
302</div>
303
304<div id="photosAddContent">
305
306{if count($setup_errors) > 0}
307<div class="errors">
308  <ul>
309  {foreach from=$setup_errors item=error}
310    <li>{$error}</li>
311  {/foreach}
312  </ul>
313</div>
314{else}
315
316  {if count($setup_warnings) > 0}
317<div class="warnings">
318  <ul>
319    {foreach from=$setup_warnings item=warning}
320    <li>{$warning}</li>
321    {/foreach}
322  </ul>
323  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
324</div>
325  {/if}
326
327
328{if !empty($thumbnails)}
329<fieldset>
330  <legend>{'Uploaded Photos'|@translate}</legend>
331  <div>
332  {foreach from=$thumbnails item=thumbnail}
333    <a href="{$thumbnail.link}" class="externalLink">
334      <img src="{$thumbnail.src}" alt="{$thumbnail.file}" title="{$thumbnail.title}" class="thumbnail">
335    </a>
336  {/foreach}
337  </div>
338  <p id="batchLink"><a href="{$batch_link}">{$batch_label}</a></p>
339</fieldset>
340<p><a href="{$another_upload_link}">{'Add another set of photos'|@translate}</a></p>
341{else}
342
343<div id="formErrors" class="errors" style="display:none">
344  <ul>
345    <li id="noPhoto">{'Select at least one photo'|@translate}</li>
346  </ul>
347  <div class="hideButton" style="text-align:center"><a href="#" id="hideErrors">{'Hide'|@translate}</a></div>
348</div>
349
350<div style="display:none">
351  <div id="addAlbumForm" style="text-align:left;padding:1em;">
352    <form>
353      {'Parent album'|@translate}<br>
354      <select id ="category_parent" name="category_parent">
355        <option value="0">------------</option>
356        {html_options options=$category_parent_options selected=$category_parent_options_selected}
357      </select>
358
359      <br><br>{'Album name'|@translate}<br><input name="category_name" type="text"> <span id="categoryNameError"></span>
360      <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>
361    </form>
362  </div>
363</div>
364
365<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}" class="properties">
366{if $upload_mode eq 'multiple'}
367    <input name="upload_id" value="{$upload_id}" type="hidden">
368{/if}
369
370    <fieldset>
371      <legend>{'Drop into album'|@translate}</legend>
372
373      <select id="albumSelect" name="category">
374        {html_options options=$category_options selected=$category_options_selected}
375      </select>
376      <br>{'... or '|@translate}<a href="#" class="addAlbumOpen" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
377     
378    </fieldset>
379
380    <fieldset>
381      <legend>{'Who can see these photos?'|@translate}</legend>
382
383      <select name="level" size="1">
384        {html_options options=$level_options selected=$level_options_selected}
385      </select>
386    </fieldset>
387
388    <fieldset>
389      <legend>{'Select files'|@translate}</legend>
390
391{if $upload_mode eq 'html'}
392    <p><a href="{$switch_url}">{'... or switch to the multiple files form'|@translate}</a></p>
393
394      <p>{'JPEG files or ZIP archives with JPEG files inside please.'|@translate}</p>
395
396      <div id="uploadBoxes"></div>
397      <div id="addUploadBox">
398        <a href="javascript:">{'+ Add an upload box'|@translate}</a>
399      </div>
400   
401    </fieldset>
402
403    <p>
404      <input class="submit" type="submit" name="submit_upload" value="{'Upload'|@translate}">
405    </p>
406{elseif $upload_mode eq 'multiple'}
407    <p>
408      <input type="file" name="uploadify" id="uploadify">
409    </p>
410
411    <p><a href="{$switch_url}">{'... or switch to the old style form'|@translate}</a></p>
412
413    <div id="fileQueue"></div>
414
415    </fieldset>
416    <p>
417      <input class="submit" type="button" value="{'Start Upload'|@translate}">
418      <input type="submit" name="submit_upload" style="display:none">
419    </p>
420{/if}
421</form>
422
423<fieldset style="display:none">
424  <legend>{'Uploaded Photos'|@translate}</legend>
425  <div id="uploadedPhotos"></div>
426</fieldset>
427
428{/if} {* empty($thumbnails) *}
429{/if} {* $setup_errors *}
430
431</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.