mithril-materialized 2.0.0-rc.2 → 2.0.1
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/dist/index.esm.js +29 -23
- package/dist/index.js +29 -23
- package/dist/index.umd.js +29 -23
- package/package.json +1 -1
package/dist/index.esm.js
CHANGED
|
@@ -161,7 +161,7 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
|
|
|
161
161
|
const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
|
|
162
162
|
|
|
163
163
|
// import './styles/input.css';
|
|
164
|
-
const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
|
|
164
|
+
const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
|
|
165
165
|
/** Simple label element, used for most components. */
|
|
166
166
|
const Label = () => {
|
|
167
167
|
return {
|
|
@@ -483,7 +483,10 @@ const Carousel = () => {
|
|
|
483
483
|
dim: 1, // Make sure dim is non zero for divisions
|
|
484
484
|
// Animation
|
|
485
485
|
ticker: null,
|
|
486
|
-
scrollingTimeout: null
|
|
486
|
+
scrollingTimeout: null,
|
|
487
|
+
// Instance options (properly typed with defaults)
|
|
488
|
+
options: Object.assign({}, defaults),
|
|
489
|
+
};
|
|
487
490
|
// Utility functions
|
|
488
491
|
const xpos = (e) => {
|
|
489
492
|
// Touch event
|
|
@@ -516,7 +519,7 @@ const Carousel = () => {
|
|
|
516
519
|
const autoScroll = () => {
|
|
517
520
|
if (state.amplitude) {
|
|
518
521
|
const elapsed = Date.now() - state.timestamp;
|
|
519
|
-
const delta = state.amplitude * Math.exp(-elapsed /
|
|
522
|
+
const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
|
|
520
523
|
if (delta > 2 || delta < -2) {
|
|
521
524
|
scroll(state.target - delta);
|
|
522
525
|
requestAnimationFrame(autoScroll);
|
|
@@ -545,14 +548,14 @@ const Carousel = () => {
|
|
|
545
548
|
}
|
|
546
549
|
state.scrollingTimeout = window.setTimeout(() => {
|
|
547
550
|
carouselEl.classList.remove('scrolling');
|
|
548
|
-
},
|
|
551
|
+
}, state.options.duration);
|
|
549
552
|
// Start actual scroll
|
|
550
553
|
const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
|
|
551
554
|
const count = items.length;
|
|
552
555
|
if (count === 0)
|
|
553
556
|
return;
|
|
554
557
|
const lastCenter = state.center;
|
|
555
|
-
const numVisibleOffset = 1 /
|
|
558
|
+
const numVisibleOffset = 1 / state.options.numVisible;
|
|
556
559
|
state.offset = typeof x === 'number' ? x : state.offset;
|
|
557
560
|
state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
|
|
558
561
|
const delta = state.offset - state.center * state.dim;
|
|
@@ -561,7 +564,7 @@ const Carousel = () => {
|
|
|
561
564
|
const half = count >> 1;
|
|
562
565
|
let alignment;
|
|
563
566
|
let centerTweenedOpacity;
|
|
564
|
-
if (
|
|
567
|
+
if (state.options.fullWidth) {
|
|
565
568
|
alignment = 'translateX(0)';
|
|
566
569
|
centerTweenedOpacity = 1;
|
|
567
570
|
}
|
|
@@ -584,7 +587,7 @@ const Carousel = () => {
|
|
|
584
587
|
// Add active class to center item
|
|
585
588
|
items.forEach((item) => item.classList.remove('active'));
|
|
586
589
|
el.classList.add('active');
|
|
587
|
-
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
|
|
590
|
+
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
|
|
588
591
|
updateItemStyle(el, centerTweenedOpacity, 0, transformString);
|
|
589
592
|
}
|
|
590
593
|
// Side items
|
|
@@ -592,31 +595,31 @@ const Carousel = () => {
|
|
|
592
595
|
let zTranslation;
|
|
593
596
|
let tweenedOpacity;
|
|
594
597
|
// Right side
|
|
595
|
-
if (
|
|
596
|
-
zTranslation =
|
|
598
|
+
if (state.options.fullWidth) {
|
|
599
|
+
zTranslation = state.options.dist;
|
|
597
600
|
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
|
|
598
601
|
}
|
|
599
602
|
else {
|
|
600
|
-
zTranslation =
|
|
603
|
+
zTranslation = state.options.dist * (i * 2 + tween * dir);
|
|
601
604
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
|
|
602
605
|
}
|
|
603
606
|
if (!state.noWrap || state.center + i < count) {
|
|
604
607
|
const el = items[wrap(state.center + i, count)];
|
|
605
|
-
const transformString = `${alignment} translateX(${
|
|
608
|
+
const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
606
609
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
607
610
|
}
|
|
608
611
|
// Left side
|
|
609
|
-
if (
|
|
610
|
-
zTranslation =
|
|
612
|
+
if (state.options.fullWidth) {
|
|
613
|
+
zTranslation = state.options.dist;
|
|
611
614
|
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
|
|
612
615
|
}
|
|
613
616
|
else {
|
|
614
|
-
zTranslation =
|
|
617
|
+
zTranslation = state.options.dist * (i * 2 - tween * dir);
|
|
615
618
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
|
|
616
619
|
}
|
|
617
620
|
if (!state.noWrap || state.center - i >= 0) {
|
|
618
621
|
const el = items[wrap(state.center - i, count)];
|
|
619
|
-
const transformString = `${alignment} translateX(${-
|
|
622
|
+
const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
620
623
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
621
624
|
}
|
|
622
625
|
}
|
|
@@ -749,7 +752,7 @@ const Carousel = () => {
|
|
|
749
752
|
e.stopPropagation();
|
|
750
753
|
return false;
|
|
751
754
|
}
|
|
752
|
-
else if (!
|
|
755
|
+
else if (!state.options.fullWidth) {
|
|
753
756
|
const target = e.target.closest('.carousel-item');
|
|
754
757
|
if (target) {
|
|
755
758
|
const items = Array.from(document.querySelectorAll('.carousel-item'));
|
|
@@ -778,24 +781,27 @@ const Carousel = () => {
|
|
|
778
781
|
const { items, indicators = false } = attrs;
|
|
779
782
|
if (!items || items.length === 0)
|
|
780
783
|
return undefined;
|
|
781
|
-
//
|
|
782
|
-
Object.assign(defaults, attrs);
|
|
784
|
+
// Create instance-specific options without mutating globals
|
|
785
|
+
const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
|
|
786
|
+
// Update state options for this render
|
|
787
|
+
state.options = instanceOptions;
|
|
783
788
|
const supportTouch = typeof window.ontouchstart !== 'undefined';
|
|
784
789
|
return m('.carousel', {
|
|
785
790
|
oncreate: ({ attrs, dom }) => {
|
|
786
791
|
const carouselEl = dom;
|
|
787
792
|
const items = carouselEl.querySelectorAll('.carousel-item');
|
|
788
793
|
state.hasMultipleSlides = items.length > 1;
|
|
789
|
-
state.showIndicators =
|
|
790
|
-
state.noWrap =
|
|
794
|
+
state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
|
|
795
|
+
state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
|
|
791
796
|
if (items.length > 0) {
|
|
792
797
|
const firstItem = items[0];
|
|
793
798
|
state.itemWidth = firstItem.offsetWidth;
|
|
794
799
|
state.itemHeight = firstItem.offsetHeight;
|
|
795
|
-
state.dim = state.itemWidth * 2 +
|
|
800
|
+
state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
|
|
796
801
|
}
|
|
797
802
|
// Cap numVisible at count
|
|
798
|
-
|
|
803
|
+
instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
|
|
804
|
+
state.options = instanceOptions;
|
|
799
805
|
// Initial scroll
|
|
800
806
|
scroll(state.offset, attrs);
|
|
801
807
|
},
|
|
@@ -1168,7 +1174,7 @@ const CodeBlock = () => ({
|
|
|
1168
1174
|
const label = lang.replace('lang-', '');
|
|
1169
1175
|
const cb = code instanceof Array ? code.join('\n') : code;
|
|
1170
1176
|
const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
|
|
1171
|
-
return m(`pre.codeblock${newRow ? '.clear' : ''}`,
|
|
1177
|
+
return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
|
|
1172
1178
|
m('div', m('label', label)),
|
|
1173
1179
|
m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
|
|
1174
1180
|
]);
|
package/dist/index.js
CHANGED
|
@@ -163,7 +163,7 @@ const getDropdownStyles = (inputRef, overlap = false, options, isDropDown = fals
|
|
|
163
163
|
const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
|
|
164
164
|
|
|
165
165
|
// import './styles/input.css';
|
|
166
|
-
const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
|
|
166
|
+
const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
|
|
167
167
|
/** Simple label element, used for most components. */
|
|
168
168
|
const Label = () => {
|
|
169
169
|
return {
|
|
@@ -485,7 +485,10 @@ const Carousel = () => {
|
|
|
485
485
|
dim: 1, // Make sure dim is non zero for divisions
|
|
486
486
|
// Animation
|
|
487
487
|
ticker: null,
|
|
488
|
-
scrollingTimeout: null
|
|
488
|
+
scrollingTimeout: null,
|
|
489
|
+
// Instance options (properly typed with defaults)
|
|
490
|
+
options: Object.assign({}, defaults),
|
|
491
|
+
};
|
|
489
492
|
// Utility functions
|
|
490
493
|
const xpos = (e) => {
|
|
491
494
|
// Touch event
|
|
@@ -518,7 +521,7 @@ const Carousel = () => {
|
|
|
518
521
|
const autoScroll = () => {
|
|
519
522
|
if (state.amplitude) {
|
|
520
523
|
const elapsed = Date.now() - state.timestamp;
|
|
521
|
-
const delta = state.amplitude * Math.exp(-elapsed /
|
|
524
|
+
const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
|
|
522
525
|
if (delta > 2 || delta < -2) {
|
|
523
526
|
scroll(state.target - delta);
|
|
524
527
|
requestAnimationFrame(autoScroll);
|
|
@@ -547,14 +550,14 @@ const Carousel = () => {
|
|
|
547
550
|
}
|
|
548
551
|
state.scrollingTimeout = window.setTimeout(() => {
|
|
549
552
|
carouselEl.classList.remove('scrolling');
|
|
550
|
-
},
|
|
553
|
+
}, state.options.duration);
|
|
551
554
|
// Start actual scroll
|
|
552
555
|
const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
|
|
553
556
|
const count = items.length;
|
|
554
557
|
if (count === 0)
|
|
555
558
|
return;
|
|
556
559
|
const lastCenter = state.center;
|
|
557
|
-
const numVisibleOffset = 1 /
|
|
560
|
+
const numVisibleOffset = 1 / state.options.numVisible;
|
|
558
561
|
state.offset = typeof x === 'number' ? x : state.offset;
|
|
559
562
|
state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
|
|
560
563
|
const delta = state.offset - state.center * state.dim;
|
|
@@ -563,7 +566,7 @@ const Carousel = () => {
|
|
|
563
566
|
const half = count >> 1;
|
|
564
567
|
let alignment;
|
|
565
568
|
let centerTweenedOpacity;
|
|
566
|
-
if (
|
|
569
|
+
if (state.options.fullWidth) {
|
|
567
570
|
alignment = 'translateX(0)';
|
|
568
571
|
centerTweenedOpacity = 1;
|
|
569
572
|
}
|
|
@@ -586,7 +589,7 @@ const Carousel = () => {
|
|
|
586
589
|
// Add active class to center item
|
|
587
590
|
items.forEach((item) => item.classList.remove('active'));
|
|
588
591
|
el.classList.add('active');
|
|
589
|
-
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
|
|
592
|
+
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
|
|
590
593
|
updateItemStyle(el, centerTweenedOpacity, 0, transformString);
|
|
591
594
|
}
|
|
592
595
|
// Side items
|
|
@@ -594,31 +597,31 @@ const Carousel = () => {
|
|
|
594
597
|
let zTranslation;
|
|
595
598
|
let tweenedOpacity;
|
|
596
599
|
// Right side
|
|
597
|
-
if (
|
|
598
|
-
zTranslation =
|
|
600
|
+
if (state.options.fullWidth) {
|
|
601
|
+
zTranslation = state.options.dist;
|
|
599
602
|
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
|
|
600
603
|
}
|
|
601
604
|
else {
|
|
602
|
-
zTranslation =
|
|
605
|
+
zTranslation = state.options.dist * (i * 2 + tween * dir);
|
|
603
606
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
|
|
604
607
|
}
|
|
605
608
|
if (!state.noWrap || state.center + i < count) {
|
|
606
609
|
const el = items[wrap(state.center + i, count)];
|
|
607
|
-
const transformString = `${alignment} translateX(${
|
|
610
|
+
const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
608
611
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
609
612
|
}
|
|
610
613
|
// Left side
|
|
611
|
-
if (
|
|
612
|
-
zTranslation =
|
|
614
|
+
if (state.options.fullWidth) {
|
|
615
|
+
zTranslation = state.options.dist;
|
|
613
616
|
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
|
|
614
617
|
}
|
|
615
618
|
else {
|
|
616
|
-
zTranslation =
|
|
619
|
+
zTranslation = state.options.dist * (i * 2 - tween * dir);
|
|
617
620
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
|
|
618
621
|
}
|
|
619
622
|
if (!state.noWrap || state.center - i >= 0) {
|
|
620
623
|
const el = items[wrap(state.center - i, count)];
|
|
621
|
-
const transformString = `${alignment} translateX(${-
|
|
624
|
+
const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
622
625
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
623
626
|
}
|
|
624
627
|
}
|
|
@@ -751,7 +754,7 @@ const Carousel = () => {
|
|
|
751
754
|
e.stopPropagation();
|
|
752
755
|
return false;
|
|
753
756
|
}
|
|
754
|
-
else if (!
|
|
757
|
+
else if (!state.options.fullWidth) {
|
|
755
758
|
const target = e.target.closest('.carousel-item');
|
|
756
759
|
if (target) {
|
|
757
760
|
const items = Array.from(document.querySelectorAll('.carousel-item'));
|
|
@@ -780,24 +783,27 @@ const Carousel = () => {
|
|
|
780
783
|
const { items, indicators = false } = attrs;
|
|
781
784
|
if (!items || items.length === 0)
|
|
782
785
|
return undefined;
|
|
783
|
-
//
|
|
784
|
-
Object.assign(defaults, attrs);
|
|
786
|
+
// Create instance-specific options without mutating globals
|
|
787
|
+
const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
|
|
788
|
+
// Update state options for this render
|
|
789
|
+
state.options = instanceOptions;
|
|
785
790
|
const supportTouch = typeof window.ontouchstart !== 'undefined';
|
|
786
791
|
return m('.carousel', {
|
|
787
792
|
oncreate: ({ attrs, dom }) => {
|
|
788
793
|
const carouselEl = dom;
|
|
789
794
|
const items = carouselEl.querySelectorAll('.carousel-item');
|
|
790
795
|
state.hasMultipleSlides = items.length > 1;
|
|
791
|
-
state.showIndicators =
|
|
792
|
-
state.noWrap =
|
|
796
|
+
state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
|
|
797
|
+
state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
|
|
793
798
|
if (items.length > 0) {
|
|
794
799
|
const firstItem = items[0];
|
|
795
800
|
state.itemWidth = firstItem.offsetWidth;
|
|
796
801
|
state.itemHeight = firstItem.offsetHeight;
|
|
797
|
-
state.dim = state.itemWidth * 2 +
|
|
802
|
+
state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
|
|
798
803
|
}
|
|
799
804
|
// Cap numVisible at count
|
|
800
|
-
|
|
805
|
+
instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
|
|
806
|
+
state.options = instanceOptions;
|
|
801
807
|
// Initial scroll
|
|
802
808
|
scroll(state.offset, attrs);
|
|
803
809
|
},
|
|
@@ -1170,7 +1176,7 @@ const CodeBlock = () => ({
|
|
|
1170
1176
|
const label = lang.replace('lang-', '');
|
|
1171
1177
|
const cb = code instanceof Array ? code.join('\n') : code;
|
|
1172
1178
|
const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
|
|
1173
|
-
return m(`pre.codeblock${newRow ? '.clear' : ''}`,
|
|
1179
|
+
return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
|
|
1174
1180
|
m('div', m('label', label)),
|
|
1175
1181
|
m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
|
|
1176
1182
|
]);
|
package/dist/index.umd.js
CHANGED
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
const range = (a, b) => Array.from({ length: b - a + 1 }, (_, i) => a + i);
|
|
166
166
|
|
|
167
167
|
// import './styles/input.css';
|
|
168
|
-
const Mandatory = { view: ({ attrs }) => m('span.mandatory', attrs, '*') };
|
|
168
|
+
const Mandatory = { view: ({ attrs }) => m('span.mandatory', Object.assign({}, attrs), '*') };
|
|
169
169
|
/** Simple label element, used for most components. */
|
|
170
170
|
const Label = () => {
|
|
171
171
|
return {
|
|
@@ -487,7 +487,10 @@
|
|
|
487
487
|
dim: 1, // Make sure dim is non zero for divisions
|
|
488
488
|
// Animation
|
|
489
489
|
ticker: null,
|
|
490
|
-
scrollingTimeout: null
|
|
490
|
+
scrollingTimeout: null,
|
|
491
|
+
// Instance options (properly typed with defaults)
|
|
492
|
+
options: Object.assign({}, defaults),
|
|
493
|
+
};
|
|
491
494
|
// Utility functions
|
|
492
495
|
const xpos = (e) => {
|
|
493
496
|
// Touch event
|
|
@@ -520,7 +523,7 @@
|
|
|
520
523
|
const autoScroll = () => {
|
|
521
524
|
if (state.amplitude) {
|
|
522
525
|
const elapsed = Date.now() - state.timestamp;
|
|
523
|
-
const delta = state.amplitude * Math.exp(-elapsed /
|
|
526
|
+
const delta = state.amplitude * Math.exp(-elapsed / state.options.duration);
|
|
524
527
|
if (delta > 2 || delta < -2) {
|
|
525
528
|
scroll(state.target - delta);
|
|
526
529
|
requestAnimationFrame(autoScroll);
|
|
@@ -549,14 +552,14 @@
|
|
|
549
552
|
}
|
|
550
553
|
state.scrollingTimeout = window.setTimeout(() => {
|
|
551
554
|
carouselEl.classList.remove('scrolling');
|
|
552
|
-
},
|
|
555
|
+
}, state.options.duration);
|
|
553
556
|
// Start actual scroll
|
|
554
557
|
const items = Array.from(carouselEl.querySelectorAll('.carousel-item'));
|
|
555
558
|
const count = items.length;
|
|
556
559
|
if (count === 0)
|
|
557
560
|
return;
|
|
558
561
|
const lastCenter = state.center;
|
|
559
|
-
const numVisibleOffset = 1 /
|
|
562
|
+
const numVisibleOffset = 1 / state.options.numVisible;
|
|
560
563
|
state.offset = typeof x === 'number' ? x : state.offset;
|
|
561
564
|
state.center = Math.floor((state.offset + state.dim / 2) / state.dim);
|
|
562
565
|
const delta = state.offset - state.center * state.dim;
|
|
@@ -565,7 +568,7 @@
|
|
|
565
568
|
const half = count >> 1;
|
|
566
569
|
let alignment;
|
|
567
570
|
let centerTweenedOpacity;
|
|
568
|
-
if (
|
|
571
|
+
if (state.options.fullWidth) {
|
|
569
572
|
alignment = 'translateX(0)';
|
|
570
573
|
centerTweenedOpacity = 1;
|
|
571
574
|
}
|
|
@@ -588,7 +591,7 @@
|
|
|
588
591
|
// Add active class to center item
|
|
589
592
|
items.forEach((item) => item.classList.remove('active'));
|
|
590
593
|
el.classList.add('active');
|
|
591
|
-
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir *
|
|
594
|
+
const transformString = `${alignment} translateX(${-delta / 2}px) translateX(${dir * state.options.shift * tween}px) translateZ(${state.options.dist * tween}px)`;
|
|
592
595
|
updateItemStyle(el, centerTweenedOpacity, 0, transformString);
|
|
593
596
|
}
|
|
594
597
|
// Side items
|
|
@@ -596,31 +599,31 @@
|
|
|
596
599
|
let zTranslation;
|
|
597
600
|
let tweenedOpacity;
|
|
598
601
|
// Right side
|
|
599
|
-
if (
|
|
600
|
-
zTranslation =
|
|
602
|
+
if (state.options.fullWidth) {
|
|
603
|
+
zTranslation = state.options.dist;
|
|
601
604
|
tweenedOpacity = i === half && delta < 0 ? 1 - tween : 1;
|
|
602
605
|
}
|
|
603
606
|
else {
|
|
604
|
-
zTranslation =
|
|
607
|
+
zTranslation = state.options.dist * (i * 2 + tween * dir);
|
|
605
608
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 + tween * dir);
|
|
606
609
|
}
|
|
607
610
|
if (!state.noWrap || state.center + i < count) {
|
|
608
611
|
const el = items[wrap(state.center + i, count)];
|
|
609
|
-
const transformString = `${alignment} translateX(${
|
|
612
|
+
const transformString = `${alignment} translateX(${state.options.shift + (state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
610
613
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
611
614
|
}
|
|
612
615
|
// Left side
|
|
613
|
-
if (
|
|
614
|
-
zTranslation =
|
|
616
|
+
if (state.options.fullWidth) {
|
|
617
|
+
zTranslation = state.options.dist;
|
|
615
618
|
tweenedOpacity = i === half && delta > 0 ? 1 - tween : 1;
|
|
616
619
|
}
|
|
617
620
|
else {
|
|
618
|
-
zTranslation =
|
|
621
|
+
zTranslation = state.options.dist * (i * 2 - tween * dir);
|
|
619
622
|
tweenedOpacity = 1 - numVisibleOffset * (i * 2 - tween * dir);
|
|
620
623
|
}
|
|
621
624
|
if (!state.noWrap || state.center - i >= 0) {
|
|
622
625
|
const el = items[wrap(state.center - i, count)];
|
|
623
|
-
const transformString = `${alignment} translateX(${-
|
|
626
|
+
const transformString = `${alignment} translateX(${-state.options.shift + (-state.dim * i - delta) / 2}px) translateZ(${zTranslation}px)`;
|
|
624
627
|
updateItemStyle(el, tweenedOpacity, -i, transformString);
|
|
625
628
|
}
|
|
626
629
|
}
|
|
@@ -753,7 +756,7 @@
|
|
|
753
756
|
e.stopPropagation();
|
|
754
757
|
return false;
|
|
755
758
|
}
|
|
756
|
-
else if (!
|
|
759
|
+
else if (!state.options.fullWidth) {
|
|
757
760
|
const target = e.target.closest('.carousel-item');
|
|
758
761
|
if (target) {
|
|
759
762
|
const items = Array.from(document.querySelectorAll('.carousel-item'));
|
|
@@ -782,24 +785,27 @@
|
|
|
782
785
|
const { items, indicators = false } = attrs;
|
|
783
786
|
if (!items || items.length === 0)
|
|
784
787
|
return undefined;
|
|
785
|
-
//
|
|
786
|
-
Object.assign(defaults, attrs);
|
|
788
|
+
// Create instance-specific options without mutating globals
|
|
789
|
+
const instanceOptions = Object.assign(Object.assign({}, defaults), attrs);
|
|
790
|
+
// Update state options for this render
|
|
791
|
+
state.options = instanceOptions;
|
|
787
792
|
const supportTouch = typeof window.ontouchstart !== 'undefined';
|
|
788
793
|
return m('.carousel', {
|
|
789
794
|
oncreate: ({ attrs, dom }) => {
|
|
790
795
|
const carouselEl = dom;
|
|
791
796
|
const items = carouselEl.querySelectorAll('.carousel-item');
|
|
792
797
|
state.hasMultipleSlides = items.length > 1;
|
|
793
|
-
state.showIndicators =
|
|
794
|
-
state.noWrap =
|
|
798
|
+
state.showIndicators = instanceOptions.indicators && state.hasMultipleSlides;
|
|
799
|
+
state.noWrap = instanceOptions.noWrap || !state.hasMultipleSlides;
|
|
795
800
|
if (items.length > 0) {
|
|
796
801
|
const firstItem = items[0];
|
|
797
802
|
state.itemWidth = firstItem.offsetWidth;
|
|
798
803
|
state.itemHeight = firstItem.offsetHeight;
|
|
799
|
-
state.dim = state.itemWidth * 2 +
|
|
804
|
+
state.dim = state.itemWidth * 2 + instanceOptions.padding || 1;
|
|
800
805
|
}
|
|
801
806
|
// Cap numVisible at count
|
|
802
|
-
|
|
807
|
+
instanceOptions.numVisible = Math.min(items.length, instanceOptions.numVisible);
|
|
808
|
+
state.options = instanceOptions;
|
|
803
809
|
// Initial scroll
|
|
804
810
|
scroll(state.offset, attrs);
|
|
805
811
|
},
|
|
@@ -1172,7 +1178,7 @@
|
|
|
1172
1178
|
const label = lang.replace('lang-', '');
|
|
1173
1179
|
const cb = code instanceof Array ? code.join('\n') : code;
|
|
1174
1180
|
const cn = [newRow ? 'clear' : '', lang, className].filter(Boolean).join(' ').trim() || undefined;
|
|
1175
|
-
return m(`pre.codeblock${newRow ? '.clear' : ''}`,
|
|
1181
|
+
return m(`pre.codeblock${newRow ? '.clear' : ''}`, params, [
|
|
1176
1182
|
m('div', m('label', label)),
|
|
1177
1183
|
m('code', Object.assign(Object.assign({}, params), { className: cn }), cb),
|
|
1178
1184
|
]);
|