fanruan
/
plugin-bi-screen-adaptive
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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
ec3f3f9704 7c228be59f
commit
af1b5815bd
3 changed files with 87 additions and 58 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  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
Unescape View File

@ -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
Unescape View File

@ -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
Unescape View File

@ -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 () {

Write Preview
Loading…
Cancel
Save