@everymatrix/bonus-elevate-levels-jojogroup 1.80.3

package/dist/esm/elevate-level-list.entry.js

@@ -0,0 +1,143 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-88ecbb5b.js';
+import { t as translate } from './locale.utils-3a9c8e78.js';
+
+/**
+ * @name isMobile
+ * @description A method that returns if the browser used to access the app is from a mobile device or not
+ * @param {String} userAgent window.navigator.userAgent
+ * @returns {Boolean} true or false
+ */
+const isMobile = (userAgent) => {
+    return !!(userAgent.toLowerCase().match(/android/i) ||
+        userAgent.toLowerCase().match(/blackberry|bb/i) ||
+        userAgent.toLowerCase().match(/iphone|ipad|ipod/i) ||
+        userAgent.toLowerCase().match(/windows phone|windows mobile|iemobile|wpdesktop/i));
+};
+var MOVE_TO;
+(function (MOVE_TO) {
+    MOVE_TO[MOVE_TO["slideToRight"] = 1] = "slideToRight";
+    MOVE_TO[MOVE_TO["slideToLeft"] = -1] = "slideToLeft";
+})(MOVE_TO || (MOVE_TO = {}));
+
+const elevateLevelListCss = "elevate-level-list{display:flex;flex-direction:row}.LevelItemsWrapper{display:flex;flex:1;margin-top:10px;min-height:30px;transition-property:all;position:relative;height:138px;overflow-x:hidden}.Mobile.LevelItems{overflow-x:hidden}.LevelItems{overflow-x:auto;display:flex;flex-direction:row;gap:10px;left:0;position:absolute;transition:left 0.5s ease-in-out}.LevelItems .Item:hover,.LevelItems .Item.Active{background-color:var(--emw--color-gray-50, rgb(244, 244, 244));box-shadow:0px 4px 13px 0px rgba(0, 0, 0, 0.25)}.LevelItems .Item{width:86px;height:125px;border-radius:15px;text-align:center;display:flex;flex-direction:column;cursor:pointer}.LevelItems .Item .LevelName{font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.LevelItems .Item .LevelPoints{color:var(--emw--color-gray-100, rgb(118, 113, 113));font-size:10px}.LevelItems .Item .LevelImg{width:65px;height:68px;margin:11px auto}.SliderButton{display:flex;width:29px;align-items:center;cursor:pointer}.SliderButton.Disabled svg{stroke:var(--emw--color-gray-50, #cbc5c5)}.SliderButton.Hidden{display:none}";
+const ElevateLevelListStyle0 = elevateLevelListCss;
+
+const ElevateLevelList = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.selectedLevelChanged = createEvent(this, "selectedLevelChanged", 7);
+        this.minOffset = 0;
+        this.isMobile = isMobile(window.navigator.userAgent);
+        this.levels = undefined;
+        this.language = undefined;
+        this.selectedLevelId = undefined;
+        this.showSliderButton = false;
+        this.touchPosStart = undefined;
+        this.touchPosEnd = undefined;
+        this.offset = 0;
+    }
+    onLevelClicked(elevateLevel) {
+        this.selectedLevelChanged.emit({ level: elevateLevel });
+        this.selectedLevelId = elevateLevel.id;
+    }
+    levelsChangedHandler() {
+        this.initOffsetOfLevelItems();
+    }
+    initOffsetOfLevelItems() {
+        if (!this.levels || this.levels.length === 0 || !this.selectedLevelId) {
+            return;
+        }
+        const currentLevelIndex = this.levels.findIndex((item) => {
+            return this.selectedLevelId === item.id;
+        });
+        this.onLevelClicked(this.levels[currentLevelIndex === -1 ? 0 : currentLevelIndex]);
+        //do not need change the slider offset when level items less than moveCountForOneTouch
+        if (this.levels.length <= this.moveCountForOneTouch) {
+            return;
+        }
+        //to avoid the slider do not move when currentLevelIndex = moveCountForOneTouch - 1
+        let newOffset = Math.floor((currentLevelIndex === -1 ? 1 : currentLevelIndex + 1) / this.moveCountForOneTouch)
+            * this.moveCountForOneTouch * this.childElementWidth * (-1);
+        this.offset = newOffset <= this.minOffset ? this.minOffset : (newOffset >= 0 ? 0 : newOffset);
+    }
+    onTouchStart(e) {
+        this.touchPosStart = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+    }
+    onTouchMove(e) {
+        this.touchPosEnd = { clientX: e.touches[0].clientX, clientY: e.touches[0].clientY };
+        const diffX = this.touchPosEnd.clientX - this.touchPosStart.clientX;
+        const diffY = this.touchPosEnd.clientY - this.touchPosStart.clientY;
+        if (Math.abs(diffX) > Math.abs(diffY)) {
+            this.slideTo(diffX > 0 ? MOVE_TO.slideToRight : MOVE_TO.slideToLeft);
+        }
+    }
+    slideTo(direction) {
+        let newOffset = this.levelsElement.offsetLeft +
+            (this.childElementWidth) * this.moveCountForOneTouch * direction;
+        if (newOffset % this.childElementWidth != 0) {
+            const leftOfPreNode = (Math.floor(newOffset / this.childElementWidth)) * this.childElementWidth;
+            const leftOfNextNode = (Math.ceil(newOffset / this.childElementWidth)) * this.childElementWidth;
+            //touchmove to right, get left of pre-node; touchmove to left, get left of next-node
+            newOffset = direction === MOVE_TO.slideToRight ? leftOfPreNode : leftOfNextNode;
+        }
+        this.offset = newOffset < this.minOffset ? this.minOffset : (newOffset >= 0 ? 0 : newOffset);
+    }
+    initLevelSlider() {
+        var _a;
+        if (!((_a = this.levelsElement) === null || _a === void 0 ? void 0 : _a.firstElementChild)) {
+            console.log('Widget[elevate-level-list] DOM is not ready.');
+            return;
+        }
+        this.showSliderButton = !this.isMobile && (this.levelsElement.clientWidth > this.levelsElement.parentElement.clientWidth);
+        this.minOffset = this.levelsElement.parentElement.clientWidth - this.levelsElement.clientWidth;
+        this.childElementWidth = this.levelsElement.firstElementChild.clientWidth;
+        this.moveCountForOneTouch = Math.ceil(this.levelsElement.parentElement.clientWidth / this.childElementWidth) - 1;
+        const childElementCount = this.levelsElement.childElementCount;
+        this.childElementWidth += (this.levelsElement.clientWidth - this.childElementWidth * childElementCount) / (childElementCount - 1);
+    }
+    debounce(callback, delay) {
+        {
+            let timer;
+            return () => {
+                clearTimeout(timer);
+                timer = setTimeout(() => {
+                    callback();
+                }, delay);
+            };
+        }
+    }
+    ;
+    convertNumberToCompactForm(num) {
+        if (num >= 1000000000)
+            return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'b';
+        if (num >= 1000000)
+            return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'm';
+        if (num >= 1000)
+            return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
+        return num.toFixed(1);
+    }
+    handleResize() {
+        this.debounce(this.initLevelSlider.bind(this), 200)();
+    }
+    componentDidRender() {
+        this.host.componentOnReady().then(() => {
+            this.initLevelSlider();
+        });
+    }
+    render() {
+        return (h(Host, { key: '44b0d5811a2207a53f95c5a50d6ed89d70f42d01' }, this.levels && [
+            h("div", { key: 'fec6de26b8622dac4649df5e0346e8ef4138465e', class: `SliderButton LeftButton ${this.offset === 0 ? 'Disabled' : ''} ${this.showSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToRight) }, h("svg", { key: '84cf364bdddfb7cd9a83b9808622332ab01729cd', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'fd358448630ac184528b38e3a88db50b628be3de', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" }))),
+            h("div", { key: '4a32485c3440261265060a3298ab56e49f602006', class: 'LevelItemsWrapper' }, h("div", { key: 'f5b7f896452375e04031e1db6c56cfd8b5e4909d', style: { 'left': `${this.offset}px` }, class: `LevelItems ${this.isMobile ? 'Mobile' : ''}`, id: 'levelItems', ref: (el) => { this.levelsElement = el; } }, this.levels.map((level, idx) => {
+                return (h("div", { class: `Item ${this.selectedLevelId === level.id ? 'Active' : ''}`, onClick: this.onLevelClicked.bind(this, level) }, h("img", { alt: `Presentation Icon for ${level.presentation.displayName}`, class: "LevelImg", src: level.presentation.asset }), h("span", { class: "LevelName", title: level.presentation.displayName }, level.presentation.displayName), h("span", { class: "LevelPoints" }, idx === 0 ? '' : '>', this.convertNumberToCompactForm(level.firstEntryPoints), ' ', translate('points', this.language))));
+            }))),
+            h("div", { key: '3444fcf3b46239e9ee6b84aa35f5637d9bee66ea', class: `SliderButton RightButton ${this.offset <= this.minOffset ? 'Disabled' : ''} ${this.showSliderButton ? '' : 'Hidden'}`, onClick: () => this.slideTo(MOVE_TO.slideToLeft) }, h("svg", { key: 'b86e73ad5f0f6114af9fe13452c5c6193b3a026b', fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '18f15ddeb747db3c80c6c16b2e0e727f45bbb986', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" })))
+        ]));
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "selectedLevelId": ["levelsChangedHandler"]
+    }; }
+};
+ElevateLevelList.style = ElevateLevelListStyle0;
+
+export { ElevateLevelList as elevate_level_list };