MessageV2.js 9.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285
  1. //o2.require("o2.xDesktop.Message", null, false);
  2. MWF.xDesktop.MessageV2 = new Class({
  3. // Extends: MWF.xDesktop.Message,
  4. Implements: [Events],
  5. initialize: function(desktop){
  6. this.desktop = desktop;
  7. this.container = this.desktop.contentNode;
  8. this.actionNode = this.desktop.msgActionNode;
  9. this.items = [];
  10. this.isShow = false;
  11. this.isMorph = false;
  12. this.unread = 0;
  13. this.itemTemplate ='<div class="layout_message_item_top" data-o2-element="topNode">'+
  14. ' <div class="layout_message_item_top_close icon_msg_close" data-o2-element="closeNode" data-o2-events="click:closeMsg"></div>'+
  15. ' <div class="layout_message_item_top_subject" data-o2-element="subjectNode" title="{{$.msg.subject}}">{{$.msg.subject}}</div>'+
  16. '</div>'+
  17. '<div class="layout_message_item_content" data-o2-element="contentNode"></div>'+
  18. '<div class="layout_message_item_bottom" data-o2-element="bottomNode">'+
  19. ' <div class="layout_message_item_bottom_date" data-o2-element="dateNode"></div>'+
  20. ' <div class="layout_message_item_bottom_action" data-o2-element="actionsNode"></div>'+
  21. '</div>';
  22. },
  23. load: function(){
  24. var path = this.desktop.path+this.desktop.options.style+((o2.session.isMobile || layout.mobile) ? "/layout-message-mobile.html" : "/layout-message-pc.html");
  25. this.container.loadHtml(path, {"bind": {"lp": o2.LP.desktop}, "module": this}, function(){
  26. MWF.require("MWF.widget.ScrollBar", function(){
  27. new MWF.widget.ScrollBar(this.scrollNode, {
  28. "style":"xDesktop_Message", "where": "before", "indent": false, "distance": 100, "friction": 6, "axis": {"x": false, "y": true}
  29. });
  30. }.bind(this));
  31. this.node.addEvent("mousedown", function(e){
  32. e.stopPropagation();
  33. e.preventDefault();
  34. });
  35. this.hideMessage = function(){ this.hide(); }.bind(this);
  36. this.fireEvent("load");
  37. }.bind(this));
  38. },
  39. setPosition: function(){
  40. var size = this.container.getSize();
  41. var position = this.container.getPosition();
  42. this.maskNode.setStyle("height", ""+size.y+"px");
  43. this.node.setStyle("height", ""+size.y+"px");
  44. var y = size.y - 40;
  45. this.scrollNode.setStyle("height", ""+y+"px");
  46. var left = size.x;
  47. var top = position.y
  48. this.maskNode.setStyles({"left": ""+left+"px", "top": "0px"});
  49. this.node.setStyles({"left": ""+left+"px", "top": "0px"});
  50. },
  51. show: function(){
  52. var index = MWF.xDesktop.zIndexPool.zIndex;
  53. // this.css.messageContainerMaskNode["z-index"] = index;
  54. // this.css.messageContainerNode["z-index"] = index;
  55. if (!this.isMorph){
  56. this.isMorph = true;
  57. this.setPosition();
  58. if (!this.morph){
  59. this.maskMorph = new Fx.Morph(this.maskNode, {
  60. duration: "200",
  61. transition: Fx.Transitions.Sine.easeOut
  62. });
  63. this.morph = new Fx.Morph(this.node, {
  64. duration: "200",
  65. transition: Fx.Transitions.Sine.easeOut
  66. });
  67. }
  68. this.maskNode.setStyles({"display": "block", "z-index": index});
  69. this.node.setStyles({"display": "block", "z-index": index});
  70. var position = this.node.getPosition(this.node.getOffsetParent());
  71. var size = this.node.getSize();
  72. var left = position.x-size.x;
  73. this.maskMorph.start({"left": ""+left+"px", "z-index":index});
  74. this.morph.start({"left": ""+left+"px", "z-index":index}).chain(function(){
  75. this.isShow = true;
  76. this.isMorph = false;
  77. this.desktop.desktopNode.addEvent("mousedown", this.hideMessage);
  78. this.fireEvent("show");
  79. }.bind(this));
  80. }
  81. },
  82. hide: function(){
  83. if (!this.isMorph){
  84. this.isMorph = true;
  85. if (!this.morph){
  86. this.maskMorph = new Fx.Morph(this.maskNode, {
  87. duration: "200",
  88. transition: Fx.Transitions.Sine.easeOut
  89. });
  90. this.morph = new Fx.Morph(this.node, {
  91. duration: "200",
  92. transition: Fx.Transitions.Sine.easeOut
  93. });
  94. }
  95. var position = this.node.getPosition(this.node.getOffsetParent());
  96. var size = this.node.getSize();
  97. var left = position.x+size.x;
  98. this.maskMorph.start({"left": ""+left+"px"}).chain(function(){
  99. this.maskNode.setStyle("display", "none");
  100. }.bind(this));
  101. this.morph.start({"left": ""+left+"px"}).chain(function(){
  102. this.node.setStyle("display", "none");
  103. this.isShow = false;
  104. this.isMorph = false;
  105. this.desktop.desktopNode.removeEvent("mousedown", this.hideMessage);
  106. this.fireEvent("hide");
  107. }.bind(this));
  108. }
  109. },
  110. resize: function(){
  111. this.setPosition();
  112. },
  113. clearMessage: function(){
  114. var clearItems = [];
  115. this.items.each(function(item){
  116. if (item.status!="progress") clearItems.push(item);
  117. }.bind(this));
  118. while (clearItems.length){
  119. clearItems[0].close();
  120. clearItems.erase(clearItems[0]);
  121. }
  122. },
  123. addMessage: function(msg, time){
  124. var showTime = (time) ? (new Date()).parse(time) : new Date();
  125. var item = new MWF.xDesktop.Message.Item(this,msg, showTime);
  126. this.items.push(item);
  127. this.addUnread();
  128. return item;
  129. },
  130. addTooltip: function(msg, time){
  131. var showTime = (time) ? (new Date()).parse(time) : new Date();
  132. var tooltop = new MWF.xDesktop.Message.Tooltip(this,msg,showTime);
  133. return tooltop;
  134. },
  135. getUnread: function(){
  136. //获取未读消息列表和数量
  137. return this.unread || 0;
  138. },
  139. setUnread: function(){
  140. //this.actionNode
  141. if (this.unread>0){
  142. if (!this.unreadNode){
  143. this.unreadNode = new Element("div.layout_message_unread_node").inject(this.actionNode);
  144. }
  145. this.unreadNode.set("text", this.unread);
  146. }else{
  147. if (this.unreadNode){
  148. this.unreadNode.destroy();
  149. this.unreadNode = null;
  150. delete this.unreadNode;
  151. }
  152. }
  153. },
  154. addUnread: function(count){
  155. var addCount = count || 1;
  156. this.unread = this.unread+addCount;
  157. this.setUnread();
  158. }
  159. });
  160. MWF.xDesktop.MessageV2.Item = new Class({
  161. Implements: [Events],
  162. initialize: function(message, msg, showTime){
  163. this.message = message;
  164. this.container = this.message.contentNode;
  165. this.css = this.message.css;
  166. this.msg = msg;
  167. this.showTime = showTime;
  168. this.load();
  169. },
  170. load: function(){
  171. //injectHtml
  172. this.node = new Element("div.layout_message_item").inject(this.container, "top");
  173. this.node.injectHtml(this.message.itemTemplate, {"bind": {"msg": this.msg}, "module": this});
  174. this.contentNode.set({"html": this.msg.content});
  175. this.contentNode.set({"title": this.contentNode.get("text")});
  176. this.dateNode.set("text", this.showTime.format("db"));
  177. this.setEvent();
  178. },
  179. setEvent: function(){},
  180. closeMsg: function(e){
  181. this.close(null, e)
  182. },
  183. close: function(callback, e){
  184. //flag = true;
  185. //this.fireEvent("close", [flag, e]);
  186. //alert(flag);
  187. //if (flag){
  188. this.closeItem(callback, e);
  189. //}
  190. },
  191. closeItem: function(callback){
  192. var morph = new Fx.Morph(this.node, {
  193. duration: "200"
  194. // transition: Fx.Transitions.Sine.easeOut
  195. });
  196. var size = this.node.getSize();
  197. this.node.setStyle("height", ""+size.y+"px");
  198. this.message.items.erase(this);
  199. morph.start({
  200. "opacity": 0,
  201. "height": "0px"
  202. }).chain(function(){
  203. this.message.addUnread(-1);
  204. this.node.destroy();
  205. if (callback) callback();
  206. delete this;
  207. }.bind(this));
  208. }
  209. });
  210. MWF.xDesktop.MessageV2.Item.tooltips = [];
  211. MWF.xDesktop.MessageV2.tooltipNode = null;
  212. MWF.xDesktop.MessageV2.Tooltip = new Class({
  213. Extends: MWF.xDesktop.MessageV2.Item,
  214. setEvent: function(){
  215. if (!MWF.xDesktop.MessageV2.tooltipNode){
  216. MWF.xDesktop.MessageV2.tooltipNode = new Element("div.layout_message_tooltipArea").inject(this.message.container);
  217. var toNode = this.message.desktop.contentNode;
  218. MWF.xDesktop.MessageV2.tooltipNode.position({
  219. relativeTo: toNode,
  220. position: "rightTop",
  221. edge: "rightTop"
  222. });
  223. }
  224. this.node.inject(MWF.xDesktop.MessageV2.tooltipNode);
  225. this.node.addClass("layout_message_tooltip_item");
  226. MWF.xDesktop.MessageV2.Item.tooltips.push(this);
  227. window.setTimeout(function(){
  228. this.close(function(){
  229. MWF.xDesktop.MessageV2.Item.tooltips.erase(this);
  230. }.bind(this));
  231. }.bind(this), 10000);
  232. // this.closeNode.addEvents({
  233. // "click": function(){
  234. // this.close(function(){
  235. // MWF.xDesktop.MessageV2.Item.tooltips.erase(this);
  236. // }.bind(this));
  237. // }.bind(this)
  238. // });
  239. },
  240. closeMsg: function(){
  241. this.close(function(){
  242. MWF.xDesktop.MessageV2.Item.tooltips.erase(this);
  243. }.bind(this));
  244. },
  245. closeItem: function(callback){
  246. var morph = new Fx.Morph(this.node, {
  247. duration: "200"
  248. // transition: Fx.Transitions.Sine.easeOut
  249. });
  250. var size = this.node.getSize();
  251. this.node.setStyle("height", ""+size.y+"px");
  252. this.message.items.erase(this);
  253. morph.start({
  254. "opacity": 0,
  255. "height": "0px"
  256. }).chain(function(){
  257. //this.message.addUnread(-1);
  258. this.node.destroy();
  259. if (callback) callback();
  260. delete this;
  261. }.bind(this));
  262. }
  263. });
  264. MWF.xDesktop.Message = MWF.xDesktop.MessageV2;