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.
package/app/modules/module-fn.js
CHANGED
|
@@ -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.
|
|
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(
|
|
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
|
-
|
|
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
|
}
|