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