3ca48bb8dae2d490c4b2d3617636a9ed3ae99ca0.svn-base 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477
  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. //hcLee 2015 07 20 V14.1-V15.1 배열이 필요, 만일 2개 이상의 화면을 가진 멀티뷰어이면 이배열 확장 필요함.
  11. //현재 IBEMS의 경우 2개 이상인 경우 없음.
  12. this.fullscreenElement = [{
  13. divInfo: null,
  14. width: null,
  15. chartSize: null,
  16. height: null,
  17. chartDataSource: null,
  18. //index:0,
  19. },
  20. {
  21. divInfo: null,
  22. width: null,
  23. chartSize: null,
  24. height: null,
  25. chartDataSource: null,
  26. //index:0,
  27. },
  28. {
  29. divInfo: null,
  30. width: null,
  31. chartSize: null,
  32. height: null,
  33. chartDataSource: null,
  34. //index:0,
  35. },
  36. {
  37. divInfo: null,
  38. width: null,
  39. chartSize: null,
  40. height: null,
  41. chartDataSource: null,
  42. //index:0,
  43. },
  44. {
  45. divInfo: null,
  46. width: null,
  47. chartSize: null,
  48. height: null,
  49. chartDataSource: null,
  50. //index:0,
  51. },
  52. ];
  53. this.multiViewOptions = options.multiViewOptions || {
  54. viewIndex: ko.observable(0),
  55. viewCount: 0,
  56. PageChanged: options.multiViewOptions.PageChanged, //hcLee 2015 07 20 V14.1-V15.1
  57. };
  58. };
  59. var sideOverlayVisible = ko.observable(false);
  60. var PageHistory= [];
  61. var commonOverlayOptions = {
  62. width: 80,
  63. height: 100,
  64. shading: false,
  65. //hoverStateEnabled:true,
  66. animation: {
  67. show: { type: "fade", duration: 150, from: 0, to: 1 },
  68. hide: { type: "fade", duration: 150, from: 1, to: 0 }
  69. }
  70. };
  71. cl.Paging = {
  72. _adapter: null,
  73. _viewIndex: null,
  74. _viewCount: null,
  75. setAdapter: function( chartLayout ) {
  76. this._adapter = chartLayout;
  77. if (_.isNull(this._adapter)) {
  78. this._viewIndex = null;
  79. this._viewCount = null;
  80. this.sideOverlayVisible(false);
  81. }
  82. else {
  83. this._viewIndex = chartLayout.multiViewOptions.viewIndex;
  84. this._viewCount = chartLayout.multiViewOptions.viewCount;
  85. this.sideOverlayVisible(true);
  86. }
  87. },
  88. sideOverlayVisible: sideOverlayVisible,
  89. leftNavigationOverlayOptions: $.extend({
  90. visible: sideOverlayVisible,
  91. position: ko.observable()
  92. }, commonOverlayOptions ),
  93. hideNextButton: ko.observable( false ),
  94. hidePrevButton: ko.observable( false ),
  95. rightNavigationOverlayOptions: $.extend({
  96. visible: sideOverlayVisible,
  97. position: ko.observable()
  98. }, commonOverlayOptions ),
  99. onClickPrevButton: function() {
  100. var paging = BWA.ChartLayout.Paging;
  101. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  102. return;
  103. }
  104. var index = paging._viewIndex() - 1;
  105. if (index < 0) {
  106. return;
  107. }
  108. //paging._adapter.fullscreenElement.index = index;
  109. paging._viewIndex(index);
  110. paging.enableButtons();
  111. /*
  112. $.each(paging._adapter.divs, function (i, e) {
  113. (function (divInfo) {
  114. $(['#', divInfo.id].join('')).dblclick(function (event) {
  115. paging._adapter.toggleFullScreenSelector(divInfo);
  116. event.preventDefault();
  117. return false;
  118. });
  119. })(e);
  120. });*/
  121. /*
  122. _.each(PageHistory, function (x) {
  123. if (x == index) return;
  124. });
  125. // 처음이다*/
  126. if (!PageHistory.indexOf(index) < 0) {
  127. PageHistory.push(index);
  128. }
  129. if (paging._adapter.multiViewOptions.PageChanged) paging._adapter.multiViewOptions.PageChanged(); // hcLee 2015 07 20
  130. },
  131. onClickRightButton: function() {
  132. var paging = BWA.ChartLayout.Paging;
  133. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  134. return;
  135. }
  136. var index = paging._viewIndex() + 1;
  137. if (paging._viewCount <= index) {
  138. return;
  139. }
  140. paging._viewIndex(index);
  141. paging.enableButtons();
  142. //paging._adapter.fullscreenElement.index = index;
  143. /*
  144. $.each(paging._adapter.divs, function (i, e) {
  145. (function (divInfo) {
  146. $(['#', divInfo.id].join('')).dblclick(function (event) {
  147. paging._adapter.toggleFullScreenSelector(divInfo);
  148. event.preventDefault();
  149. return false;
  150. });
  151. })(e);
  152. });*/
  153. //hcLee 2015 07 20 V14.1-V15.1 시작
  154. /*var first = true;
  155. _.each(PageHistory, function (x) {
  156. if (x == index) first = false;
  157. });
  158. if (first == false) return;*/
  159. // 최초클릭인 경우만 처리
  160. if (!PageHistory.indexOf(index) < 0) {
  161. PageHistory.push(index);
  162. }
  163. if (paging._adapter.multiViewOptions.PageChanged) paging._adapter.multiViewOptions.PageChanged(); // hcLee 2015 07 20
  164. $.each(paging._adapter.divs[index], function (i, e) {
  165. (function (divInfo) {
  166. var div = $(['#', divInfo.id].join(''));
  167. div.unbind('dblclick'); //jhLee 2016 07 12
  168. div.dblclick(function (event) {
  169. paging._adapter.toggleFullScreenSelector(divInfo, index);
  170. event.preventDefault();
  171. return false;
  172. });
  173. })(e);
  174. });
  175. //hcLee 2015 07 20 V14.1-V15.1 끝
  176. },
  177. enableButtons: function() {
  178. var paging = BWA.ChartLayout.Paging;
  179. if (_.isNull(paging._viewIndex) || _.isNull(paging._viewCount)) {
  180. return;
  181. }
  182. paging.hidePrevButton(false);
  183. paging.hideNextButton(false);
  184. if (paging._viewIndex() === 0) {
  185. paging.hidePrevButton(true);
  186. }
  187. if (paging._viewIndex() === paging._viewCount - 1) {
  188. paging.hideNextButton(true);
  189. }
  190. },
  191. leftNavigationOverlayButtonOptions: {
  192. icon: 'arrowleft',
  193. width: '100%',
  194. height: '100%'
  195. },
  196. rightNavigationOverlayButtonOptions: {
  197. icon: 'arrowright',
  198. width: '100%',
  199. height: '100%'
  200. }
  201. };
  202. cl.prototype.initialize = function () {
  203. if (this.initialized === true) {
  204. return;
  205. }
  206. //var paging = BWA.ChartLayout.Paging;
  207. console.log('initialize');
  208. var self = this;
  209. $.each(self.divs[0], function (i, e) { //hcLee 2015 07 20 V14.1-V15.1
  210. (function (divInfo) {
  211. var div = $(['#', divInfo.id].join(''));
  212. div.unbind('dblclick'); //jhLee 2016 07 12
  213. div.dblclick(function (event) {
  214. self.toggleFullScreenSelector(divInfo, 0);
  215. event.preventDefault();
  216. return false;
  217. });
  218. })(e);
  219. });
  220. /*
  221. $.each(self.divs[1], function (i, e) { //hcLee 2015 07 20 V14.1-V15.1
  222. (function (divInfo) {
  223. var div = $(['#', divInfo.id].join(''));
  224. div.unbind('dblclick'); //jhLee 2016 07 12
  225. div.dblclick(function (event) {
  226. self.toggleFullScreenSelector(divInfo, 1);
  227. event.preventDefault();
  228. return false;
  229. });
  230. })(e);
  231. });
  232. $.each(self.divs[2], function (i, e) { //hcLee 2015 07 20 V14.1-V15.1
  233. (function (divInfo) {
  234. var div = $(['#', divInfo.id].join(''));
  235. div.unbind('dblclick'); //jhLee 2016 07 12
  236. div.dblclick(function (event) {
  237. self.toggleFullScreenSelector(divInfo, 2);
  238. event.preventDefault();
  239. return false;
  240. });
  241. })(e);
  242. });*/
  243. this.initialized = true;
  244. };
  245. cl.prototype.onShown = function() {
  246. var paging = BWA.ChartLayout.Paging;
  247. paging.setAdapter(this);
  248. paging.leftNavigationOverlayOptions.position({ my: 'right', at: 'left', of: $('#mainContents'), offset: '-20 -30' });
  249. paging.rightNavigationOverlayOptions.position({ my: 'left', at: 'right', of: $('#mainContents'), offset: '20 -30' });
  250. if (this.multiViewOptions.viewCount <= 1) {
  251. paging.hidePrevButton(true);
  252. paging.hideNextButton(true);
  253. paging.sideOverlayVisible(false);
  254. }
  255. else {
  256. paging.sideOverlayVisible(true);
  257. }
  258. if (this.multiViewOptions.viewCount > 1)
  259. paging.enableButtons();
  260. };
  261. cl.prototype.onHidden = function() {
  262. var paging = BWA.ChartLayout.Paging;
  263. paging.setAdapter(null);
  264. };
  265. cl.prototype.getChartInstance = function(divInfo) {
  266. var chart = null;
  267. var chartElement = _.isString(divInfo.chartId) ? $(['#', divInfo.chartId].join('')) : null;
  268. if (chartElement) {
  269. chart = chartElement[divInfo.widgetChartName || 'dxChart']('instance');
  270. }
  271. return chart;
  272. }
  273. cl.prototype.toggleFullScreenSelector = function(divInfo, index) {
  274. var self = this;
  275. console.log(divInfo);
  276. var jqDiv = $(['#', divInfo.id].join(''));
  277. var chart = this.getChartInstance(divInfo);
  278. if (_.isNull(chart)) {
  279. return;
  280. }
  281. /*if (this.fullscreenElement.index != index) {
  282. //this.fullscreenElement.index = index;
  283. return;
  284. }*/
  285. var renderOptions = {
  286. force: true,
  287. animate: true,
  288. asyncSeriesRendering: false
  289. };
  290. if (this.fullscreenElement[index].divInfo === null) { //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  291. this.fullscreenElement[index].width = jqDiv.css('width'); //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  292. this.fullscreenElement[index].height = jqDiv.css('height');//hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  293. this.fullscreenElement[index].divInfo = divInfo;//hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  294. if (_.isNull(chart) === false) {
  295. this.fullscreenElement[index].chartSize = chart.getSize();//hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  296. chart.option('animation', {
  297. duration: 200,
  298. //enabled: false
  299. });
  300. }
  301. var promises = [];
  302. $.each(self.divs[index], function (i, div) { //hcLee 2015 07 20 V14.1-V15.1 divs[index]
  303. if (divInfo.id !== div.id) {
  304. var jq = $(['#', div.id].join(''));
  305. var p = jq.animate({
  306. opacity: 0
  307. }, {
  308. duration: 150,
  309. }).promise();
  310. promises.push(p);
  311. }
  312. });
  313. $.when.apply(this, promises).done(function() {
  314. var tempPosition = {
  315. marginLeft: jqDiv.css('marginLeft'),
  316. marginTop: jqDiv.css('marginTop')
  317. }
  318. var offset = jqDiv.offset();
  319. var parentOffset = jqDiv.parent().offset();
  320. var duration = 100;
  321. if (_.isEqual(offset, parentOffset)) {
  322. duration = 0;
  323. }
  324. jqDiv.animate({
  325. marginLeft: parentOffset.left - offset.left,
  326. marginTop: parentOffset.top - offset.top
  327. }, {
  328. duration: duration,
  329. complete: function() {
  330. $.each(self.divs[index], function (i, div) { //hcLee 2015 07 20 V14.1-V15.1 divs[index]
  331. if (divInfo.id !== div.id) {
  332. $(['#', div.id].join('')).css('display', 'none');
  333. }
  334. });
  335. jqDiv.css($.extend(tempPosition, {
  336. 'width': '100%',
  337. 'height': '100%',
  338. }));
  339. if (_.isNull(chart) === false) chart.render(renderOptions);
  340. }
  341. });
  342. });
  343. console.log(this.fullscreenElement[index]); //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  344. }
  345. else {
  346. jqDiv.css({
  347. 'width': self.fullscreenElement[index].width, //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  348. 'height': self.fullscreenElement[index].height //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  349. });
  350. if (_.isNull(chart) === false) chart.render(renderOptions);
  351. $.each(self.divs[index], function (i, div) { //hcLee 2015 07 20 V14.1-V15.1 divs[index]
  352. if (self.fullscreenElement[index].id !== div.id) { //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  353. var jq = $(['#', div.id].join(''));
  354. jq.css('display', 'inline');
  355. jq.animate({
  356. opacity: 1
  357. }, {
  358. duration: 400,
  359. done: function() {
  360. var otherChart = self.getChartInstance(div);
  361. if (_.isNull(otherChart)) {
  362. return;
  363. }
  364. otherChart.render({
  365. force: true,
  366. animate: false,
  367. asyncSeriesRendering: false
  368. });
  369. }
  370. });
  371. }
  372. });
  373. this.fullscreenElement[index].divInfo = null; //hcLee 2015 07 20 V14.1-V15.1 fullscreenElement[index]
  374. }
  375. }
  376. });
  377. //jqDiv.animate({
  378. // width: '100%',
  379. // height: '100%'
  380. // }, {
  381. // easing: 'easeOutQuart',
  382. // duration: 500,
  383. // progress: function() {
  384. // chart._render();
  385. // },
  386. // complete: function() {
  387. // jqDiv.css('width', '100%');
  388. // jqDiv.css('height', '100%');
  389. // }
  390. // }
  391. //);
  392. //jqDiv.animate(
  393. // _.pick( this.fullscreenElement, 'width', 'height' ),
  394. // {
  395. // easing: 'easeOutQuart',
  396. // duration: 0,
  397. // progress: function() {
  398. // chart._render();
  399. // },
  400. // complete: function() {
  401. // jChart.css('width', self.fullscreenElement.width);
  402. // jChart.css('height', self.fullscreenElement.height);
  403. // $.each(self.divs, function(i, div) {
  404. // if (self.fullscreenElement.id !== div.id) {
  405. // var jq = $(['#', div.id].join(''));
  406. // jq.css('display', 'inline');
  407. // jq.animate({
  408. // opacity: 1
  409. // }, {
  410. // duration: 400,
  411. // done: function() {
  412. // }
  413. // });
  414. // }
  415. // });
  416. // }
  417. // }
  418. //);
  419. //jChart.css('width', this.fullscreenElement.width);
  420. //jChart.css('height', this.fullscreenElement.height);