Navi.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. MWF.xApplication.Forum.Navi = new Class({
  2. Extends: MWF.widget.Common,
  3. Implements: [Options, Events],
  4. options : {
  5. "style" : "default",
  6. "id" :"" ,
  7. "type" : "all"
  8. },
  9. initialize: function(app, container, options){
  10. this.setOptions(options);
  11. this.path = "/x_component_Forum/$Navi/";
  12. this.cssPath = "/x_component_Forum/$Navi/"+this.options.style+"/css.wcss";
  13. this._loadCss();
  14. this.app = app;
  15. this.container = $(container);
  16. },
  17. load: function(){
  18. var self = this;
  19. this.node = new Element("div.naviNode", {
  20. "styles": this.css.naviNode
  21. }).inject(this.container);
  22. this.allItem = new MWF.xApplication.Forum.AllItem( this, this.node );
  23. this.recommandItem = new MWF.xApplication.Forum.RecommandItem( this, this.node );
  24. this.categoryItemList = [];
  25. MWF.Actions.get("x_bbs_assemble_control").listCategoryAll( function( json ) {
  26. (json.data || []).each(function (d) {
  27. var categoryItem = new MWF.xApplication.Forum.CategoryItem(this, this.node,d );
  28. this.categoryItemList.push( categoryItem );
  29. this.fireEvent("postLoad");
  30. }.bind(this))
  31. }.bind(this))
  32. }
  33. });
  34. MWF.xApplication.Forum.CategoryItem = new Class({
  35. initialize: function ( navi, container, data ) {
  36. this.type = "category";
  37. this.navi = navi;
  38. this.app = navi.app;
  39. this.data = data;
  40. this.container = $(container);
  41. this.css = navi.css;
  42. this.load();
  43. },
  44. load: function () {
  45. var _self = this;
  46. this.isCurrent = false;
  47. this.isExpended = true;
  48. this.hasSub = true;
  49. this.sectionItemList = [];
  50. if( this.navi.options.id == this.data.id && this.navi.options.type == "category" ){
  51. this.isCurrent = true;
  52. }
  53. this.node = new Element("div.categoryNode", {
  54. "styles": this.css.categoryNode
  55. }).inject(this.container);
  56. this.expendNode = new Element("div.categoryExpendNode").inject(this.node);
  57. this.setExpendNodeStyle();
  58. if( this.hasSub ){
  59. this.expendNode.addEvent( "click" , function(ev){
  60. this.triggerExpend();
  61. ev.stopPropagation();
  62. }.bind(this));
  63. }
  64. this.textNode = new Element("div.categoryTextNode",{
  65. "styles": this.css.categoryTextNode,
  66. "text": this.data.forumName
  67. }).inject(this.node);
  68. this.node.addEvents({
  69. "mouseover": function(){ if ( !_self.isCurrent )this.setStyles(_self.css.categoryNode_over) },
  70. "mouseout": function(){ if ( !_self.isCurrent )this.setStyles( _self.css.categoryNode ) },
  71. click : function(){ _self.setCurrent(this);}
  72. });
  73. this.listNode = new Element("div.sectionListNode",{
  74. "styles" : this.css.sectionListNode
  75. }).inject(this.container);
  76. this.loadListContent();
  77. if( this.isCurrent ){
  78. this.setCurrent();
  79. }
  80. },
  81. setExpendNodeStyle : function(){
  82. var style;
  83. if( this.hasSub ){
  84. if( this.isExpended ){
  85. if( this.isCurrent ){
  86. style = this.css.categoryExpendNode_selected;
  87. }else{
  88. style = this.css.categoryExpendNode;
  89. }
  90. }else{
  91. if( this.isCurrent ){
  92. style = this.css.categoryCollapseNode_selected;
  93. }else{
  94. style = this.css.categoryCollapseNode;
  95. }
  96. }
  97. }else{
  98. style = this.css.emptyExpendNode;
  99. }
  100. this.expendNode.setStyles( style );
  101. },
  102. triggerExpend : function(){
  103. if( this.hasSub ){
  104. if( this.isExpended ){
  105. this.isExpended = false;
  106. this.listNode.setStyle("display","none")
  107. }else{
  108. this.isExpended = true;
  109. this.listNode.setStyle("display","")
  110. }
  111. this.setExpendNodeStyle();
  112. }
  113. },
  114. setCurrent : function(){
  115. if( this.navi.currentItem ){
  116. this.navi.currentItem.cancelCurrent();
  117. }
  118. this.node.setStyles( this.css.categoryNode_selected );
  119. if( this.hasSub ){
  120. if( this.isExpended ){
  121. this.expendNode.setStyles( this.css.categoryExpendNode_selected );
  122. }else{
  123. this.expendNode.setStyles( this.css.categoryCollapseNode_selected );
  124. }
  125. }
  126. this.isCurrent = true;
  127. this.navi.currentItem = this;
  128. this.loadView();
  129. },
  130. cancelCurrent : function(){
  131. this.isCurrent = false;
  132. this.node.setStyles( this.css.categoryNode );
  133. if( this.hasSub ){
  134. if( this.isExpended ){
  135. this.expendNode.setStyles( this.css.categoryExpendNode );
  136. }else{
  137. this.expendNode.setStyles( this.css.categoryCollapseNode );
  138. }
  139. }
  140. },
  141. loadView: function( searchkey ){
  142. this.app.openView( this, this.data, this.viewData || this.defaultRevealData, searchkey || "", this );
  143. },
  144. loadListContent : function(){
  145. var d = this.data;
  146. if(d.forumStatus != "停用" ){
  147. MWF.Actions.get("x_bbs_assemble_control").listSection(d.id , function ( json ) {
  148. (json.data || []).each( function( sectiondata ){
  149. var sectionItem = new MWF.xApplication.Forum.SectionItem(this.navi, this, this.listNode, sectiondata );
  150. this.sectionItemList.push( sectionItem );
  151. }.bind(this))
  152. }.bind(this));
  153. }
  154. new Element("div", {
  155. "styles": this.css.categorySepartorNode
  156. }).inject( this.listNode );
  157. },
  158. getCategoryId : function(){
  159. return this.data.id;
  160. }
  161. });
  162. MWF.xApplication.Forum.SectionItem = new Class({
  163. initialize: function ( navi, category, container, data) {
  164. this.type = "section";
  165. this.navi = navi;
  166. this.category = category;
  167. this.app = navi.app;
  168. this.data = data;
  169. this.container = $(container);
  170. this.css = navi.css;
  171. this.load();
  172. },
  173. load: function(){
  174. var _self = this;
  175. this.isCurrent = false;
  176. if( this.navi.options.type == "section" && this.navi.options.id == this.data.id ){
  177. this.isCurrent = true;
  178. }
  179. var _self = this;
  180. this.node = new Element("div.sectionNode", {
  181. "styles": this.css.sectionNode,
  182. "text" : this.data.sectionName
  183. }).inject(this.container);
  184. this.node.addEvents({
  185. "mouseover": function(){ if (!_self.isCurrent)this.setStyles(_self.css.sectionNode_over) },
  186. "mouseout": function(){ if (!_self.isCurrent)this.setStyles( _self.css.sectionNode ) },
  187. "click": function (el) {
  188. _self.setCurrent();
  189. }
  190. });
  191. if( this.isCurrent ){
  192. this.setCurrent()
  193. }
  194. },
  195. setCurrent : function(){
  196. if( this.navi.currentItem ){
  197. this.navi.currentItem.cancelCurrent();
  198. }
  199. this.node.setStyles( this.css.sectionNode_selected );
  200. this.isCurrent = true;
  201. this.navi.currentItem = this;
  202. this.loadView();
  203. },
  204. cancelCurrent : function(){
  205. this.isCurrent = false;
  206. this.node.setStyles( this.css.sectionNode );
  207. },
  208. getCategoryId : function(){
  209. return this.category.data.id;
  210. },
  211. loadView : function( searchKey ){
  212. this.app.openView( this, this.category.data, this.data, searchKey || "", this );
  213. }
  214. });
  215. MWF.xApplication.Forum.AllItem = new Class({
  216. initialize: function ( navi, container) {
  217. this.type = "all";
  218. this.navi = navi;
  219. this.app = navi.app;
  220. this.container = $(container);
  221. this.css = navi.css;
  222. this.load();
  223. },
  224. load: function(){
  225. var _self = this;
  226. this.isCurrent = false;
  227. if( this.navi.options.type == "all" ){
  228. this.isCurrent = true;
  229. }
  230. var _self = this;
  231. this.node = new Element("div.allNode", {
  232. "styles": this.css.allNode,
  233. "text" : "全部帖子"
  234. }).inject(this.container);
  235. this.node.addEvents({
  236. "mouseover": function(){ if (!_self.isCurrent)this.setStyles(_self.css.allNode_over) },
  237. "mouseout": function(){ if (!_self.isCurrent)this.setStyles( _self.css.allNode ) },
  238. "click": function (el) {
  239. _self.setCurrent();
  240. }
  241. });
  242. if( this.isCurrent ){
  243. this.setCurrent()
  244. }
  245. },
  246. setCurrent : function(){
  247. if( this.navi.currentItem ){
  248. this.navi.currentItem.cancelCurrent();
  249. }
  250. this.node.setStyles( this.css.allNode_selected );
  251. this.isCurrent = true;
  252. this.navi.currentItem = this;
  253. this.loadView();
  254. },
  255. cancelCurrent : function(){
  256. this.isCurrent = false;
  257. this.node.setStyles( this.css.allNode );
  258. },
  259. getCategoryId : function(){
  260. return null;
  261. },
  262. loadView : function( searchKey ){
  263. this.app.openView( this, null, this.data, searchKey || "", this );
  264. }
  265. });
  266. MWF.xApplication.Forum.RecommandItem = new Class({
  267. initialize: function ( navi, container) {
  268. this.type = "recommand";
  269. this.navi = navi;
  270. this.app = navi.app;
  271. this.container = $(container);
  272. this.css = navi.css;
  273. this.load();
  274. },
  275. load: function(){
  276. var _self = this;
  277. this.isCurrent = false;
  278. if( this.navi.options.type == "recommand" ){
  279. this.isCurrent = true;
  280. }
  281. var _self = this;
  282. this.node = new Element("div.recommandNode", {
  283. "styles": this.css.recommandNode,
  284. "text" : "推荐帖子"
  285. }).inject(this.container);
  286. this.node.addEvents({
  287. "mouseover": function(){ if (!_self.isCurrent)this.setStyles(_self.css.recommandNode_over) },
  288. "mouseout": function(){ if (!_self.isCurrent)this.setStyles( _self.css.recommandNode ) },
  289. "click": function (el) {
  290. _self.setCurrent();
  291. }
  292. });
  293. if( this.isCurrent ){
  294. this.setCurrent()
  295. }
  296. },
  297. setCurrent : function(){
  298. if( this.navi.currentItem ){
  299. this.navi.currentItem.cancelCurrent();
  300. }
  301. this.node.setStyles( this.css.recommandNode_selected );
  302. this.isCurrent = true;
  303. this.navi.currentItem = this;
  304. this.loadView();
  305. },
  306. cancelCurrent : function(){
  307. this.isCurrent = false;
  308. this.node.setStyles( this.css.recommandNode );
  309. },
  310. getCategoryId : function(){
  311. return null;
  312. },
  313. loadView : function( searchKey ){
  314. this.app.openView( this, null, this.data, searchKey || "", this );
  315. }
  316. });