MTooltips.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755
  1. var MTooltips = new Class({
  2. Extends: MWF.widget.Common,
  3. Implements: [Options, Events],
  4. options : {
  5. style : "", //如果有style,就加载 style/css.wcss
  6. axis: "y", //箭头在x轴还是y轴上展现
  7. position : { //node 固定的位置
  8. x : "auto", //x轴上left center right, auto 系统自动计算
  9. y : "auto" //y 轴上top middle bottom, auto 系统自动计算
  10. },
  11. priorityOfAuto :{
  12. x : [ "center", "right", "left" ], //当position x 为 auto 时候的优先级
  13. y : [ "middle", "bottom", "top" ] //当position y 为 auto 时候的优先级
  14. },
  15. isFitToContainer : true, //当position x 不为 auto, y 不为 auto 的时候,自动设置偏移量,使tooltip不超过容器的可见范围
  16. event : "mouseenter", //事件类型,有target 时有效, mouseenter对应mouseleave,click 对应 container 的 click
  17. hiddenDelay : 200, //ms , 有target 且 事件类型为 mouseenter 时有效
  18. displayDelay : 0, //ms , 有target 且事件类型为 mouseenter 时有效
  19. hasArrow : true,
  20. isAutoShow : true,
  21. isAutoHide : true,
  22. hasCloseAction : false,
  23. overflow : "hidden" //弹出框高宽超过container的时候怎么处理,hidden 表示超过的隐藏,scroll 表示超过的时候显示滚动条
  24. },
  25. initialize : function( container, target, app, data, options, targetCoordinates ){
  26. //可以传入target 或者 targetCoordinates,两种选一
  27. //传入target,表示触发tooltip的节点,本类根据 this.options.event 自动绑定target的事件
  28. //传入targetCoordinates,表示 出发tooltip的位置,本类不绑定触发事件
  29. if( options ){
  30. this.setOptions(options);
  31. }
  32. this.container = container;
  33. this.target = target;
  34. this.targetCoordinates = targetCoordinates;
  35. this.app = app;
  36. if(app)this.lp = app.lp;
  37. this.data = data;
  38. this.path = "/x_component_Template/$MTooltips/";
  39. if( this.target ){
  40. this.setTargetEvents();
  41. }
  42. this.fireEvent("postInitialize",[this]);
  43. },
  44. setTargetEvents : function(){
  45. if( this.options.event == "click" ){
  46. if( this.options.isAutoShow ){
  47. this.target.addEvents({
  48. "click": function( ev ){
  49. this.load();
  50. ev.stopPropagation();
  51. }.bind(this)
  52. });
  53. }
  54. }else{
  55. if( this.options.isAutoHide || this.options.isAutoShow ){
  56. this.target.addEvents({
  57. "mouseenter": function(){
  58. if( this.timer_hide ){
  59. clearTimeout(this.timer_hide);
  60. }
  61. }.bind(this)
  62. });
  63. }
  64. if( this.options.isAutoShow ){
  65. this.target.addEvents({
  66. "mouseenter": function(){
  67. if( this.status != "display" ){
  68. this.timer_show = setTimeout( this.load.bind(this),this.options.displayDelay );
  69. }
  70. }.bind(this)
  71. });
  72. }
  73. if( this.options.isAutoHide || this.options.isAutoShow ){
  74. this.target.addEvents({
  75. "mouseleave" : function(){
  76. if( this.timer_show ){
  77. clearTimeout(this.timer_show);
  78. }
  79. }.bind(this)
  80. });
  81. }
  82. if( this.options.isAutoHide ){
  83. this.target.addEvents({
  84. "mouseleave" : function(){
  85. if( this.status == "display" ){
  86. this.timer_hide = setTimeout( this.hide.bind(this),this.options.hiddenDelay );
  87. }
  88. }.bind(this)
  89. });
  90. }
  91. }
  92. },
  93. load: function(){
  94. this.fireEvent("queryLoad",[this]);
  95. if( this.isEnable() ){
  96. if( this.node ){
  97. this.show();
  98. }else{
  99. this.create();
  100. }
  101. }
  102. this.fireEvent("postLoad",[this]);
  103. },
  104. hide: function(){
  105. if( this.node ){
  106. this.node.setStyle("display","none");
  107. this.status = "hidden";
  108. if( this.maskNode ){
  109. this.maskNode.setStyle("display","none");
  110. }
  111. this.fireEvent("hide",[this]);
  112. }
  113. },
  114. show: function(){
  115. this.status = "display";
  116. if( this.maskNode ){
  117. this.maskNode.setStyle("display","");
  118. }
  119. this.node.setStyle("display","");
  120. this.setCoondinates();
  121. this.fireEvent("show",[this]);
  122. },
  123. create: function(){
  124. this.status = "display";
  125. this.fireEvent("queryCreate",[this]);
  126. this.loadStyle();
  127. this.node = new Element("div.tooltipNode", {
  128. styles : this.nodeStyles
  129. }).inject( this.container );
  130. if( this.contentNode ){
  131. this.contentNode.inject( this.node );
  132. }else{
  133. this.contentNode = new Element("div",{
  134. styles : this.contentStyles
  135. }).inject( this.node );
  136. this.contentNode.set("html", this._getHtml() );
  137. }
  138. this._customNode( this.node, this.contentNode );
  139. if( this.options.hasArrow ){
  140. this.arrowNode = new Element("div.arrowNode", {
  141. "styles": this.arrowStyles
  142. }
  143. ).inject(this.node);
  144. }
  145. if( this.options.hasCloseAction ){
  146. this.closeActionNode = new Element("div", {
  147. styles : this.closeActionStyles,
  148. events : {
  149. click : function(){ this.hide() }.bind(this)
  150. }
  151. }).inject( this.node );
  152. }
  153. this._loadCustom( function(){
  154. this.setCoondinates();
  155. }.bind(this));
  156. if( this.options.event == "click" ) {
  157. if( this.options.isAutoHide ){
  158. this.maskNode = new Element("div.maskNode", {
  159. "styles": this.maskStyles,
  160. "events": {
  161. "mouseover": function (e) {
  162. e.stopPropagation();
  163. },
  164. "mouseout": function (e) {
  165. e.stopPropagation();
  166. },
  167. "click": function (e) {
  168. this.hide();
  169. e.stopPropagation();
  170. }.bind(this)
  171. }
  172. }).inject( this.container );
  173. if( this.app ){
  174. this.hideFun_resize = this.hide.bind(this);
  175. this.app.addEvent( "resize" , this.hideFun_resize );
  176. }
  177. }
  178. }else{
  179. if( this.options.isAutoHide || this.options.isAutoShow ){
  180. this.node.addEvents({
  181. "mouseenter": function(){
  182. if( this.timer_hide )clearTimeout(this.timer_hide);
  183. }.bind(this)
  184. });
  185. }
  186. if( this.options.isAutoHide ){
  187. this.node.addEvents({
  188. "mouseleave" : function(){
  189. this.timer_hide = setTimeout( this.hide.bind(this),this.options.hiddenDelay );
  190. }.bind(this)
  191. });
  192. }
  193. }
  194. //this.target.addEvent( "mouseleave", function(){
  195. // this.timer_hide = setTimeout( this.hide.bind(this), this.options.HiddenDelay );
  196. //}.bind(this));
  197. this.fireEvent("postCreate",[this]);
  198. },
  199. loadStyle : function(){
  200. if( this.options.style ){
  201. this.cssPath = this.path+this.options.style+"/css.wcss";
  202. this._loadCss();
  203. }
  204. this.nodeStyles = {
  205. "font-size" : "12px",
  206. "position" : "absolute",
  207. "max-width" : "500px",
  208. "min-width" : "260px",
  209. "z-index" : "11",
  210. "background-color" : "#fff",
  211. "padding" : "10px",
  212. "border-radius" : "8px",
  213. "box-shadow": "0 0 18px 0 #999999",
  214. "-webkit-user-select": "text",
  215. "-moz-user-select": "text"
  216. };
  217. if( this.options.nodeStyles ){ //兼容之前在options里设置nodeStyles
  218. this.nodeStyles = Object.merge( this.nodeStyles, this.options.nodeStyles );
  219. }else if( this.css && this.css.nodeStyles ){
  220. this.nodeStyles = this.css.nodeStyles
  221. }
  222. if( this.css && this.css.contentStyles ){
  223. this.contentStyles = this.css.contentStyles;
  224. }else{
  225. this.contentStyles = {
  226. "width" : "100%",
  227. "height" : "100%"
  228. }
  229. }
  230. if( this.options.hasArrow ){
  231. if( this.css && this.css.arrowStyles ){
  232. this.arrowStyles = this.css.arrowStyles
  233. }else{
  234. this.arrowStyles = {
  235. "width": this.options.axis == "x" ? "9px" : "17px",
  236. "height" : this.options.axis == "x" ? "17px" : "9px",
  237. "position":"absolute",
  238. "background" : "no-repeat url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAAlCAYAAACgc9J8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAP9JREFUeNq01oENhCAMBdCWuIgTuP8WOoGj9GhSDaeUfjiuCSEm+iKFVllESGNdVzrPk55xHIfewHnItm1MrVDMG/u+i0aeyWZp3R9CJRaBIWRB5YUHItAL80AEqmI1EIFcrAQ1rwjUxEoQgULsAue+2ayc/W83p5+z6RXggOO1WQGhrsFXP/Oip58tAaQTZ4QMbEbyEB2GCKEBdtpmru4NsC4aHg8PLJ/3lim2xDv02jYDz1kNQsGEQgiYeqAQBPuZQF1jFKqBYTn1RLK1D4+v3E3NGfgNkJlfdKi0XrUZgc1OWyt0Dwz/z37tGhA20s+WR4t+1iBbzTJyaD8CDAB7WgNSzh/AnwAAAABJRU5ErkJggg==)"
  239. }
  240. }
  241. }
  242. if( this.options.event == "click" && this.options.isAutoHide ) {
  243. if( this.css && this.css.maskStyles ){
  244. this.maskStyles = this.css.maskStyles;
  245. }else{
  246. this.maskStyles = {
  247. "width": "100%",
  248. "height": "100%",
  249. "opacity": 0,
  250. "position": "absolute",
  251. "background-color": "#fff",
  252. "top": "0px",
  253. "left": "0px"
  254. }
  255. }
  256. }
  257. if( this.options.hasCloseAction ){
  258. if( this.css && this.css.closeActionStyles ){
  259. this.closeActionStyles = this.css.closeActionStyles
  260. }else{
  261. this.closeActionStyles = {
  262. "width": "24px",
  263. "height" : "24px",
  264. "position" : "absolute",
  265. "top": "0px",
  266. "right" : "0px",
  267. "background": "url(/x_component_Template/$MTooltips/default/icon/off_gray.png) no-repeat center center",
  268. "cursor": "pointer"
  269. }
  270. }
  271. }
  272. },
  273. isEnable : function(){
  274. return !this.disable;
  275. },
  276. setCoondinates : function(){
  277. if( this.options.axis == "x" ){
  278. this.setCoondinates_x();
  279. }else{
  280. this.setCoondinates_y();
  281. }
  282. },
  283. setCoondinates_x : function(){
  284. var targetCoondinates = this.target ? this.target.getCoordinates( this.container ) : this.targetCoordinates ;
  285. var node = this.node;
  286. if( this.resetWidth ){
  287. node.setStyles({
  288. overflow : "visible",
  289. width : "auto"
  290. });
  291. if(this.arrowNode)this.arrowNode.setStyle("display","");
  292. this.resetWidth = false;
  293. }
  294. var containerScroll = this.container.getScroll();
  295. var containerSize = this.container.getSize();
  296. var nodeSize = node.getSize();
  297. var left;
  298. var arrowX, arrowY;
  299. var offsetX = this.options.hasArrow ? 10 : 0;
  300. if( this.options.position.x == "left" ) {
  301. left = targetCoondinates.left - nodeSize.x - offsetX;
  302. arrowX = "right";
  303. }else if( this.options.position.x == "right" ){
  304. left = targetCoondinates.right + offsetX;
  305. arrowX = "left";
  306. }else{
  307. var priorityOfAuto = this.options.priorityOfAuto;
  308. if( priorityOfAuto && priorityOfAuto.x ){
  309. for( var i=0; i<priorityOfAuto.x.length; i++ ){
  310. if( priorityOfAuto.x[i] == "left" ){
  311. if( targetCoondinates.left - containerScroll.x > containerSize.x - targetCoondinates.right){
  312. left = targetCoondinates.left - nodeSize.x - offsetX;
  313. arrowX = "right";
  314. break;
  315. }
  316. }
  317. if( priorityOfAuto.x[i] == "right" ){
  318. if( containerSize.x + containerScroll.x - targetCoondinates.right > nodeSize.x ){
  319. left = targetCoondinates.right + offsetX;
  320. arrowX = "left";
  321. break;
  322. }
  323. }
  324. }
  325. }
  326. if( !left ){
  327. if( targetCoondinates.left - containerScroll.x > containerSize.x - targetCoondinates.right){
  328. left = targetCoondinates.left - nodeSize.x - offsetX;
  329. arrowX = "right";
  330. }else{
  331. left = targetCoondinates.right + offsetX;
  332. arrowX = "left";
  333. }
  334. }
  335. }
  336. var top;
  337. if( this.options.position.y == "middle" ){
  338. top = targetCoondinates.top + (targetCoondinates.height/2) - ( nodeSize.y / 2 ) ;
  339. arrowY = "middle";
  340. }else if( this.options.position.y == "top" ){
  341. top = targetCoondinates.bottom - nodeSize.y;
  342. arrowY = "bottom";
  343. }else if( this.options.position.y == "bottom" ){
  344. top = targetCoondinates.top;
  345. arrowY = "top";
  346. }else{
  347. var priorityOfAuto = this.options.priorityOfAuto;
  348. if( priorityOfAuto && priorityOfAuto.y ){
  349. for( var i=0; i<priorityOfAuto.y.length; i++ ){
  350. if( priorityOfAuto.y[i] == "middle" ){
  351. if( targetCoondinates.top + (targetCoondinates.height/2) - ( nodeSize.y / 2 ) > containerScroll.y &&
  352. targetCoondinates.bottom - (targetCoondinates.height/2) + ( nodeSize.y / 2 ) - containerScroll.y < containerSize.y ){
  353. top = targetCoondinates.top + (targetCoondinates.height/2) - ( nodeSize.y / 2 ) ;
  354. arrowY = "middle";
  355. break;
  356. }
  357. }
  358. if( priorityOfAuto.y[i] == "top" ){
  359. if( targetCoondinates.top - containerScroll.y > containerSize.y - targetCoondinates.bottom ){
  360. top = targetCoondinates.bottom - nodeSize.y;
  361. arrowY = "bottom";
  362. break;
  363. }
  364. }
  365. if( priorityOfAuto.y[i] == "bottom" ){
  366. if( containerSize.y + containerScroll.y - targetCoondinates.bottom > nodeSize.y ){
  367. top = targetCoondinates.top;
  368. arrowY = "top";
  369. break;
  370. }
  371. }
  372. }
  373. }
  374. if( !top ){
  375. if( targetCoondinates.top + (targetCoondinates.height/2) - ( nodeSize.y / 2 ) > containerScroll.y &&
  376. targetCoondinates.bottom - (targetCoondinates.height/2) + ( nodeSize.y / 2 ) - containerScroll.y < containerSize.y ){
  377. top = targetCoondinates.top + (targetCoondinates.height/2) - ( nodeSize.y / 2 ) ;
  378. arrowY = "middle";
  379. } else if( targetCoondinates.top - containerScroll.y > containerSize.y - targetCoondinates.bottom ){
  380. top = targetCoondinates.bottom - nodeSize.y;
  381. arrowY = "bottom";
  382. }else{
  383. top = targetCoondinates.top;
  384. arrowY = "top";
  385. }
  386. }
  387. }
  388. var arrowOffsetY = 0;
  389. if( this.options.isFitToContainer ){
  390. if( top < containerScroll.y ){
  391. arrowOffsetY = containerScroll.y - top;
  392. top = containerScroll.y;
  393. }else if( top + nodeSize.y > containerSize.y + containerScroll.y ){
  394. arrowOffsetY = containerSize.y + containerScroll.y - top - nodeSize.y;
  395. top = containerSize.y + containerScroll.y - nodeSize.y;
  396. }
  397. }
  398. if( this.options.overflow == "scroll" ){
  399. if( left < 0 ){
  400. node.setStyles({
  401. "overflow" : "auto",
  402. "width" : nodeSize.x + left - offsetX
  403. });
  404. this.resetWidth = true;
  405. left = 0
  406. }else if( left + nodeSize.x > containerSize.x + containerScroll.x ){
  407. node.setStyles({
  408. "overflow" : "auto",
  409. "width" : Math.abs( containerSize.x + containerScroll.x - left + offsetX )
  410. });
  411. left = left - offsetX;
  412. this.resetWidth = true;
  413. }
  414. }
  415. if( this.resetWidth ){
  416. if( this.arrowNode )this.arrowNode.setStyle("display","none");
  417. }else if( this.options.hasArrow && this.arrowNode ) {
  418. if (arrowX == "left") {
  419. this.arrowNode.setStyles({
  420. "left": "-8px",
  421. "right": "auto",
  422. "background-position": "0px 0px"
  423. });
  424. } else {
  425. this.arrowNode.setStyles({
  426. "left": "auto",
  427. "right": "-8px",
  428. "background-position": "-11px 0px"
  429. });
  430. }
  431. var ah = this.arrowNode.getSize().y / 2;
  432. //var th = targetCoondinates.height / 2 - ah;
  433. var h = Math.min(targetCoondinates.height, nodeSize.y) / 2 - ah;
  434. var radiusDv = 0; //圆角和箭头偏移量的差值
  435. var radius = 0;
  436. if (arrowY == "middle") {
  437. this.arrowNode.setStyles({
  438. "top": (nodeSize.y / 2 - ah) - arrowOffsetY + "px",
  439. "bottom": "auto"
  440. })
  441. } else if (arrowY == "top") {
  442. radius = this.node.getStyle("border-top-" + arrowX + "-radius");
  443. radius = radius ? parseInt(radius) : 0;
  444. if (radius > h) {
  445. radiusDv = radius - h;
  446. }
  447. this.arrowNode.setStyles({
  448. "top": h + radiusDv - arrowOffsetY + "px",
  449. "bottom": "auto"
  450. })
  451. } else {
  452. radius = this.node.getStyle("border-bottom-" + arrowX + "-radius");
  453. radius = radius ? parseInt(radius) : 0;
  454. if (radius > h) {
  455. radiusDv = radius - h;
  456. }
  457. this.arrowNode.setStyles({
  458. "top": "auto",
  459. "bottom": h + radiusDv + arrowOffsetY + "px"
  460. })
  461. }
  462. var t = top;
  463. if (radiusDv) {
  464. if (arrowY == "top") {
  465. t = t - radiusDv;
  466. } else if (arrowY == "bottom") {
  467. t = t + radiusDv;
  468. }
  469. }
  470. }
  471. node.setStyles({
  472. "left" : left,
  473. "top" : t || top
  474. });
  475. },
  476. setCoondinates_y : function(){
  477. var targetCoondinates = this.target ? this.target.getCoordinates( this.container ) : this.targetCoordinates ;
  478. var node = this.node;
  479. if( this.resetHeight ){
  480. node.setStyles({
  481. overflow : "visible",
  482. height : "auto"
  483. });
  484. if(this.arrowNode)this.arrowNode.setStyle("display","");
  485. this.resetHeight = false;
  486. }
  487. var containerScroll = this.container.getScroll();
  488. var containerSize = this.container.getSize();
  489. var nodeSize = node.getSize();
  490. var top;
  491. var arrowX, arrowY;
  492. var offsetY = this.options.hasArrow ? 10 : 0;
  493. if( this.options.position.y == "top" ){
  494. top = targetCoondinates.top - nodeSize.y - offsetY;
  495. arrowY = "bottom";
  496. }else if( this.options.position.y == "bottom" ){
  497. top = targetCoondinates.bottom + offsetY;
  498. arrowY = "top";
  499. }else{
  500. var priorityOfAuto = this.options.priorityOfAuto;
  501. if( priorityOfAuto && priorityOfAuto.y ){
  502. for( var i=0; i<priorityOfAuto.y.length; i++ ){
  503. if( priorityOfAuto.y[i] == "top" ){
  504. if( targetCoondinates.top - containerScroll.y > containerSize.y - targetCoondinates.bottom ){
  505. top = targetCoondinates.top - nodeSize.y - offsetY;
  506. arrowY = "bottom";
  507. break;
  508. }
  509. }
  510. if( priorityOfAuto.y[i] == "bottom" ){
  511. if( containerSize.y + containerScroll.y - targetCoondinates.bottom > nodeSize.y ){
  512. top = targetCoondinates.bottom + offsetY;
  513. arrowY = "top";
  514. break;
  515. }
  516. }
  517. }
  518. }
  519. if( !top ){
  520. if( targetCoondinates.top - containerScroll.y > containerSize.y - targetCoondinates.bottom){
  521. top = targetCoondinates.top - nodeSize.y - offsetY;
  522. arrowY = "bottom";
  523. }else{
  524. top = targetCoondinates.bottom + offsetY;
  525. arrowY = "top";
  526. }
  527. }
  528. }
  529. var left;
  530. if( this.options.position.x == "center" ){
  531. left = targetCoondinates.left + (targetCoondinates.width/2) - ( nodeSize.x / 2 ) ;
  532. arrowX = "center";
  533. }else if( this.options.position.x == "left" ){
  534. left = targetCoondinates.right - nodeSize.x;
  535. arrowX = "right";
  536. }else if( this.options.position.x == "right" ){
  537. left = targetCoondinates.left;
  538. arrowX = "left";
  539. }else{
  540. var priorityOfAuto = this.options.priorityOfAuto;
  541. if( priorityOfAuto && priorityOfAuto.x ){
  542. for( var i=0; i<priorityOfAuto.x.length; i++ ){
  543. if( priorityOfAuto.x[i] == "center" ){
  544. if( targetCoondinates.left + (targetCoondinates.width/2) - ( nodeSize.x / 2 ) > containerScroll.x &&
  545. targetCoondinates.right - (targetCoondinates.width/2) + ( nodeSize.x / 2 ) - containerScroll.x < containerSize.x ){
  546. left = targetCoondinates.left + (targetCoondinates.width/2) - ( nodeSize.x / 2 ) ;
  547. arrowX = "center";
  548. break;
  549. }
  550. }
  551. if( priorityOfAuto.x[i] == "left" ){
  552. if( targetCoondinates.left - containerScroll.x > containerSize.x - targetCoondinates.right){
  553. left = targetCoondinates.right - nodeSize.x;
  554. arrowX = "right";
  555. break;
  556. }
  557. }
  558. if( priorityOfAuto.x[i] == "right" ){
  559. if( containerSize.x + containerScroll.x - targetCoondinates.right > nodeSize.x ){
  560. left = targetCoondinates.left;
  561. arrowX = "left";
  562. break;
  563. }
  564. }
  565. }
  566. }
  567. if( !left ){
  568. if( targetCoondinates.left + (targetCoondinates.width/2) - ( nodeSize.x / 2 ) > containerScroll.x &&
  569. targetCoondinates.right - (targetCoondinates.width/2) + ( nodeSize.x / 2 ) - containerScroll.x < containerSize.x ){
  570. left = targetCoondinates.left + (targetCoondinates.width/2) - ( nodeSize.x / 2 ) ;
  571. arrowX = "center";
  572. } else if( targetCoondinates.left - containerScroll.x > containerSize.x - targetCoondinates.right ){
  573. left = targetCoondinates.right - nodeSize.x;
  574. arrowX = "right";
  575. }else{
  576. left = targetCoondinates.left;
  577. arrowX = "left";
  578. }
  579. }
  580. }
  581. var arrowOffsetX = 0;
  582. if( this.options.isFitToContainer ){
  583. if( left < containerScroll.x ){
  584. arrowOffsetX = containerScroll.x - left;
  585. left = containerScroll.x;
  586. }else if( left + nodeSize.x > containerSize.x + containerScroll.x ){
  587. arrowOffsetX = containerSize.x + containerScroll.x - left - nodeSize.x;
  588. left = containerSize.x + containerScroll.x - nodeSize.x;
  589. }
  590. }
  591. if( this.options.overflow == "scroll" ){
  592. if( top < 0 ){
  593. node.setStyles({
  594. "overflow" : "auto",
  595. "height" : nodeSize.y + top - offsetY
  596. });
  597. this.resetHeight = true;
  598. top = 0
  599. }else if( top + nodeSize.y > containerSize.y + containerScroll.y ){
  600. node.setStyles({
  601. "overflow" : "auto",
  602. "height" : Math.abs( containerSize.y + containerScroll.y - top + offsetY )
  603. });
  604. top = top - offsetY;
  605. this.resetHeight = true;
  606. }
  607. }
  608. if( this.resetHeight ){
  609. if( this.arrowNode )this.arrowNode.setStyle("display","none");
  610. }else if( this.options.hasArrow && this.arrowNode ){
  611. if( arrowY == "top" ){
  612. this.arrowNode.setStyles( {
  613. "top" : "-8px",
  614. "bottom" : "auto",
  615. "background-position": "0px -18px"
  616. });
  617. }else{
  618. this.arrowNode.setStyles( {
  619. "top" : "auto",
  620. "bottom" : "-8px",
  621. "background-position": "0px -28px"
  622. });
  623. }
  624. var aw = this.arrowNode.getSize().x / 2 ;
  625. //var tw = targetCoondinates.width / 2 - aw;
  626. var w = Math.min( targetCoondinates.width , nodeSize.x )/ 2 - aw;
  627. var radiusDv = 0; //圆角和箭头偏移量的差值
  628. var radius = 0; //圆角值
  629. if( arrowX == "center" ) {
  630. this.arrowNode.setStyles({
  631. "left": (nodeSize.x/2 - aw - arrowOffsetX )+"px",
  632. "right": "auto"
  633. })
  634. }else if( arrowX == "left" ){
  635. radius = this.node.getStyle("border-"+arrowY+"-left-radius");
  636. radius = radius ? parseInt( radius ) : 0;
  637. if( radius > w ){
  638. radiusDv = radius - w;
  639. }
  640. this.arrowNode.setStyles({
  641. "left" : w + radiusDv - arrowOffsetX + "px",
  642. "right" : "auto"
  643. })
  644. }else{
  645. radius = this.node.getStyle("border-" + arrowY + "-right-radius");
  646. radius = radius ? parseInt(radius) : 0;
  647. if( radius > w ){
  648. radiusDv = radius - w;
  649. }
  650. this.arrowNode.setStyles({
  651. "left" : "auto",
  652. "right" : w + radiusDv + arrowOffsetX +"px"
  653. })
  654. }
  655. var l = left;
  656. if( radiusDv ){
  657. if( arrowX == "left" ){
  658. l = l - radiusDv;
  659. }else if( arrowX == "right" ){
  660. l = l + radiusDv;
  661. }
  662. }
  663. }
  664. node.setStyles({
  665. "left" : l || left,
  666. "top" : top
  667. });
  668. },
  669. destroy: function(){
  670. //if( this.options.event == "click" && this.node ){
  671. // this.container.removeEvent("mousedown",this.hideFun );
  672. //}
  673. if( this.options.event == "click" && this.app && this.hideFun_resize ){
  674. this.app.removeEvent("resize",this.hideFun_resize );
  675. }
  676. if( this.node ){
  677. this.node.destroy();
  678. this.node = null;
  679. }
  680. this.fireEvent("destroy",[this]);
  681. MWF.release(this);
  682. },
  683. _getHtml : function(){
  684. //var data = this.data;
  685. //var titleStyle = "font-size:14px;color:#333";
  686. //var valueStyle = "font-size:14px;color:#666;padding-right:20px";
  687. //var persons = [];
  688. //data.invitePersonList.each( function( p ){
  689. // persons.push(p.split("@")[0] )
  690. //}.bind(this));
  691. //
  692. //var html =
  693. // "<div style='overflow: hidden;padding:15px 20px 20px 10px;height:16px;line-height:16px;'>" +
  694. // " <div style='font-size: 12px;color:#666; float: right'>"+ this.lp.applyPerson +":" + data.applicant.split("@")[0] +"</div>" +
  695. // " <div style='font-size: 16px;color:#333;float: left'>"+ this.lp.meetingDetail +"</div>"+
  696. // "</div>"+
  697. // "<div style='font-size: 18px;color:#333;padding:0px 10px 15px 20px;'>"+ data.subject +"</div>"+
  698. // "<div style='height:1px;margin:0px 20px;border-bottom:1px solid #ccc;'></div>"+
  699. // "<table width='100%' bordr='0' cellpadding='7' cellspacing='0' style='margin:13px 13px 13px 13px;'>" +
  700. // "<tr><td style='"+titleStyle+"' width='70'>"+this.lp.beginTime+":</td>" +
  701. // " <td style='"+valueStyle+"'>" + data.startTime + "</td></tr>" +
  702. // "<tr><td style='"+titleStyle+"'>"+this.lp.endTime+":</td>" +
  703. // " <td style='"+valueStyle+"'>" + data.completedTime + "</td></tr>" +
  704. // "<tr><td style='"+titleStyle+"'>"+this.lp.selectRoom +":</td>" +
  705. // " <td style='"+valueStyle+"' item='meetingRoom'></td></tr>" +
  706. // "<tr><td style='"+titleStyle+"'>"+this.lp.invitePerson2+":</td>" +
  707. // " <td style='"+valueStyle+"' item='invitePerson'>"+persons.join(",")+"</td></tr>" +
  708. // "<tr><td style='"+titleStyle+"'>"+this.lp.meetingDescription+":</td>" +
  709. // " <td style='"+valueStyle+"'>"+ data.description +"</td></tr>" +
  710. // "<tr><td style='"+titleStyle+"'>"+this.lp.meetingAttachment+":</td>" +
  711. // " <td style='"+valueStyle+"' item='attachment'></td></tr>"+
  712. // "</table>";
  713. return "";
  714. },
  715. _customNode : function( node, contentNode ){
  716. },
  717. _setContent : function( contentNode ){
  718. this.contentNode = contentNode;
  719. if( this.node ){
  720. this.node.empty();
  721. this.contentNode.inject( this.node );
  722. }
  723. },
  724. _loadCustom : function( callback ){
  725. if(callback)callback();
  726. }
  727. });