popup.js 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. ///import core
  2. ///import uicore
  3. (function () {
  4. var utils = baidu.editor.utils,
  5. uiUtils = baidu.editor.ui.uiUtils,
  6. domUtils = baidu.editor.dom.domUtils,
  7. UIBase = baidu.editor.ui.UIBase,
  8. Popup = baidu.editor.ui.Popup = function (options){
  9. this.initOptions(options);
  10. this.initPopup();
  11. };
  12. var allPopups = [];
  13. function closeAllPopup( evt,el ){
  14. for ( var i = 0; i < allPopups.length; i++ ) {
  15. var pop = allPopups[i];
  16. if (!pop.isHidden()) {
  17. if (pop.queryAutoHide(el) !== false) {
  18. if(evt&&/scroll/ig.test(evt.type)&&pop.className=="edui-wordpastepop") return;
  19. pop.hide();
  20. }
  21. }
  22. }
  23. if(allPopups.length)
  24. pop.editor.fireEvent("afterhidepop");
  25. }
  26. Popup.postHide = closeAllPopup;
  27. var ANCHOR_CLASSES = ['edui-anchor-topleft','edui-anchor-topright',
  28. 'edui-anchor-bottomleft','edui-anchor-bottomright'];
  29. Popup.prototype = {
  30. SHADOW_RADIUS: 5,
  31. content: null,
  32. _hidden: false,
  33. autoRender: true,
  34. canSideLeft: true,
  35. canSideUp: true,
  36. initPopup: function (){
  37. this.initUIBase();
  38. allPopups.push( this );
  39. },
  40. getHtmlTpl: function (){
  41. return '<div id="##" class="edui-popup %%" onmousedown="return false;">' +
  42. ' <div id="##_body" class="edui-popup-body">' +
  43. ' <iframe style="position:absolute;z-index:-1;left:0;top:0;background-color: transparent;" frameborder="0" width="100%" height="100%" src="about:blank"></iframe>' +
  44. ' <div class="edui-shadow"></div>' +
  45. ' <div id="##_content" class="edui-popup-content">' +
  46. this.getContentHtmlTpl() +
  47. ' </div>' +
  48. ' </div>' +
  49. '</div>';
  50. },
  51. getContentHtmlTpl: function (){
  52. if(this.content){
  53. if (typeof this.content == 'string') {
  54. return this.content;
  55. }
  56. return this.content.renderHtml();
  57. }else{
  58. return ''
  59. }
  60. },
  61. _UIBase_postRender: UIBase.prototype.postRender,
  62. postRender: function (){
  63. if (this.content instanceof UIBase) {
  64. this.content.postRender();
  65. }
  66. //捕获鼠标滚轮
  67. if( this.captureWheel && !this.captured ) {
  68. this.captured = true;
  69. var winHeight = ( document.documentElement.clientHeight || document.body.clientHeight ) - 80,
  70. _height = this.getDom().offsetHeight,
  71. _top = uiUtils.getClientRect( this.combox.getDom() ).top,
  72. content = this.getDom('content'),
  73. ifr = this.getDom('body').getElementsByTagName('iframe'),
  74. me = this;
  75. ifr.length && ( ifr = ifr[0] );
  76. while( _top + _height > winHeight ) {
  77. _height -= 30;
  78. }
  79. content.style.height = _height + 'px';
  80. //同步更改iframe高度
  81. ifr && ( ifr.style.height = _height + 'px' );
  82. //阻止在combox上的鼠标滚轮事件, 防止用户的正常操作被误解
  83. if( window.XMLHttpRequest ) {
  84. domUtils.on( content, ( 'onmousewheel' in document.body ) ? 'mousewheel' :'DOMMouseScroll' , function(e){
  85. if(e.preventDefault) {
  86. e.preventDefault();
  87. } else {
  88. e.returnValue = false;
  89. }
  90. if( e.wheelDelta ) {
  91. content.scrollTop -= ( e.wheelDelta / 120 )*60;
  92. } else {
  93. content.scrollTop -= ( e.detail / -3 )*60;
  94. }
  95. });
  96. } else {
  97. //ie6
  98. domUtils.on( this.getDom(), 'mousewheel' , function(e){
  99. e.returnValue = false;
  100. me.getDom('content').scrollTop -= ( e.wheelDelta / 120 )*60;
  101. });
  102. }
  103. }
  104. this.fireEvent('postRenderAfter');
  105. this.hide(true);
  106. this._UIBase_postRender();
  107. },
  108. _doAutoRender: function (){
  109. if (!this.getDom() && this.autoRender) {
  110. this.render();
  111. }
  112. },
  113. mesureSize: function (){
  114. var box = this.getDom('content');
  115. return uiUtils.getClientRect(box);
  116. },
  117. fitSize: function (){
  118. if( this.captureWheel && this.sized ) {
  119. return this.__size;
  120. }
  121. this.sized = true;
  122. var popBodyEl = this.getDom('body');
  123. popBodyEl.style.width = '';
  124. popBodyEl.style.height = '';
  125. var size = this.mesureSize();
  126. if( this.captureWheel ) {
  127. popBodyEl.style.width = -(-20 -size.width) + 'px';
  128. var height = parseInt( this.getDom('content').style.height, 10 );
  129. !window.isNaN( height ) && ( size.height = height );
  130. } else {
  131. popBodyEl.style.width = size.width + 'px';
  132. }
  133. popBodyEl.style.height = size.height + 'px';
  134. this.__size = size;
  135. this.captureWheel && (this.getDom('content').style.overflow = 'auto');
  136. return size;
  137. },
  138. showAnchor: function ( element, hoz ){
  139. this.showAnchorRect( uiUtils.getClientRect( element ), hoz );
  140. },
  141. showAnchorRect: function ( rect, hoz, adj ){
  142. this._doAutoRender();
  143. var vpRect = uiUtils.getViewportRect();
  144. this.getDom().style.visibility = 'hidden';
  145. this._show();
  146. var popSize = this.fitSize();
  147. var sideLeft, sideUp, left, top;
  148. if (hoz) {
  149. sideLeft = this.canSideLeft && (rect.right + popSize.width > vpRect.right && rect.left > popSize.width);
  150. sideUp = this.canSideUp && (rect.top + popSize.height > vpRect.bottom && rect.bottom > popSize.height);
  151. left = (sideLeft ? rect.left - popSize.width : rect.right);
  152. top = (sideUp ? rect.bottom - popSize.height : rect.top);
  153. } else {
  154. sideLeft = this.canSideLeft && (rect.right + popSize.width > vpRect.right && rect.left > popSize.width);
  155. sideUp = this.canSideUp && (rect.top + popSize.height > vpRect.bottom && rect.bottom > popSize.height);
  156. left = (sideLeft ? rect.right - popSize.width : rect.left);
  157. top = (sideUp ? rect.top - popSize.height : rect.bottom);
  158. }
  159. var popEl = this.getDom();
  160. uiUtils.setViewportOffset(popEl, {
  161. left: left,
  162. top: top
  163. });
  164. domUtils.removeClasses(popEl, ANCHOR_CLASSES);
  165. popEl.className += ' ' + ANCHOR_CLASSES[(sideUp ? 1 : 0) * 2 + (sideLeft ? 1 : 0)];
  166. if(this.editor){
  167. popEl.style.zIndex = this.editor.container.style.zIndex * 1 + 10;
  168. baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex = popEl.style.zIndex - 1;
  169. }
  170. this.getDom().style.visibility = 'visible';
  171. },
  172. showAt: function (offset) {
  173. var left = offset.left;
  174. var top = offset.top;
  175. var rect = {
  176. left: left,
  177. top: top,
  178. right: left,
  179. bottom: top,
  180. height: 0,
  181. width: 0
  182. };
  183. this.showAnchorRect(rect, false, true);
  184. },
  185. _show: function (){
  186. if (this._hidden) {
  187. var box = this.getDom();
  188. box.style.display = '';
  189. this._hidden = false;
  190. // if (box.setActive) {
  191. // box.setActive();
  192. // }
  193. this.fireEvent('show');
  194. }
  195. },
  196. isHidden: function (){
  197. return this._hidden;
  198. },
  199. show: function (){
  200. this._doAutoRender();
  201. this._show();
  202. },
  203. hide: function (notNofity){
  204. if (!this._hidden && this.getDom()) {
  205. this.getDom().style.display = 'none';
  206. this._hidden = true;
  207. if (!notNofity) {
  208. this.fireEvent('hide');
  209. }
  210. }
  211. },
  212. queryAutoHide: function (el){
  213. return !el || !uiUtils.contains(this.getDom(), el);
  214. }
  215. };
  216. utils.inherits(Popup, UIBase);
  217. domUtils.on( document, 'mousedown', function ( evt ) {
  218. var el = evt.target || evt.srcElement;
  219. closeAllPopup( evt,el );
  220. } );
  221. domUtils.on( window, 'scroll', function (evt,el) {
  222. closeAllPopup( evt,el );
  223. } );
  224. })();