dpzvc-ui 1.0.0

package/src/components/upload/upload.vue

@@ -0,0 +1,200 @@
+<template>
+    <div :class="classes" :style="styles">
+        <slot>
+            <div :class="wrapperClasses">图片上传</div>
+        </slot>
+        <input type="file" ref="upload" :accept="accept"  :multiple="multiple" @change="showPhoto"/>
+    </div>
+</template>
+
+<script>
+
+    import EXIF from 'exif-js'
+    import MegaPixImage from '../../lib/MegaPixImage'
+    import { JPEG } from '../../utils/util'
+    const prefixCls = 'dpzvc-upload';
+    export default {
+        props: {
+            multiple: {
+
+                type: Boolean,
+                default: false
+            },
+            accept: {
+                type: String,
+                default: 'image/*'
+            },
+//            capture: {
+//                type: String,
+//                default: ''
+//            },
+            styles: {
+                type: Object,
+                default(){
+                    return {}
+                }
+            }
+        },
+            data(){
+                return {
+                    files: [],
+                    fileLength:0
+                }
+            },
+            computed:{
+                classes(){
+                    return [
+                        `${prefixCls}`
+                        ]
+                },
+                wrapperClasses(){
+                    return [
+                        `${prefixCls}-wrapper`
+                    ]
+                }
+            },
+
+            methods: {
+
+                showPhoto(e){
+                    this.$Indicator.snake({text:'上传中'});
+                    this.files = [];
+                    let file = e.target.files;
+                    this.fileLength = file.length;
+                    let that = this;
+                    let Orientation = null;
+
+                    for (let i = 0; i < file.length; i++) {
+
+                        EXIF.getData(file[i], function () {
+                            EXIF.getAllTags(this);
+                            Orientation = EXIF.getTag(this, 'Orientation');
+
+                        });
+
+                        let reader = new FileReader();
+                        reader.readAsDataURL(file[i]);
+
+                        reader.onload = function (e) {
+                            let img = new Image();
+                            img.src = e.target.result;
+
+                            img.onload = function (e) {
+
+                                that.create(img, Orientation);
+
+
+                            }
+                        };
+                    }
+                    e.target.value = '';
+
+
+                },
+                create(file, Orientation){
+
+                    let _this = this;
+                    let data = null;
+                    let img = new Image();
+                    let mpImg = new MegaPixImage(file);
+
+                    mpImg.render(img, {maxWidth: 600, quality: 0.8});
+                    img.onload = function () {
+
+                        let canvas = document.createElement('canvas');
+                        let ctx = canvas.getContext('2d');
+                        ctx.clearRect(0, 0, canvas.width, canvas.height);
+                        canvas.width = img.width;
+                        canvas.height = img.height;
+                        ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
+                        data = canvas.toDataURL("image/jpeg", 0.8);
+
+                        if (navigator.userAgent.match(/iphone/i)) {
+                            if (Orientation != "" && Orientation != 1) {
+                                switch (Orientation) {
+                                    case 6:
+                                        _this.rotateImg(this, 'left', canvas);
+                                        break;
+                                    case 8:
+                                        _this.rotateImg(this, 'right', canvas);
+                                        break;
+                                    case 3:
+                                        _this.rotateImg(this, 'right', canvas);
+                                        _this.rotateImg(this, 'right', canvas);
+                                        break;
+                                }
+                            }
+                            data = canvas.toDataURL("image/jpeg", 0.8);
+                        }
+                        if (navigator.userAgent.match(/Android/i)) {
+                            let JPEGEncoder = JPEG.JPEGEncoder;
+                            let encoder = new JPEGEncoder();
+                            data = encoder.encode(ctx.getImageData(0, 0, canvas.width, canvas.height), 80);
+                        }
+                        let result = {
+                            base64: data,
+                            clearBase64: data.substr(data.indexOf(',') + 1)
+                        };
+
+                        _this.files.push(result)
+
+                        if (_this.files.length === _this.fileLength) _this.$Indicator.remove()
+
+                    };
+                },
+                rotateImg(img, direction, canvas) {
+                    let min_step = 0;
+                    let max_step = 3;
+                    if (img == null)return;
+                    let height = img.height;
+                    let width = img.width;
+                    let step = 2;
+                    if (step == null) {
+                        step = min_step;
+                    }
+                    if (direction == 'right') {
+                        step++;
+                        step > max_step && (step = min_step);
+                    } else {
+                        step--;
+                        step < min_step && (step = max_step);
+                    }
+                    let degree = step * 90 * Math.PI / 180;
+                    let ctx = canvas.getContext('2d');
+                    switch (step) {
+                        case 0:
+                            canvas.width = width;
+                            canvas.height = height;
+                            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+                            break;
+                        case 1:
+                            canvas.width = height;
+                            canvas.height = width;
+                            ctx.rotate(degree);
+                            ctx.drawImage(img, 0, -height, canvas.height, canvas.width);
+                            break;
+                        case 2:
+                            canvas.width = width;
+                            canvas.height = height;
+                            ctx.rotate(degree);
+                            ctx.drawImage(img, -width, -height, canvas.width, canvas.height);
+                            break;
+                        case 3:
+                            canvas.width = height;
+                            canvas.height = width;
+                            ctx.rotate(degree);
+                            ctx.drawImage(img, -width, 0, canvas.height, canvas.width);
+                            break;
+                    }
+                }
+            },
+            watch: {
+
+                files(val){
+                    this.$emit('on-change-file', val)
+                }
+            }
+        }
+
+</script>
+

