Browse Source

Merge pull request #15 in PG/plugin-bi-screen-adaptive from ~FAY/plugin-bi-screen-adaptive:feature/10.0 to feature/10.0

* commit '7c228be59f6a59cf18d89854670a5000cdc8aca9':
  feature
feature/10.0^2
fay 5 years ago
parent
commit
af1b5815bd
  1. 5
      plugin.xml
  2. 70
      src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js
  3. 70
      src/main/resources/com/finebi/plugin/web/scripts/entry.js

5
plugin.xml

@ -3,12 +3,13 @@
<id>com.finebi.plugin.screenadaptive</id> <id>com.finebi.plugin.screenadaptive</id>
<name><![CDATA[BI模板屏幕自适应]]></name> <name><![CDATA[BI模板屏幕自适应]]></name>
<active>yes</active> <active>yes</active>
<version>1.1.31</version> <version>1.1.33</version>
<env-version>10.0</env-version> <env-version>10.0</env-version>
<jartime>2019-08-26</jartime> <jartime>2019-08-16</jartime>
<vendor>fay</vendor> <vendor>fay</vendor>
<description><![CDATA[预览BI模板时,根据屏幕的宽度自适应显示模板]]></description> <description><![CDATA[预览BI模板时,根据屏幕的宽度自适应显示模板]]></description>
<change-notes><![CDATA[ <change-notes><![CDATA[
[2019-10-24]修复IE中有空白部分的情况<br/>
[2019-08-28]为BI模板添加模板自适应功能。<br/> [2019-08-28]为BI模板添加模板自适应功能。<br/>
]]></change-notes> ]]></change-notes>
<extra-decision> <extra-decision>

70
src/main/resources/com/finebi/plugin/web/plugin.screen_adaptive.js

