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

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

delegate the main jQuery trigger to handle AJAX loaded items

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