Main.js 7.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
  1. MWF.xApplication.FindDesigner.options.multitask = false;
  2. MWF.xApplication.FindDesigner.Main = new Class({
  3. Extends: MWF.xApplication.Common.Main,
  4. Implements: [Options, Events],
  5. options: {
  6. "style": "default",
  7. "name": "FindDesigner",
  8. "mvcStyle": "style.css",
  9. "icon": "icon.png",
  10. "width": "1200",
  11. "height": "800",
  12. "isResize": true,
  13. "isMax": true,
  14. "layoutType": "leftRight",
  15. "title": MWF.xApplication.FindDesigner.LP.title
  16. },
  17. onQueryLoad: function(){
  18. this.lp = MWF.xApplication.FindDesigner.LP;
  19. this.filterOption = {
  20. "keyword": "",
  21. "type": [],
  22. "caseSensitive": false,
  23. "matchWholeWord": false,
  24. "matchRegExp": false,
  25. "moduleList": []
  26. }
  27. this.heightPercent = {
  28. "list": 0.4,
  29. "preview": 0.6
  30. }
  31. },
  32. loadApplication: function(callback){
  33. var url = this.path+this.options.style+"/view.html";
  34. this.content.loadHtml(url, {"bind": {"lp": this.lp}, "module": this}, function(){
  35. this.setSizeNode();
  36. if (callback) callback();
  37. }.bind(this));
  38. },
  39. initLayout: function(){
  40. if (this.options.layoutType=="leftRight"){
  41. this.listNode.setStyles({
  42. "height":"100%",
  43. "width": "auto"
  44. });
  45. this.previewNode.setStyles({
  46. "height": "100%",
  47. "margin-left": ""
  48. });
  49. this.previewContentNode.setStyle("height", "auto");
  50. }else {
  51. this.listNode.setStyles({
  52. "height":"auto",
  53. "width": "auto"
  54. });
  55. this.previewNode.setStyles({
  56. "height": "auto",
  57. "margin-left": ""
  58. });
  59. this.previewContentNode.setStyle("height", "auto");
  60. }
  61. },
  62. setSizeNode: function(){
  63. debugger;
  64. this.initLayout();
  65. this["sizeNode_"+this.options.layoutType]();
  66. this["setResizeNode_"+this.options.layoutType]();
  67. this.sizeNodeFun = this["sizeNode_"+this.options.layoutType].bind(this);
  68. this.addEvent("resize", this.sizeNodeFun);
  69. },
  70. sizeResultNode: function(){
  71. var size = this.content.getSize();
  72. var filterSzie = this.filterNode.getSize();
  73. var keywordSize = this.keywordNode.getSize();
  74. var rangeSize = this.rangeNode.getSize();
  75. var h = size.y-filterSzie.y-keywordSize.y-rangeSize.y;
  76. this.resultNode.setStyle("height", ""+h+"px");
  77. return h;
  78. },
  79. sizeNode_topBottom: function(){
  80. var h = this.sizeResultNode();
  81. var listHeight = h*this.heightPercent.list;
  82. this.listNode.setStyle("height", ""+listHeight+"px");
  83. var previewHeight = h*this.heightPercent.preview;;
  84. this.previewNode.setStyle("height", ""+previewHeight+"px");
  85. var previewSeparatorSize = this.previewSeparatorNode.getSize();
  86. var previewTitleSize = this.previewTitleNode.getSize();
  87. var previewContentHeight = previewHeight - previewSeparatorSize.y - previewTitleSize.y;
  88. this.previewContentNode.setStyle("height", ""+previewContentHeight+"px");
  89. },
  90. sizeNode_leftRight: function(){
  91. var h = this.sizeResultNode();
  92. var w = this.resultNode.getSize().x;
  93. var listWidth = w*this.heightPercent.list;
  94. this.listNode.setStyle("width", ""+listWidth+"px");
  95. this.previewNode.setStyle("margin-left", ""+listWidth+"px");
  96. //var previewSeparatorSize = this.previewSeparatorNode.getSize();
  97. var previewTitleSize = this.previewTitleNode.getSize();
  98. var previewContentHeight = h - previewTitleSize.y;
  99. this.previewContentNode.setStyle("height", ""+previewContentHeight+"px");
  100. },
  101. setResizeNode_topBottom: function(){
  102. if (this.previewSeparatorNode){
  103. this.resizeDrag = new Drag(this.previewSeparatorNode, {
  104. "onStart": function(el, e){
  105. el.store("position", o2.eventPosition(e));
  106. el.store("initialSize", this.listNode.getSize());
  107. }.bind(this),
  108. "onDrag": function(el, e){
  109. var p = o2.eventPosition(e);
  110. var position = el.retrieve("position");
  111. var initialSize = el.retrieve("initialSize");
  112. var dy = position.y.toFloat()-p.y.toFloat();
  113. var height = initialSize.y-dy;
  114. var size = this.resultNode.getSize();
  115. this.heightPercent.list = height/size.y;
  116. if (this.heightPercent.list<0.1) this.heightPercent.list = 0.1;
  117. if (this.heightPercent.list>0.85) this.heightPercent.list = 0.85;
  118. this.heightPercent.preview = 1-this.heightPercent.list;
  119. this.sizeNode_topBottom();
  120. }.bind(this)
  121. });
  122. }
  123. },
  124. setResizeNode_leftRight: function(){
  125. if (this.previewSeparatorNode){
  126. this.resizeDrag = new Drag(this.previewSeparatorNode, {
  127. "onStart": function(el, e){
  128. el.store("position", o2.eventPosition(e));
  129. el.store("initialSize", this.listNode.getSize());
  130. }.bind(this),
  131. "onDrag": function(el, e){
  132. var p = o2.eventPosition(e);
  133. var position = el.retrieve("position");
  134. var initialSize = el.retrieve("initialSize");
  135. var dx = position.x.toFloat()-p.x.toFloat();
  136. var width = initialSize.x-dx;
  137. var size = this.resultNode.getSize();
  138. this.heightPercent.list = width/size.x;
  139. if (this.heightPercent.list<0.1) this.heightPercent.list = 0.1;
  140. if (this.heightPercent.list>0.85) this.heightPercent.list = 0.85;
  141. this.heightPercent.preview = 1-this.heightPercent.list;
  142. this.sizeNode_leftRight();
  143. }.bind(this)
  144. });
  145. }
  146. },
  147. checkFilter: function(e){
  148. if (e.target.hasClass("o2_findDesigner_filterNode_item")) e.target.getElement("input").click();
  149. e.stopPropagation();
  150. },
  151. overKeywordOption: function(e){
  152. if (e.target.hasClass("o2_findDesigner_keywordNode_optionItem")){
  153. if (!e.target.hasClass("optionItem_over")) e.target.addClass("optionItem_over");
  154. }
  155. },
  156. outKeywordOption: function(e){
  157. if (e.target.hasClass("o2_findDesigner_keywordNode_optionItem")) e.target.removeClass("optionItem_over");
  158. },
  159. setCaseSensitive: function(e){
  160. this.filterOption.caseSensitive = !this.filterOption.caseSensitive;
  161. this.caseSensitiveNode.removeClass("caseSensitiveNode_"+!this.filterOption.caseSensitive);
  162. this.caseSensitiveNode.addClass("caseSensitiveNode_"+this.filterOption.caseSensitive);
  163. },
  164. setMatchWholeWord: function(e){
  165. this.filterOption.matchWholeWord = !this.filterOption.matchWholeWord;
  166. this.matchWholeWordNode.removeClass("matchWholeWordNode_"+!this.filterOption.matchWholeWord);
  167. this.matchWholeWordNode.addClass("matchWholeWordNode_"+this.filterOption.matchWholeWord);
  168. },
  169. setMatchRegExp: function(e){
  170. this.filterOption.matchRegExp = !this.filterOption.matchRegExp;
  171. this.matchRegExpNode.removeClass("matchRegExpNode_"+!this.filterOption.matchRegExp);
  172. this.matchRegExpNode.addClass("matchRegExpNode_"+this.filterOption.matchRegExp);
  173. },
  174. changeLayout: function(){
  175. if (this.options.layoutType=="leftRight"){
  176. this.listNode.addClass("listNode");
  177. this.previewNode.addClass("previewNode");
  178. this.previewSeparatorNode.addClass("previewNode_separator");
  179. this.previewTitleNode.addClass("previewNode_title");
  180. this.previewTitleActionNode.addClass("previewNode_title_action");
  181. this.previewContentNode.addClass("previewNode_content");
  182. this.listNode.removeClass("listNode_lr");
  183. this.previewNode.removeClass("previewNode_lr");
  184. this.previewSeparatorNode.removeClass("previewNode_separator_lr");
  185. this.previewTitleNode.removeClass("previewNode_title_lr");
  186. this.previewTitleActionNode.removeClass("previewNode_title_action_lr");
  187. this.previewContentNode.removeClass("previewNode_content_lr");
  188. this.options.layoutType="topBottom";
  189. }else{
  190. this.listNode.removeClass("listNode");
  191. this.previewNode.removeClass("previewNode");
  192. this.previewSeparatorNode.removeClass("previewNode_separator");
  193. this.previewTitleNode.removeClass("previewNode_title");
  194. this.previewTitleActionNode.removeClass("previewNode_title_action");
  195. this.previewContentNode.removeClass("previewNode_content");
  196. this.listNode.addClass("listNode_lr");
  197. this.previewNode.addClass("previewNode_lr");
  198. this.previewSeparatorNode.addClass("previewNode_separator_lr");
  199. this.previewTitleNode.addClass("previewNode_title_lr");
  200. this.previewTitleActionNode.addClass("previewNode_title_action_lr");
  201. this.previewContentNode.addClass("previewNode_content_lr");
  202. this.options.layoutType="leftRight";
  203. }
  204. if (this.sizeNodeFun) this.removeEvent("resize", this.sizeNodeFun);
  205. this.setSizeNode();
  206. }
  207. });