source: extensions/UserCollections/template/thumbnails_css_js.tpl @ 28593

Last change on this file since 28593 was 28593, checked in by mistic100, 6 years ago

fix "missing image_ids" + clean buttons

File size: 6.2 KB
Line 
1{combine_css path=$USER_COLLEC_PATH|cat:'template/style_thumbnails.css'}
2
3{* <!-- all pages but collection edit page --> *}
4{if not $UC_IN_EDIT}
5{footer_script require='jquery'}
6var $cdm = jQuery('#collectionsDropdown');
7
8$cdm.on('mouseleave', function() {
9  $cdm.hide();
10});
11
12// click on "create collection" button
13$cdm.find('a.new').on('click', function(e) {
14  jQuery(this).hide().next().show().focus();
15  e.stopPropagation();
16  e.preventDefault();
17});
18
19// events on "new collection" input
20$cdm.find('input.new').on({
21  // ENTER or ESC pressed
22  keyup: function(e) {
23    if (e.which == 27) {
24      jQuery(this).val('').hide().prev().show();
25      return;
26    }
27
28    if (e.which != 13) {
29      return;
30    }
31
32    jQuery(this).hide().prev().show();
33    var name = jQuery(this).val();
34    jQuery(this).val('');
35
36    if (name == '' || name == null) {
37      return;
38    }
39   
40    var first = $cdm.children('.noCollecMsg').length > 0;
41
42    jQuery.ajax({
43      type: 'GET',
44      dataType: 'json',
45      url: '{$ROOT_URL}ws.php',
46      data: {
47        format: 'json',
48        method: 'pwg.collections.create',
49        name: name,
50      },
51      success: function(data) {
52        if (data.stat == 'ok') {
53          var col = data.result,
54              html =
55            '<span>&#9733;</span> <a class="add" data-id="'+ col.id +'">'+ col.name +'</a> '
56            +'<span class="menuInfoCat">[<span class="nbImagesCollec-'+ col.id +'">'+ col.nb_images +'</span>]</span> '
57            +'<a class="remove" data-id="'+ col.id +'">{'(remove)'|translate|escape:javscript}</a>'
58            +'<br>';
59
60          $cdm.children('.switchBoxFooter').before(html);
61         
62          if (first) {
63            $cdm.children('.noCollecMsg').remove();
64            $cdm.children('.add').trigger('click');
65          }
66        }
67        else {
68          alert(data.message);
69        }
70      },
71      error: function() {
72        alert('{'An unknown error occured'|translate|escape:javascript}');
73      }
74    });
75  },
76  // prevent click propagation
77  click: function(e) {
78    e.stopPropagation();
79  }
80});
81
82// add and remove links (delegate for new collections)
83$cdm.on('click', '.add, .remove', function(e) {
84  var img_id = $cdm.data('img_id'),
85      col_id = jQuery(this).data('id'),
86      method = jQuery(this).hasClass('add') ? 'pwg.collections.addImages' : 'pwg.collections.removeImages';
87
88  jQuery.ajax({
89    type: 'GET',
90    dataType: 'json',
91    url: '{$ROOT_URL}ws.php',
92    data: {
93      format: 'json',
94      method: method,
95      col_id: col_id,
96      image_ids: img_id
97    },
98    success: function(data) {
99      if (data.stat == 'ok') {
100        // update col counters
101        jQuery('.nbImagesCollec-'+ col_id).html(data.result.nb_images);
102
103        // update item datas
104        var $target = jQuery('.addCollection[data-id="'+ img_id +'"]'),
105            col_ids = $target.data('cols');
106
107        if (method == 'pwg.collections.addImages' && col_ids.indexOf(col_id) == -1) {
108          col_ids[ col_ids.length ] = col_id;
109        }
110        else if (method == 'pwg.collections.removeImages') {
111          col_ids.splice(col_ids.indexOf(col_id), 1);
112        }
113        $target.data('col', col_ids);
114      }
115      else {
116        alert(data.message);
117      }
118    },
119    error: function() {
120      alert('{'An unknown error occured'|translate|escape:javascript}');
121    }
122  });
123
124  $cdm.hide();
125  e.preventDefault();
126});
127
128// main button, open the menu
129jQuery(document).on('click', '.addCollection', function(e) {
130  var img_id = jQuery(this).data('id'),
131      col_ids = jQuery(this).data('cols');
132
133  $cdm.data('img_id', img_id);
134
135  $cdm.children('.add').each(function() {
136    if (col_ids.indexOf(jQuery(this).data('id')) != -1) {
137      jQuery(this).css('font-weight', 'bold').next().next().show();
138    }
139    else {
140      jQuery(this).css('font-weight', 'normal').next().next().hide();
141    }
142  });
143
144  {if $IN_PICTURE}
145  $cdm.css({
146    'left': Math.min(jQuery(this).offset().left, jQuery(window).width()-$cdm.outerWidth(true)-5),
147    'top': jQuery(this).offset().top + jQuery(this).outerHeight(true)
148  });
149  {else}
150  $cdm.css({
151    'left': Math.min(e.pageX-jQuery(window).scrollLeft()-20, jQuery(window).width()-$cdm.outerWidth(true)-5),
152    'top': e.pageY-5-$(window).scrollTop()
153  });
154  {/if}
155  $cdm.toggle();
156
157  e.preventDefault();
158});
159
160// try to respect theme colors
161$cdm.children('.switchBoxFooter').css('border-top-color', $cdm.children('.switchBoxTitle').css('border-bottom-color'));
162{/footer_script}
163
164<div id="collectionsDropdown" class="switchBox">
165  <div class="switchBoxTitle">{'Collections'|translate}</div>
166
167  {foreach from=$COLLECTIONS item=col}
168    <span>&#9733;</span> <a class="add" data-id="{$col.id}">{$col.name}</a>
169    <span class="menuInfoCat">[<span class="nbImagesCollec-{$col.id}">{$col.nb_images}</span>]</span>
170    <a class="remove" data-id="{$col.id}">{'(remove)'|translate}</a>
171    <br>
172  {foreachelse}
173    <span class="noCollecMsg">{'You have no collection'|translate}</span>
174  {/foreach}
175
176  <div class="switchBoxFooter">
177  <span>&#10010;</span> <a class="new">{'Create a new collection'|translate}</a>
178  <input type="text" class="new" placeholder="{'Name'|translate}" size="25"/>
179  </div>
180</div>
181
182{* <!-- collection edit page --> *}
183{else}
184{footer_script require='jquery'}
185jQuery('#thumbnails').on('click', '.addCollection', function(e) {
186  var $trigger = jQuery(this),
187      img_id = jQuery(this).data('id'),
188      col_id = {$collection.ID};
189
190  jQuery.ajax({
191    type: 'GET',
192    dataType: 'json',
193    url: '{$ROOT_URL}ws.php',
194    data: {
195      format: 'json',
196      method: 'pwg.collections.removeImages',
197      col_id: col_id,
198      image_ids: img_id
199    },
200    success: function(data) {
201      if (data.stat == 'ok') {
202        $trigger.parent('li').hide('fast', function() {
203          jQuery(this).remove();
204          if (typeof GThumb != 'undefined') {
205            GThumb.build();
206          }
207        });
208
209        jQuery('.nbImagesCollec-'+ col_id).html(data.result.nb_images);
210        if (typeof batchdown_count != 'undefined') {
211          batchdown_count = data.result.nb_images;
212        }
213      }
214      else {
215        alert(data.message);
216      }
217    },
218    error: function() {
219      alert('{'An unknown error occured'|translate|escape:javascript}');
220    }
221  });
222
223  e.stopPropagation();
224  e.preventDefault();
225});
226{/footer_script}
227{/if}
Note: See TracBrowser for help on using the repository browser.