italia2024/js/_enchants/_customElm-bdiSlice.js

Italia 2024 assets

(function () {
var insertStyle = document.createElement('style');
insertStyle.insertAdjacentHTML('beforeend', `
/* bdi-slice：CSS */
[class*="bdi-slice"] {
position: relative;
z-index: 10;
display: block;
}

.bdi-slice-before::before,
.bdi-slice-after::after {
content: "";
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
width: 100%;
height: 100%;
border-style: none;
border-width: 0;
border-color: transparent;
border-image-repeat: repeat;
pointer-events: none;
}

.bdi-slice-before::before {
z-index: -1;
}

.bdi-slice-after::after {
z-index: 10;
}

.bdi-slice-before[data-bdisrc]::before,
.bdi-slice-after[data-bdisrc]::after {
border-image-source: var(--bdisrc);
}

/* Default */
.bdi-slice-before::before,
.bdi-slice-after::after {
border-image-slice: 33.3% fill;
border-image-width: 33.3%;
}

/* 120px（40x3） */
.bdi-slice-before.is-xxSmall::before,
.bdi-slice-after.is-xxSmall::after {
border-image-slice: 40 fill;
border-image-width: 40px;
}

/* 240px（80x3） */
.bdi-slice-before.is-xSmall::before,
.bdi-slice-after.is-xSmall::after {
border-image-slice: 80 fill;
border-image-width: 80px;
}

/* 360px（120x3） */
.bdi-slice-before.is-small::before,
.bdi-slice-after.is-small::after {
border-image-slice: 120 fill;
border-image-width: 120px;
}

/* 480px（160x3） */
.bdi-slice-before.is-medium::before,
.bdi-slice-after.is-medium::after {
border-image-slice: 160 fill;
border-image-width: 160px;
}

/* 600px（200x3） */
.bdi-slice-before.is-large::before,
.bdi-slice-after.is-large::after {
border-image-slice: 200 fill;
border-image-width: 200px;
}

/* 720px（200x3） */
.bdi-slice-before.is-xLarge::before,
.bdi-slice-after.is-xLarge::after {
border-image-slice: 240 fill;
border-image-width: 240px;
}

/* 840px（280x3） */
.bdi-slice-before.is-xxLarge::before,
.bdi-slice-after.is-xxLarge::after {
border-image-slice: 280 fill;
border-image-width: 280px;
}
`);
document.getElementsByTagName('head')[0].appendChild(insertStyle);




//CustomElement: ❬bdi-slice❭ の定義
class BdiSlice extends HTMLElement {
  constructor() {
    super();
  }
}
customElements.define("bdi-slice", BdiSlice);


//[data-bdisrc]（border-image-source）
let arrBdiSrcs = Array.prototype.slice.call(document.querySelectorAll("[data-bdisrc]"));
for (let i = 0; i < arrBdiSrcs.length; i++) {
  const urlBdiSrc = arrBdiSrcs[i].getAttribute('data-bdisrc');
  arrBdiSrcs[i].style.setProperty('--bdisrc', `url(${urlBdiSrc})`);
}




})(); ///function：customElm-bdiSlice.js