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

!(function () {
    var scale = 1, transformY = 0, selected = true, globalScaleRatio = parseFloat(BI.Cache.getItem('scaleRatio')) || null;
    var html = document.getElementsByTagName('html')[0];
    var wrapper = document.getElementById("wrapper");
    var fixedWrapper = document.createElement("div");
    var fixedContainer = document.createElement('div');
    fixedContainer.style.position = "absolute";
    fixedContainer.style.top = "0";
    fixedContainer.style.left = "0";
    fixedContainer.style.width = "100%";

    document.body.appendChild(fixedWrapper);
    fixedWrapper.appendChild(wrapper);
    wrapper.appendChild(fixedContainer);

    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 originalRender =  BI.Widget._renderEngine;
    var injectSearch = BI.Searcher.prototype._assertPopupView;

    var injectCreate = BI.createWidget;

    // 修正事件偏移
    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(ratio) {
        var bounds = getScaleBounds(ratio);
        scale = bounds.scale;

        wrapper.style.width = bounds.width + "px";
        wrapper.style.height = bounds.height + "px";
        wrapper.style.transform = "scale(" + bounds.scale+ ")";
        wrapper.style.transformOrigin = "top left";
        wrapper.style["-ms-transform"] = "scale(" + bounds.scale+ ")";
        wrapper.style["-ms-transform-origin"] = "top left";
        fixedContainer.style.height = (document.body.clientHeight / scale) + "px";
        wrapper.style.overflowY = "auto";
        html.style.backgroundColor = "#ffffff";

        document.body.style.overflowX = globalScaleRatio ? "auto" : "hidden";
        document.body.style.overflowY = "auto";
        fixedWrapper.style.overflow = "hidden";
        fixedWrapper.style.width = bounds.width * scale + "px";
        fixedWrapper.style.height = bounds.height * scale + "px";

        window.scale = Math.max(window.devicePixelRatio * scale, 1);
    }

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

        document.body.style.overflow = "hidden";
        document.body.style.width = "100%";
        document.body.style.height = "100%";
        fixedWrapper.style.overflow = "hidden";
        fixedWrapper.style.width = "100%";
        fixedWrapper.style.height = "100%";

        scale = 1;
        window.scale = window.devicePixelRatio;
    }

    // 获取缩放倍数，原模板宽高
    function getScaleBounds(ratio) {
        var widgets = BI.designConfigure.widgets,
            layoutRatio = BI.designConfigure.layoutRatio,
            freeLayoutRatio = BI.designConfigure.freeLayoutRatio,
            freeWidgets = BI.designConfigure.freeWidgetIds;

        if (Object.keys(widgets).length === 0) {
            return {
                scale: 1,
                width: html.clientWidth,
                height: html.clientHeight
            }
        }
        var left = null, right = null, top = null, bottom = null,
            freeLeft = null, freeRight = null, freeTop = null, freeBottom = null;
        BI.each(widgets, 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));

        var resultWidth = 0;
        var resultHeight = 0;
        var bHeight = 0;

        if (ratio) {
            scaleRatio = ratio;
            bHeight = html.clientHeight / scaleRatio;
            resultWidth = templateWidth;
            resultHeight = Math.max(bHeight, templateHeight);
        } else {
            bHeight = html.clientHeight / scaleRatio;
            resultWidth = html.clientWidth / scaleRatio;
            resultHeight = Math.max(bHeight, scaleRatio === 1 ?  html.clientHeight : templateHeight);
        }


        return {
            scale: scaleRatio,
            width: resultWidth,
            height: resultHeight
        };
    }

    // 准备环境，主要是纠正事件偏移
    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 += ( BI.isIE() ? window.getComputedStyle(el).position === "fixed" ? el.offsetLeft / scale : el.offsetLeft : el.offsetLeft );
                offsetTop  += ( BI.isIE() ? window.getComputedStyle(el).position === "fixed" ? el.offsetTop / scale : el.offsetTop : el.offsetTop );
                el = el.offsetParent;
            } while( el );

            var elm = elem;
            if (!checkInPopupView(elm)) {
                do{
                    if (elm === document.body) {
                        break;
                    }
                    offsetLeft -= elm.scrollLeft || 0;
                    offsetTop  -= elm.scrollTop || 0;
                    elm = elm.offsetParent;
                } 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));
        };


        // Popovers
        BI.Popovers = new BI.PopoverController({render: fixedContainer});
        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 - document.body.scrollLeft) + "px";
                        this.popupView.element[0].style.top = (parseInt(this.popupView.element[0].style.top) * scale + transformY - document.body.scrollTop) + "px";
                    } else {
                        var cBounds = this.popupView.element[0].getBoundingClientRect();
                        var pBounds = this.popupView.element[0].parentElement.getBoundingClientRect();
                        if (cBounds.left + cBounds.width > body.clientWidth * scale) {
                            this.popupView.element[0].style.top = (parseInt(pBounds.top) + transformY - document.body.scrollTop) + "px";
                            this.popupView.element[0].style.left = (parseInt(this.popupView.element[0].style.left) * scale) + "px";
                        } else if (this.options.direction === "right") {
                            this.popupView.element[0].style.top = (parseInt(pBounds.top) + transformY - document.body.scrollTop) + "px";
                            this.popupView.element[0].style.left = (parseInt(pBounds.right) + transformY - document.body.scrollTop) + "px";
                        } else if (parseInt(cBounds.top) >= parseInt(pBounds.top) && parseInt(cBounds.left) >= parseInt(pBounds.left)) {
                            this.popupView.element[0].style.top = (parseInt(pBounds.bottom) + transformY - document.body.scrollTop) + "px";
                            this.popupView.element[0].style.left = (parseInt(pBounds.left) + transformY - document.body.scrollTop) + "px";
                        }else if (parseInt(cBounds.top) >= parseInt(pBounds.top) && parseInt(cBounds.left) < parseInt(pBounds.left)) {
                            this.popupView.element[0].style.top = (parseInt(pBounds.bottom) + transformY - document.body.scrollTop) + "px";
                            this.popupView.element[0].style.left = (parseInt(pBounds.left) + transformY - document.body.scrollTop) + "px";
                        }
                    }
                    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 - document.body.scrollLeft + "px";
                tooltip.element[0].style.top = parseInt(tooltip.element[0].style.top) * scale + transformY - document.body.scrollTop + "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 - document.body.scrollLeft + "px";
                tooltip.element[0].style.top = parseInt(tooltip.element[0].style.top) * scale + transformY - document.body.scrollTop + "px";
                tooltip.element[0].style.transform = "scale(" + scale+ ")";
                tooltip.element[0].style.transformOrigin = "top left";
            }

            var tempAdd = BI.Popovers.add;
            BI.Popovers.add = function (name, popover, options, context) {
                tempAdd.call(this, name, popover, options, context);
                if (this.floatContainer[name].options.cls && this.floatContainer[name].options.cls.includes("bi-popup-view")) {
                    this.floatContainer[name].element[0].style.setProperty("position", "absolute", "important");
                }
            }

            // Searcher
            BI.Searcher.prototype._assertPopupView = function () {
                injectSearch.call(this);
                var self = this;
                if (this.popupView) {
                    BI.defer(function () {
                        self.popupView.element[0].parentElement.style.left = parseInt(self.popupView.element[0].parentElement.style.left) * scale + "px";
                        self.popupView.element[0].parentElement.style.top = parseInt(self.popupView.element[0].parentElement.style.top) * scale + "px";
                        self.popupView.element[0].parentElement.style.transform = "scale(" + scale + ")";
                        self.popupView.element[0].parentElement.style.transformOrigin = "left top";
                    })
                }
            }
        }

        BI.createWidget = function () {
            if (arguments[0] && arguments[0].element === "body") {
                arguments[0].element = fixedContainer;
            }
            return injectCreate.apply(this, arguments);
        };

        BI.Widget.registerRenderEngine({
            createElement: function (widget) {
                if (widget === "body") {
                    return BI.$(wrapper);
                }
                return originalRender.createElement(widget);
            },
            createFragment: function () {
                return originalRender.createFragment();
            }
        });

        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;
        if (BI.isIE()) {
            BI.Combo.prototype.adjustHeight = adjustHeight;
            BI.Tooltips.show = injectToolTipShow;
            BI.Bubbles.show = injectBubblesShow;
        }
        BI.createWidget = injectCreate;

        // Popovers
        BI.Popovers = new BI.PopoverController();
        BI.Widget.registerRenderEngine(originalRender);

        BI.Searcher.prototype._assertPopupView = injectSearch;

        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(globalScaleRatio) : removeScale();
        !selected && restoreEnv();
    }, 30);

    function updateScale () {
        if (html.getBoundingClientRect().width !== wrapper.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();

    selectHandler();
    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: true,
            listeners: [{
                eventName: BI.MultiSelectItem.EVENT_CHANGE,
                action: function () {
                    selected = this.isSelected();
                    selectHandler();
                }
            }]
        }, {
            type: 'bi.text_value_combo',
            text: '自定义缩放比例',
            width: 120,
            value: globalScaleRatio,
            items: [
                {
                    text: '自动',
                    value: null,
                    lgap: 10,
                },
                {
                    text: '50%',
                    value: 0.5,
                    lgap: 10,
                },
                {
                    text: '60%',
                    value: 0.6,
                    lgap: 10,
                },
                {
                    text: '70%',
                    value: 0.7,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '80%',
                    value: 0.8,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '90%',
                    value: 0.9,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '100%',
                    value: 1.0,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '110%',
                    value: 1.1,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '120%',
                    value: 1.2,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '130%',
                    value: 1.3,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '140%',
                    value: 1.4,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '150%',
                    value: 1.5,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '160%',
                    value: 1.6,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '170%',
                    value: 1.7,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '180%',
                    value: 1.8,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '190%',
                    value: 1.9,
                    lgap: 10,
                },
                {
                    lgap: 10,
                    text: '200%',
                    value: 2.0,
                    lgap: 10,
                },
            ],
            listeners: [{
                eventName: "EVENT_CHANGE",
                action: function (v) {
                    BI.Cache.setItem('scaleRatio', v);
                    globalScaleRatio = v;
                    selectHandler();
                }
            }],
        }])
    });
}());