Browse Source

feature

feature/10.0^2
Fay 5 years ago
parent
commit
7c228be59f
  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>
<name><![CDATA[BI模板屏幕自适应]]></name>
<active>yes</active>
<version>1.1.31</version>
<version>1.1.33</version>
<env-version>10.0</env-version>
<jartime>2019-08-26</jartime>
<jartime>2019-08-16</jartime>
<vendor>fay</vendor>
<description><![CDATA[预览BI模板时,根据屏幕的宽度自适应显示模板]]></description>
<change-notes><![CDATA[
[2019-10-24]修复IE中有空白部分的情况<br/>
[2019-08-28]为BI模板添加模板自适应功能。<br/>
]]></change-notes>
<extra-decision>

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

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

Loading…
Cancel
Save