uiutils.js 9.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257
  1. (function (){
  2. var browser = baidu.editor.browser,
  3. domUtils = baidu.editor.dom.domUtils;
  4. var magic = '$EDITORUI';
  5. var root = window[magic] = {};
  6. var uidMagic = 'ID' + magic;
  7. var uidCount = 0;
  8. var uiUtils = baidu.editor.ui.uiUtils = {
  9. uid: function (obj){
  10. return (obj ? obj[uidMagic] || (obj[uidMagic] = ++ uidCount) : ++ uidCount);
  11. },
  12. hook: function ( fn, callback ) {
  13. var dg;
  14. if (fn && fn._callbacks) {
  15. dg = fn;
  16. } else {
  17. dg = function (){
  18. var q;
  19. if (fn) {
  20. q = fn.apply(this, arguments);
  21. }
  22. var callbacks = dg._callbacks;
  23. var k = callbacks.length;
  24. while (k --) {
  25. var r = callbacks[k].apply(this, arguments);
  26. if (q === undefined) {
  27. q = r;
  28. }
  29. }
  30. return q;
  31. };
  32. dg._callbacks = [];
  33. }
  34. dg._callbacks.push(callback);
  35. return dg;
  36. },
  37. createElementByHtml: function (html){
  38. var el = document.createElement('div');
  39. el.innerHTML = html;
  40. el = el.firstChild;
  41. el.parentNode.removeChild(el);
  42. return el;
  43. },
  44. getViewportElement: function (){
  45. return (browser.ie && browser.quirks) ?
  46. document.body : document.documentElement;
  47. },
  48. getClientRect: function (element){
  49. var bcr;
  50. //trace IE6下在控制编辑器显隐时可能会报错,catch一下
  51. try{
  52. bcr = element.getBoundingClientRect();
  53. }catch(e){
  54. bcr={left:0,top:0,height:0,width:0}
  55. }
  56. var rect = {
  57. left: Math.round(bcr.left),
  58. top: Math.round(bcr.top),
  59. height: Math.round(bcr.bottom - bcr.top),
  60. width: Math.round(bcr.right - bcr.left)
  61. };
  62. var doc;
  63. while ((doc = element.ownerDocument) !== document &&
  64. (element = domUtils.getWindow(doc).frameElement)) {
  65. bcr = element.getBoundingClientRect();
  66. rect.left += bcr.left;
  67. rect.top += bcr.top;
  68. }
  69. rect.bottom = rect.top + rect.height;
  70. rect.right = rect.left + rect.width;
  71. return rect;
  72. },
  73. getViewportRect: function (){
  74. var viewportEl = uiUtils.getViewportElement();
  75. var width = (window.innerWidth || viewportEl.clientWidth) | 0;
  76. var height = (window.innerHeight ||viewportEl.clientHeight) | 0;
  77. return {
  78. left: 0,
  79. top: 0,
  80. height: height,
  81. width: width,
  82. bottom: height,
  83. right: width
  84. };
  85. },
  86. setViewportOffset: function (element, offset){
  87. var rect;
  88. var fixedLayer = uiUtils.getFixedLayer();
  89. if (element.parentNode === fixedLayer) {
  90. element.style.left = offset.left + 'px';
  91. element.style.top = offset.top + 'px';
  92. } else {
  93. domUtils.setViewportOffset(element, offset);
  94. }
  95. },
  96. getEventOffset: function (evt){
  97. var el = evt.target || evt.srcElement;
  98. var rect = uiUtils.getClientRect(el);
  99. var offset = uiUtils.getViewportOffsetByEvent(evt);
  100. return {
  101. left: offset.left - rect.left,
  102. top: offset.top - rect.top
  103. };
  104. },
  105. getViewportOffsetByEvent: function (evt){
  106. var el = evt.target || evt.srcElement;
  107. var frameEl = domUtils.getWindow(el).frameElement;
  108. var offset = {
  109. left: evt.clientX,
  110. top: evt.clientY
  111. };
  112. if (frameEl && el.ownerDocument !== document) {
  113. var rect = uiUtils.getClientRect(frameEl);
  114. offset.left += rect.left;
  115. offset.top += rect.top;
  116. }
  117. return offset;
  118. },
  119. setGlobal: function (id, obj){
  120. root[id] = obj;
  121. return magic + '["' + id + '"]';
  122. },
  123. unsetGlobal: function (id){
  124. delete root[id];
  125. },
  126. copyAttributes: function (tgt, src){
  127. var attributes = src.attributes;
  128. var k = attributes.length;
  129. while (k --) {
  130. var attrNode = attributes[k];
  131. if ( attrNode.nodeName != 'style' && attrNode.nodeName != 'class' && (!browser.ie || attrNode.specified) ) {
  132. tgt.setAttribute(attrNode.nodeName, attrNode.nodeValue);
  133. }
  134. }
  135. if (src.className) {
  136. domUtils.addClass(tgt,src.className);
  137. }
  138. if (src.style.cssText) {
  139. tgt.style.cssText += ';' + src.style.cssText;
  140. }
  141. },
  142. removeStyle: function (el, styleName){
  143. if (el.style.removeProperty) {
  144. el.style.removeProperty(styleName);
  145. } else if (el.style.removeAttribute) {
  146. el.style.removeAttribute(styleName);
  147. } else throw '';
  148. },
  149. contains: function (elA, elB){
  150. return elA && elB && (elA === elB ? false : (
  151. elA.contains ? elA.contains(elB) :
  152. elA.compareDocumentPosition(elB) & 16
  153. ));
  154. },
  155. startDrag: function (evt, callbacks,doc){
  156. var doc = doc || document;
  157. var startX = evt.clientX;
  158. var startY = evt.clientY;
  159. function handleMouseMove(evt){
  160. var x = evt.clientX - startX;
  161. var y = evt.clientY - startY;
  162. callbacks.ondragmove(x, y);
  163. if (evt.stopPropagation) {
  164. evt.stopPropagation();
  165. } else {
  166. evt.cancelBubble = true;
  167. }
  168. }
  169. if (doc.addEventListener) {
  170. function handleMouseUp(evt){
  171. doc.removeEventListener('mousemove', handleMouseMove, true);
  172. doc.removeEventListener('mouseup', handleMouseMove, true);
  173. window.removeEventListener('mouseup', handleMouseUp, true);
  174. callbacks.ondragstop();
  175. }
  176. doc.addEventListener('mousemove', handleMouseMove, true);
  177. doc.addEventListener('mouseup', handleMouseUp, true);
  178. window.addEventListener('mouseup', handleMouseUp, true);
  179. evt.preventDefault();
  180. } else {
  181. var elm = evt.srcElement;
  182. elm.setCapture();
  183. function releaseCaptrue(){
  184. elm.releaseCapture();
  185. elm.detachEvent('onmousemove', handleMouseMove);
  186. elm.detachEvent('onmouseup', releaseCaptrue);
  187. elm.detachEvent('onlosecaptrue', releaseCaptrue);
  188. callbacks.ondragstop();
  189. }
  190. elm.attachEvent('onmousemove', handleMouseMove);
  191. elm.attachEvent('onmouseup', releaseCaptrue);
  192. elm.attachEvent('onlosecaptrue', releaseCaptrue);
  193. evt.returnValue = false;
  194. }
  195. callbacks.ondragstart();
  196. },
  197. getFixedLayer: function (){
  198. var layer = document.getElementById('edui_fixedlayer');
  199. if (layer == null) {
  200. layer = document.createElement('div');
  201. layer.id = 'edui_fixedlayer';
  202. document.body.appendChild(layer);
  203. if (browser.ie && browser.version <= 8) {
  204. layer.style.position = 'absolute';
  205. bindFixedLayer();
  206. setTimeout(updateFixedOffset);
  207. } else {
  208. layer.style.position = 'fixed';
  209. }
  210. layer.style.left = '0';
  211. layer.style.top = '0';
  212. layer.style.width = '0';
  213. layer.style.height = '0';
  214. }
  215. return layer;
  216. },
  217. makeUnselectable: function (element){
  218. if (browser.opera || (browser.ie && browser.version < 9)) {
  219. element.unselectable = 'on';
  220. if (element.hasChildNodes()) {
  221. for (var i=0; i<element.childNodes.length; i++) {
  222. if (element.childNodes[i].nodeType == 1) {
  223. uiUtils.makeUnselectable(element.childNodes[i]);
  224. }
  225. }
  226. }
  227. } else {
  228. if (element.style.MozUserSelect !== undefined) {
  229. element.style.MozUserSelect = 'none';
  230. } else if (element.style.WebkitUserSelect !== undefined) {
  231. element.style.WebkitUserSelect = 'none';
  232. } else if (element.style.KhtmlUserSelect !== undefined) {
  233. element.style.KhtmlUserSelect = 'none';
  234. }
  235. }
  236. }
  237. };
  238. function updateFixedOffset(){
  239. var layer = document.getElementById('edui_fixedlayer');
  240. uiUtils.setViewportOffset(layer, {
  241. left: 0,
  242. top: 0
  243. });
  244. // layer.style.display = 'none';
  245. // layer.style.display = 'block';
  246. //#trace: 1354
  247. // setTimeout(updateFixedOffset);
  248. }
  249. function bindFixedLayer(adjOffset){
  250. domUtils.on(window, 'scroll', updateFixedOffset);
  251. domUtils.on(window, 'resize', baidu.editor.utils.defer(updateFixedOffset, 0, true));
  252. }
  253. })();