@taole/dev-helper 0.0.20 → 0.0.22

package/Tdiv/index.js

@@ -1,6 +1,21 @@
 import setting from "./setting.js";
 import { updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect, subscribe } from "./setting.js";
 
+const isSupportWebp = (() => {
+    try {
+        const elem = document.createElement('canvas');
+        if (!!(elem.getContext && elem.getContext('2d'))) {
+            // Was able to get context, now test webp
+            return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+        }
+        return false;
+    } catch (e) {
+        return false;
+    }
+})();
+
+// console.log('isSupportWebp', isSupportWebp);
+
 const styleText = `
 .tw-img-div {
     display: block;
@@ -42,7 +57,8 @@ class Tdiv extends HTMLElement {
         return [
             '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
             'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
-            'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+            'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
+            'dot9', 'dot9Border'
         ];
     }
 
@@ -98,7 +114,6 @@ class Tdiv extends HTMLElement {
     _update() {
         if (this._iscalcstyle) return;
         this._iscalcstyle = true;
-        // console.log('update');
         // 读取所有属性
         const _class = this._getAttr('_class') || '';
         const usePx = this._getAttr('usePx', 'boolean');
@@ -117,6 +132,7 @@ class Tdiv extends HTMLElement {
         const column = this._getAttr('column', 'boolean');
         const center = this._getAttr('center', 'boolean');
         const text = this._getAttr('text');
+        const bold = this._getAttr('bold', 'boolean');
         const color = this._getAttr('color');
         const radius = this._getAttr('radius');
         const border = this._getAttr('border');
@@ -125,6 +141,10 @@ class Tdiv extends HTMLElement {
         const debug = this._getAttr('debug', 'boolean');
         const viewportWidth = this._getAttr('viewportWidth', 'number');
         const viewportUnit = this._getAttr('viewportUnit');
+        const textEllipsis = this._getAttr('textEllipsis');
+        let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
+        let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
+
         // class
         let extraClass = ['tw-img-div'];
         if (_class) extraClass.push(_class);
@@ -132,6 +152,15 @@ class Tdiv extends HTMLElement {
         // 分组样式
         const calcOpt = { usePx, viewportWidth, viewportUnit };
         let layoutStyle = '';
+
+        let useDot9 = false;
+        if (dot9.length === 4 && dot9Border.length === 4) {
+            useDot9 = true;
+            dot9Border.forEach((item, index) => {
+                dot9Border[index] = calc(item, calcOpt);
+            });
+        }
+
         // 宽度
         if (hasValue(width)) {
             const widthStyle = `width: ${calc(width, calcOpt)};`;
@@ -178,18 +207,44 @@ class Tdiv extends HTMLElement {
         }
 
         if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+        if (bold) layoutStyle += `font-weight: bold;`;
+        if(textEllipsis !== null){
+            const isSingleLine = !/^\d+$/.test(textEllipsis);
+            layoutStyle += `overflow: hidden;`;
+            layoutStyle += `text-overflow: ellipsis;`;
+            if(isSingleLine){
+                layoutStyle += `white-space: nowrap;`;
+            } else {
+                layoutStyle += `white-space: pre-wrap;`;
+                layoutStyle += `overflow-wrap: break-word;`;
+                layoutStyle += `word-break: break-all;`;
+                layoutStyle += `display: -webkit-box;`;
+                layoutStyle += `-webkit-line-clamp: ${textEllipsis};`;
+                layoutStyle += `-webkit-box-orient: vertical;`;
+                layoutStyle += `line-clamp: ${textEllipsis};`;
+                layoutStyle += `box-orient: vertical;`;
+            }
+        }
         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`;
