@dsb.dk/designsystem
Version:
Development environment for creating components to the DSB Designsystem.
103 lines (89 loc) • 6.57 kB
JavaScript
import { h, T } from '../lit-element-a21c046d.js';
import './icon-button.js';
import './icon.js';
import './getIcon.js';
var css_248z = ":host,:root{--dsb-breakpoints-s:600px;--dsb-breakpoints-m:900px;--dsb-breakpoints-l:1250px;--dsb-breakpoints-xl:1681px;--dsb-breakpoints-max:2320px;--color-red:#b41730;--color-dark-red:#9d152c;--color-blue:#00233c;--color-white:#fff;--color-grey-1:#eeeff0;--color-grey-2:#ccc;--color-grey-3:#4c4c4c;--color-black:#111;--border-radius:5px;--border-width:1px;--page-width:1920px;--dsb-header-height-collapsed:var(--units-9);--dsb-header-height-expanded:var(--units-9);--flyout-transition:transform 0.6s var(--ease-in-out-quint);--header-collapsed:64px;--header-no-headline-expanded:136px;--header-show-headline-expanded:164px}@media (min-width:56.25em){:host,:root{--dsb-header-height-collapsed:calc(var(--units-4) + var(--units-1)*2);--dsb-header-height-expanded:124px;--header-collapsed:72px;--header-no-headline-expanded:var(--header-collapsed);--header-show-headline-expanded:124px}}@media (min-width:78.125em){:host,:root{--header-show-headline-expanded:130px}}:host,:root{--font-primary:\"Via Office\",serif;--font-secondary:\"Helvetica Neue\",sans-serif}h1{--font-family:var(--font-primary);--font-size:22px;--line-height:32px;font-family:--font-secondary;font-family:var(--font-family,--font-secondary);font-size:16px;font-size:var(--font-size,16px);line-height:20px;line-height:var(--line-height,20px);font-weight:400;font-weight:var(--font-weight,normal);letter-spacing:0;letter-spacing:var(--letter-spacing,0);max-width:12em;max-width:60rem;text-align:center;margin:0 auto 1.618em}@media (min-width:37.5em){h1{--font-size:20px;--line-height:30px}}@media (min-width:56.25em){h1{--font-size:22px;--line-height:32px}}@media (min-width:78.125em){h1{--font-size:24px;--line-height:34px}}@media (min-width:105.0625em){h1{--font-size:32px;--line-height:44px}}.content{display:-webkit-box;display:-ms-flexbox;display:flex;overflow:scroll;-ms-scroll-snap-type:x mandatory;scroll-snap-type:x mandatory;padding-bottom:var(--units-3)}.content::-webkit-scrollbar{display:none}.ui{--icon-button-background-color:var(--color-blue);--icon-button-padding:var(--units-1);--icon-size:var(--units-2);--icon-color:var(--color-white);display:-webkit-box;display:-ms-flexbox;display:flex;grid-gap:var(--units-2);gap:var(--units-2);max-width:calc(min(100vw, var(--page-width))/24*22);margin-top:var(--units-1);margin-left:auto;margin-right:auto}@media (min-width:37.5em){.ui{max-width:calc(min(100vw, var(--page-width))/24*20);margin-top:var(--units-2)}}::slotted(*){scroll-snap-align:start;-ms-flex-negative:0;flex-shrink:0;max-width:75vw}@media (min-width:37.5em){::slotted(*){max-width:35vw}}@media (min-width:56.25em){::slotted(*){max-width:25vw}}slot{display:-webkit-box;display:-ms-flexbox;display:flex;grid-gap:calc(min(100vw, var(--page-width))/24*1);gap:calc(min(100vw, var(--page-width))/24*1);-ms-flex-negative:0;flex-shrink:0}:host([narrow]) .content{scroll-padding-left:calc(min(100vw, var(--page-width))/24*1);scroll-padding-right:calc(min(100vw, var(--page-width))/24*1);padding-left:calc(min(100vw, var(--page-width))/24*1);padding-right:calc(min(100vw, var(--page-width))/24*1)}@media (min-width:37.5em){:host([narrow]) .content{scroll-padding-left:calc(min(100vw, var(--page-width))/24*2);scroll-padding-right:calc(min(100vw, var(--page-width))/24*2);padding-left:calc(min(100vw, var(--page-width))/24*2);padding-right:calc(min(100vw, var(--page-width))/24*2)}}:host([narrow]) .content::-webkit-scrollbar-track{margin-left:calc(min(100vw, var(--page-width))/24*1);margin-right:calc(min(100vw, var(--page-width))/24*1)}@media (min-width:37.5em){:host([narrow]) .content::-webkit-scrollbar-track{margin-left:calc(min(100vw, var(--page-width))/24*2);margin-right:calc(min(100vw, var(--page-width))/24*2)}}:host([align-center]) slot{-webkit-box-align:center;-ms-flex-align:center;align-items:center}:host([scrollbar]) .content::-webkit-scrollbar{width:0;height:5px}:host([scrollbar]) .content::-webkit-scrollbar-track{background:var(--color-grey-2)}:host([scrollbar]) .content::-webkit-scrollbar-thumb{background:var(--color-red)}";
class Slide extends h {
static get styles() {
return [css_248z];
}
static get properties() {
return {
headline: { type: String },
narrow: { type: Boolean, reflect: true },
};
}
constructor() {
super();
this.headline = '';
this.narrow = '';
}
get _slottedChildren() {
const slot = this.shadowRoot.querySelector('slot');
const childNodes = slot.assignedNodes({ flatten: true });
return Array.prototype.filter.call(
childNodes,
(node) => node.nodeType == Node.ELEMENT_NODE
);
}
slide(next) {
/**
* the horizontal left margin
*/
const { scrollPaddingLeft, paddingLeft } = getComputedStyle(
this.renderRoot.querySelector('.content')
);
const padding = scrollPaddingLeft === 'auto' ? 0 : parseInt(paddingLeft);
/**
* returns one item, that is currently at the left border
* in order to both have the mouse scroll and the buttons keep track of
* what item is the current 'active' one
*/
const activeItem = this._slottedChildren.find((item, i) => {
const { left } = item.getBoundingClientRect();
const leftPos = left - (i === 0 ? 0 : padding);
/**
* return the first item that has a positive left position
*/
return leftPos >= -10;
});
/**
* Will be the item before/after current one
*/
const newItem = this._slottedChildren[
this._slottedChildren.indexOf(activeItem) + (next ? 1 : -1)
];
console.log(newItem);
/**
* Do the scrolling
*/
newItem &&
newItem.scrollIntoView({
behavior: 'smooth',
inline: 'start',
block: 'nearest',
});
}
render() {
return T` <section>
${this.headline ? T`<h1>${this.headline}</h1>` : ''}
<div class="content"><slot></slot></div>
<div class="ui">
<dsb-icon-button
icon="arrow--left"
round
class="previous"
=${() => this.slide(false)}
></dsb-icon-button>
<dsb-icon-button
icon="arrow--right"
round
class="next"
=${() => this.slide(true)}
></dsb-icon-button>
</div>
</section>`;
}
}
customElements.define('dsb-slide', Slide);
export { Slide };