Window.js 37 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145
  1. MWF.require("MWF.widget.Dialog", null, false);
  2. MWF.xDesktop.Window = new Class({
  3. Extends: MWF.widget.Dialog,
  4. Implements: [Options, Events],
  5. options: {
  6. "style": "default",
  7. "title": "window",
  8. "width": "800",
  9. "height": "600",
  10. "top": "10",
  11. "left": "10",
  12. "fromTop": "0",
  13. "fromLeft": "0",
  14. "mark": false,
  15. "html": "",
  16. "text": "",
  17. "url": "",
  18. "content": null,
  19. "isMax": true,
  20. "isClose": true,
  21. "isResize": true,
  22. "isMove": true,
  23. "buttons": null,
  24. "buttonList": null
  25. },
  26. initialize: function(app, options){
  27. var position = layout.desktop.desktopNode.getPosition();
  28. // var size = layout.desktop.desktopNode.getSize();
  29. this.options.top = parseFloat(this.options.top)+position.y;
  30. this.options.fromTop = parseFloat(this.options.fromTop)+position.y;
  31. this.app = app;
  32. this.parent(options);
  33. this.isHide = false;
  34. this.isMax = false;
  35. },
  36. // _loadCss: function(){
  37. // if (this.app.windowCss){
  38. // this.css = this.app.windowCss;
  39. // }else{
  40. // var key = encodeURIComponent(this.cssPath);
  41. // if (!reload && MWF.widget.css[key]){
  42. // this.css = MWF.widget.css[key];
  43. // }else{
  44. // this.cssPath = (this.cssPath.indexOf("?")!=-1) ? this.cssPath+"&v="+COMMON.version : this.cssPath+"?v="+COMMON.version;
  45. // var r = new Request.JSON({
  46. // url: this.cssPath,
  47. // secure: false,
  48. // async: false,
  49. // method: "get",
  50. // noCache: false,
  51. // onSuccess: function(responseJSON, responseText){
  52. // this.css = responseJSON;
  53. // MWF.widget.css[key] = responseJSON;
  54. // }.bind(this),
  55. // onError: function(text, error){
  56. // alert(error + text);
  57. // }
  58. // });
  59. // }
  60. // }
  61. // },
  62. changeStyle: function(){
  63. var obj = this.getNodeStyleStatus();
  64. this.cssPath = MWF.defaultPath+"/widget/$Dialog/"+this.options.style+"/css.wcss";
  65. this._loadCss();
  66. this.getContentUrl();
  67. var request = new Request.HTML({
  68. url: this.contentUrl,
  69. method: "GET",
  70. async: false,
  71. onSuccess: function(responseTree){
  72. var node = responseTree[0];
  73. var title = node.getElement(".MWF_dialod_title");
  74. var titleCenter = node.getElement(".MWF_dialod_title_center");
  75. var titleRefresh = node.getElement(".MWF_dialod_title_refresh");
  76. var titleText = node.getElement(".MWF_dialod_title_text");
  77. var titleAction = node.getElement(".MWF_dialod_title_action");
  78. var under = node.getElement(".MWF_dialod_under");
  79. var content = node.getElement(".MWF_dialod_content");
  80. var bottom = node.getElement(".MWF_dialod_bottom");
  81. var resizeNode = node.getElement(".MWF_dialod_bottom_resize");
  82. var button = node.getElement(".MWF_dialod_button");
  83. if (this.title && title){
  84. this.title.clearStyles();
  85. this.title.set("style", title.get("style"));
  86. }
  87. if (this.titleCenter && titleCenter){
  88. this.titleCenter.clearStyles();
  89. this.titleCenter.set("style", titleCenter.get("style"));
  90. }
  91. if (this.titleRefresh && titleRefresh){
  92. this.titleRefresh.clearStyles();
  93. this.titleRefresh.set("style", titleRefresh.get("style"));
  94. }
  95. if (this.titleText && titleText){
  96. this.titleText.clearStyles();
  97. this.titleText.set("style", titleText.get("style"));
  98. }
  99. if (this.titleAction && titleAction){
  100. this.titleAction.clearStyles();
  101. this.titleAction.set("style", titleAction.get("style"));
  102. }
  103. if (this.under && under){
  104. this.under.clearStyles();
  105. this.under.set("style", under.get("style"));
  106. }
  107. if (this.content && content){
  108. this.content.clearStyles();
  109. this.content.set("style", content.get("style"));
  110. }
  111. if (this.bottom && bottom){
  112. this.bottom.clearStyles();
  113. this.bottom.set("style", bottom.get("style"));
  114. }
  115. if (this.resizeNode && resizeNode){
  116. this.resizeNode.clearStyles();
  117. this.resizeNode.set("style", resizeNode.get("style"));
  118. }
  119. if (this.button && button){
  120. this.button.clearStyles();
  121. this.button.set("style", button.get("style"));
  122. }
  123. this.setNodeStyleStatus(obj);
  124. this.node.setStyles(this.css.to);
  125. this.spacer.setStyles(this.css.spacerTo);
  126. if (this.closeActionNode) this.closeActionNode.setStyles(this.css.closeActionNode);
  127. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.maxActionNode);
  128. if (this.minActionNode) this.minActionNode.setStyles(this.css.minActionNode);
  129. if (this.restoreActionNode) this.restoreActionNode.setStyles(this.css.restoreActionNode);
  130. if (this.app == this.app.desktop.currentApp){
  131. this.node.setStyles(this.css.current);
  132. this.spacer.setStyles(this.css.spacerCurrent);
  133. }else{
  134. this.node.setStyles(this.css.uncurrent);
  135. this.spacer.setStyles(this.css.spacerUncurrent);
  136. }
  137. this.setContentSize();
  138. }.bind(this)
  139. });
  140. request.send();
  141. },
  142. setNodeStyleStatus: function(obj){
  143. this.css.to.height = obj.nodeTo.height;
  144. this.css.to.width = obj.nodeTo.width;
  145. this.css.to.top = obj.nodeTo.top;
  146. this.css.to.left = obj.nodeTo.left;
  147. this.css.to["z-index"] = obj.nodeTo["z-index"];
  148. this.css.from.top = obj.nodeFrom.top;
  149. this.css.from.left = obj.nodeFrom.left;
  150. this.css.from["z-index"] = obj.nodeFrom["z-index"];
  151. this.css.spacerTo.height = obj.spacerTo.height;
  152. this.css.spacerTo.width = obj.spacerTo.width;
  153. this.css.spacerTo.top = obj.spacerTo.top;
  154. this.css.spacerTo.left = obj.spacerTo.left;
  155. this.css.spacerTo["z-index"] = obj.spacerTo["z-index"];
  156. this.css.spacerFrom.top = obj.spacerFrom.top;
  157. this.css.spacerFrom.left = obj.spacerFrom.left;
  158. this.css.spacerFrom["z-index"] = obj.spacerFrom["z-index"];
  159. },
  160. getNodeStyleStatus: function(){
  161. return {
  162. "nodeTo": {
  163. "height": this.css.to.height,
  164. "width": this.css.to.width,
  165. "top": this.css.to.top,
  166. "left": this.css.to.left,
  167. "z-index": this.css.to["z-index"]
  168. },
  169. "nodeFrom": {
  170. "top": this.css.from.top,
  171. "left": this.css.from.left,
  172. "z-index": this.css.from["z-index"]
  173. },
  174. "spacerTo": {
  175. "height": this.css.spacerTo.height,
  176. "width": this.css.spacerTo.width,
  177. "top": this.css.spacerTo.top,
  178. "left": this.css.spacerTo.left,
  179. "z-index": this.css.spacerTo["z-index"]
  180. },
  181. "spacerFrom": {
  182. "top": this.css.spacerFrom.top,
  183. "left": this.css.spacerFrom.left,
  184. "z-index": this.css.spacerFrom["z-index"]
  185. }
  186. };
  187. },
  188. reStyle: function(options){
  189. if (options) this.setOptions(options);
  190. var index = null;
  191. if (MWF.xDesktop.zIndexPool) index = MWF.xDesktop.zIndexPool.applyZindex();
  192. this.css.to.height = this.options.height+"px";
  193. this.css.to.width = this.options.width+"px";
  194. this.css.to.top = this.options.top+"px";
  195. this.css.to.left = this.options.left+"px";
  196. // this.css.to.top = this.options.top+"px";
  197. this.css.from.top = this.options.fromTop+"px";
  198. this.css.from.left = this.options.fromLeft+"px";
  199. if (index){
  200. this.css.from["z-index"] = index+1;
  201. this.css.to["z-index"] = index+1;
  202. }
  203. if (this.node) this.node.set("styles", this.css.from);
  204. this.css.spacerTo.height = this.options.height+"px";
  205. this.css.spacerTo.width = this.options.width+"px";
  206. this.css.spacerTo.top = this.options.top+"px";
  207. this.css.spacerTo.left = this.options.left+"px";
  208. // this.css.spacerTo.top = this.options.top+"px";
  209. this.css.spacerFrom.top = this.options.fromTop+"px";
  210. this.css.spacerFrom.left = this.options.fromLeft+"px";
  211. if (index){
  212. this.css.spacerFrom["z-index"] = index;
  213. this.css.spacerTo["z-index"] = index;
  214. }
  215. if (this.spacer) this.spacer.set("styles", this.css.spacerFrom);
  216. },
  217. setCurrent: function(){
  218. if (MWF.xDesktop.zIndexPool){
  219. var index = this.node.getStyle("z-index").toFloat()+1;
  220. if (index < MWF.xDesktop.zIndexPool.zIndex){
  221. var newIndex = MWF.xDesktop.zIndexPool.applyZindex();
  222. this.css.spacerTo["z-index"] = newIndex;
  223. this.css.spacerFrom["z-index"] = newIndex;
  224. // if(this.spacerMorph){
  225. // if (this.spacerMorph.isRunning()){
  226. // this.spacerMorph.chain(function(){
  227. // if (this.spacer) this.spacer.setStyle("z-index", newIndex);
  228. // }.bind(this));
  229. // }else{
  230. if (this.spacer) this.spacer.setStyle("z-index", newIndex);
  231. // }
  232. // }
  233. this.css.to["z-index"] = newIndex+1;
  234. this.css.from["z-index"] = newIndex+1;
  235. // if(this.morph){
  236. // if (this.morph.isRunning()){
  237. // this.morph.chain(function(){
  238. // this.node.setStyle("z-index", newIndex+1);
  239. // }.bind(this));
  240. // }else{
  241. this.node.setStyle("z-index", newIndex+1);
  242. // }
  243. // }
  244. }
  245. }
  246. this.node.setStyles(this.css.current);
  247. if (this.spacer) this.spacer.setStyles(this.css.spacerCurrent);
  248. },
  249. setUncurrent: function(){
  250. this.node.setStyles(this.css.uncurrent);
  251. if (this.spacer) this.spacer.setStyles(this.css.spacerUncurrent);
  252. },
  253. setTitleEvent: function(){
  254. this.node.addEvent("mousedown", function(){
  255. this.app.setCurrent();
  256. }.bind(this));
  257. this.containerDrag = new Drag(this.title, {
  258. "handle": this.title,
  259. "onStart": function(el, e){
  260. this.containerDrag.stop();
  261. var div = this.node.clone(false).inject($(document.body));
  262. var size = this.node.getSize();
  263. div.setStyles({
  264. "opacity": 0.7,
  265. "border": "2px dashed #999",
  266. "z-index": this.node.getStyle("z-index"),
  267. "width": size.x,
  268. "height": size.y,
  269. "background-color": "#CCC",
  270. "position": "absolute"
  271. });
  272. div.position({
  273. relativeTo: this.node,
  274. position: 'upperLeft',
  275. edge: 'upperLeft'
  276. });
  277. var drag = new Drag.Move(div, {
  278. "onStart": function(){
  279. //this.node.setStyle("display", "none");
  280. this.node.fade("out");
  281. this.spacer.fade("out");
  282. }.bind(this),
  283. "onDrop": function(dragging, inObj, e){
  284. this.node.fade("in");
  285. this.spacer.fade(this.css.spacerTo.opacity);
  286. this.node.position({
  287. relativeTo: dragging,
  288. position: 'upperLeft',
  289. edge: 'upperLeft'
  290. });
  291. var p = this.node.getPosition();
  292. this.spacer.setStyles({
  293. "top": p.y,
  294. "left": p.x
  295. });
  296. this.css.spacerTo.left = p.x;
  297. this.css.spacerTo.top = p.y;
  298. this.css.to.left = p.x;
  299. this.css.to.top = p.y;
  300. dragging.destroy();
  301. this.fireEvent("moveDrop", [e]);
  302. }.bind(this),
  303. "onCancel": function(dragging){
  304. dragging.destroy();
  305. drag = null;
  306. }
  307. });
  308. drag.start(e);
  309. }.bind(this)
  310. });
  311. //this.title.addEvent("mousedown", function(e){
  312. //}.bind(this));
  313. //this.containerDrag = new Drag.Move(this.node, {
  314. // "limit": {"x": [null, null], "y": [0, null]},
  315. // "handle": this.title,
  316. // "onDrag": function(){
  317. // var p = this.node.getPosition();
  318. // if (this.spacer){
  319. // this.spacer.setStyles({
  320. // "top": p.y,
  321. // "left": p.x
  322. // });
  323. // this.css.spacerTo.left = p.x;
  324. // this.css.spacerTo.top = p.y;
  325. // };
  326. // this.css.to.left = p.x;
  327. // this.css.to.top = p.y;
  328. // }.bind(this)
  329. //});
  330. if (this.options.isResize){
  331. this.node.makeResizable({
  332. "handle": this.resizeNode || this.bottom,
  333. "limit": {x:[200, null], y:[200, null]},
  334. "onDrag": function(){
  335. var size = this.node.getComputedSize();
  336. if (this.spacer){
  337. this.spacer.setStyles({
  338. "width": size.width,
  339. "height": size.height
  340. });
  341. this.css.spacerTo.width = size.width;
  342. this.css.spacerTo.height = size.height;
  343. }
  344. this.css.to.width = size.width;
  345. this.css.to.height = size.height;
  346. this.setContentSize(size.height, size.width);
  347. this.fireEvent("resize");
  348. }.bind(this),
  349. "onComplete": function(){
  350. this.fireEvent("resizeCompleted");
  351. }.bind(this)
  352. });
  353. }
  354. },
  355. getContentUrl: function(){
  356. if (layout.desktop.windowCss){
  357. this.contentUrl = MWF.defaultPath+"/xDesktop/$Window/desktop_default/dialog.html";
  358. }else{
  359. this.contentUrl = MWF.defaultPath+"/xDesktop/$Window/"+this.options.style+"/dialog.html";
  360. }
  361. },
  362. _loadCss: function(){
  363. if (this.app.desktop.windowCss){
  364. this.css = this.app.desktop.windowCss;
  365. }else{
  366. this.path = MWF.defaultPath+"/xDesktop/$Window/";
  367. this.cssPath = MWF.defaultPath+"/xDesktop/$Window/"+this.options.style+"/css.wcss";
  368. var r = new Request.JSON({
  369. url: this.cssPath,
  370. secure: false,
  371. async: false,
  372. method: "get",
  373. noCache: true,
  374. onSuccess: function(responseJSON, responseText){
  375. this.css = responseJSON;
  376. }.bind(this),
  377. onError: function(text, error){
  378. alert(text);
  379. }
  380. });
  381. r.send();
  382. }
  383. },
  384. getSpacer: function(){
  385. if (!this.spacer){
  386. this.spacer = new Element("div", {
  387. styles: this.css.spacerFrom
  388. }).inject(this.options.container || $(document.body));
  389. }
  390. },
  391. showNoAnimation: function(max, hide){
  392. if (max){
  393. this.showMaxIm();
  394. }else if (hide){
  395. this.showIm();
  396. this.hideIm();
  397. }else{
  398. this.showIm();
  399. }
  400. },
  401. showMaxIm: function(callback){
  402. this.querySetMaxStyle();
  403. this.getSpacer();
  404. this.spacer.setStyle("display", "block");
  405. this.node.setStyle("display", "block");
  406. var size = this.getMaxSize();
  407. var spacerTo = Object.clone(this.css.spacerTo);
  408. var to = Object.clone(this.css.to);
  409. var contentTo = {};
  410. spacerTo.top = size.position.y;
  411. spacerTo.left = size.position.x;
  412. spacerTo.width = size.spacer.x;
  413. spacerTo.height = size.spacer.y;
  414. to.top = size.position.y;
  415. to.left = size.position.x;
  416. to.width = size.node.x;
  417. to.height = size.node.y;
  418. contentTo = size.contentSize;
  419. if (this.fireEvent("queryShow")){
  420. this.fireEvent("queryMax");
  421. this.node.setStyles(to);
  422. this.spacer.setStyles(spacerTo);
  423. this.content.setStyles(contentTo);
  424. if (this.titleText) this.getTitle();
  425. this.isMax = true;
  426. this.isHide = false;
  427. if (this.containerDrag) this.containerDrag.detach();
  428. this.postSetMaxStyle();
  429. if (callback) callback();
  430. this.fireEvent("postShow");
  431. this.fireEvent("postMax");
  432. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.restoreActionNode);
  433. }
  434. },
  435. showIm: function(){
  436. if (this.options.mark) this._markShow();
  437. this.getSpacer();
  438. this.spacer.setStyle("display", "block");
  439. this.node.setStyle("display", "block");
  440. var contentSize = this.getContentSize(this.css.to.height.toFloat(), this.css.to.width.toFloat());
  441. if (this.fireEvent("queryShow")){
  442. this.spacer.setStyles(this.css.spacerTo);
  443. if (this.app.desktop.currentApp!=this.app) this.spacer.setStyles(this.css.spacerUncurrent);
  444. this.content.setStyles(contentSize);
  445. this.node.setStyles(this.css.to);
  446. if (this.titleText) this.getTitle();
  447. this.isHide = false;
  448. if (this.containerDrag) this.containerDrag.attach();
  449. this.fireEvent("postShow");
  450. }
  451. },
  452. show: function(){
  453. if (this.options.mark) this._markShow();
  454. if (!this.morph){
  455. this.morph = new Fx.Morph(this.node, {duration: 100, link: "chain"});
  456. }
  457. this.morph.setOptions({duration: 50});
  458. this.getSpacer();
  459. if (!this.spacerMorph){
  460. this.spacerMorph = new Fx.Morph(this.spacer, {duration: 100, link: "chain"});
  461. }
  462. this.spacerMorph.setOptions({duration: 50});
  463. if (!this.contentMorph){
  464. this.contentMorph = new Fx.Morph(this.content, {duration: 50, link: "chain"});
  465. }
  466. this.contentMorph.setOptions({duration: 50});
  467. this.spacer.setStyle("display", "block");
  468. this.node.setStyle("display", "block");
  469. var contentSize = this.getContentSize(this.css.to.height.toFloat(), this.css.to.width.toFloat());
  470. if (this.fireEvent("queryShow")){
  471. var nodeFinish = false;
  472. var spacerFinish = false;
  473. var contentFinish = false;
  474. this.spacerMorph.start(this.css.spacerTo).chain(function(){
  475. if (this.app.desktop.currentApp!=this.app) this.spacer.setStyles(this.css.spacerUncurrent);
  476. spacerFinish = true;
  477. firePost();
  478. }.bind(this));
  479. this.contentMorph.start(contentSize).chain(function(){
  480. contentFinish = true;
  481. firePost();
  482. }.bind(this));
  483. this.morph.start(this.css.to).chain(function(){
  484. nodeFinish = true;
  485. firePost();
  486. }.bind(this));
  487. var firePost = function(){
  488. if (nodeFinish && spacerFinish && contentFinish){
  489. if (this.titleText) this.getTitle();
  490. this.isHide = false;
  491. if (this.containerDrag) this.containerDrag.attach();
  492. this.fireEvent("postShow");
  493. // if (this.isMax){
  494. // this.isMax = false;
  495. // this.app.maxSize();
  496. // }
  497. }
  498. }.bind(this);
  499. }
  500. },
  501. restore: function(callback){
  502. this.querySetRestoreStyle();
  503. if (this.options.mark) this._markShow();
  504. if (!this.morph){
  505. this.morph = new Fx.Morph(this.node, {duration: 100, link: "chain"});
  506. }
  507. this.morph.setOptions({duration: 50});
  508. this.getSpacer();
  509. if (!this.spacerMorph){
  510. this.spacerMorph = new Fx.Morph(this.spacer, {duration: 100, link: "chain"});
  511. }
  512. this.spacerMorph.setOptions({duration: 50});
  513. if (!this.contentMorph){
  514. this.contentMorph = new Fx.Morph(this.content, {duration: 50, link: "chain"});
  515. }
  516. this.contentMorph.setOptions({duration: 50});
  517. this.spacer.setStyle("display", "block");
  518. this.node.setStyle("display", "block");
  519. var contentSize = this.getContentSize(this.css.to.height.toFloat(), this.css.to.width.toFloat());
  520. if (this.fireEvent("queryRestore")){
  521. var nodeFinish = false;
  522. var spacerFinish = false;
  523. var contentFinish = false;
  524. this.spacerMorph.start(this.css.spacerTo).chain(function(){
  525. if (this.app.desktop.currentApp!=this.app) this.spacer.setStyles(this.css.spacerUncurrent);
  526. spacerFinish = true;
  527. firePost();
  528. }.bind(this));
  529. this.contentMorph.start(contentSize).chain(function(){
  530. contentFinish = true;
  531. firePost();
  532. }.bind(this));
  533. this.morph.start(this.css.to).chain(function(){
  534. if (this.app.desktop.currentApp!=this.app) this.node.setStyles(this.css.uncurrent);
  535. nodeFinish = true;
  536. firePost();
  537. }.bind(this));
  538. var firePost = function(){
  539. if (nodeFinish && spacerFinish && contentFinish){
  540. if (this.titleText) this.getTitle();
  541. this.isHide = false;
  542. this.isMax = false;
  543. if (this.containerDrag) this.containerDrag.attach();
  544. this.postSetRestoreStyle();
  545. if (callback) callback();
  546. this.fireEvent("resize");
  547. this.fireEvent("postRestore");
  548. }
  549. }.bind(this);
  550. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.maxActionNode);
  551. }
  552. },
  553. querySetRestoreStyle: function(){
  554. if (this.css.windowTitleRestore) this.title.setStyles(this.css.windowTitleRestore);
  555. if (this.css.titleRefresh) this.titleRefresh.setStyles(this.css.titleRefresh);
  556. if (this.css.windowTitleTextRestore) this.titleText.setStyles(this.css.windowTitleTextRestore);
  557. if (this.css.windowTitleActionRestore) this.titleAction.setStyles(this.css.windowTitleActionRestore);
  558. if (this.closeActionNode){
  559. if (this.css.closeActionNode) this.closeActionNode.setStyles(this.css.closeActionNode);
  560. }
  561. if (this.maxActionNode){
  562. if (this.css.maxActionNode) this.maxActionNode.setStyles(this.css.maxActionNode);
  563. }
  564. if (this.minActionNode){
  565. if (this.css.minActionNode) this.minActionNode.setStyles(this.css.minActionNode);
  566. }
  567. },
  568. postSetRestoreStyle: function(){
  569. if (this.css.windowNodeRestore) this.node.setStyles(this.css.windowNodeRestore);
  570. },
  571. restoreIm: function(callback){
  572. this.querySetRestoreStyle();
  573. this.getSpacer();
  574. this.spacer.setStyle("display", "block");
  575. this.node.setStyle("display", "block");
  576. var contentSize = this.getContentSize(this.css.to.height.toFloat(), this.css.to.width.toFloat());
  577. if (this.fireEvent("queryRestore")){
  578. this.node.setStyles(this.css.to);
  579. this.spacer.setStyles(this.css.spacerTo);
  580. this.content.setStyles(contentSize);
  581. if (this.titleText) this.getTitle();
  582. this.isHide = false;
  583. this.isMax = false;
  584. if (this.containerDrag) this.containerDrag.attach();
  585. this.postSetRestoreStyle();
  586. if (callback) callback();
  587. this.fireEvent("resize");
  588. this.fireEvent("postRestore");
  589. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.maxActionNode);
  590. }
  591. },
  592. hideIm: function(x, y, callback) {
  593. this.getSpacer();
  594. if (x){
  595. this.css.from.left = x;
  596. this.css.spacerFrom.left = x;
  597. }
  598. if (y){
  599. this.css.from.top = y;
  600. this.css.spacerFrom.top = y;
  601. }
  602. if (this.fireEvent("queryHide")){
  603. if (this.titleText) this.titleText.set("text", "");
  604. if (this.button) this.button.set("html", "");
  605. this.spacer.setStyles(this.css.spacerFrom);
  606. this.node.setStyles(this.css.from);
  607. this._markHide();
  608. this.isHide = true;
  609. this.node.setStyle("display", "none");
  610. this.spacer.setStyle("display", "none");
  611. if (callback) callback();
  612. this.fireEvent("postHide");
  613. }
  614. },
  615. hide: function(x, y, callback) {
  616. if (!this.morph){
  617. this.morph = new Fx.Morph(this.node, {duration: 100, link: "chain"});
  618. }
  619. this.morph.setOptions({duration: 100});
  620. this.getSpacer();
  621. if (!this.spacerMorph){
  622. this.spacerMorph = new Fx.Morph(this.spacer, {duration: 100, link: "chain"});
  623. }
  624. this.spacerMorph.setOptions({duration: 100});
  625. if (x){
  626. this.css.from.left = x;
  627. this.css.spacerFrom.left = x;
  628. }
  629. if (y){
  630. this.css.from.top = y;
  631. this.css.spacerFrom.top = y;
  632. }
  633. if (this.fireEvent("queryHide")){
  634. if (this.titleText) this.titleText.set("text", "");
  635. if (this.button) this.button.set("html", "");
  636. var nodeFinish = false;
  637. var spacerFinish = false;
  638. this.spacerMorph.start(this.css.spacerFrom).chain(function(){
  639. spacerFinish = true;
  640. firePost();
  641. }.bind(this));
  642. this.morph.start(this.css.from).chain(function(){
  643. nodeFinish = true;
  644. firePost();
  645. }.bind(this));
  646. var firePost = function(){
  647. if (nodeFinish && spacerFinish){
  648. this._markHide();
  649. this.isHide = true;
  650. this.node.setStyle("display", "none");
  651. this.spacer.setStyle("display", "none");
  652. if (callback) callback();
  653. this.fireEvent("postHide");
  654. }
  655. }.bind(this);
  656. }
  657. },
  658. _hideIm: function(){
  659. this.node.setStyle("display", "none");
  660. this.spacer.setStyle("display", "none");
  661. },
  662. _showIm: function(){
  663. this.node.setStyle("display", "block");
  664. this.spacer.setStyle("display", "block");
  665. },
  666. _fadeOut: function(){
  667. this.node.fade("out");
  668. this.spacer.fade("out");
  669. },
  670. _fadeIn: function(){
  671. this.node.fade("in");
  672. this.spacer.fade("in");
  673. },
  674. close: function(callback){
  675. if (!this.morph){
  676. this.morph = new Fx.Morph(this.node, {duration: 100, link: "chain"});
  677. }
  678. this.morph.setOptions({duration: 100});
  679. this.getSpacer();
  680. if (!this.spacerMorph){
  681. this.spacerMorph = new Fx.Morph(this.spacer, {duration: 100, link: "chain"});
  682. }
  683. this.spacerMorph.setOptions({duration: 100});
  684. if (this.fireEvent("queryClose")){
  685. //this.spacerMorph.start(this.css.spacerFrom).chain(function(){
  686. // this.spacer.destroy();
  687. // this.spacer = null;
  688. //}.bind(this));
  689. //
  690. //this.morph.start(this.css.from).chain(function(){
  691. // this._markHide();
  692. // this.node.destroy();
  693. // this.node = null;
  694. // if (callback) callback();
  695. // this.fireEvent("postClose");
  696. //}.bind(this));
  697. this.spacer.destroy();
  698. this.spacer = null;
  699. this._markHide();
  700. this.node.destroy();
  701. this.node = null;
  702. if (callback) callback();
  703. this.fireEvent("postClose");
  704. o2.release(this);
  705. }
  706. },
  707. getAction: function(){
  708. this.titleAction.setStyles(this.css.titleAction);
  709. var _self = this;
  710. this.closeActionNode = new Element("div", {
  711. "styles": this.css.closeActionNode,
  712. "events": {
  713. "mouseover": function(e){this.setStyles(_self.css.titleActionOver);e.stopPropagation();},
  714. "mouseout": function(e){this.setStyles(_self.css.titleActionOut);e.stopPropagation();},
  715. "mousedown": function(e){this.setStyles(_self.css.titleActionDown);e.stopPropagation();},
  716. "mouseup": function(e){this.setStyles(_self.css.titleActionOver);e.stopPropagation();},
  717. "click": function(e){
  718. this.app.close();
  719. e.stopPropagation();
  720. }.bind(this)
  721. }
  722. }).inject(this.titleAction);
  723. if (this.options.isMax!=false){
  724. this.maxActionNode = new Element("div", {
  725. "styles": this.css.maxActionNode,
  726. "events": {
  727. "mouseover": function(){this.setStyles(_self.css.titleActionOver);},
  728. "mouseout": function(){this.setStyles(_self.css.titleActionOut);},
  729. "mousedown": function(){this.setStyles(_self.css.titleActionDown);},
  730. "mouseup": function(){this.setStyles(_self.css.titleActionOver);},
  731. "click": function(){
  732. this.app.maxOrRestoreSize();
  733. }.bind(this)
  734. }
  735. }).inject(this.titleAction);
  736. }
  737. if (this.options.isResize){
  738. this.title.addEvent("dblclick", this.app.maxOrRestoreSize.bind(this.app));
  739. }
  740. this.minActionNode = new Element("div", {
  741. "styles": this.css.minActionNode,
  742. "events": {
  743. "mouseover": function(){this.setStyles(_self.css.titleActionOver);},
  744. "mouseout": function(){this.setStyles(_self.css.titleActionOut);},
  745. "mousedown": function(){this.setStyles(_self.css.titleActionDown);},
  746. "mouseup": function(){this.setStyles(_self.css.titleActionOver);},
  747. "click": function(){
  748. this.app.minSize();
  749. }.bind(this)
  750. }
  751. }).inject(this.titleAction);
  752. if (this.options.isRefresh!=false){
  753. this.titleRefresh.addEvents({
  754. "mouseover": function(){this.setStyles(_self.css.titleActionOver);},
  755. "mouseout": function(){this.setStyles(_self.css.titleActionOut);},
  756. "mousedown": function(){this.setStyles(_self.css.titleActionDown);},
  757. "mouseup": function(){this.setStyles(_self.css.titleActionOver);},
  758. "click": function(e){
  759. this.app.refresh();
  760. }.bind(this),
  761. "dblclick": function(e){
  762. e.stopPropagation();
  763. }.bind(this)
  764. });
  765. }
  766. },
  767. maxOrRestoreSize: function(callback){
  768. if (this.isMax){
  769. this.restoreSize(callback);
  770. }else{
  771. this.maxSize(callback);
  772. }
  773. },
  774. restoreSize: function(callback){
  775. this.restore(callback);
  776. },
  777. maxSize: function(callback){
  778. this.querySetMaxStyle();
  779. if (!this.morph){
  780. this.morph = new Fx.Morph(this.node, {duration: 50, link: "chain"});
  781. }
  782. this.morph.setOptions({duration: 50});
  783. this.getSpacer();
  784. if (!this.spacerMorph){
  785. this.spacerMorph = new Fx.Morph(this.spacer, {duration: 50, link: "chain"});
  786. }
  787. this.spacerMorph.setOptions({duration: 50});
  788. if (!this.contentMorph){
  789. this.contentMorph = new Fx.Morph(this.content, {duration: 50, link: "chain"});
  790. }
  791. this.contentMorph.setOptions({duration: 50});
  792. this.spacer.setStyle("display", "block");
  793. this.node.setStyle("display", "block");
  794. var size = this.getMaxSize();
  795. var spacerTo = Object.clone(this.css.spacerTo);
  796. var to = Object.clone(this.css.to);
  797. var contentTo = {};
  798. spacerTo.top = size.position.y;
  799. spacerTo.left = size.position.x;
  800. spacerTo.width = size.spacer.x;
  801. spacerTo.height = size.spacer.y;
  802. to.top = size.position.y;
  803. to.left = size.position.x;
  804. to.width = size.node.x;
  805. to.height = size.node.y;
  806. contentTo = size.contentSize;
  807. if (this.fireEvent("queryMax")){
  808. var nodeFinish = false;
  809. var spacerFinish = false;
  810. var contentFinish = false;
  811. this.spacerMorph.start(spacerTo).chain(function(){
  812. if (this.app.desktop.currentApp!=this.app) this.spacer.setStyles(this.css.spacerUncurrent);
  813. spacerFinish = true;
  814. firePost();
  815. }.bind(this));
  816. this.contentMorph.start(contentTo).chain(function(){
  817. contentFinish = true;
  818. firePost();
  819. }.bind(this));
  820. this.morph.start(to).chain(function(){
  821. if (this.app.desktop.currentApp!=this.app) this.node.setStyles(this.css.uncurrent);
  822. nodeFinish = true;
  823. firePost();
  824. }.bind(this));
  825. var firePost = function(){
  826. if (nodeFinish && spacerFinish && contentFinish){
  827. if (this.titleText) this.getTitle();
  828. this.isMax = true;
  829. this.isHide = false;
  830. if (this.containerDrag) this.containerDrag.detach();
  831. this.postSetMaxStyle();
  832. if (callback) callback();
  833. this.fireEvent("resize");
  834. this.fireEvent("postMax");
  835. }
  836. }.bind(this);
  837. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.restoreActionNode);
  838. }
  839. },
  840. querySetMaxStyle: function(){
  841. if (this.css.windowTitleMax) this.title.setStyles(this.css.windowTitleMax);
  842. if (this.css.windowTitleRefreshMax) this.titleRefresh.setStyles(this.css.windowTitleRefreshMax);
  843. if (this.css.windowTitleTextMax) this.titleText.setStyles(this.css.windowTitleTextMax);
  844. if (this.css.windowTitleActionMax) this.titleAction.setStyles(this.css.windowTitleActionMax);
  845. if (this.closeActionNode){
  846. if (this.css.windowActionNodeMax) this.closeActionNode.setStyles(this.css.windowActionNodeMax);
  847. }
  848. if (this.maxActionNode){
  849. if (this.css.windowActionNodeMax) this.maxActionNode.setStyles(this.css.windowActionNodeMax);
  850. }
  851. if (this.minActionNode){
  852. if (this.css.windowActionNodeMax) this.minActionNode.setStyles(this.css.windowActionNodeMax);
  853. }
  854. },
  855. postSetMaxStyle: function(){
  856. if (this.css.windowNodeMax) this.node.setStyles(this.css.windowNodeMax);
  857. },
  858. maxSizeIm: function(callback){
  859. this.querySetMaxStyle();
  860. this.getSpacer();
  861. this.spacer.setStyle("display", "block");
  862. this.node.setStyle("display", "block");
  863. var size = this.getMaxSize();
  864. var spacerTo = Object.clone(this.css.spacerTo);
  865. var to = Object.clone(this.css.to);
  866. var contentTo = {};
  867. spacerTo.top = size.position.y;
  868. spacerTo.left = size.position.x;
  869. spacerTo.width = size.spacer.x;
  870. spacerTo.height = size.spacer.y;
  871. to.top = size.position.y;
  872. to.left = size.position.x;
  873. to.width = size.node.x;
  874. to.height = size.node.y;
  875. contentTo = size.contentSize;
  876. if (this.fireEvent("queryMax")){
  877. this.node.setStyles(to);
  878. this.spacer.setStyles(spacerTo);
  879. this.content.setStyles(contentTo);
  880. if (this.titleText) this.getTitle();
  881. this.isMax = true;
  882. this.isHide = false;
  883. if (this.containerDrag) this.containerDrag.detach();
  884. this.postSetMaxStyle();
  885. if (callback) callback();
  886. this.fireEvent("resize");
  887. this.fireEvent("postMax");
  888. if (this.maxActionNode) this.maxActionNode.setStyles(this.css.restoreActionNode);
  889. }
  890. },
  891. getMaxSize: function(){
  892. var size = layout.desktop.desktopNode.getSize();
  893. var position = layout.desktop.desktopNode.getPosition();
  894. var pt = this.spacer.getStyle("padding-top").toFloat();
  895. var pb = this.spacer.getStyle("padding-bottom").toFloat();
  896. var pl = this.spacer.getStyle("padding-left").toFloat();
  897. var pr = this.spacer.getStyle("padding-right").toFloat();
  898. spacerHeight = size.y-pt-pb;
  899. spacerWidth = size.x-pl-pr;
  900. pt = this.node.getStyle("padding-top").toFloat();
  901. pb = this.node.getStyle("padding-bottom").toFloat();
  902. pl = this.node.getStyle("padding-left").toFloat();
  903. pr = this.node.getStyle("padding-right").toFloat();
  904. nodeHeight = size.y-pt-pb;
  905. nodeWidth = size.x-pl-pr;
  906. var contentSize = this.getContentSize(nodeHeight, nodeWidth);
  907. return {"node": {"x": nodeWidth, "y": nodeHeight}, "spacer": {"x": spacerWidth, "y": spacerHeight}, "position": {"x": position.x, "y": position.y}, "contentSize": contentSize};
  908. }
  909. });
  910. MWF.xDesktop.WindowTransparent = new Class({
  911. Implements: [Options, Events],
  912. options: {
  913. "style": "default"
  914. },
  915. initialize: function(app, options){
  916. this.setOptions(options);
  917. var position = layout.desktop.desktopNode.getPosition();
  918. this.app = app;
  919. this.fireEvent("queryLoad");
  920. this.isMax = false;
  921. this.isHide = false;
  922. this.css = {
  923. "to": {"width": "0", "height": "0", "left": "0", "top": "0"}
  924. };
  925. var index = null;
  926. if (MWF.xDesktop.zIndexPool) index = MWF.xDesktop.zIndexPool.applyZindex();
  927. this.node = new Element("div", {
  928. "styles":{
  929. "width": "0px",
  930. "height": "0px",
  931. "top": "0px",
  932. "left": "0px",
  933. "position": "absolute",
  934. "z-index": (index)? index : 100
  935. }
  936. }).inject(this.options.container || $(document.body));
  937. this.content = new Element("div", {
  938. "styles": {"width": "100%", "height": "100%"}
  939. }).inject(this.node);
  940. this.fireEvent("postLoad");
  941. },
  942. show: function(){
  943. this.fireEvent("queryShow");
  944. this.node.setStyle("display", "block");
  945. this.isHide = false;
  946. this.fireEvent("postShow");
  947. },
  948. hide: function(){
  949. this.fireEvent("queryHide");
  950. this.node.setStyle("display", "none");
  951. this.isHide = true;
  952. this.fireEvent("postHide");
  953. },
  954. restore: function(callback) {
  955. this.fireEvent("queryRestore");
  956. this.node.setStyle("display", "block");
  957. this.isHide = false;
  958. this.fireEvent("postRestore");
  959. if (callback) callback();
  960. },
  961. restoreSize: function(callback){
  962. this.restore(callback);
  963. },
  964. close: function(callback){
  965. this.fireEvent("queryClose");
  966. this.node.destroy();
  967. this.node = null;
  968. this.content = null;
  969. delete this;
  970. if (callback) callback();
  971. this.fireEvent("postClose");
  972. },
  973. maxOrRestoreSize: function(callback){
  974. if (this.isMax){
  975. this.restoreSize(callback);
  976. }else{
  977. this.maxSize(callback);
  978. }
  979. },
  980. maxSize: function(callback){
  981. this.fireEvent("queryMax");
  982. this.node.setStyle("display", "block");
  983. this.isHide = false;
  984. this.fireEvent("resize");
  985. this.fireEvent("postMax");
  986. if (callback) callback();
  987. },
  988. restoreIm: function(){
  989. this.restore();
  990. },
  991. maxSizeIm: function(){
  992. this.maxSize();
  993. },
  994. setCurrent: function(){
  995. if (MWF.xDesktop.zIndexPool){
  996. var index = this.node.getStyle("z-index").toFloat()+1;
  997. if (index < MWF.xDesktop.zIndexPool.zIndex){
  998. var newIndex = MWF.xDesktop.zIndexPool.applyZindex();
  999. this.node.setStyle("z-index", newIndex);
  1000. }
  1001. }
  1002. },
  1003. _fadeOut: function(){
  1004. this.node.fade("out");
  1005. if (this.spacer) this.spacer.fade("out");
  1006. },
  1007. _fadeIn: function(){
  1008. this.node.fade("in");
  1009. if (this.spacer) this.spacer.fade("in");
  1010. },
  1011. setUncurrent: function(){},
  1012. reStyle: function(){},
  1013. changeStyle: function(){}
  1014. });