package/src/config/config.js

@@ -0,0 +1,17 @@
+/**
+ * Created by lcfevr on 16/7/18.
+ */
+
+
+let config = {
+    env: process.env.NODE_ENV,
+    PROJECT:'dpzvc',
+    VERSION:'1.0',
+    doc_title:'',
+    baseUrl:'',
+    isIPad: /ipad/i.test(window.navigator.userAgent),
+    isIphone: /iphone|ipad|ipod/i.test(window.navigator.userAgent),
+    isWechat: /MicroMessenger/i.test(window.navigator.userAgent),
+    isUCBrowser: /UCWEB|UCBrowser/i.test(window.navigator.userAgent)
+};
+export default config;

package/src/directives/clickoutside.js

@@ -0,0 +1,32 @@
+/**
+ * Created by admin on 2017/7/4.
+ */
+//from mint-ui
+const clickoutsideContext = '@@clickoutsideContext';
+
+export default {
+    bind(el, binding, vnode) {
+        const documentHandler = function(e) {
+            if (vnode.context && !el.contains(e.target)) {
+                vnode.context[el[clickoutsideContext].methodName]();
+            }
+        };
+        el[clickoutsideContext] = {
+            documentHandler,
+            methodName: binding.expression,
+            arg: binding.arg || 'click'
+        };
+        document.addEventListener(el[clickoutsideContext].arg, documentHandler);
+    },
+
+    update(el, binding) {
+        el[clickoutsideContext].methodName = binding.expression;
+    },
+
+    unbind(el) {
+        document.removeEventListener(
+            el[clickoutsideContext].arg,
+            el[clickoutsideContext].documentHandler);
+    },
+
+};

package/src/directives/tranferDom.js

