@andreyshpigunov/x 0.4.3 → 0.5.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 (23) hide show
  1. package/assets/css/app.css +1 -1
  2. package/assets/js/app.js +1 -1
  3. package/cheatsheet.html +18 -14
  4. package/dist/x.css +1 -1
  5. package/dist/x.js +1 -1
  6. package/index.html +102 -102
  7. package/package.json +1 -1
  8. package/src/components/x/animate.js +1 -1
  9. package/src/components/x/buttons.css +24 -24
  10. package/src/components/x/colors.css +18 -0
  11. package/src/components/x/dropdown.css +5 -5
  12. package/src/components/x/dropdown.js +19 -19
  13. package/src/components/x/flex.css +0 -4
  14. package/src/components/x/grid.css +0 -4
  15. package/src/components/x/helpers.css +24 -14
  16. package/src/components/x/icons.css +10 -10
  17. package/src/components/x/lib.js +4 -4
  18. package/src/components/x/links.css +10 -10
  19. package/src/components/x/modal.css +26 -26
  20. package/src/components/x/modal.js +23 -23
  21. package/src/components/x/scroll.css +14 -12
  22. package/src/components/x/sticky.js +5 -5
  23. package/src/css/x.css +19 -19
package/src/components/x/modal.js CHANGED
@@ -13,7 +13,7 @@
13
13
  * modal.init();
14
14
  *
15
15
  * HTML structure:
16
- * <div x-modal="myModal" class="modal--hash" data-window-class="max800">
16
+ * <div x-modal="myModal" class="modal_hash" data-window-class="max800">
17
17
  * <h2>Modal Title</h2>
18
18
  * <p>Modal content goes here</p>
19
19
  * <button class="modal-close">Close</button>
@@ -92,8 +92,8 @@
92
92
  *
93
93
  * - `x-modal="id"` - Required attribute to define modal
94
94
  * - `x-modal-open="id"` - Attribute for links/buttons that open modal
