billie-util/util/business/previewPic.js

a gatjer of utils to improve develop efficiency

const previewPic = function (url) {
    var oBox = document.createElement('div')
    oBox.className = 'full-img-box'

    var oImg = document.createElement('img')
    oImg.src = url
    oImg.className = 'full-img'
    oImg.style.maxWidth = (document.documentElement.clientWidth || 1000) - 200 + 'px'
    oImg.style.maxHeight = (document.documentElement.clientHeight || 700) - 160 + 'px'
    oImg.setAttribute('data-scale', '100')
    oImg.setAttribute('data-rotate', '0')

    var oTools = document.createElement('div')
    oTools.className = 'full-img-tools'
    oTools.innerHTML = `<i class="fa fa-plus" data-type="plus"></i>
						<i class="fa fa-minus" data-type="minus"></i>
						<i class="fa fa-rotate-left" data-type="left"></i>
						<i class="fa fa-rotate-right" data-type="right"></i>
						<i class="fa fa-file-o" data-type="origin"></i>`

    oTools.addEventListener('click', e => {
        var oBtn = e.target
        var type = oBtn.getAttribute('data-type')
        if (!type) {
            return false
        }
        if (type === 'origin') {
            window.open(url)
            return false
        }
        var scale = parseInt(oImg.getAttribute('data-scale')),
            rotate = parseInt(oImg.getAttribute('data-rotate'))
        switch (type) {
            case 'plus':
                (scale < 150) && (scale += 10)
                break
            case 'minus':
                (scale > 80) && (scale -= 10)
                break
            case 'left':
                (rotate > -360) && (rotate -= 90)
                break
            case 'right':
                (rotate < 360) && (rotate += 90)
                break
            default:
                break
        }
        oImg.setAttribute('data-scale', scale)
        oImg.setAttribute('data-rotate', rotate)

        oImg.style.webkitTransform = 'scale(' + scale / 100 + ') rotate(' + rotate + 'deg)'
        oImg.style.transform = 'scale(' + scale / 100 + ') rotate(' + rotate + 'deg)'
    })

    var oBg = document.createElement('div')
    oBg.className = 'full-img-bg'
    oBg.addEventListener('click', () => {
        document.body.removeChild(oBox)
    })

    oBox.appendChild(oBg)
    oBox.appendChild(oImg)
    oBox.appendChild(oTools)
    document.body.appendChild(oBox)
}
module.exports =  previewPic