@@ -0,0 +1,65 @@
+/**
+ * Created by admin on 2017/5/5.
+ */
+function getTarget (node) {
+    if (node === void 0) {
+        node = document.body
+    }
+    if (node === true) { return document.body }
+    return node instanceof window.Node ? node : document.querySelector(node)
+}
+
+const directive = {
+    inserted (el, { value }, vnode) {
+        el.className = el.className ? el.className + ' v-transfer-dom' : 'v-transfer-dom';
+        const parentNode = el.parentNode;
+        const home = document.createComment('');
+        let hasMovedOut = false;
+
+        if (value !== false) {
+            parentNode.replaceChild(home, el); // moving out, el is no longer in the document
+            getTarget(value).appendChild(el); // moving into new place
+            hasMovedOut = true
+        }
+        if (!el.__transferDomData) {
+            el.__transferDomData = {
+                parentNode: parentNode,
+                home: home,
+                target: getTarget(value),
+                hasMovedOut: hasMovedOut
+            }
+        }
+    },
+    componentUpdated (el, { value }) {
+        // need to make sure children are done updating (vs. `update`)
+        const ref$1 = el.__transferDomData;
+        // homes.get(el)
+        const parentNode = ref$1.parentNode;
+        const home = ref$1.home;
+        const hasMovedOut = ref$1.hasMovedOut; // recall where home is
+
+        if (!hasMovedOut && value) {
+            // remove from document and leave placeholder
+            parentNode.replaceChild(home, el);
+            // append to target
+            getTarget(value).appendChild(el);
+            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: true, target: getTarget(value) });
+        } else if (hasMovedOut && value === false) {
+            // previously moved, coming back home
+            parentNode.replaceChild(el, home);
+            el.__transferDomData = Object.assign({}, el.__transferDomData, { hasMovedOut: false, target: getTarget(value) });
+        } else if (value) {
+            // already moved, going somewhere else
+            getTarget(value).appendChild(el);
+        }
+    },
+    unbind: function unbind (el, binding) {
+        el.className = el.className.replace('v-transfer-dom', '')
+        if (el.__transferDomData.hasMovedOut === true) {
+            el.__transferDomData.parentNode && el.__transferDomData.parentNode.appendChild(el)
+        }
+        el.__transferDomData = null
+    }
+};
+
+export default directive;

package/src/index.js

@@ -0,0 +1,83 @@
+/**
+ * Created by admin on 2017/5/15.
+ */
+
+import VButton from '@/button'
+import CheckBox from './components/checkBox'
+import Header from './components/Header'
+import Message from './components/message'
+import Modal from './components/modal'
+import Picker from './components/picker'
+import Radio from './components/radioBox'
+import Swipe from './components/swipe'
+import Tab from './components/tab'
+import Prompt from './components/prompt'
+import SlideBar from './components/slideBar'
+import TextBar from './components/Text'
+import Upload from './components/upload'
+import ActionSheet from '@/action-sheet'
+import SwitchBar from './components/switchbar'
+import Rater from './components/rater'
+import Spinner from './components/spinner'
+import LoadMore from './components/loadMore'
+import Popup from './components/popup'
+import Indicator from './components/Indicator'
+import Progress from './components/progress'
+import ToTop from './components/toTop'
+import Cell from './components/cell'
+import CellSwipe from './components/cell-swipe'
+import Badge from './components/badge'
+import Card from './components/card'
+
+const dpzvc = {
+
+    VButton,
+    CheckBox,
+    CheckBoxGroup:CheckBox.group,
+    Radio,
+    RadioGroup:Radio.group,
+    Header,
+    Message,
+    Modal,
+    Prompt,
+    Picker,
+    Swipe,
+    Tab,
+    SlideBar,
+    TextBar,
+    Number:TextBar.Number,
+    Upload,
+    ActionSheet,
+    SwitchBar,
+    Rater,
+    Spinner,
+    LoadMore,
+    Popup,
+    Indicator,
+    Progress,
+    ToTop,
+    Cell,
+    CellSwipe,
+    Badge,
+    Card
+};
+
+const install = (Vue,options)=>{
+
+    Object.keys(dpzvc).forEach((key)=>{
+        Vue.component(key,dpzvc[key])
+    });
+
+
+    Vue.prototype.$Message = Message;
+    Vue.prototype.$Modal = Modal;
+    Vue.prototype.$Prompt = Prompt;
+    Vue.prototype.$Indicator = Indicator
+
+}
+
+if (typeof window !== 'undefined' && window.Vue) {
+    install(window.Vue);
+}
+
+module.exports = Object.assign(dpzvc, {install});

package/src/lib/MegaPixImage.js