95
- * - `modal--hash` - Class to enable URL hash integration (#id)
96
- * - `modal--uniq` - Class to close other modals when this one opens
95
+ * - `modal_hash` - Class to enable URL hash integration (#id)
96
+ * - `modal_uniq` - Class to close other modals when this one opens
97
97
  * - `data-window-class` - Attribute to add classes to modal window
98
98
  *
99
99
  * Features:
@@ -102,8 +102,8 @@
102
102
  * - ESC key to close topmost modal
103
103
  * - Click overlay to close
104
104
  * - Click .modal-close button to close
105
- * - URL hash integration (modal--hash class)
106
- * - Unique modal mode (modal--uniq class)
105
+ * - URL hash integration (modal_hash class)
106
+ * - Unique modal mode (modal_uniq class)
107
107
  * - Lock mechanism to prevent overlapping animations
108
108
  * - Global classes on <html> element
109
109
  *
@@ -136,7 +136,7 @@
136
136
  * @example
137
137
  * // Vanilla JS — plain HTML
138
138
  * // index.html:
139
- * // <div x-modal="myModal" class="modal--hash" data-window-class="max800">
139
+ * // <div x-modal="myModal" class="modal_hash" data-window-class="max800">
140
140
  * // <h2>Title</h2>
141
141
  * // <p>Content</p>
142
142
  * // <button type="button" class="modal-close">Close</button>
@@ -291,7 +291,7 @@ class Modal {
291
291
 
292
292
  if (window.location.hash === '#' + id) {
293
293
  const el = lib.qs('#' + id);
294
- if (el && el.classList.contains('modal--hash')) this.show(id);
294
+ if (el && el.classList.contains('modal_hash')) this.show(id);
295
295
  }
296
296
  }
297
297
  }
@@ -304,7 +304,7 @@ class Modal {
304
304
  */
305
305
  _setupGlobalListeners() {
306
306
  this._clickHandler = e => {
307
- if (!lib.qs('.modal--active')) return;
307
+ if (!lib.qs('.modal_active')) return;
308
308
  const target = e.target;
309
309
  const isClose = target.classList && target.classList.contains('modal-close');
310
310
  const isOverlay = !target.closest || !target.closest('.modal-window');
@@ -317,7 +317,7 @@ class Modal {
317
317
 
318
318
  this._keydownHandler = e => {
319
319
  if (e.key !== 'Escape') return;
320
- const modals = lib.qsa('.modal--active');
320
+ const modals = lib.qsa('.modal_active');
321
321
  const len = modals.length;
322
322
  if (!len) return;
323
323
  const id = modals[len - 1].getAttribute('id');
@@ -351,24 +351,24 @@ class Modal {
351
351
  const modal = lib.qs('#' + id);
352
352
  if (!modal) return;
353
353
 
354
- if (modal.classList.contains('modal--uniq')) await this.hideAll();
354
+ if (modal.classList.contains('modal_uniq')) await this.hideAll();
355
355
 
356
356
  this.lockCount++;
357
357
  try {
358
- await lib.addClass(modal, 'modal--ready');
358
+ await lib.addClass(modal, 'modal_ready');
359
359
  await lib.sleep(10);
360
360
  modal.dispatchEvent(new CustomEvent('modal:ready'));
361
361
 
362
- if (modal.classList.contains('modal--hash')) history.replaceState(null, '', '#' + id);
362
+ if (modal.classList.contains('modal_hash')) history.replaceState(null, '', '#' + id);
363
363
 
364
364
  if (this.html) {
365
- lib.addClass(this.html, 'modal--active');
366
- lib.addClass(this.html, id + '--active');
365
+ lib.addClass(this.html, 'modal_active');
366
+ lib.addClass(this.html, id + '_active');
367
367
  }
368
368
  lib.addClass('[x-modal-open=' + id + ']', 'active');
369
369
  this.modalLevel++;
370
- lib.addClass(modal, 'modal--z' + this.modalLevel);
371
- await lib.addClass(modal, 'modal--active');
370
+ lib.addClass(modal, 'modal_z' + this.modalLevel);
371
+ await lib.addClass(modal, 'modal_active');
372
372
 
373
373
  const modalOuter = lib.qs('.modal-outer', modal);
374
374
  if (modalOuter) modalOuter.scrollTo(0, 1);
@@ -398,16 +398,16 @@ class Modal {
398
398
 
399
399
  this.lockCount++;
400
400
  try {
401
- if (modal.classList.contains('modal--hash') && window.location.hash === '#' + id) {
401
+ if (modal.classList.contains('modal_hash') && window.location.hash === '#' + id) {
402
402
  history.replaceState(null, document.title, window.location.pathname + window.location.search);
403
403
  }
404
404
  lib.removeClass('[x-modal-open=' + id + ']', 'active');
405
- await lib.removeClass(modal, 'modal--active', 200);
406
- lib.removeClass(modal, 'modal--z' + this.modalLevel);
405
+ await lib.removeClass(modal, 'modal_active', 200);
406
+ lib.removeClass(modal, 'modal_z' + this.modalLevel);
407
407
  modal.dispatchEvent(new CustomEvent('modal:close'));
408
- if (this.html) lib.removeClass(this.html, id + '--active');
408
+ if (this.html) lib.removeClass(this.html, id + '_active');
409
409
  this.modalLevel--;
410
- if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal--active');
410
+ if (this.modalLevel === 0 && this.html) lib.removeClass(this.html, 'modal_active');
411
411
  } catch (_) {
412
412
  } finally {
413
413
  this.lockCount--;
@@ -422,7 +422,7 @@ class Modal {
422
422
  */
423
423
  async hideAll() {
424
424
  if (typeof document === 'undefined') return;
425
- const modals = lib.qsa('.modal--active');
425
+ const modals = lib.qsa('.modal_active');
426
426
  for (let i = 0; i < modals.length; i++) {
427
427
  const id = modals[i].getAttribute('id');
428
428
  if (id) await this.hide(id);
@@ -437,7 +437,7 @@ class Modal {
437
437
  isActive(id) {
438
438
  if (typeof document === 'undefined' || !id || typeof id !== 'string' || !this._isValidId(id)) return false;
439
439
  const modal = lib.qs('#' + id);
440
- return modal ? modal.classList.contains('modal--active') : false;
440
+ return modal ? modal.classList.contains('modal_active') : false;
441
441
  }
442
442
  }
443
443
 
package/src/components/x/scroll.css CHANGED
@@ -9,9 +9,11 @@ All right reserved.
9
9
 
10
10
  /*
11
11
  .scroll
12
- .scroll--contain
13
- .scroll--x-proximity
14
- .scroll--x-mandatory
12
+ .scroll_x
13
+ .scroll_y
14
+ .scroll_contain
15
+ .scroll_x-proximity
16
+ .scroll_x-mandatory
15
17
  */
16
18
 
17
19
  :root {
@@ -61,38 +63,38 @@ All right reserved.
61
63
  }
62
64
  }
63
65
 
64
- .scroll.scroll--x {
66
+ .scroll_x {
65
67
  overflow-x: scroll;
66
68
  overflow-y: hidden;
67
69
  touch-action: pan-x;
68
70
  }
69
71
 
70
- .scroll.scroll--y {
72
+ .scroll_y {
71
73
  overflow-x: hidden;
72
74
  overflow-y: scroll;
73
75
  touch-action: pan-y;
74
76
  }
75
77
 
76
- .scroll--contain {
78
+ .scroll_contain {
77
79
  overscroll-behavior: contain;
78
80
  }
79
81
 
80
- .scroll--x-proximity {
82
+ .scroll_x-proximity {
81
83
  scroll-snap-type: x proximity;
82
84
  }
83
- .scroll--x-mandatory {
85
+ .scroll_x-mandatory {
84
86
  scroll-snap-type: x mandatory;
85
87
  }
86
88
 
87
- .scroll--x-proximity,
88
- .scroll--x-mandatory {
89
+ .scroll_x-proximity,
90
+ .scroll_x-mandatory {
89
91
  & > * {
90
92
  scroll-snap-align: start;
91
93
  }
92
- &.scroll--align-center > * {
94
+ &.scroll_align-center > * {
93
95
  scroll-snap-align: center;
94
96
  }
95
- &.scroll--align-end > * {
97
+ &.scroll_align-end > * {
96
98
  scroll-snap-align: end;
97
99
  }
98
100
  }
package/src/components/x/sticky.js CHANGED
@@ -23,7 +23,7 @@
23
23
  * top: 0;
24
24
  * z-index: 100;
25
25
  * }
26
- * .sticky.sticky--on {
26
+ * .sticky.sticky_on {
27
27
  * box-shadow: 0 2px 4px rgba(0,0,0,0.1);
28
28
  * }
29
29
  *
@@ -76,7 +76,7 @@
76
76
  * CSS classes:
77
77
  *
78
78
  * - `.sticky` - Required class to mark element for observation
79
- * - `.sticky--on` - Added when element is in sticky state (not fully visible)
79
+ * - `.sticky_on` - Added when element is in sticky state (not fully visible)
80
80
  * - Removed when element returns to normal flow
81
81
  *
82
82
  * How it works:
@@ -85,7 +85,7 @@
85
85
  * 2. Uses threshold: 1 (element must be fully visible)
86
86
  * 3. Uses rootMargin: '-1px 0px 0px 0px' (triggers when top edge leaves viewport)
87
87
  * 4. When intersectionRatio < 1, element is sticky
88
- * 5. Toggles `sticky--on` class and dispatches events
88
+ * 5. Toggles `sticky_on` class and dispatches events
89
89
  *
90
90
  * Observer configuration:
91
91
  *
@@ -122,7 +122,7 @@
122
122
  * //
123
123
  * // <style>
124
124
  * // .sticky { position: sticky; top: 0; z-index: 100; }
125
- * // .sticky.sticky--on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
125
+ * // .sticky.sticky_on { box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
126
126
  * // </style>
127
127
  * //
128
128
  * // <script type="module">
@@ -150,7 +150,7 @@ class Sticky {
150
150
  * Class to apply when sticky state is active.
151
151
  * @type {string}
152
152
  */
153
- this.activeClass = 'sticky--on';
153
+ this.activeClass = 'sticky_on';
154
154
 
155
155
  /**
156
156
  * Root margin for IntersectionObserver.
package/src/css/x.css CHANGED
@@ -10,6 +10,8 @@ All right reserved.
10
10
  @import "../components/x/reset.css";
11
11
  @import "../components/x/space.css";
12
12
  @import "../components/x/links.css";
13
+ @import "../components/x/grid.css";
14
+ @import "../components/x/flex.css";
13
15
  @import "../components/x/flow.css";
14
16
  @import "../components/x/form.css";
15
17
  @import "../components/x/buttons.css";
@@ -23,21 +25,19 @@ All right reserved.
23
25
  @import "../components/x/icons.css";
24
26
  @import "../components/x/typo.css";
25
27
  @import "../components/x/helpers.css";
26
- @import "../components/x/grid.css";
27
- @import "../components/x/flex.css";
28
28
  @import "../components/x/colors.css";
29
29
 
30
30
  /*
31
31
  .button
32
- .button--label
33
- .button--primary
34
- .button--success
35
- .button--warning
36
- .button--danger
37
- .button--white
38
- .button--black
39
- .button--clear
40
- .button--dropdown
32
+ .button_label
33
+ .button_primary
34
+ .button_success
35
+ .button_warning
36
+ .button_danger
37
+ .button_white
38
+ .button_black
39
+ .button_clear
40
+ .button_dropdown
41
41
  .buttons-group
42
42
  */
43
43
 
@@ -197,18 +197,18 @@ All right reserved.
197
197
  a.link
198
198
  a.hover
199
199
  a.active
200
- a.link--noline
201
- a.link--underline
202
- a.link--dashed
203
- a.link--dotted
204
- a.link--wavy
200
+ a.link_noline
201
+ a.link_underline
202
+ a.link_dashed
203
+ a.link_dotted
204
+ a.link_wavy
205
205
  */
206
206
 
207
207
  /*
208
208
  .scroll
209
- .scroll--contain
210
- .scroll--x-proximity
211
- .scroll--x-mandatory
209
+ .scroll_contain
210
+ .scroll_x-proximity
211
+ .scroll_x-mandatory
212
212
  */
213
213
 
214
214
  /*