@trilogy-ds/vanilla 0.0.1-beta.9 → 0.0.4-beta-v4
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/lib/trilogy-ds-vanilla.js +5 -5
- package/package.json +5 -4
- package/src/app.ts +0 -4
- package/src/components/accordion.ts +0 -37
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
(function(A){typeof define=="function"&&define.amd?define(A):A()})(function(){"use strict";const A=()=>{let c=document.querySelectorAll("[data-modal-context]");for(let
|
|
1
|
+
(function(A){typeof define=="function"&&define.amd?define(A):A()})(function(){"use strict";const A=()=>{let c=document.querySelectorAll("[data-modal-context]");for(let n=0;n<c.length;n++){let e=c[n],s=e.querySelectorAll("[data-modal-open]"),t=e.querySelector("[data-modal]"),d=e.querySelectorAll("[data-modal-close]"),u=e.querySelectorAll('iframe[src*="www.youtube.com"], iframe[src*="player.vimeo.com"], video');for(let r=0;r<s.length;r++){let f=s[r],g=u[r];f.addEventListener("click",function(){if(i(t),g){if(g.tagName.toLowerCase()==="video"){g.play();return}g.src=g.src+(g.src.indexOf("?")<0?"?":"&")+"autoplay=1"}else return})}for(let r=0;r<d.length;r++)d[r].addEventListener("click",function(){l(t)});a(t);const o=e.querySelector(".modal-background");o&&(o.onclick=function(){l(t)}),e.setAttribute("data-modal-initialized","true")}function a(n){document.addEventListener("keyup",function(e){e=e||window.event;var s=!1;"key"in e?s=e.key==="Escape"||e.key==="Esc":s=e.keyCode===27,s&&l(n)}),document.addEventListener("click",function(e){const s=e.target;let t=s.closest("[data-modal-content]"),d=s.classList.contains("modal");t===null&&d==!0&&l(n)})}const i=n=>{n.classList.add("is-active"),document.body.style.overflow="hidden"},l=n=>{let e=n.querySelector('iframe[src*="youtube"], iframe[src*="vimeo"], video');if(e){if(e.tagName.toLowerCase()==="video"){e.pause();return}e.src=e.src.replace("&autoplay=1","").replace("?autoplay=1","")}n.classList.remove("is-active"),document.body.style.overflow=null}},k=()=>{let c=document.querySelectorAll('[data-variant="auto"]');const a=function(i){let l=0,n=i.length,e=0;if(n>0)for(;e<n;)l=(l<<5)-l+i.charCodeAt(e++)|0;return l};for(let i=0;i<c.length;i++){let l=c[i];const n=l.textContent,e=["b","g","o","q"],s=[];if(n.toLowerCase().split("").map((t,d)=>(e.indexOf(t)>-1&&s.push(d),t)),s.length){const t=a(n),d=Math.abs(t%s.length),u=n.charAt(s[d]),o=n.substring(0,s[d]),r=n.substring(s[d]+1);l.innerHTML=`${o}<span class="has-variant">${u}</span>${r}`}l.setAttribute("data-fontVariant-initialized","true")}},E=()=>{document.querySelectorAll("[data-countdown]").forEach(a=>{let s=a,t=new Date(s.dataset.date).getTime(),d=s.querySelector("[data-days]"),u=s.querySelector("[data-hours]"),o=s.querySelector("[data-minutes]"),r=s.querySelector("[data-seconds]"),f=setInterval(()=>{let g=new Date().getTime(),p=0;t-g>0&&(p=t-g),p<=0&&clearInterval(f),d.innerText=Math.floor(p/864e5).toString(),u.innerText=Math.floor(p%864e5/36e5).toString(),o.innerText=Math.floor(p%36e5/6e4).toString(),r.innerText=Math.floor(p%6e4/1e3).toString()},1e3);s.setAttribute("data-countdown-initialized","true")})},z=()=>{let c=document.querySelectorAll("[data-expandable-row]");for(let a=0;a<c.length;a++){let i=c[a];i.querySelector("[data-expandable-trigger]").addEventListener("click",function(){i.classList.toggle("is-expanded")}),i.setAttribute("data-tableexpansion-initialized","true")}},I=()=>{const c=document.querySelectorAll("[data-tabs-context]"),a=`right: 0;padding-left: 16px;width: 4.5rem !important;background: linear-gradient(90deg, rgba(256,256,256, 0) -25%, white 30%);
|
|
2
2
|
background-attachment: local, local, scroll, scroll;`,i=`
|
|
3
3
|
.tabs {
|
|
4
4
|
padding-right: 2rem;
|
|
5
5
|
}
|
|
6
|
-
`,l=document.createElement("style");l.innerText=i,c.forEach(e=>{const
|
|
6
|
+
`,l=document.createElement("style");l.innerText=i,c.forEach(e=>{const s=e.clientWidth;let t=e.querySelector(".tabs");if(t||(t=e.querySelector('[data-real-class*="tabs"]')),t.scrollWidth>s&&!t.innerHTML.includes("icon is-small is-absolute")){const u=`<span class="icon is-small is-absolute" style="${a}"><i class="tri-arrow-right" aria-hidden='true'></i></span>`;t.innerHTML+=u,t.appendChild(l)}});let n=document.querySelectorAll("[data-tabs-context]");for(let e=0;e<n.length;e++){let s=n[e],t=s.querySelectorAll("[data-tab-navigation]"),d=s.querySelectorAll("[data-tab-content]");for(let r=0;r<t.length;r++){let f=t[r],g=d[r];f.addEventListener("click",function(){o(f,g)}),f.addEventListener("keyup",p=>{switch(p.preventDefault(),p.keyCode){case 35:o(t[t.length-1],d[t.length-1]);break;case 36:o(t[0],d[0]);break;case 37:let h=(r-1)%t.length;o(t[h],d[h]);break;case 39:let v=(r+1)%t.length;o(t[v],d[v]);break}})}const u=()=>{for(let r=0;r<t.length;r++)t[r].classList.remove("is-active"),t[r].setAttribute("aria-selected","false"),t[r].setAttribute("tabindex","-1");for(let r=0;r<d.length;r++)d[r].classList.remove("is-active"),d[r].setAttribute("aria-expanded","false")},o=(r,f)=>{u(),r.classList.add("is-active"),r.setAttribute("aria-selected","true"),r.setAttribute("tabindex","0"),r.focus(),f.classList.add("is-active"),f.setAttribute("aria-expanded","true")};s.setAttribute("data-tab-initialized","true")}},N=()=>{document.querySelectorAll("[data-autocomplete-context]").forEach(a=>{const i=a.querySelector("[data-autocomplete-input]"),l=a.querySelector("[data-autocomplete-menu]"),n=l.querySelectorAll(".autocomplete-item");let e=-1,s="";const t=()=>{e=-1,document.body.classList.remove("autocomplete-close"),a.classList.remove("is-active"),i.blur(),n.forEach(u=>{u.removeAttribute("data-autocomplete-item-hover")})};l.querySelectorAll(".autocomplete-item").forEach((u,o)=>{u.setAttribute("data-autocomplete-item-index",String(o))}),i.addEventListener("focus",u=>{u.stopPropagation(),a.closest(".is-autocomplete").classList.add("is-active"),document.body.classList.add("autocomplete-close");const o=[];n.forEach(r=>{r.textContent.trim().toLocaleLowerCase().includes(i.value.trim().toLocaleLowerCase())?(r.style.display="block",o.push(r)):r.style.display="none",r.removeAttribute("data-autocomplete-item-index")}),o.forEach((r,f)=>{r.setAttribute("data-autocomplete-item-index",String(f))})}),n.forEach(u=>{u.addEventListener("mousemove",()=>{n.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")});const o=u.getAttribute("data-autocomplete-item-index");e=Number(o),u.setAttribute("data-autocomplete-item-hover","true"),s=""}),u.addEventListener("mouseout",()=>{u.removeAttribute("data-autocomplete-item-hover")}),u.addEventListener("click",o=>{const r=o.target;i.value=r.textContent,t()})}),i.addEventListener("input",u=>{const o=u.target;e!==-1&&(e=-1);const r=[];n.forEach(f=>{f.textContent.trim().toLocaleLowerCase().includes(o.value.trim().toLocaleLowerCase())?(f.style.display="block",r.push(f)):f.style.display="none",f.removeAttribute("data-autocomplete-item-index"),f.removeAttribute("data-autocomplete-item-hover")}),r.forEach((f,g)=>{f.setAttribute("data-autocomplete-item-index",String(g))})}),i.addEventListener("keydown",u=>{const o=l.querySelectorAll("[data-autocomplete-item-index]");u.key==="ArrowDown"&&(e=e+1,e===o.length&&(e=0)),u.key==="ArrowUp"&&(e=e-1,e<0&&(e=o.length-1)),["ArrowDown","ArrowUp"].includes(u.key)&&(o.forEach(r=>{r.removeAttribute("data-autocomplete-item-hover")}),o[e].setAttribute("data-autocomplete-item-hover","true"),s=o[e].textContent),u.key==="Enter"&&s.trim().length>0&&(i.value=s,t())}),i.addEventListener("blur",()=>{setTimeout(()=>t(),100)}),a.setAttribute("data-autocomplete-initialized","true")})},O=()=>{document.querySelectorAll(".segmented-control-item").forEach(a=>{a.addEventListener("click",function(){this.parentElement.querySelector(".is-active").classList.remove("is-active"),a.classList.contains("is-active")||a.classList.add("is-active")}),a.setAttribute("data-segmentedControl-initialized","true")})},M=()=>{document.querySelectorAll(".textarea-wrapper").forEach(a=>{if(!a.getAttribute("data-textarea-initialized")){const n=a.querySelector("textarea.textarea"),e=n.getAttribute("maxlength");if(e){var l=0;const s=document.createElement("div");s.classList.add("counter"),s.innerHTML=`${l}/${e}`,a.appendChild(s),n.addEventListener("input",function(t){l=this.value.length,s.innerHTML=`${l}/${e}`,l===10&&t.preventDefault()})}a.setAttribute("data-textarea-initialized","true")}})},P=c=>{c.forEach(a=>{a.classList.remove("is-active")})},$=()=>{document.querySelectorAll(".chips-list").forEach(a=>{if(!a.getAttribute("data-chips-initialized")){const l=a.querySelectorAll(".chips"),n=a.classList.contains("is-multiple");l.forEach(e=>{e.classList.contains("is-disabled")||e.addEventListener("click",function(){n||P(l),e.classList.toggle("is-active")})}),a.setAttribute("data-chips-initialized","true")}})},H=c=>{if(!c.getAttribute("data-progress-radial-initialized")){let i=Number(c.getAttribute("data-progress-radial-first-value")),l=Number(c.getAttribute("data-progress-radial-second-value")),n="",e=0,s=0;if(l===0){const t=setInterval(()=>{e!==i?e+=1:clearInterval(t),n=`radial-gradient(white 58%, transparent 51%),
|
|
7
7
|
conic-gradient(#0C7B91 0deg ${360*(e/100)}deg,
|
|
8
|
-
gainsboro ${360*(e/100)}deg 360deg)`,c.style.background=
|
|
8
|
+
gainsboro ${360*(e/100)}deg 360deg)`,c.style.background=n},13)}else{l+=i;const t=setInterval(()=>{e<i&&(e+=1),s<l?s+=1:clearInterval(t),n=`radial-gradient(white 58%, transparent 51%),
|
|
9
9
|
conic-gradient(#0C7B91 0deg ${360*(e/100)}deg,
|
|
10
|
-
#25465f ${360*(e/100)}deg ${360*(
|
|
11
|
-
gainsboro ${360*(
|
|
10
|
+
#25465f ${360*(e/100)}deg ${360*(s/100)}deg,
|
|
11
|
+
gainsboro ${360*(s/100)}deg 360deg)`,c.style.background=n},13)}c.setAttribute("data-progress-radial-initialized","true")}},W=c=>{let a=c.querySelector(".range-cursor-min"),i=c.querySelector(".range-cursor-max"),l=c.querySelector(".range-track"),n=c.querySelector(".range-value-min"),e=c.querySelector(".range-value-max"),s=a.max,t=0;const d=()=>{let u=Number(a.value)/Number(s)*100,o=Number(i.value)/Number(s)*100;l.style.background=`linear-gradient(to right, #E1E1E1 ${u}% , #0C7B91 ${u}% , #0C7B91 ${o}%, #E1E1E1 ${o}%) `};d(),a.addEventListener("input",u=>{const o=u.target;Number(o.value)<Number(i.value)-t?a.value=o.value:a.value=String(Number(i.value)-t),n.textContent=o.value,d()}),i.addEventListener("input",u=>{const o=u.target;Number(o.value)>Number(a.value)+t?i.value=o.value:i.value=String(Number(a.value)+t),e.textContent=o.value,d()}),c.setAttribute("data-ranges-initialized","true")},F=(c,a)=>{new IntersectionObserver(l=>{l.forEach(n=>{n.isIntersecting&&a(n.target)})}).observe(c)},T=()=>{const c=document.querySelectorAll("[data-select-name]");c&&c.forEach(a=>{const i=a.querySelector("label");if(!a.classList.contains("select-disabled")){const l=a.parentNode;let n=l.querySelector("[data-is-open-options]");a.addEventListener("click",()=>{const s=n.getAttribute("data-is-open-options");s==="true"&&n.setAttribute("data-is-open-options","false"),s==="false"&&n.setAttribute("data-is-open-options","true")}),a.addEventListener("blur",()=>{n.setAttribute("data-is-open-options","false")});const e=n.querySelectorAll("[data-option-name]");e.forEach(s=>{s.classList.contains("select-options-option-disabled")||s.addEventListener("mousedown",()=>{e.forEach(d=>d.classList.remove("select-options-option-activated")),s.classList.add("select-options-option-activated");let t=a.querySelector("[data-option-selected]");t||(t=document.createElement("span"),t.classList.add("select-value"),(!i||i===null)&&t.classList.add("no-label"),a.appendChild(t)),a.setAttribute("data-option-selected",s.getAttribute("data-option-name")),t.setAttribute("data-option-selected",s.getAttribute("data-option-name")),t.textContent=s.getAttribute("data-option-name"),l.classList.add("has-dynamic-placeholder")})})}a.setAttribute("data-selects-initialized","true")})},V=()=>{const c=document.querySelectorAll("[data-has-gauge]");c&&c.forEach(a=>{var S,q;const i="#007B52",l="#707070",n="#D42D02",e="#FFBB33",s=a.querySelector("input"),t=a.querySelector("[data-gauge]"),d=(S=a.querySelector("[data-length-min]"))==null?void 0:S.getAttribute("data-length-min"),u=(q=a.querySelector("[data-length-max]"))==null?void 0:q.getAttribute("data-length-max"),o={},r={fn:m=>u&&!d?m.length>0&&m.length<=Number(u):d&&!u?m.length>=Number(d):u&&d?m.length>=Number(d)&&m.length<=Number(u):!1,ref:a.querySelector("[data-security-length]")},f={fn:m=>/[^\w\*]/.test(m),ref:a.querySelector("[data-security-special-chars]")},g={fn:m=>/[0-9]/.test(m),ref:a.querySelector("[data-security-number]")},p={fn:m=>/[A-Z]/.test(m),ref:a.querySelector("[data-security-uppercase]")},h={fn:m=>/[a-z]/.test(m),ref:a.querySelector("[data-security-lowercase]")};g.ref&&Object.assign(o,{numberVerify:g}),r.ref&&Object.assign(o,{lengthVerify:r}),h.ref&&Object.assign(o,{lowercaseVerify:h}),p.ref&&Object.assign(o,{uppercaseVerify:p}),f.ref&&Object.assign(o,{specialCharsverify:f}),Object.keys(o).length;const v=m=>{const b=[];return Object.keys(o).map(y=>{const C=o[y].fn(m),L=o[y].ref.querySelector("[data-icon-securities]").querySelector("i");b.push(C),C?(L.classList.remove("tri-times-circle"),L.classList.add("tri-check-circle","is-success")):(L.classList.remove("tri-check-circle","is-success"),L.classList.add("tri-times-circle"))}),b.filter(y=>y).length},w=m=>{const b=Number((m/Object.keys(o).length*100).toFixed(0));b<=50&&b>0?(t.style.width="50%",t.style.backgroundColor=n):b<=99&&b>50?(t.style.width="75%",t.style.backgroundColor=e):b===100?(t.style.width="100%",t.style.backgroundColor=i):(t.style.width="0%",t.style.backgroundColor=l)},x=m=>{const b=m.target.value,y=v(b);w(y)};s.addEventListener("input",x),a.setAttribute("data-gauges-initialized","true")})},B=()=>{const c=document.querySelectorAll("[data-show-pwd]");c&&c.forEach(a=>{const i=e=>{e.classList.contains("tri-eye")?(e.classList.remove("tri-eye"),e.classList.add("tri-eye-slash")):(e.classList.remove("tri-eye-slash"),e.classList.add("tri-eye"))},l=e=>{const s=e.parentNode.parentNode;let t=s.querySelector("input");t||(t=s.parentNode.querySelector("input")),t.type==="password"?t.type="text":t.type="password"},n=e=>{const s=e.target;i(s),l(s)};a.addEventListener("click",n),a.setAttribute("data-iconsShowPwd-initialized","true")})},j=()=>{I(),A(),k(),E(),z(),N(),O(),M(),$(),T(),V(),B()};let D=!1;D||document.addEventListener("DOMContentLoaded",function(){j(),D=!0;const c={attributes:!0,childList:!0,subtree:!0};new MutationObserver(function(i){i.forEach(function(l){const n=l.target;if(n){const e=n.querySelectorAll("[data-modal-context]"),s=n.querySelectorAll(".accordions"),t=n.querySelectorAll(".countdown"),d=n.querySelectorAll("[data-tabs-context]"),u=n.querySelectorAll("[data-autocomplete-context]"),o=n.querySelectorAll('[data-variant="auto"]'),r=n.querySelectorAll(".segmented-control-item"),f=document.querySelectorAll(".textarea"),g=document.querySelectorAll(".progress-radial"),p=document.querySelectorAll(".range-container"),h=document.querySelectorAll(".chips-list"),v=n.querySelectorAll("[data-select-name]"),w=document.querySelectorAll("[data-has-gauge]"),x=document.querySelectorAll("[data-show-pwd]"),S=n.querySelectorAll("[data-expandable-row]");[{modal:e},{accordion:s},{tab:d},{countdown:t},{autocomplete:u},{fontVariant:o},{segmentedControl:r},{textareas:f},{ranges:p},{progressRadials:g},{chips:h},{selects:v},{gauges:w},{iconsShowPwd:x},{tableexpansion:S}].forEach(m=>{const b=Object.keys(m)[0];m[b].length&&m[b].forEach(y=>{if(y.getAttribute(`data-${b}-initialized`)!=="true")switch(y.setAttribute(`data-${b}-initialized`,"true"),b){case"modal":return A();case"tab":return I();case"countdown":return E();case"autocomplete":return N();case"fontVariant":return k();case"segmentedControl":return O();case"textareas":return M();case"chips":return $();case"selects":return T();case"ranges":return W(y);case"progressRadials":return F(y,H);case"gauges":return V();case"iconsShowPwd":return B();case"tableexpansion":return z();default:return j()}})})}})}).observe(document.documentElement,c)})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trilogy-ds/vanilla",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.4-beta-v4",
|
|
4
4
|
"author": "Bouygues Telecom",
|
|
5
5
|
"main": "lib/trilogy-ds-vanilla.js",
|
|
6
6
|
"scripts": {
|
|
@@ -12,11 +12,12 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "ISC",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"
|
|
16
|
-
"
|
|
15
|
+
"@storybook/builder-webpack5": "8.1.10",
|
|
16
|
+
"eslint": "^9.5.0",
|
|
17
|
+
"fork-ts-checker-webpack-plugin": "^6.1.0",
|
|
17
18
|
"rimraf": "^3.0.2",
|
|
18
19
|
"ts-loader": "^8.0.17",
|
|
19
|
-
"
|
|
20
|
+
"typescript": "^4.1.5",
|
|
20
21
|
"vite": "^4.5.2",
|
|
21
22
|
"vite-tsconfig-paths": "^4.3.1"
|
|
22
23
|
}
|
package/src/app.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { initModals } from './components/modal'
|
|
2
2
|
import { initVariant } from './components/font-variant'
|
|
3
3
|
import { initCountdowns } from './components/countdown'
|
|
4
|
-
import { initAccordions } from './components/accordion'
|
|
5
4
|
import { initTableExpansion } from './components/table-expansion'
|
|
6
5
|
import { initTabs } from './components/tabs'
|
|
7
6
|
import { initAutocomplete } from './components/autocomplete'
|
|
@@ -21,7 +20,6 @@ const loadVanilla = () => {
|
|
|
21
20
|
initVariant()
|
|
22
21
|
initCountdowns()
|
|
23
22
|
initTableExpansion()
|
|
24
|
-
initAccordions()
|
|
25
23
|
initAutocomplete()
|
|
26
24
|
initSegmentedControl()
|
|
27
25
|
initTextarea()
|
|
@@ -100,8 +98,6 @@ if (!isInitialized) {
|
|
|
100
98
|
return initModals()
|
|
101
99
|
case 'tab':
|
|
102
100
|
return initTabs()
|
|
103
|
-
case 'accordion':
|
|
104
|
-
return initAccordions()
|
|
105
101
|
case 'countdown':
|
|
106
102
|
return initCountdowns()
|
|
107
103
|
case 'autocomplete':
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
const _closeAccordionContexts = (accordionsContexts: NodeListOf<HTMLElement>) => {
|
|
2
|
-
if (accordionsContexts.length) {
|
|
3
|
-
accordionsContexts.forEach((accordionContext: HTMLElement) => {
|
|
4
|
-
const accordionButton = accordionContext.querySelector('button.toggle')
|
|
5
|
-
accordionContext.classList.remove('is-active')
|
|
6
|
-
accordionButton.setAttribute('aria-expanded', 'false')
|
|
7
|
-
})
|
|
8
|
-
}
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
const _loadAccordion = (accordion: HTMLElement) => {
|
|
12
|
-
const accordionsContexts: NodeListOf<HTMLElement> = accordion.querySelectorAll('[data-accordion-context]')
|
|
13
|
-
accordionsContexts.forEach((context) => {
|
|
14
|
-
const toggle = context.querySelector('[data-accordion-toggle]')
|
|
15
|
-
const accordionButton = context.querySelector('button.toggle')
|
|
16
|
-
toggle.addEventListener('click', () => {
|
|
17
|
-
if (!context.classList.contains('is-disabled')) {
|
|
18
|
-
if (context.classList.contains('is-active')) {
|
|
19
|
-
context.classList.remove('is-active')
|
|
20
|
-
accordionButton.setAttribute('aria-expanded', 'false')
|
|
21
|
-
} else {
|
|
22
|
-
_closeAccordionContexts(accordionsContexts)
|
|
23
|
-
context.classList.toggle('is-active')
|
|
24
|
-
accordionButton.setAttribute('aria-expanded', 'true')
|
|
25
|
-
}
|
|
26
|
-
}
|
|
27
|
-
})
|
|
28
|
-
})
|
|
29
|
-
accordion.setAttribute('data-accordion-initialized', 'true')
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export const initAccordions = () => {
|
|
33
|
-
const allAccordions = document.querySelectorAll('[data-accordion], .accordions')
|
|
34
|
-
allAccordions.forEach((accordion: HTMLElement) => {
|
|
35
|
-
_loadAccordion(accordion)
|
|
36
|
-
})
|
|
37
|
-
}
|