@ -1,7 +1,17 @@
! ( function ( ) { ! ( function ( ) {
var scale = 1 , transformY = 0 , selected = true ; var scale = 1 , transformY = 0 , selected = true , globalScaleRatio = parseFloat ( BI . Cache . getItem ( 'scaleRatio' ) ) || null ;
var wrapper = document . getElementById ( "wrapper" ) ;
var html = document . getElementsByTagName ( 'html' ) [ 0 ] ; var html = document . getElementsByTagName ( 'html' ) [ 0 ] ;
var wrapper = document . getElementById ( "wrapper" ) ;
var fixedWrapper = document . createElement ( "div" ) ;
var fixedContainer = document . createElement ( 'div' ) ;
fixedContainer . style . position = "absolute" ;
fixedContainer . style . top = "0" ;
fixedContainer . style . left = "0" ;
fixedContainer . style . width = "100%" ;
document . body . appendChild ( fixedWrapper ) ;
fixedWrapper . appendChild ( wrapper ) ;
wrapper . appendChild ( fixedContainer ) ;
var jQuery = $ || window . jQuery ; var jQuery = $ || window . jQuery ;
var injectOffset = jQuery . fn . offset ; var injectOffset = jQuery . fn . offset ;
@ -10,9 +20,8 @@
var injectToolTipShow = null ; var injectToolTipShow = null ;
var injectBubblesShow = null ; var injectBubblesShow = null ;
var adjustHeight = BI . Combo . prototype . adjustHeight ; var adjustHeight = BI . Combo . prototype . adjustHeight ;
var injectOuterWidth = jQuery . fn . outerWidth ; var originalRender = BI . Widget . _renderEngine ;
var injectOuterHeight = jQuery . fn . outerHeight ; var injectSearch = BI . Searcher . prototype . _assertPopupView ;
var injectBounds = jQuery . fn . bounds ;
var injectCreate = BI . createWidget ; var injectCreate = BI . createWidget ;
@ -43,8 +52,8 @@
} }
// 进行缩放
// 进行缩放
function transformScale ( ) { function transformScale ( ratio ) {
var bounds = getScaleBounds ( ) ; var bounds = getScaleBounds ( ratio ) ;
scale = bounds . scale ; scale = bounds . scale ;
wrapper . style . width = bounds . width + "px" ; wrapper . style . width = bounds . width + "px" ;
@ -53,21 +62,17 @@
wrapper . style . transformOrigin = "top left" ; wrapper . style . transformOrigin = "top left" ;
wrapper . style [ "-ms-transform" ] = "scale(" + bounds . scale + ")" ; wrapper . style [ "-ms-transform" ] = "scale(" + bounds . scale + ")" ;
wrapper . style [ "-ms-transform-origin" ] = "top left" ; wrapper . style [ "-ms-transform-origin" ] = "top left" ;
// html.style.backgroundColor = document.getElementsByClassName('bi-theme-dark').length === 0 ? "#2c3d59" : "#ffffff";
fixedContainer . style . height = ( document . body . clientHeight / scale ) + "px" ;
wrapper . style . overflowY = "auto" ;
html . style . backgroundColor = "#ffffff" ; html . style . backgroundColor = "#ffffff" ;
// if (bounds.height * bounds.scale < html.clientHeight) {
document . body . style . overflowX = globalScaleRatio ? "auto" : "hidden" ;
// transformY = (html.clientHeight - bounds.height * bounds.scale) / 2;
document . body . style . overflowY = "auto" ;
// html.style.overflowY = "hidden";
fixedWrapper . style . overflow = "hidden" ;
// } else {
fixedWrapper . style . width = bounds . width * scale + "px" ;
// transformY = 0;
fixedWrapper . style . height = bounds . height * scale + "px" ;
// }
window . scale = Math . max ( window . devicePixelRatio * scale , 1 ) ;
// document.body.style.height = (bounds.height * scale) + "px";
// document.body.style.overflow = "hidden";
// document.body.style.top = transformY + "px";
window . scale = window . devicePixelRatio * scale ;
// scaleFixed();
} }
// 取消缩放
// 取消缩放
@ -80,20 +85,22 @@
wrapper . style [ "-ms-transform-origin" ] = "" ; wrapper . style [ "-ms-transform-origin" ] = "" ;
wrapper . style . overflowY = "hidden" ; wrapper . style . overflowY = "hidden" ;
wrapper . style . top = "" ; wrapper . style . top = "" ;
fixedContainer . style . height = "0px" ;
html . style . backgroundColor = "#ffffff" ; html . style . backgroundColor = "#ffffff" ;
scale = 1 ; document . body . style . overflow = "hidden" ;
// document.body.style.top = "0px";
document . body . style . width = "100%" ;
// document.body.style.width = "";
document . body . style . height = "100%" ;
// document.body.style.height = "";
fixedWrapper . style . overflow = "hidden" ;
// document.body.style.overflowY = "";
fixedWrapper . style . width = "100%" ;
window . scale = window . devicePixelRatio / scale ; fixedWrapper . style . height = "100%" ;
// revertFixed();
scale = 1 ;
window . scale = window . devicePixelRatio ;
} }
// 获取缩放倍数，原模板宽高
// 获取缩放倍数，原模板宽高
function getScaleBounds ( ) { function getScaleBounds ( ratio ) {
var widgets = BI . designConfigure . widgets , var widgets = BI . designConfigure . widgets ,
layoutRatio = BI . designConfigure . layoutRatio , layoutRatio = BI . designConfigure . layoutRatio ,
freeLayoutRatio = BI . designConfigure . freeLayoutRatio , freeLayoutRatio = BI . designConfigure . freeLayoutRatio ,
@ -126,12 +133,27 @@
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 ;
var resultWidth = 0 ;
var resultHeight = 0 ;
var bHeight = 0 ;
if ( ratio ) {
scaleRatio = ratio ;
bHeight = html . clientHeight / scaleRatio ;
resultWidth = templateWidth ;
resultHeight = Math . max ( bHeight , templateHeight ) ;
} else {
bHeight = html . clientHeight / scaleRatio ;
resultWidth = html . clientWidth / scaleRatio ;
resultHeight = Math . max ( bHeight , scaleRatio === 1 ? html . clientHeight : templateHeight ) ;
}
return { return {
scale : scaleRatio , scale : scaleRatio ,
width : html . clientWidth / scaleRatio , width : resultWidth ,
height : Math . max ( bHeight , scaleRatio === 1 ? html . clientHeight : templateHeight ) height : resultHeight
} ; } ;
} }
@ -188,18 +210,20 @@
offsetTop = 0 ; offsetTop = 0 ;
do { do {
offsetLeft += el . offsetLeft ; offsetLeft += ( BI . isIE ( ) ? window . getComputedStyle ( el ) . position === "fixed" ? el . offsetLeft / scale : el . offsetLeft : el . offsetLeft ) ;
offsetTop += el . offsetTop ; offsetTop += ( BI . isIE ( ) ? window . getComputedStyle ( el ) . position === "fixed" ? el . offsetTop / scale : el . offsetTop : el . offsetTop ) ;
el = el . offsetParent ; el = el . offsetParent ;
} while ( el ) ; } while ( el ) ;
var elm = elem ; var elm = elem ;
// 不知道该怎么写代码了,就这样了
if ( ! checkInPopupView ( elm ) ) { if ( ! checkInPopupView ( elm ) ) {
do { do {
if ( elm === document . body ) {
break ;
}
offsetLeft -= elm . scrollLeft || 0 ; offsetLeft -= elm . scrollLeft || 0 ;
offsetTop -= elm . scrollTop || 0 ; offsetTop -= elm . scrollTop || 0 ;
elm = elm . parentNode ; elm = elm . offsetParent ;
} while ( elm ) ; } while ( elm ) ;
} }
win = getWindow ( doc ) ; win = getWindow ( doc ) ;
@ -212,17 +236,33 @@
jQuery . event . fix = function ( e ) { jQuery . event . fix = function ( e ) {
return correctEvent ( injectEventFix . call ( this , e ) ) ; return correctEvent ( injectEventFix . call ( this , e ) ) ;
} ; } ;
if ( BI . isIE ( ) ) {
// Popovers
BI . Popovers = new BI . PopoverController ( { render : fixedContainer } ) ;
if ( BI . isIE ( ) ) {
BI . Combo . prototype . adjustHeight = function ( e ) { BI . Combo . prototype . adjustHeight = function ( e ) {
adjustHeight . call ( this , e ) ; adjustHeight . call ( this , e ) ;
if ( this . popupView ) { if ( this . popupView ) {
if ( ! checkInPopupView ( this . popupView . element [ 0 ] ) ) { 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 . left = ( parseInt ( this . popupView . element [ 0 ] . style . left ) * scale - document . body . scrollLeft ) + "px" ;
this . popupView . element [ 0 ] . style . top = parseInt ( this . popupView . element [ 0 ] . style . top ) * scale + transformY + "px" ; this . popupView . element [ 0 ] . style . top = ( parseInt ( this . popupView . element [ 0 ] . style . top ) * scale + transformY - document . body . scrollTop ) + "px" ;
} else { } else {
var cBounds = this . popupView . element [ 0 ] . getBoundingClientRect ( ) ;
var pBounds = this . popupView . element [ 0 ] . parentElement . getBoundingClientRect ( ) ;
if ( cBounds . left + cBounds . width > body . clientWidth * scale ) {
this . popupView . element [ 0 ] . style . top = ( parseInt ( pBounds . top ) + transformY - document . body . scrollTop ) + "px" ;
this . popupView . element [ 0 ] . style . left = ( parseInt ( this . popupView . element [ 0 ] . style . left ) * scale ) + "px" ;
} else if ( this . options . direction === "right" ) {
this . popupView . element [ 0 ] . style . top = ( parseInt ( pBounds . top ) + transformY - document . body . scrollTop ) + "px" ;
this . popupView . element [ 0 ] . style . left = ( parseInt ( pBounds . right ) + transformY - document . body . scrollTop ) + "px" ;
} else if ( parseInt ( cBounds . top ) >= parseInt ( pBounds . top ) && parseInt ( cBounds . left ) >= parseInt ( pBounds . left ) ) {
this . popupView . element [ 0 ] . style . top = ( parseInt ( pBounds . bottom ) + transformY - document . body . scrollTop ) + "px" ;
this . popupView . element [ 0 ] . style . left = ( parseInt ( pBounds . left ) + transformY - document . body . scrollTop ) + "px" ;
} else if ( parseInt ( cBounds . top ) >= parseInt ( pBounds . top ) && parseInt ( cBounds . left ) < parseInt ( pBounds . left ) ) {
this . popupView . element [ 0 ] . style . top = ( parseInt ( pBounds . bottom ) + transformY - document . body . scrollTop ) + "px" ;
this . popupView . element [ 0 ] . style . left = ( parseInt ( pBounds . left ) + transformY - document . body . scrollTop ) + "px" ;
}
} }
this . popupView . element [ 0 ] . style . transform = "scale(" + scale + ")" ; this . popupView . element [ 0 ] . style . transform = "scale(" + scale + ")" ;
this . popupView . element [ 0 ] . style . transformOrigin = "top left" ; this . popupView . element [ 0 ] . style . transformOrigin = "top left" ;
@ -231,55 +271,62 @@
BI . Tooltips . show = function ( e , name , text , level , context , opt ) { BI . Tooltips . show = function ( e , name , text , level , context , opt ) {
injectToolTipShow . call ( this , e , name , text , level , context , opt ) ; injectToolTipShow . call ( this , e , name , text , level , context , opt ) ;
var tooltip = this . get ( name ) ; var tooltip = this . get ( name ) ;
tooltip . element [ 0 ] . style . left = parseInt ( tooltip . element [ 0 ] . style . left ) * scale + "px" ; tooltip . element [ 0 ] . style . left = parseInt ( tooltip . element [ 0 ] . style . left ) * scale - document . body . scrollLeft + "px" ;
tooltip . element [ 0 ] . style . top = parseInt ( tooltip . element [ 0 ] . style . top ) * scale + transformY + "px" ; tooltip . element [ 0 ] . style . top = parseInt ( tooltip . element [ 0 ] . style . top ) * scale + transformY - document . body . scrollTop + "px" ;
tooltip . element [ 0 ] . style . transform = "scale(" + scale + ")" ; tooltip . element [ 0 ] . style . transform = "scale(" + scale + ")" ;
tooltip . element [ 0 ] . style . transformOrigin = "top left" ; tooltip . element [ 0 ] . style . transformOrigin = "top left" ;
} }
BI . Bubbles . show = function ( name , text , context , opt ) { BI . Bubbles . show = function ( name , text , context , opt ) {
injectBubblesShow . call ( this , name , text , context , opt ) ; injectBubblesShow . call ( this , name , text , context , opt ) ;
var tooltip = this . get ( name ) ; var tooltip = this . get ( name ) ;
tooltip . element [ 0 ] . style . left = parseInt ( tooltip . element [ 0 ] . style . left ) * scale + "px" ; tooltip . element [ 0 ] . style . left = parseInt ( tooltip . element [ 0 ] . style . left ) * scale - document . body . scrollLeft + "px" ;
tooltip . element [ 0 ] . style . top = parseInt ( tooltip . element [ 0 ] . style . top ) * scale + transformY + "px" ; tooltip . element [ 0 ] . style . top = parseInt ( tooltip . element [ 0 ] . style . top ) * scale + transformY - document . body . scrollTop + "px" ;
tooltip . element [ 0 ] . style . transform = "scale(" + scale + ")" ; tooltip . element [ 0 ] . style . transform = "scale(" + scale + ")" ;
tooltip . element [ 0 ] . style . transformOrigin = "top left" ; tooltip . element [ 0 ] . style . transformOrigin = "top left" ;
} }
// jQuery.fn.outerWidth = function () {
// var wdith = injectOuterWidth.apply(this, arguments);
var tempAdd = BI . Popovers . add ;
// if (this[0] === document.body) {
BI . Popovers . add = function ( name , popover , options , context ) {
// return wdith / scale;
tempAdd . call ( this , name , popover , options , context ) ;
// }
if ( this . floatContainer [ name ] . options . cls && this . floatContainer [ name ] . options . cls . includes ( "bi-popup-view" ) ) {
// return wdith;
this . floatContainer [ name ] . element [ 0 ] . style . setProperty ( "position" , "absolute" , "important" ) ;
// }
}
// jQuery.fn.outerHeight = function () {
}
// var height = injectOuterHeight.apply(this, arguments);
// if (this[0] === document.body) {
// Searcher
// return height / scale;
BI . Searcher . prototype . _assertPopupView = function ( ) {
// }
injectSearch . call ( this ) ;
// return height;
var self = this ;
// }
if ( this . popupView ) {
// BI.DOM.getBottomPosition = function (combo, popup, extraHeight) {
BI . defer ( function ( ) {
// var el = combo.element;
self . popupView . element [ 0 ] . parentElement . style . left = parseInt ( self . popupView . element [ 0 ] . parentElement . style . left ) * scale + "px" ;
// return {
self . popupView . element [ 0 ] . parentElement . style . top = parseInt ( self . popupView . element [ 0 ] . parentElement . style . top ) * scale + "px" ;
// top: el.offset().top + el.outerHeight() * (1 - checkInPopupView(el[0]) ? scale : 0) + (extraHeight || 0)
self . popupView . element [ 0 ] . parentElement . style . transform = "scale(" + scale + ")" ;
// };
self . popupView . element [ 0 ] . parentElement . style . transformOrigin = "left top" ;
// }
} )
// 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)
// };
// }
} }
BI . createWidget = function ( ) { BI . createWidget = function ( ) {
if ( arguments [ 0 ] && arguments [ 0 ] . element === "body" ) { if ( arguments [ 0 ] && arguments [ 0 ] . element === "body" ) {
arguments [ 0 ] . element = wrapp er; arguments [ 0 ] . element = fixedContain er;
} }
return injectCreate . apply ( this , arguments ) ; return injectCreate . apply ( this , arguments ) ;
} ; } ;
// document.body.onmousedown = scaleFixed;
BI . Widget . registerRenderEngine ( {
createElement : function ( widget ) {
if ( widget === "body" ) {
return BI . $ ( wrapper ) ;
}
return originalRender . createElement ( widget ) ;
} ,
createFragment : function ( ) {
return originalRender . createFragment ( ) ;
}
} ) ;
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)' ) .
addListener ( selectHandler ) ; addListener ( selectHandler ) ;
@ -289,16 +336,19 @@
jQuery . fn . _ _isMouseInBounds _ _ = injectMouseInBounds ; jQuery . fn . _ _isMouseInBounds _ _ = injectMouseInBounds ;
jQuery . fn . offset = injectOffset ; jQuery . fn . offset = injectOffset ;
jQuery . event . fix = injectEventFix ; jQuery . event . fix = injectEventFix ;
// jQuery.fn.bounds = injectBounds;
if ( BI . isIE ( ) ) { if ( BI . isIE ( ) ) {
BI . Combo . prototype . adjustHeight = adjustHeight ; BI . Combo . prototype . adjustHeight = adjustHeight ;
BI . Tooltips . show = injectToolTipShow ; BI . Tooltips . show = injectToolTipShow ;
BI . Bubbles . show = injectBubblesShow ; BI . Bubbles . show = injectBubblesShow ;
// jQuery.fn.outerWidth = injectOuterWidth;
// jQuery.fn.outerHeight = injectOuterHeight;
} }
BI . createWidget = injectCreate ; BI . createWidget = injectCreate ;
// Popovers
BI . Popovers = new BI . PopoverController ( ) ;
BI . Widget . registerRenderEngine ( originalRender ) ;
BI . Searcher . prototype . _assertPopupView = injectSearch ;
document . body . onmousedown = null ; document . body . onmousedown = null ;
window . removeEventListener ( 'resize' , updateScale ) ; window . removeEventListener ( 'resize' , updateScale ) ;
window . matchMedia && window . matchMedia ( 'screen and (min-resolution: 2dppx)' ) . window . matchMedia && window . matchMedia ( 'screen and (min-resolution: 2dppx)' ) .
@ -307,7 +357,7 @@
var selectHandler = BI . debounce ( function ( ) { var selectHandler = BI . debounce ( function ( ) {
selected && prepareEnv ( ) ; selected && prepareEnv ( ) ;
selected ? transformScale ( ) : removeScale ( ) ; selected ? transformScale ( globalScaleRatio ) : removeScale ( ) ;
! selected && restoreEnv ( ) ; ! selected && restoreEnv ( ) ;
} , 30 ) ; } , 30 ) ;
@ -331,30 +381,6 @@
} }
} }
injectMouseMoveTracker ( ) ; 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 = "";
// }
// })
// }
// }
selectHandler ( ) ; selectHandler ( ) ;
BI . config ( "bi.constant.dashboard.toolbar.left.items" , function ( config ) { BI . config ( "bi.constant.dashboard.toolbar.left.items" , function ( config ) {
@ -369,6 +395,119 @@
selectHandler ( ) ; selectHandler ( ) ;
} }
} ] } ]
} , {
type : 'bi.text_value_combo' ,
text : '自定义缩放比例' ,
width : 120 ,
value : globalScaleRatio ,
items : [
{
text : '自动' ,
value : null ,
lgap : 10 ,
} ,
{
text : '50%' ,
value : 0.5 ,
lgap : 10 ,
} ,
{
text : '60%' ,
value : 0.6 ,
lgap : 10 ,
} ,
{
text : '70%' ,
value : 0.7 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '80%' ,
value : 0.8 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '90%' ,
value : 0.9 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '100%' ,
value : 1.0 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '110%' ,
value : 1.1 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '120%' ,
value : 1.2 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '130%' ,
value : 1.3 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '140%' ,
value : 1.4 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '150%' ,
value : 1.5 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '160%' ,
value : 1.6 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '170%' ,
value : 1.7 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '180%' ,
value : 1.8 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '190%' ,
value : 1.9 ,
lgap : 10 ,
} ,
{
lgap : 10 ,
text : '200%' ,
value : 2.0 ,
lgap : 10 ,
} ,
] ,
listeners : [ {
eventName : "EVENT_CHANGE" ,
action : function ( v ) {
BI . Cache . setItem ( 'scaleRatio' , v ) ;
globalScaleRatio = v ;
selectHandler ( ) ;
}
} ] ,
} ] ) } ] )
} ) ; } ) ;
} ( ) ) ; } ( ) ) ;
fay
fay
windy