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

Revision 13063, 10.9 KB checked in by plg, 8 years ago (diff)

feature 2470 added: ability to create a new album "on the fly" on the
"associate to album" action of the Batch Manager. The code was moved
from the upload form and is now used by the upload form + Batch Manager.

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}</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.