Dialog.js 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489
  1. o2.require("MWF.widget.Dialog", null, false);
  2. o2.xDesktop.Dialog = o2.DDL = new Class({
  3. Extends: o2.widget.Dialog,
  4. // _markShow: function(){
  5. //
  6. // if (this.options.mark){
  7. // if (!this.markNode){
  8. //
  9. // this.markNode = new Element("div", {
  10. // styles: this.css.mark
  11. // }).inject($(document.body));
  12. //
  13. // }
  14. //// if (this.options.markNode){
  15. //// var size = this.options.markNode.getComputedSize();
  16. //// var position = this.options.markNode.getPosition();
  17. //// alert(size.totalHeight);
  18. //// this.markNode.set("styles", {
  19. //// "height": size.totalHeight+"px",
  20. //// "width": size.totalWidth+"px",
  21. //// "top": position.y,
  22. //// "height": position.x
  23. //// });
  24. ////
  25. //// }else{
  26. // var size = MWF.getMarkSize();
  27. // this.markNode.set("styles", {
  28. // "height": size.y,
  29. // "width": size.x,
  30. // "top": "0xp",
  31. // "height": "0px"
  32. // });
  33. //// }
  34. //
  35. // this.markNode.setStyle("display", "block");
  36. // }
  37. // },
  38. _markShow: function(){
  39. if (this.options.mark){
  40. if (!this.markNode){
  41. var size = MWF.getMarkSize(this.options.maskNode);
  42. var topNode = this.options.container || $(document.body);
  43. this.markNode = new Element("iframe", {
  44. styles: this.css.mark
  45. }).inject(topNode);
  46. this.markNode.set("styles", {
  47. "height": size.y,
  48. "width": size.x
  49. });
  50. }
  51. this.markNode.setStyle("display", "block");
  52. }
  53. },
  54. getDialogNode: function(){
  55. this.width = this.options.width;
  56. this.height = this.options.height;
  57. this.node.set("styles", this.css.from);
  58. var topNode = this.options.container || $(document.body);
  59. this.node.inject(topNode);
  60. // this.node.addEvent("selectstart", function(e){
  61. // // e.preventDefault();
  62. // });
  63. this.title = this.node.getElement(".MWF_dialod_title");
  64. this.titleCenter = this.node.getElement(".MWF_dialod_title_center");
  65. this.titleText = this.node.getElement(".MWF_dialod_title_text");
  66. this.titleAction = this.node.getElement(".MWF_dialod_title_action");
  67. this.content = this.node.getElement(".MWF_dialod_content");
  68. this.bottom = this.node.getElement(".MWF_dialod_bottom");
  69. this.resizeNode = this.node.getElement(".MWF_dialod_bottom_resize");
  70. this.button = this.node.getElement(".MWF_dialod_button");
  71. if (!this.options.isTitle) {
  72. this.title.destroy();
  73. this.title = null;
  74. this.titleCenter = null;
  75. this.titleRefresh = null;
  76. this.titleText = null;
  77. this.titleAction = null;
  78. }
  79. if (this.title) this.setTitleEvent();
  80. // if (this.titleText) this.getTitle();
  81. if (this.content) this.getContent();
  82. if (this.titleAction) this.getAction();
  83. if (this.resizeNode) this.setResizeNode();
  84. // if (this.button) this.getButton();
  85. if (this.content) this.setContentSize();
  86. },
  87. reCenter: function(){
  88. var size = this.node.getSize();
  89. var container = $(document.body);
  90. if( this.options.positionNode && this.options.positionNode.getSize().y<$(document.body).getSize().y ){
  91. container = this.options.positionNode;
  92. }else if (layout.desktop.currentApp){
  93. container = layout.desktop.currentApp.content;
  94. }else{
  95. if (this.options.container){
  96. if (this.options.container.getSize().y<$(document.body).getSize().y){
  97. container = this.options.container;
  98. }
  99. }
  100. }
  101. var p = o2.getCenter(size, container, container);
  102. if (p.y<0) p.y = 0;
  103. this.options.top = p.y;
  104. this.options.left = p.x;
  105. this.css.to.top = this.options.top+"px";
  106. this.css.to.left = this.options.left+"px";
  107. this.node.setStyles({
  108. "top": this.css.to.top,
  109. "left": this.css.to.left
  110. });
  111. },
  112. getOffsetY : function(node){
  113. return (node.getStyle("margin-top").toInt() || 0 ) +
  114. (node.getStyle("margin-bottom").toInt() || 0 ) +
  115. (node.getStyle("padding-top").toInt() || 0 ) +
  116. (node.getStyle("padding-bottom").toInt() || 0 )+
  117. (node.getStyle("border-top-width").toInt() || 0 ) +
  118. (node.getStyle("border-bottom-width").toInt() || 0 );
  119. },
  120. getOffsetX : function(node){
  121. return (node.getStyle("margin-left").toInt() || 0 ) +
  122. (node.getStyle("margin-right").toInt() || 0 ) +
  123. (node.getStyle("padding-left").toInt() || 0 ) +
  124. (node.getStyle("padding-right").toInt() || 0 )+
  125. (node.getStyle("border-left-width").toInt() || 0 ) +
  126. (node.getStyle("border-right-width").toInt() || 0 );
  127. },
  128. setContentHeightAuto : function(){
  129. var maxHeight = this.options.maxHeight || "98%";
  130. if( typeOf(maxHeight) === "string" && maxHeight.substr(maxHeight.length - 1, 1) === "%" ) {
  131. var containerHeight = ( this.options.positionNode || this.options.container || $(document.body)).getSize().y;
  132. maxHeight = parseInt(containerHeight * parseInt(maxHeight) / 100);
  133. }
  134. var offsetY = 0;
  135. var y = 0;
  136. //y = y + getOffsetY( this.title ) + this.title.getSize().y; //this.titleNode.getStyle("height").toInt();
  137. if( this.title )offsetY = offsetY + this.getOffsetY( this.title ) + this.title.getSize().y;
  138. if( this.bottom )offsetY = offsetY + this.getOffsetY( this.bottom ) + this.bottom.getSize().y;
  139. if( this.button )offsetY = offsetY + this.getOffsetY( this.button ) + this.button.getSize().y;
  140. if( this.content ){
  141. offsetY = offsetY + this.getOffsetY( this.content );
  142. y = offsetY + this.content.getSize().y;
  143. }else{
  144. y = offsetY;
  145. }
  146. if ( y > maxHeight) {
  147. this.options.height = maxHeight;
  148. this.options.contentHeight = null;
  149. this.options.fromTop = this.options.fromTop.toFloat() - offsetY / 2;
  150. this.options.top = this.options.top.toFloat() - offsetY / 2;
  151. this.css.to.height = maxHeight + "px";
  152. this.css.to.top = this.options.top + "px";
  153. this.css.from.top = this.options.fromTop + "px";
  154. this.node.setStyles({
  155. "height": maxHeight
  156. });
  157. if (this.content) {
  158. this.content.setStyles({
  159. "height" : maxHeight - offsetY,
  160. "overflow-y": "auto"
  161. })
  162. }
  163. }else{
  164. this.options.height = y;
  165. this.options.contentHeight = null;
  166. this.options.fromTop = this.options.fromTop.toFloat() - offsetY / 2;
  167. this.options.top = this.options.top.toFloat() - offsetY / 2;
  168. this.css.to.height = y + "px";
  169. this.css.to.top = this.options.top + "px";
  170. this.css.from.top = this.options.fromTop + "px";
  171. this.node.setStyles({
  172. "height": y
  173. });
  174. if (this.content) {
  175. this.content.setStyles({
  176. "height" : y - offsetY,
  177. "overflow-y": "hidden"
  178. })
  179. }
  180. }
  181. },
  182. setContentHeight: function(height){
  183. var nodeHeight;
  184. if (!height){
  185. if (this.options.contentHeight){
  186. nodeHeight = height = this.options.contentHeight.toFloat();
  187. }else{
  188. height = this.options.height.toFloat();
  189. }
  190. }
  191. var offsetHeight = 0;
  192. if (this.title){
  193. var h1 = this.title.getSize().y;
  194. var ptop1 = this.title.getStyle("padding-top").toFloat();
  195. var pbottom1 = this.title.getStyle("padding-bottom").toFloat();
  196. var mtop1 = this.title.getStyle("margin-top").toFloat();
  197. var mbottom1 = this.title.getStyle("margin-bottom").toFloat();
  198. offsetHeight += h1 + ptop1 + pbottom1 + mtop1 + mbottom1;
  199. }
  200. if (this.bottom){
  201. var h2 = this.bottom.getSize().y;
  202. var ptop2 = this.bottom.getStyle("padding-top").toFloat();
  203. var pbottom2 = this.bottom.getStyle("padding-bottom").toFloat();
  204. var mtop2 = this.bottom.getStyle("margin-top").toFloat();
  205. var mbottom2 = this.bottom.getStyle("margin-bottom").toFloat();
  206. offsetHeight += h2 + ptop2 + pbottom2 + mtop2 + mbottom2;
  207. }
  208. if (this.button){
  209. var h3 = this.button.getSize().y;
  210. var ptop3 = this.button.getStyle("padding-top").toFloat();
  211. var pbottom3 = this.button.getStyle("padding-bottom").toFloat();
  212. var mtop3 = this.button.getStyle("margin-top").toFloat();
  213. var mbottom3 = this.button.getStyle("margin-bottom").toFloat();
  214. offsetHeight += h3 + ptop3 + pbottom3 + mtop3 + mbottom3;
  215. }
  216. var ptop4 = this.content.getStyle("padding-top").toFloat();
  217. var pbottom4 = this.content.getStyle("padding-bottom").toFloat();
  218. var mtop4 = this.content.getStyle("margin-top").toFloat();
  219. var mbottom4 = this.content.getStyle("margin-bottom").toFloat();
  220. offsetHeight += ptop4 + pbottom4 + mtop4 + mbottom4;
  221. if (nodeHeight){
  222. nodeHeight = nodeHeight + offsetHeight+2;
  223. }else {
  224. height = height - offsetHeight;
  225. }
  226. if (nodeHeight) {
  227. this.options.height = nodeHeight;
  228. this.options.contentHeight = null;
  229. this.options.fromTop = this.options.fromTop.toFloat()-offsetHeight/2;
  230. this.options.top = this.options.top.toFloat()-offsetHeight/2;
  231. this.css.to.height = nodeHeight+"px";
  232. this.css.to.top = this.options.top+"px";
  233. this.css.from.top = this.options.fromTop+"px";
  234. }
  235. if (nodeWidth){
  236. this.options.width = nodeWidth;
  237. this.options.contentWidth = null;
  238. this.options.fromLeft = this.options.fromLeft.toFloat()-offsetWidth/2;
  239. this.options.left = this.options.left.toFloat()-offsetWidth/2;
  240. this.css.to.width = nodeWidth+"px";
  241. this.css.to.left = this.options.left+"px";
  242. this.css.from.left = this.options.fromLeft+"px";
  243. }
  244. if (!height || height<0){
  245. this.content.setStyles({"overflow": "hidden", "height": "auto"});
  246. height = this.content.getSize().y;
  247. var h = height + h1 + ptop1 + pbottom1 + mtop1 + mbottom1;
  248. h = h + h2 + ptop2 + pbottom2 + mtop2 + mbottom2;
  249. h = h + h3 + ptop3 + pbottom3 + mtop3 + mbottom3;
  250. h = h + ptop4 + pbottom4 + mtop4 + mbottom4;
  251. this.css.to.height = h;
  252. }else{
  253. this.content.setStyles( {"height" : height} )
  254. }
  255. },
  256. setContentWidthAuto : function(){
  257. var maxWidth = this.options.maxWidth || "100%";
  258. if( typeOf(maxWidth) === "string" && maxWidth.substr(maxWidth.length - 1, 1) === "%" ) {
  259. var containerWidth = ( this.options.positionNode || this.options.container || $(document.body)).getSize().x;
  260. maxWidth = parseInt(containerWidth * parseInt(maxWidth) / 100);
  261. }
  262. var offsetX = 0;
  263. var x = 0;
  264. if( this.content ){
  265. offsetX = offsetX + this.getOffsetX( this.content );
  266. x = offsetX + this.content.getSize().x;
  267. }else{
  268. x = offsetX;
  269. }
  270. if ( x > maxWidth) {
  271. this.options.width = maxWidth;
  272. this.options.contentWidth = null;
  273. this.options.fromLeft = this.options.fromLeft.toFloat() - offsetX / 2;
  274. this.options.left = this.options.left.toFloat() - offsetX / 2;
  275. this.css.to.width = maxWidth + "px";
  276. this.css.to.left = this.options.left + "px";
  277. this.css.from.left = this.options.fromLeft + "px";
  278. this.node.setStyles({
  279. "width": maxWidth
  280. });
  281. if (this.content) {
  282. this.content.setStyles({
  283. "width" : maxWidth - offsetX,
  284. "overflow-x": "auto"
  285. })
  286. }
  287. }else{
  288. this.options.width = x;
  289. this.options.contentHeight = null;
  290. this.options.fromLeft = this.options.fromLeft.toFloat() - offsetX / 2;
  291. this.options.left = this.options.left.toFloat() - offsetX / 2;
  292. this.css.to.width = x + "px";
  293. this.css.to.left = this.options.left + "px";
  294. this.css.from.left = this.options.fromLeft + "px";
  295. this.node.setStyles({
  296. "width": x
  297. });
  298. if (this.content) {
  299. this.content.setStyles({
  300. "width" : x - offsetX,
  301. "overflow-x": "hidden"
  302. })
  303. }
  304. }
  305. },
  306. setContentWidth: function(width){
  307. var nodeWidth;
  308. if (!width){
  309. if (this.options.contentWidth){
  310. nodeWidth = width = this.options.contentWidth.toFloat();
  311. }else{
  312. width = this.options.width.toFloat();
  313. }
  314. }
  315. var offsetWidth = 0;
  316. //if (this.content.getParent().getStyle("overflow-x")!="hidden" ) height = height-18;
  317. var pleft = this.content.getStyle("padding-left").toFloat();
  318. var pright = this.content.getStyle("padding-right").toFloat();
  319. var mleft = this.content.getStyle("margin-left").toFloat();
  320. var mright = this.content.getStyle("margin-right").toFloat();
  321. offsetWidth = pleft+pright+mleft+mright;
  322. //width = width-pleft-pright-mleft-mright;
  323. //if (this.content.getParent().getStyle("overflow-y")!="hidden" ) width = width-18;
  324. if (nodeWidth){
  325. nodeWidth = nodeWidth+offsetWidth;
  326. }else{
  327. var x = width;
  328. width = width-offsetWidth;
  329. }
  330. if (nodeWidth){
  331. this.options.width = nodeWidth;
  332. this.options.contentWidth = null;
  333. this.css.to.left = this.options.left+"px";
  334. this.css.from.left = this.options.fromLeft+"px";
  335. this.css.to.width = nodeWidth+"px";
  336. this.options.fromLeft = this.options.fromLeft.toFloat()-offsetWidth/2;
  337. this.options.left = this.options.left.toFloat()-offsetWidth/2;
  338. this.node.setStyle("width", nodeWidth )
  339. }else{
  340. this.node.setStyle("width", x )
  341. }
  342. this.content.setStyles( {"width" : width} )
  343. },
  344. setContentSize: function(height, width){
  345. //this.content.setStyle("height", this.getContentSize(height));
  346. // if (!this.options.height && !height){
  347. // this.content.setStyle("height", "auto");
  348. // this.content.setStyle("overflow", "hidden");
  349. // this.content.setStyle("width", "auto");
  350. // }else{
  351. var y = height;
  352. if (!y){
  353. if (this.options.contentHeight){
  354. y = this.options.contentHeight;
  355. }else{
  356. y = this.height;
  357. }
  358. }
  359. var x = width;
  360. if (!x){
  361. if (this.options.contentWidth){
  362. x = this.options.contentWidth;
  363. }else{
  364. x = this.width;
  365. }
  366. }
  367. if( y === "auto" || x === "auto" ){
  368. if( y === "auto" ){
  369. this.setContentHeightAuto();
  370. }else{
  371. this.setContentHeight( height );
  372. }
  373. if( x === "auto" ){
  374. this.setContentWidthAuto();
  375. }else{
  376. this.setContentWidth( width );
  377. }
  378. }else{
  379. this.content.setStyles(this.getContentSize(height, width));
  380. this.content.setStyle("width", "auto");
  381. }
  382. }
  383. });
  384. o2.DL.open = function(options){
  385. if (!options) options = {};
  386. if (!options.style) options.style = "user";
  387. //if (!options.transition) options.transition = Fx.Transitions.Back.easeOut;
  388. if (!options.duration) options.duration = 200;
  389. if (options.isClose!==false) options.isClose = true;
  390. var size;
  391. if (!options.width && !options.contentWidth){
  392. if (options.content){
  393. options.content.show();
  394. size = options.content.getComputedSize();
  395. options.contentWidth = size.totalWidth.toFloat();
  396. }
  397. }
  398. if (!options.height && !options.contentHeight){
  399. if (options.content){
  400. if (!size){
  401. options.content.show();
  402. size = options.content.getComputedSize();
  403. }
  404. options.contentHeight = size.totalHeight.toFloat()+2;
  405. }
  406. }
  407. if (!options.width && !options.contentWidth) options.width = 300;
  408. if (!options.height && !options.contentHeight) options.height = 150;
  409. if (!options.container && layout){
  410. if (layout.desktop.currentApp){
  411. options.container = layout.desktop.currentApp.content;
  412. }
  413. }
  414. var container = (options.positionNode || options.container || $(document.body));
  415. if( options.width !== "auto" && options.height !== "auto" ){
  416. if ((options.top===undefined ) && (options.left===undefined)){
  417. var p = o2.getCenter({"x":(options.width || options.contentWidth), "y": (options.height || options.contentHeight+120)}, container, container);
  418. options.top = (p.y<0) ? 0 : p.y;
  419. options.left = (p.x<0) ? 0 : p.x;
  420. }
  421. if ((options.fromTop===undefined ) && (options.fromLeft===undefined)){
  422. var p = o2.getCenter({"x":(options.width || options.contentWidth)*0, "y": (options.height || options.contentHeight+120)*0}, container, container);
  423. options.fromTop = (p.y<0) ? 0 : p.y;
  424. options.fromLeft = (p.x<0) ? 0 : p.x;
  425. }
  426. if (options.offset){
  427. if (options.offset.y){
  428. options.top = options.top+options.offset.y.toInt();
  429. options.fromTop = options.fromTop+options.offset.y.toInt();
  430. }
  431. if (options.offset.x){
  432. options.left = options.left+options.offset.x.toInt();
  433. options.fromLeft = options.fromLeft+options.offset.x.toInt();
  434. }
  435. }
  436. if (options.top<0) options.top = 0;
  437. if (options.left<0) options.left = 0;
  438. if (options.fromTop<0) options.fromTop = 0;
  439. if (options.fromLeft<0) options.fromLeft = 0;
  440. }else{
  441. if(options.top===undefined )options.top = 0;
  442. if(options.left===undefined)options.left = 0;
  443. if(options.fromTop===undefined)options.fromTop = 0;
  444. if(options.fromLeft===undefined)options.fromLeft = 0;
  445. }
  446. options.mark = !(options.mask===false);
  447. var dlg = new o2.DDL(options);
  448. if( options.width === "auto" || options.height === "auto" ){
  449. dlg.reCenter();
  450. }
  451. dlg.show();
  452. return dlg;
  453. };