+                realSrc = `https://dynamics-share.tuwan.com/${src}`;
+                if (isSupportWebp) {
+                    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 (useDot9) {
+                layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
+                layoutStyle += `border-width: ${dot9Border.join(" ")};`;
+                layoutStyle += `border-style: solid;`;
+                layoutStyle += `box-sizing: border-box;`;
+            } else {
+                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};`;
@@ -209,13 +264,14 @@ class Tdiv extends HTMLElement {
         const onClickAttr = this._getAttr('onClick');
         if (onClickAttr && typeof window[onClickAttr] === 'function') {
             window[onClickAttr](e);
-        } else if(onClickAttr && typeof onClickAttr === 'function') {
+        } else if (onClickAttr && typeof onClickAttr === 'function') {
             onClickAttr(e);
         }
     }
 }
 
 
+
 let isRegister = false;
 function registerTdiv() {
     if (!isRegister) {
@@ -231,5 +287,5 @@ function registerTdiv() {
 registerTdiv();
 
 export default {
-    updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
+    isSupportWebp, updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
 }

package/dist/tdiv.umd.js

@@ -85,6 +85,21 @@
         notify();
     }
 
+    const isSupportWebp = (() => {
+        try {
+            const elem = document.createElement('canvas');
+            if (!!(elem.getContext && elem.getContext('2d'))) {
+                // Was able to get context, now test webp
+                return elem.toDataURL('image/webp').indexOf('data:image/webp') === 0;
+            }
+            return false;
+        } catch (e) {
+            return false;
+        }
+    })();
+
+    // console.log('isSupportWebp', isSupportWebp);
+
     const styleText = `
 .tw-img-div {
     display: block;
@@ -126,7 +141,8 @@
             return [
                 '_class', 'usePx', '_style', 'src', 'width', 'height', 'absolute',
                 'top', 'left', 'right', 'bottom', 'zIndex', 'pointer', 'flex', 'column', 'center',
-                'text', 'color','radius','border','borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit'
+                'text', 'color', 'radius', 'border', 'borderColor', 'srcMode', 'onClick', 'debug', 'viewportWidth', 'viewportUnit',
+                'dot9', 'dot9Border'
             ];
         }
 
@@ -182,7 +198,6 @@
         _update() {
             if (this._iscalcstyle) return;
             this._iscalcstyle = true;
-            // console.log('update');
             // 读取所有属性
             const _class = this._getAttr('_class') || '';
             const usePx = this._getAttr('usePx', 'boolean');
@@ -201,6 +216,7 @@
             const column = this._getAttr('column', 'boolean');
             const center = this._getAttr('center', 'boolean');
             const text = this._getAttr('text');
+            const bold = this._getAttr('bold', 'boolean');
             const color = this._getAttr('color');
             const radius = this._getAttr('radius');
             const border = this._getAttr('border');
@@ -209,6 +225,10 @@
             const debug = this._getAttr('debug', 'boolean');
             const viewportWidth = this._getAttr('viewportWidth', 'number');
             const viewportUnit = this._getAttr('viewportUnit');
+            const textEllipsis = this._getAttr('textEllipsis');
+            let dot9 = (this._getAttr('dot9', 'string') || '').split(" ");
+            let dot9Border = (this._getAttr('dot9Border', 'string') || this._getAttr('dot9', 'string') || '').split(" ");
+
             // class
             let extraClass = ['tw-img-div'];
             if (_class) extraClass.push(_class);
@@ -216,6 +236,15 @@
             // 分组样式
             const calcOpt = { usePx, viewportWidth, viewportUnit };
             let layoutStyle = '';
+
+            let useDot9 = false;
+            if (dot9.length === 4 && dot9Border.length === 4) {
+                useDot9 = true;
+                dot9Border.forEach((item, index) => {
+                    dot9Border[index] = calc(item, calcOpt);
+                });
+            }
+
             // 宽度
             if (hasValue(width)) {
                 const widthStyle = `width: ${calc(width, calcOpt)};`;
@@ -262,18 +291,44 @@
             }
 
             if (text) layoutStyle += `font-size: ${calc(text, calcOpt)};`;
+            if (bold) layoutStyle += `font-weight: bold;`;
+            if(textEllipsis !== null){
+                const isSingleLine = !/^\d+$/.test(textEllipsis);
+                layoutStyle += `overflow: hidden;`;
+                layoutStyle += `text-overflow: ellipsis;`;
+                if(isSingleLine){
+                    layoutStyle += `white-space: nowrap;`;
+                } else {
+                    layoutStyle += `white-space: pre-wrap;`;
+                    layoutStyle += `overflow-wrap: break-word;`;
+                    layoutStyle += `word-break: break-all;`;
+                    layoutStyle += `display: -webkit-box;`;
+                    layoutStyle += `-webkit-line-clamp: ${textEllipsis};`;
+                    layoutStyle += `-webkit-box-orient: vertical;`;
+                    layoutStyle += `line-clamp: ${textEllipsis};`;
+                    layoutStyle += `box-orient: vertical;`;
+                }
+            }
             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`;
+                    realSrc = `https://dynamics-share.tuwan.com/${src}`;
+                    if (isSupportWebp) {
+                        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 (useDot9) {
+                    layoutStyle += `border-image: url(${realSrc}) ${dot9.join(" ")} fill;`;
+                    layoutStyle += `border-width: ${dot9Border.join(" ")};`;
+                    layoutStyle += `border-style: solid;`;
+                    layoutStyle += `box-sizing: border-box;`;
+                } else {
+                    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};`;
@@ -293,13 +348,14 @@
             const onClickAttr = this._getAttr('onClick');
             if (onClickAttr && typeof window[onClickAttr] === 'function') {
                 window[onClickAttr](e);
-            } else if(onClickAttr && typeof onClickAttr === 'function') {
+            } else if (onClickAttr && typeof onClickAttr === 'function') {
                 onClickAttr(e);
             }
         }
     }
 
 
+
     let isRegister = false;
     function registerTdiv() {
         if (!isRegister) {
@@ -315,7 +371,7 @@
     registerTdiv();
 
     var index = {
-        updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
+        isSupportWebp, updateConfig, setViewportWidth, setViewportUnit, setUsePx, setUseButtonEffect
     };
 
     return index;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@taole/dev-helper",
-  "version": "0.0.20",
+  "version": "0.0.22",
   "type": "module",
   "scripts": {
     "build": "npx -y rimraf dist && rollup -c",