diff --git a/plugin.xml b/plugin.xml index 95b16d5..fa0ee74 100644 --- a/plugin.xml +++ b/plugin.xml @@ -3,12 +3,13 @@ com.finebi.plugin.screenadaptive yes - 1.1.31 + 1.1.33 10.0 - 2019-08-26 + 2019-08-16 fay [2019-08-28]为BI模板添加模板自适应功能。
]]>
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 39749e0..daea6ac 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 @@ -1,5 +1,5 @@ !(function () { - var scale = 1, transformY = 0, selected = false; + var scale = 1, transformY = 0, selected = true; var wrapper = document.getElementById("wrapper"); var html = document.getElementsByTagName('html')[0]; @@ -14,6 +14,8 @@ var injectOuterHeight = jQuery.fn.outerHeight; var injectBounds = jQuery.fn.bounds; + var injectCreate = BI.createWidget; + // 修正事件偏移 function correctEvent(e) { if (e && !e.corrected) { @@ -44,39 +46,40 @@ 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; - } + + 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"; + // 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 = ""; + 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; @@ -123,10 +126,12 @@ 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: scaleRatio === 1 ? html.clientHeight : templateHeight + height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight) }; } @@ -267,6 +272,13 @@ // } } + 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)'). @@ -285,6 +297,7 @@ // jQuery.fn.outerWidth = injectOuterWidth; // jQuery.fn.outerHeight = injectOuterHeight; } + BI.createWidget = injectCreate; document.body.onmousedown = null; window.removeEventListener('resize', updateScale); @@ -299,7 +312,7 @@ }, 30); function updateScale () { - if (html.getBoundingClientRect().width !== document.body.getBoundingClientRect().width) { + if (html.getBoundingClientRect().width !== wrapper.getBoundingClientRect().width) { selectHandler(); } } @@ -343,11 +356,12 @@ // } // } + 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: false, + selected: true, listeners: [{ eventName: BI.MultiSelectItem.EVENT_CHANGE, action: function () { 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 39749e0..daea6ac 100644 --- a/src/main/resources/com/finebi/plugin/web/scripts/entry.js +++ b/src/main/resources/com/finebi/plugin/web/scripts/entry.js @@ -1,5 +1,5 @@ !(function () { - var scale = 1, transformY = 0, selected = false; + var scale = 1, transformY = 0, selected = true; var wrapper = document.getElementById("wrapper"); var html = document.getElementsByTagName('html')[0]; @@ -14,6 +14,8 @@ var injectOuterHeight = jQuery.fn.outerHeight; var injectBounds = jQuery.fn.bounds; + var injectCreate = BI.createWidget; + // 修正事件偏移 function correctEvent(e) { if (e && !e.corrected) { @@ -44,39 +46,40 @@ 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; - } + + 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"; + // 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 = ""; + 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; @@ -123,10 +126,12 @@ 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: scaleRatio === 1 ? html.clientHeight : templateHeight + height: Math.max(bHeight, scaleRatio === 1 ? html.clientHeight : templateHeight) }; } @@ -267,6 +272,13 @@ // } } + 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)'). @@ -285,6 +297,7 @@ // jQuery.fn.outerWidth = injectOuterWidth; // jQuery.fn.outerHeight = injectOuterHeight; } + BI.createWidget = injectCreate; document.body.onmousedown = null; window.removeEventListener('resize', updateScale); @@ -299,7 +312,7 @@ }, 30); function updateScale () { - if (html.getBoundingClientRect().width !== document.body.getBoundingClientRect().width) { + if (html.getBoundingClientRect().width !== wrapper.getBoundingClientRect().width) { selectHandler(); } } @@ -343,11 +356,12 @@ // } // } + 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: false, + selected: true, listeners: [{ eventName: BI.MultiSelectItem.EVENT_CHANGE, action: function () {