123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345 |
- $(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);
|