source: branches/2.7/admin/themes/default/template/photos_add_direct.tpl @ 29903

Last change on this file since 29903 was 29903, checked in by plg, 10 years ago

merge r29900 from trunk to branch 2.7

bug 3153: fix the AddPhotos buttons on Iceweasel (and on iOS 8.0.2... sometimes). Patch by mmoy
File size: 10.5 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    container : 'uploadForm',
68   
69                // runtimes : 'html5,flash,silverlight,html4',
70                runtimes : 'html5',
71
72                // url : '../upload.php',
73                url : 'ws.php?method=pwg.images.upload&format=json',
74               
75                chunk_size: '500kb',
76               
77                filters : {
78                        // Maximum file size
79                        max_file_size : '1000mb',
80                        // Specify what files to browse for
81                        mime_types: [
82                                {title : "Image files", extensions : "{/literal}{$file_exts}{literal}"}
83                        ]
84                },
85
86                // Rename files by clicking on their titles
87                // rename: true,
88
89                // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
90                dragdrop: true,
91
92    preinit: {
93      Init: function (up, info) {
94        jQuery('#uploader_container').removeAttr("title"); //remove the "using runtime" text
95       
96        jQuery('#startUpload').on('click', function(e) {
97            e.preventDefault();
98            up.start();
99          });
100       
101        jQuery('#cancelUpload').on('click', function(e) {
102            e.preventDefault();
103            up.stop();
104            up.trigger('UploadComplete', up.files);
105          });
106      }
107    },
108
109    init : {
110      // update custom button state on queue change
111      QueueChanged : function(up) {
112        jQuery('#startUpload').prop('disabled', up.files.length == 0);
113      },
114     
115      UploadProgress: function(up, file) {
116        jQuery('#uploadingActions .progressbar').width(up.total.percent+'%');
117      },
118     
119      BeforeUpload: function(up, file) {
120        //console.log('[BeforeUpload]', file);
121       
122        // hide buttons
123        jQuery('#startUpload, #addFiles').hide();
124        jQuery('#uploadingActions').show();
125
126        // warn user if she wants to leave page while upload is running
127        jQuery(window).bind('beforeunload', function() {
128          return "{/literal}{'Upload in progress'|translate|escape}{literal}";
129        });
130
131        // no more change on category/level
132        jQuery("select[name=level]").attr("disabled", "disabled");
133
134        // You can override settings before the file is uploaded
135        up.setOption(
136          'multipart_params',
137          {
138            category : jQuery("select[name=category] option:selected").val(),
139            level : jQuery("select[name=level] option:selected").val(),
140            pwg_token : pwg_token
141            // name : file.name
142          }
143        );
144      },
145
146      FileUploaded: function(up, file, info) {
147        // Called when file has finished uploading
148        //console.log('[FileUploaded] File:', file, "Info:", info);
149       
150        // hide item line
151        jQuery('#'+file.id).hide();
152     
153        var data = jQuery.parseJSON(info.response);
154     
155        jQuery("#uploadedPhotos").parent("fieldset").show();
156     
157        html = '<a href="admin.php?page=photo-'+data.result.image_id+'" target="_blank">';
158        html += '<img src="'+data.result.src+'" class="thumbnail" title="'+data.result.name+'">';
159        html += '</a> ';
160     
161        jQuery("#uploadedPhotos").prepend(html);
162
163        // do not remove file, or it will reset the progress bar :-/
164        // up.removeFile(file);
165        uploadedPhotos.push(parseInt(data.result.image_id));
166        uploadCategory = data.result.category;
167      },
168
169      UploadComplete: function(up, files) {
170        // Called when all files are either uploaded or failed
171        //console.log('[UploadComplete]');
172
173        jQuery(".selectAlbum, .selectFiles, #permissions, .showFieldset").hide();
174
175        jQuery(".infos").append('<ul><li>'+sprintf(photosUploaded_label, uploadedPhotos.length)+'</li></ul>');
176
177        html = sprintf(
178          albumSummary_label,
179          '<a href="admin.php?page=album-'+uploadCategory.id+'">'+uploadCategory.label+'</a>',
180          parseInt(uploadCategory.nb_photos)
181        );
182
183        jQuery(".infos ul").append('<li>'+html+'</li>');
184
185        jQuery(".infos").show();
186
187        // TODO: use a new method pwg.caddie.empty +
188        // pwg.caddie.add(uploadedPhotos) instead of relying on huge GET parameter
189        // (and remove useless code from admin/photos_add_direct.php)
190
191        jQuery(".batchLink").attr("href", "admin.php?page=photos_add&section=direct&batch="+uploadedPhotos.join(","));
192        jQuery(".batchLink").html(sprintf(batch_Label, uploadedPhotos.length));
193
194        jQuery(".afterUploadActions").show();
195        jQuery('#uploadingActions').hide();
196
197        // user can safely leave page without warning
198        jQuery(window).unbind('beforeunload');
199      }
200    }
201        });
202{/literal}
203});
204{/footer_script}
205
206<div class="titrePage">
207  <h2>{'Upload Photos'|@translate} {$TABSHEET_TITLE}</h2>
208</div>
209
210<div id="photosAddContent">
211
212<div class="infos" style="display:none"></div>
213
214<p class="afterUploadActions" style="margin:10px; display:none;"><a class="batchLink"></a> | <a href="">{'Add another set of photos'|@translate}</a></p>
215
216{if count($setup_errors) > 0}
217<div class="errors">
218  <ul>
219  {foreach from=$setup_errors item=error}
220    <li>{$error}</li>
221  {/foreach}
222  </ul>
223</div>
224{else}
225
226  {if count($setup_warnings) > 0}
227<div class="warnings">
228  <ul>
229    {foreach from=$setup_warnings item=warning}
230    <li>{$warning}</li>
231    {/foreach}
232  </ul>
233  <div class="hideButton" style="text-align:center"><a href="{$hide_warnings_link}">{'Hide'|@translate}</a></div>
234</div>
235  {/if}
236
237
238<form id="uploadForm" enctype="multipart/form-data" method="post" action="{$form_action}">
239    <fieldset class="selectAlbum">
240      <legend>{'Drop into album'|@translate}</legend>
241
242      <span id="albumSelection" style="display:none">
243      <select data-selectize="categories" data-value="{$selected_category|@json_encode|escape:html}"
244        data-default="first" name="category" style="width:600px"></select>
245      <br>{'... or '|@translate}</span>
246      <a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
247    </fieldset>
248
249    <p class="showFieldset" style="display:none"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
250
251    <fieldset id="permissions" style="display:none">
252      <legend>{'Who can see these photos?'|@translate}</legend>
253
254      <select name="level" size="1">
255        {html_options options=$level_options selected=$level_options_selected}
256      </select>
257    </fieldset>
258
259    <fieldset class="selectFiles" style="display:none">
260      <legend>{'Select files'|@translate}</legend>
261     
262      <button id="addFiles" class="buttonLike icon-plus-circled">{'Add Photos'|translate}</button>
263 
264    {if isset($original_resize_maxheight)}
265      <p class="uploadInfo">{'The picture dimensions will be reduced to %dx%d pixels.'|@translate:$original_resize_maxwidth:$original_resize_maxheight}</p>
266    {/if}
267
268      <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>
269
270      <p id="uploadWarnings">
271        {'Maximum file size: %sB.'|@translate:$upload_max_filesize_shorthand}
272        {'Allowed file types: %s.'|@translate:$upload_file_types}
273      {if isset($max_upload_resolution)}
274        {'Approximate maximum resolution: %dM pixels (that\'s %dx%d pixels).'|@translate:$max_upload_resolution:$max_upload_width:$max_upload_height}
275      {/if}
276      </p>
277
278      <div id="uploader">
279        <p>Your browser doesn't have HTML5 support.</p>
280      </div>
281
282    </fieldset>
283   
284    <div id="uploadingActions" style="display:none">
285      <button id="cancelUpload" class="buttonLike icon-cancel-circled">{'Cancel'|translate}</button>
286     
287      <div class="big-progressbar">
288        <div class="progressbar" style="width:0%"></div>
289      </div>
290    </div>
291     
292    <button id="startUpload" class="buttonLike icon-upload" disabled>{'Start Upload'|translate}</button>
293
294</form>
295
296<fieldset style="display:none">
297  <legend>{'Uploaded Photos'|@translate}</legend>
298  <div id="uploadedPhotos"></div>
299</fieldset>
300
301{/if} {* $setup_errors *}
302
303</div> <!-- photosAddContent -->
Note: See TracBrowser for help on using the repository browser.