@iris.interactive/handcook 2.6.8 → 2.6.11

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@iris.interactive/handcook",
3
- "version": "2.6.8",
3
+ "version": "2.6.11",
4
4
  "description": "The web cooking by IRIS Interactive",
5
5
  "main": "./public/scripts/index.js",
6
6
  "scripts": {
@@ -20,9 +20,12 @@ import './modal.component.scss';
20
20
 
21
21
  export class HcModal {
22
22
 
23
+ showEvent;
24
+ hideEvent;
23
25
  options = {};
24
26
 
25
27
  constructor(elements = ElementEnum.modal, overrideOptions = {}) {
28
+ this.createEvent();
26
29
  document.querySelectorAll(elements).forEach(element => {
27
30
  Fancybox.bind(element);
28
31
  element.addEventListener('click', (e) => {
@@ -31,7 +34,16 @@ export class HcModal {
31
34
  Object.assign(this.options, overrideOptions);
32
35
  this.options.src = this.options.src != '' ? this.options.src : (e.currentTarget.hasAttribute('href') ? e.currentTarget.getAttribute('href') : (e.currentTarget.hasAttribute('data-hc-src') ? e.currentTarget.dataset.hcSrc : ''));
33
36
  this.options.parentEl = this.options.parentEl !== null ? document.querySelector(this.options.parentEl) : (e.currentTarget.hasAttribute('data-hc-modal-parent') ? document.querySelector(e.currentTarget.getAttribute('data-hc-modal-parent')) : '');
34
- Fancybox.show([this.options]);
37
+ Fancybox.show([this.options], {
38
+ on: {
39
+ reveal: () => {
40
+ document.dispatchEvent(this.showEvent);
41
+ },
42
+ closing: () => {
43
+ document.dispatchEvent(this.hideEvent);
44
+ }
45
+ }
46
+ });
35
47
  });
36
48
  });
37
49
  }
@@ -48,9 +60,14 @@ export class HcModal {
48
60
  this.options = {
49
61
  src: '',
50
62
  type: 'inline',
51
- parentEl: null
63
+ parentEl: null,
52
64
  };
53
65
  }
66
+
67
+ createEvent() {
68
+ this.showEvent = new Event("show.hc.modal");
69
+ this.hideEvent = new Event("hide.hc.modal");
70
+ }
54
71
  }
55
72
 
56
73
  const hc_modal = function (trigger, options) {
@@ -25,6 +25,7 @@ export class HcTab {
25
25
  hiddenEvent;
26
26
 
27
27
  constructor(elements = ElementEnum.tab) {
28
+ this.createEvent();
28
29
  this.buildDOM();
29
30
  const triggerTabList = [].slice.call(document.querySelectorAll(elements))
30
31
  triggerTabList.forEach(function (triggerEl) {
@@ -55,7 +55,7 @@
55
55
  flex-direction: $direction;
56
56
  }
57
57
 
58
- /* Hover - TODO
58
+ /* Hover
59
59
  /* ============================================= */
60
60
  @mixin hover {
61
61
  &:hover {
@@ -63,6 +63,22 @@
63
63
  }
64
64
  }
65
65
 
66
+ @mixin hover-focus() {
67
+ &:hover,
68
+ &:focus {
69
+ @content;
70
+ }
71
+ }
72
+
73
+ @mixin hover-focus-active() {
74
+ &:hover,
75
+ &:focus,
76
+ &:active {
77
+ @content;
78
+ }
79
+ }
80
+
81
+
66
82
  /* Touch
67
83
  /* ============================================= */
68
84
  @mixin touch {
@@ -9,7 +9,7 @@
9
9
  transition: $delay ease;
10
10
  }
11
11
 
12
- /* Hover
12
+ /* Animate
13
13
  /* ============================================= */
14
14
  @mixin animate {
15
15
  transform: scale(1.02);
@@ -42,7 +42,7 @@
42
42
  /* ============================================= */
43
43
  /* display flex
44
44
  /* ============================================= */
45
- /* Hover - TODO
45
+ /* Hover
46
46
  /* ============================================= */
47
47
  /* Touch
48
48
  /* ============================================= */
@@ -54,7 +54,7 @@
54
54
  */
55
55
  /* Transition
56
56
  /* ============================================= */
57
- /* Hover
57
+ /* Animate
58
58
  /* ============================================= */
59
59
  /* Ellipsis
60
60
  /* ============================================= */