dd6a6b8fa44fab0972cfd9882dcf98f7729b2f14.svn-base 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345
  1. $(function() {
  2. 'use strict';
  3. var cl = BWA.ChartLayout = function(options) {
  4. options = options || {};
  5. if (!options.divs) {
  6. throw new Error('needs ids in ChartLayout.');
  7. }
  8. this.initialized = false;
  9. this.divs = options.divs;
  10. this.fullscreenElement = {
  11. divInfo: null,
  12. width: null,
  13. chartSize: null,
  14. height: null,
  15. chartDataSource: null
  16. };
  17. this.multiViewOptions = options.multiViewOptions || {
  18. viewIndex: ko.observable(0),
  19. viewCount: 0,
  20. };
  21. };
  22. var sideOverlayVisible = ko.observable(false);
  23. var commonOverlayOptions = {
  24. width: 80,
  25. height: 100,
  26. shading: false,
  27. animation: {
  28. show: { type: "fade", duration: 150, from: 0, to: 1 },
  29. hide: { type: "fade", duration: 150, from: 1, to: 0 }
  30. }
  31. };
  32. cl.Paging = {
  33. _adapter: null,
  34. _viewIndex: null,
  35. _viewCount: null,
  36. setAdapter: function( chartLayout ) {
  37. this._adapter = chartLayout;
  38. if (_.isNull(this._adapter)) {
  39. this._viewIndex = null;
  40. this._viewCount = null;
  41. this.sideOverlayVisible(false);
  42. }
  43. else {
  44. this._viewIndex = chartLayout.multiViewOptions.viewIndex;
  45. this._viewCount = chartLayout.multiViewOptions.viewCount;
  46. this.sideOverlayVisible(true);
  47. }
  48. },
  49. sideOverlayVisible: sideOverlayVisible,
  50. leftNavigationOverlayOptions: $.extend({
  51. visible: sideOverlayVisible,
  52. position: ko.observable()
  53. }, commonOverlayOptions ),
  54. hideNextButton: ko.observable( false ),
  55. hidePrevButton: ko.observable( false ),
  56. rightNavigationOverlayOptions: $.extend({
  57. visible: sideOverlayVisible,
  58. position: ko.observable()
  59. }, commonOverlayOptions ),
  60. onClickPrevButton: function() {
  61. var paging = BWA.ChartLayout.Paging;
  62. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  63. return;
  64. }
  65. var index = paging._viewIndex() - 1;
  66. if (index < 0) {
  67. return;
  68. }
  69. paging._viewIndex(index);
  70. paging.enableButtons();
  71. },
  72. onClickRightButton: function() {
  73. var paging = BWA.ChartLayout.Paging;
  74. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  75. return;
  76. }
  77. var index = paging._viewIndex() + 1;
  78. if (paging._viewCount <= index) {
  79. return;
  80. }
  81. paging._viewIndex(index);
  82. paging.enableButtons();
  83. },
  84. enableButtons: function() {
  85. var paging = BWA.ChartLayout.Paging;
  86. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  87. return;
  88. }
  89. paging.hidePrevButton(false);
  90. paging.hideNextButton(false);
  91. if (paging._viewIndex() === 0) {
  92. paging.hidePrevButton(true);
  93. }
  94. if (paging._viewIndex() === paging._viewCount - 1) {
  95. paging.hideNextButton(true);
  96. }
  97. },
  98. leftNavigationOverlayButtonOptions: {
  99. icon: 'arrowleft',
  100. width: '100%',
  101. height: '100%'
  102. },
  103. rightNavigationOverlayButtonOptions: {
  104. icon: 'arrowright',
  105. width: '100%',
  106. height: '100%'
  107. }
  108. };
  109. cl.prototype.initialize = function() {
  110. if (this.initialized === true) {
  111. return;
  112. }
  113. console.log('initialize');
  114. var self = this;
  115. $.each(self.divs, function(i, e) {
  116. (function(divInfo) {
  117. $(['#', divInfo.id].join('')).dblclick(function(event) {
  118. self.toggleFullScreenSelector(divInfo);
  119. event.preventDefault();
  120. return false;
  121. });
  122. })(e);
  123. });
  124. this.initialized = true;
  125. };
  126. cl.prototype.onShown = function() {
  127. var paging = BWA.ChartLayout.Paging;
  128. paging.setAdapter(this);
  129. paging.leftNavigationOverlayOptions.position({ my: 'right',at: 'left',of: $('#mainContents'),offset: '-20 -30' });
  130. paging.rightNavigationOverlayOptions.position({ my: 'left',at: 'right',of: $('#mainContents'),offset: '20 -30' });
  131. if (this.multiViewOptions.count <= 1) {
  132. paging.hidePrevButton(true);
  133. paging.hideNextButton(true);
  134. paging.sideOverlayVisible(false);
  135. }
  136. else {
  137. paging.sideOverlayVisible(true);
  138. }
  139. paging.enableButtons();
  140. };
  141. cl.prototype.onHidden = function() {
  142. var paging = BWA.ChartLayout.Paging;
  143. paging.setAdapter(null);
  144. };
  145. cl.prototype.getChartInstance = function(divInfo) {
  146. var chart = null;
  147. var chartElement = _.isString(divInfo.chartId) ? $(['#', divInfo.chartId].join('')) : null;
  148. if (chartElement) {
  149. chart = chartElement[divInfo.widgetChartName || 'dxChart']('instance');
  150. }
  151. return chart;
  152. }
  153. cl.prototype.toggleFullScreenSelector = function(divInfo) {
  154. var self = this;
  155. console.log(divInfo);
  156. var jqDiv = $(['#', divInfo.id].join(''));
  157. var chart = this.getChartInstance(divInfo);
  158. if (_.isNull(chart)) {
  159. return;
  160. }
  161. var renderOptions = {
  162. force: true,
  163. animate: true,
  164. asyncSeriesRendering: false
  165. };
  166. if (this.fullscreenElement.divInfo === null) {
  167. this.fullscreenElement.width = jqDiv.css('width');
  168. this.fullscreenElement.height = jqDiv.css('height');
  169. this.fullscreenElement.divInfo = divInfo;
  170. if (_.isNull(chart) === false) {
  171. this.fullscreenElement.chartSize = chart.getSize();
  172. chart.option('animation', {
  173. duration: 200,
  174. //enabled: false
  175. });
  176. }
  177. var promises = [];
  178. $.each(self.divs, function(i, div) {
  179. if (divInfo.id !== div.id) {
  180. var jq = $(['#', div.id].join(''));
  181. var p = jq.animate({
  182. opacity: 0
  183. }, {
  184. duration: 150,
  185. }).promise();
  186. promises.push(p);
  187. }
  188. });
  189. $.when.apply(this, promises).done(function() {
  190. var tempPosition = {
  191. marginLeft: jqDiv.css('marginLeft'),
  192. marginTop: jqDiv.css('marginTop')
  193. }
  194. var offset = jqDiv.offset();
  195. var parentOffset = jqDiv.parent().offset();
  196. var duration = 100;
  197. if (_.isEqual(offset, parentOffset)) {
  198. duration = 0;
  199. }
  200. jqDiv.animate({
  201. marginLeft: parentOffset.left - offset.left,
  202. marginTop: parentOffset.top - offset.top
  203. }, {
  204. duration: duration,
  205. complete: function() {
  206. $.each(self.divs, function(i, div) {
  207. if (divInfo.id !== div.id) {
  208. $(['#', div.id].join('')).css('display', 'none');
  209. }
  210. });
  211. jqDiv.css($.extend(tempPosition, {
  212. 'width': '100%',
  213. 'height': '100%',
  214. }));
  215. if (_.isNull(chart) === false) chart.render(renderOptions);
  216. }
  217. });
  218. });
  219. console.log(this.fullscreenElement);
  220. }
  221. else {
  222. jqDiv.css({
  223. 'width': self.fullscreenElement.width,
  224. 'height': self.fullscreenElement.height
  225. });
  226. if (_.isNull(chart) === false) chart.render(renderOptions);
  227. $.each(self.divs, function(i, div) {
  228. if (self.fullscreenElement.id !== div.id) {
  229. var jq = $(['#', div.id].join(''));
  230. jq.css('display', 'inline');
  231. jq.animate({
  232. opacity: 1
  233. }, {
  234. duration: 400,
  235. done: function() {
  236. var otherChart = self.getChartInstance(div);
  237. if (_.isNull(otherChart)) {
  238. return;
  239. }
  240. otherChart.render({
  241. force: true,
  242. animate: false,
  243. asyncSeriesRendering: false
  244. });
  245. }
  246. });
  247. }
  248. });
  249. this.fullscreenElement.divInfo = null;
  250. }
  251. }
  252. });
  253. //jqDiv.animate({
  254. // width: '100%',
  255. // height: '100%'
  256. // }, {
  257. // easing: 'easeOutQuart',
  258. // duration: 500,
  259. // progress: function() {
  260. // chart._render();
  261. // },
  262. // complete: function() {
  263. // jqDiv.css('width', '100%');
  264. // jqDiv.css('height', '100%');
  265. // }
  266. // }
  267. //);
  268. //jqDiv.animate(
  269. // _.pick( this.fullscreenElement, 'width', 'height' ),
  270. // {
  271. // easing: 'easeOutQuart',
  272. // duration: 0,
  273. // progress: function() {
  274. // chart._render();
  275. // },
  276. // complete: function() {
  277. // jChart.css('width', self.fullscreenElement.width);
  278. // jChart.css('height', self.fullscreenElement.height);
  279. // $.each(self.divs, function(i, div) {
  280. // if (self.fullscreenElement.id !== div.id) {
  281. // var jq = $(['#', div.id].join(''));
  282. // jq.css('display', 'inline');
  283. // jq.animate({
  284. // opacity: 1
  285. // }, {
  286. // duration: 400,
  287. // done: function() {
  288. // }
  289. // });
  290. // }
  291. // });
  292. // }
  293. // }
  294. //);
  295. //jChart.css('width', this.fullscreenElement.width);
  296. //jChart.css('height', this.fullscreenElement.height);