plugin-bi-screen-adaptive/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js

!(function () {
    var scale = 1, transformY = 0, selected = false;
    var wrapper = document.getElementById("wrapper");
    var html = document.getElementsByTagName('html')[0];

    var jQuery = $ || window.jQuery;
    var injectOffset = jQuery.fn.offset;
    var injectEventFix = jQuery.event.fix;
    var injectMouseInBounds = jQuery.fn.__isMouseInBounds__;
    var injectToolTipShow = null;
    var injectBubblesShow = null;
    var adjustHeight = BI.Combo.prototype.adjustHeight;
    var injectOuterWidth = jQuery.fn.outerWidth;
    var injectOuterHeight = jQuery.fn.outerHeight;
    var injectBounds = jQuery.fn.bounds;

    // 修正事件偏移
    function correctEvent(e) {
        if (e && !e.corrected) {
            e.pageX = e.pageX / scale;
            e.pageY = (e.pageY - transformY) / scale;
            e.clientX = e.clientX / scale;
            e.clientY = (e.clientY - transformY) / scale;
            e.corrected = true;
        }
        return e;
    }

    function checkInPopupView(el) {
        var t = el.parentElement;
        var flag = false;
        do {
            if (t.className && t.className.indexOf("bi-popup-view") !== -1) {
                flag = true;
                break;
            }
            t = t.parentElement
        } while (t);

        return flag;
    }

    // 进行缩放
    function transformScale() {
        var bounds = getScaleBounds();
        scale = bounds.scale;
        document.body.style.width = bounds.width + "px";
        document.body.style.height = bounds.height + "px";
        document.body.style.transform = "scale(" + bounds.scale+ ")";
        document.body.style.transformOrigin = "top left";
        document.body.style["-ms-transform"] = "scale(" + bounds.scale+ ")";
        document.body.style["-ms-transform-origin"] = "top left";
        html.style.overflowY = "auto";
        html.style.backgroundColor = document.getElementsByClassName('bi-theme-dark').length === 0 ? "#2c3d59" : "#ffffff";

        if (bounds.height * bounds.scale < html.clientHeight) {
            transformY = (html.clientHeight - bounds.height * bounds.scale) / 2;
            html.style.overflowY = "hidden";
        } else {
            transformY = 0;
        }

        // document.body.style.height = (bounds.height * scale) + "px";
        // document.body.style.overflow = "hidden";
        document.body.style.top = transformY + "px";
        window.scale = window.devicePixelRatio * scale;
        // scaleFixed();
    }

    // 取消缩放
    function removeScale() {
        document.body.style.width = "100%";
        document.body.style.height = "100%";
        document.body.style.transform = "";
        document.body.style.transformOrigin = "";
        document.body.style["-ms-transform"] = "";
        document.body.style["-ms-transform-origin"] = "";
        document.body.style.overflowY = "hidden";
        document.body.style.top = "";
        html.style.backgroundColor = "#ffffff";

        scale = 1;
        // document.body.style.top = "0px";
        // document.body.style.width = "";
        // document.body.style.height = "";
        // document.body.style.overflowY = "";
        window.scale = window.devicePixelRatio / scale;

        // revertFixed();
    }

    // 获取缩放倍数，原模板宽高
    function getScaleBounds() {
        var widgts = BI.designConfigure.widgets,
            layoutRatio = BI.designConfigure.layoutRatio,
            freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
            freeWidgets = BI.designConfigure.freeWidgetIds;
        var left = null, right = null, top = null, bottom = null,
            freeLeft = null, freeRight = null, freeTop = null, freeBottom = null;
        BI.each(widgts, function (wId, widget) {
            var bounds = widget.bounds || {};
            if (BI.contains(freeWidgets, wId)) {
                freeLeft = BI.isNull(freeLeft) ? bounds.left : Math.min(freeLeft, bounds.left);
                freeRight = Math.max(freeRight, bounds.left + bounds.width);
                freeTop = BI.isNull(freeTop) ? bounds.top : Math.min(freeTop, bounds.top);
                freeBottom = Math.max(freeBottom, bounds.top + bounds.height);
            } else {
                left = BI.isNull(left) ? bounds.left : Math.min(left, bounds.left);
                right = Math.max(right, bounds.left + bounds.width);
                top = BI.isNull(top) ? bounds.top : Math.min(top, bounds.top);
                bottom = Math.max(bottom, bounds.top + bounds.height);
            }
        });

        var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60;
        var templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30;
        var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1));
        return {
            scale: scaleRatio,
            width: html.clientWidth / scaleRatio,
            height: scaleRatio === 1 ?  html.clientHeight : templateHeight
        };
    }

    // 准备环境，主要是纠正事件偏移
    function prepareEnv() {
        // IE的fixed元素不受transform：scale影响
        injectToolTipShow = injectToolTipShow || BI.Tooltips.show;
        injectBubblesShow = injectBubblesShow || BI.Bubbles.show;
        jQuery.fn.__isMouseInBounds__ = function (e) {
            var offset2Body = this.get(0).getBoundingClientRect ? this.get(0).getBoundingClientRect() : this.offset();
            var width = offset2Body.width || this.outerWidth();
            var height = offset2Body.height || this.outerHeight();
            var pageX = e.clientX * scale,
                pageY = e.clientY * scale + transformY;
            return !(pageX < Math.floor(offset2Body.left) || pageX > offset2Body.left + width
                || pageY < Math.floor(offset2Body.top) || pageY > offset2Body.top + height);
        };
        jQuery.fn.offset = function( options ) {
            function getWindow( elem ) {
                return jQuery.isWindow( elem ) ?
                    elem :
                    elem.nodeType === 9 ?
                        elem.defaultView || elem.parentWindow :
                        false;
            }

            if ( arguments.length ) {
                return options === undefined ?
                    this :
                    this.each(function( i ) {
                        jQuery.offset.setOffset( this, options, i );
                    });
            }


            var docElem, win,
                box = { top: 0, left: 0 },
                elem = this[ 0 ],
                doc = elem && elem.ownerDocument;

            if ( !doc ) {
                return;
            }

            docElem = doc.documentElement;

            // Make sure it's not a disconnected DOM node
            if ( !jQuery.contains( docElem, elem ) ) {
                return box;
            }

            var el = elem,
                offsetLeft = 0,
                offsetTop  = 0;

            do{
                offsetLeft += el.offsetLeft;
                offsetTop  += el.offsetTop;
                el = el.offsetParent;
            } while( el );

            var elm = elem;
            // 不知道该怎么写代码了,就这样了
            if (!checkInPopupView(elm)) {
                do{
                    offsetLeft -= elm.scrollLeft || 0;
                    offsetTop  -= elm.scrollTop || 0;
                    elm = elm.parentNode;
                } while( elm );
            }
            win = getWindow( doc );
            return {
                top: offsetTop  + ( win.pageYOffset || docElem.scrollTop )  - ( docElem.clientTop  || 0 ),
                left: offsetLeft + ( win.pageXOffset || docElem.scrollLeft ) - ( docElem.clientLeft || 0 )
            };
        };

        jQuery.event.fix = function ( e ) {
            return correctEvent(injectEventFix.call(this, e));
        };
        if (BI.isIE()) {


            BI.Combo.prototype.adjustHeight = function (e) {
                adjustHeight.call(this, e);
                if (this.popupView) {
                    if (!checkInPopupView(this.popupView.element[0])) {
                        this.popupView.element[0].style.left = parseInt(this.popupView.element[0].style.left) * scale + "px";
                        this.popupView.element[0].style.top = parseInt(this.popupView.element[0].style.top) * scale + transformY + "px";
                    } else {

                    }
                    this.popupView.element[0].style.transform = "scale(" + scale+ ")";
                    this.popupView.element[0].style.transformOrigin = "top left";
                }
            };
            BI.Tooltips.show = function (e, name, text, level, context, opt) {
                injectToolTipShow.call(this, e, name, text, level, context, opt);
                var tooltip = this.get(name);
                tooltip.element[0].style.left = parseInt(tooltip.element[0].style.left) * scale + "px";
                tooltip.element[0].style.top = parseInt(tooltip.element[0].style.top) * scale + transformY + "px";
                tooltip.element[0].style.transform = "scale(" + scale+ ")";
                tooltip.element[0].style.transformOrigin = "top left";
            }
            BI.Bubbles.show = function (name, text, context, opt) {
                injectBubblesShow.call(this, name, text, context, opt);
                var tooltip = this.get(name);
                tooltip.element[0].style.left = parseInt(tooltip.element[0].style.left) * scale + "px";
                tooltip.element[0].style.top = parseInt(tooltip.element[0].style.top) * scale + transformY + "px";
                tooltip.element[0].style.transform = "scale(" + scale+ ")";
                tooltip.element[0].style.transformOrigin = "top left";
            }
            // jQuery.fn.outerWidth = function () {
            //     var wdith = injectOuterWidth.apply(this, arguments);
            //     if (this[0] === document.body) {
            //         return wdith / scale;
            //     }
            //     return wdith;
            // }
            // jQuery.fn.outerHeight = function () {
            //     var height = injectOuterHeight.apply(this, arguments);
            //     if (this[0] === document.body) {
            //         return height / scale;
            //     }
            //     return height;
            // }
            // BI.DOM.getBottomPosition = function (combo, popup, extraHeight) {
            //     var el = combo.element;
            //     return {
            //         top: el.offset().top + el.outerHeight() * (1 - checkInPopupView(el[0]) ? scale : 0) + (extraHeight || 0)
            //     };
            // }
            // BI.DOM.getRightPosition = function (combo, popup, extraWidth) {
            //     var el = combo.element;
            //     return {
            //         left: el.offset().left + el.outerWidth() * (1-checkInPopupView(el[0]) ? scale : 0) + (extraWidth || 0)
            //     };
            // }
        }

        // document.body.onmousedown = scaleFixed;
        window.addEventListener('resize', updateScale);
        window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)').
        addListener(selectHandler);
    }

    function restoreEnv() {
        jQuery.fn.__isMouseInBounds__ = injectMouseInBounds;
        jQuery.fn.offset = injectOffset;
        jQuery.event.fix = injectEventFix;
        // jQuery.fn.bounds = injectBounds;
        if (BI.isIE()) {
            BI.Combo.prototype.adjustHeight = adjustHeight;
            BI.Tooltips.show = injectToolTipShow;
            BI.Bubbles.show = injectBubblesShow;
            // jQuery.fn.outerWidth = injectOuterWidth;
            // jQuery.fn.outerHeight = injectOuterHeight;
        }

        document.body.onmousedown = null;
        window.removeEventListener('resize', updateScale);
        window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)').
        removeListener(selectHandler);
    }

    var selectHandler = BI.debounce(function () {
        selected && prepareEnv();
        selected ? transformScale() : removeScale();
        !selected && restoreEnv();
    }, 30);

    function updateScale () {
        if (html.getBoundingClientRect().width !== document.body.getBoundingClientRect().width) {
            selectHandler();
        }
    }

    var injectCaptureMouseMoves = BI.MouseMoveTracker.prototype.captureMouseMoves;
    var injectOnMouseMove = BI.MouseMoveTracker.prototype._onMouseMove;
    // 用jQEvent代替MouseEvent
    function injectMouseMoveTracker() {
        BI.MouseMoveTracker.prototype.captureMouseMoves = function (e) {
            var jQEvent = e.originalEvent ? e : jQuery.event.fix(e);
            injectCaptureMouseMoves.call(this, correctEvent(jQEvent));
        };
        BI.MouseMoveTracker.prototype._onMouseMove = function (e) {
            var jQEvent = e.originalEvent ? e : jQuery.event.fix(e);
            injectOnMouseMove.call(this, correctEvent(jQEvent));
        }
    }
    injectMouseMoveTracker();
    // popupview
    // function scaleFixed() {
    //     if (BI.isIE()) {
    //         var fixedList = document.getElementsByClassName("bi-popup-view");
    //         BI.each(fixedList, function (i, el) {
    //             if (window.getComputedStyle(el).position === 'fixed') {
    //                 el.style.transformOrigin = "top left";
    //                 el.style.transform = "scale(" + scale + ")";
    //             }
    //         })
    //     }
    // }
    //
    // function revertFixed() {
    //     if (BI.isIE()) {
    //         var fixedList = document.getElementsByClassName("bi-popup-view");
    //         BI.each(fixedList, function (i, el) {
    //             if (window.getComputedStyle(el).position === 'fixed') {
    //                 el.style.transformOrigin = "";
    //                 el.style.transform = "";
    //             }
    //         })
    //     }
    // }

    BI.config("bi.constant.dashboard.toolbar.left.items", function (config) {
        return BI.concat(config, [{
            type: "bi.multi_select_item",
            text: BI.i18nText("BI-Plugin-Scale_Adaptive"),
            selected: false,
            listeners: [{
                eventName: BI.MultiSelectItem.EVENT_CHANGE,
                action: function () {
                    selected = this.isSelected();
                    selectHandler();
                }
            }]
        }])
    });
}());