@cocreate/scroll 1.11.2 → 1.12.0

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/demo/index.html +8 -17
  3. package/docs/index.html +13 -35
  4. package/package.json +3 -2
  5. package/src/index.js +58 -22
package/CHANGELOG.md CHANGED
@@ -1,3 +1,19 @@
1
+ # [1.12.0](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.11.3...v1.12.0) (2024-09-21)
2
+
3
+
4
+ ### Features
5
+
6
+ * added CoCreate-actions ([e2c2a6a](https://github.com/CoCreate-app/CoCreate-scroll/commit/e2c2a6a3071ea691244874495f5d2426906e192d))
7
+ * scroll-to to set a scroll position top | bottom | left | right ([0c42fc1](https://github.com/CoCreate-app/CoCreate-scroll/commit/0c42fc1ce81b1bf585d5fd5508e1e1ff97de04c5))
8
+
9
+ ## [1.11.3](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.11.2...v1.11.3) (2024-06-12)
10
+
11
+
12
+ ### Bug Fixes
13
+
14
+ * bump cocreate dependencies ([c08effc](https://github.com/CoCreate-app/CoCreate-scroll/commit/c08effcdda017ee38af9dc3496c1899cc35c79ad))
15
+ * svg icon class ([cdc192a](https://github.com/CoCreate-app/CoCreate-scroll/commit/cdc192a957f4202a632f8efc088bdb6b9b7e88cb))
16
+
1
17
  ## [1.11.2](https://github.com/CoCreate-app/CoCreate-scroll/compare/v1.11.1...v1.11.2) (2024-04-29)
2
18
 
3
19
 
package/demo/index.html CHANGED
@@ -66,7 +66,8 @@
66
66
  scroll-bottom="scroll_bottom"
67
67
  scroll="hidden, sticky-nav"
68
68
  scroll-up="10"
69
- scroll-down="5">
69
+ scroll-down="5"
70
+ scroll-to="top | bottom | left | right">
70
71
  <!--<a href="#" class="logo">Navbar</a>-->
71
72
  <div
72
73
  class="margin:0px_15px display:flex flex-wrap:wrap justify-content:space-between flex-direction:row align-items:center width:100%">
@@ -109,7 +110,7 @@
109
110
  href=""
110
111
  >Get Started
111
112
  <i
112
- class="height:16px fill:#505050"
113
+ class="height:16px"
113
114
  src="/assets/svg/chevron-right.svg"></i
114
115
  ></a>
115
116
  </div>
@@ -275,9 +276,7 @@
275
276
  class="share color:white"
276
277
  social-network="facebook"
277
278
  title="Share on Facebook"
278
- ><i
279
- class="footer-icon height:20px fill:#505050"
280
- src="/assets/svg/facebook-f.svg"></i
279
+ ><i src="/assets/svg/facebook-f.svg"></i
281
280
  ></a>
282
281
  </li>
283
282
  <li class="padding:0px_15px">
@@ -285,9 +284,7 @@
285
284
  href="#"
286
285
  class="share color:white"
287
286
  social-network="twitter"
288
- ><i
289
- class="footer-icon height:20px fill:#505050"
290
- src="/assets/svg/twitter.svg"></i
287
+ ><i src="/assets/svg/twitter.svg"></i
291
288
  ></a>
292
289
  </li>
293
290
  <li class="padding:0px_15px">
@@ -295,9 +292,7 @@
295
292
  href="#"
296
293
  class="share color:white"
297
294
  social-network="google"
298
- ><i
299
- class="footer-icon height:20px fill:#505050"
300
- src="/assets/svg/google-plus-g.svg"></i
295
+ ><i src="/assets/svg/google-plus-g.svg"></i
301
296
  ></a>
302
297
  </li>
303
298
  <li class="padding:0px_15px">
@@ -305,9 +300,7 @@
305
300
  href="#"
306
301
  class="share color:white"
307
302
  social-network="linkedin"
308
- ><i
309
- class="footer-icon height:20px fill:#505050"
310
- src="/assets/svg/linkedin-in.svg"></i
303
+ ><i src="/assets/svg/linkedin-in.svg"></i
311
304
  ></a>
312
305
  </li>
313
306
  <li class="padding:0px_15px">
@@ -315,9 +308,7 @@
315
308
  href="#"
316
309
  class="share color:white"
317
310
  social-network="pintrest"
318
- ><i
319
- class="footer-icon height:20px fill:#505050"
320
- src="/assets/svg/pinterest-p.svg"></i
311
+ ><i src="/assets/svg/pinterest-p.svg"></i
321
312
  ></a>
322
313
  </li>
323
314
  </ul>
package/docs/index.html CHANGED
@@ -81,43 +81,33 @@
81
81
  class="margin-right:15px"
82
82
  share-network="twitter"
83
83
  title="Share on twitter"
84
- ><i
85
- class="height:20px fill:#505050"
86
- src="/assets/svg/twitter.svg"></i
84
+ ><i src="/assets/svg/twitter.svg"></i
87
85
  ></a>
88
86
  <a
89
87
  class="margin-right:15px"
90
88
  share-network="facebook"
91
89
  title="Share on Facebook"
92
- ><i
93
- class="height:20px fill:#505050"
94
- src="/assets/svg/facebook.svg"></i
90
+ ><i src="/assets/svg/facebook.svg"></i
95
91
  ></a>
96
92
  <a
97
93
  class="margin-right:15px"
98
94
  share-network="instagram"
99
95
  title="Share on instagram"
100
- ><i
101
- class="height:20px fill:#505050"
102
- src="/assets/svg/instagram.svg"></i
96
+ ><i src="/assets/svg/instagram.svg"></i
103
97
  ></a>
104
98
  </div>
105
99
  <a
106
100
  class="margin-right:15px"
107
101
  share-network="share"
108
102
  title="Share on share"
109
- ><i
110
- class="height:20px fill:#505050"
111
- src="/assets/svg/share-alt.svg"></i
103
+ ><i src="/assets/svg/share-alt.svg"></i
112
104
  ></a>
113
105
  </div>
114
106
  <a
115
107
  href="https://github.com/CoCreate-app/overflow:auto"
116
108
  target="_blank"
117
109
  class="margin-right:15px"
118
- ><i
119
- class="height:20px fill:#505050"
120
- src="/assets/svg/github.svg"></i
110
+ ><i src="/assets/svg/github.svg"></i
121
111
  ></a>
122
112
  </div>
123
113
  </div>
@@ -143,9 +133,7 @@
143
133
  <a
144
134
  class="margin-left:10px display:none"
145
135
  href="#scroll-install"
146
- ><i
147
- class="height:20px fill:#505050"
148
- src="/assets/svg/link.svg"></i
136
+ ><i src="/assets/svg/link.svg"></i
149
137
  ></a>
150
138
  </span>
151
139
  </div>
@@ -169,9 +157,7 @@
169
157
  <a
170
158
  class="margin-left:10px display:none"
171
159
  href="#scroll-usage"
172
- ><i
173
- class="height:20px fill:#505050"
174
- src="/assets/svg/link.svg"></i
160
+ ><i src="/assets/svg/link.svg"></i
175
161
  ></a>
176
162
  </span>
177
163
  </div>
@@ -207,9 +193,7 @@
207
193
  <a
208
194
  class="margin-left:10px display:none"
209
195
  href="#scroll-attributes"
210
- ><i
211
- class="height:20px fill:#505050"
212
- src="/assets/svg/link.svg"></i
196
+ ><i src="/assets/svg/link.svg"></i
213
197
  ></a>
214
198
  </span>
215
199
  </div>
@@ -325,9 +309,7 @@
325
309
  <a
326
310
  class="margin-left:10px display:none"
327
311
  href="#scroll-demo"
328
- ><i
329
- class="height:20px fill:#505050"
330
- src="/assets/svg/link.svg"></i
312
+ ><i src="/assets/svg/link.svg"></i
331
313
  ></a>
332
314
  </span>
333
315
  </div>
@@ -374,7 +356,7 @@
374
356
  toggle="code-height"
375
357
  toggle-selector="#demo-code"
376
358
  ><i
377
- class="height:18px fill:#505050"
359
+ class="height:18px"
378
360
  src="/assets/svg/eye.svg"></i
379
361
  ></a>
380
362
  <a
@@ -385,18 +367,14 @@
385
367
  hide="#eye-slash"
386
368
  toggle="code-height"
387
369
  toggle-selector="#demo-code"
388
- ><i
389
- class="height:20px fill:#505050"
390
- src="/assets/svg/eye-slash.svg"></i
370
+ ><i src="/assets/svg/eye-slash.svg"></i
391
371
  ></a>
392
372
  <a
393
373
  class="margin-right:10px"
394
374
  id="code"
395
375
  show="#code-slash"
396
376
  hide="#code, #demo-code"
397
- ><i
398
- class="height:20px fill:#505050"
399
- src="/assets/svg/code.svg"></i
377
+ ><i src="/assets/svg/code.svg"></i
400
378
  ></a>
401
379
  <a
402
380
  class="margin-right:10px"
@@ -405,7 +383,7 @@
405
383
  show="#code, #demo-code"
406
384
  hide="#code-slash"
407
385
  ><i
408
- class="display:flex height:18px fill:#505050"
386
+ class="height:18px"
409
387
  src="/assets/svg/code.svg"></i
410
388
  ></a>
411
389
  <a
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cocreate/scroll",
3
- "version": "1.11.2",
3
+ "version": "1.12.0",
4
4
  "description": "A simple scroll component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.",
5
5
  "keywords": [
6
6
  "scroll",
@@ -58,6 +58,7 @@
58
58
  "webpack-log": "^3.0.1"
59
59
  },
60
60
  "dependencies": {
61
- "@cocreate/observer": "^1.16.0"
61
+ "@cocreate/observer": "^1.16.1",
62
+ "@cocreate/actions": "^1.19.1"
62
63
  }
63
64
  }
package/src/index.js CHANGED
@@ -1,4 +1,5 @@
1
- import observer from '@cocreate/observer';
1
+ import Observer from '@cocreate/observer';
2
+ import Actions from '@cocreate/actions';
2
3
 
3
4
  const CoCreateScroll = {
4
5
  delta: 3,
@@ -7,7 +8,7 @@ const CoCreateScroll = {
7
8
  firedEvents: new Map(),
8
9
 
9
10
  init: function () {
10
- let elements = document.querySelectorAll(`[scroll]`);
11
+ let elements = document.querySelectorAll(`[scroll], [scroll-to]`);
11
12
  this.__initIntersectionObserver();
12
13
  this.initElements(elements);
13
14
  },
@@ -25,8 +26,9 @@ const CoCreateScroll = {
25
26
  const targetSelector = element.getAttribute('scroll-selector');
26
27
  const scrollSelector = element.getAttribute('scroll-element');
27
28
  const intersectValue = element.getAttribute('scroll-intersect');
29
+ const scrollTo = element.getAttribute('scroll-to');
28
30
 
29
- let values = element.getAttribute('scroll') || "";
31
+ let values = element.getAttribute('scroll') || element.getAttribute('scroll-value');
30
32
  values = values.split(",").map(x => x.trim());
31
33
 
32
34
  let scrollInfo = {
@@ -37,7 +39,8 @@ const CoCreateScroll = {
37
39
  scrollTop: element.getAttribute('scroll-top'),
38
40
  scrollLimbo: element.getAttribute('scroll-limbo'),
39
41
  scrollBottom: element.getAttribute('scroll-bottom'),
40
- scrolling: element.getAttribute('scrolling')
42
+ scrolling: element.getAttribute('scrolling'),
43
+ scrollTo
41
44
  };
42
45
 
43
46
  let elements = [element];
@@ -54,6 +57,8 @@ const CoCreateScroll = {
54
57
  let scrollableElements;
55
58
  if (scrollSelector)
56
59
  scrollableElements = document.querySelectorAll(scrollSelector);
60
+ else if (element.hasAttribute('scroll-element'))
61
+ scrollableElements = [element]
57
62
 
58
63
  if (scrollableElements) {
59
64
  for (let scrollableEl of scrollableElements) {
@@ -71,6 +76,10 @@ const CoCreateScroll = {
71
76
  if (intersectValue && window.IntersectionObserver && this.observer) {
72
77
  this.observer.observe(element);
73
78
  }
79
+
80
+ if (scrollTo) {
81
+ this.setScrollPosition(element, scrollTo)
82
+ }
74
83
  },
75
84
 
76
85
  _scrollEvent: function (elements, element, scrollInfo, scrollableEl) {
@@ -99,6 +108,20 @@ const CoCreateScroll = {
99
108
  }, 500);
100
109
  },
101
110
 
111
+ setScrollPosition: function (element, scrollTo) {
112
+ if (scrollTo.includes('top')) {
113
+ element.scrollTop = 0;
114
+ } else if (scrollTo.includes('bottom')) {
115
+ element.scrollTop = element.scrollHeight;
116
+ }
117
+
118
+ if (scrollTo.includes('left')) {
119
+ element.scrollLeft = 0;
120
+ } else if (scrollTo.includes('right')) {
121
+ element.scrollLeft = element.scrollWidth;
122
+ }
123
+ },
124
+
102
125
  __initIntersectionObserver: function () {
103
126
  const self = this;
104
127
  this.observer = new IntersectionObserver(entries => {
@@ -114,8 +137,7 @@ const CoCreateScroll = {
114
137
  }
115
138
  if (entry.isIntersecting > 0) {
116
139
  targetElements.forEach((el) => self.__addAttributeValue(el, attrName, intersectValue));
117
- }
118
- else {
140
+ } else {
119
141
  targetElements.forEach((el) => self.__removeAttrbuteValue(el, attrName, intersectValue));
120
142
  }
121
143
  });
@@ -126,8 +148,7 @@ const CoCreateScroll = {
126
148
  const { scrolling, attrName } = info;
127
149
  if (stopped) {
128
150
  this.__removeAttrbuteValue(element, attrName, scrolling);
129
- }
130
- else {
151
+ } else {
131
152
  this.__addAttributeValue(element, attrName, scrolling);
132
153
  }
133
154
  },
@@ -154,20 +175,19 @@ const CoCreateScroll = {
154
175
  if (upSize <= (currentPos - scrollY)) {
155
176
  this.__addAttributeValue(element, attrName, values[0]);
156
177
  this.__removeAttrbuteValue(element, attrName, values[1]);
157
- }
158
- else if (downSize <= (scrollY - currentPos)) {
178
+ } else if (downSize <= (scrollY - currentPos)) {
159
179
  this.__removeAttrbuteValue(element, attrName, values[0]);
160
180
  this.__addAttributeValue(element, attrName, values[1]);
161
181
  }
162
182
  }
183
+
163
184
  //. scroll top case
164
185
  if (scrollY <= this.delta) {
165
186
  this.__removeAttrbuteValue(element, attrName, values[0]);
166
187
  this.__removeAttrbuteValue(element, attrName, values[1]);
167
188
 
168
189
  this.__addAttributeValue(element, attrName, scrollTop);
169
- }
170
- else {
190
+ } else {
171
191
  this.__removeAttrbuteValue(element, attrName, scrollTop);
172
192
  }
173
193
 
@@ -178,16 +198,14 @@ const CoCreateScroll = {
178
198
  // this.__removeAttrbuteValue(element, attrName, values[1]);
179
199
 
180
200
  this.__addAttributeValue(element, attrName, scrollBottom);
181
- }
182
- else {
201
+ } else {
183
202
  this.__removeAttrbuteValue(element, attrName, scrollBottom);
184
203
  }
185
204
 
186
205
  // if (scrollY != 0 && (scrollY + window.innerHeight) != document.body.scrollHeight){
187
206
  if (scrollY != 0 && (scrollY + innerHeight) != scrollHeight) {
188
207
  this.__addAttributeValue(element, attrName, scrollLimbo);
189
- }
190
- else {
208
+ } else {
191
209
  this.__removeAttrbuteValue(element, attrName, scrollLimbo);
192
210
  }
193
211
 
@@ -200,7 +218,10 @@ const CoCreateScroll = {
200
218
  let attrValue = element.getAttribute(attrName) || "";
201
219
 
202
220
  if (!check.test(attrValue)) {
203
- attrValue += " " + value;
221
+ if (attrName === 'class')
222
+ attrValue += " " + value;
223
+ else
224
+ attrValue = value
204
225
  element.setAttribute(attrName, attrValue);
205
226
  }
206
227
  },
@@ -228,8 +249,7 @@ const CoCreateScroll = {
228
249
 
229
250
  size = isWidth ? window.innerWidth / size : window.innerHeight / size;
230
251
 
231
- }
232
- else {
252
+ } else {
233
253
  size = attrValue.replace('px', '').trim();
234
254
  size = Number(size) || 0;
235
255
  }
@@ -239,16 +259,32 @@ const CoCreateScroll = {
239
259
 
240
260
  };
241
261
 
242
- observer.init({
262
+ Observer.init({
243
263
  name: 'CoCreateScrollCreate',
244
264
  observe: ['addedNodes'],
245
- target: '[scroll]',
265
+ target: '[scroll], [scroll-to]',
246
266
  callback: function (mutation) {
247
-
248
267
  CoCreateScroll.initElement(mutation.target);
249
268
  }
250
269
  });
251
270
 
271
+ Observer.init({
272
+ name: 'CoCreateScrollAttributes',
273
+ observe: ['attributes'],
274
+ attributeName: ['scroll-to'],
275
+ // target: selector, // blocks mutations when applied
276
+ callback: function (mutation) {
277
+ CoCreateScroll.setScrollPosition(mutation.target, mutation.target.getAttribute('scroll-to'))
278
+ }
279
+ });
280
+
281
+ Actions.init({
282
+ name: "scroll-to",
283
+ callback: (action) => {
284
+ // CoCreateScroll.setScrollPosition(mutation.target)
285
+ }
286
+ });
287
+
252
288
  CoCreateScroll.init();
253
289
 
254
290
  export default CoCreateScroll;