AlwaysShowToolbar.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
  1. define("dijit/_editor/plugins/AlwaysShowToolbar", [
  2. "dojo/_base/declare", // declare
  3. "dojo/dom-class", // domClass.add domClass.remove
  4. "dojo/dom-construct", // domConstruct.place
  5. "dojo/dom-geometry",
  6. "dojo/_base/lang", // lang.hitch
  7. "dojo/_base/sniff", // has("ie") has("opera")
  8. "dojo/_base/window", // win.body
  9. "../_Plugin"
  10. ], function(declare, domClass, domConstruct, domGeometry, lang, has, win, _Plugin){
  11. /*=====
  12. var _Plugin = dijit._editor._Plugin;
  13. =====*/
  14. // module:
  15. // dijit/_editor/plugins/AlwaysShowToolbar
  16. // summary:
  17. // This plugin is required for Editors in auto-expand mode.
  18. // It handles the auto-expansion as the user adds/deletes text,
  19. // and keeps the editor's toolbar visible even when the top of the editor
  20. // has scrolled off the top of the viewport (usually when editing a long
  21. // document).
  22. return declare("dijit._editor.plugins.AlwaysShowToolbar", _Plugin, {
  23. // summary:
  24. // This plugin is required for Editors in auto-expand mode.
  25. // It handles the auto-expansion as the user adds/deletes text,
  26. // and keeps the editor's toolbar visible even when the top of the editor
  27. // has scrolled off the top of the viewport (usually when editing a long
  28. // document).
  29. // description:
  30. // Specify this in extraPlugins (or plugins) parameter and also set
  31. // height to "".
  32. // example:
  33. // | <div data-dojo-type="dijit.Editor" height=""
  34. // | data-dojo-props="extraPlugins: [dijit._editor.plugins.AlwaysShowToolbar]">
  35. // _handleScroll: Boolean
  36. // Enables/disables the handler for scroll events
  37. _handleScroll: true,
  38. setEditor: function(e){
  39. // Overrides _Plugin.setEditor().
  40. if(!e.iframe){
  41. console.log('Port AlwaysShowToolbar plugin to work with Editor without iframe');
  42. return;
  43. }
  44. this.editor = e;
  45. e.onLoadDeferred.addCallback(lang.hitch(this, this.enable));
  46. },
  47. enable: function(d){
  48. // summary:
  49. // Enable plugin. Called when Editor has finished initializing.
  50. // tags:
  51. // private
  52. this._updateHeight();
  53. this.connect(window, 'onscroll', "globalOnScrollHandler");
  54. this.connect(this.editor, 'onNormalizedDisplayChanged', "_updateHeight");
  55. return d;
  56. },
  57. _updateHeight: function(){
  58. // summary:
  59. // Updates the height of the editor area to fit the contents.
  60. var e = this.editor;
  61. if(!e.isLoaded){ return; }
  62. if(e.height){ return; }
  63. var height = domGeometry.getMarginSize(e.editNode).h;
  64. if(has("opera")){
  65. height = e.editNode.scrollHeight;
  66. }
  67. // console.debug('height',height);
  68. // alert(this.editNode);
  69. //height maybe zero in some cases even though the content is not empty,
  70. //we try the height of body instead
  71. if(!height){
  72. height = domGeometry.getMarginSize(e.document.body).h;
  73. }
  74. if(height == 0){
  75. console.debug("Can not figure out the height of the editing area!");
  76. return; //prevent setting height to 0
  77. }
  78. if(has("ie") <= 7 && this.editor.minHeight){
  79. var min = parseInt(this.editor.minHeight);
  80. if(height < min){ height = min; }
  81. }
  82. if(height != this._lastHeight){
  83. this._lastHeight = height;
  84. // this.editorObject.style.height = this._lastHeight + "px";
  85. domGeometry.setMarginBox(e.iframe, { h: this._lastHeight });
  86. }
  87. },
  88. // _lastHeight: Integer
  89. // Height in px of the editor at the last time we did sizing
  90. _lastHeight: 0,
  91. globalOnScrollHandler: function(){
  92. // summary:
  93. // Handler for scroll events that bubbled up to <html>
  94. // tags:
  95. // private
  96. var isIE6 = has("ie") < 7;
  97. if(!this._handleScroll){ return; }
  98. var tdn = this.editor.header;
  99. if(!this._scrollSetUp){
  100. this._scrollSetUp = true;
  101. this._scrollThreshold = domGeometry.position(tdn, true).y;
  102. // var db = win.body;
  103. // console.log("threshold:", this._scrollThreshold);
  104. //what's this for?? comment out for now
  105. // if((isIE6)&&(db)&&(domStyle.set or get TODO(db, "backgroundIimage")=="none")){
  106. // db.style.backgroundImage = "url(" + dojo.uri.moduleUri("dijit", "templates/blank.gif") + ")";
  107. // db.style.backgroundAttachment = "fixed";
  108. // }
  109. }
  110. var scrollPos = domGeometry.docScroll().y;
  111. var s = tdn.style;
  112. if(scrollPos > this._scrollThreshold && scrollPos < this._scrollThreshold+this._lastHeight){
  113. // dojo.debug(scrollPos);
  114. if(!this._fixEnabled){
  115. var tdnbox = domGeometry.getMarginSize(tdn);
  116. this.editor.iframe.style.marginTop = tdnbox.h+"px";
  117. if(isIE6){
  118. s.left = domGeometry.position(tdn).x;
  119. if(tdn.previousSibling){
  120. this._IEOriginalPos = ['after',tdn.previousSibling];
  121. }else if(tdn.nextSibling){
  122. this._IEOriginalPos = ['before',tdn.nextSibling];
  123. }else{
  124. this._IEOriginalPos = ['last',tdn.parentNode];
  125. }
  126. win.body().appendChild(tdn);
  127. domClass.add(tdn,'dijitIEFixedToolbar');
  128. }else{
  129. s.position = "fixed";
  130. s.top = "0px";
  131. }
  132. domGeometry.setMarginBox(tdn, { w: tdnbox.w });
  133. s.zIndex = 2000;
  134. this._fixEnabled = true;
  135. }
  136. // if we're showing the floating toolbar, make sure that if
  137. // we've scrolled past the bottom of the editor that we hide
  138. // the toolbar for this instance of the editor.
  139. // TODO: when we get multiple editor toolbar support working
  140. // correctly, ensure that we check this against the scroll
  141. // position of the bottom-most editor instance.
  142. var eHeight = (this.height) ? parseInt(this.editor.height) : this.editor._lastHeight;
  143. s.display = (scrollPos > this._scrollThreshold+eHeight) ? "none" : "";
  144. }else if(this._fixEnabled){
  145. this.editor.iframe.style.marginTop = '';
  146. s.position = "";
  147. s.top = "";
  148. s.zIndex = "";
  149. s.display = "";
  150. if(isIE6){
  151. s.left = "";
  152. domClass.remove(tdn,'dijitIEFixedToolbar');
  153. if(this._IEOriginalPos){
  154. domConstruct.place(tdn, this._IEOriginalPos[1], this._IEOriginalPos[0]);
  155. this._IEOriginalPos = null;
  156. }else{
  157. domConstruct.place(tdn, this.editor.iframe, 'before');
  158. }
  159. }
  160. s.width = "";
  161. this._fixEnabled = false;
  162. }
  163. },
  164. destroy: function(){
  165. // Overrides _Plugin.destroy(). TODO: call this.inherited() rather than repeating code.
  166. this._IEOriginalPos = null;
  167. this._handleScroll = false;
  168. this.inherited(arguments);
  169. if(has("ie") < 7){
  170. domClass.remove(this.editor.header, 'dijitIEFixedToolbar');
  171. }
  172. }
  173. });
  174. });