vgapp 0.5.5 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -102,7 +102,6 @@ const Ajax = {
102
102
 
103
103
  if (!isEmptyObj(data)) {
104
104
  for (let key in data) {
105
- console.log(key)
106
105
  query.push(encodeURIComponent(key) + '=' + encodeURIComponent(data[key]));
107
106
  }
108
107
  }
@@ -1,11 +1,11 @@
1
1
  import BaseModule from "../../base-module";
2
2
  import EventHandler from "../../../utils/js/dom/event";
3
- import {execute, mergeDeepObject} from "../../../utils/js/functions";
3
+ import {execute, isObject, mergeDeepObject, normalizeData} from "../../../utils/js/functions";
4
4
  import Selectors from "../../../utils/js/dom/selectors";
5
+ import {Manipulator} from "../../../utils/js/dom/manipulator";
5
6
 
6
7
  const NAME = 'loadmore';
7
8
  const NAME_KEY = 'vg.loadmore';
8
- const CLASS_NAME_SHOW = 'show';
9
9
 
10
10
  const SELECTOR_DATA_TOGGLE = '[data-vg-toggle="loadmore"]';
11
11
 
@@ -15,6 +15,9 @@ const EVENT_KEY_SHOW = `${NAME_KEY}.show`;
15
15
  const EVENT_KEY_SHOWN = `${NAME_KEY}.shown`;
16
16
  const EVENT_KEY_LOADED = `${NAME_KEY}.loaded`;
17
17
 
18
+ const CLASS_NAME_HIDE = 'vg-collapse';
19
+ const CLASS_NAME_SHOW = 'show';
20
+
18
21
  const EVENT_KEY_CLICK_DATA_API = `click.${NAME_KEY}.data.api`;
19
22
 
20
23
  class VGLoadMore extends BaseModule{
@@ -28,7 +31,8 @@ class VGLoadMore extends BaseModule{
28
31
  autohide: true,
29
32
  button: {
30
33
  text: '',
31
- send: 'Загружаем...'
34
+ send: 'Загружаем...',
35
+ classes: []
32
36
  },
33
37
  ajax: {
34
38
  route: '',
@@ -55,7 +59,71 @@ class VGLoadMore extends BaseModule{
55
59
  return NAME_KEY;
56
60
  }
57
61
 
62
+ static init(el, callback) {
63
+ let id = el.id,
64
+ items = normalizeData(el.dataset.elements),
65
+ limit = normalizeData(el.dataset.limit),
66
+ offset = normalizeData(el.dataset.offset),
67
+ output = el.dataset.output || 'true',
68
+ autohide = el.dataset.autohide || 'true',
69
+ params = el.dataset.params,
70
+ buttonParams = normalizeData(el.dataset.button);
71
+
72
+ if (!isObject(buttonParams)) {
73
+ console.log('Дата атрибут data-button должен быть в формате json и передавать объект');
74
+ return;
75
+ }
76
+
77
+ if (limit < offset) {
78
+ console.log('Параметр offset должен быть меньше или равен параметру limit');
79
+ return;
80
+ }
81
+
82
+ if (!id && !items && !limit && !offset) return;
83
+
84
+ let itemsElements = [... Selectors.findAll('.' + items, el)];
85
+
86
+ if (itemsElements.length <= limit) return;
87
+
88
+ itemsElements.forEach((item, i) => {
89
+ item.classList.add(CLASS_NAME_HIDE)
90
+ if ((i + 1) <= limit) item.classList.add(CLASS_NAME_SHOW)
91
+ });
92
+
93
+ let button = document.createElement('button');
94
+
95
+ buttonParams.text = normalizeData(el.dataset.buttonText) || 'Показать еще';
96
+
97
+ Manipulator.set(button, 'data-limit', limit);
98
+ Manipulator.set(button, 'data-offset', offset);
99
+ Manipulator.set(button, 'data-output', output);
100
+ Manipulator.set(button, 'data-autohide', autohide);
101
+ Manipulator.set(button, 'data-elements', items);
102
+ Manipulator.set(button, 'data-vg-toggle', 'loadmore');
103
+ Manipulator.set(button, 'data-target', '#' + id);
104
+
105
+ if (params) Manipulator.set(button, 'data-autohide', params);
106
+
107
+ button.innerHTML = buttonParams.text
108
+
109
+ if ('classes' in buttonParams && buttonParams.classes.length) {
110
+ buttonParams.classes.forEach(cl => button.classList.add(cl));
111
+ }
112
+
113
+ el.parentNode.insertBefore(button, el.nextSibling);
114
+
115
+ execute(callback, [el, button]);
116
+ }
117
+
58
118
  toggle(callback) {
119
+ if (this._params.ajax.route) {
120
+ this.ajax(callback);
121
+ } else {
122
+ this.static(callback);
123
+ }
124
+ }
125
+
126
+ ajax(callback) {
59
127
  this._params.ajax.data = {
60
128
  limit: this._params.limit,
61
129
  offset: this._params.offset
@@ -75,7 +143,7 @@ class VGLoadMore extends BaseModule{
75
143
  target.insertAdjacentHTML('beforeend', data.response);
76
144
  }
77
145
 
78
- this._params.offset = this.fOffset + this._params.offset;
146
+ this._params.offset = this.counter();
79
147
  this._element.innerHTML = this._params.button.text;
80
148
 
81
149
  if ('autohide' in this._params && this._params.autohide) {
@@ -86,8 +154,44 @@ class VGLoadMore extends BaseModule{
86
154
  execute(callback, [this, data, target, status]);
87
155
  });
88
156
  }
157
+
158
+ static(callback) {
159
+ if (!'elements' in this._params && !'target' in this._params) return;
160
+
161
+ let container = Selectors.find(this._params.target),
162
+ items = Selectors.findAll('.' + this._params.elements, container);
163
+
164
+ if (items) {
165
+ items.slice(this._params.offset, this._params.offset + this._params.limit).forEach(item => item.classList.add(CLASS_NAME_SHOW));
166
+ this._params.offset = this.counter();
167
+ }
168
+
169
+ let itemsHidden = Selectors.findAll('.' + this._params.elements + ':not(.show)', container);
170
+
171
+ if (this.remainder(itemsHidden.length)) {
172
+ if ('autohide' in this._params && this._params.autohide) {
173
+ this._element.remove();
174
+ }
175
+ }
176
+
177
+ execute(callback, [this, this._element]);
178
+ }
179
+
180
+ counter() {
181
+ return this.fOffset + this._params.offset;
182
+ }
183
+
184
+ remainder(count) {
185
+ return count === 0
186
+ }
89
187
  }
90
188
 
189
+ EventHandler.on(document, 'DOMContentLoaded', function () {
190
+ [... document.querySelectorAll('[data-vgloadmore]')].forEach(el => {
191
+ VGLoadMore.init(el);
192
+ })
193
+ });
194
+
91
195
  /**
92
196
  * Data API implementation
93
197
  */
@@ -272,7 +272,7 @@ class VGModal extends BaseModule {
272
272
  }
273
273
 
274
274
  _addEventListeners() {
275
- EventHandler.on(this._element, EVENT_KEY_KEYDOWN_DISMISS, event => {
275
+ EventHandler.on(document, EVENT_KEY_KEYDOWN_DISMISS, event => {
276
276
  if (event.key !== ESCAPE_KEY) return;
277
277
 
278
278
  if (this._params.keyboard) {
@@ -23,7 +23,6 @@ class VGRollup extends BaseModule {
23
23
 
24
24
  this._params = this._getParams(element, mergeDeepObject({
25
25
  content: 'text',
26
- offset: 0,
27
26
  cnt: 0,
28
27
  fade: true,
29
28
  transition: false,
@@ -51,14 +50,6 @@ class VGRollup extends BaseModule {
51
50
 
52
51
  this.total = 0;
53
52
  this.count = 0;
54
- this.offset = 0;
55
- this.isOffset = false;
56
- this.isRemainder = false;
57
-
58
- if (this._params.offset > 0) {
59
- this.offset = this._params.offset || 0;
60
- this.isOffset = true;
61
- }
62
53
 
63
54
  this.build();
64
55
  }
@@ -237,18 +228,7 @@ class VGRollup extends BaseModule {
237
228
  let items = Selectors.findAll('.' + className, el);
238
229
 
239
230
  if (items.length) {
240
- if (this.offset > 0) {
241
- items.slice(this.offset, this.offset + this.count).forEach(item => item.classList.remove(CLASS_NAME_HIDE));
242
- this.offset = this.offset + this._params.offset;
243
- this.isRemainder = (items.length - this.offset) > 0;
244
-
245
- if (!this.isRemainder) {
246
- this.isOffset = false;
247
- this.offset = 0;
248
- }
249
- } else {
250
- items.forEach((item) => item.classList.remove(CLASS_NAME_HIDE))
251
- }
231
+ items.forEach((item) => item.classList.remove(CLASS_NAME_HIDE))
252
232
  }
253
233
  }
254
234
  }