From 5b3c549028fed9c9a4c6dd3cb09c778fa99bbbac Mon Sep 17 00:00:00 2001 From: Fay Date: Thu, 25 Jul 2019 16:04:35 +0800 Subject: [PATCH] =?UTF-8?q?BI-48558=20fix:=20=E9=83=A8=E5=88=86=E5=9C=BA?= =?UTF-8?q?=E6=99=AF=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../plugin/web/plugin.screen_adaptive.js | 220 +++++++++++++----- .../com/finebi/plugin/web/scripts/entry.js | 220 +++++++++++++----- 2 files changed, 312 insertions(+), 128 deletions(-) diff --git a/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js b/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js index cb7596f..2dceb4e 100644 --- a/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js +++ b/src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js @@ -6,6 +6,11 @@ var injectOffset = jQuery.fn.offset; var injectEventFix = jQuery.event.fix; var injectMouseInBounds = jQuery.fn.__isMouseInBounds__; + var injectToolTipShow = 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) { @@ -19,6 +24,20 @@ 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(); @@ -42,6 +61,7 @@ window.scale = window.devicePixelRatio * scale; + // scaleFixed(); } // 取消缩放 @@ -58,6 +78,8 @@ scale = 1; window.scale = window.devicePixelRatio / scale; + + // revertFixed(); } // 获取缩放倍数，原模板宽高 @@ -96,88 +118,134 @@ // 准备环境，主要是纠正事件偏移 function prepareEnv() { // IE的fixed元素不受transform：scale影响 - if (!BI.isIE()) { - 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.pageX * scale, - pageY = e.pageY * 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; - } + injectToolTipShow = injectToolTipShow || BI.Tooltips.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.pageX * scale, + pageY = e.pageY * 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 ); - }); - } + 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; - } + var docElem, win, + box = { top: 0, left: 0 }, + elem = this[ 0 ], + doc = elem && elem.ownerDocument; - docElem = doc.documentElement; + if ( !doc ) { + return; + } - // Make sure it's not a disconnected DOM node - if ( !jQuery.contains( docElem, elem ) ) { - return box; - } + docElem = doc.documentElement; - var el = elem, - offsetLeft = 0, - offsetTop = 0; - - do{ - offsetLeft += el.offsetLeft; - offsetTop += el.offsetTop; - el = el.offsetParent; - } while( el ); - - var elm = elem; - 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 ) - }; + // 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; + 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)); + }; + + 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.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() { - if (!BI.isIE()) { - jQuery.fn.__isMouseInBounds__ = injectMouseInBounds; - jQuery.fn.offset = injectOffset; - jQuery.event.fix = injectEventFix; + jQuery.fn.__isMouseInBounds__ = injectMouseInBounds; + jQuery.fn.offset = injectOffset; + jQuery.event.fix = injectEventFix; + // jQuery.fn.outerWidth = injectOuterWidth; + // jQuery.fn.outerHeight = injectOuterHeight; + // jQuery.fn.bounds = injectBounds; + if (BI.isIE()) { + BI.Combo.prototype.adjustHeight = adjustHeight; + BI.Tooltips.show = injectToolTipShow; } + document.body.onmousedown = null; window.removeEventListener('resize', updateScale); window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)'). removeListener(selectHandler); @@ -209,6 +277,30 @@ } } 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, [{ diff --git a/src/main/resources/com/finebi/plugin/web/scripts/entry.js b/src/main/resources/com/finebi/plugin/web/scripts/entry.js index cb7596f..2dceb4e 100644 --- a/src/main/resources/com/finebi/plugin/web/scripts/entry.js +++ b/src/main/resources/com/finebi/plugin/web/scripts/entry.js @@ -6,6 +6,11 @@ var injectOffset = jQuery.fn.offset; var injectEventFix = jQuery.event.fix; var injectMouseInBounds = jQuery.fn.__isMouseInBounds__; + var injectToolTipShow = 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) { @@ -19,6 +24,20 @@ 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(); @@ -42,6 +61,7 @@ window.scale = window.devicePixelRatio * scale; + // scaleFixed(); } // 取消缩放 @@ -58,6 +78,8 @@ scale = 1; window.scale = window.devicePixelRatio / scale; + + // revertFixed(); } // 获取缩放倍数，原模板宽高 @@ -96,88 +118,134 @@ // 准备环境，主要是纠正事件偏移 function prepareEnv() { // IE的fixed元素不受transform：scale影响 - if (!BI.isIE()) { - 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.pageX * scale, - pageY = e.pageY * 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; - } + injectToolTipShow = injectToolTipShow || BI.Tooltips.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.pageX * scale, + pageY = e.pageY * 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 ); - }); - } + 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; - } + var docElem, win, + box = { top: 0, left: 0 }, + elem = this[ 0 ], + doc = elem && elem.ownerDocument; - docElem = doc.documentElement; + if ( !doc ) { + return; + } - // Make sure it's not a disconnected DOM node - if ( !jQuery.contains( docElem, elem ) ) { - return box; - } + docElem = doc.documentElement; - var el = elem, - offsetLeft = 0, - offsetTop = 0; - - do{ - offsetLeft += el.offsetLeft; - offsetTop += el.offsetTop; - el = el.offsetParent; - } while( el ); - - var elm = elem; - 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 ) - }; + // 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; + 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)); + }; + + 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.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() { - if (!BI.isIE()) { - jQuery.fn.__isMouseInBounds__ = injectMouseInBounds; - jQuery.fn.offset = injectOffset; - jQuery.event.fix = injectEventFix; + jQuery.fn.__isMouseInBounds__ = injectMouseInBounds; + jQuery.fn.offset = injectOffset; + jQuery.event.fix = injectEventFix; + // jQuery.fn.outerWidth = injectOuterWidth; + // jQuery.fn.outerHeight = injectOuterHeight; + // jQuery.fn.bounds = injectBounds; + if (BI.isIE()) { + BI.Combo.prototype.adjustHeight = adjustHeight; + BI.Tooltips.show = injectToolTipShow; } + document.body.onmousedown = null; window.removeEventListener('resize', updateScale); window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)'). removeListener(selectHandler); @@ -209,6 +277,30 @@ } } 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, [{