w-component-vue 2.1.57

package/src/components/WIconSvg.vue

@@ -0,0 +1,118 @@
+<template>
+    <div
+        :style="[useStyleSize,{'display':'flex','align-items':'center','user-select':'none'}]"
+        @keyup.enter="(v)=>{$emit('click',v)}"
+        @click="(v)=>{$emit('click',v)}"
+        v-if="path"
+    >
+        <svg
+            :style="`fill:${useIconColor}; transition:all ${timeTransition}s linear;`"
+            :width="size"
+            :height="size"
+            :viewBox="`0 0 ${sizeOriginal} ${sizeOriginal}`"
+            @mouseenter="mouseEnter=true"
+            @mouseleave="mouseEnter=false"
+        >
+            <path
+                :d="path"
+                :key="kpath"
+                v-for="(path,kpath) in usePaths"
+            ></path>
+        </svg>
+    </div>
+</template>
+
+<script>
+import color2hex from '../js/vuetifyColor.mjs'
+import isarr from 'wsemi/src/isarr.mjs'
+
+
+/**
+ * @vue-prop {String} [color='grey darken-1'] 輸入圖標顏色字串，預設'grey darken-1'
+ * @vue-prop {String} [colorHover='grey darken-3'] 輸入滑鼠移入圖標顏色字串，預設'grey darken-3'
+ * @vue-prop {Number} [sizeOriginal=24] 輸入svg原始尺寸浮點數，單位px，預設24
+ * @vue-prop {Number} [size=24] 輸入圖標欲顯示的尺寸浮點數，單位px，預設24
+ * @vue-prop {String|Array} [path=''] 輸入svg path字串，預設''
+ * @vue-prop {Number} [timeTransition=0.15] 輸入style的transition時間數字，單位s，預設0.15
+ */
+export default {
+    components: {
+    },
+    props: {
+        color: {
+            type: String,
+            default: 'grey darken-1',
+        },
+        colorHover: {
+            type: String,
+            default: 'grey darken-3',
+        },
+        sizeOriginal: {
+            type: Number,
+            default: 24,
+        },
+        size: {
+            type: Number,
+            default: 24,
+        },
+        path: {
+            type: [String, Array],
+            default: '',
+        },
+        timeTransition: {
+            type: Number,
+            default: 0.15,
+        },
+    },
+    data: function() {
+        return {
+            mouseEnter: false,
+            paths: [],
+        }
+    },
+    computed: {
+
+        usePaths: function() {
+            //console.log('computed usePaths')
+
+            let vo = this
+
+            let paths = vo.path
+            if (!isarr(vo.path)) {
+                paths = [vo.path]
+            }
+
+            return paths
+        },
+
+        useIconColor: function() {
+            //console.log('computed useIconColor')
+
+            let vo = this
+
+            return vo.mouseEnter ? color2hex(vo.colorHover) : color2hex(vo.color)
+        },
+
+        useStyleSize: function () {
+            //console.log('computed useStyleSize')
+
+            let vo = this
+
+            let s = {
+                'width': `${vo.size}px`,
+                'height': `${vo.size}px`,
+                'line-height': `${vo.size}px`,
+                'max-height': `${vo.size}px`,
+                'min-height': `${vo.size}px`,
+            }
+            return s
+        },
+
+    },
+    methods: {
+    },
+}
+</script>
+
+<style scoped>
+</style>

package/src/components/WImageCascadingDyn.vue

