source: trunk/admin/themes/default/template/picture_modify.tpl @ 28494

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

feature 3077 : use Selectize with AJAX load/cache on picture_modify

  • Property svn:eol-style set to LF
File size: 6.3 KB
Line 
1{include file='include/autosize.inc.tpl'}
2{include file='include/dbselect.inc.tpl'}
3{include file='include/datepicker.inc.tpl'}
4
5{combine_script id='LocalStorageCache' load='footer' path='admin/themes/default/js/LocalStorageCache.js'}
6
7{combine_script id='jquery.selectize' load='footer' path='themes/default/js/plugins/selectize.min.js'}
8{combine_css id='jquery.selectize' path="themes/default/js/plugins/selectize.default.css"}
9
10{footer_script}
11(function(){
12{* <!-- CATEGORIES --> *}
13var categoriesCache = new LocalStorageCache('categoriesAdminList', 60, function(callback) {
14  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.categories.getAdminList', function(data) {
15    callback(data.result.categories);
16  });
17});
18
19jQuery('[data-selectize=categories]').selectize({
20  valueField: 'id',
21  labelField: 'fullname',
22  searchField: ['fullname'],
23  plugins: ['remove_button']
24});
25
26categoriesCache.get(function(categories) {
27  var selects = jQuery('[data-selectize=categories]');
28
29  jQuery.each(categories, function(i, category) {
30    selects.each(function() {
31      this.selectize.addOption(category);
32    });
33  });
34 
35  selects.each(function() {
36    var that = this;
37
38    jQuery.each(jQuery(this).data('value'), function(i, id) {
39      that.selectize.addItem(id);
40    });
41  });
42});
43
44{* <!-- TAGS --> *}
45var tagsCache = new LocalStorageCache('tagsAdminList', 60, function(callback) {
46  jQuery.getJSON('{$ROOT_URL}ws.php?format=json&method=pwg.tags.getAdminList', function(data) {
47    var tags = data.result.tags;
48   
49    for (var i=0, l=tags.length; i<l; i++) {
50      tags[i].id = '~~' + tags[i].id + '~~';
51    }
52   
53    callback(tags);
54  });
55});
56
57jQuery('[data-selectize=tags]').selectize({
58  valueField: 'id',
59  labelField: 'name',
60  searchField: ['name'],
61  plugins: ['remove_button'],
62  create: function(input, callback) {
63    tagsCache.clear();
64   
65    callback({
66      id: input,
67      name: input
68    });
69  }
70});
71
72tagsCache.get(function(tags) {
73  var selects = jQuery('[data-selectize=tags]');
74
75  jQuery.each(tags, function(i, tag) {
76    selects.each(function() {
77      this.selectize.addOption(tag);
78    });
79  });
80 
81  selects.each(function() {
82    var that = this;
83
84    jQuery.each(jQuery(this).data('value'), function(i, tag) {
85      that.selectize.addItem(tag.id);
86    });
87  });
88});
89
90{* <!-- DATEPICKER --> *}
91pwg_initialization_datepicker("#date_creation_day", "#date_creation_month", "#date_creation_year", "#date_creation_linked_date", "#date_creation_action_set");
92}());
93{/footer_script}
94
95<h2>{$TITLE} &#8250; {'Edit photo'|@translate} {$TABSHEET_TITLE}</h2>
96
97<form action="{$F_ACTION}" method="post" id="catModify">
98
99  <fieldset>
100    <legend>{'Informations'|@translate}</legend>
101
102    <table>
103
104      <tr>
105        <td id="albumThumbnail">
106          <img src="{$TN_SRC}" alt="{'Thumbnail'|@translate}" class="Thumbnail">
107        </td>
108        <td id="albumLinks" style="width:400px;vertical-align:top;">
109          <ul style="padding-left:15px;margin:0;">
110            <li>{$INTRO.file}</li>
111            <li>{$INTRO.add_date}</li>
112            <li>{$INTRO.added_by}</li>
113            <li>{$INTRO.size}</li>
114            <li>{$INTRO.stats}</li>
115            <li>{$INTRO.id}</li>
116          </ul>
117        </td>
118        <td class="photoLinks">
119          <ul>
120          {if isset($U_JUMPTO) }
121            <li><a class="icon-eye" href="{$U_JUMPTO}">{'jump to photo'|@translate} →</a></li>
122          {/if}
123          {if !url_is_remote($PATH)}
124            <li><a class="icon-arrows-cw" href="{$U_SYNC}">{'Synchronize metadata'|@translate}</a></li>
125
126            <li><a class="icon-trash" href="{$U_DELETE}" onclick="return confirm('{'Are you sure?'|@translate|@escape:javascript}');">{'delete photo'|@translate}</a></li>
127          {/if}
128          </ul>
129        </td>
130      </tr>
131    </table>
132
133  </fieldset>
134
135  <fieldset>
136    <legend>{'Properties'|@translate}</legend>
137
138    <p>
139      <strong>{'Title'|@translate}</strong>
140      <br>
141      <input type="text" class="large" name="name" value="{$NAME|@escape}">
142    </p>
143
144    <p>
145      <strong>{'Author'|@translate}</strong>
146      <br>
147      <input type="text" class="large" name="author" value="{$AUTHOR}">
148    </p>
149
150    <p>
151      <strong>{'Creation date'|@translate}</strong>
152      <br>
153      <select id="date_creation_day" name="date_creation_day">
154        <option value="0">--</option>
155{section name=day start=1 loop=32}
156        <option value="{$smarty.section.day.index}" {if $smarty.section.day.index==$DATE_CREATION_DAY_VALUE}selected="selected"{/if}>{$smarty.section.day.index}</option>
157{/section}
158      </select>
159
160      <select id="date_creation_month" name="date_creation_month">
161        {html_options options=$month_list selected=$DATE_CREATION_MONTH_VALUE}
162      </select>
163
164      <input id="date_creation_year" name="date_creation_year" type="text" size="4" maxlength="4" value="{$DATE_CREATION_YEAR_VALUE}">
165      <input id="date_creation_linked_date" name="date_creation_linked_date" type="hidden" size="10" disabled="disabled">
166      <input name="date_creation_time" type="hidden" value="{$DATE_CREATION_TIME_VALUE}">
167      <a href="#" id="unset_date_creation" style="display:none">unset</a>
168    </p>
169
170    <p>
171      <strong>{'Linked albums'|@translate}</strong>
172      <br>
173      <select data-selectize="categories" data-value="{$associate_options_selected|@json_encode|escape:html}"
174        name="associate[]" multiple style="width:600px;" ></select>
175    </p>
176
177    <p>
178      <strong>{'Representation of albums'|@translate}</strong>
179      <br>
180      <select data-selectize="categories" data-value="{$represent_options_selected|@json_encode|escape:html}"
181        name="represent[]" multiple style="width:600px;" ></select>
182    </p>
183
184    <p>
185      <strong>{'Tags'|@translate}</strong>
186      <br>
187      <select data-selectize="tags" data-value="{$tag_selection|@json_encode|escape:html}"
188        name="tags[]" multiple style="width:600px;" ></select>
189    </p>
190
191    <p>
192      <strong>{'Description'|@translate}</strong>
193      <br>
194      <textarea name="description" id="description" class="description">{$DESCRIPTION}</textarea>
195    </p>
196
197    <p>
198      <strong>{'Who can see this photo?'|@translate}</strong>
199      <br>
200      <select name="level" size="1">
201        {html_options options=$level_options selected=$level_options_selected}
202      </select>
203   </p>
204
205  <p style="margin:40px 0 0 0">
206    <input class="submit" type="submit" value="{'Save Settings'|@translate}" name="submit">
207  </p>
208</fieldset>
209
210</form>
Note: See TracBrowser for help on using the repository browser.