@@ -0,0 +1,253 @@
+(function() {
+
+    /**
+     * Detect subsampling in loaded image.
+     * In iOS, larger images than 2M pixels may be subsampled in rendering.
+     */
+    function detectSubsampling(img) {
+        var iw = img.naturalWidth, ih = img.naturalHeight;
+        if (iw * ih > 1024 * 1024) { // subsampling may happen over megapixel image
+            var canvas = document.createElement('canvas');
+            canvas.width = canvas.height = 1;
+            var ctx = canvas.getContext('2d');
+            ctx.drawImage(img, -iw + 1, 0);
+            // subsampled image becomes half smaller in rendering size.
+            // check alpha channel value to confirm image is covering edge pixel or not.
+            // if alpha value is 0 image is not covering, hence subsampled.
+            return ctx.getImageData(0, 0, 1, 1).data[3] === 0;
+        } else {
+            return false;
+        }
+    }
+
+    /**
+     * Detecting vertical squash in loaded image.
+     * Fixes a bug which squash image vertically while drawing into canvas for some images.
+     */
+    function detectVerticalSquash(img, iw, ih) {
+        var canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = ih;
+        var ctx = canvas.getContext('2d');
+        ctx.drawImage(img, 0, 0);
+        var data = ctx.getImageData(0, 0, 1, ih).data;
+        // search image edge pixel position in case it is squashed vertically.
+        var sy = 0;
+        var ey = ih;
+        var py = ih;
+        while (py > sy) {
+            var alpha = data[(py - 1) * 4 + 3];
+            if (alpha === 0) {
+                ey = py;
+            } else {
+                sy = py;
+            }
+            py = (ey + sy) >> 1;
+        }
+        var ratio = (py / ih);
+        return (ratio===0)?1:ratio;
+    }
+
+    /**
+     * Rendering image element (with resizing) and get its data URL
+     */
+    function renderImageToDataURL(img, options, doSquash) {
+        var canvas = document.createElement('canvas');
+        renderImageToCanvas(img, canvas, options, doSquash);
+        return canvas.toDataURL("image/jpeg", options.quality || 0.8);
+    }
+
+    /**
+     * Rendering image element (with resizing) into the canvas element
+     */
+    function renderImageToCanvas(img, canvas, options, doSquash) {
+        var iw = img.naturalWidth, ih = img.naturalHeight;
+        if (!(iw+ih)) return;
+        var width = options.width, height = options.height;
+        var ctx = canvas.getContext('2d');
+        ctx.save();
+        transformCoordinate(canvas, ctx, width, height, options.orientation);
+        var subsampled = detectSubsampling(img);
+        if (subsampled) {
+            iw /= 2;
+            ih /= 2;
+        }
+        var d = 1024; // size of tiling canvas
+        var tmpCanvas = document.createElement('canvas');
+        tmpCanvas.width = tmpCanvas.height = d;
+        var tmpCtx = tmpCanvas.getContext('2d');
+        var vertSquashRatio = doSquash ? detectVerticalSquash(img, iw, ih) : 1;
+        var dw = Math.ceil(d * width / iw);
+        var dh = Math.ceil(d * height / ih / vertSquashRatio);
+        var sy = 0;
+        var dy = 0;
+        while (sy < ih) {
+            var sx = 0;
+            var dx = 0;
+            while (sx < iw) {
+                tmpCtx.clearRect(0, 0, d, d);
+                tmpCtx.drawImage(img, -sx, -sy);
+                ctx.drawImage(tmpCanvas, 0, 0, d, d, dx, dy, dw, dh);
+                sx += d;
+                dx += dw;
+            }
+            sy += d;
+            dy += dh;
+        }
+        ctx.restore();
+        tmpCanvas = tmpCtx = null;
+    }
+
+    /**
+     * Transform canvas coordination according to specified frame size and orientation
+     * Orientation value is from EXIF tag
+     */
+    function transformCoordinate(canvas, ctx, width, height, orientation) {
+        switch (orientation) {
+            case 5:
+            case 6:
+            case 7:
+            case 8:
+                canvas.width = height;
+                canvas.height = width;
+                break;
+            default:
+                canvas.width = width;
+                canvas.height = height;
+        }
+        switch (orientation) {
+            case 2:
+                // horizontal flip
+                ctx.translate(width, 0);
+                ctx.scale(-1, 1);
+                break;
+            case 3:
+                // 180 rotate left
+                ctx.translate(width, height);
+                ctx.rotate(Math.PI);
+                break;
+            case 4:
+                // vertical flip
+                ctx.translate(0, height);
+                ctx.scale(1, -1);
+                break;
+            case 5:
+                // vertical flip + 90 rotate right
+                ctx.rotate(0.5 * Math.PI);
+                ctx.scale(1, -1);
+                break;
+            case 6:
+                // 90 rotate right
+                ctx.rotate(0.5 * Math.PI);
+                ctx.translate(0, -height);
+                break;
+            case 7:
+                // horizontal flip + 90 rotate right
+                ctx.rotate(0.5 * Math.PI);
+                ctx.translate(width, -height);
+                ctx.scale(-1, 1);
+                break;
+            case 8:
+                // 90 rotate left
+                ctx.rotate(-0.5 * Math.PI);
+                ctx.translate(-width, 0);
+                break;
+            default:
+                break;
+        }
+    }
+
+    var URL = window.URL && window.URL.createObjectURL ? window.URL :
+        window.webkitURL && window.webkitURL.createObjectURL ? window.webkitURL :
+            null;
+
+    /**
+     * MegaPixImage class
+     */
+    function MegaPixImage(srcImage) {
+        if (window.Blob && srcImage instanceof Blob) {
+            if (!URL) { throw Error("No createObjectURL function found to create blob url"); }
+            var img = new Image();
+            img.src = URL.createObjectURL(srcImage);
+            this.blob = srcImage;
+            srcImage = img;
+        }
+        if (!srcImage.naturalWidth && !srcImage.naturalHeight) {
+            var _this = this;
+            srcImage.onload = srcImage.onerror = function() {
+                var listeners = _this.imageLoadListeners;
+                if (listeners) {
+                    _this.imageLoadListeners = null;
+                    for (var i=0, len=listeners.length; i<len; i++) {
+                        listeners[i]();
+                    }
+                }
+            };
+            this.imageLoadListeners = [];
+        }
+        this.srcImage = srcImage;
+    }
+
+    /**
+     * Rendering megapix image into specified target element
+     */
+    MegaPixImage.prototype.render = function(target, options, callback) {
+        if (this.imageLoadListeners) {
+            var _this = this;
+            this.imageLoadListeners.push(function() { _this.render(target, options, callback); });
+            return;
+        }
+        options = options || {};
+        var imgWidth = this.srcImage.naturalWidth, imgHeight = this.srcImage.naturalHeight,
+            width = options.width, height = options.height,
+            maxWidth = options.maxWidth, maxHeight = options.maxHeight,
+            doSquash = !this.blob || this.blob.type === 'image/jpeg';
+        if (width && !height) {
+            height = (imgHeight * width / imgWidth) << 0;
+        } else if (height && !width) {
+            width = (imgWidth * height / imgHeight) << 0;
+        } else {
+            width = imgWidth;
+            height = imgHeight;
+        }
+        if (maxWidth && width > maxWidth) {
+            width = maxWidth;
+            height = (imgHeight * width / imgWidth) << 0;
+        }
+        if (maxHeight && height > maxHeight) {
+            height = maxHeight;
+            width = (imgWidth * height / imgHeight) << 0;
+        }
+        var opt = { width : width, height : height };
+        for (var k in options) opt[k] = options[k];
+
+        var tagName = target.tagName.toLowerCase();
+        if (tagName === 'img') {
+            target.src = renderImageToDataURL(this.srcImage, opt, doSquash);
+        } else if (tagName === 'canvas') {
+            renderImageToCanvas(this.srcImage, target, opt, doSquash);
+        }
+        if (typeof this.onrender === 'function') {
+            this.onrender(target);
+        }
+        if (callback) {
+            callback();
+        }
+        if (this.blob) {
+            this.blob = null;
+            URL.revokeObjectURL(this.srcImage.src);
+        }
+    };
+
+    /**
+     * Export class to global
+     */
+    if (typeof define === 'function' && define.amd) {
+        define([], function() { return MegaPixImage; }); // for AMD loader
+    } else if (typeof exports === 'object') {
+        module.exports = MegaPixImage; // for CommonJS
+    } else {
+        this.MegaPixImage = MegaPixImage;
+    }
+
+})();