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

Last change on this file since 29393 was 29393, checked in by mistic100, 10 years ago

feature:2616 move "add files" and "start upload" buttons
File size: 9.8 KB
Line 
1{combine_script id='common' load='footer' path='admin/themes/default/js/common.js'}
2{combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js'}
3{combine_script id='jquery.plupload' load='footer' require='jquery' path='themes/default/js/plugins/plupload/plupload.full.min.js'}
4{combine_script id='jquery.plupload.queue' load='footer' require='jquery' path='themes/default/js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js'}
5{combine_script id='jquery.ui.progressbar' load='footer'}
6
7{combine_css path="themes/default/js/plugins/jquery.jgrowl.css"}
8{combine_css path="themes/default/js/plugins/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"}
9
10{assign var="plupload_i18n" value="themes/default/js/plugins/plupload/i18n/`$lang_info.plupload_code`.js"}
11{if "PHPWG_ROOT_PATH"|@constant|@cat:$plupload_i18n|@file_exists}
12  {combine_script id="plupload_i18n-`$lang_info.plupload_code`" load="footer" path=$plupload_i18n require="jquery.plupload.queue"}
13{/if}
14
15{include file='include/colorbox.inc.tpl'}
16{include file='include/add_album.inc.tpl'}
17
18{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
19
20{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
21{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.{$themeconf.colorscheme}.css"}
22
23{footer_script}
24{* <!-- CATEGORIES --> *}
25var categoriesCache = new CategoriesCache({
26  serverKey: '{$CACHE_KEYS.categories}',
27  serverId: '{$CACHE_KEYS._hash}',
28  rootUrl: '{$ROOT_URL}'
29});
30
31categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
32  filter: function(categories, options) {
33    if (categories.length > 0) {
34      jQuery("#albumSelection, .selectFiles, .showFieldset").show();
35    }
36   
37    return categories;
38  }
39});
40
41jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache });
42
43var pwg_token = '{$pwg_token}';
44var photosUploaded_label = "{'%d photos uploaded'|translate}";
45var batch_Label = "{'Manage this set of %d photos'|translate}";
46var albumSummary_label = "{'Album "%s" now contains %d photos'|translate|escape}";
47var uploadedPhotos = [];
48var uploadCategory = null;
49
50{literal}
51jQuery(document).ready(function(){
52  jQuery("#uploadWarningsSummary a.showInfo").click(function() {
53    jQuery("#uploadWarningsSummary").hide();
54    jQuery("#uploadWarnings").show();
55    return false;
56  });
57
58  jQuery("#showPermissions").click(function() {
59    jQuery(this).parent(".showFieldset").hide();
60    jQuery("#permissions").show();
61    return false;
62  });
63
64        jQuery("#uploader").pluploadQueue({
65                // General settings
66    browse_button : 'addFiles',
67   
68                // runtimes : 'html5,flash,silverlight,html4',
69                runtimes : 'html5',
70
71                // url : '../upload.php',
72                url : 'ws.php?method=pwg.images.upload&format=json',
73               
74                chunk_size: '500kb',
75               
76                filters : {
77                        // Maximum file size
78                        max_file_size : '1000mb',
79                        // Specify what files to browse for
80                        mime_types: [
81                                {title : "Image files", extensions : "{/literal}{$file_exts}{literal}"}
82                        ]
83                },
84
85                // Rename files by clicking on their titles
86                // rename: true,
87
88                // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
89                dragdrop: true,
90
91    preinit: {
92      Init: function (up, info) {
93        jQuery('#uploader_container').removeAttr("title"); //remove the "using runtime" text
94       
95        jQuery('#startUpload').on('click', function(e) {
96            e.preventDefault();
97            up.start();
98          });
99      }
100    },
101
102    init : {
103      // update custom button state on queue change
104      QueueChanged : function(up) {
105        jQuery('#startUpload').prop('disabled', up.files.length == 0);
106      },
107     
108      BeforeUpload: function(up, file) {
109        //console.log('[BeforeUpload]', file);
110       
111        // hide buttons
112        jQuery('#startUpload, #addFiles').hide();
113
114        // warn user if she wants to leave page while upload is running
115        jQuery(window).bind('beforeunload', function() {
116          return "{/literal}{'Upload in progress'|translate|escape}{literal}";
117        });
118
119        // no more change on category/level
120        jQuery("select[name=level]").attr("disabled", "disabled");
121
122        // You can override settings before the file is uploaded
123        up.setOption(
124          'multipart_params',
125          {
126            category : jQuery("select[name=category] option:selected").val(),
127            level : jQuery("select[name=level] option:selected").val(),
128            pwg_token : pwg_token
129            // name : file.name
130          }
131        );
132      },
133
134      FileUploaded: function(up, file, info) {
135        // Called when file has finished uploading
136        //console.log('[FileUploaded] File:', file, "Info:", info);
137       
138        // hide item line
139        jQuery('#'+file.id).hide();
140     
141        var data = jQuery.parseJSON(info.response);
142     
143        jQuery("#uploadedPhotos").parent("fieldset").show();
144     
145        html = '<a href="admin.php?page=photo-'+data.result.image_id+'" target="_blank">';
146        html += '<img src="'+data.result.src+'" class="thumbnail" title="'+data.result.name+'">';
147        html += '</a> ';
148     
149        jQuery("#uploadedPhotos").prepend(html);
150
151        // do not remove file, or it will reset the progress bar :-/
152        // up.removeFile(file);
153        uploadedPhotos.push(parseInt(data.result.image_id));
154        uploadCategory = data.result.category;
155      },
156
157      UploadComplete: function(up, files) {
158        // Called when all files are either uploaded or failed
159        //console.log('[UploadComplete]');
160
161        jQuery(".selectAlbum, .selectFiles, #permissions, .showFieldset").hide();
162
163        jQuery(".infos").append('<ul><li>'+sprintf(photosUploaded_label, uploadedPhotos.length)+'</li></ul>');
164
165        html = sprintf(
166          albumSummary_label,
167          '<a href="admin.php?page=album-'+uploadCategory.id+'">'+uploadCategory.label+'</a>',
168          parseInt(uploadCategory.nb_photos)
169        );
170
171        jQuery(".infos ul").append('<li>'+html+'</li>');
172
173        jQuery(".infos").show();
174
175        // TODO: use a new method pwg.caddie.empty +
176        // pwg.caddie.add(uploadedPhotos) instead of relying on huge GET parameter
177        // (and remove useless code from admin/photos_add_direct.php)
178
179        jQuery(".batchLink").attr("href", "admin.php?page=photos_add&section=direct&batch="+uploadedPhotos.join(","));
180        jQuery(".batchLink").html(sprintf(batch_Label, uploadedPhotos.length));
181
182        jQuery(".afterUploadActions").show();
183
184        // user can safely leave page without warning
185        jQuery(window).unbind('beforeunload');
186      }
187    }
188        });
189{/literal}
190});
191{/footer_script}
192
193<div class="titrePage">
194  <h2>{'Upload Photos'|@translate} {$TABSHEET_TITLE}</h2>
195</div>
196
197<div id="photosAddContent">
198
199<div class="infos" style="display:none"></div>
200
201<p class="afterUploadActions" style="margin:10px; display:none;"><a class="batchLink"></a> | <a href="">{'Add another set of photos'|@translate}</a></p>
202
203{if count($setup_errors) > 0}
204<div class="errors">
205  <ul>
206  {foreach from=$setup_errors item=error}
207    <li>{$error}</li>
208  {/foreach}
209  </ul>
210</div>
211{else}
212
213  {if count($setup_warnings) > 0}
214<div class="warnings">
215  <ul>
216    {foreach from=$setup_warnings item=warning}
217    <li>{$warning}</li>
218    {/foreach}
219  </ul>
220  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
221</div>
222  {/if}
223
224
225<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}">
226    <fieldset class="selectAlbum">
227      <legend>{'Drop into album'|@translate}</legend>
228
229      <span id="albumSelection" style="display:none">
230      <select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
231        data-default="first" name="category" style="width:400px"></select>
232      <br>{'... or '|@translate}</span>
233      <a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
234    </fieldset>
235
236    <p class="showFieldset" style="display:none"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
237
238    <fieldset id="permissions" style="display:none">
239      <legend>{'Who can see these photos?'|@translate}</legend>
240
241      <select name="level" size="1">
242        {html_options options=$level_options selected=$level_options_selected}
243      </select>
244    </fieldset>
245
246    <fieldset class="selectFiles" style="display:none">
247      <legend>{'Select files'|@translate}</legend>
248     
249      <button id="addFiles" class="buttonLike icon-plus-circled">{'Add Photos'|translate}</button>
250 
251    {if isset($original_resize_maxheight)}
252      <p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
253    {/if}
254
255      <p id="uploadWarningsSummary">{$upload_max_filesize_shorthand}B. {$upload_file_types}. {if isset($max_upload_resolution)}{$max_upload_resolution}Mpx{/if} <a class="icon-info-circled-1 showInfo" title="{'Learn more'|@translate}"></a></p>
256
257      <p id="uploadWarnings">
258        {'Maximum file size: %sB.'|@translate:$upload_max_filesize_shorthand}
259        {'Allowed file types: %s.'|@translate:$upload_file_types}
260      {if isset($max_upload_resolution)}
261        {'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
262      {/if}
263      </p>
264
265      <div id="uploader">
266        <p>Your browser doesn't have HTML5 support.</p>
267      </div>
268     
269      <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
270
271    </fieldset>
272
273</form>
274
275<fieldset style="display:none">
276  <legend>{'Uploaded Photos'|@translate}</legend>
277  <div id="uploadedPhotos"></div>
278</fieldset>
279
280{/if} {* $setup_errors *}
281
282</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.