@@ -0,0 +1,591 @@
+<template>
+    <div
+        :changeImages="changeImages"
+        :changeStyle="changeStyle"
+        v-domresize
+        @domresize="resize"
+    >
+
+        <!-- 初始化無圖片時先撐開寬度 -->
+        <div style="margin-top:-1px; height:1px;"></div>
+
+        <WIconLoading v-if="loading"></WIconLoading>
+
+        <div v-else>
+
+            <div
+                :style="`display:table-cell; vertical-align:top; margin:0; padding-left:${kimgs>0?space:0}px;`"
+                :key="`c-${kimgs}`"
+                v-for="(imgs,kimgs) in imageCols"
+            >
+
+                <div
+                    :class="`${first?'':'fadeIn'}`"
+                    :style="`margin:${kimg>0?space:0}px 0 0 0; width:${uesImageWidth}px; user-select:none; outline:none;`"
+                    tabindex="0"
+                    :key="`kimg-${kimg}`"
+                    v-for="(img,kimg) in imgs"
+                >
+
+                    <div :style="`display:flex;`">
+                        <img
+                            :style="useImageStyle"
+                            :src="img.src"
+                            @keyup.enter="(e)=>{showImg(e,img)}"
+                            @click="(e)=>{showImg(e,img)}"
+                        >
+                    </div>
+
+                    <div style="background:rgba(0,0,0,0.65); padding:5px;">
+                        <div style="font-size:0.8rem; color:#fff;">{{img.name}}</div>
+                    </div>
+
+                    <div style="background:rgba(200,200,200,0.5); padding:0px 5px;">
+                        <div style="margin-top:0px;">
+                            <input
+                                type="text"
+                                class="inp"
+                                _spellcheck="false"
+                                readonly
+                                :value="img.src"
+                            >
+                        </div>
+                    </div>
+
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+</template>
+
+<script>
+import each from 'lodash/each'
+import map from 'lodash/map'
+import get from 'lodash/get'
+import times from 'lodash/times'
+import size from 'lodash/size'
+import importResources from 'wsemi/src/importResources.mjs'
+import domShowImagesDyn from 'wsemi/src/domShowImagesDyn.mjs'
+import ispint from 'wsemi/src/ispint.mjs'
+import cint from 'wsemi/src/cint.mjs'
+import isarr from 'wsemi/src/isarr.mjs'
+import genPm from 'wsemi/src/genPm.mjs'
+import genID from 'wsemi/src/genID.mjs'
+import pmQueue from 'wsemi/src/pmQueue.mjs'
+import domRemove from 'wsemi/src/domRemove.mjs'
+import evem from 'wsemi/src/evem.mjs'
+import debounce from 'wsemi/src/debounce.mjs'
+import domResize from '../js/domResize.mjs'
+import WIconLoading from './WIconLoading.vue'
+
+
+//showViewer, 得要跨組件共用, 因彈出viewer會影響全部組件
+let showViewer = false
+
+
+function getFileName(str) {
+    return str.split('\\').pop().split('/').pop()
+}
+
+
+/**
+ * @vue-prop {Array} [pathItems=['詳見原始碼']] 輸入viewerjs組件js與css檔案位置字串陣列，預設詳見原始碼處props->pathItems->default
+ * @vue-prop {Array} [images=[]] 輸入圖片網址陣列，預設[]
+ * @vue-prop {Number} [imageWidth=300] 輸入圖片寬度數字，單位為px，預設300
+ * @vue-prop {Number} [colNum=null] 輸入組件寬度圖片欄位(水平向有幾張圖片)數量數字，預設null
+ * @vue-prop {Number} [space=15] 輸入圖片間間距長度數字，單位為px，預設15
+ * @vue-prop {Object} [imageStyle={}] 輸入圖片style物件，預設{}
+ * @vue-prop {Object} [arrangeWhenFinish=false] 輸入是否於圖片載入完畢時依照原本圖片順序排序布林值，預設false
+ * @vue-prop {Number} [numParallel=5] 輸入同時載入圖片數量數字，預設5
+ * @vue-prop {Object} [opt={}] 輸入viewerjs設定物件，預設使用optOne或optMuti，若img僅一個則使用optOne，反之使用optMuti
+ * @vue-prop {Boolean} [multiple=false] 輸入
+ */
+export default {
+    directives: {
+        domresize: domResize(),
+    },
+    components: {
+        WIconLoading,
+    },
+    props: {
+        pathItems: {
+            type: Array,
+            default: () => [ //預設值詳見 wsemi/src/domShowImagesDyn.mjs, 因此處有預載, 故所使用viewerjs的版本得相同
+                'https://cdn.jsdelivr.net/npm/viewerjs@1.9.2/dist/viewer.min.css',
+                'https://cdn.jsdelivr.net/npm/viewerjs@1.9.2/dist/viewer.min.js',
+            ],
+        },
+        images: {
+            type: Array,
+            default: () => [],
+        },
+        imageWidth: {
+            type: Number,
+            default: 300,
+        },
+        colNum: {
+            type: Number,
+            default: null,
+        },
+        space: {
+            type: Number,
+            default: 15,
+        },
+        imageStyle: {
+            type: Object,
+            default: () => {},
+        },
+        arrangeWhenFinish: {
+            type: Boolean,
+            default: false,
+        },
+        numParallel: {
+            type: Number,
+            default: 5,
+        },
+        opt: {
+            type: Object,
+            default: () => {},
+        },
+    },
+    data: function() {
+        return {
+            dbc: debounce(),
+
+            loading: true,
+            first: false,
+
+            widthPanel: 0,
+            heightPanel: 0,
+            imageCols: [],
+            imageLocs: [],
+            useImageStyle: {},
+            uesImageWidth: 0,
+
+            imagesRes: [],
+
+        }
+    },
+    mounted: function() {
+        //console.log('mounted')
+
+        let vo = this
+
+        //importResources
+        importResources(vo.pathItems)
+            .then((res) => {
+                //console.log('res', res)
+
+                //loading
+                vo.loading = false
+
+            })
+
+    },
+    computed: {
+
+        changeImages: function() {
+            // console.log('computed changeImages')
+
+            let vo = this
+
+            let images = vo.images
+
+            //refreshDebounce
+            vo.refreshDebounce({ images })
+
+            return ''
+        },
+
+
+        changeStyle: function() {
+            // console.log('computed changeStyle')
+
+            let vo = this
+
+            //for trigger
+            let widthPanel = vo.widthPanel
+            let imageWidth = vo.imageWidth
+            let imageStyle = vo.imageStyle
+            let colNum = vo.colNum
+            let space = vo.space
+
+            //refreshDebounce
+            vo.refreshDebounce({ widthPanel, imageWidth, imageStyle, colNum, space })
+
+            return ''
+        },
+
+    },
+    methods: {
+
+        resize: function(msg) {
+            // console.log('methods resize', msg)
+
+            let vo = this
+
+            //widthPanel
+            let widthPanel = get(vo, '$el.offsetWidth', 0)
+
+            //check, 因開啟viewer會改變視窗尺寸, 進而觸發resize, 會導致觸發changeStyle並重算圖片, 故得使用showViewer判斷是否為開啟viewer狀態, 避免重算圖片
+            if (showViewer) {
+                return
+            }
+
+            //check
+            if (vo.widthPanel === widthPanel) {
+                return
+            }
+
+            //save
+            vo.widthPanel = widthPanel
+
+        },
+
+        getImgSize: function(src, uesImageWidth) {
+            //console.log('methods getImgSize', src, uesImageWidth)
+
+            // let vo = this
+
+            //pm
+            let pm = genPm()
+
+            //id
+            let id = `g${genID()}`
+
+            //img
+            let img = document.createElement('img')
+            img.src = src
+            img.style.maxWidth = `${uesImageWidth}px`
+
+            //div
+            let div = document.createElement('div')
+            div.id = `img-${id}`
+            div.style.position = 'absolute'
+            div.style.width = 0
+            div.style.height = 0
+            div.style.opacity = 0
+            div.style.overflow = 'hidden'
+            div.appendChild(img)
+
+            //body
+            document.body.appendChild(div)
+
+            //onload
+            img.onload = function() {
+                // setTimeout(() => {
+                //     pm.resolve({
+                //         src,
+                //         id,
+                //         w: img.clientWidth,
+                //         h: img.clientHeight,
+                //         err: null,
+                //     })
+                //     domRemove(div)
+                // }, random(10, 2500))
+                pm.resolve({
+                    src,
+                    id,
+                    w: img.clientWidth,
+                    h: img.clientHeight,
+                    err: null,
+                })
+                domRemove(div)
+            }
+
+            //onerror
+            img.onerror = function(err) {
+                pm.reject({
+                    src,
+                    w: 0,
+                    h: 0,
+                    err,
+                })
+                domRemove(div)
+            }
+
+            return pm
+        },
+
+        getImgsSize: function(uesImageWidth, evKey) {
+            //console.log('methods getImgsSize', uesImageWidth, evKey)
+
+            let vo = this
+
+            //ev
+            let ev = evem()
+
+            //pmQueue
+            let pmq = pmQueue(vo.numParallel) //1次取得numParallel個圖片
+
+            //getImgSize
+            vo.imagesRes = []
+            let j = -1
+            each(vo.images, (src, k) => {
+                pmq(vo.getImgSize, src, uesImageWidth)
+                    .then((r) => {
+                        j++
+
+                        //ind
+                        let ind = j
+                        if (vo.arrangeWhenFinish) { //需依照原始順序排序
+                            ind = k
+                        }
+
+                        //o
+                        let o = {
+                            ...r,
+                            name: getFileName(r.src),
+                            ind,
+                            evKey,
+                        }
+
+                        //save imagesRes
+                        vo.imagesRes[ind] = o
+
+                        //emit
+                        ev.emit('get', o)
+
+                    })
+                    .catch((err) => {
+                        console.log(err)
+                    })
+            })
+
+            return ev
+        },
+
+        refreshDebounce: function() {
+            //console.log('methods refreshDebounce')
+
+            let vo = this
+
+            //dbc
+            vo.dbc(() => {
+
+                //refresh
+                vo.refresh()
+
+            })
+
+        },
+
+        refresh: function() {
+            // console.log('methods refresh')
+
+            let vo = this
+
+            //uesImageWidth, colNum
+            let uesImageWidth = null
+            let colNum = null
+            if (ispint(vo.colNum)) {
+                //優先使用colNum計算imageWidth
+
+                //colNum
+                colNum = cint(vo.colNum)
+
+                //uesImageWidth
+                uesImageWidth = (vo.widthPanel - (colNum - 1) * vo.space) / colNum
+                uesImageWidth = Math.floor(uesImageWidth)
+
+            }
+            else if (vo.imageWidth > 0) {
+
+                //uesImageWidth
+                uesImageWidth = vo.imageWidth
+
+                //colNum
+                let wa = vo.widthPanel + vo.space
+                wa = Math.max(wa, 0)
+                let wis = uesImageWidth + vo.space
+                wis = Math.max(wis, 1)
+                colNum = Math.floor(wa / wis)
+
+            }
+            else {
+                console.log('invalid colNum or imageWidth')
+                colNum = 4
+                uesImageWidth = 300
+            }
+            vo.uesImageWidth = uesImageWidth
+
+            //useImageStyle
+            let useImageStyle = {
+                ...vo.imageStyle,
+                'max-width': `${uesImageWidth}px`,
+                'user-select': 'none',
+                'cursor': 'pointer',
+                'outline': 'none',
+            }
+            vo.useImageStyle = useImageStyle
+
+            function getMinHeightCol() {
+                let hmin = vo.imageLocs[0]
+                let ihmin = 0
+                each(vo.imageLocs, (v, i) => {
+                    if (hmin > v) {
+                        hmin = v
+                        ihmin = i
+                    }
+                })
+                return ihmin
+            }
+
+            function resetImageColsAndLocs() {
+                vo.imageCols = map(times(colNum), () => {
+                    return []
+                })
+                vo.imageLocs = map(times(colNum), () => {
+                    return 0
+                })
+            }
+
+            function pushImage(img) {
+
+                //check, 開發階段可能hot reload組件導致出現上一輪事件
+                if (!isarr(vo.imageCols)) {
+                    return
+                }
+
+                //getMinHeightCol
+                let i = getMinHeightCol()
+
+                try {
+
+                    //push
+                    vo.imageCols[i].push(img)
+
+                    //update
+                    vo.imageLocs[i] += img.h + vo.space + (29 + 24) //29是圖名區高度, 24是位址區高度
+
+                }
+                catch (err) { }
+
+            }
+
+            function build() {
+
+                //pm
+                let pm = genPm()
+
+                //resetImageColsAndLocs
+                resetImageColsAndLocs()
+
+                //evKey
+                let evKey = genID()
+
+                //num
+                let num = size(vo.images)
+
+                //getImgsSize
+                let ev = vo.getImgsSize(uesImageWidth, evKey)
+
+                //pushImage
+                let n = 0
+                ev.on('get', (img) => {
+                    // console.log('get', img)
+
+                    //check
+                    if (img.evKey !== evKey) {
+                        return
+                    }
+
+                    //pushImage
+                    pushImage(img)
+
+                    //check
+                    n++
+                    if (n >= num) {
+
+                        //first
+                        vo.first = true
+
+                        //arrange
+                        if (vo.arrangeWhenFinish) {
+                            arrange()
+                        }
+
+                        //resolve
+                        pm.resolve()
+
+                    }
+
+                })
+
+                return pm
+            }
+
+            function arrange() {
+
+                //resetImageColsAndLocs
+                resetImageColsAndLocs()
+
+                //pushImage
+                each(vo.imagesRes, (img) => {
+                    pushImage(img)
+                })
+
+            }
+
+            if (!vo.first) {
+                // console.log('build')
+                build()
+            }
+            else {
+                // console.log('arrange')
+                arrange()
+            }
+
+        },
+
+        showImg: function(e, img) {
+            // console.log('methods showImg', e, img)
+
+            let vo = this
+
+            //showViewer
+            showViewer = true
+
+            //domShowImagesDyn
+            domShowImagesDyn(e.currentTarget, null, vo.opt, vo.pathItems)
+                .finally(() => {
+
+                    //showViewer
+                    showViewer = false
+
+                })
+
+            //emit
+            vo.$emit('click', img)
+
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.inp {
+    opacity: 0.75;
+    font-size: 0.7rem;
+    height: 1rem;
+    line-height: 1rem;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+}
+.inp:focus {
+    outline: none;
+}
+.fadeIn {
+    animation: aniFadeIn 0.3s;
+}
+@keyframes aniFadeIn
+{
+    from {opacity: 0;}
+    to {opacity: 1}
+}
+</style>