@iris.interactive/handcook 2.9.13 → 2.9.14
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/README.md +1 -1
- package/package.json +1 -1
- package/public/index.html +32 -0
- package/public/scripts/components/collapse/collapse.component.min.js +1 -1
- package/public/scripts/components/dropdown/dropdown.component.min.js +1 -1
- package/public/scripts/components/lightbox/lightbox.component.min.js +1 -1
- package/public/scripts/components/modal/modal.component.min.js +1 -1
- package/public/scripts/components/popin/popin.component.js +154 -0
- package/public/scripts/components/popin/popin.component.scss +143 -0
- package/public/scripts/components/scrollspy/scrollspy.component.min.js +1 -1
- package/public/scripts/components/slider/slider.component.min.js +1 -1
- package/public/scripts/components/smooth-scroll/smooth-scroll.component.min.js +1 -1
- package/public/scripts/components/tab/tab.component.min.js +1 -1
- package/public/scripts/components/toggle/toggle.component.min.js +1 -1
- package/public/scripts/components/tooltip/tooltip.component.min.js +1 -1
- package/public/scripts/enumerators/element.enum.js +1 -0
- package/public/scripts/handcook.js +1 -1
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* IRIS Interactive
|
|
3
|
+
*
|
|
4
|
+
* NOTICE OF LICENSE
|
|
5
|
+
*
|
|
6
|
+
* This source file is no subject to a specific license
|
|
7
|
+
* but it belongs to the company IRIS Interactive.
|
|
8
|
+
* You can contact IRIS Interactive at the following
|
|
9
|
+
* address: contact@iris-interactive.fr
|
|
10
|
+
*
|
|
11
|
+
* @author Stephan JAMBOU
|
|
12
|
+
* @date 28/01/2022 14:27
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
import ElementEnum from "../../enumerators/element.enum";
|
|
17
|
+
import './popin.component.scss';
|
|
18
|
+
|
|
19
|
+
export class HcPopin {
|
|
20
|
+
|
|
21
|
+
showEvent;
|
|
22
|
+
hideEvent;
|
|
23
|
+
|
|
24
|
+
constructor(triggerAttribute = ElementEnum.popin) {
|
|
25
|
+
document.querySelectorAll(triggerAttribute).forEach( element => {
|
|
26
|
+
this.createEvent(element);
|
|
27
|
+
|
|
28
|
+
//Set close cross
|
|
29
|
+
let cross = document.createElement('button');
|
|
30
|
+
cross.setAttribute('data-hc-popin-close', '');
|
|
31
|
+
cross.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" tabindex="-1"><path d="M20 20L4 4m16 0L4 20"></path></svg>'
|
|
32
|
+
element.prepend(cross)
|
|
33
|
+
|
|
34
|
+
//Set overlay
|
|
35
|
+
if (element.hasAttribute('data-hc-popin-overlay')) {
|
|
36
|
+
let overlay = document.createElement('div');
|
|
37
|
+
overlay.setAttribute('data-hc-popin-overlay-background', '');
|
|
38
|
+
element.prepend(overlay);
|
|
39
|
+
element.parentNode.insertBefore(overlay, element);
|
|
40
|
+
overlay.appendChild(element);
|
|
41
|
+
|
|
42
|
+
//Close overlay
|
|
43
|
+
let closeTriggerOverlay = document.querySelectorAll('[data-hc-popin-overlay-background]');
|
|
44
|
+
closeTriggerOverlay[0].addEventListener('click', (e) => {
|
|
45
|
+
e.preventDefault();
|
|
46
|
+
const clickDetect = e.composedPath().includes(element)
|
|
47
|
+
if (!clickDetect) {
|
|
48
|
+
this.close(element);
|
|
49
|
+
}
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
//Set position
|
|
54
|
+
if (element.hasAttribute('data-hc-popin-position-top')) {
|
|
55
|
+
element.style.top = element.getAttribute('data-hc-popin-position-top');
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (element.hasAttribute('data-hc-popin-position-bottom')) {
|
|
59
|
+
element.style.bottom = element.getAttribute('data-hc-popin-position-bottom');
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (element.hasAttribute('data-hc-popin-position-left')) {
|
|
63
|
+
element.style.left = element.getAttribute('data-hc-popin-position-left');
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (element.hasAttribute('data-hc-popin-position-right')) {
|
|
67
|
+
element.style.right = element.getAttribute('data-hc-popin-position-right');
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
//Default position
|
|
71
|
+
if (!element.hasAttribute('data-hc-popin-position-top') && !element.hasAttribute('data-hc-popin-position-top')) {
|
|
72
|
+
element.style.bottom = '20px';
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (!element.hasAttribute('data-hc-popin-position-left') && !element.hasAttribute('data-hc-popin-position-right')) {
|
|
76
|
+
element.style.right = '20px';
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
//Mode (trigger or auto [default])
|
|
80
|
+
if (element.hasAttribute('data-hc-popin-mode') && element.getAttribute('data-hc-popin-mode') === 'trigger') {
|
|
81
|
+
document.querySelectorAll('[data-hc-popin-trigger]').forEach(trigger => {
|
|
82
|
+
trigger.addEventListener('click', (e) => {
|
|
83
|
+
let target = e.currentTarget.getAttribute('href');
|
|
84
|
+
this.show(document.getElementById(target.substring(1)));
|
|
85
|
+
});
|
|
86
|
+
});
|
|
87
|
+
} else {
|
|
88
|
+
//Set delay on mode auto
|
|
89
|
+
if (element.hasAttribute('data-hc-popin-delay')) {
|
|
90
|
+
setTimeout(() => {
|
|
91
|
+
this.show(element);
|
|
92
|
+
}, element.getAttribute('data-hc-popin-delay'));
|
|
93
|
+
} else {
|
|
94
|
+
this.show(element);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
//Close cross
|
|
99
|
+
let closeTrigger = element.querySelectorAll('[data-hc-popin-close]');
|
|
100
|
+
closeTrigger[0].addEventListener('click', (e) => {
|
|
101
|
+
e.preventDefault();
|
|
102
|
+
this.close(element);
|
|
103
|
+
});
|
|
104
|
+
});
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
show(element) {
|
|
108
|
+
//On affiche la popin
|
|
109
|
+
element.classList.add('hc-popin-show');
|
|
110
|
+
|
|
111
|
+
//On affiche l'overlay si présent
|
|
112
|
+
let parent = element.parentNode;
|
|
113
|
+
if (parent.hasAttribute('data-hc-popin-overlay-background')) {
|
|
114
|
+
parent.classList.add('hc-popin-overlay-show');
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
document.dispatchEvent(this.showEvent);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
close(element) {
|
|
121
|
+
//On cache la popin
|
|
122
|
+
element.classList.remove('hc-popin-show');
|
|
123
|
+
|
|
124
|
+
//On cache l'overlay si présent
|
|
125
|
+
let parent = element.parentNode;
|
|
126
|
+
if (parent.hasAttribute('data-hc-popin-overlay-background')) {
|
|
127
|
+
parent.classList.remove('hc-popin-overlay-show');
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
console.log("dispatch event hide");
|
|
131
|
+
console.log(this.hideEvent);
|
|
132
|
+
|
|
133
|
+
document.dispatchEvent(this.hideEvent);
|
|
134
|
+
}
|
|
135
|
+
|
|
136
|
+
createEvent(element) {
|
|
137
|
+
this.showEvent = new CustomEvent("show.hc.popin", {
|
|
138
|
+
detail: {
|
|
139
|
+
element
|
|
140
|
+
}
|
|
141
|
+
} );
|
|
142
|
+
|
|
143
|
+
this.hideEvent = new CustomEvent("hide.hc.popin", {
|
|
144
|
+
detail: {
|
|
145
|
+
element
|
|
146
|
+
}
|
|
147
|
+
} );
|
|
148
|
+
}
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
const hc_popin = function (trigger) {
|
|
152
|
+
new HcPopin(trigger);
|
|
153
|
+
}
|
|
154
|
+
export default hc_popin;
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
/*!
|
|
2
|
+
* IRIS Interactive
|
|
3
|
+
*
|
|
4
|
+
* NOTICE OF LICENSE
|
|
5
|
+
*
|
|
6
|
+
* This source file is no subject to a specific license
|
|
7
|
+
* but it belongs to the company IRIS Interactive.
|
|
8
|
+
* You can contact IRIS Interactive at the following
|
|
9
|
+
* address: contact@iris-interactive.fr
|
|
10
|
+
*
|
|
11
|
+
* @author Stephan JAMBOU
|
|
12
|
+
* @date 22/02/2022 14:57
|
|
13
|
+
* @copyright Copyright (c) 2002-2022 IRIS Interactive, Inc. (http://www.iris-interactive.fr)
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
//Popin
|
|
17
|
+
[data-hc-popin] {
|
|
18
|
+
display: none;
|
|
19
|
+
position: fixed;
|
|
20
|
+
z-index: 1051;
|
|
21
|
+
animation-name: fadeIn;
|
|
22
|
+
animation-duration: 0.4s;
|
|
23
|
+
visibility: hidden;
|
|
24
|
+
color: var(--hc-popin--color, #000);
|
|
25
|
+
background-color: var(--hc-popin--background-color, #fff);
|
|
26
|
+
border-radius: var(--hc-popin--border-radius, 0);
|
|
27
|
+
box-shadow: var(--hc-popin--box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.2));
|
|
28
|
+
|
|
29
|
+
&[data-hc-popin-overlay] {
|
|
30
|
+
position: absolute;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
//Origin transform
|
|
35
|
+
&[data-hc-popin-origin-center-x] {
|
|
36
|
+
transform: translateX(-50%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&[data-hc-popin-origin-center-y] {
|
|
40
|
+
transform: translateY(-50%);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
&[data-hc-popin-origin-center] {
|
|
44
|
+
transform: translate(-50%, -50%);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
//Type large
|
|
48
|
+
&[data-hc-popin-type="large"] {
|
|
49
|
+
width: calc(100% - 60px);
|
|
50
|
+
padding: var(--hc-popin--padding--large, 60px);
|
|
51
|
+
max-width: var(--hc-popin--width--large, 800px);
|
|
52
|
+
|
|
53
|
+
[data-hc-popin-close] {
|
|
54
|
+
top: var(--hc-popin-close--top--large, 20px);
|
|
55
|
+
right: var(--hc-popin-close--right--large, 20px);
|
|
56
|
+
|
|
57
|
+
svg {
|
|
58
|
+
height: var(--hc-popin-close--height--large, 18px);
|
|
59
|
+
width: var(--hc-popin-close--width--large, 18px);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
//Type small
|
|
65
|
+
&[data-hc-popin-type="small"] {
|
|
66
|
+
width: calc(100% - 40px);
|
|
67
|
+
max-width: var(--hc-popin--width--small, 275px);
|
|
68
|
+
padding: var(--hc-popin--padding--small, 30px);
|
|
69
|
+
|
|
70
|
+
[data-hc-popin-close] {
|
|
71
|
+
top: var(--hc-popin-close--top--small, 5px);
|
|
72
|
+
right: var(--hc-popin-close--right--small, 5px);
|
|
73
|
+
|
|
74
|
+
svg {
|
|
75
|
+
height: var(--hc-popin-close--height--small, 14px);
|
|
76
|
+
width: var(--hc-popin-close--width--small, 14px);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
//Open class
|
|
82
|
+
&.hc-popin-show {
|
|
83
|
+
display: block;
|
|
84
|
+
visibility: visible;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
//Close cross
|
|
88
|
+
[data-hc-popin-close] {
|
|
89
|
+
position: absolute;
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
justify-content: center;
|
|
93
|
+
cursor: pointer;
|
|
94
|
+
pointer-events: all;
|
|
95
|
+
background: transparent;
|
|
96
|
+
border: 0;
|
|
97
|
+
padding: 5px;
|
|
98
|
+
transition: opacity 0.4s ease;
|
|
99
|
+
|
|
100
|
+
svg {
|
|
101
|
+
stroke: var(--hc-popin-close--color, #000);
|
|
102
|
+
stroke-width: var(--hc-popin-close--stroke-width, 2.5);
|
|
103
|
+
stroke-linejoin: bevel;
|
|
104
|
+
stroke-linecap: round;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
&:hover {
|
|
108
|
+
opacity: 0.6;
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
|
|
114
|
+
//Overlay
|
|
115
|
+
[data-hc-popin-overlay-background] {
|
|
116
|
+
display: none;
|
|
117
|
+
position: fixed;
|
|
118
|
+
top: 0;
|
|
119
|
+
right: 0;
|
|
120
|
+
left: 0;
|
|
121
|
+
bottom: 0;
|
|
122
|
+
z-index: 1050;
|
|
123
|
+
visibility: hidden;
|
|
124
|
+
animation-name: fadeIn;
|
|
125
|
+
animation-duration: 0.4s;
|
|
126
|
+
background: var(--hc-popin--overlay, rgba(24, 24, 27, 0.8));
|
|
127
|
+
|
|
128
|
+
&.hc-popin-overlay-show {
|
|
129
|
+
display: block;
|
|
130
|
+
visibility: visible;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
//Animation Fade in
|
|
136
|
+
@keyframes fadeIn {
|
|
137
|
+
0% {
|
|
138
|
+
opacity: 0;
|
|
139
|
+
}
|
|
140
|
+
100% {
|
|
141
|
+
opacity: 1;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{"use strict";var t={812:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"tooltip","[data-hc-tooltip], [data-hc-popover]"),r(e,"popover","[data-hc-popover]"),r(e,"scrollSmooth","[data-hc-smooth-scroll]"),r(e,"modal","[data-hc-modal]"),r(e,"lightboxAttr","data-hc-lightbox"),r(e,"lightbox","[".concat(e.lightboxAttr,"]")),r(e,"dropdown","[data-hc-dropdown]"),r(e,"collapse","[data-hc-collapse]"),r(e,"collapseItem","[data-hc-collapse-item]"),r(e,"tab","[data-hc-tab]"),r(e,"toggle","[data-hc-toggle]"),r(e,"slider","[data-hc-slider]"),r(e,"scrollspy","[data-hc-scrollspy]"),r(e,"scrollspyNav","[data-hc-scrollspy-nav]"),r(e,"scrollspyNavItem","[data-hc-scrollspy-nav-item]")},539:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"attrHref","data-hc-smooth-scroll-href"),r(e,"attrShift","data-hc-smooth-scroll-shift")}},a={};function o(r){var e=a[r];if(void 0!==e)return e.exports;var
|
|
1
|
+
(()=>{"use strict";var t={812:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"tooltip","[data-hc-tooltip], [data-hc-popover]"),r(e,"popover","[data-hc-popover]"),r(e,"scrollSmooth","[data-hc-smooth-scroll]"),r(e,"modal","[data-hc-modal]"),r(e,"lightboxAttr","data-hc-lightbox"),r(e,"lightbox","[".concat(e.lightboxAttr,"]")),r(e,"dropdown","[data-hc-dropdown]"),r(e,"collapse","[data-hc-collapse]"),r(e,"collapseItem","[data-hc-collapse-item]"),r(e,"popin","[data-hc-popin]"),r(e,"tab","[data-hc-tab]"),r(e,"toggle","[data-hc-toggle]"),r(e,"slider","[data-hc-slider]"),r(e,"scrollspy","[data-hc-scrollspy]"),r(e,"scrollspyNav","[data-hc-scrollspy-nav]"),r(e,"scrollspyNavItem","[data-hc-scrollspy-nav-item]")},539:(t,a,o)=>{function r(t,a,o){return a in t?Object.defineProperty(t,a,{value:o,enumerable:!0,configurable:!0,writable:!0}):t[a]=o,t}var e=function t(){!function(t,a){if(!(t instanceof a))throw new TypeError("Cannot call a class as a function")}(this,t)};r(e,"attrHref","data-hc-smooth-scroll-href"),r(e,"attrShift","data-hc-smooth-scroll-shift")}},a={};function o(r){var e=a[r];if(void 0!==e)return e.exports;var c=a[r]={exports:{}};return t[r](c,c.exports,o),c.exports}o.d=(t,a)=>{for(var r in a)o.o(a,r)&&!o.o(t,r)&&Object.defineProperty(t,r,{enumerable:!0,get:a[r]})},o.o=(t,a)=>Object.prototype.hasOwnProperty.call(t,a),o(812),o(539)})();
|