$(function() { 'use strict'; var cl = BWA.ChartLayout = function(options) { options = options || {}; if (!options.divs) { throw new Error('needs ids in ChartLayout.'); } this.initialized = false; this.divs = options.divs; this.fullscreenElement = { divInfo: null, width: null, chartSize: null, height: null, chartDataSource: null }; this.multiViewOptions = options.multiViewOptions || { viewIndex: ko.observable(0), viewCount: 0, }; }; var sideOverlayVisible = ko.observable(false); var commonOverlayOptions = { width: 80, height: 100, shading: false, animation: { show: { type: "fade", duration: 150, from: 0, to: 1 }, hide: { type: "fade", duration: 150, from: 1, to: 0 } } }; cl.Paging = { _adapter: null, _viewIndex: null, _viewCount: null, setAdapter: function( chartLayout ) { this._adapter = chartLayout; if (_.isNull(this._adapter)) { this._viewIndex = null; this._viewCount = null; this.sideOverlayVisible(false); } else { this._viewIndex = chartLayout.multiViewOptions.viewIndex; this._viewCount = chartLayout.multiViewOptions.viewCount; this.sideOverlayVisible(true); } }, sideOverlayVisible: sideOverlayVisible, leftNavigationOverlayOptions: $.extend({ visible: sideOverlayVisible, position: ko.observable() }, commonOverlayOptions ), hideNextButton: ko.observable( false ), hidePrevButton: ko.observable( false ), rightNavigationOverlayOptions: $.extend({ visible: sideOverlayVisible, position: ko.observable() }, commonOverlayOptions ), onClickPrevButton: function() { var paging = BWA.ChartLayout.Paging; if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) { return; } var index = paging._viewIndex() - 1; if (index < 0) { return; } paging._viewIndex(index); paging.enableButtons(); }, onClickRightButton: function() { var paging = BWA.ChartLayout.Paging; if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) { return; } var index = paging._viewIndex() + 1; if (paging._viewCount <= index) { return; } paging._viewIndex(index); paging.enableButtons(); }, enableButtons: function() { var paging = BWA.ChartLayout.Paging; if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) { return; } paging.hidePrevButton(false); paging.hideNextButton(false); if (paging._viewIndex() === 0) { paging.hidePrevButton(true); } if (paging._viewIndex() === paging._viewCount - 1) { paging.hideNextButton(true); } }, leftNavigationOverlayButtonOptions: { icon: 'arrowleft', width: '100%', height: '100%' }, rightNavigationOverlayButtonOptions: { icon: 'arrowright', width: '100%', height: '100%' } }; cl.prototype.initialize = function() { if (this.initialized === true) { return; } console.log('initialize'); var self = this; $.each(self.divs, function(i, e) { (function(divInfo) { $(['#', divInfo.id].join('')).dblclick(function(event) { self.toggleFullScreenSelector(divInfo); event.preventDefault(); return false; }); })(e); }); this.initialized = true; }; cl.prototype.onShown = function() { var paging = BWA.ChartLayout.Paging; paging.setAdapter(this); paging.leftNavigationOverlayOptions.position({ my: 'right',at: 'left',of: $('#mainContents'),offset: '-20 -30' }); paging.rightNavigationOverlayOptions.position({ my: 'left',at: 'right',of: $('#mainContents'),offset: '20 -30' }); if (this.multiViewOptions.count <= 1) { paging.hidePrevButton(true); paging.hideNextButton(true); paging.sideOverlayVisible(false); } else { paging.sideOverlayVisible(true); } paging.enableButtons(); }; cl.prototype.onHidden = function() { var paging = BWA.ChartLayout.Paging; paging.setAdapter(null); }; cl.prototype.getChartInstance = function(divInfo) { var chart = null; var chartElement = _.isString(divInfo.chartId) ? $(['#', divInfo.chartId].join('')) : null; if (chartElement) { chart = chartElement[divInfo.widgetChartName || 'dxChart']('instance'); } return chart; } cl.prototype.toggleFullScreenSelector = function(divInfo) { var self = this; console.log(divInfo); var jqDiv = $(['#', divInfo.id].join('')); var chart = this.getChartInstance(divInfo); if (_.isNull(chart)) { return; } var renderOptions = { force: true, animate: true, asyncSeriesRendering: false }; if (this.fullscreenElement.divInfo === null) { this.fullscreenElement.width = jqDiv.css('width'); this.fullscreenElement.height = jqDiv.css('height'); this.fullscreenElement.divInfo = divInfo; if (_.isNull(chart) === false) { this.fullscreenElement.chartSize = chart.getSize(); chart.option('animation', { duration: 200, //enabled: false }); } var promises = []; $.each(self.divs, function(i, div) { if (divInfo.id !== div.id) { var jq = $(['#', div.id].join('')); var p = jq.animate({ opacity: 0 }, { duration: 150, }).promise(); promises.push(p); } }); $.when.apply(this, promises).done(function() { var tempPosition = { marginLeft: jqDiv.css('marginLeft'), marginTop: jqDiv.css('marginTop') } var offset = jqDiv.offset(); var parentOffset = jqDiv.parent().offset(); var duration = 100; if (_.isEqual(offset, parentOffset)) { duration = 0; } jqDiv.animate({ marginLeft: parentOffset.left - offset.left, marginTop: parentOffset.top - offset.top }, { duration: duration, complete: function() { $.each(self.divs, function(i, div) { if (divInfo.id !== div.id) { $(['#', div.id].join('')).css('display', 'none'); } }); jqDiv.css($.extend(tempPosition, { 'width': '100%', 'height': '100%', })); if (_.isNull(chart) === false) chart.render(renderOptions); } }); }); console.log(this.fullscreenElement); } else { jqDiv.css({ 'width': self.fullscreenElement.width, 'height': self.fullscreenElement.height }); if (_.isNull(chart) === false) chart.render(renderOptions); $.each(self.divs, function(i, div) { if (self.fullscreenElement.id !== div.id) { var jq = $(['#', div.id].join('')); jq.css('display', 'inline'); jq.animate({ opacity: 1 }, { duration: 400, done: function() { var otherChart = self.getChartInstance(div); if (_.isNull(otherChart)) { return; } otherChart.render({ force: true, animate: false, asyncSeriesRendering: false }); } }); } }); this.fullscreenElement.divInfo = null; } } }); //jqDiv.animate({ // width: '100%', // height: '100%' // }, { // easing: 'easeOutQuart', // duration: 500, // progress: function() { // chart._render(); // }, // complete: function() { // jqDiv.css('width', '100%'); // jqDiv.css('height', '100%'); // } // } //); //jqDiv.animate( // _.pick( this.fullscreenElement, 'width', 'height' ), // { // easing: 'easeOutQuart', // duration: 0, // progress: function() { // chart._render(); // }, // complete: function() { // jChart.css('width', self.fullscreenElement.width); // jChart.css('height', self.fullscreenElement.height); // $.each(self.divs, function(i, div) { // if (self.fullscreenElement.id !== div.id) { // var jq = $(['#', div.id].join('')); // jq.css('display', 'inline'); // jq.animate({ // opacity: 1 // }, { // duration: 400, // done: function() { // } // }); // } // }); // } // } //); //jChart.css('width', this.fullscreenElement.width); //jChart.css('height', this.fullscreenElement.height);