popup.js 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189
  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. var newAll = [];
  15. for ( var i = 0; i < allPopups.length; i++ ) {
  16. var pop = allPopups[i];
  17. if (!pop.isHidden()) {
  18. if (pop.queryAutoHide(el) !== false) {
  19. if(evt&&/scroll/ig.test(evt.type)&&pop.className=="edui-wordpastepop") return;
  20. pop.hide();
  21. }
  22. }
  23. }
  24. }
  25. Popup.postHide = closeAllPopup;
  26. var ANCHOR_CLASSES = ['edui-anchor-topleft','edui-anchor-topright',
  27. 'edui-anchor-bottomleft','edui-anchor-bottomright'];
  28. Popup.prototype = {
  29. SHADOW_RADIUS: 5,
  30. content: null,
  31. _hidden: false,
  32. autoRender: true,
  33. canSideLeft: true,
  34. canSideUp: true,
  35. initPopup: function (){
  36. this.initUIBase();
  37. allPopups.push( this );
  38. },
  39. getHtmlTpl: function (){
  40. return '<div id="##" class="edui-popup %%">' +
  41. ' <div id="##_body" class="edui-popup-body">' +
  42. ' <iframe style="position:absolute;z-index:-1;left:0;top:0;background-color: transparent;" frameborder="0" width="100%" height="100%" src="javascript:"></iframe>' +
  43. ' <div class="edui-shadow"></div>' +
  44. ' <div id="##_content" class="edui-popup-content">' +
  45. this.getContentHtmlTpl() +
  46. ' </div>' +
  47. ' </div>' +
  48. '</div>';
  49. },
  50. getContentHtmlTpl: function (){
  51. if(this.content){
  52. if (typeof this.content == 'string') {
  53. return this.content;
  54. }
  55. return this.content.renderHtml();
  56. }else{
  57. return ''
  58. }
  59. },
  60. _UIBase_postRender: UIBase.prototype.postRender,
  61. postRender: function (){
  62. if (this.content instanceof UIBase) {
  63. this.content.postRender();
  64. }
  65. this.fireEvent('postRenderAfter');
  66. this.hide(true);
  67. this._UIBase_postRender();
  68. },
  69. _doAutoRender: function (){
  70. if (!this.getDom() && this.autoRender) {
  71. this.render();
  72. }
  73. },
  74. mesureSize: function (){
  75. var box = this.getDom('content');
  76. return uiUtils.getClientRect(box);
  77. },
  78. fitSize: function (){
  79. var popBodyEl = this.getDom('body');
  80. popBodyEl.style.width = '';
  81. popBodyEl.style.height = '';
  82. var size = this.mesureSize();
  83. popBodyEl.style.width = size.width + 'px';
  84. popBodyEl.style.height = size.height + 'px';
  85. return size;
  86. },
  87. showAnchor: function ( element, hoz ){
  88. this.showAnchorRect( uiUtils.getClientRect( element ), hoz );
  89. },
  90. showAnchorRect: function ( rect, hoz, adj ){
  91. this._doAutoRender();
  92. var vpRect = uiUtils.getViewportRect();
  93. this._show();
  94. var popSize = this.fitSize();
  95. var sideLeft, sideUp, left, top;
  96. if (hoz) {
  97. sideLeft = this.canSideLeft && (rect.right + popSize.width > vpRect.right && rect.left > popSize.width);
  98. sideUp = this.canSideUp && (rect.top + popSize.height > vpRect.bottom && rect.bottom > popSize.height);
  99. left = (sideLeft ? rect.left - popSize.width : rect.right);
  100. top = (sideUp ? rect.bottom - popSize.height : rect.top);
  101. } else {
  102. sideLeft = this.canSideLeft && (rect.right + popSize.width > vpRect.right && rect.left > popSize.width);
  103. sideUp = this.canSideUp && (rect.top + popSize.height > vpRect.bottom && rect.bottom > popSize.height);
  104. left = (sideLeft ? rect.right - popSize.width : rect.left);
  105. top = (sideUp ? rect.top - popSize.height : rect.bottom);
  106. }
  107. var popEl = this.getDom();
  108. uiUtils.setViewportOffset(popEl, {
  109. left: left,
  110. top: top
  111. });
  112. domUtils.removeClasses(popEl, ANCHOR_CLASSES);
  113. popEl.className += ' ' + ANCHOR_CLASSES[(sideUp ? 1 : 0) * 2 + (sideLeft ? 1 : 0)];
  114. if(this.editor){
  115. popEl.style.zIndex = this.editor.container.style.zIndex * 1 + 10;
  116. baidu.editor.ui.uiUtils.getFixedLayer().style.zIndex = popEl.style.zIndex - 1;
  117. }
  118. },
  119. showAt: function (offset) {
  120. var left = offset.left;
  121. var top = offset.top;
  122. var rect = {
  123. left: left,
  124. top: top,
  125. right: left,
  126. bottom: top,
  127. height: 0,
  128. width: 0
  129. };
  130. this.showAnchorRect(rect, false, true);
  131. },
  132. _show: function (){
  133. if (this._hidden) {
  134. var box = this.getDom();
  135. box.style.display = '';
  136. this._hidden = false;
  137. // if (box.setActive) {
  138. // box.setActive();
  139. // }
  140. this.fireEvent('show');
  141. }
  142. },
  143. isHidden: function (){
  144. return this._hidden;
  145. },
  146. show: function (){
  147. this._doAutoRender();
  148. this._show();
  149. },
  150. hide: function (notNofity){
  151. if (!this._hidden && this.getDom()) {
  152. // this.getDom().style.visibility = 'hidden';
  153. this.getDom().style.display = 'none';
  154. this._hidden = true;
  155. if (!notNofity) {
  156. this.fireEvent('hide');
  157. }
  158. }
  159. },
  160. queryAutoHide: function (el){
  161. return !el || !uiUtils.contains(this.getDom(), el);
  162. }
  163. };
  164. utils.inherits(Popup, UIBase);
  165. domUtils.on( document, 'mousedown', function ( evt ) {
  166. var el = evt.target || evt.srcElement;
  167. closeAllPopup( evt,el );
  168. } );
  169. domUtils.on( window, 'scroll', function (evt,el) {
  170. closeAllPopup( evt,el );
  171. } );
  172. // var lastVpRect = uiUtils.getViewportRect();
  173. // domUtils.on( window, 'resize', function () {
  174. // var vpRect = uiUtils.getViewportRect();
  175. // if (vpRect.width != lastVpRect.width || vpRect.height != lastVpRect.height) {
  176. // closeAllPopup();
  177. // }
  178. // } );
  179. })();