@taole/dev-helper 0.0.8 → 0.0.9

package/Tdiv/index.js

@@ -1,5 +1,5 @@
 import setting from "./setting.js";
-export * from "./setting.js";
+import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
 
 const styleText = `
 .tw-img-div {
@@ -51,6 +51,7 @@ class Tdiv extends HTMLElement {
         this._onClickHandler = this._onClickHandler.bind(this);
         this._connected = false;
         this._iscalcstyle = false;
+        this._unsubscribe = null;
     }
 
     connectedCallback() {
@@ -58,11 +59,16 @@ class Tdiv extends HTMLElement {
         this._upgradeProperties();
         this._update();
         this.addEventListener('click', this._onClickHandler);
+        this._unsubscribe = subscribe(this._update.bind(this));
     }
 
     disconnectedCallback() {
         this._connected = false;
         this.removeEventListener('click', this._onClickHandler);
+        if (this._unsubscribe) {
+            this._unsubscribe();
+            this._unsubscribe = null;
+        }
     }
 
     attributeChangedCallback() {
@@ -200,7 +206,7 @@ class Tdiv extends HTMLElement {
 
 
 let isRegister = false;
-export function registerTdiv() {
+function registerTdiv() {
     if (!isRegister) {
         customElements.define('t-div', Tdiv);
         // append style for t-div
@@ -209,4 +215,10 @@ export function registerTdiv() {
         document.head.appendChild(style);
         isRegister = true;
     }
+}
+
+registerTdiv();
+
+export default {
+    updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
 }

package/Tdiv/setting.js

@@ -17,12 +17,30 @@ const config = {
     useButtonEffect: false,
 }
 
+let subscribers = [];
+/**
+ * 订阅配置变化
+ * @param {Function} callback 
+ */
+export function subscribe(callback) {
+    subscribers.push(callback);
+    return () => {
+        subscribers = subscribers.filter(cb => cb !== callback);
+    }
+}
+
+function notify() {
+    subscribers.forEach(cb => cb(config));
+}
+
+
 /**
  * 设置视口宽度
  * @param {number} width 
  */
 export function setViewportWidth(width) {
     config.viewportWidth = width;
+    notify();
 }
 
 /**
@@ -31,6 +49,7 @@ export function setViewportWidth(width) {
  */
 export function setViewportUnit(unit) {
     config.viewportUnit = unit;
+    notify();
 }
 
 /**
@@ -39,6 +58,7 @@ export function setViewportUnit(unit) {
  */
 export function setUsePx(use) {
     config.usePx = use;
+    notify();
 }
 
 /**
@@ -47,6 +67,7 @@ export function setUsePx(use) {
  */
 export function setUseButtonEffect(use) {
     config.useButtonEffect = use;
+    notify();
 }
 
 /**
@@ -55,6 +76,7 @@ export function setUseButtonEffect(use) {
  */
 export function updateConfig(newConfig) {
     Object.assign(config, newConfig);
+    notify();
 }
 
 export default config;

package/dist/tdiv.umd.js

@@ -0,0 +1,312 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.Tdiv = factory());
+})(this, (function () { 'use strict';
+
+    const config = {
+        /**
+         * 设置视口宽度
+         */
+        viewportWidth: 750,
+        /**
+         * 设置视口单位
+         */
+        viewportUnit: "vw",
+        /**
+         * 设置是否使用px
+         */
+        usePx: false,
+        /**
+         * 设置是否使用按钮效果(指按钮的点击效果)
+         */
+        useButtonEffect: false,
+    };
+
+    let subscribers = [];
+    /**
+     * 订阅配置变化
+     * @param {Function} callback 
+     */
+    function subscribe(callback) {
+        subscribers.push(callback);
+        return () => {
+            subscribers = subscribers.filter(cb => cb !== callback);
+        }
+    }
+
+    function notify() {
+        subscribers.forEach(cb => cb(config));
+    }
+
+
+    /**
+     * 设置视口宽度
+     * @param {number} width 
+     */
+    function setViewportWidth(width) {
+        config.viewportWidth = width;
+        notify();
+    }
+
+    /**
+     * 设置视口单位
+     * @param {string} unit 
+     */
+    function setViewportUnit(unit) {
+        config.viewportUnit = unit;
+        notify();
+    }
+
+    /**
+     * 设置是否使用px
+     * @param {boolean} use 
+     */
+    function setUsePx(use) {
+        config.usePx = use;
+        notify();
+    }
+
+    /**
+     * 设置是否使用按钮效果(指按钮的点击效果)
+     * @param {boolean} use 
+     */
+    function setUseButtonEffect(use) {
+        config.useButtonEffect = use;
+        notify();
+    }
+
+    /**
+     * 更新配置
+     * @param {Partial<typeof config>} newConfig 
+     */
+    function updateConfig(newConfig) {
+        Object.assign(config, newConfig);
+        notify();
+    }
+
+    const styleText = `
+.tw-img-div {
+    display: block;
+    background-position: top center;
+    background-repeat: no-repeat;
+    background-size: 100% auto;
+    flex: none;
+}
+.click-effect:active {
+    opacity: 0.85;
+    transform: translateY(1px);
+}`;
+
+    function hasValue(value) {
+        return value !== null && value !== undefined && value !== '';
+    }
+
+    function calc(value, { usePx, viewportWidth, viewportUnit }) {
+        let vWidth = config.viewportWidth;
+        if (viewportWidth) vWidth = viewportWidth;
+        let vUnit = config.viewportUnit;
+        if (viewportUnit) vUnit = viewportUnit;
+        let localUsePx = config.usePx;
+        if (typeof usePx === 'boolean') localUsePx = usePx;
+
+        // console.log("setting", setting, localUsePx);
+
+        if (typeof value === 'string' && !isNaN(value)) value = Number(value);
+        if (typeof value === 'number') {
+            if (localUsePx) return value + 'px';
+            let val = ((value / vWidth) * 100).toFixed(4);
+            return `${val}${vUnit}`;
+        }
+        return value;
+    }
+
+    class Tdiv extends HTMLElement {
+        static get observedAttributes() {
+            return [
+                '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
+                'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
+                'text', 'color', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+            ];
+        }
+
+        constructor() {
+            super();
+            this._onClickHandler = this._onClickHandler.bind(this);
+            this._connected = false;
+            this._iscalcstyle = false;
+            this._unsubscribe = null;
+        }
+
+        connectedCallback() {
+            this._connected = true;
+            this._upgradeProperties();
+            this._update();
+            this.addEventListener('click', this._onClickHandler);
+            this._unsubscribe = subscribe(this._update.bind(this));
+        }
+
+        disconnectedCallback() {
+            this._connected = false;
+            this.removeEventListener('click', this._onClickHandler);
+            if (this._unsubscribe) {
+                this._unsubscribe();
+                this._unsubscribe = null;
+            }
+        }
+
+        attributeChangedCallback() {
+            if (!this._connected) return;
+            this._update();
+        }
+
+        _upgradeProperties() {
+            // For properties set before upgrade
+            Tdiv.observedAttributes.forEach(attr => {
+                if (this.hasOwnProperty(attr)) {
+                    let value = this[attr];
+                    delete this[attr];
+                    this[attr] = value;
+                }
+            });
+        }
+
+        _getAttr(name, type = 'string') {
+            if (!this.hasAttribute(name)) return null;
+            let val = this.getAttribute(name);
+            if (type === 'boolean') return val === '' || val === 'true';
+            if (type === 'number') return Number(val);
+            return val;
+        }
+
+        _update() {
+            if (this._iscalcstyle) return;
+            this._iscalcstyle = true;
+            // console.log('update');
+            // 读取所有属性
+            const _class = this._getAttr('_class') || '';
+            const usePx = this._getAttr('usePx', 'boolean');
+            const styleAttr = this._getAttr('_style') || '';
+            const src = this._getAttr('src') || '';
+            const width = this._getAttr('width');
+            const height = this._getAttr('height');
+            const absolute = this._getAttr('absolute', 'boolean');
+            const top = this._getAttr('top');
+            const left = this._getAttr('left');
+            const right = this._getAttr('right');
+            const bottom = this._getAttr('bottom');
+            const zIndex = this._getAttr('zIndex');
+            const pointer = this._getAttr('pointer', 'boolean');
+            const flex = this._getAttr('flex', 'boolean');
+            const column = this._getAttr('column', 'boolean');
+            const center = this._getAttr('center', 'boolean');
+            const text = this._getAttr('text');
+            const color = this._getAttr('color');
+            const srcMode = this._getAttr('srcMode') || 'auto';
+            const debug = this._getAttr('debug', 'boolean');
+            const viewportWidth = this._getAttr('viewportWidth', 'number');
+            const viewportUnit = this._getAttr('viewportUnit');
+            // class
+            let extraClass = ['tw-img-div'];
+            if (_class) extraClass.push(_class);
+            if (config.useButtonEffect && this._getAttr('onClick')) extraClass.push('click-effect');
+            // 分组样式
+            const calcOpt = { usePx, viewportWidth, viewportUnit };
+            let layoutStyle = '';
+            // 宽度
+            if (hasValue(width)) {
+                const widthStyle = `width: ${calc(width, calcOpt)};`;
+                layoutStyle += widthStyle;
+            }
+            if (hasValue(height)) {
+                const heightStyle = `height: ${calc(height, calcOpt)};`;
+                layoutStyle += heightStyle;
+            }
+            if (absolute) {
+                layoutStyle += 'position: absolute;';
+                if (hasValue(left)) layoutStyle += `left: ${calc(left, calcOpt)};`;
+                if (hasValue(top)) layoutStyle += `top: ${calc(top, calcOpt)};`;
+                if (hasValue(right)) layoutStyle += `right: ${calc(right, calcOpt)};`;
+                if (hasValue(bottom)) layoutStyle += `bottom: ${calc(bottom, calcOpt)};`;
+            } else {
+                layoutStyle += 'position: relative;';
+                if (hasValue(top)) layoutStyle += `margin-top: ${calc(top, calcOpt)};`;
+                if (hasValue(left)) layoutStyle += `margin-left: ${calc(left, calcOpt)};`;
+                if (hasValue(right)) layoutStyle += `margin-right: ${calc(right, calcOpt)};`;
+                if (hasValue(bottom)) layoutStyle += `margin-bottom: ${calc(bottom, calcOpt)};`;
+            }
+            if (hasValue(zIndex)) layoutStyle += `z-index: ${zIndex};`;
+            if (pointer === true) {
+                layoutStyle += 'cursor: pointer;';
+            } else if (this._getAttr('onClick') && pointer === false) {
+                layoutStyle += 'cursor: pointer;';
+            }
+            if (flex) {
+                layoutStyle += 'display:flex;';
+                if (column) layoutStyle += 'flex-direction: column;';
+                if (center) {
+                    layoutStyle += 'justify-content: center;';
+                    layoutStyle += 'align-items: center;';
+                }
+            } else {
+                if (center) layoutStyle += 'text-align: center;';
+            }
+
+            if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+            if (src) {
+                let realSrc = src;
+                if (src.indexOf('https://') === -1) {
+                    realSrc = `https://dynamics-share.tuwan.com/${src}?x-oss-process=image/format,webp/ignore-error,1`;
+                }
+                layoutStyle += `background-image: url(${realSrc});`;
+
+
+                if (srcMode === 'fill') {
+                    layoutStyle += 'background-size: 100% 100%;';
+                } else if (srcMode === 'cover') {
+                    layoutStyle += 'background-size: cover;';
+                }
+            }
+            if (color) layoutStyle += `color: ${color};`;
+            if (styleAttr) layoutStyle += styleAttr;
+            if (debug) {
+                console.log('layoutStyle', layoutStyle);
+            }
+            const currentList = Array.from(this.classList);
+            const classNeeded = extraClass.filter(item => !currentList.includes(item));
+            this.classList.add(...classNeeded);
+            this.style.cssText = layoutStyle;
+            this._iscalcstyle = false;
+        }
+
+        _onClickHandler(e) {
+            // 支持onClick属性（字符串，window作用域下查找）
+            const onClickAttr = this._getAttr('onClick');
+            if (onClickAttr && typeof window[onClickAttr] === 'function') {
+                window[onClickAttr](e);
+            }
+        }
+    }
+
+
+    let isRegister = false;
+    function registerTdiv() {
+        if (!isRegister) {
+            customElements.define('t-div', Tdiv);
+            // append style for t-div
+            const style = document.createElement('style');
+            style.textContent = styleText;
+            document.head.appendChild(style);
+            isRegister = true;
+        }
+    }
+
+    registerTdiv();
+
+    var index = {
+        updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
+    };
+
+    return index;
+
+}));

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.0.8",
+  "version": "0.0.9",
   "type": "module",
   "scripts": {
+    "build": "npx -y rimraf dist && rollup -c",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -10,10 +11,14 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "files":[
-    "Tdiv"
+  "files": [
+    "Tdiv",
+    "dist"
   ],
   "author": "",
   "license": "ISC",
-  "description": ""
+  "description": "",
+  "devDependencies": {
+    "rollup": "^4.45.1"
+  }
 }