@ -1,5 +1,5 @@
!(function () { !(function () {
var scale = 1, transformY = 0, selected = false; var scale = 1, transformY = 0, selected = true;
var wrapper = document.getElementById("wrapper"); var wrapper = document.getElementById("wrapper");
var html = document.getElementsByTagName('html')[0]; var html = document.getElementsByTagName('html')[0];
@ -14,6 +14,8 @@
var injectOuterHeight = jQuery.fn.outerHeight; var injectOuterHeight = jQuery.fn.outerHeight;
var injectBounds = jQuery.fn.bounds; var injectBounds = jQuery.fn.bounds;
var injectCreate = BI.createWidget;
// 修正事件偏移 // 修正事件偏移
function correctEvent(e) { function correctEvent(e) {
if (e && !e.corrected) { if (e && !e.corrected) {
@ -44,39 +46,40 @@
function transformScale() { function transformScale() {
var bounds = getScaleBounds(); var bounds = getScaleBounds();
scale = bounds.scale; scale = bounds.scale;
document.body.style.width = bounds.width + "px";
document.body.style.height = bounds.height + "px"; wrapper.style.width = bounds.width + "px";
document.body.style.transform = "scale(" + bounds.scale+ ")"; wrapper.style.height = bounds.height + "px";
document.body.style.transformOrigin = "top left"; wrapper.style.transform = "scale(" + bounds.scale+ ")";
document.body.style["-ms-transform"] = "scale(" + bounds.scale+ ")"; wrapper.style.transformOrigin = "top left";
document.body.style["-ms-transform-origin"] = "top left"; wrapper.style["-ms-transform"] = "scale(" + bounds.scale+ ")";
html.style.overflowY = "auto"; wrapper.style["-ms-transform-origin"] = "top left";
html.style.backgroundColor = document.getElementsByClassName('bi-theme-dark').length === 0 ? "#2c3d59" : "#ffffff"; // 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; // if (bounds.height * bounds.scale < html.clientHeight) {
html.style.overflowY = "hidden"; // transformY = (html.clientHeight - bounds.height * bounds.scale) / 2;
} else { // html.style.overflowY = "hidden";
transformY = 0; // } else {
} // transformY = 0;
// }
// document.body.style.height = (bounds.height * scale) + "px"; // document.body.style.height = (bounds.height * scale) + "px";
// document.body.style.overflow = "hidden"; // document.body.style.overflow = "hidden";
document.body.style.top = transformY + "px"; // document.body.style.top = transformY + "px";
window.scale = window.devicePixelRatio * scale; window.scale = window.devicePixelRatio * scale;
// scaleFixed(); // scaleFixed();
} }
// 取消缩放 // 取消缩放
function removeScale() { function removeScale() {
document.body.style.width = "100%"; wrapper.style.width = "100%";
document.body.style.height = "100%"; wrapper.style.height = "100%";
document.body.style.transform = ""; wrapper.style.transform = "";
document.body.style.transformOrigin = ""; wrapper.style.transformOrigin = "";
document.body.style["-ms-transform"] = ""; wrapper.style["-ms-transform"] = "";
document.body.style["-ms-transform-origin"] = ""; wrapper.style["-ms-transform-origin"] = "";
document.body.style.overflowY = "hidden"; wrapper.style.overflowY = "hidden";
document.body.style.top = ""; wrapper.style.top = "";
html.style.backgroundColor = "#ffffff"; html.style.backgroundColor = "#ffffff";
scale = 1; scale = 1;
@ -123,10 +126,12 @@
var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60; 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 templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30;
var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1)); var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1));
var bHeight = html.clientHeight / scaleRatio;
return { return {
scale: scaleRatio, scale: scaleRatio,
width: html.clientWidth / 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; // document.body.onmousedown = scaleFixed;
window.addEventListener('resize', updateScale); window.addEventListener('resize', updateScale);
window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)'). window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)').
@ -285,6 +297,7 @@
// jQuery.fn.outerWidth = injectOuterWidth; // jQuery.fn.outerWidth = injectOuterWidth;
// jQuery.fn.outerHeight = injectOuterHeight; // jQuery.fn.outerHeight = injectOuterHeight;
} }
BI.createWidget = injectCreate;
document.body.onmousedown = null; document.body.onmousedown = null;
window.removeEventListener('resize', updateScale); window.removeEventListener('resize', updateScale);
@ -299,7 +312,7 @@
}, 30); }, 30);
function updateScale () { function updateScale () {
if (html.getBoundingClientRect().width !== document.body.getBoundingClientRect().width) { if (html.getBoundingClientRect().width !== wrapper.getBoundingClientRect().width) {
selectHandler(); selectHandler();
} }
} }
@ -343,11 +356,12 @@
// } // }
// } // }
selectHandler();
BI.config("bi.constant.dashboard.toolbar.left.items", function (config) { BI.config("bi.constant.dashboard.toolbar.left.items", function (config) {
return BI.concat(config, [{ return BI.concat(config, [{
type: "bi.multi_select_item", type: "bi.multi_select_item",
text: BI.i18nText("BI-Plugin-Scale_Adaptive"), text: BI.i18nText("BI-Plugin-Scale_Adaptive"),
selected: false, selected: true,
listeners: [{ listeners: [{
eventName: BI.MultiSelectItem.EVENT_CHANGE, eventName: BI.MultiSelectItem.EVENT_CHANGE,
action: function () { action: function () {

70
src/main/resources/com/finebi/plugin/web/scripts/entry.js

@ -1,5 +1,5 @@
!(function () { !(function () {
var scale = 1, transformY = 0, selected = false; var scale = 1, transformY = 0, selected = true;
var wrapper = document.getElementById("wrapper"); var wrapper = document.getElementById("wrapper");
var html = document.getElementsByTagName('html')[0]; var html = document.getElementsByTagName('html')[0];
@ -14,6 +14,8 @@
var injectOuterHeight = jQuery.fn.outerHeight; var injectOuterHeight = jQuery.fn.outerHeight;
var injectBounds = jQuery.fn.bounds; var injectBounds = jQuery.fn.bounds;
var injectCreate = BI.createWidget;
// 修正事件偏移 // 修正事件偏移
function correctEvent(e) { function correctEvent(e) {
if (e && !e.corrected) { if (e && !e.corrected) {
@ -44,39 +46,40 @@
function transformScale() { function transformScale() {
var bounds = getScaleBounds(); var bounds = getScaleBounds();
scale = bounds.scale; scale = bounds.scale;
document.body.style.width = bounds.width + "px";
document.body.style.height = bounds.height + "px"; wrapper.style.width = bounds.width + "px";
document.body.style.transform = "scale(" + bounds.scale+ ")"; wrapper.style.height = bounds.height + "px";
document.body.style.transformOrigin = "top left"; wrapper.style.transform = "scale(" + bounds.scale+ ")";
document.body.style["-ms-transform"] = "scale(" + bounds.scale+ ")"; wrapper.style.transformOrigin = "top left";
document.body.style["-ms-transform-origin"] = "top left"; wrapper.style["-ms-transform"] = "scale(" + bounds.scale+ ")";
html.style.overflowY = "auto"; wrapper.style["-ms-transform-origin"] = "top left";
html.style.backgroundColor = document.getElementsByClassName('bi-theme-dark').length === 0 ? "#2c3d59" : "#ffffff"; // 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; // if (bounds.height * bounds.scale < html.clientHeight) {
html.style.overflowY = "hidden"; // transformY = (html.clientHeight - bounds.height * bounds.scale) / 2;
} else { // html.style.overflowY = "hidden";
transformY = 0; // } else {
} // transformY = 0;
// }
// document.body.style.height = (bounds.height * scale) + "px"; // document.body.style.height = (bounds.height * scale) + "px";
// document.body.style.overflow = "hidden"; // document.body.style.overflow = "hidden";
document.body.style.top = transformY + "px"; // document.body.style.top = transformY + "px";
window.scale = window.devicePixelRatio * scale; window.scale = window.devicePixelRatio * scale;
// scaleFixed(); // scaleFixed();
} }
// 取消缩放 // 取消缩放
function removeScale() { function removeScale() {
document.body.style.width = "100%"; wrapper.style.width = "100%";
document.body.style.height = "100%"; wrapper.style.height = "100%";
document.body.style.transform = ""; wrapper.style.transform = "";
document.body.style.transformOrigin = ""; wrapper.style.transformOrigin = "";
document.body.style["-ms-transform"] = ""; wrapper.style["-ms-transform"] = "";
document.body.style["-ms-transform-origin"] = ""; wrapper.style["-ms-transform-origin"] = "";
document.body.style.overflowY = "hidden"; wrapper.style.overflowY = "hidden";
document.body.style.top = ""; wrapper.style.top = "";
html.style.backgroundColor = "#ffffff"; html.style.backgroundColor = "#ffffff";
scale = 1; scale = 1;
@ -123,10 +126,12 @@
var templateWidth = (Math.round((right / (layoutRatio.x || 1)) || (freeRight / (freeLayoutRatio.x || 1)))) + 60; 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 templateHeight = (Math.round((bottom / (layoutRatio.y || 1)) || (freeBottom / (freeLayoutRatio.y || 1)))) + 30;
var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1)); var scaleRatio = parseFloat((html.clientWidth / templateWidth).toFixed(1));
var bHeight = html.clientHeight / scaleRatio;
return { return {
scale: scaleRatio, scale: scaleRatio,
width: html.clientWidth / 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; // document.body.onmousedown = scaleFixed;
window.addEventListener('resize', updateScale); window.addEventListener('resize', updateScale);
window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)'). window.matchMedia && window.matchMedia('screen and (min-resolution: 2dppx)').
@ -285,6 +297,7 @@
// jQuery.fn.outerWidth = injectOuterWidth; // jQuery.fn.outerWidth = injectOuterWidth;
// jQuery.fn.outerHeight = injectOuterHeight; // jQuery.fn.outerHeight = injectOuterHeight;
} }
BI.createWidget = injectCreate;
document.body.onmousedown = null; document.body.onmousedown = null;
window.removeEventListener('resize', updateScale); window.removeEventListener('resize', updateScale);
@ -299,7 +312,7 @@
}, 30); }, 30);
function updateScale () { function updateScale () {
if (html.getBoundingClientRect().width !== document.body.getBoundingClientRect().width) { if (html.getBoundingClientRect().width !== wrapper.getBoundingClientRect().width) {
selectHandler(); selectHandler();
} }
} }
@ -343,11 +356,12 @@
// } // }
// } // }
selectHandler();
BI.config("bi.constant.dashboard.toolbar.left.items", function (config) { BI.config("bi.constant.dashboard.toolbar.left.items", function (config) {
return BI.concat(config, [{ return BI.concat(config, [{
type: "bi.multi_select_item", type: "bi.multi_select_item",
text: BI.i18nText("BI-Plugin-Scale_Adaptive"), text: BI.i18nText("BI-Plugin-Scale_Adaptive"),
selected: false, selected: true,
listeners: [{ listeners: [{
eventName: BI.MultiSelectItem.EVENT_CHANGE, eventName: BI.MultiSelectItem.EVENT_CHANGE,
action: function () { action: function () {

Loading…
Cancel
Save