!(function () { var scale = 1, transformY = 0, selected = true; 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; 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() { var bounds = getScaleBounds(); 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"; // html.style.backgroundColor = document.getElementsByClassName('bi-theme-dark').length === 0 ? "#2c3d59" : "#ffffff"; html.style.backgroundColor = "#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() { 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 = ""; 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 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 bHeight = html.clientHeight / scaleRatio; return { scale: scaleRatio, width: html.clientWidth / scaleRatio, height: Math.max(bHeight, 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) // }; // } } BI.createWidget = function () { if (arguments[0] && arguments[0].element === "body") { arguments[0].element = wrapper; } return injectCreate.apply(this, arguments); }; // 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; } BI.createWidget = injectCreate; 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 !== 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(); // 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 = ""; // } // }) // } // } 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(); } }] }]) }); }());