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

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

feature 2584: redesign on add photos screens

[Administration > Photos > Add] tabs become: {Web Form, Applications, FTP + Synchronization}

admin screen for pLoader is replaced by a more generic screen for applications

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