flex_infinite_scroll 0.2.0 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/vendor/assets/javascript/flex_infinite_scroll.js +59 -10
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2557a6f5390214ce8246d233d45b74c435935816
|
4
|
+
data.tar.gz: 93605b2012ff14d17244b8daecdc74bf1c605d66
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 9c1e4446ee54023638482f0c251b25ebea1e16d32adb13308bd48ba1c1cff6cabed59bb3add68beda0d42f8df782cf7a6a7e14fa5f010660c156546b42757e95
|
7
|
+
data.tar.gz: e7c29fb2c5aa9a8f19d14bd3d707759876f7c684e4fc79965cdd1c62d0a35e7056d7ab7a30c635469f75b49b1b43edc9479c79fab08fe28cdb271158d0cee29a
|
@@ -1,5 +1,27 @@
|
|
1
1
|
// Flex Infinite Scroll initialization
|
2
2
|
|
3
|
+
/*
|
4
|
+
config = {
|
5
|
+
customResponse: function(target, data) {
|
6
|
+
'Data processing after loading next page. By default data will be added as HTML.'
|
7
|
+
},
|
8
|
+
eventTarget: 'Select different DOM element for scroll event',
|
9
|
+
requestUrl: 'URL for next page.',
|
10
|
+
loadMargin: 'Bottom margin in pixels, when will start loading next page. Default: 150',
|
11
|
+
startPage: 'Start page for loading data. Default: 1',
|
12
|
+
requestType: 'Type of AJAX request. Default: GET',
|
13
|
+
customParams: function(params) {
|
14
|
+
Parameters that will be sent with next page request. Default: {page: next_page}
|
15
|
+
return params
|
16
|
+
},
|
17
|
+
windowScroll: Attach scroll event to window object,
|
18
|
+
customResponseAttributes: {
|
19
|
+
next_page: 'next_page',
|
20
|
+
data: 'data'
|
21
|
+
}
|
22
|
+
}
|
23
|
+
*/
|
24
|
+
|
3
25
|
'use strict';
|
4
26
|
|
5
27
|
class flexIS {
|
@@ -12,13 +34,14 @@ class flexIS {
|
|
12
34
|
this.config.requestType = this.config.requestType || 'GET';
|
13
35
|
this.config.loadMargin = this.config.loadMargin || 150;
|
14
36
|
this.config.eventTarget = prepareEventTarget(this);
|
37
|
+
this.#customResponseAttributesSet();
|
15
38
|
|
16
39
|
function prepareEventTarget(object) {
|
17
40
|
var eventTarget = document.querySelector(object.config.eventTarget) || object.targetObject;
|
18
41
|
if (object.config.windowScroll) {
|
19
|
-
return window
|
42
|
+
return window;
|
20
43
|
} else {
|
21
|
-
return eventTarget
|
44
|
+
return eventTarget;
|
22
45
|
}
|
23
46
|
}
|
24
47
|
}
|
@@ -29,6 +52,7 @@ class flexIS {
|
|
29
52
|
if (this.#scrollHitBottom() && this.nextPage) {
|
30
53
|
this.#getData();
|
31
54
|
};
|
55
|
+
this.#hideInvisibleContent();
|
32
56
|
});
|
33
57
|
return this;
|
34
58
|
}
|
@@ -54,7 +78,7 @@ class flexIS {
|
|
54
78
|
|
55
79
|
params = this.#customParams({page: parseInt(page, 10)});
|
56
80
|
|
57
|
-
this.targetObject.dispatchEvent(beforeLoadEvent)
|
81
|
+
this.targetObject.dispatchEvent(beforeLoadEvent);
|
58
82
|
xhr.open('GET', this.#requestUrl(params));
|
59
83
|
xhr.onload = () => {
|
60
84
|
var json = JSON.parse(xhr.response);
|
@@ -62,12 +86,12 @@ class flexIS {
|
|
62
86
|
this.loading = false;
|
63
87
|
|
64
88
|
if (xhr.status === 200) {
|
65
|
-
this.#customResponse(json)
|
66
|
-
this.nextPage = json.next_page;
|
89
|
+
this.#customResponse(json);
|
90
|
+
this.nextPage = json[this.config.customResponseAttributes.next_page];
|
67
91
|
if (this.#scrollHitBottom()) this.#getData();
|
68
92
|
}
|
69
93
|
|
70
|
-
this.targetObject.dispatchEvent(afterLoadEvent)
|
94
|
+
this.targetObject.dispatchEvent(afterLoadEvent);
|
71
95
|
|
72
96
|
}
|
73
97
|
xhr.send();
|
@@ -78,7 +102,7 @@ class flexIS {
|
|
78
102
|
}
|
79
103
|
|
80
104
|
#scrollTop = () => {
|
81
|
-
return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY;
|
105
|
+
return this.config.eventTarget.scrollTop || this.config.eventTarget.scrollY || 0;
|
82
106
|
}
|
83
107
|
|
84
108
|
#containerSize = () => {
|
@@ -106,12 +130,37 @@ class flexIS {
|
|
106
130
|
customResponse(this.targetObject, json);
|
107
131
|
} else {
|
108
132
|
div = document.createElement('div');
|
109
|
-
div.innerHTML = json.data;
|
133
|
+
div.innerHTML = json[this.config.customResponseAttributes.data];
|
110
134
|
while (div.children.length > 0) {
|
111
135
|
this.targetObject.appendChild(div.children[0]);
|
112
136
|
}
|
113
137
|
}
|
114
138
|
|
139
|
+
this.#hideInvisibleContent();
|
140
|
+
}
|
141
|
+
|
142
|
+
#hideInvisibleContent = () => {
|
143
|
+
var elems = this.targetObject.children;
|
144
|
+
for (let i = 0; i < elems.length; i++) {
|
145
|
+
let elem = elems[i];
|
146
|
+
let elementTopPosition = elems[i].offsetTop + elems[i].offsetHeight - this.#scrollTop();
|
147
|
+
let elementBottomPosition = elems[i].offsetTop - elems[i].offsetHeight - this.#scrollTop() - this.#containerSize();
|
148
|
+
|
149
|
+
if (elementTopPosition <= 0 || elementBottomPosition >= 0) {
|
150
|
+
if (elem.style.visibility === 'hidden') continue;
|
151
|
+
elem.style.visibility = 'hidden';
|
152
|
+
} else {
|
153
|
+
if (elem.style.visibility === '') continue;
|
154
|
+
elem.style.visibility = '';
|
155
|
+
}
|
156
|
+
}
|
157
|
+
}
|
158
|
+
|
159
|
+
#customResponseAttributesSet = () => {
|
160
|
+
var attr = this.config.customResponseAttributes || {};
|
161
|
+
attr.next_page = attr.next_page || 'next_page';
|
162
|
+
attr.data = attr.data || 'data';
|
163
|
+
this.config.customResponseAttributes = attr
|
115
164
|
}
|
116
165
|
|
117
166
|
#requestUrl = (params) => {
|
@@ -134,7 +183,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
134
183
|
fisObjects.forEach(object => {
|
135
184
|
object.data = {
|
136
185
|
flexIS: new flexIS(object).init()
|
137
|
-
}
|
186
|
+
};
|
138
187
|
})
|
139
188
|
})
|
140
189
|
|
@@ -143,6 +192,6 @@ document.addEventListener('turbolinks:load', () => {
|
|
143
192
|
fisObjects.forEach(object => {
|
144
193
|
object.data = {
|
145
194
|
flexIS: new flexIS(object).init()
|
146
|
-
}
|
195
|
+
};
|
147
196
|
})
|
148
197
|
})
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: flex_infinite_scroll
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.2.
|
4
|
+
version: 0.2.1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Anton Ignatov
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2020-05-
|
11
|
+
date: 2020-05-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: rails
|