' + this.get('header') + '
'), + node = Y.Node.create('' + data.userinfo.fullname + '\'s Gallery Items
'); + } + Y.each(data.modules, function(v) { + node.append('"+this.get("header")+"
"),D=A.Node.create("'+E.userinfo.fullname+"'s Gallery Items
");}A.each(E.modules,function(I){D.append('' + this.get('header') + '
'), + node = Y.Node.create('' + data.userinfo.fullname + '\'s Gallery Items
'); + } + Y.each(data.modules, function(v) { + node.append('+ * The beforeunload event is not standard, yet it is useful enough that + * most browsers support it to some degree. But they are not consistent + * about how it operates. This module supplants any existing DOM0 + * onbeforelistener because DOM2 style listeners won't work across + * the A grade at this time. + *
+ * + *+ * You can attempt to prevent the user from leaving the page by calling + * preventDefault on the event object. The user will be presented with + * a dialog to see whether or not they want to allow this. You can provide + * a message to preventDefault, and this will override the default message + * in the dialog if it is provided. + *
+ * + *
+ * Y.on('beforeunload', function(e) {
+ * &nbws;&nbws;e.returnValue = "Please don't go.";
+ * });
+ *
+ *
+ * @event beforeunload
+ * @for YUI
+ * @param type {string} 'beforeunload'
+ * @param fn {function} the callback function to execute.
+ * @param context optional argument that specifies what 'this' refers to.
+ * @param args* 0..n additional arguments to pass on to the callback function.
+ * These arguments will be added after the event object.
+ */
+Y.Env.evt.plugins.beforeunload = {
+ on: function(type, fn) {
+ var a = Y.Array(arguments, 0, true);
+ a[0] = INTERNAL_EVENT_NAME;
+ return Y.on.apply(Y, a);
+ }
+};
+
+
+}, 'gallery-2009.11.02-20' ,{requires:['event-base']});
diff --git a/build/gallery-beforeunload/gallery-beforeunload-min.js b/build/gallery-beforeunload/gallery-beforeunload-min.js
new file mode 100644
index 0000000000..7cac896151
--- /dev/null
+++ b/build/gallery-beforeunload/gallery-beforeunload-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-beforeunload",function(C){var B="gallery-dom0beforeunload",A=window.onbeforeunload;window.onbeforeunload=function(E){var G=E||window.event;if(A){A(G);}var D=new C.DOMEventFacade(G),F;C.fire(B,D);F=D.returnValue;G.returnValue=F;return F;};C.Env.evt.plugins.beforeunload={on:function(F,E){var D=C.Array(arguments,0,true);D[0]=B;return C.on.apply(C,D);}};},"gallery-2009.11.02-20",{requires:["event-base"]});
\ No newline at end of file
diff --git a/build/gallery-beforeunload/gallery-beforeunload.js b/build/gallery-beforeunload/gallery-beforeunload.js
new file mode 100644
index 0000000000..1a71e7d851
--- /dev/null
+++ b/build/gallery-beforeunload/gallery-beforeunload.js
@@ -0,0 +1,63 @@
+YUI.add('gallery-beforeunload', function(Y) {
+
+/**
+ * DOM0 beforeunload event listener support.
+ * @module gallery-beforeunload
+ */
+
+var INTERNAL_EVENT_NAME = 'gallery-dom0beforeunload',
+ supplantedHandler = window.onbeforeunload;
+
+window.onbeforeunload = function(ev) {
+ var e = ev || window.event;
+ if (supplantedHandler) {
+ supplantedHandler(e);
+ }
+ var facade = new Y.DOMEventFacade(e), retVal;
+ Y.fire(INTERNAL_EVENT_NAME, facade);
+ retVal = facade.returnValue;
+ e.returnValue = retVal;
+ return retVal;
+};
+
+/**
+ * + * The beforeunload event is not standard, yet it is useful enough that + * most browsers support it to some degree. But they are not consistent + * about how it operates. This module supplants any existing DOM0 + * onbeforelistener because DOM2 style listeners won't work across + * the A grade at this time. + *
+ * + *+ * You can attempt to prevent the user from leaving the page by calling + * preventDefault on the event object. The user will be presented with + * a dialog to see whether or not they want to allow this. You can provide + * a message to preventDefault, and this will override the default message + * in the dialog if it is provided. + *
+ * + *
+ * Y.on('beforeunload', function(e) {
+ * &nbws;&nbws;e.returnValue = "Please don't go.";
+ * });
+ *
+ *
+ * @event beforeunload
+ * @for YUI
+ * @param type {string} 'beforeunload'
+ * @param fn {function} the callback function to execute.
+ * @param context optional argument that specifies what 'this' refers to.
+ * @param args* 0..n additional arguments to pass on to the callback function.
+ * These arguments will be added after the event object.
+ */
+Y.Env.evt.plugins.beforeunload = {
+ on: function(type, fn) {
+ var a = Y.Array(arguments, 0, true);
+ a[0] = INTERNAL_EVENT_NAME;
+ return Y.on.apply(Y, a);
+ }
+};
+
+
+}, 'gallery-2009.11.02-20' ,{requires:['event-base']});
diff --git a/build/gallery-bitly/gallery-bitly-debug.js b/build/gallery-bitly/gallery-bitly-debug.js
new file mode 100644
index 0000000000..8c5f4a4543
--- /dev/null
+++ b/build/gallery-bitly/gallery-bitly-debug.js
@@ -0,0 +1,108 @@
+YUI.add('gallery-bitly', function(Y) {
+
+
+
+ var B = function(config) {
+ B.superclass.constructor.call(this, config);
+ };
+
+ B.NAME = 'bitly';
+
+ B.ATTRS = {
+ username: {
+ value: ''
+ },
+ key: {
+ value: ''
+ }
+ };
+
+ Y.extend(B, Y.Base, {
+ api: 'http:/'+'/api.bit.ly/',
+ initializer: function() {
+ if (!this.get('key') || !this.get('username')) {
+ Y.error('You must give a username and an API key. If you do not have an apiKey, sign up for a bitly account and go to your Account page to get your apiKey. (http:/'+'/bit.ly/)');
+ }
+ },
+ destructor: function() {
+ },
+ _buildURL: function(path, param) {
+ return this.api + path + '?version=2.0.1&login=' + this.get('username') + '&apiKey=' + this.get('key') + '&' + param;
+ },
+ _handleAPI: function(name, url, cb) {
+ Y.log('handleAPI: ' + name + ' : ' + url, 'info');
+
+ var stamp = Y.guid().replace(/-/g,'_');
+
+ YUI[stamp] = Y.bind(function(e) {
+ if (e.results) {
+ if (name == 'stats') {
+ this.fire(name, e.results);
+ if (cb) {
+ cb = Y.bind(cb, this);
+ cb(e.results);
+ }
+ } else {
+ Y.each(e.results, function(v) {
+ this.fire(name, v);
+ if (cb) {
+ cb = Y.bind(cb, this);
+ cb(v);
+ }
+ }, this);
+ }
+ }
+ delete YUI[stamp];
+ }, this);
+
+ Y.Get.script(url + '&callback=YUI.' + stamp);
+ },
+ shorten: function(url, cb) {
+ var api = this._buildURL('shorten', 'longUrl=' + encodeURIComponent(url));
+ this._handleAPI('shorten', api, cb);
+ },
+ expand: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('expand', path);
+
+ this._handleAPI('expand', api, cb);
+
+ },
+ expandByURL: function(v, cb) {
+ return this.expand({ url: v }, cb);
+ },
+ expandByHash: function(v, cb) {
+ return this.expand({ hash: v }, cb);
+ },
+ info: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('info', path);
+
+ this._handleAPI('info', api, cb);
+
+ },
+ infoByURL: function(v, cb) {
+ return this.info({ url: v }, cb);
+ },
+ infoByHash: function(v, cb) {
+ return this.info({ hash: v }, cb);
+ },
+ stats: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('stats', path);
+
+ this._handleAPI('stats', api, cb);
+
+ },
+ statsByURL: function(v, cb) {
+ return this.stats({ url: v }, cb);
+ },
+ statsByHash: function(v, cb) {
+ return this.stats({ hash: v }, cb);
+ }
+ });
+
+ Y.bitly = B;
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['base','get']});
diff --git a/build/gallery-bitly/gallery-bitly-min.js b/build/gallery-bitly/gallery-bitly-min.js
new file mode 100644
index 0000000000..765d647a02
--- /dev/null
+++ b/build/gallery-bitly/gallery-bitly-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-bitly",function(A){var C=function(B){C.superclass.constructor.call(this,B);};C.NAME="bitly";C.ATTRS={username:{value:""},key:{value:""}};A.extend(C,A.Base,{api:"http:/"+"/api.bit.ly/",initializer:function(){if(!this.get("key")||!this.get("username")){A.error("You must give a username and an API key. If you do not have an apiKey, sign up for a bitly account and go to your Account page to get your apiKey. (http:/"+"/bit.ly/)");}},destructor:function(){},_buildURL:function(B,D){return this.api+B+"?version=2.0.1&login="+this.get("username")+"&apiKey="+this.get("key")+"&"+D;},_handleAPI:function(E,D,B){var F=A.guid().replace(/-/g,"_");YUI[F]=A.bind(function(G){if(G.results){if(E=="stats"){this.fire(E,G.results);if(B){B=A.bind(B,this);B(G.results);}}else{A.each(G.results,function(H){this.fire(E,H);if(B){B=A.bind(B,this);B(H);}},this);}}delete YUI[F];},this);A.Get.script(D+"&callback=YUI."+F);},shorten:function(D,B){var E=this._buildURL("shorten","longUrl="+encodeURIComponent(D));this._handleAPI("shorten",E,B);},expand:function(F,B){var E=((F.url)?"shortUrl="+encodeURIComponent(F.url):"hash="+F.hash),D=this._buildURL("expand",E);this._handleAPI("expand",D,B);},expandByURL:function(D,B){return this.expand({url:D},B);},expandByHash:function(D,B){return this.expand({hash:D},B);},info:function(F,B){var E=((F.url)?"shortUrl="+encodeURIComponent(F.url):"hash="+F.hash),D=this._buildURL("info",E);this._handleAPI("info",D,B);},infoByURL:function(D,B){return this.info({url:D},B);},infoByHash:function(D,B){return this.info({hash:D},B);},stats:function(F,B){var E=((F.url)?"shortUrl="+encodeURIComponent(F.url):"hash="+F.hash),D=this._buildURL("stats",E);this._handleAPI("stats",D,B);},statsByURL:function(D,B){return this.stats({url:D},B);},statsByHash:function(D,B){return this.stats({hash:D},B);}});A.bitly=C;},"gallery-2009.11.09-19",{requires:["base","get"]});
\ No newline at end of file
diff --git a/build/gallery-bitly/gallery-bitly.js b/build/gallery-bitly/gallery-bitly.js
new file mode 100644
index 0000000000..4210902d13
--- /dev/null
+++ b/build/gallery-bitly/gallery-bitly.js
@@ -0,0 +1,107 @@
+YUI.add('gallery-bitly', function(Y) {
+
+
+
+ var B = function(config) {
+ B.superclass.constructor.call(this, config);
+ };
+
+ B.NAME = 'bitly';
+
+ B.ATTRS = {
+ username: {
+ value: ''
+ },
+ key: {
+ value: ''
+ }
+ };
+
+ Y.extend(B, Y.Base, {
+ api: 'http:/'+'/api.bit.ly/',
+ initializer: function() {
+ if (!this.get('key') || !this.get('username')) {
+ Y.error('You must give a username and an API key. If you do not have an apiKey, sign up for a bitly account and go to your Account page to get your apiKey. (http:/'+'/bit.ly/)');
+ }
+ },
+ destructor: function() {
+ },
+ _buildURL: function(path, param) {
+ return this.api + path + '?version=2.0.1&login=' + this.get('username') + '&apiKey=' + this.get('key') + '&' + param;
+ },
+ _handleAPI: function(name, url, cb) {
+
+ var stamp = Y.guid().replace(/-/g,'_');
+
+ YUI[stamp] = Y.bind(function(e) {
+ if (e.results) {
+ if (name == 'stats') {
+ this.fire(name, e.results);
+ if (cb) {
+ cb = Y.bind(cb, this);
+ cb(e.results);
+ }
+ } else {
+ Y.each(e.results, function(v) {
+ this.fire(name, v);
+ if (cb) {
+ cb = Y.bind(cb, this);
+ cb(v);
+ }
+ }, this);
+ }
+ }
+ delete YUI[stamp];
+ }, this);
+
+ Y.Get.script(url + '&callback=YUI.' + stamp);
+ },
+ shorten: function(url, cb) {
+ var api = this._buildURL('shorten', 'longUrl=' + encodeURIComponent(url));
+ this._handleAPI('shorten', api, cb);
+ },
+ expand: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('expand', path);
+
+ this._handleAPI('expand', api, cb);
+
+ },
+ expandByURL: function(v, cb) {
+ return this.expand({ url: v }, cb);
+ },
+ expandByHash: function(v, cb) {
+ return this.expand({ hash: v }, cb);
+ },
+ info: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('info', path);
+
+ this._handleAPI('info', api, cb);
+
+ },
+ infoByURL: function(v, cb) {
+ return this.info({ url: v }, cb);
+ },
+ infoByHash: function(v, cb) {
+ return this.info({ hash: v }, cb);
+ },
+ stats: function(p, cb) {
+ var path = ((p.url) ? 'shortUrl=' + encodeURIComponent(p.url) : 'hash=' + p.hash),
+ api = this._buildURL('stats', path);
+
+ this._handleAPI('stats', api, cb);
+
+ },
+ statsByURL: function(v, cb) {
+ return this.stats({ url: v }, cb);
+ },
+ statsByHash: function(v, cb) {
+ return this.stats({ hash: v }, cb);
+ }
+ });
+
+ Y.bitly = B;
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['base','get']});
diff --git a/build/gallery-chromahash/gallery-chromahash-debug.js b/build/gallery-chromahash/gallery-chromahash-debug.js
new file mode 100644
index 0000000000..fbc2561d25
--- /dev/null
+++ b/build/gallery-chromahash/gallery-chromahash-debug.js
@@ -0,0 +1,104 @@
+YUI.add('gallery-chromahash', function(Y) {
+
+/*
+ * Chroma-Hash : A sexy, non-reversable live visualization of password field input
+ * Idea based on jQuery module by Mattt Thompson (http://github.com/mattt/Chroma-Hash/)
+ */
+
+var LBL_TMPL = '',
+ _C = function(conf) {
+ _C.superclass.constructor.apply(this, arguments);
+ this._animations = [];
+ };
+_C.NAME = "ChromaHash";
+_C.ATTRS =
+ {
+ bars: {
+ value: 3,
+ validator: function(b) {
+ if (b < 1 || b > 4) {
+ return false;
+ }
+ }
+ },
+ salt: {
+ value: "7be82b35cb0199120eea35a4507c9acf"
+ },
+ minimum: {
+ value: 6
+ },
+ node: {
+ setter: function(node) {
+ var n = Y.get(node);
+ if (!n && !n.test('input[type=password]')) {
+ Y.fail('ChromaHash: Invalid node provided: ' + node);
+ }
+ return n;
+ }
+ }
+ };
+Y.extend(_C, Y.Widget, {
+ renderUI: function() {
+ var colors = ["primary", "secondary", "tertiary", "quaternary"].slice(0, this.get('bars')),
+ c = this.get('contentBox'), n = this.get('node'), i, lbl, width = n.get('clientWidth'),
+ height = n.get('clientHeight'), position = n.getXY();
+ // Preferably, I'd be able to set the position on the boudningBox, but for now, this will function.
+ for (i = 0 ; i < colors.length ; i += 1) {
+ lbl = Y.Node.create(LBL_TMPL.replace(/\{id\}/g, n.get('id')).replace(/\{color\}/g, colors[i]));
+ lbl.setStyles({
+ position: 'absolute',
+ height: height + "px",
+ width: "8px",
+ margin: "5px",
+ marginLeft: "0px",
+ backgroundColor: this.get('node').getStyle('backgroundColor')
+ });
+ c.insert(lbl);
+ lbl.setXY([position[0] + width - 2 + (-8 * (i + 1)), position[1] + 3]);
+ this._animations.push(new Y.Anim({node: lbl, duration: 0.5}));
+ }
+ },
+ bindUI: function() {
+ this._keyHandler = this.get('node').on('keyup', this._handleKey, this);
+ },
+ hide: function() {
+ this.get('boundingBox').setStyle('display','none');
+ },
+ clear: function() {
+ this.hide();
+ this.get('boundingBox').set('innerHTML','');
+ },
+ destroy: function() {
+ this._keyHandler.detach();
+ this._clear();
+ },
+ _handleKey: function(e) {
+ var n = this.get('node'), value = n.get('value'), i,
+ col = [], bars = this.get('bars'), md5, g;
+ if(value === "" ) {
+ for( i = 0 ; i < bars ; i += 1) { col.push('fff'); }
+ } else {
+ md5 = Y.Crypto.MD5('' + value + ':' + this.get('salt'));
+ col = md5.match(/([\dABCDEF]{6})/ig);
+ if (value.length < this.get('minimum')) {
+ for (i = 0; i < bars ; i += 1) {
+ g = (parseInt(col[i], 0x10) % 0xF).toString(0x10);
+ col[i] = g + g + g;
+ }
+ }
+ }
+
+ Y.Array.each(this._animations,
+ function(a, index) {
+ var c = a.get('node');
+ a.stop();
+ a.set('from', {backgroundColor: c.getStyle('backgroundColor')});
+ a.set('to', {backgroundColor: '#' + col[index] });
+ a.run();
+ });
+ }
+});
+Y.ChromaHash = _C;
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['widget', 'stylesheet', 'collection', 'anim-color', 'gallery-crypto-md5']});
diff --git a/build/gallery-chromahash/gallery-chromahash-min.js b/build/gallery-chromahash/gallery-chromahash-min.js
new file mode 100644
index 0000000000..499fe55621
--- /dev/null
+++ b/build/gallery-chromahash/gallery-chromahash-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-chromahash",function(C){var B='',A=function(D){A.superclass.constructor.apply(this,arguments);this._animations=[];};A.NAME="ChromaHash";A.ATTRS={bars:{value:3,validator:function(D){if(D<1||D>4){return false;}}},salt:{value:"7be82b35cb0199120eea35a4507c9acf"},minimum:{value:6},node:{setter:function(D){var E=C.get(D);if(!E&&!E.test("input[type=password]")){C.fail("ChromaHash: Invalid node provided: "+D);}return E;}}};C.extend(A,C.Widget,{renderUI:function(){var F=["primary","secondary","tertiary","quaternary"].slice(0,this.get("bars")),K=this.get("contentBox"),J=this.get("node"),G,I,H=J.get("clientWidth"),E=J.get("clientHeight"),D=J.getXY();for(G=0;GProvides subscribable drag events from Node or NodeLists. Subscribing + * to any of the events causes the node to be plugged with Y.Plugin.Drag. The + * config object passed can be used to set Drag instance attributes or add + * additional Plugins to the Drag instance such as Y.Plugin.DDProxy.
+ * + * Config properties are formatted and tested for a corresponding Y.Plugin.* as + * 'somePlugin' => Y.Plugin.DDSomePlugin if the property name doesn't already + * start with "DD". So { proxy: true } and { DDProxy: true } are functionally + * equivalent. Both add Y.Plugin.DDProxy to the Drag instance. + * + *node.on('drag:start', fn, { proxy: true, data: 123 });This adds Y.Plugin.DDProxy to the Drag instance and also set's the Drag instance's data attribute.
+ * + *Passing any value will result in the Plugin being added, but if you pass + * an object literal as the value, it will be sent to the Plugin's + * constructor.
+ * + *node.on('drag:end', fn, {
+ * constrained: { constrain2node: '#container' }
+ * });This adds Y.Plugin.DDConstrained to the Drag instance using the specified + * configuration.
+ * + *A custom detach handle is returned, whose detach method unplugs the + * Y.Plugin.Drag from the node(s).
+ * + *Supported events are:
+ *-
+ *
- drag or drag:drag + *
- drag:start + *
- drag:end + *
- drag:mouseDown + *
- drag:afterMouseDown + *
- drag:removeHandle + *
- drag:addHandle + *
- drag:removeInvalid + *
- drag:addInvalid + *
- drag:align + *
Additionally, the default callback context is overridden to the
+ * subscribing Node unless otherwise specified during the subscription.
+ * So "this" in the callback will refer to the node. On the
+ * event object passed to subscribers, e.currentTarget is also the
+ * Node regardless of context override. The Drag instance is available from
+ * the Node as node.dd.
Provides subscribable drag events from Node or NodeLists. Subscribing + * to any of the events causes the node to be plugged with Y.Plugin.Drag. The + * config object passed can be used to set Drag instance attributes or add + * additional Plugins to the Drag instance such as Y.Plugin.DDProxy.
+ * + * Config properties are formatted and tested for a corresponding Y.Plugin.* as + * 'somePlugin' => Y.Plugin.DDSomePlugin if the property name doesn't already + * start with "DD". So { proxy: true } and { DDProxy: true } are functionally + * equivalent. Both add Y.Plugin.DDProxy to the Drag instance. + * + *node.on('drag:start', fn, { proxy: true, data: 123 });This adds Y.Plugin.DDProxy to the Drag instance and also set's the Drag instance's data attribute.
+ * + *Passing any value will result in the Plugin being added, but if you pass + * an object literal as the value, it will be sent to the Plugin's + * constructor.
+ * + *node.on('drag:end', fn, {
+ * constrained: { constrain2node: '#container' }
+ * });This adds Y.Plugin.DDConstrained to the Drag instance using the specified + * configuration.
+ * + *A custom detach handle is returned, whose detach method unplugs the + * Y.Plugin.Drag from the node(s).
+ * + *Supported events are:
+ *-
+ *
- drag or drag:drag + *
- drag:start + *
- drag:end + *
- drag:mouseDown + *
- drag:afterMouseDown + *
- drag:removeHandle + *
- drag:addHandle + *
- drag:removeInvalid + *
- drag:addInvalid + *
- drag:align + *
Additionally, the default callback context is overridden to the
+ * subscribing Node unless otherwise specified during the subscription.
+ * So "this" in the callback will refer to the node. On the
+ * event object passed to subscribers, e.currentTarget is also the
+ * Node regardless of context override. The Drag instance is available from
+ * the Node as node.dd.
+ *
-
+ *
- Phone + *
- CreditCard + *
- Zipcode + *
- Postalcode + *
-
+ *
- Phone + *
- CreditCard + *
- Zipcode + *
- Postalcode + *
-
+ *
- changed + *
- + * name:value pairs of history parameters that have been added or + * changed + * + *
- removed + *
- + * name:value pairs of history parameters that have been removed + * (values are the old values) + * + *
decodeURIComponent() that also converts +
+ * chars into spaces.
+ *
+ * @method decode
+ * @param {String} string string to decode
+ * @return {String} decoded string
+ * @private
+ */
+function decode(string) {
+ return decodeURIComponent(string.replace(/\+/g, ' '));
+}
+
+/**
+ * Gets the current URL hash.
+ *
+ * @method getHash
+ * @return {String}
+ * @private
+ */
+var getHash;
+
+if (Y.UA.gecko) {
+ // We branch at runtime for Gecko since window.location.hash in Gecko
+ // returns a decoded string, and we want all encoding untouched.
+ getHash = function () {
+ var matches = /#.*$/.exec(loc.href);
+ return matches && matches[0] ? matches[0] : '';
+ };
+} else {
+ getHash = function () {
+ return loc.hash;
+ };
+}
+
+/**
+ * Sets the browser's location hash to the specified string.
+ *
+ * @method setHash
+ * @param {String} hash
+ * @private
+ */
+function setHash(hash) {
+ loc.hash = hash;
+}
+
+// -- Private Event Handlers -----------------------------------------------
+
+/**
+ * Handles changes to the location hash and fires the history-lite:change
+ * event if necessary.
+ *
+ * @method handleHashChange
+ * @param {String} newHash new hash value
+ * @private
+ */
+function handleHashChange(newHash) {
+ var lastParsed = HistoryLite.parseQuery(lastHash),
+ newParsed = HistoryLite.parseQuery(newHash),
+ changedParams = {},
+ removedParams = {},
+ isChanged;
+
+ // Figure out what changed.
+ Y.each(newParsed, function (value, name) {
+ if (value !== lastParsed[name]) {
+ changedParams[name] = value;
+ isChanged = true;
+ }
+ });
+
+ // Figure out what was removed.
+ Y.each(lastParsed, function (value, name) {
+ if (!newParsed.hasOwnProperty(name)) {
+ removedParams[name] = value;
+ isChanged = true;
+ }
+ });
+
+ if (isChanged) {
+ HistoryLite.fire(EV_HISTORY_CHANGE, {
+ changed: changedParams,
+ newVal : newHash,
+ prevVal: lastHash,
+ removed: removedParams
+ });
+ }
+}
+
+/**
+ * Default handler for the history-lite:change event. Stores the new hash
+ * for later comparison and event triggering.
+ *
+ * @method defaultChangeHandler
+ * @param {EventFacade} e
+ * @private
+ */
+function defaultChangeHandler(e) {
+ lastHash = e.newVal;
+}
+
+Y.HistoryLite = HistoryLite = {
+ // -- Public Methods ---------------------------------------------------
+
+ /**
+ * Adds a history entry with changes to the specified parameters. Any
+ * parameters with a null or undefined value
+ * will be removed from the new history entry.
+ *
+ * @method add
+ * @param {String|Object} params query string, hash string, or object
+ * containing name/value parameter pairs
+ * @param {Boolean} silent if true, a history change event will
+ * not be fired for this change
+ */
+ add: function (params, silent) {
+ var newHash = createHash(Y.merge(HistoryLite.parseQuery(getHash()),
+ Y.Lang.isString(params) ? HistoryLite.parseQuery(params) : params));
+
+ if (silent) {
+ defaultChangeHandler({newVal: newHash});
+ }
+
+ setHash(newHash);
+ },
+
+ /**
+ * Gets the current value of the specified history parameter, or an
+ * object of name/value pairs for all current values if no parameter
+ * name is specified.
+ *
+ * @method get
+ * @param {String} name (optional) parameter name
+ * @return {Object|mixed}
+ */
+ get: function (name) {
+ var params = HistoryLite.parseQuery(getHash());
+ return name ? params[name] : params;
+ },
+
+ /**
+ * Parses a query string or hash string into an object of name/value
+ * parameter pairs.
+ *
+ * @method parseQuery
+ * @param {String} query query string or hash string
+ * @return {Object}
+ */
+ parseQuery: function (query) {
+ var matches = query.match(/([^\?#&]+)=([^&]+)/g) || [],
+ params = {},
+ i, len, param;
+
+ for (i = 0, len = matches.length; i < len; ++i) {
+ param = matches[i].split('=');
+ params[decode(param[0])] = decode(param[1]);
+ }
+
+ return params;
+ }
+};
+
+// Make HistoryLite an event target and publish the change event.
+Y.augment(HistoryLite, Y.EventTarget, true, null, {emitFacade: true});
+
+HistoryLite.publish(EV_HISTORY_CHANGE, {
+ broadcast: 2,
+ defaultFn: defaultChangeHandler
+});
+
+// Start watching for hash changes.
+lastHash = getHash();
+
+if (supportsHashChange) {
+ Y.Node.DOM_EVENTS.hashchange = true;
+
+ Y.on('hashchange', function () {
+ handleHashChange(getHash());
+ }, w);
+} else {
+ pollInterval = pollInterval || Y.later(50, HistoryLite, function () {
+ var hash = getHash();
+
+ if (hash !== lastHash) {
+ handleHashChange(hash);
+ }
+ }, null, true);
+}
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['event-custom']});
diff --git a/build/gallery-history-lite/gallery-history-lite-min.js b/build/gallery-history-lite/gallery-history-lite-min.js
new file mode 100644
index 0000000000..ba8f7ffdfa
--- /dev/null
+++ b/build/gallery-history-lite/gallery-history-lite-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-history-lite",function(E){var N=E.config.win,I=E.config.doc.documentMode,L=encodeURIComponent,K=N.location,F=N.onhashchange!==undefined&&(I===undefined||I>7),G,D,C,O="history-lite:change";function B(R){var Q=[];E.each(R,function(T,S){if(E.Lang.isValue(T)){Q.push(L(S)+"="+L(T));}});return Q.join("&");}function A(Q){return decodeURIComponent(Q.replace(/\+/g," "));}var H;if(E.UA.gecko){H=function(){var Q=/#.*$/.exec(K.href);return Q&&Q[0]?Q[0]:"";};}else{H=function(){return K.hash;};}function P(Q){K.hash=Q;}function M(U){var V=C.parseQuery(G),R=C.parseQuery(U),T={},S={},Q;E.each(R,function(X,W){if(X!==V[W]){T[W]=X;Q=true;}});E.each(V,function(X,W){if(!R.hasOwnProperty(W)){S[W]=X;Q=true;}});if(Q){C.fire(O,{changed:T,newVal:U,prevVal:G,removed:S});}}function J(Q){G=Q.newVal;}E.HistoryLite=C={add:function(S,Q){var R=B(E.merge(C.parseQuery(H()),E.Lang.isString(S)?C.parseQuery(S):S));if(Q){J({newVal:R});}P(R);},get:function(Q){var R=C.parseQuery(H());return Q?R[Q]:R;},parseQuery:function(T){var S=T.match(/([^\?#&]+)=([^&]+)/g)||[],V={},R,Q,U;for(R=0,Q=S.length;R-
+ *
- changed + *
- + * name:value pairs of history parameters that have been added or + * changed + * + *
- removed + *
- + * name:value pairs of history parameters that have been removed + * (values are the old values) + * + *
decodeURIComponent() that also converts +
+ * chars into spaces.
+ *
+ * @method decode
+ * @param {String} string string to decode
+ * @return {String} decoded string
+ * @private
+ */
+function decode(string) {
+ return decodeURIComponent(string.replace(/\+/g, ' '));
+}
+
+/**
+ * Gets the current URL hash.
+ *
+ * @method getHash
+ * @return {String}
+ * @private
+ */
+var getHash;
+
+if (Y.UA.gecko) {
+ // We branch at runtime for Gecko since window.location.hash in Gecko
+ // returns a decoded string, and we want all encoding untouched.
+ getHash = function () {
+ var matches = /#.*$/.exec(loc.href);
+ return matches && matches[0] ? matches[0] : '';
+ };
+} else {
+ getHash = function () {
+ return loc.hash;
+ };
+}
+
+/**
+ * Sets the browser's location hash to the specified string.
+ *
+ * @method setHash
+ * @param {String} hash
+ * @private
+ */
+function setHash(hash) {
+ loc.hash = hash;
+}
+
+// -- Private Event Handlers -----------------------------------------------
+
+/**
+ * Handles changes to the location hash and fires the history-lite:change
+ * event if necessary.
+ *
+ * @method handleHashChange
+ * @param {String} newHash new hash value
+ * @private
+ */
+function handleHashChange(newHash) {
+ var lastParsed = HistoryLite.parseQuery(lastHash),
+ newParsed = HistoryLite.parseQuery(newHash),
+ changedParams = {},
+ removedParams = {},
+ isChanged;
+
+ // Figure out what changed.
+ Y.each(newParsed, function (value, name) {
+ if (value !== lastParsed[name]) {
+ changedParams[name] = value;
+ isChanged = true;
+ }
+ });
+
+ // Figure out what was removed.
+ Y.each(lastParsed, function (value, name) {
+ if (!newParsed.hasOwnProperty(name)) {
+ removedParams[name] = value;
+ isChanged = true;
+ }
+ });
+
+ if (isChanged) {
+ HistoryLite.fire(EV_HISTORY_CHANGE, {
+ changed: changedParams,
+ newVal : newHash,
+ prevVal: lastHash,
+ removed: removedParams
+ });
+ }
+}
+
+/**
+ * Default handler for the history-lite:change event. Stores the new hash
+ * for later comparison and event triggering.
+ *
+ * @method defaultChangeHandler
+ * @param {EventFacade} e
+ * @private
+ */
+function defaultChangeHandler(e) {
+ lastHash = e.newVal;
+}
+
+Y.HistoryLite = HistoryLite = {
+ // -- Public Methods ---------------------------------------------------
+
+ /**
+ * Adds a history entry with changes to the specified parameters. Any
+ * parameters with a null or undefined value
+ * will be removed from the new history entry.
+ *
+ * @method add
+ * @param {String|Object} params query string, hash string, or object
+ * containing name/value parameter pairs
+ * @param {Boolean} silent if true, a history change event will
+ * not be fired for this change
+ */
+ add: function (params, silent) {
+ var newHash = createHash(Y.merge(HistoryLite.parseQuery(getHash()),
+ Y.Lang.isString(params) ? HistoryLite.parseQuery(params) : params));
+
+ if (silent) {
+ defaultChangeHandler({newVal: newHash});
+ }
+
+ setHash(newHash);
+ },
+
+ /**
+ * Gets the current value of the specified history parameter, or an
+ * object of name/value pairs for all current values if no parameter
+ * name is specified.
+ *
+ * @method get
+ * @param {String} name (optional) parameter name
+ * @return {Object|mixed}
+ */
+ get: function (name) {
+ var params = HistoryLite.parseQuery(getHash());
+ return name ? params[name] : params;
+ },
+
+ /**
+ * Parses a query string or hash string into an object of name/value
+ * parameter pairs.
+ *
+ * @method parseQuery
+ * @param {String} query query string or hash string
+ * @return {Object}
+ */
+ parseQuery: function (query) {
+ var matches = query.match(/([^\?#&]+)=([^&]+)/g) || [],
+ params = {},
+ i, len, param;
+
+ for (i = 0, len = matches.length; i < len; ++i) {
+ param = matches[i].split('=');
+ params[decode(param[0])] = decode(param[1]);
+ }
+
+ return params;
+ }
+};
+
+// Make HistoryLite an event target and publish the change event.
+Y.augment(HistoryLite, Y.EventTarget, true, null, {emitFacade: true});
+
+HistoryLite.publish(EV_HISTORY_CHANGE, {
+ broadcast: 2,
+ defaultFn: defaultChangeHandler
+});
+
+// Start watching for hash changes.
+lastHash = getHash();
+
+if (supportsHashChange) {
+ Y.Node.DOM_EVENTS.hashchange = true;
+
+ Y.on('hashchange', function () {
+ handleHashChange(getHash());
+ }, w);
+} else {
+ pollInterval = pollInterval || Y.later(50, HistoryLite, function () {
+ var hash = getHash();
+
+ if (hash !== lastHash) {
+ handleHashChange(hash);
+ }
+ }, null, true);
+}
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['event-custom']});
diff --git a/build/gallery-io-poller/gallery-io-poller-debug.js b/build/gallery-io-poller/gallery-io-poller-debug.js
new file mode 100644
index 0000000000..1587014d9e
--- /dev/null
+++ b/build/gallery-io-poller/gallery-io-poller-debug.js
@@ -0,0 +1,397 @@
+YUI.add('gallery-io-poller', function(Y) {
+
+ /**
+ * IO Poller - A utility to smartly poll (via XHR requests) a resource on the server.
+ * http://925html.com/code/smart-polling/
+ *
+ * Oddnut Software
+ * Copyright (c) 2009 Eric Ferraiuolo - http://eric.ferraiuolo.name
+ * YUI BSD License - http://developer.yahoo.com/yui/license.html
+ */
+
+ /**
+ * Extends Y.io to add support for xhr-polling.
+ *
+ * @module poller
+ * @requires io-base, base
+ */
+
+ var Poller,
+ POLLER = 'poller',
+
+ INTERVAL = 'interval',
+ URI = 'uri',
+ IO_CONFIG = 'ioConfig',
+ POLLING = 'polling',
+
+ IF_NONE_MATCH = 'If-None-Match',
+ If_MODIFIED_SINCE = 'If-Modified-Since',
+
+ E_MODIFIED = 'io:modified',
+
+ isString = Y.Lang.isString,
+ isNumber = Y.Lang.isNumber,
+ isObject = Y.Lang.isObject;
+
+ /**
+ * Create a polling task to continually check the server at the specified interval for updates of a resource at a URI.
+ * The poller will use conditional GET requests and notify the client via Callbacks and Events when the resource has changed.
+ *
+ * @class Poller
+ * @extends Base
+ * @param {Object} config Configuration Object
+ * @constructor
+ */
+ Poller = function (config) {
+
+ Poller.superclass.constructor.apply( this, arguments );
+ };
+
+ Y.mix( Poller, {
+
+ /**
+ * The identity of the component.
+ *
+ * @property Poller.NAME
+ * @type String
+ * @static
+ */
+ NAME : POLLER,
+
+ /**
+ * Static property used to define the default attribute configuration of
+ * the component.
+ *
+ * @property Poller.ATTRS
+ * @type Object
+ * @static
+ */
+ ATTRS : {
+
+ /**
+ * The time in milliseconds for which the component should send a request to the server.
+ *
+ * @attribute interval
+ * @type Number
+ */
+ interval : {
+ validator : isNumber
+ },
+
+ /**
+ * The URI of the resource which to xhr-poll.
+ *
+ * @attribute uri
+ * @type String
+ * @writeOnce
+ */
+ uri : {
+ validator : isString,
+ writeOnce : true
+ },
+
+ /**
+ * The configuration Y.io config.
+ *
+ * @attribute ioConfig
+ * @type Object
+ * @writeOnce
+ */
+ ioConfig : {
+ validator : isObject,
+ writeOnce : true
+ },
+
+ /**
+ * A read-only attribute the client can check to see if the component is actively polling the server.
+ *
+ * @attribute polling
+ * @type Boolean
+ * @default false
+ * @readOnly
+ * @final
+ */
+ polling : {
+ value : false,
+ readOnly : true
+ }
+
+ }
+
+ });
+
+ Y.extend( Poller, Y.Base, {
+
+ /**
+ * Timer object to schedule next request to server.
+ *
+ * @property _timer
+ * @type Y.later
+ * @protected
+ */
+ _timer : null,
+
+ /**
+ * Time of the last request was sent.
+ *
+ * @property _txTime
+ * @type Number
+ * @protected
+ */
+ _txTime : null,
+
+ /**
+ * active IO transaction Object
+ *
+ * @property _activeTx
+ * @type Object
+ * @protected
+ */
+ _activeTx : null,
+
+ /**
+ * Last-Modified date of the resource that the server returned, used to determine if the resource has changed.
+ *
+ * @property _modifiedDate
+ * @type String
+ * @protected
+ */
+ _modifiedDate : null,
+
+ /**
+ * Etag of the resource returned by the server, used to determine if the resource has changed.
+ *
+ * @property _etag
+ * @type String
+ * @protected
+ */
+ _etag : null,
+
+ /**
+ * Construction of the component.
+ *
+ * @method initializer
+ * @param {Object} config Configuration Object
+ * @protected
+ */
+ initializer : function (config) {
+
+ /**
+ * Signals that the resource the component is pulling the server for has been modified.
+ * This is the interesting event for the client to subscribe to.
+ * The subscriber could, for example, update the UI in response to this event, poller:modified.
+ *
+ * @event io:modified
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to response handler
+ */
+
+ this._timer = null;
+ this._txTime = null;
+ this._activeTx = null;
+ this._modifiedDate = null;
+ this._etag = null;
+ },
+
+ /**
+ * Destruction of the component. Stops polling and cleans up.
+ *
+ * @method destructor
+ * @protected
+ */
+ destructor : function () {
+
+ this.stop();
+ this._modifiedDate = null;
+ this._etag = null;
+ },
+
+ /**
+ * Starts the polling task.
+ * A request will be sent to the server right at the time of calling this method;
+ * and continued by sending subsequent requests at the set interval.
+ * To stop or pause polling call the stop method.
+ *
+ * @method start
+ */
+ start : function () {
+
+ if ( ! this.get(POLLING)) {
+ this._sendRequest();
+ this._set(POLLING, true);
+ }
+ },
+
+ /**
+ * Stops the polling task.
+ * Start can be called to resume polling.
+ *
+ * @method stop
+ */
+ stop : function () {
+
+ if (this._activeTx) {
+ this._activeTx.abort();
+ this._activeTx = null;
+ }
+
+ if (this._timer) {
+ this._timer.cancel();
+ this._timer = null;
+ }
+
+ this._txTime = null;
+
+ this._set(POLLING, false);
+ },
+
+ /**
+ * Sends the XHR request to the server at the given URI (resource).
+ * Method used internally to make the XHR requests.
+ *
+ * @method sendRequest
+ * @protected
+ */
+ _sendRequest : function () {
+
+ var ioConfig = this.get(IO_CONFIG),
+ headers = {},
+ config;
+
+ if (this._etag) {
+ headers[IF_NONE_MATCH] = this._etag;
+ }
+ if (this._modifiedDate) {
+ headers[If_MODIFIED_SINCE] = this._modifiedDate;
+ }
+
+ config = Y.merge(ioConfig, {
+
+ headers : Y.merge(ioConfig.headers, headers),
+ context : this,
+ on : Y.merge(ioConfig.on, {
+
+ start : this._defStartHandler,
+ complete : this._defCompleteHandler,
+ success : this._defSuccessHandler,
+ modified : this._defModifiedHandler
+
+ })
+
+ });
+
+ this._activeTx = Y.io(this.get(URI), config);
+ },
+
+ /**
+ * Sets the txTime and calls the config's on.start handler.
+ *
+ * @method _defStartHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defStartHandler : function (txId, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ this._txTime = new Date().getTime();
+
+ if (config && config.on && config.on.start) {
+ config.on.start.apply(config.context || Y, arguments);
+ }
+ },
+
+ /**
+ * Schedules the next transaction and calls the config's on.complete handler.
+ *
+ * @method _defCompleteHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defCompleteHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG),
+ deltaT = this._txTime ? (new Date()).getTime() - this._txTime : 0;
+
+ this._timer = Y.later(Math.max(this.get(INTERVAL) - deltaT, 0), this, this._sendRequest);
+
+ if (config && config.on && config.on.complete) {
+ config.on.complete.apply(config.context || Y, arguments);
+ }
+ },
+
+ /**
+ * Chains to the modified callback and calls the config's on.success handler.
+ *
+ * @method _defSuccessHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defSuccessHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ if (config && config.on && config.on.success) {
+ config.on.success.apply(config.context || Y, arguments);
+ }
+
+ this._defModifiedHandler.apply(this, arguments);
+ },
+
+ /**
+ * Caches Etag and Last-Modified sent back from the server and calls the config's on.modified handler.
+ *
+ * @method _defModifiedHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defModifiedHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ this._etag = r.getResponseHeader('Etag');
+ this._modifiedDate = r.getResponseHeader('Last-Modified');
+
+ Y.fire(E_MODIFIED, txId, r);
+
+ if (config && config.on && config.on.modified) {
+ config.on.modified.apply(config.context || Y, arguments);
+ }
+ }
+
+ });
+
+ /**
+ * Method for scheduling a XHR-polling task. Returns an instance of Poller
+ *
+ * @method Y.io.poll
+ * @param {Number} interval The time in milliseconds for which the component should send a request to the server.
+ * @param {Object} uri qualified path to transaction resource.
+ * @param {Object} config configuration object for the transaction(s); just like Y.io's config object, but with an on:modified callback/event.
+ * @return {Poller} an instance of Poller which has start/stop methods and a configurable interval
+ * @public
+ * @static
+ */
+ Y.mix(Y.io, {
+
+ poll: function (interval, uri, config) {
+ return new Poller({
+ interval : interval,
+ uri : uri,
+ ioConfig : config
+ });
+ }
+
+ }, true);
+
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['io-base', 'base-base']});
diff --git a/build/gallery-io-poller/gallery-io-poller-min.js b/build/gallery-io-poller/gallery-io-poller-min.js
new file mode 100644
index 0000000000..f1ee9bb6e9
--- /dev/null
+++ b/build/gallery-io-poller/gallery-io-poller-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-io-poller",function(B){var C,I="poller",D="interval",H="uri",J="ioConfig",K="polling",E="If-None-Match",G="If-Modified-Since",F="io:modified",A=B.Lang.isString,M=B.Lang.isNumber,L=B.Lang.isObject;C=function(N){C.superclass.constructor.apply(this,arguments);};B.mix(C,{NAME:I,ATTRS:{interval:{validator:M},uri:{validator:A,writeOnce:true},ioConfig:{validator:L,writeOnce:true},polling:{value:false,readOnly:true}}});B.extend(C,B.Base,{_timer:null,_txTime:null,_activeTx:null,_modifiedDate:null,_etag:null,initializer:function(N){this._timer=null;this._txTime=null;this._activeTx=null;this._modifiedDate=null;this._etag=null;},destructor:function(){this.stop();this._modifiedDate=null;this._etag=null;},start:function(){if(!this.get(K)){this._sendRequest();this._set(K,true);}},stop:function(){if(this._activeTx){this._activeTx.abort();this._activeTx=null;}if(this._timer){this._timer.cancel();this._timer=null;}this._txTime=null;this._set(K,false);},_sendRequest:function(){var N=this.get(J),P={},O;if(this._etag){P[E]=this._etag;}if(this._modifiedDate){P[G]=this._modifiedDate;}O=B.merge(N,{headers:B.merge(N.headers,P),context:this,on:B.merge(N.on,{start:this._defStartHandler,complete:this._defCompleteHandler,success:this._defSuccessHandler,modified:this._defModifiedHandler})});this._activeTx=B.io(this.get(H),O);},_defStartHandler:function(P,O){var N=this.get(J);this._txTime=new Date().getTime();if(N&&N.on&&N.on.start){N.on.start.apply(N.context||B,arguments);}},_defCompleteHandler:function(R,Q,O){var N=this.get(J),P=this._txTime?(new Date()).getTime()-this._txTime:0;this._timer=B.later(Math.max(this.get(D)-P,0),this,this._sendRequest);if(N&&N.on&&N.on.complete){N.on.complete.apply(N.context||B,arguments);}},_defSuccessHandler:function(Q,P,O){var N=this.get(J);if(N&&N.on&&N.on.success){N.on.success.apply(N.context||B,arguments);}this._defModifiedHandler.apply(this,arguments);},_defModifiedHandler:function(Q,P,O){var N=this.get(J);this._etag=P.getResponseHeader("Etag");this._modifiedDate=P.getResponseHeader("Last-Modified");B.fire(F,Q,P);if(N&&N.on&&N.on.modified){N.on.modified.apply(N.context||B,arguments);}}});B.mix(B.io,{poll:function(N,P,O){return new C({interval:N,uri:P,ioConfig:O});}},true);},"gallery-2009.11.19-20",{requires:["io-base","base-base"]});
\ No newline at end of file
diff --git a/build/gallery-io-poller/gallery-io-poller.js b/build/gallery-io-poller/gallery-io-poller.js
new file mode 100644
index 0000000000..1587014d9e
--- /dev/null
+++ b/build/gallery-io-poller/gallery-io-poller.js
@@ -0,0 +1,397 @@
+YUI.add('gallery-io-poller', function(Y) {
+
+ /**
+ * IO Poller - A utility to smartly poll (via XHR requests) a resource on the server.
+ * http://925html.com/code/smart-polling/
+ *
+ * Oddnut Software
+ * Copyright (c) 2009 Eric Ferraiuolo - http://eric.ferraiuolo.name
+ * YUI BSD License - http://developer.yahoo.com/yui/license.html
+ */
+
+ /**
+ * Extends Y.io to add support for xhr-polling.
+ *
+ * @module poller
+ * @requires io-base, base
+ */
+
+ var Poller,
+ POLLER = 'poller',
+
+ INTERVAL = 'interval',
+ URI = 'uri',
+ IO_CONFIG = 'ioConfig',
+ POLLING = 'polling',
+
+ IF_NONE_MATCH = 'If-None-Match',
+ If_MODIFIED_SINCE = 'If-Modified-Since',
+
+ E_MODIFIED = 'io:modified',
+
+ isString = Y.Lang.isString,
+ isNumber = Y.Lang.isNumber,
+ isObject = Y.Lang.isObject;
+
+ /**
+ * Create a polling task to continually check the server at the specified interval for updates of a resource at a URI.
+ * The poller will use conditional GET requests and notify the client via Callbacks and Events when the resource has changed.
+ *
+ * @class Poller
+ * @extends Base
+ * @param {Object} config Configuration Object
+ * @constructor
+ */
+ Poller = function (config) {
+
+ Poller.superclass.constructor.apply( this, arguments );
+ };
+
+ Y.mix( Poller, {
+
+ /**
+ * The identity of the component.
+ *
+ * @property Poller.NAME
+ * @type String
+ * @static
+ */
+ NAME : POLLER,
+
+ /**
+ * Static property used to define the default attribute configuration of
+ * the component.
+ *
+ * @property Poller.ATTRS
+ * @type Object
+ * @static
+ */
+ ATTRS : {
+
+ /**
+ * The time in milliseconds for which the component should send a request to the server.
+ *
+ * @attribute interval
+ * @type Number
+ */
+ interval : {
+ validator : isNumber
+ },
+
+ /**
+ * The URI of the resource which to xhr-poll.
+ *
+ * @attribute uri
+ * @type String
+ * @writeOnce
+ */
+ uri : {
+ validator : isString,
+ writeOnce : true
+ },
+
+ /**
+ * The configuration Y.io config.
+ *
+ * @attribute ioConfig
+ * @type Object
+ * @writeOnce
+ */
+ ioConfig : {
+ validator : isObject,
+ writeOnce : true
+ },
+
+ /**
+ * A read-only attribute the client can check to see if the component is actively polling the server.
+ *
+ * @attribute polling
+ * @type Boolean
+ * @default false
+ * @readOnly
+ * @final
+ */
+ polling : {
+ value : false,
+ readOnly : true
+ }
+
+ }
+
+ });
+
+ Y.extend( Poller, Y.Base, {
+
+ /**
+ * Timer object to schedule next request to server.
+ *
+ * @property _timer
+ * @type Y.later
+ * @protected
+ */
+ _timer : null,
+
+ /**
+ * Time of the last request was sent.
+ *
+ * @property _txTime
+ * @type Number
+ * @protected
+ */
+ _txTime : null,
+
+ /**
+ * active IO transaction Object
+ *
+ * @property _activeTx
+ * @type Object
+ * @protected
+ */
+ _activeTx : null,
+
+ /**
+ * Last-Modified date of the resource that the server returned, used to determine if the resource has changed.
+ *
+ * @property _modifiedDate
+ * @type String
+ * @protected
+ */
+ _modifiedDate : null,
+
+ /**
+ * Etag of the resource returned by the server, used to determine if the resource has changed.
+ *
+ * @property _etag
+ * @type String
+ * @protected
+ */
+ _etag : null,
+
+ /**
+ * Construction of the component.
+ *
+ * @method initializer
+ * @param {Object} config Configuration Object
+ * @protected
+ */
+ initializer : function (config) {
+
+ /**
+ * Signals that the resource the component is pulling the server for has been modified.
+ * This is the interesting event for the client to subscribe to.
+ * The subscriber could, for example, update the UI in response to this event, poller:modified.
+ *
+ * @event io:modified
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to response handler
+ */
+
+ this._timer = null;
+ this._txTime = null;
+ this._activeTx = null;
+ this._modifiedDate = null;
+ this._etag = null;
+ },
+
+ /**
+ * Destruction of the component. Stops polling and cleans up.
+ *
+ * @method destructor
+ * @protected
+ */
+ destructor : function () {
+
+ this.stop();
+ this._modifiedDate = null;
+ this._etag = null;
+ },
+
+ /**
+ * Starts the polling task.
+ * A request will be sent to the server right at the time of calling this method;
+ * and continued by sending subsequent requests at the set interval.
+ * To stop or pause polling call the stop method.
+ *
+ * @method start
+ */
+ start : function () {
+
+ if ( ! this.get(POLLING)) {
+ this._sendRequest();
+ this._set(POLLING, true);
+ }
+ },
+
+ /**
+ * Stops the polling task.
+ * Start can be called to resume polling.
+ *
+ * @method stop
+ */
+ stop : function () {
+
+ if (this._activeTx) {
+ this._activeTx.abort();
+ this._activeTx = null;
+ }
+
+ if (this._timer) {
+ this._timer.cancel();
+ this._timer = null;
+ }
+
+ this._txTime = null;
+
+ this._set(POLLING, false);
+ },
+
+ /**
+ * Sends the XHR request to the server at the given URI (resource).
+ * Method used internally to make the XHR requests.
+ *
+ * @method sendRequest
+ * @protected
+ */
+ _sendRequest : function () {
+
+ var ioConfig = this.get(IO_CONFIG),
+ headers = {},
+ config;
+
+ if (this._etag) {
+ headers[IF_NONE_MATCH] = this._etag;
+ }
+ if (this._modifiedDate) {
+ headers[If_MODIFIED_SINCE] = this._modifiedDate;
+ }
+
+ config = Y.merge(ioConfig, {
+
+ headers : Y.merge(ioConfig.headers, headers),
+ context : this,
+ on : Y.merge(ioConfig.on, {
+
+ start : this._defStartHandler,
+ complete : this._defCompleteHandler,
+ success : this._defSuccessHandler,
+ modified : this._defModifiedHandler
+
+ })
+
+ });
+
+ this._activeTx = Y.io(this.get(URI), config);
+ },
+
+ /**
+ * Sets the txTime and calls the config's on.start handler.
+ *
+ * @method _defStartHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defStartHandler : function (txId, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ this._txTime = new Date().getTime();
+
+ if (config && config.on && config.on.start) {
+ config.on.start.apply(config.context || Y, arguments);
+ }
+ },
+
+ /**
+ * Schedules the next transaction and calls the config's on.complete handler.
+ *
+ * @method _defCompleteHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defCompleteHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG),
+ deltaT = this._txTime ? (new Date()).getTime() - this._txTime : 0;
+
+ this._timer = Y.later(Math.max(this.get(INTERVAL) - deltaT, 0), this, this._sendRequest);
+
+ if (config && config.on && config.on.complete) {
+ config.on.complete.apply(config.context || Y, arguments);
+ }
+ },
+
+ /**
+ * Chains to the modified callback and calls the config's on.success handler.
+ *
+ * @method _defSuccessHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defSuccessHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ if (config && config.on && config.on.success) {
+ config.on.success.apply(config.context || Y, arguments);
+ }
+
+ this._defModifiedHandler.apply(this, arguments);
+ },
+
+ /**
+ * Caches Etag and Last-Modified sent back from the server and calls the config's on.modified handler.
+ *
+ * @method _defModifiedHandler
+ * @param {Number} txId Y.io Transaction ID
+ * @param {Object} r Y.io Response Object
+ * @param {MIXED} args Arguments passed to handlers
+ * @protected
+ */
+ _defModifiedHandler : function (txId, r, args) {
+
+ var config = this.get(IO_CONFIG);
+
+ this._etag = r.getResponseHeader('Etag');
+ this._modifiedDate = r.getResponseHeader('Last-Modified');
+
+ Y.fire(E_MODIFIED, txId, r);
+
+ if (config && config.on && config.on.modified) {
+ config.on.modified.apply(config.context || Y, arguments);
+ }
+ }
+
+ });
+
+ /**
+ * Method for scheduling a XHR-polling task. Returns an instance of Poller
+ *
+ * @method Y.io.poll
+ * @param {Number} interval The time in milliseconds for which the component should send a request to the server.
+ * @param {Object} uri qualified path to transaction resource.
+ * @param {Object} config configuration object for the transaction(s); just like Y.io's config object, but with an on:modified callback/event.
+ * @return {Poller} an instance of Poller which has start/stop methods and a configurable interval
+ * @public
+ * @static
+ */
+ Y.mix(Y.io, {
+
+ poll: function (interval, uri, config) {
+ return new Poller({
+ interval : interval,
+ uri : uri,
+ ioConfig : config
+ });
+ }
+
+ }, true);
+
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['io-base', 'base-base']});
diff --git a/build/gallery-node-accordion/assets/gallery-node-accordion-core.css b/build/gallery-node-accordion/assets/gallery-node-accordion-core.css
new file mode 100644
index 0000000000..564af43e02
--- /dev/null
+++ b/build/gallery-node-accordion/assets/gallery-node-accordion-core.css
@@ -0,0 +1,32 @@
+.yui-accordion {
+ position: relative;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item {
+ display: block;
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+}
+.yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ height: 0;
+ _height: 1px;
+ *height: 1px;
+ overflow: hidden;
+ zoom: 1;
+}
+.yui-accordion .yui-accordion-item-active .yui-accordion-item-bd {
+ height: auto;
+}
+.yui-accordion-hidden {
+ /* absolute position off-screen and box collapsing used to
+ avoid display:none, which causes issues for some content (firefox
+ restarts flash movies) */
+ border:0;
+ height:0;
+ width:0;
+ padding:0;
+ position:absolute;
+ left:-999999px;
+ overflow:hidden;
+ visibility:hidden;
+}
\ No newline at end of file
diff --git a/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css b/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
new file mode 100644
index 0000000000..76c93dde69
--- /dev/null
+++ b/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion-skin.css
@@ -0,0 +1,43 @@
+.yui-skin-sam .yui-accordion {
+ font-size: 93%; /* 12px */
+ line-height: 1.5; /* 18px */
+ *line-height: 1.45; /* For IE */
+ border-top: solid 1px #808080;
+ border-left: solid 1px #808080;
+ border-right: solid 1px #808080;
+ background: #fff;
+ padding: 0;
+ text-align: left;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item {
+ display: block;
+ border-bottom: solid 1px #808080;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-hd {
+ line-height: 2; /* ~24px */
+ *line-height: 1.9; /* For IE */
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;
+ padding: 0;
+ padding: 5px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-bd {
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ display: block;
+}
+.yui-skin-sam .yui-accordion .first-of-type {
+
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ width: auto;
+ display: block;
+ color: #000;
+ text-decoration: none;
+ cursor: default;
+ padding: 0 5px 0 10px;
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -345px;
+}
+.yui-skin-sam .yui-accordion .yui-accordion-item-active .yui-accordion-item-hd a.yui-accordion-item-trigger {
+ background: url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -395px;
+}
\ No newline at end of file
diff --git a/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css b/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css
new file mode 100644
index 0000000000..d16bf3f72b
--- /dev/null
+++ b/build/gallery-node-accordion/assets/skins/sam/gallery-node-accordion.css
@@ -0,0 +1 @@
+.yui-accordion{position:relative;zoom:1;}.yui-accordion .yui-accordion-item{display:block;}.yui-accordion .yui-accordion-item .yui-accordion-item-bd{height:0;_height:1px;*height:1px;overflow:hidden;zoom:1;}.yui-accordion .yui-accordion-item-active .yui-accordion-item-bd{height:auto;}.yui-accordion-hidden{border:0;height:0;width:0;padding:0;position:absolute;left:-999999px;overflow:hidden;visibility:hidden;}.yui-skin-sam .yui-accordion{font-size:93%;line-height:1.5;*line-height:1.45;border-top:solid 1px #808080;border-left:solid 1px #808080;border-right:solid 1px #808080;background:#fff;padding:0;text-align:left;}.yui-skin-sam .yui-accordion .yui-accordion-item{display:block;border-bottom:solid 1px #808080;}.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-hd{line-height:2;*line-height:1.9;background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) repeat-x 0 0;padding:0;padding:5px;}.yui-skin-sam .yui-accordion .yui-accordion-item .yui-accordion-item-bd{font-size:100%;margin:0;padding:0;display:block;}.yui-skin-sam .yui-accordion .yui-accordion-item-hd a.yui-accordion-item-trigger{width:auto;display:block;color:#000;text-decoration:none;cursor:default;padding:0 5px 0 10px;background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -345px;}.yui-skin-sam .yui-accordion .yui-accordion-item-active .yui-accordion-item-hd a.yui-accordion-item-trigger{background:url(http://yui.yahooapis.com/3.0.0/build/assets/skins/sam/sprite.png) no-repeat 110% -395px;}
diff --git a/build/gallery-node-accordion/gallery-node-accordion-debug.js b/build/gallery-node-accordion/gallery-node-accordion-debug.js
new file mode 100644
index 0000000000..28fedb7c36
--- /dev/null
+++ b/build/gallery-node-accordion/gallery-node-accordion-debug.js
@@ -0,0 +1,597 @@
+YUI.add('gallery-node-accordion', function(Y) {
+
+/**
+* The Accordion Node Plugin makes it easy to transform existing +* markup into an accordion element with expandable and collapsable elements, +* elements are easy to customize, and only require a small set of dependencies.
+* +* +*To use the Accordion Node Plugin, simply pass a reference to the plugin to a
+* Node instance's plug method.
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-node-accordion". This will
+* // load the script and CSS for the Accordion Node Plugin and all of
+* // the required dependencies.
+*
+* YUI().use("gallery-node-accordion", function(Y) {
+*
+* // Use the "contentready" event to initialize the accordion when
+* // the element that represente the accordion
+* // (<div id="accordion-1">) is ready to be scripted.
+*
+* Y.on("contentready", function () {
+*
+* // The scope of the callback will be a Node instance
+* // representing the accordion (<div id="accordion-1">).
+* // Therefore, since "this" represents a Node instance, it
+* // is possible to just call "this.plug" passing in a
+* // reference to the Accordion Node Plugin.
+*
+* this.plug(Y.Plugin.NodeAccordion);
+*
+* }, "#accordion-1");
+*
+* });
+*
+* </script>
+*
The Accordion Node Plugin has several configuration properties that can be
+* set via an object literal that is passed as a second argument to a Node
+* instance's plug method.
+*
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-node-accordion". This will
+* // load the script and CSS for the Accordion Node Plugin and all of
+* // the required dependencies.
+*
+* YUI().use("gallery-node-accordion", function(Y) {
+*
+* // Use the "contentready" event to initialize the accordion when
+* // the element that represente the accordion
+* // (<div id="accordion-1">) is ready to be scripted.
+*
+* Y.on("contentready", function () {
+*
+* // The scope of the callback will be a Node instance
+* // representing the accordion (<div id="accordion-1">).
+* // Therefore, since "this" represents a Node instance, it
+* // is possible to just call "this.plug" passing in a
+* // reference to the Accordion Node Plugin.
+*
+* this.plug(Y.Plugin.NodeAccordion, { anim: true, effect: Y.Easing.backIn });
+*
+* }, "#accordion-1");
+*
+* });
+*
+* </script>
+*
plug method of Node and
+ * should not be instantiated directly.
+ * @namespace plugin
+ * @class NodeAccordion
+ */
+ NodeAccordion = function () {
+
+ NodeAccordion.superclass.constructor.apply(this, arguments);
+
+ };
+
+NodeAccordion.NAME = "NodeAccordion";
+NodeAccordion.NS = ACCORDION;
+
+NodeAccordion.ATTRS = {
+ /**
+ * Nodes representing the list of active items.
+ *
+ * @attribute activeItems
+ * @type Y.NodeList
+ */
+ activeItems: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(FC+CLASS_ACTIVE);
+ }
+ },
+ /**
+ * Nodes representing the list of items.
+ *
+ * @attribute items
+ * @type Y.NodeList
+ */
+ items: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(ITEM_QUERY);
+ }
+ },
+
+ /**
+ * orientation defines if the accordion will use width or height to expand and collapse items.
+ *
+ * @attribute orientation
+ * @writeOnce
+ * @default height
+ * @type string
+ */
+ orientation: {
+ value: HEIGHT,
+ writeOnce: true
+ },
+ /**
+ * Boolean indicating that animation should include opacity to fade in/out the content of the item.
+ *
+ * @attribute fade
+ * @default false
+ * @type boolean
+ */
+ fade: {
+ value: false
+ },
+ /**
+ * Boolean indicating that Y.Anim should be used to expand and collapse items.
+ * It also supports a function with an specific effect.
+ *
+ *
+ * <script type="text/javascript">
+ *
+ *
+ * // Call the "use" method, passing in "anim" and "gallery-node-accordion".
+ *
+ * YUI().use("anim", "gallery-node-accordion", function(Y) {
+ *
+ * Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ * anim: Y.Easing.backIn
+ * });
+ *
+ * </script>
+ *
-
+ *
- fast = 0.1 + *
- normal = 0.4 + *
- slow = 0.6 + *
The Accordion Node Plugin makes it easy to transform existing +* markup into an accordion element with expandable and collapsable elements, +* elements are easy to customize, and only require a small set of dependencies.
+* +* +*To use the Accordion Node Plugin, simply pass a reference to the plugin to a
+* Node instance's plug method.
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-node-accordion". This will
+* // load the script and CSS for the Accordion Node Plugin and all of
+* // the required dependencies.
+*
+* YUI().use("gallery-node-accordion", function(Y) {
+*
+* // Use the "contentready" event to initialize the accordion when
+* // the element that represente the accordion
+* // (<div id="accordion-1">) is ready to be scripted.
+*
+* Y.on("contentready", function () {
+*
+* // The scope of the callback will be a Node instance
+* // representing the accordion (<div id="accordion-1">).
+* // Therefore, since "this" represents a Node instance, it
+* // is possible to just call "this.plug" passing in a
+* // reference to the Accordion Node Plugin.
+*
+* this.plug(Y.Plugin.NodeAccordion);
+*
+* }, "#accordion-1");
+*
+* });
+*
+* </script>
+*
The Accordion Node Plugin has several configuration properties that can be
+* set via an object literal that is passed as a second argument to a Node
+* instance's plug method.
+*
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-node-accordion". This will
+* // load the script and CSS for the Accordion Node Plugin and all of
+* // the required dependencies.
+*
+* YUI().use("gallery-node-accordion", function(Y) {
+*
+* // Use the "contentready" event to initialize the accordion when
+* // the element that represente the accordion
+* // (<div id="accordion-1">) is ready to be scripted.
+*
+* Y.on("contentready", function () {
+*
+* // The scope of the callback will be a Node instance
+* // representing the accordion (<div id="accordion-1">).
+* // Therefore, since "this" represents a Node instance, it
+* // is possible to just call "this.plug" passing in a
+* // reference to the Accordion Node Plugin.
+*
+* this.plug(Y.Plugin.NodeAccordion, { anim: true, effect: Y.Easing.backIn });
+*
+* }, "#accordion-1");
+*
+* });
+*
+* </script>
+*
plug method of Node and
+ * should not be instantiated directly.
+ * @namespace plugin
+ * @class NodeAccordion
+ */
+ NodeAccordion = function () {
+
+ NodeAccordion.superclass.constructor.apply(this, arguments);
+
+ };
+
+NodeAccordion.NAME = "NodeAccordion";
+NodeAccordion.NS = ACCORDION;
+
+NodeAccordion.ATTRS = {
+ /**
+ * Nodes representing the list of active items.
+ *
+ * @attribute activeItems
+ * @type Y.NodeList
+ */
+ activeItems: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(FC+CLASS_ACTIVE);
+ }
+ },
+ /**
+ * Nodes representing the list of items.
+ *
+ * @attribute items
+ * @type Y.NodeList
+ */
+ items: {
+ readOnly: true,
+ getter: function (value) {
+ return this._root.all(ITEM_QUERY);
+ }
+ },
+
+ /**
+ * orientation defines if the accordion will use width or height to expand and collapse items.
+ *
+ * @attribute orientation
+ * @writeOnce
+ * @default height
+ * @type string
+ */
+ orientation: {
+ value: HEIGHT,
+ writeOnce: true
+ },
+ /**
+ * Boolean indicating that animation should include opacity to fade in/out the content of the item.
+ *
+ * @attribute fade
+ * @default false
+ * @type boolean
+ */
+ fade: {
+ value: false
+ },
+ /**
+ * Boolean indicating that Y.Anim should be used to expand and collapse items.
+ * It also supports a function with an specific effect.
+ *
+ *
+ * <script type="text/javascript">
+ *
+ *
+ * // Call the "use" method, passing in "anim" and "gallery-node-accordion".
+ *
+ * YUI().use("anim", "gallery-node-accordion", function(Y) {
+ *
+ * Y.one("#myaccordion").plug(Y.Plugin.NodeAccordion, {
+ * anim: Y.Easing.backIn
+ * });
+ *
+ * </script>
+ *
-
+ *
- fast = 0.1 + *
- normal = 0.4 + *
- slow = 0.6 + *
Creates a basic custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar
Provides a toolbar button based on the button and menu widgets, <select> elements are used in place of menu's.
+ * @class ToolbarButton + * @namespace YAHOO.widget + * @requires yahoo, dom, element, event + * @extends YAHOO.util.Element + * + * + * @constructor + * @param {String/HTMLElement} el The element to turn into a button. + * @param {Object} attrs Object liternal containing configuration parameters. + */ + + var ToolbarButton = function() { + Y.log('ToolbarButton Initalizing', 'info', 'ToolbarButton'); + ToolbarButton.superclass.constructor.apply(this, arguments); + }; + + ToolbarButton.NAME = 'ToolbarButton'; + + ToolbarButton.ATTRS = { + node: { + setter: function(node) { + var n = Y.get(node); + if (!n) { + Y.error('Invalid Node Given: ' + node); + } else { + n = n.item(0); + } + return n; + } + }, + id: { + }, + /** + * @attribute value + * @description The value of the button + * @type String + */ + value: { + }, + /** + * @attribute menu + * @description The menu attribute, see YAHOO.widget.Button + * @type Object + */ + menu: { + value: false + }, + /** + * @attribute type + * @description The type of button to create: push, menu, color, select, spin + * @type String + */ + type: { + value: 'push', + writeOnce: true + }, + /** + * @attribute disabled + * @description Set the button into a disabled state + * @type String + */ + disabled: { + value: false, + setter: function(disabled) { + if (disabled) { + this.get('node').addClass('yui-button-disabled'); + this.get('node').addClass('yui-' + this.get('type') + '-button-disabled'); + } else { + this.get('node').removeClass('yui-button-disabled'); + this.get('node').removeClass('yui-' + this.get('type') + '-button-disabled'); + } + //console.log(this.get('node'), ': ', disabled); + if (this.get('type') == 'select') { + this.get('node').set('disabled', disabled); + } + } + }, + /** + * @attribute label + * @description The text label for the button + * @type String + */ + label: { + value: 'LABEL', + setter: function(label) { + if (this.get('type') == 'push') { + this.get('node').query('a').set('innerHTML', label); + } + } + }, + /** + * @attribute title + * @description The title of the button + * @type String + */ + title: { + value: 'TITLE', + setter: function(title) { + this.get('node').set('title', title); + } + }, + + /** + * @config container + * @description The container that the button is rendered to, handled by Toolbar + * @type String + */ + container: { + value: null, + writeOnce: true, + setter: function(node) { + var n = Y.get(node); + if (!n) { + Y.error('Invalid Node Given: ' + node); + } else { + n = n.item(0); + } + return n; + } + } + }; + + Y.extend(ToolbarButton, Y.Base, { + /** + * @property buttonType + * @private + * @description Tells if the Button is a Rich Button or a Simple Button + */ + buttonType: 'normal', + /** + * @method _handleMouseOver + * @private + * @description Adds classes to the button elements on mouseover (hover) + */ + _handleMouseOver: function() { + if (!this.get('disabled')) { + this.get('node').addClass('yui-button-hover'); + this.get('node').addClass('yui-' + this.get('type') + '-button-hover'); + } + }, + /** + * @method _handleMouseOut + * @private + * @description Removes classes from the button elements on mouseout (hover) + */ + _handleMouseOut: function() { + this.get('node').removeClass('yui-button-hover'); + this.get('node').removeClass('yui-' + this.get('type') + '-button-hover'); + }, + /** + * @method checkValue + * @param {String} value The value of the option that we want to mark as selected + * @description Select an option by value + */ + checkValue: function(value) { + if (this.get('type') == 'select') { + var opt = this.get('node').get('options'); + opt.each(function(n, k) { + if (n.get('value') == value) { + this.get('node').set('selectedIndex', k); + } + }, this); + } + }, + /** + * @method initializer + * @description The ToolbarButton class's initialization method + */ + initializer: function() { + var id, i, el, menu, opt, html; + switch (this.get('type')) { + case 'select': + case 'menu': + el = Y.Node.create(''); + menu = this.get('menu'); + + for (i = 0; i < menu.length; i++) { + opt = Y.Node.create(''); + el.appendChild(opt); + if (menu[i].checked) { + opt.set('selected', true); + } + } + el.on('change', Y.bind(this._handleSelect, this)); + id = Y.stamp(el); + el.set('id', id); + this.set('node', el); + break; + default: + html = ''; + this.set('node', Y.Node.create(html)); + this.get('node').on('mouseover', Y.bind(this._handleMouseOver, this)); + this.get('node').on('mouseout', Y.bind(this._handleMouseOut, this)); + break; + } + id = Y.stamp(this.get('node')); + this.set('id', id); + this.get('node').set('id', id); + this.set('title', this.get('title')); + this.set('label', this.get('label')); + this.set('disabled', this.get('disabled')); + this.get('container').appendChild(this.get('node')); + + this.get('node').on('click', Y.bind(function(e) { + e.halt(); + }, this)); + }, + /** + * @private + * @method _handleSelect + * @description The event fired when a change event gets fired on a select element + * @param {Event} ev The change event. + */ + _handleSelect: function(e) { + this.fire('change', {type: 'change', value: e.target.get('value'), target: this.get('node') }); + }, + /** + * @method getMenu + * @description A stub function to mimic YAHOO.widget.Button's getMenu method + */ + getMenu: function() { + return this.get('menu'); + }, + destructor: function() { + }, + /** + * @method toString + * @description Returns a string representing the toolbar. + * @return {String} + */ + toString: function() { + return 'Toolbar.Button (' + this.get('node').get('id') + ')'; + } + + }); + + Y.namespace('Toolbar'); + Y.Toolbar.Button = ToolbarButton; + + /* + var Lang = Y.Lang, + Dom = Y.DOM, + Event = { + on: Y.Event.nativeAdd, + getTarget: function(ev) { + return ev.target; + }, + stopEvent: function(ev) { + ev.halt(); + } + }, + YAHOO = { + log: console.log, + lang: Lang, + util: { + Dom: Dom, + Event: Event + } + }; + */ + + var getButton = function(id) { + var button = id; + if (Y.Lang.isString(id)) { + button = this.getButtonById(id); + } + if (Y.Lang.isNumber(id)) { + button = this.getButtonByIndex(id); + } + if (id instanceof Y.Toolbar.Button) { + button = id; + } else { + button = this.getButtonByValue(id); + } + return button; + }; + + /** + * Provides a rich toolbar widget based on the button and menu widgets + * @constructor + * @class Toolbar + * @extends YAHOO.util.Element + * @param {String/HTMLElement} el The element to turn into a toolbar. + * @param {Object} attrs Object liternal containing configuration parameters. + */ + var Toolbar = function() { + + this._configuredButtons = []; + + Toolbar.superclass.constructor.apply(this, arguments); + + }; + + Toolbar.NAME = 'Toolbar'; + + Toolbar.ATTRS = { + node: { + setter: function(node) { + var n = Y.get(node); + if (!n) { + Y.error('Invalid Node Given: ' + node); + } else { + n = n.item(0); + } + return n; + } + }, + /** + * @attribute buttonType + * @description The buttonType to use (advanced or basic) + * @type String + */ + buttonType: { + value: 'basic', + writeOnce: true, + validator: function(type) { + switch (type) { + case 'advanced': + case 'basic': + return type; + } + return 'basic'; + }, + setter: function(type) { + this.buttonType = Y.Toolbar.Button; + } + }, + /** + * @attribute buttons + * @description Object specifying the buttons to include in the toolbar + * Example: + *
+ * {
+ * { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
+ * { type: 'separator' },
+ * { id: 'b4', type: 'menu', label: 'Align', value: 'align',
+ * menu: [
+ * { text: "Left", value: 'alignleft' },
+ * { text: "Center", value: 'aligncenter' },
+ * { text: "Right", value: 'alignright' }
+ * ]
+ * }
+ * }
+ * ' + titlebar + '
'); + this._titlebar.appendChild(h2); + h2.get('firstChild').on('click', function(ev) { + ev.halt(); + }); + /* + Event.on([h2, h2.firstChild], 'focus', function() { + this._handleFocus(); + }, this, true); + */ + } + if (this.get('node').get('firstChild')) { + this.get('node').insertBefore(this._titlebar, this.get('node').get('firstChild')); + } else { + this.get('node').appendChild(this._titlebar); + } + if (this.get('collapse')) { + this.set('collapse', true); + } + } else if (this._titlebar) { + if (this._titlebar && this._titlebar.get('parentNode')) { + this._titlebar.get('parentNode').removeChild(this._titlebar); + } + } + }, + /** + * @protected + * @property _configuredButtons + * @type Array + */ + _configuredButtons: null, + /** + * @method _addMenuClasses + * @private + * @description This method is called from Menu's renderEvent to add a few more classes to the menu items + * @param {String} ev The event that fired. + * @param {Array} na Array of event information. + * @param {Object} o Button config object. + */ + _addMenuClasses: function(ev, na, o) { + Dom.addClass(this.element, 'yui-toolbar-' + o.get('value') + '-menu'); + if (Dom.hasClass(o._button.parentNode.parentNode, 'yui-toolbar-select')) { + Dom.addClass(this.element, 'yui-toolbar-select-menu'); + } + var items = this.getItems(); + for (var i = 0; i < items.length; i++) { + Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-').toLowerCase() : items[i]._oText.nodeValue.replace(/ /g, '-').toLowerCase())); + Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-'))); + } + }, + /** + * @property buttonType + * @description The default button to use + * @type Object + */ + buttonType: Y.Toolbar.Button, + /** + * @property dd + * @description The DragDrop instance associated with the Toolbar + * @type Object + */ + dd: null, + /** + * @property _colorData + * @description Object reference containing colors hex and text values. + * @type Object + */ + _colorData: { +/* {{{ _colorData */ + '#111111': 'Obsidian', + '#2D2D2D': 'Dark Gray', + '#434343': 'Shale', + '#5B5B5B': 'Flint', + '#737373': 'Gray', + '#8B8B8B': 'Concrete', + '#A2A2A2': 'Gray', + '#B9B9B9': 'Titanium', + '#000000': 'Black', + '#D0D0D0': 'Light Gray', + '#E6E6E6': 'Silver', + '#FFFFFF': 'White', + '#BFBF00': 'Pumpkin', + '#FFFF00': 'Yellow', + '#FFFF40': 'Banana', + '#FFFF80': 'Pale Yellow', + '#FFFFBF': 'Butter', + '#525330': 'Raw Siena', + '#898A49': 'Mildew', + '#AEA945': 'Olive', + '#7F7F00': 'Paprika', + '#C3BE71': 'Earth', + '#E0DCAA': 'Khaki', + '#FCFAE1': 'Cream', + '#60BF00': 'Cactus', + '#80FF00': 'Chartreuse', + '#A0FF40': 'Green', + '#C0FF80': 'Pale Lime', + '#DFFFBF': 'Light Mint', + '#3B5738': 'Green', + '#668F5A': 'Lime Gray', + '#7F9757': 'Yellow', + '#407F00': 'Clover', + '#8A9B55': 'Pistachio', + '#B7C296': 'Light Jade', + '#E6EBD5': 'Breakwater', + '#00BF00': 'Spring Frost', + '#00FF80': 'Pastel Green', + '#40FFA0': 'Light Emerald', + '#80FFC0': 'Sea Foam', + '#BFFFDF': 'Sea Mist', + '#033D21': 'Dark Forrest', + '#438059': 'Moss', + '#7FA37C': 'Medium Green', + '#007F40': 'Pine', + '#8DAE94': 'Yellow Gray Green', + '#ACC6B5': 'Aqua Lung', + '#DDEBE2': 'Sea Vapor', + '#00BFBF': 'Fog', + '#00FFFF': 'Cyan', + '#40FFFF': 'Turquoise Blue', + '#80FFFF': 'Light Aqua', + '#BFFFFF': 'Pale Cyan', + '#033D3D': 'Dark Teal', + '#347D7E': 'Gray Turquoise', + '#609A9F': 'Green Blue', + '#007F7F': 'Seaweed', + '#96BDC4': 'Green Gray', + '#B5D1D7': 'Soapstone', + '#E2F1F4': 'Light Turquoise', + '#0060BF': 'Summer Sky', + '#0080FF': 'Sky Blue', + '#40A0FF': 'Electric Blue', + '#80C0FF': 'Light Azure', + '#BFDFFF': 'Ice Blue', + '#1B2C48': 'Navy', + '#385376': 'Biscay', + '#57708F': 'Dusty Blue', + '#00407F': 'Sea Blue', + '#7792AC': 'Sky Blue Gray', + '#A8BED1': 'Morning Sky', + '#DEEBF6': 'Vapor', + '#0000BF': 'Deep Blue', + '#0000FF': 'Blue', + '#4040FF': 'Cerulean Blue', + '#8080FF': 'Evening Blue', + '#BFBFFF': 'Light Blue', + '#212143': 'Deep Indigo', + '#373E68': 'Sea Blue', + '#444F75': 'Night Blue', + '#00007F': 'Indigo Blue', + '#585E82': 'Dockside', + '#8687A4': 'Blue Gray', + '#D2D1E1': 'Light Blue Gray', + '#6000BF': 'Neon Violet', + '#8000FF': 'Blue Violet', + '#A040FF': 'Violet Purple', + '#C080FF': 'Violet Dusk', + '#DFBFFF': 'Pale Lavender', + '#302449': 'Cool Shale', + '#54466F': 'Dark Indigo', + '#655A7F': 'Dark Violet', + '#40007F': 'Violet', + '#726284': 'Smoky Violet', + '#9E8FA9': 'Slate Gray', + '#DCD1DF': 'Violet White', + '#BF00BF': 'Royal Violet', + '#FF00FF': 'Fuchsia', + '#FF40FF': 'Magenta', + '#FF80FF': 'Orchid', + '#FFBFFF': 'Pale Magenta', + '#4A234A': 'Dark Purple', + '#794A72': 'Medium Purple', + '#936386': 'Cool Granite', + '#7F007F': 'Purple', + '#9D7292': 'Purple Moon', + '#C0A0B6': 'Pale Purple', + '#ECDAE5': 'Pink Cloud', + '#BF005F': 'Hot Pink', + '#FF007F': 'Deep Pink', + '#FF409F': 'Grape', + '#FF80BF': 'Electric Pink', + '#FFBFDF': 'Pink', + '#451528': 'Purple Red', + '#823857': 'Purple Dino', + '#A94A76': 'Purple Gray', + '#7F003F': 'Rose', + '#BC6F95': 'Antique Mauve', + '#D8A5BB': 'Cool Marble', + '#F7DDE9': 'Pink Granite', + '#C00000': 'Apple', + '#FF0000': 'Fire Truck', + '#FF4040': 'Pale Red', + '#FF8080': 'Salmon', + '#FFC0C0': 'Warm Pink', + '#441415': 'Sepia', + '#82393C': 'Rust', + '#AA4D4E': 'Brick', + '#800000': 'Brick Red', + '#BC6E6E': 'Mauve', + '#D8A3A4': 'Shrimp Pink', + '#F8DDDD': 'Shell Pink', + '#BF5F00': 'Dark Orange', + '#FF7F00': 'Orange', + '#FF9F40': 'Grapefruit', + '#FFBF80': 'Canteloupe', + '#FFDFBF': 'Wax', + '#482C1B': 'Dark Brick', + '#855A40': 'Dirt', + '#B27C51': 'Tan', + '#7F3F00': 'Nutmeg', + '#C49B71': 'Mustard', + '#E1C4A8': 'Pale Tan', + '#FDEEE0': 'Marble' +/* }}} */ + }, + /** + * @property _colorPicker + * @description The HTML Element containing the colorPicker + * @type HTMLElement + */ + _colorPicker: null, + /** + * @property STR_COLLAPSE + * @description String for Toolbar Collapse Button + * @type String + */ + STR_COLLAPSE: 'Collapse Toolbar', + /** + * @property STR_EXPAND + * @description String for Toolbar Collapse Button - Expand + * @type String + */ + STR_EXPAND: 'Expand Toolbar', + /** + * @property STR_SPIN_LABEL + * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute + * @type String + */ + STR_SPIN_LABEL: 'Spin Button with value {VALUE}. Use Control Shift Up Arrow and Control Shift Down arrow keys to increase or decrease the value.', + /** + * @property STR_SPIN_UP + * @description String for spinbutton up + * @type String + */ + STR_SPIN_UP: 'Click to increase the value of this input', + /** + * @property STR_SPIN_DOWN + * @description String for spinbutton down + * @type String + */ + STR_SPIN_DOWN: 'Click to decrease the value of this input', + /** + * @property _titlebar + * @description Object reference to the titlebar + * @type HTMLElement + */ + _titlebar: null, + /** + * @property browser + * @description Standard browser detection + * @type Object + */ + browser: Y.UA, + /** + * @protected + * @property _buttonList + * @description Internal property list of current buttons in the toolbar + * @type Array + */ + _buttonList: null, + /** + * @protected + * @property _buttonGroupList + * @description Internal property list of current button groups in the toolbar + * @type Array + */ + _buttonGroupList: null, + /** + * @protected + * @property _sep + * @description Internal reference to the separator HTML Element for cloning + * @type HTMLElement + */ + _sep: null, + /** + * @protected + * @property _sepCount + * @description Internal refernce for counting separators, so we can give them a useful class name for styling + * @type Number + */ + _sepCount: null, + /** + * @protected + * @property draghandle + * @type HTMLElement + */ + _dragHandle: null, + /** + * @protected + * @property _toolbarConfigs + * @type Object + */ + _toolbarConfigs: { + renderer: true + }, + /** + * @protected + * @property CLASS_CONTAINER + * @description Default CSS class to apply to the toolbar container element + * @type String + */ + CLASS_CONTAINER: 'yui-toolbar-container', + /** + * @protected + * @property CLASS_DRAGHANDLE + * @description Default CSS class to apply to the toolbar's drag handle element + * @type String + */ + CLASS_DRAGHANDLE: 'yui-toolbar-draghandle', + /** + * @protected + * @property CLASS_SEPARATOR + * @description Default CSS class to apply to all separators in the toolbar + * @type String + */ + CLASS_SEPARATOR: 'yui-toolbar-separator', + /** + * @protected + * @property CLASS_DISABLED + * @description Default CSS class to apply when the toolbar is disabled + * @type String + */ + CLASS_DISABLED: 'yui-toolbar-disabled', + /** + * @protected + * @property CLASS_PREFIX + * @description Default prefix for dynamically created class names + * @type String + */ + CLASS_PREFIX: 'yui-toolbar', + /** + * @method init + * @description The Toolbar class's initialization method + */ + initializer: function() { + var fs = Y.Node.create(''); + this.set('id', this.get('node').get('id')); + this.get('node').appendChild(fs); + this.set('cont', fs.query('div.yui-toolbar-subcont')); + this.get('node').set('tabIndex', '-1'); + this.get('node').addClass(this.CLASS_CONTAINER); + + this._renderTitle(); + this._handleCollapse(); + this.on('titlebarChange', Y.bind(this._renderTitle, this)); + this.on('collapseChange', Y.bind(this._handleCollapse, this)); + + + this.processButtons(); + }, + processButtons: function() { + var button, buttons, len, b, data = this.get('buttons'); + Y.each(data, function(i, k) { + if (i.type == 'separator') { + this.addSeparator(); + } else if (i.group !== undefined) { + buttons = this.addButtonGroup(i); + if (buttons) { + len = buttons.length; + for(b = 0; b < len; b++) { + if (buttons[b]) { + this._configuredButtons[this._configuredButtons.length] = buttons[b].id; + } + } + } + this.set('buttons', data); + } else { + button = this.addButton(i); + if (button) { + this._configuredButtons[this._configuredButtons.length] = button.id; + } + } + }, this); + }, + /** + * @method initAttributes + * @description Initializes all of the configuration attributes used to create + * the toolbar. + * @param {Object} attr Object literal specifying a set of + * configuration attributes used to create the toolbar. + */ + initAttributes: function(attr) { + YAHOO.widget.Toolbar.superclass.initAttributes.call(this, attr); + + + /** + * @attribute disabled + * @description Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on. + * @default false + * @type Boolean + */ + this.setAttributeConfig('disabled', { + value: false, + method: function(disabled) { + if (this.get('disabled') === disabled) { + return false; + } + if (disabled) { + this.addClass(this.CLASS_DISABLED); + this.set('draggable', false); + this.disableAllButtons(); + } else { + this.removeClass(this.CLASS_DISABLED); + if (this._configs.draggable._initialConfig.value) { + //Draggable by default, set it back + this.set('draggable', true); + } + this.resetAllButtons(); + } + } + }); + + + /** + * @attribute draggable + * @description Boolean indicating if the toolbar should be draggable. + * @default false + * @type Boolean + */ + + this.setAttributeConfig('draggable', { + value: (attr.draggable || false), + method: function(draggable) { + if (draggable && !this.get('titlebar')) { + YAHOO.log('Dragging enabled', 'info', 'Toolbar'); + if (!this._dragHandle) { + this._dragHandle = document.createElement('SPAN'); + this._dragHandle.innerHTML = '|'; + this._dragHandle.setAttribute('title', 'Click to drag the toolbar'); + this._dragHandle.id = this.get('id') + '_draghandle'; + Dom.addClass(this._dragHandle, this.CLASS_DRAGHANDLE); + if (this.get('cont').hasChildNodes()) { + this.get('cont').insertBefore(this._dragHandle, this.get('cont').firstChild); + } else { + this.get('cont').appendChild(this._dragHandle); + } + this.dd = new YAHOO.util.DD(this.get('id')); + this.dd.setHandleElId(this._dragHandle.id); + + } + } else { + YAHOO.log('Dragging disabled', 'info', 'Toolbar'); + if (this._dragHandle) { + this._dragHandle.parentNode.removeChild(this._dragHandle); + this._dragHandle = null; + this.dd = null; + } + } + if (this._titlebar) { + if (draggable) { + this.dd = new YAHOO.util.DD(this.get('id')); + this.dd.setHandleElId(this._titlebar); + Dom.addClass(this._titlebar, 'draggable'); + } else { + Dom.removeClass(this._titlebar, 'draggable'); + if (this.dd) { + this.dd.unreg(); + this.dd = null; + } + } + } + }, + validator: function(value) { + var ret = true; + if (!YAHOO.util.DD) { + ret = false; + } + return ret; + } + }); + + }, + /** + * @method addButtonGroup + * @description Add a new button group to the toolbar. (uses addButton) + * @param {Object} oGroup Object literal reference to the Groups Config (contains an array of button configs as well as the group label) + */ + addButtonGroup: function(oGroup) { + + if (!this.get('node').hasClass(this.CLASS_PREFIX + '-grouped')) { + this.get('node').addClass(this.CLASS_PREFIX + '-grouped'); + } + var div = Y.Node.create(''); + if (oGroup.label) { + var label = Y.Node.create('' + oGroup.label + '
'); + div.appendChild(label); + } + if (!this.get('grouplabels')) { + this.get('cont').addClass(this.CLASS_PREFIX, '-nogrouplabels'); + } + + this.get('cont').appendChild(div); + + //For accessibility, let's put all of the group buttons in an Unordered List + var ul = Y.Node.create('' + tar.get('innerHTML')); + } + }, this)); + picker.on('focus', function(ev) { + ev.halt(); + }); + picker.on('click', function(ev) { + ev.halt(); + }); + picker.on('mousedown', Y.bind(function(ev) { + ev.halt(); + var tar = ev.target, data; + if (tar.get('tagName').toLowerCase() == 'a') { + data = tar.get('innerHTML'); + var retVal = this.fire('colorPickerClicked', { type: 'colorPickerClicked', button: this._colorPicker._button, color: data, colorName: this._colorData['#' + data] } ); + var info = { + color: data, + colorName: this._colorData['#' + data], + value: this._colorPicker._button + }; + + this.fire('buttonClick', { type: 'buttonClick', button: info }); + this.getButtonByValue(this._colorPicker._button).getMenu().hide(); + this._colorPicker.setStyle('display', 'none'); + } + }, this)); + }, + /** + * @method _resetColorPicker + * @private + * @description Clears the currently selected color or mouseover color in the color picker. + */ + _resetColorPicker: function() { + var em = this._colorPicker.query('em'); + var strong = this._colorPicker.query('strong'); + em.setStyle('backgroundColor', 'transparent'); + strong.set('innerHTML', ''); + }, + /** + * @method _makeColorButton + * @private + * @description Called to turn a "color" button into a menu button with an Overlay for the menu. + * @param {Object} _oButton YAHOO.widget.ToolbarButton reference + */ + _makeColorButton: function(_oButton) { + if (!this._colorPicker) { + this._createColorPicker(this.get('id')); + } + _oButton.type = 'color'; + _oButton.menu = new Y.Overlay({ + contentBox: '#' + this.get('id') + '_' + _oButton.value + '_menu', + bodyContent: 'FOO', + visible: false, + zIndex: 999 + }); + _oButton.menu.render(this.get('cont')); + _oButton.menu.set('visible', false); + + _oButton.menu.get('contentBox').addClass('yui-button-menu'); + _oButton.menu.get('contentBox').addClass('yui-color-button-menu'); + + _oButton.menu.after('visibleChange', Y.bind(function() { + _oButton.menu.set('align', { + node: this.getButtonById(_oButton.id).get('node'), + points: ['tl', 'bl'] + }); + //Move the DOM reference of the color picker to the Overlay that we are about to show. + this._resetColorPicker(); + var _p = this._colorPicker; + if (_p.get('parentNode')) { + _p.get('parentNode').removeChild(_p); + } + _oButton.menu.get('contentBox').query('.yui-widget-bd').set('innerHTML', ''); + _oButton.menu.get('contentBox').query('.yui-widget-bd').appendChild(_p); + this._colorPicker.setStyle('display', 'block'); + }, this)); + + return _oButton; + }, + /** + * @private + * @method _makeSpinButton + * @description Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values. + * @param {Object} _button YAHOO.widget.ToolbarButton reference + * @param {Object} oButton Object literal containing the buttons initial config + */ + _makeSpinButton: function(_button, oButton) { + _button.get('node').addClass(this.CLASS_PREFIX + '-spinbutton'); + var self = this, + _par = _button.get('node'), //parentNode of Button Element for appending child + range = oButton.range, + _b1 = Y.Node.create('' + this.STR_SPIN_UP + ''), + _b2 = Y.Node.create('' + this.STR_SPIN_DOWN + ''); + + //Append them to the container + _par.appendChild(_b1); + _par.appendChild(_b2); + + + var label = Y.Lang.substitute(this.STR_SPIN_LABEL, { VALUE: _button.get('label') }); + _button.set('title', label); + + + var cleanVal = function(value) { + value = ((value < range[0]) ? range[0] : value); + value = ((value > range[1]) ? range[1] : value); + return value; + }; + + var br = this.browser; + var tbar = false; + var strLabel = this.STR_SPIN_LABEL; + if (this._titlebar && this._titlebar.get('firstChild')) { + tbar = this._titlebar.get('firstChild'); + } + + var _intUp = function(ev) { + ev.halt(); + if (!_button.get('disabled') && (ev.keyCode != 9)) { + var value = parseInt(_button.get('label'), 10); + value++; + value = cleanVal(value); + _button.set('label', ''+value); + var label = Y.Lang.substitute(strLabel, { VALUE: _button.get('label') }); + _button.set('title', label); + self._buttonClick(ev, oButton); + } + }; + + var _intDown = function(ev) { + ev.halt(); + if (!_button.get('disabled') && (ev.keyCode != 9)) { + var value = parseInt(_button.get('label'), 10); + value--; + value = cleanVal(value); + + _button.set('label', ''+value); + var label = Y.Lang.substitute(strLabel, { VALUE: _button.get('label') }); + _button.set('title', label); + self._buttonClick(ev, oButton); + } + }; + + var _intKeyUp = function(ev) { + if (ev.keyCode == 38) { + _intUp(ev); + } else if (ev.keyCode == 40) { + _intDown(ev); + } else if (ev.keyCode == 107 && ev.shiftKey) { //Plus Key + _intUp(ev); + } else if (ev.keyCode == 109 && ev.shiftKey) { //Minus Key + _intDown(ev); + } + }; + + //Handle arrow keys.. + _button.on('keydown', Y.bind(_intKeyUp, this)); + + //Listen for the click on the up button and act on it + //Listen for the click on the down button and act on it + _b1.on('mousedown',function(ev) { ev.halt(); }); + _b2.on('mousedown',function(ev) { ev.halt(); }); + _b1.on('click', Y.bind(_intUp, this)); + _b2.on('click', Y.bind(_intDown, this)); + }, + /** + * @protected + * @method _buttonClick + * @description Click handler for all buttons in the toolbar. + * @param {String} ev The event that was passed in. + * @param {Object} info Object literal of information about the button that was clicked. + */ + _buttonClick: function(ev, info) { + var doEvent = true; + + if (ev && ev.type == 'keypress') { + if (ev.keyCode == 9) { + doEvent = false; + } else if ((ev.keyCode === 13) || (ev.keyCode === 0) || (ev.keyCode === 32)) { + } else { + doEvent = false; + } + } + + if (doEvent) { + var fireNextEvent = true, + retValue = false; + + info.isSelected = this.isSelected(info.id); + + if (info.value) { + Y.log('fireEvent::' + info.value + 'Click'); + retValue = this.fire(info.value + 'Click', { type: info.value + 'Click', target: this.get('element'), button: info }); + if (retValue === false) { + fireNextEvent = false; + } + } + + if (info.menucmd && fireNextEvent) { + Y.log('fireEvent::' + info.menucmd + 'Click'); + retValue = this.fire(info.menucmd + 'Click', { type: info.menucmd + 'Click', target: this.get('element'), button: info }); + if (retValue === false) { + fireNextEvent = false; + } + } + if (fireNextEvent) { + Y.log('fireEvent::buttonClick'); + this.fire('buttonClick', { type: 'buttonClick', target: this.get('element'), button: info }); + } + + if (info.type == 'select') { + var button = this.getButtonById(info.id); + if (button.buttonType == 'rich') { + var txt = info.value; + for (var i = 0; i < info.menu.length; i++) { + if (info.menu[i].value == info.value) { + txt = info.menu[i].text; + break; + } + } + button.set('label', ''); + var _items = button.getMenu().getItems(); + for (var m = 0; m < _items.length; m++) { + if (_items[m].value.toLowerCase() == info.value.toLowerCase()) { + _items[m].cfg.setProperty('checked', true); + } else { + _items[m].cfg.setProperty('checked', false); + } + } + } + } + if (ev) { + ev.halt(); + } + } + }, + /** + * @private + * @property _keyNav + * @description Flag to determine if the arrow nav listeners have been attached + * @type Boolean + */ + _keyNav: null, + /** + * @private + * @property _navCounter + * @description Internal counter for walking the buttons in the toolbar with the arrow keys + * @type Number + */ + _navCounter: null, + /** + * @private + * @method _navigateButtons + * @description Handles the navigation/focus of toolbar buttons with the Arrow Keys + * @param {Event} ev The Key Event + */ + _navigateButtons: function(ev) { + switch (ev.keyCode) { + case 37: + case 39: + if (ev.keyCode == 37) { + this._navCounter--; + } else { + this._navCounter++; + } + if (this._navCounter > (this._buttonList.length - 1)) { + this._navCounter = 0; + } + if (this._navCounter < 0) { + this._navCounter = (this._buttonList.length - 1); + } + if (this._buttonList[this._navCounter]) { + var el = this._buttonList[this._navCounter].get('node'); + if (this.browser.ie) { + el = this._buttonList[this._navCounter].get('node').query('a'); + } + if (this._buttonList[this._navCounter].get('disabled')) { + this._navigateButtons(ev); + } else { + el.focus(); + } + } + break; + } + }, + /** + * @private + * @method _handleFocus + * @description Sets up the listeners for the arrow key navigation + */ + _handleFocus: function() { + if (!this._keyNav) { + var ev = 'keypress'; + if (this.browser.ie) { + ev = 'keydown'; + } + this.get('node').on(ev, Y.bind(this._navigateButtons, this)); + this._keyNav = true; + this._navCounter = -1; + } + }, + /** + * @method getButtonById + * @description Gets a button instance from the toolbar by is Dom id. + * @param {String} id The Dom id to query for. + * @return {YAHOO.widget.ToolbarButton} + */ + getButtonById: function(id) { + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + if (this._buttonList[i] && this._buttonList[i].get('id') == id) { + return this._buttonList[i]; + } + } + return false; + }, + /** + * @method getButtonByValue + * @description Gets a button instance or a menuitem instance from the toolbar by it's value. + * @param {String} value The button value to query for. + * @return {YAHOO.widget.ToolbarButton or YAHOO.widget.MenuItem} + */ + getButtonByValue: function(value) { + var _buttons = this.get('buttons'); + if (!_buttons) { + return false; + } + var len = _buttons.length; + for (var i = 0; i < len; i++) { + if (_buttons[i].group !== undefined) { + for (var m = 0; m < _buttons[i].buttons.length; m++) { + if ((_buttons[i].buttons[m].value == value) || (_buttons[i].buttons[m].menucmd == value)) { + return this.getButtonById(_buttons[i].buttons[m].id); + } + if (_buttons[i].buttons[m].menu) { //Menu Button, loop through the values + for (var s = 0; s < _buttons[i].buttons[m].menu.length; s++) { + if (_buttons[i].buttons[m].menu[s].value == value) { + return this.getButtonById(_buttons[i].buttons[m].id); + } + } + } + } + } else { + if ((_buttons[i].value == value) || (_buttons[i].menucmd == value)) { + return this.getButtonById(_buttons[i].id); + } + if (_buttons[i].menu) { //Menu Button, loop through the values + for (var j = 0; j < _buttons[i].menu.length; j++) { + if (_buttons[i].menu[j].value == value) { + return this.getButtonById(_buttons[i].id); + } + } + } + } + } + return false; + }, + /** + * @method getButtonByIndex + * @description Gets a button instance from the toolbar by is index in _buttonList. + * @param {Number} index The index of the button in _buttonList. + * @return {YAHOO.widget.ToolbarButton} + */ + getButtonByIndex: function(index) { + if (this._buttonList[index]) { + return this._buttonList[index]; + } else { + return false; + } + }, + /** + * @method getButtons + * @description Returns an array of buttons in the current toolbar + * @return {Array} + */ + getButtons: function() { + return this._buttonList; + }, + /** + * @method disableButton + * @description Disables a button in the toolbar. + * @param {String/Number} id Disable a button by it's id, index or value. + * @return {Boolean} + */ + disableButton: function(id) { + var button = getButton.call(this, id); + if (button) { + button.set('disabled', true); + } else { + return false; + } + }, + /** + * @method enableButton + * @description Enables a button in the toolbar. + * @param {String/Number} id Enable a button by it's id, index or value. + * @return {Boolean} + */ + enableButton: function(id) { + if (this.get('disabled')) { + return false; + } + var button = getButton.call(this, id); + if (button) { + if (button.get('disabled')) { + button.set('disabled', false); + } + } else { + return false; + } + }, + /** + * @method isSelected + * @description Tells if a button is selected or not. + * @param {String/Number} id A button by it's id, index or value. + * @return {Boolean} + */ + isSelected: function(id) { + var button = getButton.call(this, id); + if (button) { + return button._selected; + } + return false; + }, + /** + * @method selectButton + * @description Selects a button in the toolbar. + * @param {String/Number} id Select a button by it's id, index or value. + * @param {String} value If this is a Menu Button, check this item in the menu + * @return {Boolean} + */ + selectButton: function(id, value) { + var button = getButton.call(this, id); + if (button && (button.get('type') == 'push')) { + button.get('node').addClass('yui-button-selected'); + button.get('node').addClass('yui-button-' + button.get('value') + '-selected'); + button._selected = true; + if (value) { + if (button.buttonType == 'rich') { + var _items = button.getMenu().getItems(); + for (var m = 0; m < _items.length; m++) { + if (_items[m].value == value) { + _items[m].cfg.setProperty('checked', true); + button.set('label', ''); + } else { + _items[m].cfg.setProperty('checked', false); + } + } + } + } + } else { + return false; + } + }, + /** + * @method deselectButton + * @description Deselects a button in the toolbar. + * @param {String/Number} id Deselect a button by it's id, index or value. + * @return {Boolean} + */ + deselectButton: function(id) { + var button = getButton.call(this, id); + if (button) { + button.get('node').removeClass('yui-button-selected'); + button.get('node').removeClass('yui-button-' + button.get('value') + '-selected'); + button.get('node').removeClass('yui-button-hover'); + button._selected = false; + } else { + return false; + } + }, + /** + * @method deselectAllButtons + * @description Deselects all buttons in the toolbar. + * @return {Boolean} + */ + deselectAllButtons: function() { + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.deselectButton(this._buttonList[i]); + } + }, + /** + * @method disableAllButtons + * @description Disables all buttons in the toolbar. + * @return {Boolean} + */ + disableAllButtons: function() { + if (this.get('disabled')) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.disableButton(this._buttonList[i]); + } + }, + /** + * @method enableAllButtons + * @description Enables all buttons in the toolbar. + * @return {Boolean} + */ + enableAllButtons: function() { + if (this.get('disabled')) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.enableButton(this._buttonList[i]); + } + }, + /** + * @method resetAllButtons + * @description Resets all buttons to their initial state. + * @param {Object} _ex Except these buttons + * @return {Boolean} + */ + resetAllButtons: function(_ex) { + if (!Y.Lang.isObject(_ex)) { + _ex = {}; + } + if (this.get('disabled') || !this._buttonList) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + var _button = this._buttonList[i]; + if (_button) { + //var disabled = _button._configs.disabled._initialConfig.value; + var disabled = false; + if (_ex[_button.get('id')]) { + this.enableButton(_button); + this.selectButton(_button); + } else { + if (disabled) { + this.disableButton(_button); + } else { + this.enableButton(_button); + } + this.deselectButton(_button); + } + } + } + }, + /** + * @method destroyButton + * @description Destroy a button in the toolbar. + * @param {String/Number} id Destroy a button by it's id or index. + * @return {Boolean} + */ + destroyButton: function(id) { + var button = getButton.call(this, id); + if (button) { + var thisID = button.get('id'), + new_list = [], i = 0, + len = this._buttonList.length; + + button.destroy(); + + for (i = 0; i < len; i++) { + if (this._buttonList[i].get('id') != thisID) { + new_list[new_list.length]= this._buttonList[i]; + } + } + + this._buttonList = new_list; + } else { + return false; + } + }, + /** + * @method destroy + * @description Destroys the toolbar, all of it's elements and objects. + * @return {Boolean} + */ + destructor: function() { + var len = this._configuredButtons.length, j, i, b; + for(b = 0; b < len; b++) { + this.destroyButton(this._configuredButtons[b]); + } + + this._configuredButtons = null; + + this.get('element').innerHTML = ''; + this.get('element').className = ''; + //Brutal Object Destroy + for (i in this) { + if (Lang.hasOwnProperty(this, i)) { + this[i] = null; + } + } + return true; + }, + /** + * @method collapse + * @description Programatically collapse the toolbar. + * @param {Boolean} collapse True to collapse, false to expand. + */ + collapse: function(collapse) { + var el = this._titlebar.query('span.collapse'); + if (collapse === false) { + this.get('cont').get('parentNode').removeClass('yui-toolbar-container-collapsed'); + if (el) { + el.removeClass('collapsed'); + el.set('title', this.STR_COLLAPSE); + } + this.fire('toolbarExpanded', { type: 'toolbarExpanded' }); + } else { + if (el) { + el.addClass('collapsed'); + el.set('title', this.STR_EXPAND); + } + this.get('cont').get('parentNode').addClass('yui-toolbar-container-collapsed'); + this.fire('toolbarCollapsed', { type: 'toolbarCollapsed' }); + } + }, + /** + * @method toString + * @description Returns a string representing the toolbar. + * @return {String} + */ + toString: function() { + return 'Toolbar'; + } + }); + + Y.namespace('Y.Toolbar'); + Y.Toolbar.Bar = Toolbar; + + var YAHOO = Y.Port(), + Lang = YAHOO.lang, + Dom = YAHOO.util.Dom, + Event = YAHOO.util.Event; + + var SimpleEditor = function(o) { + Y.log('SimpleEditor Initalizing'); + + var node = Y.get(o.node), + id = node.get('id'); + if (!id) { + id = Y.stamp(node); + node.set('id', id); + } + + var element_cont = Y.Node.create('
html {
+ height: 95%;
+ }
+ body {
+ height: 100%;
+ padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;
+ }
+ a {
+ color: blue;
+ text-decoration: underline;
+ cursor: pointer;
+ }
+ .warning-localfile {
+ border-bottom: 1px dashed red !important;
+ }
+ .yui-busy {
+ cursor: wait !important;
+ }
+ img.selected { //Safari image selection
+ border: 2px dotted #808080;
+ }
+ img {
+ cursor: pointer !important;
+ border: none;
+ }
+ {TITLE}, {CSS}, {HIDDEN_CSS}, {EXTRA_CSS} and {CONTENT} need to be there, they are passed to YAHOO.lang.substitute to be replace with other strings.
+
onload="document.body._rteLoaded = true;" : the onload statement must be there or the editor will not finish loading.
+
+ <html>
+ <head>
+ <title>{TITLE}</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+ <style>
+ {CSS}
+ </style>
+ <style>
+ {HIDDEN_CSS}
+ </style>
+ <style>
+ {EXTRA_CSS}
+ </style>
+ </head>
+ <body onload="document.body._rteLoaded = true;">
+ {CONTENT}
+ </body>
+ </html>
+
+
+ * @type String
+ */
+ 'html': {
+ value: null,
+ writeOnce: true
+ },
+ /**
+ * @attribute extracss
+ * @description Extra user defined css to load after the default SimpleEditor CSS
+ * @default ''
+ * @type String
+ */
+ 'extracss': {
+ value: '',
+ writeOnce: true
+ },
+ /**
+ * @config setDesignMode
+ * @description Should the Editor set designMode on the document. Default: true.
+ * @default true
+ * @type Boolean
+ */
+ setDesignMode: {
+ value: true
+ },
+ /**
+ * @config nodeChangeDelay
+ * @description Do we wrap the nodeChange method in a timeout for performance. Default: true.
+ * @default true
+ * @type Boolean
+ */
+ nodeChangeDelay: {
+ value: true
+ },
+ /**
+ * @attribute dompath
+ * @description Toggle the display of the current Dom path below the editor
+ * @default false
+ * @type Boolean
+ */
+ dompath: {
+ value: false
+ },
+ /**
+ * @attribute markup
+ * @description Should we try to adjust the markup for the following types: semantic, css, default or xhtml
+ * @default "semantic"
+ * @type String
+ */
+ markup: {
+ value: 'semantic',
+ validator: function(markup) {
+ switch (markup.toLowerCase()) {
+ case 'semantic':
+ case 'css':
+ case 'default':
+ case 'xhtml':
+ return true;
+ }
+ return false;
+ }
+ },
+ /**
+ * @config maxUndo
+ * @description The max number of undo levels to store.
+ * @default 30
+ * @type Number
+ */
+ maxUndo: {
+ writeOnce: true,
+ value: 30
+ },
+
+ /**
+ * @config ptags
+ * @description If true, the editor uses <P> tags instead of <br> tags. (Use Shift + Enter to get a <br>)
+ * @default false
+ * @type Boolean
+ */
+ ptags: {
+ writeOnce: true,
+ value: false
+ },
+ /**
+ * @config plainText
+ * @description Process the inital textarea data as if it was plain text. Accounting for spaces, tabs and line feeds.
+ * @default false
+ * @type Boolean
+ */
+ plainText: {
+ writeOnce: true,
+ value: false
+ },
+ /**
+ * @private
+ * @config disabled_iframe
+ * @description Internal config for holding the iframe element used when disabling the Editor.
+ * @default null
+ * @type HTMLElement
+ */
+ disabled_iframe: {
+ value: null
+ },
+ /**
+ * @config nodeChangeThreshold
+ * @description The number of seconds that need to be in between nodeChange processing
+ * @default 3
+ * @type Number
+ */
+ nodeChangeThreshold: {
+ value: 3,
+ validator: Y.Lang.isNumber
+ },
+ /**
+ * @config allowNoEdit
+ * @description Should the editor check for non-edit fields. It should be noted that this technique is not perfect. If the user does the right things, they will still be able to make changes.
+ * Such as highlighting an element below and above the content and hitting a toolbar button or a shortcut key.
+ * @default false
+ * @type Boolean
+ */
+ allowNoEdit: {
+ value: false,
+ validator: Y.Lang.isBoolean
+ },
+ /**
+ * @config limitCommands
+ * @description Should the Editor limit the allowed execCommands to the ones available in the toolbar. If true, then execCommand and keyboard shortcuts will fail if they are not defined in the toolbar.
+ * @default false
+ * @type Boolean
+ */
+ limitCommands: {
+ value: false,
+ validator: Y.Lang.isBoolean
+ },
+ /**
+ * @attribute removeLineBreaks
+ * @description Should we remove linebreaks and extra spaces on cleanup
+ * @default false
+ * @type Boolean
+ */
+ removeLineBreaks: {
+ value: false,
+ validator: Y.Lang.isBoolean
+ },
+ /**
+ * @config filterWord
+ * @description Attempt to filter out MS Word HTML from the Editor's output.
+ * @type Boolean
+ */
+ filterWord: {
+ value: false,
+ validator: Y.Lang.isBoolean
+ },
+ /**
+ * @config insert
+ * @description If true, selection is not required for: fontname, fontsize, forecolor, backcolor.
+ * @default false
+ * @type Boolean
+ */
+ insert: {
+ value: false
+ },
+ /**
+ * @config saveEl
+ * @description When save HTML is called, this element will be updated as well as the source of data.
+ * @default element
+ * @type HTMLElement
+ */
+ saveEl: {
+ value: null,
+ setter: function(node) {
+ var n = Y.get(node);
+ if (!n) {
+ return false;
+ } else {
+ n = n.item(0);
+ }
+ return n;
+ }
+ },
+ /**
+ * @attribute disabled
+ * @description This will toggle the editor's disabled state. When the editor is disabled, designMode is turned off and a mask is placed over the iframe so no interaction can take place.
+ All Toolbar buttons are also disabled so they cannot be used.
+ * @default false
+ * @type Boolean
+ */
+ disabled: {
+ value: false,
+ setter: function(disabled) {
+ if (this._rendered) {
+ this._disableEditor(disabled);
+ }
+ }
+ },
+ /**
+ * @attribute focusAtStart
+ * @description Should we focus the window when the content is ready?
+ * @default false
+ * @type Boolean
+ */
+ focusAtStart: {
+ value: false,
+ writeOnce: true
+ },
+ /**
+ * @attribute handleSubmit
+ * @description Config handles if the editor will attach itself to the textareas parent form's submit handler.
+ If it is set to true, the editor will attempt to attach a submit listener to the textareas parent form.
+ Then it will trigger the editors save handler and place the new content back into the text area before the form is submitted.
+ * @default false
+ * @type Boolean
+ */
+ handleSubmit: {
+ value: false
+ }
+ };
+
+ Y.extend(SimpleEditor, Y.PortBase, {
+ _handleSubmit: function() {
+ var exec = this.get('handleSubmit');
+ if (this.get('node').get('form')) {
+ if (!this._formButtons) {
+ this._formButtons = [];
+ }
+ if (exec) {
+ this.get('node').get('form').on('submit', Y.bind(this._handleFormSubmit, this));
+
+ var i = this.get('node').get('form').query('input');
+ if (i) {
+ i.each(function(v, k) {
+ var type = v.get('type');
+ if (type && (type.toLowerCase() == 'submit')) {
+ v.on('click', Y.bind(this._handleFormButtonClick, this));
+ this._formButtons.push(v);
+ }
+ }, this);
+ }
+ } else {
+ //Event.removeListener(this.get('element').form, 'submit', this._handleFormSubmit);
+ //if (this._formButtons) {
+ // Event.removeListener(this._formButtons, 'click', this._handleFormButtonClick);
+ //}
+ }
+ }
+ },
+ _handleInsert: function() {
+ if (this.get('insert')) {
+ var buttons = {
+ fontname: true,
+ fontsize: true,
+ forecolor: true,
+ backcolor: true
+ };
+ var tmp = this._defaultToolbar.buttons;
+ for (var i = 0; i < tmp.length; i++) {
+ if (tmp[i].buttons) {
+ for (var a = 0; a < tmp[i].buttons.length; a++) {
+ if (tmp[i].buttons[a].value) {
+ if (buttons[tmp[i].buttons[a].value]) {
+ delete tmp[i].buttons[a].disabled;
+ }
+ }
+ }
+ }
+ }
+ }
+ },
+ _handleDOMPath: function() {
+ var dompath = this.get('dompath');
+ if (dompath && !this.dompath) {
+ this.dompath = Y.Node.create('');
+ this.get('element_cont').get('firstChild').appendChild(this.dompath);
+ if (this.get('iframe')) {
+ this._writeDomPath();
+ }
+ } else if (!dompath && this.dompath) {
+ this.dompath.get('parentNode').removeChild(this.dompath);
+ this.dompath = null;
+ }
+ },
+ /**
+ * @private
+ * @property _lastCommand
+ * @description A cache of the last execCommand (used for Undo/Redo so they don't mark an undo level)
+ * @type String
+ */
+ _lastCommand: null,
+ _undoNodeChange: function() {},
+ _storeUndo: function() {},
+ /**
+ * @private
+ * @method _checkKey
+ * @description Checks a keyMap entry against a key event
+ * @param {Object} k The _keyMap object
+ * @param {Event} e The Mouse Event
+ * @return {Boolean}
+ */
+ _checkKey: function(k, e) {
+ var ret = false;
+ if ((e.keyCode === k.key)) {
+ if (k.mods && (k.mods.length > 0)) {
+ var val = 0;
+ for (var i = 0; i < k.mods.length; i++) {
+ if (this.browser.mac) {
+ if (k.mods[i] == 'ctrl') {
+ k.mods[i] = 'meta';
+ }
+ }
+ if (e[k.mods[i] + 'Key'] === true) {
+ val++;
+ }
+ }
+ if (val === k.mods.length) {
+ ret = true;
+ }
+ } else {
+ ret = true;
+ }
+ }
+ //YAHOO.log('Shortcut Key Check: (' + k.key + ') return: ' + ret, 'info', 'SimpleEditor');
+ return ret;
+ },
+ /**
+ * @private
+ * @property _keyMap
+ * @description Named key maps for various actions in the Editor. Example: CLOSE_WINDOW: { key: 87, mods: ['shift', 'ctrl'] }.
+ * This entry shows that when key 87 (W) is found with the modifiers of shift and control, the window will close. You can customize this object to tweak keyboard shortcuts.
+ * @type {Object/Mixed}
+ */
+ _keyMap: {
+ SELECT_ALL: {
+ key: 65, //A key
+ mods: ['ctrl']
+ },
+ CLOSE_WINDOW: {
+ key: 87, //W key
+ mods: ['shift', 'ctrl']
+ },
+ FOCUS_TOOLBAR: {
+ key: 27,
+ mods: ['shift']
+ },
+ FOCUS_AFTER: {
+ key: 27
+ },
+ FONT_SIZE_UP: {
+ key: 38,
+ mods: ['shift', 'ctrl']
+ },
+ FONT_SIZE_DOWN: {
+ key: 40,
+ mods: ['shift', 'ctrl']
+ },
+ CREATE_LINK: {
+ key: 76,
+ mods: ['shift', 'ctrl']
+ },
+ BOLD: {
+ key: 66,
+ mods: ['shift', 'ctrl']
+ },
+ ITALIC: {
+ key: 73,
+ mods: ['shift', 'ctrl']
+ },
+ UNDERLINE: {
+ key: 85,
+ mods: ['shift', 'ctrl']
+ },
+ UNDO: {
+ key: 90,
+ mods: ['ctrl']
+ },
+ REDO: {
+ key: 90,
+ mods: ['shift', 'ctrl']
+ },
+ JUSTIFY_LEFT: {
+ key: 219,
+ mods: ['shift', 'ctrl']
+ },
+ JUSTIFY_CENTER: {
+ key: 220,
+ mods: ['shift', 'ctrl']
+ },
+ JUSTIFY_RIGHT: {
+ key: 221,
+ mods: ['shift', 'ctrl']
+ }
+ },
+ /**
+ * @private
+ * @method _cleanClassName
+ * @description Makes a useable classname from dynamic data, by dropping it to lowercase and replacing spaces with -'s.
+ * @param {String} str The classname to clean up
+ * @return {String}
+ */
+ _cleanClassName: function(str) {
+ return str.replace(/ /g, '-').toLowerCase();
+ },
+ /**
+ * @property _textarea
+ * @description Flag to determine if we are using a textarea or an HTML Node.
+ * @type Boolean
+ */
+ _textarea: null,
+ /**
+ * @property _docType
+ * @description The DOCTYPE to use in the editable container.
+ * @type String
+ */
+ _docType: '',
+ /**
+ * @property editorDirty
+ * @description This flag will be set when certain things in the Editor happen. It is to be used by the developer to check to see if content has changed.
+ * @type Boolean
+ */
+ editorDirty: null,
+ /**
+ * @property _defaultCSS
+ * @description The default CSS used in the config for 'css'. This way you can add to the config like this: { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' }
+ * @type String
+ */
+ _defaultCSS: 'html { height: 95%; } body { padding: 7px; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } .warning-localfile { border-bottom: 1px dashed red !important; } .yui-busy { cursor: wait !important; } img.selected { border: 2px dotted #808080; } img { cursor: pointer !important; border: none; } body.ptags.webkit div.yui-wk-p { margin: 11px 0; } body.ptags.webkit div.yui-wk-div { margin: 0; }',
+ /**
+ * @property _defaultToolbar
+ * @private
+ * @description Default toolbar config.
+ * @type Object
+ */
+ _defaultToolbar: null,
+ /**
+ * @property _lastButton
+ * @private
+ * @description The last button pressed, so we don't disable it.
+ * @type Object
+ */
+ _lastButton: null,
+ /**
+ * @property _baseHREF
+ * @private
+ * @description The base location of the editable page (this page) so that relative paths for image work.
+ * @type String
+ */
+ _baseHREF: function() {
+ var href = document.location.href;
+ if (href.indexOf('?') !== -1) { //Remove the query string
+ href = href.substring(0, href.indexOf('?'));
+ }
+ href = href.substring(0, href.lastIndexOf('/')) + '/';
+ return href;
+ }(),
+ /**
+ * @property _lastImage
+ * @private
+ * @description Safari reference for the last image selected (for styling as selected).
+ * @type HTMLElement
+ */
+ _lastImage: null,
+ /**
+ * @property _blankImageLoaded
+ * @private
+ * @description Don't load the blank image more than once..
+ * @type Boolean
+ */
+ _blankImageLoaded: null,
+ /**
+ * @property _fixNodesTimer
+ * @private
+ * @description Holder for the fixNodes timer
+ * @type Date
+ */
+ _fixNodesTimer: null,
+ /**
+ * @property _nodeChangeTimer
+ * @private
+ * @description Holds a reference to the nodeChange setTimeout call
+ * @type Number
+ */
+ _nodeChangeTimer: null,
+ /**
+ * @property _nodeChangeDelayTimer
+ * @private
+ * @description Holds a reference to the nodeChangeDelay setTimeout call
+ * @type Number
+ */
+ _nodeChangeDelayTimer: null,
+ /**
+ * @property _lastNodeChangeEvent
+ * @private
+ * @description Flag to determine the last event that fired a node change
+ * @type Event
+ */
+ _lastNodeChangeEvent: null,
+ /**
+ * @property _lastNodeChange
+ * @private
+ * @description Flag to determine when the last node change was fired
+ * @type Date
+ */
+ _lastNodeChange: 0,
+ /**
+ * @property _rendered
+ * @private
+ * @description Flag to determine if editor has been rendered or not
+ * @type Boolean
+ */
+ _rendered: null,
+ /**
+ * @property DOMReady
+ * @private
+ * @description Flag to determine if DOM is ready or not
+ * @type Boolean
+ */
+ DOMReady: null,
+ /**
+ * @property _selection
+ * @private
+ * @description Holder for caching iframe selections
+ * @type Object
+ */
+ _selection: null,
+ /**
+ * @property _mask
+ * @private
+ * @description DOM Element holder for the editor Mask when disabled
+ * @type Object
+ */
+ _mask: null,
+ /**
+ * @property _showingHiddenElements
+ * @private
+ * @description Status of the hidden elements button
+ * @type Boolean
+ */
+ _showingHiddenElements: null,
+ /**
+ * @property currentWindow
+ * @description A reference to the currently open EditorWindow
+ * @type Object
+ */
+ currentWindow: null,
+ /**
+ * @property currentEvent
+ * @description A reference to the current editor event
+ * @type Event
+ */
+ currentEvent: null,
+ /**
+ * @property operaEvent
+ * @private
+ * @description setTimeout holder for Opera and Image DoubleClick event..
+ * @type Object
+ */
+ operaEvent: null,
+ /**
+ * @property currentFont
+ * @description A reference to the last font selected from the Toolbar
+ * @type HTMLElement
+ */
+ currentFont: null,
+ /**
+ * @property currentElement
+ * @description A reference to the current working element in the editor
+ * @type Array
+ */
+ currentElement: null,
+ /**
+ * @property dompath
+ * @description A reference to the dompath container for writing the current working dom path to.
+ * @type HTMLElement
+ */
+ dompath: null,
+ /**
+ * @property beforeElement
+ * @description A reference to the H2 placed before the editor for Accessibilty.
+ * @type HTMLElement
+ */
+ beforeElement: null,
+ /**
+ * @property afterElement
+ * @description A reference to the H2 placed after the editor for Accessibilty.
+ * @type HTMLElement
+ */
+ afterElement: null,
+ /**
+ * @property invalidHTML
+ * @description Contains a list of HTML elements that are invalid inside the editor. They will be removed when they are found. If you set the value of a key to "{ keepContents: true }", then the element will be replaced with a yui-non span to be filtered out when cleanHTML is called. The only tag that is ignored here is the span tag as it will force the Editor into a loop and freeze the browser. However.. all of these tags will be removed in the cleanHTML routine.
+ * @type Object
+ */
+ invalidHTML: {
+ form: true,
+ input: true,
+ button: true,
+ select: true,
+ link: true,
+ html: true,
+ body: true,
+ iframe: true,
+ script: true,
+ style: true,
+ textarea: true
+ },
+ /**
+ * @property toolbar
+ * @description Local property containing the YAHOO.widget.Toolbar instance
+ * @type YAHOO.widget.Toolbar
+ */
+ toolbar: null,
+ /**
+ * @private
+ * @property _contentTimer
+ * @description setTimeout holder for documentReady check
+ */
+ _contentTimer: null,
+ /**
+ * @private
+ * @property _contentTimerMax
+ * @description The number of times the loaded content should be checked before giving up. Default: 500
+ */
+ _contentTimerMax: 500,
+ /**
+ * @private
+ * @property _contentTimerCounter
+ * @description Counter to check the number of times the body is polled for before giving up
+ * @type Number
+ */
+ _contentTimerCounter: 0,
+ /**
+ * @private
+ * @property _disabled
+ * @description The Toolbar items that should be disabled if there is no selection present in the editor.
+ * @type Array
+ */
+ _disabled: [ 'createlink', 'fontname', 'fontsize', 'forecolor', 'backcolor' ],
+ /**
+ * @private
+ * @property _alwaysDisabled
+ * @description The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor.
+ * @type Object
+ */
+ _alwaysDisabled: { undo: true, redo: true },
+ /**
+ * @private
+ * @property _alwaysEnabled
+ * @description The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor.
+ * @type Object
+ */
+ _alwaysEnabled: { },
+ /**
+ * @private
+ * @property _semantic
+ * @description The Toolbar commands that we should attempt to make tags out of instead of using styles.
+ * @type Object
+ */
+ _semantic: { 'bold': true, 'italic' : true, 'underline' : true },
+ /**
+ * @private
+ * @property _tag2cmd
+ * @description A tag map of HTML tags to convert to the different types of commands so we can select the proper toolbar button.
+ * @type Object
+ */
+ _tag2cmd: {
+ 'b': 'bold',
+ 'strong': 'bold',
+ 'i': 'italic',
+ 'em': 'italic',
+ 'u': 'underline',
+ 'sup': 'superscript',
+ 'sub': 'subscript',
+ 'img': 'insertimage',
+ 'a' : 'createlink',
+ 'ul' : 'insertunorderedlist',
+ 'ol' : 'insertorderedlist'
+ },
+
+ /**
+ * @private _createIframe
+ * @description Creates the DOM and YUI Element for the iFrame editor area.
+ * @param {String} id The string ID to prefix the iframe with
+ * @return {Object} iFrame object
+ */
+ _createIframe: function() {
+ var ifrmDom = document.createElement('iframe');
+ ifrmDom.id = this.get('node').get('id') + '_editor';
+ var config = {
+ border: '0',
+ frameBorder: '0',
+ marginWidth: '0',
+ marginHeight: '0',
+ leftMargin: '0',
+ topMargin: '0',
+ allowTransparency: 'true',
+ width: '100%'
+ };
+ if (this.get('autoHeight')) {
+ config.scrolling = 'no';
+ }
+ Y.each(config, function(v, k) {
+ ifrmDom.setAttribute(k, v);
+ });
+ var isrc = 'javascript:;';
+ if (this.browser.ie) {
+ //isrc = 'about:blank';
+ //TODO - Check this, I have changed it before..
+ isrc = 'javascript:false;';
+ }
+ ifrmDom.setAttribute('src', isrc);
+ //var ifrm = new YAHOO.util.Element(ifrmDom);
+ var ifrm = Y.get(ifrmDom);
+ ifrm.setStyle('visibility', 'hidden');
+ return ifrm;
+ },
+ /**
+ * @private _isElement
+ * @description Checks to see if an Element reference is a valid one and has a certain tag type
+ * @param {HTMLElement} el The element to check
+ * @param {String} tag The tag that the element needs to be
+ * @return {Boolean}
+ */
+ _isElement: function(el, tag) {
+ if (el && el.tagName && (el.tagName.toLowerCase() == tag)) {
+ return true;
+ }
+ if (el && el.getAttribute && (el.getAttribute('tag') == tag)) {
+ return true;
+ }
+ return false;
+ },
+ /**
+ * @private _hasParent
+ * @description Checks to see if an Element reference or one of it's parents is a valid one and has a certain tag type
+ * @param {HTMLElement} el The element to check
+ * @param {String} tag The tag that the element needs to be
+ * @return HTMLElement
+ */
+ _hasParent: function(el, tag) {
+ if (!el || !el.parentNode) {
+ return false;
+ }
+
+ while (el.parentNode) {
+ if (this._isElement(el, tag)) {
+ return el;
+ }
+ if (el.parentNode) {
+ el = el.parentNode;
+ } else {
+ return false;
+ }
+ }
+ return false;
+ },
+ /**
+ * @private
+ * @method _getDoc
+ * @description Get the Document of the IFRAME
+ * @return {Object}
+ */
+ _getDoc: function() {
+ var value = false;
+ try {
+ var f = document.getElementById(this.get('iframe').get('id'));
+ if (f && f.contentWindow.document) {
+ value = f.contentWindow.document;
+ return value;
+ }
+ } catch (e) {
+ return false;
+ }
+ },
+ /**
+ * @private
+ * @method _getWindow
+ * @description Get the Window of the IFRAME
+ * @return {Object}
+ */
+ _getWindow: function() {
+ var f = document.getElementById(this.get('iframe').get('id'));
+ return f.contentWindow;
+ },
+ /**
+ * @method focus
+ * @description Attempt to set the focus of the iframes window.
+ */
+ focus: function() {
+ this._getWindow().focus();
+ },
+ /**
+ * @private
+ * @depreciated - This should not be used, moved to this.focus();
+ * @method _focusWindow
+ * @description Attempt to set the focus of the iframes window.
+ */
+ _focusWindow: function() {
+ YAHOO.log('_focusWindow: depreciated in favor of this.focus()', 'warn', 'Editor');
+ this.focus();
+ },
+ /**
+ * @private
+ * @method _hasSelection
+ * @description Determines if there is a selection in the editor document.
+ * @return {Boolean}
+ */
+ _hasSelection: function() {
+ var sel = this._getSelection();
+ var range = this._getRange();
+ var hasSel = false;
+
+ if (!sel || !range) {
+ return hasSel;
+ }
+
+ //Internet Explorer
+ if (this.browser.ie || this.browser.opera) {
+ if (range.text) {
+ hasSel = true;
+ }
+ if (range.html) {
+ hasSel = true;
+ }
+ } else {
+ if (this.browser.webkit) {
+ if (sel+'' !== '') {
+ hasSel = true;
+ }
+ } else {
+ if (sel && (sel.toString() !== '') && (sel !== undefined)) {
+ hasSel = true;
+ }
+ }
+ }
+ return hasSel;
+ },
+ /**
+ * @private
+ * @method _getSelection
+ * @description Handles the different selection objects across the A-Grade list.
+ * @return {Object} Selection Object
+ */
+ _getSelection: function() {
+ var _sel = null;
+ if (this._getDoc() && this._getWindow()) {
+ if (this._getDoc().selection) {
+ _sel = this._getDoc().selection;
+ } else {
+ _sel = this._getWindow().getSelection();
+ }
+ //Handle Safari's lack of Selection Object
+ if (this.browser.webkit) {
+ if (_sel.baseNode) {
+ this._selection = {};
+ this._selection.baseNode = _sel.baseNode;
+ this._selection.baseOffset = _sel.baseOffset;
+ this._selection.extentNode = _sel.extentNode;
+ this._selection.extentOffset = _sel.extentOffset;
+ } else if (this._selection !== null) {
+ _sel = this._getWindow().getSelection();
+ _sel.setBaseAndExtent(
+ this._selection.baseNode,
+ this._selection.baseOffset,
+ this._selection.extentNode,
+ this._selection.extentOffset);
+ this._selection = null;
+ }
+ }
+ }
+ return _sel;
+ },
+ /**
+ * @private
+ * @method _selectNode
+ * @description Places the highlight around a given node
+ * @param {HTMLElement} node The node to select
+ */
+ _selectNode: function(node, collapse) {
+ if (!node) {
+ return false;
+ }
+ var sel = this._getSelection(),
+ range = null;
+
+ if (this.browser.ie) {
+ try { //IE freaks out here sometimes..
+ range = this._getDoc().body.createTextRange();
+ range.moveToElementText(node);
+ range.select();
+ } catch (e) {
+ YAHOO.log('IE failed to select element: ' + node.tagName, 'warn', 'SimpleEditor');
+ }
+ } else if (this.browser.webkit) {
+ if (collapse) {
+ sel.setBaseAndExtent(node, 1, node, node.innerText.length);
+ } else {
+ sel.setBaseAndExtent(node, 0, node, node.innerText.length);
+ }
+ } else if (this.browser.opera) {
+ sel = this._getWindow().getSelection();
+ range = this._getDoc().createRange();
+ range.selectNode(node);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ } else {
+ range = this._getDoc().createRange();
+ range.selectNodeContents(node);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
+ //TODO - Check Performance
+ this.nodeChange();
+ },
+ /**
+ * @private
+ * @method _getRange
+ * @description Handles the different range objects across the A-Grade list.
+ * @return {Object} Range Object
+ */
+ _getRange: function() {
+ var sel = this._getSelection();
+
+ if (sel === null) {
+ return null;
+ }
+
+ if (this.browser.webkit && !sel.getRangeAt) {
+ var _range = this._getDoc().createRange();
+ try {
+ _range.setStart(sel.anchorNode, sel.anchorOffset);
+ _range.setEnd(sel.focusNode, sel.focusOffset);
+ } catch (e) {
+ _range = this._getWindow().getSelection()+'';
+ }
+ return _range;
+ }
+
+ if (this.browser.ie || this.browser.opera) {
+ try {
+ return sel.createRange();
+ } catch (e2) {
+ return null;
+ }
+ }
+
+ if (sel.rangeCount > 0) {
+ return sel.getRangeAt(0);
+ }
+ return null;
+ },
+ /**
+ * @private
+ * @method _setDesignMode
+ * @description Sets the designMode property of the iFrame document's body.
+ * @param {String} state This should be either on or off
+ */
+ _setDesignMode: function(state) {
+ if (this.get('setDesignMode')) {
+ try {
+ this._getDoc().designMode = ((state.toLowerCase() == 'off') ? 'off' : 'on');
+ } catch(e) { }
+ }
+ },
+ /**
+ * @private
+ * @method _toggleDesignMode
+ * @description Toggles the designMode property of the iFrame document on and off.
+ * @return {String} The state that it was set to.
+ */
+ _toggleDesignMode: function() {
+ YAHOO.log('It is not recommended to use this method and it will be depreciated.', 'warn', 'SimpleEditor');
+ var _dMode = this._getDoc().designMode,
+ _state = ((_dMode.toLowerCase() == 'on') ? 'off' : 'on');
+ this._setDesignMode(_state);
+ return _state;
+ },
+ /**
+ * @private
+ * @property _focused
+ * @description Holder for trapping focus/blur state and prevent double events
+ * @type Boolean
+ */
+ _focused: null,
+ /**
+ * @private
+ * @method _handleFocus
+ * @description Handles the focus of the iframe. Note, this is window focus event, not an Editor focus event.
+ * @param {Event} e The DOM Event
+ */
+ _handleFocus: function(e) {
+ if (!this._focused) {
+ YAHOO.log('Editor Window Focused', 'info', 'SimpleEditor');
+ this._focused = true;
+ this.fireEvent('editorWindowFocus', { type: 'editorWindowFocus', target: this });
+ }
+ },
+ /**
+ * @private
+ * @method _handleBlur
+ * @description Handles the blur of the iframe. Note, this is window blur event, not an Editor blur event.
+ * @param {Event} e The DOM Event
+ */
+ _handleBlur: function(e) {
+ if (this._focused) {
+ YAHOO.log('Editor Window Blurred', 'info', 'SimpleEditor');
+ this._focused = false;
+ this.fireEvent('editorWindowBlur', { type: 'editorWindowBlur', target: this });
+ }
+ },
+ /**
+ * @private
+ * @method _initEditorEvents
+ * @description This method sets up the listeners on the Editors document.
+ */
+ _initEditorEvents: function() {
+ //Setup Listeners on iFrame
+ var doc = this._getDoc(),
+ win = this._getWindow();
+
+ Y.Event.nativeAdd(doc, 'mouseup', Y.bind(this._handleMouseUp, this));
+ Y.Event.nativeAdd(doc, 'mousedown', Y.bind(this._handleMouseDown, this));
+ Y.Event.nativeAdd(doc, 'click', Y.bind(this._handleClick, this));
+ Y.Event.nativeAdd(doc, 'dblclick', Y.bind(this._handleDoubleClick, this));
+ Y.Event.nativeAdd(doc, 'keypress', Y.bind(this._handleKeyPress, this));
+ Y.Event.nativeAdd(doc, 'keyup', Y.bind(this._handleKeyUp, this));
+ Y.Event.nativeAdd(doc, 'keydown', Y.bind(this._handleKeyDown, this));
+
+ //Focus and blur..
+ Y.Event.nativeAdd(win, 'focus', Y.bind(this._handleFocus, this));
+ Y.Event.nativeAdd(win, 'blur', Y.bind(this._handleBlur, this));
+ },
+ /**
+ * @private
+ * @method _removeEditorEvents
+ * @description This method removes the listeners on the Editors document (for disabling).
+ */
+ _removeEditorEvents: function() {
+ //Remove Listeners on iFrame
+ var doc = this._getDoc(),
+ win = this._getWindow();
+
+ Y.Event.nativeRremove(doc, 'mouseup', Y.bind(this._handleMouseUp, this));
+ Y.Event.nativeRremove(doc, 'mousedown', Y.bind(this._handleMouseDown, this));
+ Y.Event.nativeRremove(doc, 'click', Y.bind(this._handleClick, this));
+ Y.Event.nativeRremove(doc, 'dblclick', Y.bind(this._handleDoubleClick, this));
+ Y.Event.nativeRremove(doc, 'keypress', Y.bind(this._handleKeyPress, this));
+ Y.Event.nativeRremove(doc, 'keyup', Y.bind(this._handleKeyUp, this));
+ Y.Event.nativeRremove(doc, 'keydown', Y.bind(this._handleKeyDown, this));
+
+ //Focus and blur..
+ Y.Event.nativeRremove(win, 'focus', Y.bind(this._handleFocus, this));
+ Y.Event.nativeRremove(win, 'blur', Y.bind(this._handleBlur, this));
+ },
+ _fixWebkitDivs: function() {
+ if (this.browser.webkit) {
+ var divs = this._getDoc().body.getElementsByTagName('div');
+ Dom.addClass(divs, 'yui-wk-div');
+ }
+ },
+ /**
+ * @private
+ * @method _initEditor
+ * @param {Boolean} raw Don't add events.
+ * @description This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners.
+ */
+ _initEditor: function(raw) {
+ if (this._editorInit) {
+ return;
+ }
+ this._editorInit = true;
+ if (this.browser.ie) {
+ this._getDoc().body.style.margin = '0';
+ }
+ if (!this.get('disabled')) {
+ this._setDesignMode('on');
+ this._contentTimerCounter = 0;
+ }
+ if (!this._getDoc().body) {
+ YAHOO.log('Body is null, check again', 'error', 'SimpleEditor');
+ this._contentTimerCounter = 0;
+ this._editorInit = false;
+ this._checkLoaded();
+ return false;
+ }
+
+ YAHOO.log('editorLoaded', 'info', 'SimpleEditor');
+ if (!raw) {
+ this.toolbar.on('buttonClick', Y.bind(this._handleToolbarClick, this));
+ }
+ if (!this.get('disabled')) {
+ this._initEditorEvents();
+ this.toolbar.set('disabled', false);
+ }
+
+ if (raw) {
+ this.fire('editorContentReloaded', { type: 'editorreloaded'});
+ } else {
+ this.fire('editorContentLoaded', { type: 'editorLoaded' });
+ }
+ this._fixWebkitDivs();
+ if (this.get('dompath')) {
+ YAHOO.log('Delayed DomPath write', 'info', 'SimpleEditor');
+ Y.later(150, this, this._writeDomPath);
+ }
+ var br = [];
+ Y.each(this.browser, function(v, k) {
+ if (v) {
+ br.push(k);
+ }
+ }, this);
+ if (this.get('ptags')) {
+ br.push('ptags');
+ }
+ Y.DOM.addClass(this._getDoc().body, br.join(' '));
+ this.nodeChange(true);
+ },
+ /**
+ * @private
+ * @method _checkLoaded
+ * @param {Boolean} raw Don't add events.
+ * @description Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor.
+ */
+ _checkLoaded: function(raw) {
+ this._editorInit = false;
+ this._contentTimerCounter++;
+ if (this._contentTimer) {
+ clearTimeout(this._contentTimer);
+ }
+ if (this._contentTimerCounter > this._contentTimerMax) {
+ YAHOO.log('ERROR: Body Did Not load', 'error', 'SimpleEditor');
+ return false;
+ }
+ var init = false;
+ try {
+ if (this._getDoc() && this._getDoc().body) {
+ if (this.browser.ie) {
+ if (this._getDoc().body.readyState == 'complete') {
+ init = true;
+ }
+ } else {
+ if (this._getDoc().body._rteLoaded === true) {
+ init = true;
+ }
+ }
+ }
+ } catch (e) {
+ init = false;
+ YAHOO.log('checking body (e)' + e, 'error', 'SimpleEditor');
+ }
+
+ if (init === true) {
+ //The onload event has fired, clean up after ourselves and fire the _initEditor method
+ YAHOO.log('Firing _initEditor', 'info', 'SimpleEditor');
+ this._initEditor(raw);
+ } else {
+ var self = this;
+ this._contentTimer = setTimeout(function() {
+ self._checkLoaded.call(self, raw);
+ }, 20);
+ }
+ },
+ /**
+ * @private
+ * @method _setInitialContent
+ * @param {Boolean} raw Don't add events.
+ * @description This method will open the iframes content document and write the textareas value into it, then start the body.onload checking.
+ */
+ _setInitialContent: function(raw) {
+ YAHOO.log('Populating editor body with contents of the text area', 'info', 'SimpleEditor');
+
+ var value = ((this._textarea) ? this.get('node').get('value') : this.get('node').get('innerHTML')),
+ doc = null;
+
+ if (value === '') {
+ value = ''; + } + + var html = Y.Lang.substitute(this.get('html'), { + TITLE: this.STR_TITLE, + CONTENT: this._cleanIncomingHTML(value), + CSS: this.get('css'), + HIDDEN_CSS: ((this.get('hiddencss')) ? this.get('hiddencss') : '/* No Hidden CSS */'), + EXTRA_CSS: ((this.get('extracss')) ? this.get('extracss') : '/* No Extra CSS */') + }), + check = true; + + html = html.replace(/RIGHT_BRACKET/gi, '{'); + html = html.replace(/LEFT_BRACKET/gi, '}'); + + if (document.compatMode != 'BackCompat') { + YAHOO.log('Adding Doctype to editable area', 'info', 'SimpleEditor'); + html = this._docType + "\n" + html; + } else { + YAHOO.log('DocType skipped because we are in BackCompat Mode.', 'warn', 'SimpleEditor'); + } + + if (this.browser.ie || this.browser.webkit || this.browser.opera || (navigator.userAgent.indexOf('Firefox/1.5') != -1)) { + //Firefox 1.5 doesn't like setting designMode on an document created with a data url + try { + //Adobe AIR Code + if (this.browser.air) { + doc = this._getDoc().implementation.createHTMLDocument(); + var origDoc = this._getDoc(); + origDoc.open(); + origDoc.close(); + doc.open(); + doc.write(html); + doc.close(); + var node = origDoc.importNode(doc.getElementsByTagName("html")[0], true); + origDoc.replaceChild(node, origDoc.getElementsByTagName("html")[0]); + origDoc.body._rteLoaded = true; + } else { + doc = this._getDoc(); + doc.open(); + doc.write(html); + doc.close(); + } + } catch (e) { + YAHOO.log('Setting doc failed.. (_setInitialContent)', 'error', 'SimpleEditor'); + //Safari will only be here if we are hidden + check = false; + } + } else { + //This keeps Firefox 2 from writing the iframe to history preserving the back buttons functionality + this.get('iframe').set('src', 'data:text/html;charset=utf-8,' + encodeURIComponent(html)); + } + this.get('iframe').setStyle('visibility', ''); + if (check) { + this._checkLoaded(raw); + } + }, + /** + * @private + * @method _setMarkupType + * @param {String} action The action to take. Possible values are: css, default or semantic + * @description This method will turn on/off the useCSS execCommand. + */ + _setMarkupType: function(action) { + switch (this.get('markup')) { + case 'css': + this._setEditorStyle(true); + break; + case 'default': + this._setEditorStyle(false); + break; + case 'semantic': + case 'xhtml': + if (this._semantic[action]) { + this._setEditorStyle(false); + } else { + this._setEditorStyle(true); + } + break; + } + }, + /** + * Set the editor to use CSS instead of HTML + * @param {Booleen} stat True/False + */ + _setEditorStyle: function(stat) { + try { + this._getDoc().execCommand('useCSS', false, !stat); + } catch (ex) { + } + }, + /** + * @private + * @method _getSelectedElement + * @description This method will attempt to locate the element that was last interacted with, either via selection, location or event. + * @return {HTMLElement} The currently selected element. + */ + _getSelectedElement: function() { + var doc = this._getDoc(), + range = null, + sel = null, + elm = null, + check = true; + + if (this.browser.ie) { + this.currentEvent = this._getWindow().event; //Event utility assumes window.event, so we need to reset it to this._getWindow().event; + range = this._getRange(); + if (range) { + elm = range.item ? range.item(0) : range.parentElement(); + if (this._hasSelection()) { + //TODO + //WTF.. Why can't I get an element reference here?!??! + } + if (elm === doc.body) { + elm = null; + } + } + if ((this.currentEvent !== null) && (this.currentEvent.keyCode === 0)) { + elm = Event.getTarget(this.currentEvent); + } + } else { + sel = this._getSelection(); + range = this._getRange(); + + if (!sel || !range) { + return null; + } + //TODO + if (!this._hasSelection() && this.browser.webkit3) { + //check = false; + } + if (this.browser.gecko) { + //Added in 2.6.0 + if (range.startContainer) { + if (range.startContainer.nodeType === 3) { + elm = range.startContainer.parentNode; + } else if (range.startContainer.nodeType === 1) { + elm = range.startContainer; + } + //Added in 2.7.0 + if (this.currentEvent) { + var tar = Event.getTarget(this.currentEvent); + if (!this._isElement(tar, 'html')) { + if (elm !== tar) { + elm = tar; + } + } + } + } + } + + if (check) { + if (sel.anchorNode && (sel.anchorNode.nodeType == 3)) { + if (sel.anchorNode.parentNode) { //next check parentNode + elm = sel.anchorNode.parentNode; + } + if (sel.anchorNode.nextSibling != sel.focusNode.nextSibling) { + elm = sel.anchorNode.nextSibling; + } + } + if (this._isElement(elm, 'br')) { + elm = null; + } + if (!elm) { + elm = range.commonAncestorContainer; + if (!range.collapsed) { + if (range.startContainer == range.endContainer) { + if (range.startOffset - range.endOffset < 2) { + if (range.startContainer.hasChildNodes()) { + elm = range.startContainer.childNodes[range.startOffset]; + } + } + } + } + } + } + } + + if (this.currentEvent !== null) { + try { + switch (this.currentEvent.type) { + case 'click': + case 'mousedown': + case 'mouseup': + if (this.browser.webkit) { + elm = Event.getTarget(this.currentEvent); + } + break; + default: + //Do nothing + break; + } + } catch (e) { + YAHOO.log('Firefox 1.5 errors here: ' + e, 'error', 'SimpleEditor'); + } + } else if ((this.currentElement && this.currentElement[0]) && (!this.browser.ie)) { + //TODO is this still needed? + //elm = this.currentElement[0]; + } + + + if (this.browser.opera || this.browser.webkit) { + if (this.currentEvent && !elm) { + elm = Event.getTarget(this.currentEvent); + } + } + if (!elm || !elm.tagName) { + elm = doc.body; + } + if (this._isElement(elm, 'html')) { + //Safari sometimes gives us the HTML node back.. + elm = doc.body; + } + if (this._isElement(elm, 'body')) { + //make sure that body means this body not the parent.. + elm = doc.body; + } + if (elm && !elm.parentNode) { //Not in document + elm = doc.body; + } + if (elm === undefined) { + elm = null; + } + return elm; + }, + /** + * @private + * @method _getSelectedNode + * @description Calls _getSelectedElement and passes it through Y.get to get a Node reference. + * @return {Y.Node} The currently selected element. + */ + _getSelectedNode: function() { + return Y.get(this._getSelectedElement()); + }, + /** + * @private + * @method _getDomPath + * @description This method will attempt to build the DOM path from the currently selected element. + * @param HTMLElement el The element to start with, if not provided _getSelectedElement is used + * @return {Array} An array of node references that will create the DOM Path. + */ + _getDomPath: function(el) { + if (!el) { + el = this._getSelectedElement(); + } + var domPath = []; + while (el !== null) { + if (el.ownerDocument != this._getDoc()) { + el = null; + break; + } + //Check to see if we get el.nodeName and nodeType + if (el.nodeName && el.nodeType && (el.nodeType == 1)) { + domPath[domPath.length] = el; + } + + if (this._isElement(el, 'body')) { + break; + } + + el = el.parentNode; + } + if (domPath.length === 0) { + if (this._getDoc() && this._getDoc().body) { + domPath[0] = this._getDoc().body; + } + } + return domPath.reverse(); + }, + /** + * @private + * @method _writeDomPath + * @description Write the current DOM path out to the dompath container below the editor. + */ + _writeDomPath: function() { + var path = this._getDomPath(), + pathArr = [], + classPath = '', + pathStr = ''; + + for (var i = 0; i < path.length; i++) { + var tag = path[i].tagName.toLowerCase(); + if ((tag == 'ol') && (path[i].type)) { + tag += ':' + path[i].type; + } + if (Dom.hasClass(path[i], 'yui-tag')) { + tag = path[i].getAttribute('tag'); + } + if ((this.get('markup') == 'semantic') || (this.get('markup') == 'xhtml')) { + switch (tag) { + case 'b': tag = 'strong'; break; + case 'i': tag = 'em'; break; + } + } + if (!Dom.hasClass(path[i], 'yui-non')) { + if (Dom.hasClass(path[i], 'yui-tag')) { + pathStr = tag; + } else { + classPath = ((path[i].className !== '') ? '.' + path[i].className.replace(/ /g, '.') : ''); + if ((classPath.indexOf('yui') != -1) || (classPath.toLowerCase().indexOf('apple-style-span') != -1)) { + classPath = ''; + } + pathStr = tag + ((path[i].id) ? '#' + path[i].id : '') + classPath; + } + switch (tag) { + case 'body': + pathStr = 'body'; + break; + case 'a': + if (path[i].getAttribute('href', 2)) { + pathStr += ':' + path[i].getAttribute('href', 2).replace('mailto:', '').replace('http:/'+'/', '').replace('https:/'+'/', ''); //May need to add others here ftp + } + break; + case 'img': + var h = path[i].height; + var w = path[i].width; + if (path[i].style.height) { + h = parseInt(path[i].style.height, 10); + } + if (path[i].style.width) { + w = parseInt(path[i].style.width, 10); + } + pathStr += '(' + w + 'x' + h + ')'; + break; + } + + if (pathStr.length > 10) { + pathStr = '' + pathStr.substring(0, 10) + '...' + ''; + } else { + pathStr = '' + pathStr + ''; + } + pathArr[pathArr.length] = pathStr; + } + } + var str = pathArr.join(' ' + this.SEP_DOMPATH + ' '); + //Prevent flickering + if (this.dompath.get('innerHTML') != str) { + this.dompath.set('innerHTML', str); + } + }, + /** + * @private + * @method _fixNodes + * @description Fix href and imgs as well as remove invalid HTML. + */ + _fixNodes: function() { + try { + var doc = this._getDoc(), + els = []; + + Y.each(this.invalidHTML, function(v, k) { + if (k.toLowerCase() != 'span') { + var tags = doc.body.getElementsByTagName(k); + if (tags.length) { + for (var i = 0; i < tags.length; i++) { + els.push(tags[i]); + } + } + } + }); + for (var h = 0; h < els.length; h++) { + if (els[h].parentNode) { + if (Lang.isObject(this.invalidHTML[els[h].tagName.toLowerCase()]) && this.invalidHTML[els[h].tagName.toLowerCase()].keepContents) { + this._swapEl(els[h], 'span', function(el) { + el.className = 'yui-non'; + }); + } else { + els[h].parentNode.removeChild(els[h]); + } + } + } + var imgs = this._getDoc().getElementsByTagName('img'); + Dom.addClass(imgs, 'yui-img'); + } catch(e) {} + }, + /** + * @private + * @method _isNonEditable + * @param Event ev The Dom event being checked + * @description Method is called at the beginning of all event handlers to check if this element or a parent element has the class yui-noedit (this.CLASS_NOEDIT) applied. + * If it does, then this method will stop the event and return true. The event handlers will then return false and stop the nodeChange from occuring. This method will also + * disable and enable the Editor's toolbar based on the noedit state. + * @return Boolean + */ + _isNonEditable: function(ev) { + if (this.get('allowNoEdit')) { + var el = Event.getTarget(ev); + if (this._isElement(el, 'html')) { + el = null; + } + var path = this._getDomPath(el); + for (var i = (path.length - 1); i > -1; i--) { + if (Dom.hasClass(path[i], this.CLASS_NOEDIT)) { + //if (this.toolbar.get('disabled') === false) { + // this.toolbar.set('disabled', true); + //} + try { + this._getDoc().execCommand('enableObjectResizing', false, 'false'); + } catch (e) {} + this.nodeChange(); + Event.stopEvent(ev); + YAHOO.log('CLASS_NOEDIT found in DOM Path, stopping event', 'info', 'SimpleEditor'); + return true; + } + } + //if (this.toolbar.get('disabled') === true) { + //Should only happen once.. + //this.toolbar.set('disabled', false); + try { + this._getDoc().execCommand('enableObjectResizing', false, 'true'); + } catch (e2) {} + //} + } + return false; + }, + /** + * @private + * @method _setCurrentEvent + * @param {Event} ev The event to cache + * @description Sets the current event property + */ + _setCurrentEvent: function(ev) { + this.currentEvent = ev; + }, + /** + * @private + * @method _handleClick + * @param {Event} ev The event we are working on. + * @description Handles all click events inside the iFrame document. + */ + _handleClick: function(ev) { + var ret = this.fireEvent('beforeEditorClick', { type: 'beforeEditorClick', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.currentWindow) { + this.closeWindow(); + } + if (this.currentWindow) { + this.closeWindow(); + } + if (this.browser.webkit) { + var tar =Event.getTarget(ev); + if (this._isElement(tar, 'a') || this._isElement(tar.parentNode, 'a')) { + Event.stopEvent(ev); + this.nodeChange(); + } + } else { + this.nodeChange(); + } + this.fireEvent('editorClick', { type: 'editorClick', target: this, ev: ev }); + }, + /** + * @private + * @method _handleMouseUp + * @param {Event} ev The event we are working on. + * @description Handles all mouseup events inside the iFrame document. + */ + _handleMouseUp: function(ev) { + var ret = this.fireEvent('beforeEditorMouseUp', { type: 'beforeEditorMouseUp', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + //Don't set current event for mouseup. + //It get's fired after a menu is closed and gives up a bogus event to work with + //this._setCurrentEvent(ev); + var self = this; + if (this.browser.opera) { + /* + * @knownissue Opera appears to stop the MouseDown, Click and DoubleClick events on an image inside of a document with designMode on.. + * @browser Opera + * @description This work around traps the MouseUp event and sets a timer to check if another MouseUp event fires in so many seconds. If another event is fired, they we internally fire the DoubleClick event. + */ + var sel = Event.getTarget(ev); + if (this._isElement(sel, 'img')) { + this.nodeChange(); + if (this.operaEvent) { + clearTimeout(this.operaEvent); + this.operaEvent = null; + this._handleDoubleClick(ev); + } else { + this.operaEvent = window.setTimeout(function() { + self.operaEvent = false; + }, 700); + } + } + } + //This will stop Safari from selecting the entire document if you select all the text in the editor + if (this.browser.webkit || this.browser.opera) { + if (this.browser.webkit) { + Event.stopEvent(ev); + } + } + this.nodeChange(); + this.fireEvent('editorMouseUp', { type: 'editorMouseUp', target: this, ev: ev }); + }, + /** + * @private + * @method _handleMouseDown + * @param {Event} ev The event we are working on. + * @description Handles all mousedown events inside the iFrame document. + */ + _handleMouseDown: function(ev) { + var ret = this.fireEvent('beforeEditorMouseDown', { type: 'beforeEditorMouseDown', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + var sel = Event.getTarget(ev); + if (this.browser.webkit && this._hasSelection()) { + var _sel = this._getSelection(); + if (!this.browser.webkit3) { + _sel.collapse(true); + } else { + _sel.collapseToStart(); + } + } + if (this.browser.webkit && this._lastImage) { + Dom.removeClass(this._lastImage, 'selected'); + this._lastImage = null; + } + if (this._isElement(sel, 'img') || this._isElement(sel, 'a')) { + if (this.browser.webkit) { + Event.stopEvent(ev); + if (this._isElement(sel, 'img')) { + Dom.addClass(sel, 'selected'); + this._lastImage = sel; + } + } + if (this.currentWindow) { + this.closeWindow(); + } + this.nodeChange(); + } + this.fireEvent('editorMouseDown', { type: 'editorMouseDown', target: this, ev: ev }); + }, + /** + * @private + * @method _handleDoubleClick + * @param {Event} ev The event we are working on. + * @description Handles all doubleclick events inside the iFrame document. + */ + _handleDoubleClick: function(ev) { + var ret = this.fireEvent('beforeEditorDoubleClick', { type: 'beforeEditorDoubleClick', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + var sel = Event.getTarget(ev); + if (this._isElement(sel, 'img')) { + this.currentElement[0] = sel; + this.toolbar.fireEvent('insertimageClick', { type: 'insertimageClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + } else if (this._hasParent(sel, 'a')) { //Handle elements inside an a + this.currentElement[0] = this._hasParent(sel, 'a'); + this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + } + this.nodeChange(); + this.fireEvent('editorDoubleClick', { type: 'editorDoubleClick', target: this, ev: ev }); + }, + /** + * @private + * @method _handleKeyUp + * @param {Event} ev The event we are working on. + * @description Handles all keyup events inside the iFrame document. + */ + _handleKeyUp: function(ev) { + var ret = this.fireEvent('beforeEditorKeyUp', { type: 'beforeEditorKeyUp', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + switch (ev.keyCode) { + case this._keyMap.SELECT_ALL.key: + if (this._checkKey(this._keyMap.SELECT_ALL, ev)) { + this.nodeChange(); + } + break; + case 32: //Space Bar + case 35: //End + case 36: //Home + case 37: //Left Arrow + case 38: //Up Arrow + case 39: //Right Arrow + case 40: //Down Arrow + case 46: //Forward Delete + case 8: //Delete + case this._keyMap.CLOSE_WINDOW.key: //W key if window is open + if ((ev.keyCode == this._keyMap.CLOSE_WINDOW.key) && this.currentWindow) { + if (this._checkKey(this._keyMap.CLOSE_WINDOW, ev)) { + this.closeWindow(); + } + } else { + if (!this.browser.ie) { + if (this._nodeChangeTimer) { + clearTimeout(this._nodeChangeTimer); + } + var self = this; + this._nodeChangeTimer = setTimeout(function() { + self._nodeChangeTimer = null; + self.nodeChange.call(self); + }, 100); + } else { + this.nodeChange(); + } + this.editorDirty = true; + } + break; + } + this.fireEvent('editorKeyUp', { type: 'editorKeyUp', target: this, ev: ev }); + this._storeUndo(); + }, + /** + * @private + * @method _handleKeyPress + * @param {Event} ev The event we are working on. + * @description Handles all keypress events inside the iFrame document. + */ + _handleKeyPress: function(ev) { + var ret = this.fireEvent('beforeEditorKeyPress', { type: 'beforeEditorKeyPress', target: this, ev: ev }); + if (ret === false) { + return false; + } + + if (this.get('allowNoEdit')) { + //if (ev && ev.keyCode && ((ev.keyCode == 46) || ev.keyCode == 63272)) { + if (ev && ev.keyCode && (ev.keyCode == 63272)) { + //Forward delete key + YAHOO.log('allowNoEdit is set, forward delete key has been disabled', 'warn', 'SimpleEditor'); + Event.stopEvent(ev); + } + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.browser.opera) { + if (ev.keyCode === 13) { + var tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + this.execCommand('inserthtml', '
'); + Event.stopEvent(ev); + } + } + } + if (this.browser.webkit) { + if (!this.browser.webkit3) { + if (ev.keyCode && (ev.keyCode == 122) && (ev.metaKey)) { + //This is CMD + z (for undo) + if (this._hasParent(this._getSelectedElement(), 'li')) { + YAHOO.log('We are in an LI and we found CMD + z, stopping the event', 'warn', 'SimpleEditor'); + Event.stopEvent(ev); + } + } + } + this._listFix(ev); + } + this._fixListDupIds(); + this.fireEvent('editorKeyPress', { type: 'editorKeyPress', target: this, ev: ev }); + }, + /** + * @private + * @method _handleKeyDown + * @param {Event} ev The event we are working on. + * @description Handles all keydown events inside the iFrame document. + */ + _handleKeyDown: function(ev) { + var ret = this.fireEvent('beforeEditorKeyDown', { type: 'beforeEditorKeyDown', target: this, ev: ev }); + if (ret === false) { + return false; + } + var tar = null, _range = null; + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.currentWindow) { + this.closeWindow(); + } + if (this.currentWindow) { + this.closeWindow(); + } + var doExec = false, + action = null, + value = null, + exec = false; + + //YAHOO.log('keyCode: ' + ev.keyCode, 'info', 'SimpleEditor'); + + switch (ev.keyCode) { + case this._keyMap.FOCUS_TOOLBAR.key: + if (this._checkKey(this._keyMap.FOCUS_TOOLBAR, ev)) { + var h = this.toolbar.getElementsByTagName('h2')[0]; + if (h && h.firstChild) { + h.firstChild.focus(); + } + } else if (this._checkKey(this._keyMap.FOCUS_AFTER, ev)) { + //Focus After Element - Esc + this.afterElement.focus(); + } + Event.stopEvent(ev); + doExec = false; + break; + //case 76: //L + case this._keyMap.CREATE_LINK.key: //L + if (this._hasSelection()) { + if (this._checkKey(this._keyMap.CREATE_LINK, ev)) { + var makeLink = true; + if (this.get('limitCommands')) { + if (!this.toolbar.getButtonByValue('createlink')) { + YAHOO.log('Toolbar Button for (createlink) was not found, skipping exec.', 'info', 'SimpleEditor'); + makeLink = false; + } + } + if (makeLink) { + this.execCommand('createlink', ''); + this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + doExec = false; + } + } + } + break; + //case 90: //Z + case this._keyMap.UNDO.key: + case this._keyMap.REDO.key: + if (this._checkKey(this._keyMap.REDO, ev)) { + action = 'redo'; + doExec = true; + } else if (this._checkKey(this._keyMap.UNDO, ev)) { + action = 'undo'; + doExec = true; + } + break; + //case 66: //B + case this._keyMap.BOLD.key: + if (this._checkKey(this._keyMap.BOLD, ev)) { + action = 'bold'; + doExec = true; + } + break; + case this._keyMap.FONT_SIZE_UP.key: + case this._keyMap.FONT_SIZE_DOWN.key: + var uk = false, dk = false; + if (this._checkKey(this._keyMap.FONT_SIZE_UP, ev)) { + uk = true; + } + if (this._checkKey(this._keyMap.FONT_SIZE_DOWN, ev)) { + dk = true; + } + if (uk || dk) { + var fs_button = this.toolbar.getButtonByValue('fontsize'), + label = parseInt(fs_button.get('label'), 10), + newValue = (label + 1); + + if (dk) { + newValue = (label - 1); + } + + action = 'fontsize'; + value = newValue + 'px'; + doExec = true; + } + break; + //case 73: //I + case this._keyMap.ITALIC.key: + if (this._checkKey(this._keyMap.ITALIC, ev)) { + action = 'italic'; + doExec = true; + } + break; + //case 85: //U + case this._keyMap.UNDERLINE.key: + if (this._checkKey(this._keyMap.UNDERLINE, ev)) { + action = 'underline'; + doExec = true; + } + break; + case 9: + if (this.browser.ie) { + //Insert a tab in Internet Explorer + _range = this._getRange(); + tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + if (_range) { + _range.pasteHTML(' '); + _range.collapse(false); + _range.select(); + } + Event.stopEvent(ev); + } + } + //Firefox 3 code + if (this.browser.gecko > 1.8) { + tar = this._getSelectedElement(); + if (this._isElement(tar, 'li')) { + if (ev.shiftKey) { + this._getDoc().execCommand('outdent', null, ''); + } else { + this._getDoc().execCommand('indent', null, ''); + } + + } else if (!this._hasSelection()) { + this.execCommand('inserthtml', ' '); + } + Event.stopEvent(ev); + } + break; + case 13: + var p = null, i = 0; + if (this.get('ptags') && !ev.shiftKey) { + if (this.browser.gecko) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + if (this._hasParent(tar, 'p')) { + p = this._getDoc().createElement('p'); + p.innerHTML = ' '; + Dom.insertAfter(p, tar); + this._selectNode(p.firstChild); + } else if (this._isElement(tar, 'body')) { + this.execCommand('insertparagraph', null); + var ps = this._getDoc().body.getElementsByTagName('p'); + for (i = 0; i < ps.length; i++) { + if (ps[i].getAttribute('_moz_dirty') !== null) { + p = this._getDoc().createElement('p'); + p.innerHTML = ' '; + Dom.insertAfter(p, ps[i]); + this._selectNode(p.firstChild); + ps[i].removeAttribute('_moz_dirty'); + } + } + } else { + YAHOO.log('Something went wrong with paragraphs, please file a bug!!', 'error', 'SimpleEditor'); + doExec = true; + action = 'insertparagraph'; + } + Event.stopEvent(ev); + } + } + if (this.browser.webkit) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + this.execCommand('insertparagraph', null); + var divs = this._getDoc().body.getElementsByTagName('div'); + for (i = 0; i < divs.length; i++) { + if (!Dom.hasClass(divs[i], 'yui-wk-div')) { + Dom.addClass(divs[i], 'yui-wk-p'); + } + } + Event.stopEvent(ev); + } + } + } else { + if (this.browser.webkit) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + if (this.browser.webkit4) { + this.execCommand('insertlinebreak'); + } else { + this.execCommand('inserthtml', ''); + var holder = this._getDoc().getElementById('yui-br'), + br = this._getDoc().createElement('br'), + caret = this._getDoc().createElement('span'); + + holder.parentNode.replaceChild(br, holder); + caret.className = 'yui-non'; + caret.innerHTML = ' '; + Dom.insertAfter(caret, br); + this._selectNode(caret); + } + Event.stopEvent(ev); + } + } + if (this.browser.ie) { + YAHOO.log('Stopping P tags', 'info', 'SimpleEditor'); + //Insert a
instead of a in Internet Explorer + _range = this._getRange(); + tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + if (_range) { + _range.pasteHTML('
'); + _range.collapse(false); + _range.select(); + } + Event.stopEvent(ev); + } + } + } + break; + } + if (this.browser.ie) { + this._listFix(ev); + } + if (doExec && action) { + this.execCommand(action, value); + Event.stopEvent(ev); + this.nodeChange(); + } + this.fireEvent('editorKeyDown', { type: 'editorKeyDown', target: this, ev: ev }); + }, + /** + * @private + * @property _fixListRunning + * @type Boolean + * @description Keeps more than one _fixListDupIds from running at the same time. + */ + _fixListRunning: null, + /** + * @private + * @method _fixListDupIds + * @description Some browsers will duplicate the id of an LI when created in designMode. + * This method will fix the duplicate id issue. However it will only preserve the first element + * in the document list with the unique id. + */ + _fixListDupIds: function() { + if (this._fixListRunning) { + return false; + } + if (this._getDoc()) { + this._fixListRunning = true; + var lis = this._getDoc().body.getElementsByTagName('li'), + i = 0, ids = {}; + for (i = 0; i < lis.length; i++) { + if (lis[i].id) { + if (ids[lis[i].id]) { + lis[i].id = ''; + } + ids[lis[i].id] = true; + } + } + this._fixListRunning = false; + } + }, + /** + * @private + * @method _listFix + * @param {Event} ev The event we are working on. + * @description Handles the Enter key, Tab Key and Shift + Tab keys for List Items. + */ + _listFix: function(ev) { + //YAHOO.log('Lists Fix (' + ev.keyCode + ')', 'info', 'SimpleEditor'); + var testLi = null, par = null, preContent = false, range = null; + //Enter Key + if (this.browser.webkit) { + if (ev.keyCode && (ev.keyCode == 13)) { + if (this._hasParent(this._getSelectedElement(), 'li')) { + var tar = this._hasParent(this._getSelectedElement(), 'li'); + if (tar.previousSibling) { + if (tar.firstChild && (tar.firstChild.length == 1)) { + this._selectNode(tar); + } + } + } + } + } + //Shift + Tab Key + if (ev.keyCode && ((!this.browser.webkit3 && (ev.keyCode == 25)) || ((this.browser.webkit3 || !this.browser.webkit) && ((ev.keyCode == 9) && ev.shiftKey)))) { + testLi = this._getSelectedElement(); + if (this._hasParent(testLi, 'li')) { + testLi = this._hasParent(testLi, 'li'); + YAHOO.log('We have a SHIFT tab in an LI, reverse it..', 'info', 'SimpleEditor'); + if (this._hasParent(testLi, 'ul') || this._hasParent(testLi, 'ol')) { + YAHOO.log('We have a double parent, move up a level', 'info', 'SimpleEditor'); + par = this._hasParent(testLi, 'ul'); + if (!par) { + par = this._hasParent(testLi, 'ol'); + } + //YAHOO.log(par.previousSibling + ' :: ' + par.previousSibling.innerHTML); + if (this._isElement(par.previousSibling, 'li')) { + par.removeChild(testLi); + par.parentNode.insertBefore(testLi, par.nextSibling); + if (this.browser.ie) { + range = this._getDoc().body.createTextRange(); + range.moveToElementText(testLi); + range.collapse(false); + range.select(); + } + if (this.browser.webkit) { + this._selectNode(testLi.firstChild); + } + Event.stopEvent(ev); + } + } + } + } + //Tab Key + if (ev.keyCode && ((ev.keyCode == 9) && (!ev.shiftKey))) { + YAHOO.log('List Fix - Tab', 'info', 'SimpleEditor'); + var preLi = this._getSelectedElement(); + if (this._hasParent(preLi, 'li')) { + preContent = this._hasParent(preLi, 'li').innerHTML; + } + //YAHOO.log('preLI: ' + preLi.tagName + ' :: ' + preLi.innerHTML); + if (this.browser.webkit) { + this._getDoc().execCommand('inserttext', false, '\t'); + } + testLi = this._getSelectedElement(); + if (this._hasParent(testLi, 'li')) { + YAHOO.log('We have a tab in an LI', 'info', 'SimpleEditor'); + par = this._hasParent(testLi, 'li'); + YAHOO.log('parLI: ' + par.tagName + ' :: ' + par.innerHTML); + var newUl = this._getDoc().createElement(par.parentNode.tagName.toLowerCase()); + if (this.browser.webkit) { + var span = Dom.getElementsByClassName('Apple-tab-span', 'span', par); + //Remove the span element that Safari puts in + if (span[0]) { + par.removeChild(span[0]); + par.innerHTML = Lang.trim(par.innerHTML); + //Put the HTML from the LI into this new LI + if (preContent) { + par.innerHTML = '' + preContent + ' '; + } else { + par.innerHTML = ' '; + } + } + } else { + if (preContent) { + par.innerHTML = preContent + ' '; + } else { + par.innerHTML = ' '; + } + } + + par.parentNode.replaceChild(newUl, par); + newUl.appendChild(par); + if (this.browser.webkit) { + this._getSelection().setBaseAndExtent(par.firstChild, 1, par.firstChild, par.firstChild.innerText.length); + if (!this.browser.webkit3) { + par.parentNode.parentNode.style.display = 'list-item'; + setTimeout(function() { + par.parentNode.parentNode.style.display = 'block'; + }, 1); + } + } else if (this.browser.ie) { + range = this._getDoc().body.createTextRange(); + range.moveToElementText(par); + range.collapse(false); + range.select(); + } else { + this._selectNode(par); + } + Event.stopEvent(ev); + } + if (this.browser.webkit) { + Event.stopEvent(ev); + } + this.nodeChange(); + } + }, + /** + * @method nodeChange + * @param {Boolean} force Optional paramenter to skip the threshold counter + * @description Handles setting up the toolbar buttons, getting the Dom path, fixing nodes. + */ + nodeChange: function(force) { + var NCself = this; + this._storeUndo(); + if (this.get('nodeChangeDelay')) { + this._nodeChangeDelayTimer = window.setTimeout(function() { + NCself._nodeChangeDelayTimer = null; + NCself._nodeChange.apply(NCself, arguments); + }, 0); + } else { + this._nodeChange(); + } + }, + /** + * @private + * @method _nodeChange + * @param {Boolean} force Optional paramenter to skip the threshold counter + * @description Fired from nodeChange in a setTimeout. + */ + _nodeChange: function(force) { + var threshold = parseInt(this.get('nodeChangeThreshold'), 10), + thisNodeChange = Math.round(new Date().getTime() / 1000), + self = this; + + if (force === true) { + this._lastNodeChange = 0; + } + + if ((this._lastNodeChange + threshold) < thisNodeChange) { + if (this._fixNodesTimer === null) { + this._fixNodesTimer = window.setTimeout(function() { + self._fixNodes.call(self); + self._fixNodesTimer = null; + }, 0); + } + } + this._lastNodeChange = thisNodeChange; + if (this.currentEvent) { + try { + this._lastNodeChangeEvent = this.currentEvent.type; + } catch (e) {} + } + + var beforeNodeChange = this.fire('beforeNodeChange', { type: 'beforeNodeChange' }); + if (beforeNodeChange === false) { + return false; + } + if (this.get('dompath')) { + Y.later(0, this, this._writeDomPath); + } + //Check to see if we are disabled before continuing + if (!this.get('disabled')) { + if (this.STOP_NODE_CHANGE) { + //Reset this var for next action + this.STOP_NODE_CHANGE = false; + return false; + } else { + var sel = this._getSelection(), + range = this._getRange(), + el = this._getSelectedElement(), + fn_button = this.toolbar.getButtonByValue('fontname'), + fs_button = this.toolbar.getButtonByValue('fontsize'), + undo_button = this.toolbar.getButtonByValue('undo'), + redo_button = this.toolbar.getButtonByValue('redo'); + + //Handle updating the toolbar with active buttons + var _ex = {}; + if (this._lastButton) { + _ex[this._lastButton.id] = true; + //this._lastButton = null; + } + if (!this._isElement(el, 'body')) { + if (fn_button) { + _ex[fn_button.get('id')] = true; + } + if (fs_button) { + _ex[fs_button.get('id')] = true; + } + } + if (redo_button) { + delete _ex[redo_button.get('id')]; + } + this.toolbar.resetAllButtons(_ex); + + //Handle disabled buttons + for (var d = 0; d < this._disabled.length; d++) { + var _button = this.toolbar.getButtonByValue(this._disabled[d]); + if (_button && _button.get) { + if (this._lastButton && (_button.get('id') === this._lastButton.id)) { + //Skip + } else { + if (!this._hasSelection() && !this.get('insert')) { + switch (this._disabled[d]) { + case 'fontname': + case 'fontsize': + break; + default: + //No Selection - disable + this.toolbar.disableButton(_button); + } + } else { + if (!this._alwaysDisabled[this._disabled[d]]) { + this.toolbar.enableButton(_button); + } + } + if (!this._alwaysEnabled[this._disabled[d]]) { + this.toolbar.deselectButton(_button); + } + } + } + } + var path = this._getDomPath(); + var tag = null, cmd = null; + for (var i = 0; i < path.length; i++) { + tag = path[i].tagName.toLowerCase(); + if (path[i].getAttribute('tag')) { + tag = path[i].getAttribute('tag').toLowerCase(); + } + cmd = this._tag2cmd[tag]; + if (cmd === undefined) { + cmd = []; + } + if (!Lang.isArray(cmd)) { + cmd = [cmd]; + } + + //Bold and Italic styles + if (path[i].style.fontWeight.toLowerCase() == 'bold') { + cmd[cmd.length] = 'bold'; + } + if (path[i].style.fontStyle.toLowerCase() == 'italic') { + cmd[cmd.length] = 'italic'; + } + if (path[i].style.textDecoration.toLowerCase() == 'underline') { + cmd[cmd.length] = 'underline'; + } + if (path[i].style.textDecoration.toLowerCase() == 'line-through') { + cmd[cmd.length] = 'strikethrough'; + } + if (cmd.length > 0) { + for (var j = 0; j < cmd.length; j++) { + this.toolbar.selectButton(cmd[j]); + this.toolbar.enableButton(cmd[j]); + } + } + //Handle Alignment + switch (path[i].style.textAlign.toLowerCase()) { + case 'left': + case 'right': + case 'center': + case 'justify': + var alignType = path[i].style.textAlign.toLowerCase(); + if (path[i].style.textAlign.toLowerCase() == 'justify') { + alignType = 'full'; + } + this.toolbar.selectButton('justify' + alignType); + this.toolbar.enableButton('justify' + alignType); + break; + } + } + //After for loop + + //Reset Font Family and Size to the inital configs + if (fn_button) { + var family = fn_button._conf.data.initValue.label; + fn_button.set('label', ''); + this._updateMenuChecked('fontname', family); + } + + if (fs_button) { + fs_button.set('label', fs_button._conf.data.initValue.label); + } + + var hd_button = this.toolbar.getButtonByValue('heading'); + if (hd_button) { + hd_button.set('label', hd_button._conf.data.initValue.label); + this._updateMenuChecked('heading', 'none'); + } + var img_button = this.toolbar.getButtonByValue('insertimage'); + if (img_button && this.currentWindow && (this.currentWindow.name == 'insertimage')) { + this.toolbar.disableButton(img_button); + } + if (this._lastButton && this._lastButton.isSelected) { + this.toolbar.deselectButton(this._lastButton.id); + } + this._undoNodeChange(); + } + } + + this.fire('afterNodeChange', { type: 'afterNodeChange' }); + }, + /** + * @private + * @method _updateMenuChecked + * @param {Object} button The command identifier of the button you want to check + * @param {String} value The value of the menu item you want to check + * @param {YAHOO.widget.Toolbar} The Toolbar instance the button belongs to (defaults to this.toolbar) + * @description Gets the menu from a button instance, if the menu is not rendered it will render it. It will then search the menu for the specified value, unchecking all other items and checking the specified on. + */ + _updateMenuChecked: function(button, value, tbar) { + if (!tbar) { + tbar = this.toolbar; + } + var _button = tbar.getButtonByValue(button); + _button.checkValue(value); + }, + /** + * @private + * @method _handleToolbarClick + * @param {Event} ev The event that triggered the button click + * @description This is an event handler attached to the Toolbar's buttonClick event. It will fire execCommand with the command identifier from the Toolbar Button. + */ + _handleToolbarClick: function(ev) { + var value = ''; + var str = ''; + var cmd = ev.button.value; + if (ev.button.menucmd) { + value = cmd; + cmd = ev.button.menucmd; + } + this._lastButton = ev.button; + if (this.STOP_EXEC_COMMAND) { + YAHOO.log('execCommand skipped because we found the STOP_EXEC_COMMAND flag set to true', 'warn', 'SimpleEditor'); + YAHOO.log('NOEXEC::execCommand::(' + cmd + '), (' + value + ')', 'warn', 'SimpleEditor'); + this.STOP_EXEC_COMMAND = false; + return false; + } else { + this.execCommand(cmd, value); + if (!this.browser.webkit) { + var Fself = this; + setTimeout(function() { + Fself.focus.call(Fself); + }, 5); + } + } + Event.stopEvent(ev); + }, + /** + * @private + * @method _setupAfterElement + * @description Creates the accessibility h2 header and places it after the iframe in the Dom for navigation. + */ + _setupAfterElement: function() { + if (!this.beforeElement) { + this.beforeElement = Y.Node.create(''); + this.beforeElement.set('innerHTML', this.STR_BEFORE_EDITOR); + this.get('element_cont').query('.first-child').insertBefore(this.beforeElement, this.toolbar.get('node').get('nextSibling')); + } + if (!this.afterElement) { + this.afterElement = Y.Node.create('
' + this.STR_LEAVE_EDITOR + '
'); + this.get('element_cont').get('firstChild').appendChild(this.afterElement); + } + }, + /** + * @private + * @method _disableEditor + * @param {Boolean} disabled Pass true to disable, false to enable + * @description Creates a mask to place over the Editor. + */ + _disableEditor: function(disabled) { + var iframe, par, html, height; + if (!this.get('disabled_iframe') && disabled) { + iframe = this._createIframe(); + iframe.set('id', 'disabled_' + this.get('iframe').get('id')); + iframe.setStyle('height', '100%'); + iframe.setStyle('display', 'none'); + iframe.setStyle('visibility', 'visible'); + this.set('disabled_iframe', iframe); + par = this.get('iframe').get('parentNode'); + par.appendChild(iframe); + } + if (!iframe) { + iframe = this.get('disabled_iframe'); + } + if (disabled) { + this._orgIframe = this.get('iframe'); + + if (this.toolbar) { + this.toolbar.set('disabled', true); + } + + html = this.getEditorHTML(); + height = this.get('iframe').get('offsetHeight'); + iframe.setStyle('visibility', ''); + iframe.setStyle('position', ''); + iframe.setStyle('top', ''); + iframe.setStyle('left', ''); + this._orgIframe.setStyle('visibility', 'hidden'); + this._orgIframe.setStyle('position', 'absolute'); + this._orgIframe.setStyle('top', '-99999px'); + this._orgIframe.setStyle('left', '-99999px'); + this.set('iframe', iframe); + this._setInitialContent(true); + + if (!this._mask) { + this._mask = Y.Node.create(''); + if (this.browser.ie) { + this._mask.setStyle('height', height + 'px'); + } + this.get('iframe').get('parentNode').appendChild(this._mask); + } + this.on('editorContentReloaded', function() { + this._getDoc().body._rteLoaded = false; + this.setEditorHTML(html); + iframe.setStyle('display', 'block'); + }); + } else { + if (this._mask) { + this._mask.get('parentNode').removeChild(this._mask); + this._mask = null; + if (this.toolbar) { + this.toolbar.set('disabled', false); + } + iframe.setStyle('visibility', 'hidden'); + iframe.setStyle('position', 'absolute'); + iframe.setStyle('top', '-99999px'); + iframe.setStyle('left', '-99999px'); + this._orgIframe.setStyle('visibility', ''); + this._orgIframe.setStyle('position', ''); + this._orgIframe.setStyle('top', ''); + this._orgIframe.setStyle('left', ''); + this.set('iframe', this._orgIframe); + + this.focus(); + Y.later(100, this, this.nodeChange); + } + } + }, + /** + * @property SEP_DOMPATH + * @description The value to place in between the Dom path items + * @type String + */ + SEP_DOMPATH: '<', + /** + * @property STR_LEAVE_EDITOR + * @description The accessibility string for the element after the iFrame + * @type String + */ + STR_LEAVE_EDITOR: 'You have left the Rich Text Editor.', + /** + * @property STR_BEFORE_EDITOR + * @description The accessibility string for the element before the iFrame + * @type String + */ + STR_BEFORE_EDITOR: 'This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Shift + Escape to place focus on the toolbar and navigate between options with your arrow keys. To exit this text editor use the Escape key and continue tabbing.Common formatting keyboard shortcuts:
- Control Shift B sets text to bold
- Control Shift I sets text to italic
- Control Shift U underlines text
- Control Shift L adds an HTML link
'); + if (items.length > 0) { + list.innerHTML = ''; + for (var i = 0; i < items.length; i++) { + var item = this._getDoc().createElement('li'); + item.innerHTML = items[i]; + list.appendChild(item); + } + } + + this.currentElement[0].parentNode.replaceChild(list, this.currentElement[0]); + this.currentElement[0] = list; + var _h = this.currentElement[0].firstChild; + _h = Dom.getElementsByClassName('yui-non', 'span', _h)[0]; + this._getSelection().setBaseAndExtent(_h, 1, _h, _h.innerText.length); + } + exec = false; + } else { + el = this._getSelectedElement(); + YAHOO.log(el.tagName); + if (this._isElement(el, 'li') && this._isElement(el.parentNode, tag) || (this.browser.ie && this._isElement(this._getRange().parentElement, 'li')) || (this.browser.ie && this._isElement(el, 'ul')) || (this.browser.ie && this._isElement(el, 'ol'))) { //we are in a list.. + YAHOO.log('We already have a list, undo it', 'info', 'SimpleEditor'); + if (this.browser.ie) { + if ((this.browser.ie && this._isElement(el, 'ul')) || (this.browser.ie && this._isElement(el, 'ol'))) { + el = el.getElementsByTagName('li')[0]; + } + YAHOO.log('Undo IE', 'info', 'SimpleEditor'); + str = ''; + var lis2 = el.parentNode.getElementsByTagName('li'); + for (var j = 0; j < lis2.length; j++) { + str += lis2[j].innerHTML + '
'; + } + var newEl = this._getDoc().createElement('span'); + newEl.innerHTML = str; + el.parentNode.parentNode.replaceChild(newEl, el.parentNode); + } else { + this.nodeChange(); + this._getDoc().execCommand(action, '', el.parentNode); + this.nodeChange(); + } + exec = false; + } + if (this.browser.opera) { + var self = this; + window.setTimeout(function() { + var liso = self._getDoc().getElementsByTagName('li'); + for (var i = 0; i < liso.length; i++) { + if (liso[i].innerHTML.toLowerCase() == '
') { + liso[i].parentNode.parentNode.removeChild(liso[i].parentNode); + } + } + },30); + } + if (this.browser.ie && exec) { + var html = ''; + if (this._getRange().html) { + html = '
execCommand('fontname', false, 'yui-tmp') on the given selection.
+ * It will then search the document for an element with the font-family set to yui-tmp and replace that with another span that has other information in it, then assign the new span to the
+ * this.currentElement array, so we now have element references to the elements that were just modified. At this point we can use standard DOM manipulation to change them as we see fit.
+ */
+ _createCurrentElement: function(tagName, tagStyle) {
+ tagName = ((tagName) ? tagName : 'a');
+ var tar = null,
+ el = [],
+ _doc = this._getDoc();
+
+ if (this.currentFont) {
+ if (!tagStyle) {
+ tagStyle = {};
+ }
+ tagStyle.fontFamily = this.currentFont;
+ this.currentFont = null;
+ }
+ this.currentElement = [];
+
+ var _elCreate = function(tagName, tagStyle) {
+ var el = null;
+ tagName = ((tagName) ? tagName : 'span');
+ tagName = tagName.toLowerCase();
+ switch (tagName) {
+ case 'h1':
+ case 'h2':
+ case 'h3':
+ case 'h4':
+ case 'h5':
+ case 'h6':
+ el = _doc.createElement(tagName);
+ break;
+ default:
+ el = _doc.createElement(tagName);
+ if (tagName === 'span') {
+ Dom.addClass(el, 'yui-tag-' + tagName);
+ Dom.addClass(el, 'yui-tag');
+ el.setAttribute('tag', tagName);
+ }
+ //console.log(tagStyle);
+ if (tagStyle) {
+ Y.each(tagStyle, function(v, k) {
+ el.style[k] = v;
+ });
+ }
+ break;
+ }
+ return el;
+ };
+
+ if (!this._hasSelection()) {
+ if (this._getDoc().queryCommandEnabled('insertimage')) {
+ this._getDoc().execCommand('insertimage', false, 'yui-tmp-img');
+ var imgs = this._getDoc().getElementsByTagName('img');
+ for (var j = 0; j < imgs.length; j++) {
+ if (imgs[j].getAttribute('src', 2) == 'yui-tmp-img') {
+ el = _elCreate(tagName, tagStyle);
+ imgs[j].parentNode.replaceChild(el, imgs[j]);
+ this.currentElement[this.currentElement.length] = el;
+ }
+ }
+ } else {
+ if (this.currentEvent) {
+ tar = Event.getTarget(this.currentEvent);
+ } else {
+ //For Safari..
+ tar = this._getDoc().body;
+ }
+ }
+ if (tar) {
+ /*
+ * @knownissue Safari Cursor Position
+ * @browser Safari 2.x
+ * @description The issue here is that we have no way of knowing where the cursor position is
+ * inside of the iframe, so we have to place the newly inserted data in the best place that we can.
+ */
+ el = _elCreate(tagName, tagStyle);
+ if (this._isElement(tar, 'body') || this._isElement(tar, 'html')) {
+ if (this._isElement(tar, 'html')) {
+ tar = this._getDoc().body;
+ }
+ tar.appendChild(el);
+ } else if (tar.nextSibling) {
+ tar.parentNode.insertBefore(el, tar.nextSibling);
+ } else {
+ tar.parentNode.appendChild(el);
+ }
+ //this.currentElement = el;
+ this.currentElement[this.currentElement.length] = el;
+ this.currentEvent = null;
+ if (this.browser.webkit) {
+ //Force Safari to focus the new element
+ this._getSelection().setBaseAndExtent(el, 0, el, 0);
+ if (this.browser.webkit3) {
+ this._getSelection().collapseToStart();
+ } else {
+ this._getSelection().collapse(true);
+ }
+ }
+ }
+ } else {
+ //Force CSS Styling for this action...
+ this._setEditorStyle(true);
+ this._getDoc().execCommand('fontname', false, 'yui-tmp');
+ var _tmp = [], __tmp, __els = ['font', 'span', 'i', 'b', 'u', 'li'];
+
+ if (!this._isElement(this._getSelectedElement(), 'body')) {
+ __els[__els.length] = this._getDoc().getElementsByTagName(this._getSelectedElement().tagName);
+ __els[__els.length] = this._getDoc().getElementsByTagName(this._getSelectedElement().parentNode.tagName);
+ }
+ for (var _els = 0; _els < __els.length; _els++) {
+ var _tmp1 = this._getDoc().getElementsByTagName(__els[_els]);
+ for (var e = 0; e < _tmp1.length; e++) {
+ _tmp[_tmp.length] = _tmp1[e];
+ }
+ }
+
+
+ for (var i = 0; i < _tmp.length; i++) {
+ if ((Dom.getStyle(_tmp[i], 'fontFamily') == 'yui-tmp') || (_tmp[i].face && (_tmp[i].face == 'yui-tmp'))) {
+ if (tagName !== 'span') {
+ el = _elCreate(tagName, tagStyle);
+ } else {
+ el = _elCreate(_tmp[i].tagName, tagStyle);
+ }
+ el.innerHTML = _tmp[i].innerHTML;
+ if (this._isElement(_tmp[i], 'ol') || (this._isElement(_tmp[i], 'ul'))) {
+ var fc = _tmp[i].getElementsByTagName('li')[0];
+ _tmp[i].style.fontFamily = 'inherit';
+ fc.style.fontFamily = 'inherit';
+ el.innerHTML = fc.innerHTML;
+ fc.innerHTML = '';
+ fc.appendChild(el);
+ this.currentElement[this.currentElement.length] = el;
+ } else if (this._isElement(_tmp[i], 'li')) {
+ _tmp[i].innerHTML = '';
+ _tmp[i].appendChild(el);
+ _tmp[i].style.fontFamily = 'inherit';
+ this.currentElement[this.currentElement.length] = el;
+ } else {
+ if (_tmp[i].parentNode) {
+ _tmp[i].parentNode.replaceChild(el, _tmp[i]);
+ this.currentElement[this.currentElement.length] = el;
+ this.currentEvent = null;
+ if (this.browser.webkit) {
+ //Force Safari to focus the new element
+ this._getSelection().setBaseAndExtent(el, 0, el, 0);
+ if (this.browser.webkit3) {
+ this._getSelection().collapseToStart();
+ } else {
+ this._getSelection().collapse(true);
+ }
+ }
+ if (this.browser.ie && tagStyle && tagStyle.fontSize) {
+ this._getSelection().empty();
+ }
+ if (this.browser.gecko) {
+ this._getSelection().collapseToStart();
+ }
+ }
+ }
+ }
+ }
+ var len = this.currentElement.length;
+ for (var o = 0; o < len; o++) {
+ if ((o + 1) != len) { //Skip the last one in the list
+ if (this.currentElement[o] && this.currentElement[o].nextSibling) {
+ if (this._isElement(this.currentElement[o], 'br')) {
+ this.currentElement[this.currentElement.length] = this.currentElement[o].nextSibling;
+ }
+ }
+ }
+ }
+ }
+ },
+ /**
+ * @method saveHTML
+ * @description Cleans the HTML with the cleanHTML method then places that string back into the textarea.
+ * @return String
+ */
+ saveHTML: function() {
+ var html = this.cleanHTML();
+ if (this._textarea) {
+ this.get('node').set('value', html);
+ } else {
+ this.get('node').set('innerHTML', html);
+ }
+ if (this.get('saveEl') !== this.get('node')) {
+ var out = this.get('saveEl');
+ if (out) {
+ if (out.get('tagName').toLowerCase() === 'textarea') {
+ out.set('value', html);
+ } else {
+ out.set('innerHTML', html);
+ }
+ }
+ }
+ return html;
+ },
+ /**
+ * @method setEditorHTML
+ * @param {String} incomingHTML The html content to load into the editor
+ * @description Loads HTML into the editors body
+ */
+ setEditorHTML: function(incomingHTML) {
+ var html = this._cleanIncomingHTML(incomingHTML);
+ html = html.replace(/RIGHT_BRACKET/gi, '{');
+ html = html.replace(/LEFT_BRACKET/gi, '}');
+ this._getDoc().body.innerHTML = html;
+ this.nodeChange();
+ },
+ /**
+ * @method getEditorHTML
+ * @description Gets the unprocessed/unfiltered HTML from the editor
+ */
+ getEditorHTML: function() {
+ try {
+ var b = this._getDoc().body;
+ if (b === null) {
+ YAHOO.log('Body is null, returning null.', 'error', 'SimpleEditor');
+ return null;
+ }
+ return this._getDoc().body.innerHTML;
+ } catch (e) {
+ return '';
+ }
+ },
+ /**
+ * @method show
+ * @description This method needs to be called if the Editor was hidden (like in a TabView or Panel). It is used to reset the editor after being in a container that was set to display none.
+ */
+ show: function() {
+ if (this.browser.gecko) {
+ this._setDesignMode('on');
+ this.focus();
+ }
+ if (this.browser.webkit) {
+ var self = this;
+ window.setTimeout(function() {
+ self._setInitialContent.call(self);
+ }, 10);
+ }
+ //Adding this will close all other Editor window's when showing this one.
+ if (this.currentWindow) {
+ this.closeWindow();
+ }
+ //Put the iframe back in place
+ this.get('iframe').setStyle('position', 'static');
+ this.get('iframe').setStyle('left', '');
+ },
+ /**
+ * @method hide
+ * @description This method needs to be called if the Editor is to be hidden (like in a TabView or Panel). It should be called to clear timeouts and close open editor windows.
+ */
+ hide: function() {
+ //Adding this will close all other Editor window's.
+ if (this.currentWindow) {
+ this.closeWindow();
+ }
+ if (this._fixNodesTimer) {
+ clearTimeout(this._fixNodesTimer);
+ this._fixNodesTimer = null;
+ }
+ if (this._nodeChangeTimer) {
+ clearTimeout(this._nodeChangeTimer);
+ this._nodeChangeTimer = null;
+ }
+ this._lastNodeChange = 0;
+ //Move the iframe off of the screen, so that in containers with visiblity hidden, IE will not cover other elements.
+ this.get('iframe').setStyle('position', 'absolute');
+ this.get('iframe').setStyle('left', '-9999px');
+ },
+ /**
+ * @method _cleanIncomingHTML
+ * @param {String} html The unfiltered HTML
+ * @description Process the HTML with a few regexes to clean it up and stabilize the input
+ * @return {String} The filtered HTML
+ */
+ _cleanIncomingHTML: function(html) {
+ html = html.replace(/{/gi, 'RIGHT_BRACKET');
+ html = html.replace(/}/gi, 'LEFT_BRACKET');
+
+ html = html.replace(/').replace(/\r/g, '
'); + html = html.replace(/ /gi, ' '); //Replace all double spaces + html = html.replace(/\t/gi, ' '); //Replace all tabs + } + //Removing Script Tags from the Editor + html = html.replace(/
- ..
- ..
- /gi, '
- ');
+ html = html.replace(/<\/ol>/gi, '
');
+ html = html.replace(/<\/ol><\/li>\n/gi, "
- /gi, '
- ');
+ html = html.replace(/<\/ul>/gi, '
');
+ html = html.replace(/<\/ul><\/li>\n?/gi, "
- /gi, "
- <\/li>/gi, ''); + html = html.replace(/
- <\/li>/gi, ''); + html = html.replace(/
- <\/li>/gi, '');
+ //Remove bogus DIV's - updated from just removing the div's to replacing /div with a break
+ if (this.get('ptags')) {
+ html = html.replace(//gi, '');C.get("body").appendChild(J);L.element_cont=J;L.editor_wrapper=J.query("div.wrapper");L.toolbar_cont=J.query("div.toolbar_cont");C.get("body").removeChild(J);if(!L.html){L.html='
'); + html = html.replace(/
'); + html = html.replace(/<\/div>/gi, ''); + } + } + return html; + }, + /** + * @method filter_internals + * @param String html The HTML string to filter + * @description Filters internal RTE strings and bogus attrs we don't want + * @return String + */ + filter_internals: function(html) { + html = html.replace(/\r/g, ''); + //Fix stuff we don't want + html = html.replace(/<\/?(body|head|html)[^>]*>/gi, ''); + //Fix last BR in LI + html = html.replace(/<\/li>/gi, ''); + + html = html.replace(/yui-tag-span/gi, ''); + html = html.replace(/yui-tag/gi, ''); + html = html.replace(/yui-non/gi, ''); + html = html.replace(/yui-img/gi, ''); + html = html.replace(/ tag="span"/gi, ''); + html = html.replace(/ class=""/gi, ''); + html = html.replace(/ style=""/gi, ''); + html = html.replace(/ class=" "/gi, ''); + html = html.replace(/ class=" "/gi, ''); + html = html.replace(/ target=""/gi, ''); + html = html.replace(/ title=""/gi, ''); + + if (this.browser.ie) { + html = html.replace(/ class= /gi, ''); + html = html.replace(/ class= >/gi, ''); + } + + return html; + }, + /** + * @method filter_all_rgb + * @param String str The HTML string to filter + * @description Converts all RGB color strings found in passed string to a hex color, example: style="color: rgb(0, 255, 0)" converts to style="color: #00ff00" + * @return String + */ + filter_all_rgb: function(str) { + var exp = new RegExp("rgb\\s*?\\(\\s*?([0-9]+).*?,\\s*?([0-9]+).*?,\\s*?([0-9]+).*?\\)", "gi"); + var arr = str.match(exp); + if (Lang.isArray(arr)) { + for (var i = 0; i < arr.length; i++) { + var color = this.filter_rgb(arr[i]); + str = str.replace(arr[i].toString(), color); + } + } + + return str; + }, + /** + * @method filter_rgb + * @param String css The CSS string containing rgb(#,#,#); + * @description Converts an RGB color string to a hex color, example: rgb(0, 255, 0) converts to #00ff00 + * @return String + */ + filter_rgb: function(css) { + if (css.toLowerCase().indexOf('rgb') != -1) { + var exp = new RegExp("(.*?)rgb\\s*?\\(\\s*?([0-9]+).*?,\\s*?([0-9]+).*?,\\s*?([0-9]+).*?\\)(.*?)", "gi"); + var rgb = css.replace(exp, "$1,$2,$3,$4,$5").split(','); + + if (rgb.length == 5) { + var r = parseInt(rgb[1], 10).toString(16); + var g = parseInt(rgb[2], 10).toString(16); + var b = parseInt(rgb[3], 10).toString(16); + + r = r.length == 1 ? '0' + r : r; + g = g.length == 1 ? '0' + g : g; + b = b.length == 1 ? '0' + b : b; + + css = "#" + r + g + b; + } + } + return css; + }, + /** + * @method pre_filter_linebreaks + * @param String html The HTML to filter + * @param String markup The markup type to filter to + * @description HTML Pre Filter + * @return String + */ + pre_filter_linebreaks: function(html, markup) { + if (this.browser.webkit) { + html = html.replace(/
/gi, ''); + html = html.replace(/
/gi, ''); + } + html = html.replace(/
/gi, ''); + html = html.replace(/
/gi, ''); + html = html.replace(/ '); + html = html.replace(/
/gi, ''); + html = html.replace(/ ');if(M.label){var J=C.Node.create("<\/div>/gi, ' '); + html = html.replace(/ ( | )<\/p>/g, '
'); + html = html.replace(/
<\/p>/gi, ''); + html = html.replace(/ <\/p>/gi, '
'); + if (this.browser.ie) { + html = html.replace(/ /g, '\t'); + } + return html; + }, + /** + * @method post_filter_linebreaks + * @param String html The HTML to filter + * @param String markup The markup type to filter to + * @description HTML Pre Filter + * @return String + */ + post_filter_linebreaks: function(html, markup) { + if (markup == 'xhtml') { + html = html.replace(/'); + //Fix last BR + html = html.replace(/ $/, ''); + //Fix last BR in P + html = html.replace(/ <\/p>/g, ' /g, '
'); + } else { + html = html.replace(//g, '
'); + } + return html; + }, + /** + * @method clearEditorDoc + * @description Clear the doc of the Editor + */ + clearEditorDoc: function() { + this._getDoc().body.innerHTML = ' '; + }, + /** + * @method openWindow + * @description Override Method for Advanced Editor + */ + openWindow: function(win) { + }, + /** + * @method moveWindow + * @description Override Method for Advanced Editor + */ + moveWindow: function() { + }, + /** + * @private + * @method _closeWindow + * @description Override Method for Advanced Editor + */ + _closeWindow: function() { + }, + /** + * @method closeWindow + * @description Override Method for Advanced Editor + */ + closeWindow: function() { + //this.unsubscribeAll('afterExecCommand'); + this.toolbar.resetAllButtons(); + this.focus(); + }, + /** + * @method destroy + * @description Destroys the editor, all of it's elements and objects. + * @return {Boolean} + */ + destructor: function() { + if (this._nodeChangeDelayTimer) { + clearTimeout(this._nodeChangeDelayTimer); + } + this.hide(); + + YAHOO.log('Destroying Editor', 'warn', 'SimpleEditor'); + if (this.resize) { + YAHOO.log('Destroying Resize', 'warn', 'SimpleEditor'); + this.resize.destroy(); + } + if (this.dd) { + YAHOO.log('Unreg DragDrop Instance', 'warn', 'SimpleEditor'); + this.dd.unreg(); + } + if (this.get('panel')) { + YAHOO.log('Destroying Editor Panel', 'warn', 'SimpleEditor'); + this.get('panel').destroy(); + } + this.saveHTML(); + this.toolbar.destroy(); + YAHOO.log('Restoring TextArea', 'info', 'SimpleEditor'); + this.setStyle('visibility', 'visible'); + this.setStyle('position', 'static'); + this.setStyle('top', ''); + this.setStyle('left', ''); + var textArea = this.get('element'); + this.get('element_cont').get('parentNode').replaceChild(textArea, this.get('element_cont').get('element')); + this.get('element_cont').get('element').innerHTML = ''; + this.set('handleSubmit', false); //Remove the submit handler + return true; + }, + /** + * @method toString + * @description Returns a string representing the editor. + * @return {String} + */ + toString: function() { + var str = 'SimpleEditor'; + return str; + } + }); + + Y.namespace('Editor'); + Y.Editor.Simple = SimpleEditor; + +/** +* @event toolbarLoaded +* @description Event is fired during the render process directly after the Toolbar is loaded. Allowing you to attach events to the toolbar. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event cleanHTML +* @description Event is fired after the cleanHTML method is called. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event afterRender +* @description Event is fired after the render process finishes. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorContentLoaded +* @description Event is fired after the editor iframe's document fully loads and fires it's onload event. From here you can start injecting your own things into the document. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeNodeChange +* @description Event fires at the beginning of the nodeChange process. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event afterNodeChange +* @description Event fires at the end of the nodeChange process. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeExecCommand +* @description Event fires at the beginning of the execCommand process. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event afterExecCommand +* @description Event fires at the end of the execCommand process. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorMouseUp +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorMouseDown +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorDoubleClick +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorClick +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorKeyUp +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorKeyPress +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorKeyDown +* @param {Event} ev The DOM Event that occured +* @description Passed through HTML Event. See Element.addListener for more information on listening for this event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorMouseUp +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorMouseDown +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorDoubleClick +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorClick +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorKeyUp +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorKeyPress +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event beforeEditorKeyDown +* @param {Event} ev The DOM Event that occured +* @description Fires before editor event, returning false will stop the internal processing. +* @type YAHOO.util.CustomEvent +*/ + +/** +* @event editorWindowFocus +* @description Fires when the iframe is focused. Note, this is window focus event, not an Editor focus event. +* @type YAHOO.util.CustomEvent +*/ +/** +* @event editorWindowBlur +* @description Fires when the iframe is blurred. Note, this is window blur event, not an Editor blur event. +* @type YAHOO.util.CustomEvent +*/ + + +/** + * @description Singleton object used to track the open window objects and panels across the various open editors + * @class Editor.Info + * @static +*/ +Y.Editor.Info = { + /** + * @private + * @property _instances + * @description A reference to all editors on the page. + * @type Object + */ + _instances: {}, + /** + * @private + * @property blankImage + * @description A reference to the blankImage url + * @type String + */ + blankImage: '', + /** + * @private + * @property window + * @description A reference to the currently open window object in any editor on the page. + * @type Object YAHOO.widget.EditorWindow + */ + window: {}, + /** + * @private + * @property panel + * @description A reference to the currently open panel in any editor on the page. + * @type Object YAHOO.widget.Overlay + */ + panel: null, + /** + * @method getEditorById + * @description Returns a reference to the Editor object associated with the given textarea + * @param {String/HTMLElement} id The id or reference of the textarea to return the Editor instance of + * @return Object YAHOO.widget.Editor + */ + getEditorById: function(id) { + if (!Lang.isString(id)) { + //Not a string, assume a node Reference + id = id.id; + } + if (this._instances[id]) { + return this._instances[id]; + } + return false; + }, + /** + * @method saveAll + * @description Saves all Editor instances on the page. If a form reference is passed, only Editor's bound to this form will be saved. + * @param {HTMLElement} form The form to check if this Editor instance belongs to + */ + saveAll: function(form) { + var i, e, items = Y.Editor.Info._instances; + if (form) { + Y.each(items, function(v, e) { + if (e.get('element').form && (e.get('element').form == form)) { + e.saveHTML(); + } + }); + } else { + Y.each(items, function(v) { + v.saveHTML(); + }); + } + }, + /** + * @method toString + * @description Returns a string representing the Editor.Info. + * @return {String} + */ + toString: function() { + var len = 0; + Y.each(this._instances, function() { + len++; + }); + return 'Editor Info (' + len + ' registered intance' + ((len > 1) ? 's' : '') + ')'; + } +}; + + +}, 'gallery-2009.11.02-20' ,{requires:['node','gallery-port','substitute']}); diff --git a/build/gallery-simple-editor/gallery-simple-editor-min.js b/build/gallery-simple-editor/gallery-simple-editor-min.js new file mode 100644 index 0000000000..5d94351310 --- /dev/null +++ b/build/gallery-simple-editor/gallery-simple-editor-min.js @@ -0,0 +1,17 @@ +YUI.add("gallery-simple-editor",function(C){var D=function(){D.superclass.constructor.apply(this,arguments);};D.NAME="ToolbarButton";D.ATTRS={node:{setter:function(J){var K=C.get(J);if(!K){C.error("Invalid Node Given: "+J);}else{K=K.item(0);}return K;}},id:{},value:{},menu:{value:false},type:{value:"push",writeOnce:true},disabled:{value:false,setter:function(J){if(J){this.get("node").addClass("yui-button-disabled");this.get("node").addClass("yui-"+this.get("type")+"-button-disabled");}else{this.get("node").removeClass("yui-button-disabled");this.get("node").removeClass("yui-"+this.get("type")+"-button-disabled");}if(this.get("type")=="select"){this.get("node").set("disabled",J);}}},label:{value:"LABEL",setter:function(J){if(this.get("type")=="push"){this.get("node").query("a").set("innerHTML",J);}}},title:{value:"TITLE",setter:function(J){this.get("node").set("title",J);}},container:{value:null,writeOnce:true,setter:function(J){var K=C.get(J);if(!K){C.error("Invalid Node Given: "+J);}else{K=K.item(0);}return K;}}};C.extend(D,C.Base,{buttonType:"normal",_handleMouseOver:function(){if(!this.get("disabled")){this.get("node").addClass("yui-button-hover");this.get("node").addClass("yui-"+this.get("type")+"-button-hover");}},_handleMouseOut:function(){this.get("node").removeClass("yui-button-hover");this.get("node").removeClass("yui-"+this.get("type")+"-button-hover");},checkValue:function(K){if(this.get("type")=="select"){var J=this.get("node").get("options");J.each(function(M,L){if(M.get("value")==K){this.get("node").set("selectedIndex",L);}},this);}},initializer:function(){var O,L,M,N,K,J;switch(this.get("type")){case"select":case"menu":M=C.Node.create("");N=this.get("menu");for(L=0;L'+K+"
");this._titlebar.appendChild(J);J.get("firstChild").on("click",function(L){L.halt();});}if(this.get("node").get("firstChild")){this.get("node").insertBefore(this._titlebar,this.get("node").get("firstChild"));}else{this.get("node").appendChild(this._titlebar);}if(this.get("collapse")){this.set("collapse",true);}}else{if(this._titlebar){if(this._titlebar&&this._titlebar.get("parentNode")){this._titlebar.get("parentNode").removeChild(this._titlebar);}}}},_configuredButtons:null,_addMenuClasses:function(M,J,N){F.addClass(this.element,"yui-toolbar-"+N.get("value")+"-menu");if(F.hasClass(N._button.parentNode.parentNode,"yui-toolbar-select")){F.addClass(this.element,"yui-toolbar-select-menu");}var K=this.getItems();for(var L=0;L"+M.label+"
");O.appendChild(J);}if(!this.get("grouplabels")){this.get("cont").addClass(this.CLASS_PREFIX,"-nogrouplabels");}this.get("cont").appendChild(O);var L=C.Node.create("- ');L.appendChild(P);if((Q.type!==undefined)&&Q.type=="separator"){this.addSeparator(P);}else{Q.container=P;K=this.addButton(Q);if(K){N[N.length]=K.id;}}},this);return N;},addButtonToGroup:function(L,M,N){var K=this._buttonGroupList[M],J=document.createElement("li");J.className=this.CLASS_PREFIX+"-groupitem";L.container=J;this.addButton(L,N);K.appendChild(J);},addButton:function(O,P){if(!this._buttonList){this._buttonList=[];}if(!O.container){O.container=this.get("cont");}var L={},N=false;C.each(O,function(R,Q){if(!this._toolbarConfigs[Q]){L[Q]=R;}},this);if(O.type=="select"){L.type="menu";}if(O.type=="spin"){L.type="push";}if(L.type=="color"){if(C.Overlay){L=this._makeColorButton(L);}else{N=true;}}if(L.menu){if((C.Overlay)&&(O.menu instanceof C.Overlay)){O.menu.on("visibleChange",function(){this._button=L;});}else{}}if(N){O=false;}else{var K=new this.buttonType(L);K.get("node").set("tabIndex","-1");K.get("node").set("role","button");if(!L.id||!O.id){O.id=K.get("id");L.id=K.get("id");}if(this.get("disabled")){K.set("disabled",true);}K.get("node").addClass(this.CLASS_PREFIX+"-"+K.get("value"));var M=C.Node.create('');K.get("node").insertBefore(M,K.get("node").get("firstChild"));if(O.type=="spin"){if(!C.Lang.isArray(O.range)){O.range=[10,100];}this._makeSpinButton(K,O);}K.get("node").set("title",K.get("label"));if(O.type!="spin"){if((C.Overlay)&&(L.menu instanceof C.Overlay)){var J=function(R){var Q=true;if(R.keyCode&&(R.keyCode==9)){Q=false;}if(Q){if(this._colorPicker){this._colorPicker._button=O.value;}K.getMenu().set("visible",!K.getMenu().get("visible"));}R.halt();};K.get("node").on("mousedown",C.bind(J,this));K.get("node").on("keydown",C.bind(J,this));}else{if((O.type!="menu")&&(O.type!="select")){K.get("node").on("keypress",C.bind(this._buttonClick,this));K.get("node").on("mousedown",C.bind(function(Q){Q.halt();this._buttonClick(Q,O);},this));K.get("node").on("click",function(Q){Q.halt();});}else{K.on("mousedown",function(Q){Q.halt();});K.on("click",function(Q){Q.halt();});K.on("change",function(Q){if(!O.menucmd){O.menucmd=O.value;}O.value=Q.value;this._buttonClick(Q,O);},this,true);}}}else{K.on("mousedown",function(Q){Q.halt();});K.on("click",function(Q){Q.halt();});}if(this.browser.ie){}if(this.browser.webkit){}this._buttonList[this._buttonList.length]=K;}return O;},addSeparator:function(J,M){var K=((J)?J:this.get("cont"));if(this._sepCount===null){this._sepCount=0;}if(!this._sep){this._sep=C.Node.create('|');}var L=this._sep.cloneNode(true);this._sepCount++;L.addClass(this.CLASS_SEPARATOR+"-"+this._sepCount);if(M){var N=null;if(M.get){N=M.get("element").nextSibling;}else{if(M.nextSibling){N=M.nextSibling;}else{N=M;}}if(N){if(N==M){N.parentNode.appendChild(L);}else{N.parentNode.insertBefore(L,N);}}}else{K.appendChild(L);}return L;},_createColorPicker:function(M){var L=C.get("#"+M+"_colors");if(L){L.get("parentNode").removeChild(L);}var J=C.Node.create('');C.get("body").appendChild(J);this._colorPicker=J;var K="";C.each(this._colorData,function(O,N){K+=''+N.replace("#","")+"";},this);K+="X";J.set("innerHTML",K);J.on("mouseover",C.bind(function(R){var P=this._colorPicker;var Q=P.query("em");var O=P.query("strong");var N=R.target;if(N.get("tagName").toLowerCase()=="a"){Q.setStyle("backgroundColor",N.getStyle("backgroundColor"));O.set("innerHTML",this._colorData["#"+N.get("innerHTML")]+"
"+N.get("innerHTML"));}},this));J.on("focus",function(N){N.halt();});J.on("click",function(N){N.halt();});J.on("mousedown",C.bind(function(O){O.halt();var N=O.target,P;if(N.get("tagName").toLowerCase()=="a"){P=N.get("innerHTML");var R=this.fire("colorPickerClicked",{type:"colorPickerClicked",button:this._colorPicker._button,color:P,colorName:this._colorData["#"+P]});var Q={color:P,colorName:this._colorData["#"+P],value:this._colorPicker._button};this.fire("buttonClick",{type:"buttonClick",button:Q});this.getButtonByValue(this._colorPicker._button).getMenu().hide();this._colorPicker.setStyle("display","none");}},this));},_resetColorPicker:function(){var K=this._colorPicker.query("em");var J=this._colorPicker.query("strong");K.setStyle("backgroundColor","transparent");J.set("innerHTML","");},_makeColorButton:function(J){if(!this._colorPicker){this._createColorPicker(this.get("id"));}J.type="color";J.menu=new C.Overlay({contentBox:"#"+this.get("id")+"_"+J.value+"_menu",bodyContent:"FOO",visible:false,zIndex:999});J.menu.render(this.get("cont"));J.menu.set("visible",false);J.menu.get("contentBox").addClass("yui-button-menu");J.menu.get("contentBox").addClass("yui-color-button-menu");J.menu.after("visibleChange",C.bind(function(){J.menu.set("align",{node:this.getButtonById(J.id).get("node"),points:["tl","bl"]});this._resetColorPicker(); +var K=this._colorPicker;if(K.get("parentNode")){K.get("parentNode").removeChild(K);}J.menu.get("contentBox").query(".yui-widget-bd").set("innerHTML","");J.menu.get("contentBox").query(".yui-widget-bd").appendChild(K);this._colorPicker.setStyle("display","block");},this));return J;},_makeSpinButton:function(W,Q){W.get("node").addClass(this.CLASS_PREFIX+"-spinbutton");var X=this,S=W.get("node"),N=Q.range,M=C.Node.create(''+this.STR_SPIN_UP+""),L=C.Node.create(''+this.STR_SPIN_DOWN+"");S.appendChild(M);S.appendChild(L);var R=C.Lang.substitute(this.STR_SPIN_LABEL,{VALUE:W.get("label")});W.set("title",R);var V=function(Y){Y=((Y{TITLE} {CONTENT}';}if(!L.css){L.css=this._defaultCSS;}E.superclass.constructor.apply(this,arguments);};E.NAME="simpleeditor";E.ATTRS={node:{setter:function(J){var K=C.get(J);if(!K){C.error("Invalid Node Given: "+J);}else{K=K.item(0);}return K;}},"container":{writeOnce:true,value:false},"iframe":{value:null},"textarea":{value:null,writeOnce:true},"element_cont":{value:null},"editor_wrapper":{value:null},"toolbar_cont":{value:null,writeOnce:true},"toolbar":{value:null},"height":{value:null,setter:function(J){if(this._rendered){this.get("iframe").get("parentNode").setStyle("height",J);}}},"width":{value:null,setter:function(J){if(this._rendered){this.get("element_cont").setStyle("width",J);}}},"blankimage":{value:null},"css":{value:null,writeOnce:true},"html":{value:null,writeOnce:true},"extracss":{value:"",writeOnce:true},setDesignMode:{value:true},nodeChangeDelay:{value:true},dompath:{value:false},markup:{value:"semantic",validator:function(J){switch(J.toLowerCase()){case"semantic":case"css":case"default":case"xhtml":return true;}return false;}},maxUndo:{writeOnce:true,value:30},ptags:{writeOnce:true,value:false},plainText:{writeOnce:true,value:false},disabled_iframe:{value:null},nodeChangeThreshold:{value:3,validator:C.Lang.isNumber},allowNoEdit:{value:false,validator:C.Lang.isBoolean},limitCommands:{value:false,validator:C.Lang.isBoolean},removeLineBreaks:{value:false,validator:C.Lang.isBoolean},filterWord:{value:false,validator:C.Lang.isBoolean},insert:{value:false},saveEl:{value:null,setter:function(J){var K=C.get(J);if(!K){return false;}else{K=K.item(0);}return K;}},disabled:{value:false,setter:function(J){if(this._rendered){this._disableEditor(J);}}},focusAtStart:{value:false,writeOnce:true},handleSubmit:{value:false}};C.extend(E,C.PortBase,{_handleSubmit:function(){var J=this.get("handleSubmit");if(this.get("node").get("form")){if(!this._formButtons){this._formButtons=[];}if(J){this.get("node").get("form").on("submit",C.bind(this._handleFormSubmit,this));var K=this.get("node").get("form").query("input");if(K){K.each(function(M,L){var N=M.get("type");if(N&&(N.toLowerCase()=="submit")){M.on("click",C.bind(this._handleFormButtonClick,this));this._formButtons.push(M);}},this);}}else{}}},_handleInsert:function(){if(this.get("insert")){var M={fontname:true,fontsize:true,forecolor:true,backcolor:true};var L=this._defaultToolbar.buttons;for(var K=0;K
";}var L=C.Lang.substitute(this.get("html"),{TITLE:this.STR_TITLE,CONTENT:this._cleanIncomingHTML(N),CSS:this.get("css"),HIDDEN_CSS:((this.get("hiddencss"))?this.get("hiddencss"):"/* No Hidden CSS */"),EXTRA_CSS:((this.get("extracss"))?this.get("extracss"):"/* No Extra CSS */")}),J=true;L=L.replace(/RIGHT_BRACKET/gi,"{");L=L.replace(/LEFT_BRACKET/gi,"}");if(document.compatMode!="BackCompat"){A.log("Adding Doctype to editable area","info","SimpleEditor");L=this._docType+"\n"+L;}else{A.log("DocType skipped because we are in BackCompat Mode.","warn","SimpleEditor");}if(this.browser.ie||this.browser.webkit||this.browser.opera||(navigator.userAgent.indexOf("Firefox/1.5")!=-1)){try{if(this.browser.air){P=this._getDoc().implementation.createHTMLDocument();var Q=this._getDoc();Q.open();Q.close();P.open();P.write(L);P.close();var M=Q.importNode(P.getElementsByTagName("html")[0],true);Q.replaceChild(M,Q.getElementsByTagName("html")[0]);Q.body._rteLoaded=true;}else{P=this._getDoc();P.open();P.write(L);P.close();}}catch(O){A.log("Setting doc failed.. (_setInitialContent)","error","SimpleEditor");J=false;}}else{this.get("iframe").set("src","data:text/html;charset=utf-8,"+encodeURIComponent(L));}this.get("iframe").setStyle("visibility","");if(J){this._checkLoaded(K);}},_setMarkupType:function(J){switch(this.get("markup")){case"css":this._setEditorStyle(true);break;case"default":this._setEditorStyle(false);break;case"semantic":case"xhtml":if(this._semantic[J]){this._setEditorStyle(false);}else{this._setEditorStyle(true);}break;}},_setEditorStyle:function(K){try{this._getDoc().execCommand("useCSS",false,!K);}catch(J){}},_getSelectedElement:function(){var O=this._getDoc(),L=null,M=null,P=null,K=true;if(this.browser.ie){this.currentEvent=this._getWindow().event;L=this._getRange();if(L){P=L.item?L.item(0):L.parentElement();if(this._hasSelection()){}if(P===O.body){P=null;}}if((this.currentEvent!==null)&&(this.currentEvent.keyCode===0)){P=I.getTarget(this.currentEvent);}}else{M=this._getSelection();L=this._getRange();if(!M||!L){return null;}if(!this._hasSelection()&&this.browser.webkit3){}if(this.browser.gecko){if(L.startContainer){if(L.startContainer.nodeType===3){P=L.startContainer.parentNode;}else{if(L.startContainer.nodeType===1){P=L.startContainer;}}if(this.currentEvent){var J=I.getTarget(this.currentEvent);if(!this._isElement(J,"html")){if(P!==J){P=J;}}}}}if(K){if(M.anchorNode&&(M.anchorNode.nodeType==3)){if(M.anchorNode.parentNode){P=M.anchorNode.parentNode;}if(M.anchorNode.nextSibling!=M.focusNode.nextSibling){P=M.anchorNode.nextSibling;}}if(this._isElement(P,"br")){P=null;}if(!P){P=L.commonAncestorContainer;if(!L.collapsed){if(L.startContainer==L.endContainer){if(L.startOffset-L.endOffset<2){if(L.startContainer.hasChildNodes()){P=L.startContainer.childNodes[L.startOffset]; +}}}}}}}if(this.currentEvent!==null){try{switch(this.currentEvent.type){case"click":case"mousedown":case"mouseup":if(this.browser.webkit){P=I.getTarget(this.currentEvent);}break;default:break;}}catch(N){A.log("Firefox 1.5 errors here: "+N,"error","SimpleEditor");}}else{if((this.currentElement&&this.currentElement[0])&&(!this.browser.ie)){}}if(this.browser.opera||this.browser.webkit){if(this.currentEvent&&!P){P=I.getTarget(this.currentEvent);}}if(!P||!P.tagName){P=O.body;}if(this._isElement(P,"html")){P=O.body;}if(this._isElement(P,"body")){P=O.body;}if(P&&!P.parentNode){P=O.body;}if(P===undefined){P=null;}return P;},_getSelectedNode:function(){return C.get(this._getSelectedElement());},_getDomPath:function(J){if(!J){J=this._getSelectedElement();}var K=[];while(J!==null){if(J.ownerDocument!=this._getDoc()){J=null;break;}if(J.nodeName&&J.nodeType&&(J.nodeType==1)){K[K.length]=J;}if(this._isElement(J,"body")){break;}J=J.parentNode;}if(K.length===0){if(this._getDoc()&&this._getDoc().body){K[0]=this._getDoc().body;}}return K.reverse();},_writeDomPath:function(){var P=this._getDomPath(),N=[],L="",Q="";for(var J=0;J
");I.stopEvent(L);}}}if(this.browser.webkit){if(!this.browser.webkit3){if(L.keyCode&&(L.keyCode==122)&&(L.metaKey)){if(this._hasParent(this._getSelectedElement(),"li")){A.log("We are in an LI and we found CMD + z, stopping the event","warn","SimpleEditor");I.stopEvent(L);}}}this._listFix(L);}this._fixListDupIds();this.fireEvent("editorKeyPress",{type:"editorKeyPress",target:this,ev:L});},_handleKeyDown:function(c){var e=this.fireEvent("beforeEditorKeyDown",{type:"beforeEditorKeyDown",target:this,ev:c});if(e===false){return false;}var Z=null,J=null;if(this._isNonEditable(c)){return false;}this._setCurrentEvent(c);if(this.currentWindow){this.closeWindow();}if(this.currentWindow){this.closeWindow();}var S=false,X=null,U=null,W=false;switch(c.keyCode){case this._keyMap.FOCUS_TOOLBAR.key:if(this._checkKey(this._keyMap.FOCUS_TOOLBAR,c)){var b=this.toolbar.getElementsByTagName("h2")[0];if(b&&b.firstChild){b.firstChild.focus();}}else{if(this._checkKey(this._keyMap.FOCUS_AFTER,c)){this.afterElement.focus();}}I.stopEvent(c);S=false;break;case this._keyMap.CREATE_LINK.key:if(this._hasSelection()){if(this._checkKey(this._keyMap.CREATE_LINK,c)){var K=true;if(this.get("limitCommands")){if(!this.toolbar.getButtonByValue("createlink")){A.log("Toolbar Button for (createlink) was not found, skipping exec.","info","SimpleEditor");K=false;}}if(K){this.execCommand("createlink","");this.toolbar.fireEvent("createlinkClick",{type:"createlinkClick",target:this.toolbar});this.fireEvent("afterExecCommand",{type:"afterExecCommand",target:this});S=false;}}}break;case this._keyMap.UNDO.key:case this._keyMap.REDO.key:if(this._checkKey(this._keyMap.REDO,c)){X="redo";S=true;}else{if(this._checkKey(this._keyMap.UNDO,c)){X="undo";S=true;}}break;case this._keyMap.BOLD.key:if(this._checkKey(this._keyMap.BOLD,c)){X="bold";S=true;}break;case this._keyMap.FONT_SIZE_UP.key:case this._keyMap.FONT_SIZE_DOWN.key:var P=false,Y=false;if(this._checkKey(this._keyMap.FONT_SIZE_UP,c)){P=true;}if(this._checkKey(this._keyMap.FONT_SIZE_DOWN,c)){Y=true;}if(P||Y){var M=this.toolbar.getButtonByValue("fontsize"),L=parseInt(M.get("label"),10),N=(L+1);if(Y){N=(L-1);}X="fontsize";U=N+"px";S=true;}break;case this._keyMap.ITALIC.key:if(this._checkKey(this._keyMap.ITALIC,c)){X="italic";S=true;}break;case this._keyMap.UNDERLINE.key:if(this._checkKey(this._keyMap.UNDERLINE,c)){X="underline";S=true;}break;case 9:if(this.browser.ie){J=this._getRange();Z=this._getSelectedElement();if(!this._isElement(Z,"li")){if(J){J.pasteHTML(" ");J.collapse(false);J.select();}I.stopEvent(c);}}if(this.browser.gecko>1.8){Z=this._getSelectedElement();if(this._isElement(Z,"li")){if(c.shiftKey){this._getDoc().execCommand("outdent",null,"");}else{this._getDoc().execCommand("indent",null,"");}}else{if(!this._hasSelection()){this.execCommand("inserthtml"," ");}}I.stopEvent(c);}break;case 13:var R=null,a=0;if(this.get("ptags")&&!c.shiftKey){if(this.browser.gecko){Z=this._getSelectedElement();if(!this._hasParent(Z,"li")){if(this._hasParent(Z,"p")){R=this._getDoc().createElement("p");R.innerHTML=" ";F.insertAfter(R,Z);this._selectNode(R.firstChild);}else{if(this._isElement(Z,"body")){this.execCommand("insertparagraph",null);var T=this._getDoc().body.getElementsByTagName("p");for(a=0;a
");J.collapse(false);J.select();}I.stopEvent(c);}}}break;}if(this.browser.ie){this._listFix(c);}if(S&&X){this.execCommand(X,U);I.stopEvent(c);this.nodeChange();}this.fireEvent("editorKeyDown",{type:"editorKeyDown",target:this,ev:c});},_fixListRunning:null,_fixListDupIds:function(){if(this._fixListRunning){return false;}if(this._getDoc()){this._fixListRunning=true;var J=this._getDoc().body.getElementsByTagName("li"),K=0,L={};for(K=0;K ";}else{N.innerHTML=' ';}}}else{if(J){N.innerHTML=J+" ";}else{N.innerHTML=" ";}}N.parentNode.replaceChild(O,N);O.appendChild(N);if(this.browser.webkit){this._getSelection().setBaseAndExtent(N.firstChild,1,N.firstChild,N.firstChild.innerText.length);if(!this.browser.webkit3){N.parentNode.parentNode.style.display="list-item";setTimeout(function(){N.parentNode.parentNode.style.display="block";},1);}}else{if(this.browser.ie){L=this._getDoc().body.createTextRange();L.moveToElementText(N);L.collapse(false);L.select();}else{this._selectNode(N);}}I.stopEvent(P);}if(this.browser.webkit){I.stopEvent(P);}this.nodeChange();}},nodeChange:function(J){var K=this;this._storeUndo();if(this.get("nodeChangeDelay")){this._nodeChangeDelayTimer=window.setTimeout(function(){K._nodeChangeDelayTimer=null;K._nodeChange.apply(K,arguments);},0);}else{this._nodeChange();}},_nodeChange:function(K){var M=parseInt(this.get("nodeChangeThreshold"),10),T=Math.round(new Date().getTime()/1000),W=this;if(K===true){this._lastNodeChange=0;}if((this._lastNodeChange+M) - ');L.appendChild(P);if((Q.type!==undefined)&&Q.type=="separator"){this.addSeparator(P);}else{Q.container=P;K=this.addButton(Q);if(K){N[N.length]=K.id;}}},this);return N;},addButtonToGroup:function(L,M,N){var K=this._buttonGroupList[M],J=document.createElement("li");J.className=this.CLASS_PREFIX+"-groupitem";L.container=J;this.addButton(L,N);K.appendChild(J);},addButton:function(O,P){if(!this._buttonList){this._buttonList=[];}if(!O.container){O.container=this.get("cont");}var L={},N=false;C.each(O,function(R,Q){if(!this._toolbarConfigs[Q]){L[Q]=R;}},this);if(O.type=="select"){L.type="menu";}if(O.type=="spin"){L.type="push";}if(L.type=="color"){if(C.Overlay){L=this._makeColorButton(L);}else{N=true;}}if(L.menu){if((C.Overlay)&&(O.menu instanceof C.Overlay)){O.menu.on("visibleChange",function(){this._button=L;});}else{}}if(N){O=false;}else{var K=new this.buttonType(L);K.get("node").set("tabIndex","-1");K.get("node").set("role","button");if(!L.id||!O.id){O.id=K.get("id");L.id=K.get("id");}if(this.get("disabled")){K.set("disabled",true);}K.get("node").addClass(this.CLASS_PREFIX+"-"+K.get("value"));var M=C.Node.create('');K.get("node").insertBefore(M,K.get("node").get("firstChild"));if(O.type=="spin"){if(!C.Lang.isArray(O.range)){O.range=[10,100];}this._makeSpinButton(K,O);}K.get("node").set("title",K.get("label"));if(O.type!="spin"){if((C.Overlay)&&(L.menu instanceof C.Overlay)){var J=function(R){var Q=true;if(R.keyCode&&(R.keyCode==9)){Q=false;}if(Q){if(this._colorPicker){this._colorPicker._button=O.value;}K.getMenu().set("visible",!K.getMenu().get("visible"));}R.halt();};K.get("node").on("mousedown",C.bind(J,this));K.get("node").on("keydown",C.bind(J,this));}else{if((O.type!="menu")&&(O.type!="select")){K.get("node").on("keypress",C.bind(this._buttonClick,this));K.get("node").on("mousedown",C.bind(function(Q){Q.halt();this._buttonClick(Q,O);},this));K.get("node").on("click",function(Q){Q.halt();});}else{K.on("mousedown",function(Q){Q.halt();});K.on("click",function(Q){Q.halt();});K.on("change",function(Q){if(!O.menucmd){O.menucmd=O.value;}O.value=Q.value;this._buttonClick(Q,O);},this,true);}}}else{K.on("mousedown",function(Q){Q.halt();});K.on("click",function(Q){Q.halt();});}if(this.browser.ie){}if(this.browser.webkit){}this._buttonList[this._buttonList.length]=K;}return O;},addSeparator:function(J,M){var K=((J)?J:this.get("cont"));if(this._sepCount===null){this._sepCount=0;}if(!this._sep){this._sep=C.Node.create('|');}var L=this._sep.cloneNode(true);this._sepCount++;L.addClass(this.CLASS_SEPARATOR+"-"+this._sepCount);if(M){var N=null;if(M.get){N=M.get("element").nextSibling;}else{if(M.nextSibling){N=M.nextSibling;}else{N=M;}}if(N){if(N==M){N.parentNode.appendChild(L);}else{N.parentNode.insertBefore(L,N);}}}else{K.appendChild(L);}return L;},_createColorPicker:function(M){var L=C.get("#"+M+"_colors");if(L){L.get("parentNode").removeChild(L);}var J=C.Node.create('');C.get("body").appendChild(J);this._colorPicker=J;var K="";C.each(this._colorData,function(O,N){K+=''+N.replace("#","")+"";},this);K+="X";J.set("innerHTML",K);J.on("mouseover",C.bind(function(R){var P=this._colorPicker;var Q=P.query("em");var O=P.query("strong");var N=R.target;if(N.get("tagName").toLowerCase()=="a"){Q.setStyle("backgroundColor",N.getStyle("backgroundColor"));O.set("innerHTML",this._colorData["#"+N.get("innerHTML")]+"
- ");
+ html = html.replace(/
- /gi, "
- ");
+ return html;
+ },
+ /**
+ * @method filter_safari
+ * @param String html The HTML string to filter
+ * @description Filters strings specific to Safari
+ * @return String
+ */
+ filter_safari: function(html) {
+ if (this.browser.webkit) {
+ //
+ html = html.replace(/([^>])<\/span>/gi, ' ');
+ html = html.replace(/Apple-style-span/gi, '');
+ html = html.replace(/style="line-height: normal;"/gi, '');
+ html = html.replace(/yui-wk-div/gi, '');
+ html = html.replace(/yui-wk-p/gi, '');
+
+
+ //Remove bogus LI's
+ html = html.replace(/
'+this.STR_LEAVE_EDITOR+"
");this.get("element_cont").get("firstChild").appendChild(this.afterElement);}},_disableEditor:function(N){var M,L,K,J;if(!this.get("disabled_iframe")&&N){M=this._createIframe();M.set("id","disabled_"+this.get("iframe").get("id"));M.setStyle("height","100%");M.setStyle("display","none");M.setStyle("visibility","visible");this.set("disabled_iframe",M);L=this.get("iframe").get("parentNode");L.appendChild(M);}if(!M){M=this.get("disabled_iframe");}if(N){this._orgIframe=this.get("iframe");if(this.toolbar){this.toolbar.set("disabled",true);}K=this.getEditorHTML();J=this.get("iframe").get("offsetHeight");M.setStyle("visibility","");M.setStyle("position","");M.setStyle("top","");M.setStyle("left","");this._orgIframe.setStyle("visibility","hidden");this._orgIframe.setStyle("position","absolute");this._orgIframe.setStyle("top","-99999px");this._orgIframe.setStyle("left","-99999px");this.set("iframe",M);this._setInitialContent(true);if(!this._mask){this._mask=C.Node.create('');if(this.browser.ie){this._mask.setStyle("height",J+"px");}this.get("iframe").get("parentNode").appendChild(this._mask);}this.on("editorContentReloaded",function(){this._getDoc().body._rteLoaded=false;this.setEditorHTML(K);M.setStyle("display","block");});}else{if(this._mask){this._mask.get("parentNode").removeChild(this._mask);this._mask=null;if(this.toolbar){this.toolbar.set("disabled",false);}M.setStyle("visibility","hidden");M.setStyle("position","absolute");M.setStyle("top","-99999px");M.setStyle("left","-99999px");this._orgIframe.setStyle("visibility","");this._orgIframe.setStyle("position","");this._orgIframe.setStyle("top","");this._orgIframe.setStyle("left","");this.set("iframe",this._orgIframe);this.focus();C.later(100,this,this.nodeChange);}}},SEP_DOMPATH:"<",STR_LEAVE_EDITOR:"You have left the Rich Text Editor.",STR_BEFORE_EDITOR:"This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Shift + Escape to place focus on the toolbar and navigate between options with your arrow keys. To exit this text editor use the Escape key and continue tabbing.Common formatting keyboard shortcuts:
- Control Shift B sets text to bold
- Control Shift I sets text to italic
- Control Shift U underlines text
- Control Shift L adds an HTML link
");if(W.length>0){c.innerHTML="";for(var b=0;b
").replace(/\r/g,"
");J=J.replace(/ /gi," ");J=J.replace(/\t/gi," ");}J=J.replace(/
- /gi,"
- ");J=J.replace(/<\/ol>/gi,"
");J=J.replace(/<\/ol><\/li>\n/gi,"
- /gi,"
- ");J=J.replace(/<\/ul>/gi,"
");J=J.replace(/<\/ul><\/li>\n?/gi,"
- /gi,"
- <\/li>/gi,"");J=J.replace(/
- <\/li>/gi,"");J=J.replace(/
- <\/li>/gi,"");if(this.get("ptags")){J=J.replace(/
");J=J.replace(/<\/div>/gi,"");}}return J;},filter_internals:function(J){J=J.replace(/\r/g,"");J=J.replace(/<\/?(body|head|html)[^>]*>/gi,"");J=J.replace(/<\/li>/gi," ");J=J.replace(/yui-tag-span/gi,"");J=J.replace(/yui-tag/gi,"");J=J.replace(/yui-non/gi,"");J=J.replace(/yui-img/gi,"");J=J.replace(/ tag="span"/gi,"");J=J.replace(/ class=""/gi,"");J=J.replace(/ style=""/gi,"");J=J.replace(/ class=" "/gi,"");J=J.replace(/ class=" "/gi,"");J=J.replace(/ target=""/gi,"");J=J.replace(/ title=""/gi,"");if(this.browser.ie){J=J.replace(/ class= /gi,"");J=J.replace(/ class= >/gi,"");}return J;},filter_all_rgb:function(N){var M=new RegExp("rgb\\s*?\\(\\s*?([0-9]+).*?,\\s*?([0-9]+).*?,\\s*?([0-9]+).*?\\)","gi");var J=N.match(M);if(H.isArray(J)){for(var L=0;L - ');
+ ul.appendChild(li);
+ if ((i.type !== undefined) && i.type == 'separator') {
+ this.addSeparator(li);
+ } else {
+ i.container = li;
+ button = this.addButton(i);
+ if (button) {
+ addedButtons[addedButtons.length] = button.id;
+ }
+ }
+ }, this);
+
+ return addedButtons;
+ },
+ /**
+ * @method addButtonToGroup
+ * @description Add a new button to a toolbar group. Buttons supported:
+ * push, split, menu, select, color, spin
+ * @param {Object} oButton Object literal reference to the Button's Config
+ * @param {String} group The Group identifier passed into the initial config
+ * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
+ */
+ addButtonToGroup: function(oButton, group, after) {
+ var groupCont = this._buttonGroupList[group],
+ li = document.createElement('li');
+
+ li.className = this.CLASS_PREFIX + '-groupitem';
+ oButton.container = li;
+ this.addButton(oButton, after);
+ groupCont.appendChild(li);
+ },
+ /**
+ * @method addButton
+ * @description Add a new button to the toolbar. Buttons supported:
+ * push, split, menu, select, color, spin
+ * @param {Object} oButton Object literal reference to the Button's Config
+ * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
+ */
+ addButton: function(oButton, after) {
+ if (!this._buttonList) {
+ this._buttonList = [];
+ }
+ if (!oButton.container) {
+ oButton.container = this.get('cont');
+ }
+ /*
+ if ((oButton.type == 'menu') || (oButton.type == 'split') || (oButton.type == 'select')) {
+ if (Y.Lang.isArray(oButton.menu)) {
+ for (var i in oButton.menu) {
+ if (Lang.hasOwnProperty(oButton.menu, i)) {
+ var funcObject = {
+ fn: function(ev, x, oMenu) {
+ if (!oButton.menucmd) {
+ oButton.menucmd = oButton.value;
+ }
+ oButton.value = ((oMenu.value) ? oMenu.value : oMenu._oText.nodeValue);
+ },
+ scope: this
+ };
+ oButton.menu[i].onclick = funcObject;
+ }
+ }
+ }
+ }
+ */
+ var _oButton = {}, skip = false;
+ Y.each(oButton, function(v, k) {
+ if (!this._toolbarConfigs[k]) {
+ _oButton[k] = v;
+ }
+ }, this);
+ if (oButton.type == 'select') {
+ _oButton.type = 'menu';
+ }
+ if (oButton.type == 'spin') {
+ _oButton.type = 'push';
+ }
+ if (_oButton.type == 'color') {
+ if (Y.Overlay) {
+ _oButton = this._makeColorButton(_oButton);
+ } else {
+ skip = true;
+ }
+ }
+ if (_oButton.menu) {
+ if ((Y.Overlay) && (oButton.menu instanceof Y.Overlay)) {
+ oButton.menu.on('visibleChange', function() {
+ this._button = _oButton;
+ });
+ } else {
+ /*
+ for (var m = 0; m < _oButton.menu.length; m++) {
+ if (!_oButton.menu[m].value) {
+ _oButton.menu[m].value = _oButton.menu[m].text;
+ }
+ }
+ if (this.browser.webkit) {
+ _oButton.focusmenu = false;
+ }
+ */
+ }
+ }
+ if (skip) {
+ oButton = false;
+ } else {
+ //Add to .get('buttons') manually
+ //this._configs.buttons.value[this._configs.buttons.value.length] = oButton;
+ var tmp = new this.buttonType(_oButton);
+ tmp.get('node').set('tabIndex', '-1');
+ tmp.get('node').set('role', 'button');
+ if (!_oButton.id || !oButton.id) {
+ oButton.id = tmp.get('id');
+ _oButton.id = tmp.get('id');
+ }
+ //tmp._selected = true;
+
+ if (this.get('disabled')) {
+ //Toolbar is disabled, disable the new button too!
+ tmp.set('disabled', true);
+ }
+ /*
+ if (after) {
+ var el = tmp.get('element');
+ var nextSib = null;
+ if (after.get) {
+ nextSib = after.get('element').nextSibling;
+ } else if (after.nextSibling) {
+ nextSib = after.nextSibling;
+ }
+ if (nextSib) {
+ nextSib.parentNode.insertBefore(el, nextSib);
+ }
+ }
+ */
+ tmp.get('node').addClass(this.CLASS_PREFIX + '-' + tmp.get('value'));
+
+ var icon = Y.Node.create('');
+ tmp.get('node').insertBefore(icon, tmp.get('node').get('firstChild'));
+ /*
+ if (tmp._button.tagName.toLowerCase() == 'button') {
+ tmp.get('element').setAttribute('unselectable', 'on');
+ //Replace the Button HTML Element with an a href if it exists
+ var a = document.createElement('a');
+ a.innerHTML = tmp._button.innerHTML;
+ a.href = '#';
+ a.tabIndex = '-1';
+ Event.on(a, 'click', function(ev) {
+ Event.stopEvent(ev);
+ });
+ tmp._button.parentNode.replaceChild(a, tmp._button);
+ tmp._button = a;
+ }
+ */
+ /*
+ if (oButton.type == 'select') {
+ if (tmp._button.tagName.toLowerCase() == 'select') {
+ icon.parentNode.removeChild(icon);
+ var iel = tmp._button,
+ parEl = tmp.get('element');
+ parEl.parentNode.replaceChild(iel, parEl);
+ //The 'element' value is currently the orphaned element
+ //In order for "destroy" to execute we need to get('element') to reference the correct node.
+ //I'm not sure if there is a direct approach to setting this value.
+ tmp._configs.element.value = iel;
+ } else {
+ //Don't put a class on it if it's a real select element
+ tmp.addClass(this.CLASS_PREFIX + '-select');
+ }
+ }
+ */
+ if (oButton.type == 'spin') {
+ if (!Y.Lang.isArray(oButton.range)) {
+ oButton.range = [ 10, 100 ];
+ }
+ this._makeSpinButton(tmp, oButton);
+ }
+ tmp.get('node').set('title', tmp.get('label'));
+ if (oButton.type != 'spin') {
+ if ((Y.Overlay) && (_oButton.menu instanceof Y.Overlay)) {
+ var showPicker = function(ev) {
+ var exec = true;
+ if (ev.keyCode && (ev.keyCode == 9)) {
+ exec = false;
+ }
+ if (exec) {
+ if (this._colorPicker) {
+ this._colorPicker._button = oButton.value;
+ }
+ tmp.getMenu().set('visible', !tmp.getMenu().get('visible'));
+ }
+ ev.halt();
+ };
+ tmp.get('node').on('mousedown', Y.bind(showPicker, this));
+ tmp.get('node').on('keydown', Y.bind(showPicker, this));
+
+ } else if ((oButton.type != 'menu') && (oButton.type != 'select')) {
+ tmp.get('node').on('keypress', Y.bind(this._buttonClick, this));
+ tmp.get('node').on('mousedown', Y.bind(function(ev) {
+ ev.halt();
+ this._buttonClick(ev, oButton);
+ }, this));
+ tmp.get('node').on('click', function(ev) {
+ ev.halt();
+ });
+ } else {
+
+ //Stop the mousedown event so we can trap the selection in the editor!
+ tmp.on('mousedown', function(ev) {
+ ev.halt();
+ });
+ tmp.on('click', function(ev) {
+ ev.halt();
+ });
+ tmp.on('change', function(ev) {
+ if (!oButton.menucmd) {
+ oButton.menucmd = oButton.value;
+ }
+ oButton.value = ev.value;
+ this._buttonClick(ev, oButton);
+ }, this, true);
+ }
+ /*
+ var self = this;
+ //Hijack the mousedown event in the menu and make it fire a button click..
+
+ tmp.on('appendTo', function() {
+ var tmp = this;
+ if (tmp.getMenu() && tmp.getMenu().mouseDownEvent) {
+ tmp.getMenu().mouseDownEvent.subscribe(function(ev, args) {
+ YAHOO.log('mouseDownEvent', 'warn', 'Toolbar');
+ var oMenu = args[1];
+ YAHOO.util.Event.stopEvent(args[0]);
+ tmp._onMenuClick(args[0], tmp);
+ if (!oButton.menucmd) {
+ oButton.menucmd = oButton.value;
+ }
+ oButton.value = ((oMenu.value) ? oMenu.value : oMenu._oText.nodeValue);
+ self._buttonClick.call(self, args[1], oButton);
+ tmp._hideMenu();
+ return false;
+ });
+ tmp.getMenu().clickEvent.subscribe(function(ev, args) {
+ YAHOO.log('clickEvent', 'warn', 'Toolbar');
+ YAHOO.util.Event.stopEvent(args[0]);
+ });
+ tmp.getMenu().mouseUpEvent.subscribe(function(ev, args) {
+ YAHOO.log('mouseUpEvent', 'warn', 'Toolbar');
+ YAHOO.util.Event.stopEvent(args[0]);
+ });
+ }
+ });
+ */
+ } else {
+ //Stop the mousedown event so we can trap the selection in the editor!
+ tmp.on('mousedown', function(ev) {
+ ev.halt();
+ });
+ tmp.on('click', function(ev) {
+ ev.halt();
+ });
+ }
+ if (this.browser.ie) {
+ /*
+ //Add a couple of new events for IE
+ tmp.DOM_EVENTS.focusin = true;
+ tmp.DOM_EVENTS.focusout = true;
+
+ //Stop them so we don't loose focus in the Editor
+ tmp.on('focusin', function(ev) {
+ YAHOO.util.Event.stopEvent(ev);
+ }, oButton, this);
+
+ tmp.on('focusout', function(ev) {
+ YAHOO.util.Event.stopEvent(ev);
+ }, oButton, this);
+ tmp.on('click', function(ev) {
+ YAHOO.util.Event.stopEvent(ev);
+ }, oButton, this);
+ */
+ }
+ if (this.browser.webkit) {
+ //This will keep the document from gaining focus and the editor from loosing it..
+ //Forcefully remove the focus calls in button!
+ //tmp.hasFocus = function() {
+ // return true;
+ //};
+ }
+ this._buttonList[this._buttonList.length] = tmp;
+ /*
+ if ((oButton.type == 'menu') || (oButton.type == 'split') || (oButton.type == 'select')) {
+ if (Lang.isArray(oButton.menu)) {
+ YAHOO.log('Button type is (' + oButton.type + '), doing extra renderer work.', 'info', 'Toolbar');
+ var menu = tmp.getMenu();
+ if (menu && menu.renderEvent) {
+ menu.renderEvent.subscribe(this._addMenuClasses, tmp);
+ if (oButton.renderer) {
+ menu.renderEvent.subscribe(oButton.renderer, tmp);
+ }
+ }
+ }
+ }
+ */
+ }
+ return oButton;
+ },
+ /**
+ * @method addSeparator
+ * @description Add a new button separator to the toolbar.
+ * @param {HTMLElement} cont Optional HTML element to insert this button into.
+ * @param {HTMLElement} after Optional HTML element to insert this button after in the DOM.
+ */
+ addSeparator: function(cont, after) {
+ var sepCont = ((cont) ? cont : this.get('cont'));
+ if (this._sepCount === null) {
+ this._sepCount = 0;
+ }
+ if (!this._sep) {
+ this._sep = Y.Node.create('|');
+ }
+ var _sep = this._sep.cloneNode(true);
+ this._sepCount++;
+
+ _sep.addClass(this.CLASS_SEPARATOR + '-' + this._sepCount);
+ if (after) {
+ var nextSib = null;
+ if (after.get) {
+ nextSib = after.get('element').nextSibling;
+ } else if (after.nextSibling) {
+ nextSib = after.nextSibling;
+ } else {
+ nextSib = after;
+ }
+ if (nextSib) {
+ if (nextSib == after) {
+ nextSib.parentNode.appendChild(_sep);
+ } else {
+ nextSib.parentNode.insertBefore(_sep, nextSib);
+ }
+ }
+ } else {
+ sepCont.appendChild(_sep);
+ }
+ return _sep;
+ },
+ /**
+ * @method _createColorPicker
+ * @private
+ * @description Creates the core DOM reference to the color picker menu item.
+ * @param {String} id the id of the toolbar to prefix this DOM container with.
+ */
+ _createColorPicker: function(id) {
+ var c = Y.get('#' + id + '_colors');
+ if (c) {
+ c.get('parentNode').removeChild(c);
+ }
+ var picker = Y.Node.create('');
+ Y.get('body').appendChild(picker);
+
+ this._colorPicker = picker;
+
+ var html = '';
+ Y.each(this._colorData, function(v, k) {
+ html += '' + k.replace('#', '') + '';
+ }, this);
+ html += 'X';
+ picker.set('innerHTML', html);
+
+ picker.on('mouseover', Y.bind(function(ev) {
+ var picker = this._colorPicker;
+ var em = picker.query('em');
+ var strong = picker.query('strong');
+ var tar = ev.target;
+ if (tar.get('tagName').toLowerCase() == 'a') {
+ em.setStyle('backgroundColor', tar.getStyle('backgroundColor'));
+ strong.set('innerHTML', this._colorData['#' + tar.get('innerHTML')] + '
' + tar.get('innerHTML')); + } + }, this)); + picker.on('focus', function(ev) { + ev.halt(); + }); + picker.on('click', function(ev) { + ev.halt(); + }); + picker.on('mousedown', Y.bind(function(ev) { + ev.halt(); + var tar = ev.target, data; + if (tar.get('tagName').toLowerCase() == 'a') { + data = tar.get('innerHTML'); + var retVal = this.fire('colorPickerClicked', { type: 'colorPickerClicked', button: this._colorPicker._button, color: data, colorName: this._colorData['#' + data] } ); + var info = { + color: data, + colorName: this._colorData['#' + data], + value: this._colorPicker._button + }; + + this.fire('buttonClick', { type: 'buttonClick', button: info }); + this.getButtonByValue(this._colorPicker._button).getMenu().hide(); + this._colorPicker.setStyle('display', 'none'); + } + }, this)); + }, + /** + * @method _resetColorPicker + * @private + * @description Clears the currently selected color or mouseover color in the color picker. + */ + _resetColorPicker: function() { + var em = this._colorPicker.query('em'); + var strong = this._colorPicker.query('strong'); + em.setStyle('backgroundColor', 'transparent'); + strong.set('innerHTML', ''); + }, + /** + * @method _makeColorButton + * @private + * @description Called to turn a "color" button into a menu button with an Overlay for the menu. + * @param {Object} _oButton YAHOO.widget.ToolbarButton reference + */ + _makeColorButton: function(_oButton) { + if (!this._colorPicker) { + this._createColorPicker(this.get('id')); + } + _oButton.type = 'color'; + _oButton.menu = new Y.Overlay({ + contentBox: '#' + this.get('id') + '_' + _oButton.value + '_menu', + bodyContent: 'FOO', + visible: false, + zIndex: 999 + }); + _oButton.menu.render(this.get('cont')); + _oButton.menu.set('visible', false); + + _oButton.menu.get('contentBox').addClass('yui-button-menu'); + _oButton.menu.get('contentBox').addClass('yui-color-button-menu'); + + _oButton.menu.after('visibleChange', Y.bind(function() { + _oButton.menu.set('align', { + node: this.getButtonById(_oButton.id).get('node'), + points: ['tl', 'bl'] + }); + //Move the DOM reference of the color picker to the Overlay that we are about to show. + this._resetColorPicker(); + var _p = this._colorPicker; + if (_p.get('parentNode')) { + _p.get('parentNode').removeChild(_p); + } + _oButton.menu.get('contentBox').query('.yui-widget-bd').set('innerHTML', ''); + _oButton.menu.get('contentBox').query('.yui-widget-bd').appendChild(_p); + this._colorPicker.setStyle('display', 'block'); + }, this)); + + return _oButton; + }, + /** + * @private + * @method _makeSpinButton + * @description Create a button similar to an OS Spin button.. It has an up/down arrow combo to scroll through a range of int values. + * @param {Object} _button YAHOO.widget.ToolbarButton reference + * @param {Object} oButton Object literal containing the buttons initial config + */ + _makeSpinButton: function(_button, oButton) { + _button.get('node').addClass(this.CLASS_PREFIX + '-spinbutton'); + var self = this, + _par = _button.get('node'), //parentNode of Button Element for appending child + range = oButton.range, + _b1 = Y.Node.create('' + this.STR_SPIN_UP + ''), + _b2 = Y.Node.create('' + this.STR_SPIN_DOWN + ''); + + //Append them to the container + _par.appendChild(_b1); + _par.appendChild(_b2); + + + var label = Y.Lang.substitute(this.STR_SPIN_LABEL, { VALUE: _button.get('label') }); + _button.set('title', label); + + + var cleanVal = function(value) { + value = ((value < range[0]) ? range[0] : value); + value = ((value > range[1]) ? range[1] : value); + return value; + }; + + var br = this.browser; + var tbar = false; + var strLabel = this.STR_SPIN_LABEL; + if (this._titlebar && this._titlebar.get('firstChild')) { + tbar = this._titlebar.get('firstChild'); + } + + var _intUp = function(ev) { + ev.halt(); + if (!_button.get('disabled') && (ev.keyCode != 9)) { + var value = parseInt(_button.get('label'), 10); + value++; + value = cleanVal(value); + _button.set('label', ''+value); + var label = Y.Lang.substitute(strLabel, { VALUE: _button.get('label') }); + _button.set('title', label); + self._buttonClick(ev, oButton); + } + }; + + var _intDown = function(ev) { + ev.halt(); + if (!_button.get('disabled') && (ev.keyCode != 9)) { + var value = parseInt(_button.get('label'), 10); + value--; + value = cleanVal(value); + + _button.set('label', ''+value); + var label = Y.Lang.substitute(strLabel, { VALUE: _button.get('label') }); + _button.set('title', label); + self._buttonClick(ev, oButton); + } + }; + + var _intKeyUp = function(ev) { + if (ev.keyCode == 38) { + _intUp(ev); + } else if (ev.keyCode == 40) { + _intDown(ev); + } else if (ev.keyCode == 107 && ev.shiftKey) { //Plus Key + _intUp(ev); + } else if (ev.keyCode == 109 && ev.shiftKey) { //Minus Key + _intDown(ev); + } + }; + + //Handle arrow keys.. + _button.on('keydown', Y.bind(_intKeyUp, this)); + + //Listen for the click on the up button and act on it + //Listen for the click on the down button and act on it + _b1.on('mousedown',function(ev) { ev.halt(); }); + _b2.on('mousedown',function(ev) { ev.halt(); }); + _b1.on('click', Y.bind(_intUp, this)); + _b2.on('click', Y.bind(_intDown, this)); + }, + /** + * @protected + * @method _buttonClick + * @description Click handler for all buttons in the toolbar. + * @param {String} ev The event that was passed in. + * @param {Object} info Object literal of information about the button that was clicked. + */ + _buttonClick: function(ev, info) { + var doEvent = true; + + if (ev && ev.type == 'keypress') { + if (ev.keyCode == 9) { + doEvent = false; + } else if ((ev.keyCode === 13) || (ev.keyCode === 0) || (ev.keyCode === 32)) { + } else { + doEvent = false; + } + } + + if (doEvent) { + var fireNextEvent = true, + retValue = false; + + info.isSelected = this.isSelected(info.id); + + if (info.value) { + retValue = this.fire(info.value + 'Click', { type: info.value + 'Click', target: this.get('element'), button: info }); + if (retValue === false) { + fireNextEvent = false; + } + } + + if (info.menucmd && fireNextEvent) { + retValue = this.fire(info.menucmd + 'Click', { type: info.menucmd + 'Click', target: this.get('element'), button: info }); + if (retValue === false) { + fireNextEvent = false; + } + } + if (fireNextEvent) { + this.fire('buttonClick', { type: 'buttonClick', target: this.get('element'), button: info }); + } + + if (info.type == 'select') { + var button = this.getButtonById(info.id); + if (button.buttonType == 'rich') { + var txt = info.value; + for (var i = 0; i < info.menu.length; i++) { + if (info.menu[i].value == info.value) { + txt = info.menu[i].text; + break; + } + } + button.set('label', ''); + var _items = button.getMenu().getItems(); + for (var m = 0; m < _items.length; m++) { + if (_items[m].value.toLowerCase() == info.value.toLowerCase()) { + _items[m].cfg.setProperty('checked', true); + } else { + _items[m].cfg.setProperty('checked', false); + } + } + } + } + if (ev) { + ev.halt(); + } + } + }, + /** + * @private + * @property _keyNav + * @description Flag to determine if the arrow nav listeners have been attached + * @type Boolean + */ + _keyNav: null, + /** + * @private + * @property _navCounter + * @description Internal counter for walking the buttons in the toolbar with the arrow keys + * @type Number + */ + _navCounter: null, + /** + * @private + * @method _navigateButtons + * @description Handles the navigation/focus of toolbar buttons with the Arrow Keys + * @param {Event} ev The Key Event + */ + _navigateButtons: function(ev) { + switch (ev.keyCode) { + case 37: + case 39: + if (ev.keyCode == 37) { + this._navCounter--; + } else { + this._navCounter++; + } + if (this._navCounter > (this._buttonList.length - 1)) { + this._navCounter = 0; + } + if (this._navCounter < 0) { + this._navCounter = (this._buttonList.length - 1); + } + if (this._buttonList[this._navCounter]) { + var el = this._buttonList[this._navCounter].get('node'); + if (this.browser.ie) { + el = this._buttonList[this._navCounter].get('node').query('a'); + } + if (this._buttonList[this._navCounter].get('disabled')) { + this._navigateButtons(ev); + } else { + el.focus(); + } + } + break; + } + }, + /** + * @private + * @method _handleFocus + * @description Sets up the listeners for the arrow key navigation + */ + _handleFocus: function() { + if (!this._keyNav) { + var ev = 'keypress'; + if (this.browser.ie) { + ev = 'keydown'; + } + this.get('node').on(ev, Y.bind(this._navigateButtons, this)); + this._keyNav = true; + this._navCounter = -1; + } + }, + /** + * @method getButtonById + * @description Gets a button instance from the toolbar by is Dom id. + * @param {String} id The Dom id to query for. + * @return {YAHOO.widget.ToolbarButton} + */ + getButtonById: function(id) { + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + if (this._buttonList[i] && this._buttonList[i].get('id') == id) { + return this._buttonList[i]; + } + } + return false; + }, + /** + * @method getButtonByValue + * @description Gets a button instance or a menuitem instance from the toolbar by it's value. + * @param {String} value The button value to query for. + * @return {YAHOO.widget.ToolbarButton or YAHOO.widget.MenuItem} + */ + getButtonByValue: function(value) { + var _buttons = this.get('buttons'); + if (!_buttons) { + return false; + } + var len = _buttons.length; + for (var i = 0; i < len; i++) { + if (_buttons[i].group !== undefined) { + for (var m = 0; m < _buttons[i].buttons.length; m++) { + if ((_buttons[i].buttons[m].value == value) || (_buttons[i].buttons[m].menucmd == value)) { + return this.getButtonById(_buttons[i].buttons[m].id); + } + if (_buttons[i].buttons[m].menu) { //Menu Button, loop through the values + for (var s = 0; s < _buttons[i].buttons[m].menu.length; s++) { + if (_buttons[i].buttons[m].menu[s].value == value) { + return this.getButtonById(_buttons[i].buttons[m].id); + } + } + } + } + } else { + if ((_buttons[i].value == value) || (_buttons[i].menucmd == value)) { + return this.getButtonById(_buttons[i].id); + } + if (_buttons[i].menu) { //Menu Button, loop through the values + for (var j = 0; j < _buttons[i].menu.length; j++) { + if (_buttons[i].menu[j].value == value) { + return this.getButtonById(_buttons[i].id); + } + } + } + } + } + return false; + }, + /** + * @method getButtonByIndex + * @description Gets a button instance from the toolbar by is index in _buttonList. + * @param {Number} index The index of the button in _buttonList. + * @return {YAHOO.widget.ToolbarButton} + */ + getButtonByIndex: function(index) { + if (this._buttonList[index]) { + return this._buttonList[index]; + } else { + return false; + } + }, + /** + * @method getButtons + * @description Returns an array of buttons in the current toolbar + * @return {Array} + */ + getButtons: function() { + return this._buttonList; + }, + /** + * @method disableButton + * @description Disables a button in the toolbar. + * @param {String/Number} id Disable a button by it's id, index or value. + * @return {Boolean} + */ + disableButton: function(id) { + var button = getButton.call(this, id); + if (button) { + button.set('disabled', true); + } else { + return false; + } + }, + /** + * @method enableButton + * @description Enables a button in the toolbar. + * @param {String/Number} id Enable a button by it's id, index or value. + * @return {Boolean} + */ + enableButton: function(id) { + if (this.get('disabled')) { + return false; + } + var button = getButton.call(this, id); + if (button) { + if (button.get('disabled')) { + button.set('disabled', false); + } + } else { + return false; + } + }, + /** + * @method isSelected + * @description Tells if a button is selected or not. + * @param {String/Number} id A button by it's id, index or value. + * @return {Boolean} + */ + isSelected: function(id) { + var button = getButton.call(this, id); + if (button) { + return button._selected; + } + return false; + }, + /** + * @method selectButton + * @description Selects a button in the toolbar. + * @param {String/Number} id Select a button by it's id, index or value. + * @param {String} value If this is a Menu Button, check this item in the menu + * @return {Boolean} + */ + selectButton: function(id, value) { + var button = getButton.call(this, id); + if (button && (button.get('type') == 'push')) { + button.get('node').addClass('yui-button-selected'); + button.get('node').addClass('yui-button-' + button.get('value') + '-selected'); + button._selected = true; + if (value) { + if (button.buttonType == 'rich') { + var _items = button.getMenu().getItems(); + for (var m = 0; m < _items.length; m++) { + if (_items[m].value == value) { + _items[m].cfg.setProperty('checked', true); + button.set('label', ''); + } else { + _items[m].cfg.setProperty('checked', false); + } + } + } + } + } else { + return false; + } + }, + /** + * @method deselectButton + * @description Deselects a button in the toolbar. + * @param {String/Number} id Deselect a button by it's id, index or value. + * @return {Boolean} + */ + deselectButton: function(id) { + var button = getButton.call(this, id); + if (button) { + button.get('node').removeClass('yui-button-selected'); + button.get('node').removeClass('yui-button-' + button.get('value') + '-selected'); + button.get('node').removeClass('yui-button-hover'); + button._selected = false; + } else { + return false; + } + }, + /** + * @method deselectAllButtons + * @description Deselects all buttons in the toolbar. + * @return {Boolean} + */ + deselectAllButtons: function() { + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.deselectButton(this._buttonList[i]); + } + }, + /** + * @method disableAllButtons + * @description Disables all buttons in the toolbar. + * @return {Boolean} + */ + disableAllButtons: function() { + if (this.get('disabled')) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.disableButton(this._buttonList[i]); + } + }, + /** + * @method enableAllButtons + * @description Enables all buttons in the toolbar. + * @return {Boolean} + */ + enableAllButtons: function() { + if (this.get('disabled')) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + this.enableButton(this._buttonList[i]); + } + }, + /** + * @method resetAllButtons + * @description Resets all buttons to their initial state. + * @param {Object} _ex Except these buttons + * @return {Boolean} + */ + resetAllButtons: function(_ex) { + if (!Y.Lang.isObject(_ex)) { + _ex = {}; + } + if (this.get('disabled') || !this._buttonList) { + return false; + } + var len = this._buttonList.length; + for (var i = 0; i < len; i++) { + var _button = this._buttonList[i]; + if (_button) { + //var disabled = _button._configs.disabled._initialConfig.value; + var disabled = false; + if (_ex[_button.get('id')]) { + this.enableButton(_button); + this.selectButton(_button); + } else { + if (disabled) { + this.disableButton(_button); + } else { + this.enableButton(_button); + } + this.deselectButton(_button); + } + } + } + }, + /** + * @method destroyButton + * @description Destroy a button in the toolbar. + * @param {String/Number} id Destroy a button by it's id or index. + * @return {Boolean} + */ + destroyButton: function(id) { + var button = getButton.call(this, id); + if (button) { + var thisID = button.get('id'), + new_list = [], i = 0, + len = this._buttonList.length; + + button.destroy(); + + for (i = 0; i < len; i++) { + if (this._buttonList[i].get('id') != thisID) { + new_list[new_list.length]= this._buttonList[i]; + } + } + + this._buttonList = new_list; + } else { + return false; + } + }, + /** + * @method destroy + * @description Destroys the toolbar, all of it's elements and objects. + * @return {Boolean} + */ + destructor: function() { + var len = this._configuredButtons.length, j, i, b; + for(b = 0; b < len; b++) { + this.destroyButton(this._configuredButtons[b]); + } + + this._configuredButtons = null; + + this.get('element').innerHTML = ''; + this.get('element').className = ''; + //Brutal Object Destroy + for (i in this) { + if (Lang.hasOwnProperty(this, i)) { + this[i] = null; + } + } + return true; + }, + /** + * @method collapse + * @description Programatically collapse the toolbar. + * @param {Boolean} collapse True to collapse, false to expand. + */ + collapse: function(collapse) { + var el = this._titlebar.query('span.collapse'); + if (collapse === false) { + this.get('cont').get('parentNode').removeClass('yui-toolbar-container-collapsed'); + if (el) { + el.removeClass('collapsed'); + el.set('title', this.STR_COLLAPSE); + } + this.fire('toolbarExpanded', { type: 'toolbarExpanded' }); + } else { + if (el) { + el.addClass('collapsed'); + el.set('title', this.STR_EXPAND); + } + this.get('cont').get('parentNode').addClass('yui-toolbar-container-collapsed'); + this.fire('toolbarCollapsed', { type: 'toolbarCollapsed' }); + } + }, + /** + * @method toString + * @description Returns a string representing the toolbar. + * @return {String} + */ + toString: function() { + return 'Toolbar'; + } + }); + + Y.namespace('Y.Toolbar'); + Y.Toolbar.Bar = Toolbar; + + var YAHOO = Y.Port(), + Lang = YAHOO.lang, + Dom = YAHOO.util.Dom, + Event = YAHOO.util.Event; + + var SimpleEditor = function(o) { + + var node = Y.get(o.node), + id = node.get('id'); + if (!id) { + id = Y.stamp(node); + node.set('id', id); + } + + var element_cont = Y.Node.create(''); + //Hack + Y.get('body').appendChild(element_cont); + o.element_cont = element_cont; + o.editor_wrapper = element_cont.query('div.wrapper'); + o.toolbar_cont = element_cont.query('div.toolbar_cont'); + //Hack + Y.get('body').removeChild(element_cont); + + if (!o.html) { + o.html = '{TITLE} {CONTENT}'; + } + if (!o.css) { + o.css = this._defaultCSS; + } + //console.log(o); + + + SimpleEditor.superclass.constructor.apply(this, arguments); + }; + + SimpleEditor.NAME = 'simpleeditor'; + + SimpleEditor.ATTRS = { + node: { + setter: function(node) { + var n = Y.get(node); + if (!n) { + Y.error('Invalid Node Given: ' + node); + } else { + n = n.item(0); + } + return n; + } + }, + /** + * @config container + * @description Used when dynamically creating the Editor from Javascript with no default textarea. + * We will create one and place it in this container. If no container is passed we will append to document.body. + * @default false + * @type HTMLElement + */ + 'container': { + writeOnce: true, + value: false + }, + /** + * @private + * @config iframe + * @description Internal config for holding the iframe element. + * @default null + * @type HTMLElement + */ + 'iframe': { + value: null + }, + /** + * @private + * @depreciated - No longer used, should use this.get('element') + * @config textarea + * @description Internal config for holding the textarea element (replaced with element). + * @default null + * @type HTMLElement + */ + 'textarea': { + value: null, + writeOnce: true + }, + /** + * @config element_cont + * @description Internal config for the editors container + * @default false + * @type HTMLElement + */ + 'element_cont': { + value: null + }, + /** + * @private + * @config editor_wrapper + * @description The outter wrapper for the entire editor. + * @default null + * @type HTMLElement + */ + 'editor_wrapper': { + value: null + }, + /** + * @config toolbar_cont + * @description Internal config for the toolbars container + * @default false + * @type Boolean + */ + 'toolbar_cont': { + value: null, + writeOnce: true + }, + /** + * @attribute toolbar + * @description The default toolbar config. + * @type Object + */ + 'toolbar': { + value: null + }, + /** + * @attribute height + * @description The height of the editor iframe container, not including the toolbar.. + * @default Best guessed size of the textarea, for best results use CSS to style the height of the textarea or pass it in as an argument + * @type String + */ + 'height': { + value: null, + setter: function(height) { + if (this._rendered) { + this.get('iframe').get('parentNode').setStyle('height', height); + } + } + }, + /** + * @attribute width + * @description The width of the editor container. + * @default Best guessed size of the textarea, for best results use CSS to style the width of the textarea or pass it in as an argument + * @type String + */ + 'width': { + value: null, + setter: function(width) { + if (this._rendered) { + //We have been rendered, change the width + this.get('element_cont').setStyle('width', width); + } + } + }, + /** + * @attribute blankimage + * @description The URL for the image placeholder to put in when inserting an image. + * @default The yahooapis.com address for the current release + 'assets/blankimage.png' + * @type String + */ + 'blankimage': { + value: null + }, + /** + * @attribute css + * @description The Base CSS used to format the content of the editor + * @default html { + height: 95%; + } + body { + height: 100%; + padding: 7px; background-color: #fff; font:13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; + } + a { + color: blue; + text-decoration: underline; + cursor: pointer; + } + .warning-localfile { + border-bottom: 1px dashed red !important; + } + .yui-busy { + cursor: wait !important; + } + img.selected { //Safari image selection + border: 2px dotted #808080; + } + img { + cursor: pointer !important; + border: none; + } +{TITLE}, {CSS}, {HIDDEN_CSS}, {EXTRA_CSS}and{CONTENT}need to be there, they are passed to YAHOO.lang.substitute to be replace with other strings.+
+onload="document.body._rteLoaded = true;": the onload statement must be there or the editor will not finish loading.++ * @type String + */ + 'html': { + value: null, + writeOnce: true + }, + /** + * @attribute extracss + * @description Extra user defined css to load after the default SimpleEditor CSS + * @default '' + * @type String + */ + 'extracss': { + value: '', + writeOnce: true + }, + /** + * @config setDesignMode + * @description Should the Editor set designMode on the document. Default: true. + * @default true + * @type Boolean + */ + setDesignMode: { + value: true + }, + /** + * @config nodeChangeDelay + * @description Do we wrap the nodeChange method in a timeout for performance. Default: true. + * @default true + * @type Boolean + */ + nodeChangeDelay: { + value: true + }, + /** + * @attribute dompath + * @description Toggle the display of the current Dom path below the editor + * @default false + * @type Boolean + */ + dompath: { + value: false + }, + /** + * @attribute markup + * @description Should we try to adjust the markup for the following types: semantic, css, default or xhtml + * @default "semantic" + * @type String + */ + markup: { + value: 'semantic', + validator: function(markup) { + switch (markup.toLowerCase()) { + case 'semantic': + case 'css': + case 'default': + case 'xhtml': + return true; + } + return false; + } + }, + /** + * @config maxUndo + * @description The max number of undo levels to store. + * @default 30 + * @type Number + */ + maxUndo: { + writeOnce: true, + value: 30 + }, + + /** + * @config ptags + * @description If true, the editor uses <P> tags instead of <br> tags. (Use Shift + Enter to get a <br>) + * @default false + * @type Boolean + */ + ptags: { + writeOnce: true, + value: false + }, + /** + * @config plainText + * @description Process the inital textarea data as if it was plain text. Accounting for spaces, tabs and line feeds. + * @default false + * @type Boolean + */ + plainText: { + writeOnce: true, + value: false + }, + /** + * @private + * @config disabled_iframe + * @description Internal config for holding the iframe element used when disabling the Editor. + * @default null + * @type HTMLElement + */ + disabled_iframe: { + value: null + }, + /** + * @config nodeChangeThreshold + * @description The number of seconds that need to be in between nodeChange processing + * @default 3 + * @type Number + */ + nodeChangeThreshold: { + value: 3, + validator: Y.Lang.isNumber + }, + /** + * @config allowNoEdit + * @description Should the editor check for non-edit fields. It should be noted that this technique is not perfect. If the user does the right things, they will still be able to make changes. + * Such as highlighting an element below and above the content and hitting a toolbar button or a shortcut key. + * @default false + * @type Boolean + */ + allowNoEdit: { + value: false, + validator: Y.Lang.isBoolean + }, + /** + * @config limitCommands + * @description Should the Editor limit the allowed execCommands to the ones available in the toolbar. If true, then execCommand and keyboard shortcuts will fail if they are not defined in the toolbar. + * @default false + * @type Boolean + */ + limitCommands: { + value: false, + validator: Y.Lang.isBoolean + }, + /** + * @attribute removeLineBreaks + * @description Should we remove linebreaks and extra spaces on cleanup + * @default false + * @type Boolean + */ + removeLineBreaks: { + value: false, + validator: Y.Lang.isBoolean + }, + /** + * @config filterWord + * @description Attempt to filter out MS Word HTML from the Editor's output. + * @type Boolean + */ + filterWord: { + value: false, + validator: Y.Lang.isBoolean + }, + /** + * @config insert + * @description If true, selection is not required for: fontname, fontsize, forecolor, backcolor. + * @default false + * @type Boolean + */ + insert: { + value: false + }, + /** + * @config saveEl + * @description When save HTML is called, this element will be updated as well as the source of data. + * @default element + * @type HTMLElement + */ + saveEl: { + value: null, + setter: function(node) { + var n = Y.get(node); + if (!n) { + return false; + } else { + n = n.item(0); + } + return n; + } + }, + /** + * @attribute disabled + * @description This will toggle the editor's disabled state. When the editor is disabled, designMode is turned off and a mask is placed over the iframe so no interaction can take place. + All Toolbar buttons are also disabled so they cannot be used. + * @default false + * @type Boolean + */ + disabled: { + value: false, + setter: function(disabled) { + if (this._rendered) { + this._disableEditor(disabled); + } + } + }, + /** + * @attribute focusAtStart + * @description Should we focus the window when the content is ready? + * @default false + * @type Boolean + */ + focusAtStart: { + value: false, + writeOnce: true + }, + /** + * @attribute handleSubmit + * @description Config handles if the editor will attach itself to the textareas parent form's submit handler. + If it is set to true, the editor will attempt to attach a submit listener to the textareas parent form. + Then it will trigger the editors save handler and place the new content back into the text area before the form is submitted. + * @default false + * @type Boolean + */ + handleSubmit: { + value: false + } + }; + + Y.extend(SimpleEditor, Y.PortBase, { + _handleSubmit: function() { + var exec = this.get('handleSubmit'); + if (this.get('node').get('form')) { + if (!this._formButtons) { + this._formButtons = []; + } + if (exec) { + this.get('node').get('form').on('submit', Y.bind(this._handleFormSubmit, this)); + + var i = this.get('node').get('form').query('input'); + if (i) { + i.each(function(v, k) { + var type = v.get('type'); + if (type && (type.toLowerCase() == 'submit')) { + v.on('click', Y.bind(this._handleFormButtonClick, this)); + this._formButtons.push(v); + } + }, this); + } + } else { + //Event.removeListener(this.get('element').form, 'submit', this._handleFormSubmit); + //if (this._formButtons) { + // Event.removeListener(this._formButtons, 'click', this._handleFormButtonClick); + //} + } + } + }, + _handleInsert: function() { + if (this.get('insert')) { + var buttons = { + fontname: true, + fontsize: true, + forecolor: true, + backcolor: true + }; + var tmp = this._defaultToolbar.buttons; + for (var i = 0; i < tmp.length; i++) { + if (tmp[i].buttons) { + for (var a = 0; a < tmp[i].buttons.length; a++) { + if (tmp[i].buttons[a].value) { + if (buttons[tmp[i].buttons[a].value]) { + delete tmp[i].buttons[a].disabled; + } + } + } + } + } + } + }, + _handleDOMPath: function() { + var dompath = this.get('dompath'); + if (dompath && !this.dompath) { + this.dompath = Y.Node.create(''); + this.get('element_cont').get('firstChild').appendChild(this.dompath); + if (this.get('iframe')) { + this._writeDomPath(); + } + } else if (!dompath && this.dompath) { + this.dompath.get('parentNode').removeChild(this.dompath); + this.dompath = null; + } + }, + /** + * @private + * @property _lastCommand + * @description A cache of the last execCommand (used for Undo/Redo so they don't mark an undo level) + * @type String + */ + _lastCommand: null, + _undoNodeChange: function() {}, + _storeUndo: function() {}, + /** + * @private + * @method _checkKey + * @description Checks a keyMap entry against a key event + * @param {Object} k The _keyMap object + * @param {Event} e The Mouse Event + * @return {Boolean} + */ + _checkKey: function(k, e) { + var ret = false; + if ((e.keyCode === k.key)) { + if (k.mods && (k.mods.length > 0)) { + var val = 0; + for (var i = 0; i < k.mods.length; i++) { + if (this.browser.mac) { + if (k.mods[i] == 'ctrl') { + k.mods[i] = 'meta'; + } + } + if (e[k.mods[i] + 'Key'] === true) { + val++; + } + } + if (val === k.mods.length) { + ret = true; + } + } else { + ret = true; + } + } + //YAHOO.log('Shortcut Key Check: (' + k.key + ') return: ' + ret, 'info', 'SimpleEditor'); + return ret; + }, + /** + * @private + * @property _keyMap + * @description Named key maps for various actions in the Editor. Example:+ <html> + <head> + <title>{TITLE}</title> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <style> + {CSS} + </style> + <style> + {HIDDEN_CSS} + </style> + <style> + {EXTRA_CSS} + </style> + </head> + <body onload="document.body._rteLoaded = true;"> + {CONTENT} + </body> + </html> ++CLOSE_WINDOW: { key: 87, mods: ['shift', 'ctrl'] }. + * This entry shows that when key 87 (W) is found with the modifiers of shift and control, the window will close. You can customize this object to tweak keyboard shortcuts. + * @type {Object/Mixed} + */ + _keyMap: { + SELECT_ALL: { + key: 65, //A key + mods: ['ctrl'] + }, + CLOSE_WINDOW: { + key: 87, //W key + mods: ['shift', 'ctrl'] + }, + FOCUS_TOOLBAR: { + key: 27, + mods: ['shift'] + }, + FOCUS_AFTER: { + key: 27 + }, + FONT_SIZE_UP: { + key: 38, + mods: ['shift', 'ctrl'] + }, + FONT_SIZE_DOWN: { + key: 40, + mods: ['shift', 'ctrl'] + }, + CREATE_LINK: { + key: 76, + mods: ['shift', 'ctrl'] + }, + BOLD: { + key: 66, + mods: ['shift', 'ctrl'] + }, + ITALIC: { + key: 73, + mods: ['shift', 'ctrl'] + }, + UNDERLINE: { + key: 85, + mods: ['shift', 'ctrl'] + }, + UNDO: { + key: 90, + mods: ['ctrl'] + }, + REDO: { + key: 90, + mods: ['shift', 'ctrl'] + }, + JUSTIFY_LEFT: { + key: 219, + mods: ['shift', 'ctrl'] + }, + JUSTIFY_CENTER: { + key: 220, + mods: ['shift', 'ctrl'] + }, + JUSTIFY_RIGHT: { + key: 221, + mods: ['shift', 'ctrl'] + } + }, + /** + * @private + * @method _cleanClassName + * @description Makes a useable classname from dynamic data, by dropping it to lowercase and replacing spaces with -'s. + * @param {String} str The classname to clean up + * @return {String} + */ + _cleanClassName: function(str) { + return str.replace(/ /g, '-').toLowerCase(); + }, + /** + * @property _textarea + * @description Flag to determine if we are using a textarea or an HTML Node. + * @type Boolean + */ + _textarea: null, + /** + * @property _docType + * @description The DOCTYPE to use in the editable container. + * @type String + */ + _docType: '', + /** + * @property editorDirty + * @description This flag will be set when certain things in the Editor happen. It is to be used by the developer to check to see if content has changed. + * @type Boolean + */ + editorDirty: null, + /** + * @property _defaultCSS + * @description The default CSS used in the config for 'css'. This way you can add to the config like this: { css: YAHOO.widget.SimpleEditor.prototype._defaultCSS + 'ADD MYY CSS HERE' } + * @type String + */ + _defaultCSS: 'html { height: 95%; } body { padding: 7px; background-color: #fff; font: 13px/1.22 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small; } a, a:visited, a:hover { color: blue !important; text-decoration: underline !important; cursor: text !important; } .warning-localfile { border-bottom: 1px dashed red !important; } .yui-busy { cursor: wait !important; } img.selected { border: 2px dotted #808080; } img { cursor: pointer !important; border: none; } body.ptags.webkit div.yui-wk-p { margin: 11px 0; } body.ptags.webkit div.yui-wk-div { margin: 0; }', + /** + * @property _defaultToolbar + * @private + * @description Default toolbar config. + * @type Object + */ + _defaultToolbar: null, + /** + * @property _lastButton + * @private + * @description The last button pressed, so we don't disable it. + * @type Object + */ + _lastButton: null, + /** + * @property _baseHREF + * @private + * @description The base location of the editable page (this page) so that relative paths for image work. + * @type String + */ + _baseHREF: function() { + var href = document.location.href; + if (href.indexOf('?') !== -1) { //Remove the query string + href = href.substring(0, href.indexOf('?')); + } + href = href.substring(0, href.lastIndexOf('/')) + '/'; + return href; + }(), + /** + * @property _lastImage + * @private + * @description Safari reference for the last image selected (for styling as selected). + * @type HTMLElement + */ + _lastImage: null, + /** + * @property _blankImageLoaded + * @private + * @description Don't load the blank image more than once.. + * @type Boolean + */ + _blankImageLoaded: null, + /** + * @property _fixNodesTimer + * @private + * @description Holder for the fixNodes timer + * @type Date + */ + _fixNodesTimer: null, + /** + * @property _nodeChangeTimer + * @private + * @description Holds a reference to the nodeChange setTimeout call + * @type Number + */ + _nodeChangeTimer: null, + /** + * @property _nodeChangeDelayTimer + * @private + * @description Holds a reference to the nodeChangeDelay setTimeout call + * @type Number + */ + _nodeChangeDelayTimer: null, + /** + * @property _lastNodeChangeEvent + * @private + * @description Flag to determine the last event that fired a node change + * @type Event + */ + _lastNodeChangeEvent: null, + /** + * @property _lastNodeChange + * @private + * @description Flag to determine when the last node change was fired + * @type Date + */ + _lastNodeChange: 0, + /** + * @property _rendered + * @private + * @description Flag to determine if editor has been rendered or not + * @type Boolean + */ + _rendered: null, + /** + * @property DOMReady + * @private + * @description Flag to determine if DOM is ready or not + * @type Boolean + */ + DOMReady: null, + /** + * @property _selection + * @private + * @description Holder for caching iframe selections + * @type Object + */ + _selection: null, + /** + * @property _mask + * @private + * @description DOM Element holder for the editor Mask when disabled + * @type Object + */ + _mask: null, + /** + * @property _showingHiddenElements + * @private + * @description Status of the hidden elements button + * @type Boolean + */ + _showingHiddenElements: null, + /** + * @property currentWindow + * @description A reference to the currently open EditorWindow + * @type Object + */ + currentWindow: null, + /** + * @property currentEvent + * @description A reference to the current editor event + * @type Event + */ + currentEvent: null, + /** + * @property operaEvent + * @private + * @description setTimeout holder for Opera and Image DoubleClick event.. + * @type Object + */ + operaEvent: null, + /** + * @property currentFont + * @description A reference to the last font selected from the Toolbar + * @type HTMLElement + */ + currentFont: null, + /** + * @property currentElement + * @description A reference to the current working element in the editor + * @type Array + */ + currentElement: null, + /** + * @property dompath + * @description A reference to the dompath container for writing the current working dom path to. + * @type HTMLElement + */ + dompath: null, + /** + * @property beforeElement + * @description A reference to the H2 placed before the editor for Accessibilty. + * @type HTMLElement + */ + beforeElement: null, + /** + * @property afterElement + * @description A reference to the H2 placed after the editor for Accessibilty. + * @type HTMLElement + */ + afterElement: null, + /** + * @property invalidHTML + * @description Contains a list of HTML elements that are invalid inside the editor. They will be removed when they are found. If you set the value of a key to "{ keepContents: true }", then the element will be replaced with a yui-non span to be filtered out when cleanHTML is called. The only tag that is ignored here is the span tag as it will force the Editor into a loop and freeze the browser. However.. all of these tags will be removed in the cleanHTML routine. + * @type Object + */ + invalidHTML: { + form: true, + input: true, + button: true, + select: true, + link: true, + html: true, + body: true, + iframe: true, + script: true, + style: true, + textarea: true + }, + /** + * @property toolbar + * @description Local property containing the YAHOO.widget.Toolbar instance + * @type YAHOO.widget.Toolbar + */ + toolbar: null, + /** + * @private + * @property _contentTimer + * @description setTimeout holder for documentReady check + */ + _contentTimer: null, + /** + * @private + * @property _contentTimerMax + * @description The number of times the loaded content should be checked before giving up. Default: 500 + */ + _contentTimerMax: 500, + /** + * @private + * @property _contentTimerCounter + * @description Counter to check the number of times the body is polled for before giving up + * @type Number + */ + _contentTimerCounter: 0, + /** + * @private + * @property _disabled + * @description The Toolbar items that should be disabled if there is no selection present in the editor. + * @type Array + */ + _disabled: [ 'createlink', 'fontname', 'fontsize', 'forecolor', 'backcolor' ], + /** + * @private + * @property _alwaysDisabled + * @description The Toolbar items that should ALWAYS be disabled event if there is a selection present in the editor. + * @type Object + */ + _alwaysDisabled: { undo: true, redo: true }, + /** + * @private + * @property _alwaysEnabled + * @description The Toolbar items that should ALWAYS be enabled event if there isn't a selection present in the editor. + * @type Object + */ + _alwaysEnabled: { }, + /** + * @private + * @property _semantic + * @description The Toolbar commands that we should attempt to make tags out of instead of using styles. + * @type Object + */ + _semantic: { 'bold': true, 'italic' : true, 'underline' : true }, + /** + * @private + * @property _tag2cmd + * @description A tag map of HTML tags to convert to the different types of commands so we can select the proper toolbar button. + * @type Object + */ + _tag2cmd: { + 'b': 'bold', + 'strong': 'bold', + 'i': 'italic', + 'em': 'italic', + 'u': 'underline', + 'sup': 'superscript', + 'sub': 'subscript', + 'img': 'insertimage', + 'a' : 'createlink', + 'ul' : 'insertunorderedlist', + 'ol' : 'insertorderedlist' + }, + + /** + * @private _createIframe + * @description Creates the DOM and YUI Element for the iFrame editor area. + * @param {String} id The string ID to prefix the iframe with + * @return {Object} iFrame object + */ + _createIframe: function() { + var ifrmDom = document.createElement('iframe'); + ifrmDom.id = this.get('node').get('id') + '_editor'; + var config = { + border: '0', + frameBorder: '0', + marginWidth: '0', + marginHeight: '0', + leftMargin: '0', + topMargin: '0', + allowTransparency: 'true', + width: '100%' + }; + if (this.get('autoHeight')) { + config.scrolling = 'no'; + } + Y.each(config, function(v, k) { + ifrmDom.setAttribute(k, v); + }); + var isrc = 'javascript:;'; + if (this.browser.ie) { + //isrc = 'about:blank'; + //TODO - Check this, I have changed it before.. + isrc = 'javascript:false;'; + } + ifrmDom.setAttribute('src', isrc); + //var ifrm = new YAHOO.util.Element(ifrmDom); + var ifrm = Y.get(ifrmDom); + ifrm.setStyle('visibility', 'hidden'); + return ifrm; + }, + /** + * @private _isElement + * @description Checks to see if an Element reference is a valid one and has a certain tag type + * @param {HTMLElement} el The element to check + * @param {String} tag The tag that the element needs to be + * @return {Boolean} + */ + _isElement: function(el, tag) { + if (el && el.tagName && (el.tagName.toLowerCase() == tag)) { + return true; + } + if (el && el.getAttribute && (el.getAttribute('tag') == tag)) { + return true; + } + return false; + }, + /** + * @private _hasParent + * @description Checks to see if an Element reference or one of it's parents is a valid one and has a certain tag type + * @param {HTMLElement} el The element to check + * @param {String} tag The tag that the element needs to be + * @return HTMLElement + */ + _hasParent: function(el, tag) { + if (!el || !el.parentNode) { + return false; + } + + while (el.parentNode) { + if (this._isElement(el, tag)) { + return el; + } + if (el.parentNode) { + el = el.parentNode; + } else { + return false; + } + } + return false; + }, + /** + * @private + * @method _getDoc + * @description Get the Document of the IFRAME + * @return {Object} + */ + _getDoc: function() { + var value = false; + try { + var f = document.getElementById(this.get('iframe').get('id')); + if (f && f.contentWindow.document) { + value = f.contentWindow.document; + return value; + } + } catch (e) { + return false; + } + }, + /** + * @private + * @method _getWindow + * @description Get the Window of the IFRAME + * @return {Object} + */ + _getWindow: function() { + var f = document.getElementById(this.get('iframe').get('id')); + return f.contentWindow; + }, + /** + * @method focus + * @description Attempt to set the focus of the iframes window. + */ + focus: function() { + this._getWindow().focus(); + }, + /** + * @private + * @depreciated - This should not be used, moved to this.focus(); + * @method _focusWindow + * @description Attempt to set the focus of the iframes window. + */ + _focusWindow: function() { + YAHOO.log('_focusWindow: depreciated in favor of this.focus()', 'warn', 'Editor'); + this.focus(); + }, + /** + * @private + * @method _hasSelection + * @description Determines if there is a selection in the editor document. + * @return {Boolean} + */ + _hasSelection: function() { + var sel = this._getSelection(); + var range = this._getRange(); + var hasSel = false; + + if (!sel || !range) { + return hasSel; + } + + //Internet Explorer + if (this.browser.ie || this.browser.opera) { + if (range.text) { + hasSel = true; + } + if (range.html) { + hasSel = true; + } + } else { + if (this.browser.webkit) { + if (sel+'' !== '') { + hasSel = true; + } + } else { + if (sel && (sel.toString() !== '') && (sel !== undefined)) { + hasSel = true; + } + } + } + return hasSel; + }, + /** + * @private + * @method _getSelection + * @description Handles the different selection objects across the A-Grade list. + * @return {Object} Selection Object + */ + _getSelection: function() { + var _sel = null; + if (this._getDoc() && this._getWindow()) { + if (this._getDoc().selection) { + _sel = this._getDoc().selection; + } else { + _sel = this._getWindow().getSelection(); + } + //Handle Safari's lack of Selection Object + if (this.browser.webkit) { + if (_sel.baseNode) { + this._selection = {}; + this._selection.baseNode = _sel.baseNode; + this._selection.baseOffset = _sel.baseOffset; + this._selection.extentNode = _sel.extentNode; + this._selection.extentOffset = _sel.extentOffset; + } else if (this._selection !== null) { + _sel = this._getWindow().getSelection(); + _sel.setBaseAndExtent( + this._selection.baseNode, + this._selection.baseOffset, + this._selection.extentNode, + this._selection.extentOffset); + this._selection = null; + } + } + } + return _sel; + }, + /** + * @private + * @method _selectNode + * @description Places the highlight around a given node + * @param {HTMLElement} node The node to select + */ + _selectNode: function(node, collapse) { + if (!node) { + return false; + } + var sel = this._getSelection(), + range = null; + + if (this.browser.ie) { + try { //IE freaks out here sometimes.. + range = this._getDoc().body.createTextRange(); + range.moveToElementText(node); + range.select(); + } catch (e) { + YAHOO.log('IE failed to select element: ' + node.tagName, 'warn', 'SimpleEditor'); + } + } else if (this.browser.webkit) { + if (collapse) { + sel.setBaseAndExtent(node, 1, node, node.innerText.length); + } else { + sel.setBaseAndExtent(node, 0, node, node.innerText.length); + } + } else if (this.browser.opera) { + sel = this._getWindow().getSelection(); + range = this._getDoc().createRange(); + range.selectNode(node); + sel.removeAllRanges(); + sel.addRange(range); + } else { + range = this._getDoc().createRange(); + range.selectNodeContents(node); + sel.removeAllRanges(); + sel.addRange(range); + } + //TODO - Check Performance + this.nodeChange(); + }, + /** + * @private + * @method _getRange + * @description Handles the different range objects across the A-Grade list. + * @return {Object} Range Object + */ + _getRange: function() { + var sel = this._getSelection(); + + if (sel === null) { + return null; + } + + if (this.browser.webkit && !sel.getRangeAt) { + var _range = this._getDoc().createRange(); + try { + _range.setStart(sel.anchorNode, sel.anchorOffset); + _range.setEnd(sel.focusNode, sel.focusOffset); + } catch (e) { + _range = this._getWindow().getSelection()+''; + } + return _range; + } + + if (this.browser.ie || this.browser.opera) { + try { + return sel.createRange(); + } catch (e2) { + return null; + } + } + + if (sel.rangeCount > 0) { + return sel.getRangeAt(0); + } + return null; + }, + /** + * @private + * @method _setDesignMode + * @description Sets the designMode property of the iFrame document's body. + * @param {String} state This should be either on or off + */ + _setDesignMode: function(state) { + if (this.get('setDesignMode')) { + try { + this._getDoc().designMode = ((state.toLowerCase() == 'off') ? 'off' : 'on'); + } catch(e) { } + } + }, + /** + * @private + * @method _toggleDesignMode + * @description Toggles the designMode property of the iFrame document on and off. + * @return {String} The state that it was set to. + */ + _toggleDesignMode: function() { + YAHOO.log('It is not recommended to use this method and it will be depreciated.', 'warn', 'SimpleEditor'); + var _dMode = this._getDoc().designMode, + _state = ((_dMode.toLowerCase() == 'on') ? 'off' : 'on'); + this._setDesignMode(_state); + return _state; + }, + /** + * @private + * @property _focused + * @description Holder for trapping focus/blur state and prevent double events + * @type Boolean + */ + _focused: null, + /** + * @private + * @method _handleFocus + * @description Handles the focus of the iframe. Note, this is window focus event, not an Editor focus event. + * @param {Event} e The DOM Event + */ + _handleFocus: function(e) { + if (!this._focused) { + YAHOO.log('Editor Window Focused', 'info', 'SimpleEditor'); + this._focused = true; + this.fireEvent('editorWindowFocus', { type: 'editorWindowFocus', target: this }); + } + }, + /** + * @private + * @method _handleBlur + * @description Handles the blur of the iframe. Note, this is window blur event, not an Editor blur event. + * @param {Event} e The DOM Event + */ + _handleBlur: function(e) { + if (this._focused) { + YAHOO.log('Editor Window Blurred', 'info', 'SimpleEditor'); + this._focused = false; + this.fireEvent('editorWindowBlur', { type: 'editorWindowBlur', target: this }); + } + }, + /** + * @private + * @method _initEditorEvents + * @description This method sets up the listeners on the Editors document. + */ + _initEditorEvents: function() { + //Setup Listeners on iFrame + var doc = this._getDoc(), + win = this._getWindow(); + + Y.Event.nativeAdd(doc, 'mouseup', Y.bind(this._handleMouseUp, this)); + Y.Event.nativeAdd(doc, 'mousedown', Y.bind(this._handleMouseDown, this)); + Y.Event.nativeAdd(doc, 'click', Y.bind(this._handleClick, this)); + Y.Event.nativeAdd(doc, 'dblclick', Y.bind(this._handleDoubleClick, this)); + Y.Event.nativeAdd(doc, 'keypress', Y.bind(this._handleKeyPress, this)); + Y.Event.nativeAdd(doc, 'keyup', Y.bind(this._handleKeyUp, this)); + Y.Event.nativeAdd(doc, 'keydown', Y.bind(this._handleKeyDown, this)); + + //Focus and blur.. + Y.Event.nativeAdd(win, 'focus', Y.bind(this._handleFocus, this)); + Y.Event.nativeAdd(win, 'blur', Y.bind(this._handleBlur, this)); + }, + /** + * @private + * @method _removeEditorEvents + * @description This method removes the listeners on the Editors document (for disabling). + */ + _removeEditorEvents: function() { + //Remove Listeners on iFrame + var doc = this._getDoc(), + win = this._getWindow(); + + Y.Event.nativeRremove(doc, 'mouseup', Y.bind(this._handleMouseUp, this)); + Y.Event.nativeRremove(doc, 'mousedown', Y.bind(this._handleMouseDown, this)); + Y.Event.nativeRremove(doc, 'click', Y.bind(this._handleClick, this)); + Y.Event.nativeRremove(doc, 'dblclick', Y.bind(this._handleDoubleClick, this)); + Y.Event.nativeRremove(doc, 'keypress', Y.bind(this._handleKeyPress, this)); + Y.Event.nativeRremove(doc, 'keyup', Y.bind(this._handleKeyUp, this)); + Y.Event.nativeRremove(doc, 'keydown', Y.bind(this._handleKeyDown, this)); + + //Focus and blur.. + Y.Event.nativeRremove(win, 'focus', Y.bind(this._handleFocus, this)); + Y.Event.nativeRremove(win, 'blur', Y.bind(this._handleBlur, this)); + }, + _fixWebkitDivs: function() { + if (this.browser.webkit) { + var divs = this._getDoc().body.getElementsByTagName('div'); + Dom.addClass(divs, 'yui-wk-div'); + } + }, + /** + * @private + * @method _initEditor + * @param {Boolean} raw Don't add events. + * @description This method is fired from _checkLoaded when the document is ready. It turns on designMode and set's up the listeners. + */ + _initEditor: function(raw) { + if (this._editorInit) { + return; + } + this._editorInit = true; + if (this.browser.ie) { + this._getDoc().body.style.margin = '0'; + } + if (!this.get('disabled')) { + this._setDesignMode('on'); + this._contentTimerCounter = 0; + } + if (!this._getDoc().body) { + YAHOO.log('Body is null, check again', 'error', 'SimpleEditor'); + this._contentTimerCounter = 0; + this._editorInit = false; + this._checkLoaded(); + return false; + } + + YAHOO.log('editorLoaded', 'info', 'SimpleEditor'); + if (!raw) { + this.toolbar.on('buttonClick', Y.bind(this._handleToolbarClick, this)); + } + if (!this.get('disabled')) { + this._initEditorEvents(); + this.toolbar.set('disabled', false); + } + + if (raw) { + this.fire('editorContentReloaded', { type: 'editorreloaded'}); + } else { + this.fire('editorContentLoaded', { type: 'editorLoaded' }); + } + this._fixWebkitDivs(); + if (this.get('dompath')) { + YAHOO.log('Delayed DomPath write', 'info', 'SimpleEditor'); + Y.later(150, this, this._writeDomPath); + } + var br = []; + Y.each(this.browser, function(v, k) { + if (v) { + br.push(k); + } + }, this); + if (this.get('ptags')) { + br.push('ptags'); + } + Y.DOM.addClass(this._getDoc().body, br.join(' ')); + this.nodeChange(true); + }, + /** + * @private + * @method _checkLoaded + * @param {Boolean} raw Don't add events. + * @description Called from a setTimeout loop to check if the iframes body.onload event has fired, then it will init the editor. + */ + _checkLoaded: function(raw) { + this._editorInit = false; + this._contentTimerCounter++; + if (this._contentTimer) { + clearTimeout(this._contentTimer); + } + if (this._contentTimerCounter > this._contentTimerMax) { + YAHOO.log('ERROR: Body Did Not load', 'error', 'SimpleEditor'); + return false; + } + var init = false; + try { + if (this._getDoc() && this._getDoc().body) { + if (this.browser.ie) { + if (this._getDoc().body.readyState == 'complete') { + init = true; + } + } else { + if (this._getDoc().body._rteLoaded === true) { + init = true; + } + } + } + } catch (e) { + init = false; + YAHOO.log('checking body (e)' + e, 'error', 'SimpleEditor'); + } + + if (init === true) { + //The onload event has fired, clean up after ourselves and fire the _initEditor method + YAHOO.log('Firing _initEditor', 'info', 'SimpleEditor'); + this._initEditor(raw); + } else { + var self = this; + this._contentTimer = setTimeout(function() { + self._checkLoaded.call(self, raw); + }, 20); + } + }, + /** + * @private + * @method _setInitialContent + * @param {Boolean} raw Don't add events. + * @description This method will open the iframes content document and write the textareas value into it, then start the body.onload checking. + */ + _setInitialContent: function(raw) { + YAHOO.log('Populating editor body with contents of the text area', 'info', 'SimpleEditor'); + + var value = ((this._textarea) ? this.get('node').get('value') : this.get('node').get('innerHTML')), + doc = null; + + if (value === '') { + value = '
'; + } + + var html = Y.Lang.substitute(this.get('html'), { + TITLE: this.STR_TITLE, + CONTENT: this._cleanIncomingHTML(value), + CSS: this.get('css'), + HIDDEN_CSS: ((this.get('hiddencss')) ? this.get('hiddencss') : '/* No Hidden CSS */'), + EXTRA_CSS: ((this.get('extracss')) ? this.get('extracss') : '/* No Extra CSS */') + }), + check = true; + + html = html.replace(/RIGHT_BRACKET/gi, '{'); + html = html.replace(/LEFT_BRACKET/gi, '}'); + + if (document.compatMode != 'BackCompat') { + YAHOO.log('Adding Doctype to editable area', 'info', 'SimpleEditor'); + html = this._docType + "\n" + html; + } else { + YAHOO.log('DocType skipped because we are in BackCompat Mode.', 'warn', 'SimpleEditor'); + } + + if (this.browser.ie || this.browser.webkit || this.browser.opera || (navigator.userAgent.indexOf('Firefox/1.5') != -1)) { + //Firefox 1.5 doesn't like setting designMode on an document created with a data url + try { + //Adobe AIR Code + if (this.browser.air) { + doc = this._getDoc().implementation.createHTMLDocument(); + var origDoc = this._getDoc(); + origDoc.open(); + origDoc.close(); + doc.open(); + doc.write(html); + doc.close(); + var node = origDoc.importNode(doc.getElementsByTagName("html")[0], true); + origDoc.replaceChild(node, origDoc.getElementsByTagName("html")[0]); + origDoc.body._rteLoaded = true; + } else { + doc = this._getDoc(); + doc.open(); + doc.write(html); + doc.close(); + } + } catch (e) { + YAHOO.log('Setting doc failed.. (_setInitialContent)', 'error', 'SimpleEditor'); + //Safari will only be here if we are hidden + check = false; + } + } else { + //This keeps Firefox 2 from writing the iframe to history preserving the back buttons functionality + this.get('iframe').set('src', 'data:text/html;charset=utf-8,' + encodeURIComponent(html)); + } + this.get('iframe').setStyle('visibility', ''); + if (check) { + this._checkLoaded(raw); + } + }, + /** + * @private + * @method _setMarkupType + * @param {String} action The action to take. Possible values are: css, default or semantic + * @description This method will turn on/off the useCSS execCommand. + */ + _setMarkupType: function(action) { + switch (this.get('markup')) { + case 'css': + this._setEditorStyle(true); + break; + case 'default': + this._setEditorStyle(false); + break; + case 'semantic': + case 'xhtml': + if (this._semantic[action]) { + this._setEditorStyle(false); + } else { + this._setEditorStyle(true); + } + break; + } + }, + /** + * Set the editor to use CSS instead of HTML + * @param {Booleen} stat True/False + */ + _setEditorStyle: function(stat) { + try { + this._getDoc().execCommand('useCSS', false, !stat); + } catch (ex) { + } + }, + /** + * @private + * @method _getSelectedElement + * @description This method will attempt to locate the element that was last interacted with, either via selection, location or event. + * @return {HTMLElement} The currently selected element. + */ + _getSelectedElement: function() { + var doc = this._getDoc(), + range = null, + sel = null, + elm = null, + check = true; + + if (this.browser.ie) { + this.currentEvent = this._getWindow().event; //Event utility assumes window.event, so we need to reset it to this._getWindow().event; + range = this._getRange(); + if (range) { + elm = range.item ? range.item(0) : range.parentElement(); + if (this._hasSelection()) { + //TODO + //WTF.. Why can't I get an element reference here?!??! + } + if (elm === doc.body) { + elm = null; + } + } + if ((this.currentEvent !== null) && (this.currentEvent.keyCode === 0)) { + elm = Event.getTarget(this.currentEvent); + } + } else { + sel = this._getSelection(); + range = this._getRange(); + + if (!sel || !range) { + return null; + } + //TODO + if (!this._hasSelection() && this.browser.webkit3) { + //check = false; + } + if (this.browser.gecko) { + //Added in 2.6.0 + if (range.startContainer) { + if (range.startContainer.nodeType === 3) { + elm = range.startContainer.parentNode; + } else if (range.startContainer.nodeType === 1) { + elm = range.startContainer; + } + //Added in 2.7.0 + if (this.currentEvent) { + var tar = Event.getTarget(this.currentEvent); + if (!this._isElement(tar, 'html')) { + if (elm !== tar) { + elm = tar; + } + } + } + } + } + + if (check) { + if (sel.anchorNode && (sel.anchorNode.nodeType == 3)) { + if (sel.anchorNode.parentNode) { //next check parentNode + elm = sel.anchorNode.parentNode; + } + if (sel.anchorNode.nextSibling != sel.focusNode.nextSibling) { + elm = sel.anchorNode.nextSibling; + } + } + if (this._isElement(elm, 'br')) { + elm = null; + } + if (!elm) { + elm = range.commonAncestorContainer; + if (!range.collapsed) { + if (range.startContainer == range.endContainer) { + if (range.startOffset - range.endOffset < 2) { + if (range.startContainer.hasChildNodes()) { + elm = range.startContainer.childNodes[range.startOffset]; + } + } + } + } + } + } + } + + if (this.currentEvent !== null) { + try { + switch (this.currentEvent.type) { + case 'click': + case 'mousedown': + case 'mouseup': + if (this.browser.webkit) { + elm = Event.getTarget(this.currentEvent); + } + break; + default: + //Do nothing + break; + } + } catch (e) { + YAHOO.log('Firefox 1.5 errors here: ' + e, 'error', 'SimpleEditor'); + } + } else if ((this.currentElement && this.currentElement[0]) && (!this.browser.ie)) { + //TODO is this still needed? + //elm = this.currentElement[0]; + } + + + if (this.browser.opera || this.browser.webkit) { + if (this.currentEvent && !elm) { + elm = Event.getTarget(this.currentEvent); + } + } + if (!elm || !elm.tagName) { + elm = doc.body; + } + if (this._isElement(elm, 'html')) { + //Safari sometimes gives us the HTML node back.. + elm = doc.body; + } + if (this._isElement(elm, 'body')) { + //make sure that body means this body not the parent.. + elm = doc.body; + } + if (elm && !elm.parentNode) { //Not in document + elm = doc.body; + } + if (elm === undefined) { + elm = null; + } + return elm; + }, + /** + * @private + * @method _getSelectedNode + * @description Calls _getSelectedElement and passes it through Y.get to get a Node reference. + * @return {Y.Node} The currently selected element. + */ + _getSelectedNode: function() { + return Y.get(this._getSelectedElement()); + }, + /** + * @private + * @method _getDomPath + * @description This method will attempt to build the DOM path from the currently selected element. + * @param HTMLElement el The element to start with, if not provided _getSelectedElement is used + * @return {Array} An array of node references that will create the DOM Path. + */ + _getDomPath: function(el) { + if (!el) { + el = this._getSelectedElement(); + } + var domPath = []; + while (el !== null) { + if (el.ownerDocument != this._getDoc()) { + el = null; + break; + } + //Check to see if we get el.nodeName and nodeType + if (el.nodeName && el.nodeType && (el.nodeType == 1)) { + domPath[domPath.length] = el; + } + + if (this._isElement(el, 'body')) { + break; + } + + el = el.parentNode; + } + if (domPath.length === 0) { + if (this._getDoc() && this._getDoc().body) { + domPath[0] = this._getDoc().body; + } + } + return domPath.reverse(); + }, + /** + * @private + * @method _writeDomPath + * @description Write the current DOM path out to the dompath container below the editor. + */ + _writeDomPath: function() { + var path = this._getDomPath(), + pathArr = [], + classPath = '', + pathStr = ''; + + for (var i = 0; i < path.length; i++) { + var tag = path[i].tagName.toLowerCase(); + if ((tag == 'ol') && (path[i].type)) { + tag += ':' + path[i].type; + } + if (Dom.hasClass(path[i], 'yui-tag')) { + tag = path[i].getAttribute('tag'); + } + if ((this.get('markup') == 'semantic') || (this.get('markup') == 'xhtml')) { + switch (tag) { + case 'b': tag = 'strong'; break; + case 'i': tag = 'em'; break; + } + } + if (!Dom.hasClass(path[i], 'yui-non')) { + if (Dom.hasClass(path[i], 'yui-tag')) { + pathStr = tag; + } else { + classPath = ((path[i].className !== '') ? '.' + path[i].className.replace(/ /g, '.') : ''); + if ((classPath.indexOf('yui') != -1) || (classPath.toLowerCase().indexOf('apple-style-span') != -1)) { + classPath = ''; + } + pathStr = tag + ((path[i].id) ? '#' + path[i].id : '') + classPath; + } + switch (tag) { + case 'body': + pathStr = 'body'; + break; + case 'a': + if (path[i].getAttribute('href', 2)) { + pathStr += ':' + path[i].getAttribute('href', 2).replace('mailto:', '').replace('http:/'+'/', '').replace('https:/'+'/', ''); //May need to add others here ftp + } + break; + case 'img': + var h = path[i].height; + var w = path[i].width; + if (path[i].style.height) { + h = parseInt(path[i].style.height, 10); + } + if (path[i].style.width) { + w = parseInt(path[i].style.width, 10); + } + pathStr += '(' + w + 'x' + h + ')'; + break; + } + + if (pathStr.length > 10) { + pathStr = '' + pathStr.substring(0, 10) + '...' + ''; + } else { + pathStr = '' + pathStr + ''; + } + pathArr[pathArr.length] = pathStr; + } + } + var str = pathArr.join(' ' + this.SEP_DOMPATH + ' '); + //Prevent flickering + if (this.dompath.get('innerHTML') != str) { + this.dompath.set('innerHTML', str); + } + }, + /** + * @private + * @method _fixNodes + * @description Fix href and imgs as well as remove invalid HTML. + */ + _fixNodes: function() { + try { + var doc = this._getDoc(), + els = []; + + Y.each(this.invalidHTML, function(v, k) { + if (k.toLowerCase() != 'span') { + var tags = doc.body.getElementsByTagName(k); + if (tags.length) { + for (var i = 0; i < tags.length; i++) { + els.push(tags[i]); + } + } + } + }); + for (var h = 0; h < els.length; h++) { + if (els[h].parentNode) { + if (Lang.isObject(this.invalidHTML[els[h].tagName.toLowerCase()]) && this.invalidHTML[els[h].tagName.toLowerCase()].keepContents) { + this._swapEl(els[h], 'span', function(el) { + el.className = 'yui-non'; + }); + } else { + els[h].parentNode.removeChild(els[h]); + } + } + } + var imgs = this._getDoc().getElementsByTagName('img'); + Dom.addClass(imgs, 'yui-img'); + } catch(e) {} + }, + /** + * @private + * @method _isNonEditable + * @param Event ev The Dom event being checked + * @description Method is called at the beginning of all event handlers to check if this element or a parent element has the class yui-noedit (this.CLASS_NOEDIT) applied. + * If it does, then this method will stop the event and return true. The event handlers will then return false and stop the nodeChange from occuring. This method will also + * disable and enable the Editor's toolbar based on the noedit state. + * @return Boolean + */ + _isNonEditable: function(ev) { + if (this.get('allowNoEdit')) { + var el = Event.getTarget(ev); + if (this._isElement(el, 'html')) { + el = null; + } + var path = this._getDomPath(el); + for (var i = (path.length - 1); i > -1; i--) { + if (Dom.hasClass(path[i], this.CLASS_NOEDIT)) { + //if (this.toolbar.get('disabled') === false) { + // this.toolbar.set('disabled', true); + //} + try { + this._getDoc().execCommand('enableObjectResizing', false, 'false'); + } catch (e) {} + this.nodeChange(); + Event.stopEvent(ev); + YAHOO.log('CLASS_NOEDIT found in DOM Path, stopping event', 'info', 'SimpleEditor'); + return true; + } + } + //if (this.toolbar.get('disabled') === true) { + //Should only happen once.. + //this.toolbar.set('disabled', false); + try { + this._getDoc().execCommand('enableObjectResizing', false, 'true'); + } catch (e2) {} + //} + } + return false; + }, + /** + * @private + * @method _setCurrentEvent + * @param {Event} ev The event to cache + * @description Sets the current event property + */ + _setCurrentEvent: function(ev) { + this.currentEvent = ev; + }, + /** + * @private + * @method _handleClick + * @param {Event} ev The event we are working on. + * @description Handles all click events inside the iFrame document. + */ + _handleClick: function(ev) { + var ret = this.fireEvent('beforeEditorClick', { type: 'beforeEditorClick', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.currentWindow) { + this.closeWindow(); + } + if (this.currentWindow) { + this.closeWindow(); + } + if (this.browser.webkit) { + var tar =Event.getTarget(ev); + if (this._isElement(tar, 'a') || this._isElement(tar.parentNode, 'a')) { + Event.stopEvent(ev); + this.nodeChange(); + } + } else { + this.nodeChange(); + } + this.fireEvent('editorClick', { type: 'editorClick', target: this, ev: ev }); + }, + /** + * @private + * @method _handleMouseUp + * @param {Event} ev The event we are working on. + * @description Handles all mouseup events inside the iFrame document. + */ + _handleMouseUp: function(ev) { + var ret = this.fireEvent('beforeEditorMouseUp', { type: 'beforeEditorMouseUp', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + //Don't set current event for mouseup. + //It get's fired after a menu is closed and gives up a bogus event to work with + //this._setCurrentEvent(ev); + var self = this; + if (this.browser.opera) { + /* + * @knownissue Opera appears to stop the MouseDown, Click and DoubleClick events on an image inside of a document with designMode on.. + * @browser Opera + * @description This work around traps the MouseUp event and sets a timer to check if another MouseUp event fires in so many seconds. If another event is fired, they we internally fire the DoubleClick event. + */ + var sel = Event.getTarget(ev); + if (this._isElement(sel, 'img')) { + this.nodeChange(); + if (this.operaEvent) { + clearTimeout(this.operaEvent); + this.operaEvent = null; + this._handleDoubleClick(ev); + } else { + this.operaEvent = window.setTimeout(function() { + self.operaEvent = false; + }, 700); + } + } + } + //This will stop Safari from selecting the entire document if you select all the text in the editor + if (this.browser.webkit || this.browser.opera) { + if (this.browser.webkit) { + Event.stopEvent(ev); + } + } + this.nodeChange(); + this.fireEvent('editorMouseUp', { type: 'editorMouseUp', target: this, ev: ev }); + }, + /** + * @private + * @method _handleMouseDown + * @param {Event} ev The event we are working on. + * @description Handles all mousedown events inside the iFrame document. + */ + _handleMouseDown: function(ev) { + var ret = this.fireEvent('beforeEditorMouseDown', { type: 'beforeEditorMouseDown', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + var sel = Event.getTarget(ev); + if (this.browser.webkit && this._hasSelection()) { + var _sel = this._getSelection(); + if (!this.browser.webkit3) { + _sel.collapse(true); + } else { + _sel.collapseToStart(); + } + } + if (this.browser.webkit && this._lastImage) { + Dom.removeClass(this._lastImage, 'selected'); + this._lastImage = null; + } + if (this._isElement(sel, 'img') || this._isElement(sel, 'a')) { + if (this.browser.webkit) { + Event.stopEvent(ev); + if (this._isElement(sel, 'img')) { + Dom.addClass(sel, 'selected'); + this._lastImage = sel; + } + } + if (this.currentWindow) { + this.closeWindow(); + } + this.nodeChange(); + } + this.fireEvent('editorMouseDown', { type: 'editorMouseDown', target: this, ev: ev }); + }, + /** + * @private + * @method _handleDoubleClick + * @param {Event} ev The event we are working on. + * @description Handles all doubleclick events inside the iFrame document. + */ + _handleDoubleClick: function(ev) { + var ret = this.fireEvent('beforeEditorDoubleClick', { type: 'beforeEditorDoubleClick', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + var sel = Event.getTarget(ev); + if (this._isElement(sel, 'img')) { + this.currentElement[0] = sel; + this.toolbar.fireEvent('insertimageClick', { type: 'insertimageClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + } else if (this._hasParent(sel, 'a')) { //Handle elements inside an a + this.currentElement[0] = this._hasParent(sel, 'a'); + this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + } + this.nodeChange(); + this.fireEvent('editorDoubleClick', { type: 'editorDoubleClick', target: this, ev: ev }); + }, + /** + * @private + * @method _handleKeyUp + * @param {Event} ev The event we are working on. + * @description Handles all keyup events inside the iFrame document. + */ + _handleKeyUp: function(ev) { + var ret = this.fireEvent('beforeEditorKeyUp', { type: 'beforeEditorKeyUp', target: this, ev: ev }); + if (ret === false) { + return false; + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + switch (ev.keyCode) { + case this._keyMap.SELECT_ALL.key: + if (this._checkKey(this._keyMap.SELECT_ALL, ev)) { + this.nodeChange(); + } + break; + case 32: //Space Bar + case 35: //End + case 36: //Home + case 37: //Left Arrow + case 38: //Up Arrow + case 39: //Right Arrow + case 40: //Down Arrow + case 46: //Forward Delete + case 8: //Delete + case this._keyMap.CLOSE_WINDOW.key: //W key if window is open + if ((ev.keyCode == this._keyMap.CLOSE_WINDOW.key) && this.currentWindow) { + if (this._checkKey(this._keyMap.CLOSE_WINDOW, ev)) { + this.closeWindow(); + } + } else { + if (!this.browser.ie) { + if (this._nodeChangeTimer) { + clearTimeout(this._nodeChangeTimer); + } + var self = this; + this._nodeChangeTimer = setTimeout(function() { + self._nodeChangeTimer = null; + self.nodeChange.call(self); + }, 100); + } else { + this.nodeChange(); + } + this.editorDirty = true; + } + break; + } + this.fireEvent('editorKeyUp', { type: 'editorKeyUp', target: this, ev: ev }); + this._storeUndo(); + }, + /** + * @private + * @method _handleKeyPress + * @param {Event} ev The event we are working on. + * @description Handles all keypress events inside the iFrame document. + */ + _handleKeyPress: function(ev) { + var ret = this.fireEvent('beforeEditorKeyPress', { type: 'beforeEditorKeyPress', target: this, ev: ev }); + if (ret === false) { + return false; + } + + if (this.get('allowNoEdit')) { + //if (ev && ev.keyCode && ((ev.keyCode == 46) || ev.keyCode == 63272)) { + if (ev && ev.keyCode && (ev.keyCode == 63272)) { + //Forward delete key + YAHOO.log('allowNoEdit is set, forward delete key has been disabled', 'warn', 'SimpleEditor'); + Event.stopEvent(ev); + } + } + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.browser.opera) { + if (ev.keyCode === 13) { + var tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + this.execCommand('inserthtml', '
'); + Event.stopEvent(ev); + } + } + } + if (this.browser.webkit) { + if (!this.browser.webkit3) { + if (ev.keyCode && (ev.keyCode == 122) && (ev.metaKey)) { + //This is CMD + z (for undo) + if (this._hasParent(this._getSelectedElement(), 'li')) { + YAHOO.log('We are in an LI and we found CMD + z, stopping the event', 'warn', 'SimpleEditor'); + Event.stopEvent(ev); + } + } + } + this._listFix(ev); + } + this._fixListDupIds(); + this.fireEvent('editorKeyPress', { type: 'editorKeyPress', target: this, ev: ev }); + }, + /** + * @private + * @method _handleKeyDown + * @param {Event} ev The event we are working on. + * @description Handles all keydown events inside the iFrame document. + */ + _handleKeyDown: function(ev) { + var ret = this.fireEvent('beforeEditorKeyDown', { type: 'beforeEditorKeyDown', target: this, ev: ev }); + if (ret === false) { + return false; + } + var tar = null, _range = null; + if (this._isNonEditable(ev)) { + return false; + } + this._setCurrentEvent(ev); + if (this.currentWindow) { + this.closeWindow(); + } + if (this.currentWindow) { + this.closeWindow(); + } + var doExec = false, + action = null, + value = null, + exec = false; + + //YAHOO.log('keyCode: ' + ev.keyCode, 'info', 'SimpleEditor'); + + switch (ev.keyCode) { + case this._keyMap.FOCUS_TOOLBAR.key: + if (this._checkKey(this._keyMap.FOCUS_TOOLBAR, ev)) { + var h = this.toolbar.getElementsByTagName('h2')[0]; + if (h && h.firstChild) { + h.firstChild.focus(); + } + } else if (this._checkKey(this._keyMap.FOCUS_AFTER, ev)) { + //Focus After Element - Esc + this.afterElement.focus(); + } + Event.stopEvent(ev); + doExec = false; + break; + //case 76: //L + case this._keyMap.CREATE_LINK.key: //L + if (this._hasSelection()) { + if (this._checkKey(this._keyMap.CREATE_LINK, ev)) { + var makeLink = true; + if (this.get('limitCommands')) { + if (!this.toolbar.getButtonByValue('createlink')) { + YAHOO.log('Toolbar Button for (createlink) was not found, skipping exec.', 'info', 'SimpleEditor'); + makeLink = false; + } + } + if (makeLink) { + this.execCommand('createlink', ''); + this.toolbar.fireEvent('createlinkClick', { type: 'createlinkClick', target: this.toolbar }); + this.fireEvent('afterExecCommand', { type: 'afterExecCommand', target: this }); + doExec = false; + } + } + } + break; + //case 90: //Z + case this._keyMap.UNDO.key: + case this._keyMap.REDO.key: + if (this._checkKey(this._keyMap.REDO, ev)) { + action = 'redo'; + doExec = true; + } else if (this._checkKey(this._keyMap.UNDO, ev)) { + action = 'undo'; + doExec = true; + } + break; + //case 66: //B + case this._keyMap.BOLD.key: + if (this._checkKey(this._keyMap.BOLD, ev)) { + action = 'bold'; + doExec = true; + } + break; + case this._keyMap.FONT_SIZE_UP.key: + case this._keyMap.FONT_SIZE_DOWN.key: + var uk = false, dk = false; + if (this._checkKey(this._keyMap.FONT_SIZE_UP, ev)) { + uk = true; + } + if (this._checkKey(this._keyMap.FONT_SIZE_DOWN, ev)) { + dk = true; + } + if (uk || dk) { + var fs_button = this.toolbar.getButtonByValue('fontsize'), + label = parseInt(fs_button.get('label'), 10), + newValue = (label + 1); + + if (dk) { + newValue = (label - 1); + } + + action = 'fontsize'; + value = newValue + 'px'; + doExec = true; + } + break; + //case 73: //I + case this._keyMap.ITALIC.key: + if (this._checkKey(this._keyMap.ITALIC, ev)) { + action = 'italic'; + doExec = true; + } + break; + //case 85: //U + case this._keyMap.UNDERLINE.key: + if (this._checkKey(this._keyMap.UNDERLINE, ev)) { + action = 'underline'; + doExec = true; + } + break; + case 9: + if (this.browser.ie) { + //Insert a tab in Internet Explorer + _range = this._getRange(); + tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + if (_range) { + _range.pasteHTML(' '); + _range.collapse(false); + _range.select(); + } + Event.stopEvent(ev); + } + } + //Firefox 3 code + if (this.browser.gecko > 1.8) { + tar = this._getSelectedElement(); + if (this._isElement(tar, 'li')) { + if (ev.shiftKey) { + this._getDoc().execCommand('outdent', null, ''); + } else { + this._getDoc().execCommand('indent', null, ''); + } + + } else if (!this._hasSelection()) { + this.execCommand('inserthtml', ' '); + } + Event.stopEvent(ev); + } + break; + case 13: + var p = null, i = 0; + if (this.get('ptags') && !ev.shiftKey) { + if (this.browser.gecko) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + if (this._hasParent(tar, 'p')) { + p = this._getDoc().createElement('p'); + p.innerHTML = ' '; + Dom.insertAfter(p, tar); + this._selectNode(p.firstChild); + } else if (this._isElement(tar, 'body')) { + this.execCommand('insertparagraph', null); + var ps = this._getDoc().body.getElementsByTagName('p'); + for (i = 0; i < ps.length; i++) { + if (ps[i].getAttribute('_moz_dirty') !== null) { + p = this._getDoc().createElement('p'); + p.innerHTML = ' '; + Dom.insertAfter(p, ps[i]); + this._selectNode(p.firstChild); + ps[i].removeAttribute('_moz_dirty'); + } + } + } else { + YAHOO.log('Something went wrong with paragraphs, please file a bug!!', 'error', 'SimpleEditor'); + doExec = true; + action = 'insertparagraph'; + } + Event.stopEvent(ev); + } + } + if (this.browser.webkit) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + this.execCommand('insertparagraph', null); + var divs = this._getDoc().body.getElementsByTagName('div'); + for (i = 0; i < divs.length; i++) { + if (!Dom.hasClass(divs[i], 'yui-wk-div')) { + Dom.addClass(divs[i], 'yui-wk-p'); + } + } + Event.stopEvent(ev); + } + } + } else { + if (this.browser.webkit) { + tar = this._getSelectedElement(); + if (!this._hasParent(tar, 'li')) { + if (this.browser.webkit4) { + this.execCommand('insertlinebreak'); + } else { + this.execCommand('inserthtml', ''); + var holder = this._getDoc().getElementById('yui-br'), + br = this._getDoc().createElement('br'), + caret = this._getDoc().createElement('span'); + + holder.parentNode.replaceChild(br, holder); + caret.className = 'yui-non'; + caret.innerHTML = ' '; + Dom.insertAfter(caret, br); + this._selectNode(caret); + } + Event.stopEvent(ev); + } + } + if (this.browser.ie) { + YAHOO.log('Stopping P tags', 'info', 'SimpleEditor'); + //Insert a
instead of a in Internet Explorer + _range = this._getRange(); + tar = this._getSelectedElement(); + if (!this._isElement(tar, 'li')) { + if (_range) { + _range.pasteHTML('
'); + _range.collapse(false); + _range.select(); + } + Event.stopEvent(ev); + } + } + } + break; + } + if (this.browser.ie) { + this._listFix(ev); + } + if (doExec && action) { + this.execCommand(action, value); + Event.stopEvent(ev); + this.nodeChange(); + } + this.fireEvent('editorKeyDown', { type: 'editorKeyDown', target: this, ev: ev }); + }, + /** + * @private + * @property _fixListRunning + * @type Boolean + * @description Keeps more than one _fixListDupIds from running at the same time. + */ + _fixListRunning: null, + /** + * @private + * @method _fixListDupIds + * @description Some browsers will duplicate the id of an LI when created in designMode. + * This method will fix the duplicate id issue. However it will only preserve the first element + * in the document list with the unique id. + */ + _fixListDupIds: function() { + if (this._fixListRunning) { + return false; + } + if (this._getDoc()) { + this._fixListRunning = true; + var lis = this._getDoc().body.getElementsByTagName('li'), + i = 0, ids = {}; + for (i = 0; i < lis.length; i++) { + if (lis[i].id) { + if (ids[lis[i].id]) { + lis[i].id = ''; + } + ids[lis[i].id] = true; + } + } + this._fixListRunning = false; + } + }, + /** + * @private + * @method _listFix + * @param {Event} ev The event we are working on. + * @description Handles the Enter key, Tab Key and Shift + Tab keys for List Items. + */ + _listFix: function(ev) { + //YAHOO.log('Lists Fix (' + ev.keyCode + ')', 'info', 'SimpleEditor'); + var testLi = null, par = null, preContent = false, range = null; + //Enter Key + if (this.browser.webkit) { + if (ev.keyCode && (ev.keyCode == 13)) { + if (this._hasParent(this._getSelectedElement(), 'li')) { + var tar = this._hasParent(this._getSelectedElement(), 'li'); + if (tar.previousSibling) { + if (tar.firstChild && (tar.firstChild.length == 1)) { + this._selectNode(tar); + } + } + } + } + } + //Shift + Tab Key + if (ev.keyCode && ((!this.browser.webkit3 && (ev.keyCode == 25)) || ((this.browser.webkit3 || !this.browser.webkit) && ((ev.keyCode == 9) && ev.shiftKey)))) { + testLi = this._getSelectedElement(); + if (this._hasParent(testLi, 'li')) { + testLi = this._hasParent(testLi, 'li'); + YAHOO.log('We have a SHIFT tab in an LI, reverse it..', 'info', 'SimpleEditor'); + if (this._hasParent(testLi, 'ul') || this._hasParent(testLi, 'ol')) { + YAHOO.log('We have a double parent, move up a level', 'info', 'SimpleEditor'); + par = this._hasParent(testLi, 'ul'); + if (!par) { + par = this._hasParent(testLi, 'ol'); + } + //YAHOO.log(par.previousSibling + ' :: ' + par.previousSibling.innerHTML); + if (this._isElement(par.previousSibling, 'li')) { + par.removeChild(testLi); + par.parentNode.insertBefore(testLi, par.nextSibling); + if (this.browser.ie) { + range = this._getDoc().body.createTextRange(); + range.moveToElementText(testLi); + range.collapse(false); + range.select(); + } + if (this.browser.webkit) { + this._selectNode(testLi.firstChild); + } + Event.stopEvent(ev); + } + } + } + } + //Tab Key + if (ev.keyCode && ((ev.keyCode == 9) && (!ev.shiftKey))) { + YAHOO.log('List Fix - Tab', 'info', 'SimpleEditor'); + var preLi = this._getSelectedElement(); + if (this._hasParent(preLi, 'li')) { + preContent = this._hasParent(preLi, 'li').innerHTML; + } + //YAHOO.log('preLI: ' + preLi.tagName + ' :: ' + preLi.innerHTML); + if (this.browser.webkit) { + this._getDoc().execCommand('inserttext', false, '\t'); + } + testLi = this._getSelectedElement(); + if (this._hasParent(testLi, 'li')) { + YAHOO.log('We have a tab in an LI', 'info', 'SimpleEditor'); + par = this._hasParent(testLi, 'li'); + YAHOO.log('parLI: ' + par.tagName + ' :: ' + par.innerHTML); + var newUl = this._getDoc().createElement(par.parentNode.tagName.toLowerCase()); + if (this.browser.webkit) { + var span = Dom.getElementsByClassName('Apple-tab-span', 'span', par); + //Remove the span element that Safari puts in + if (span[0]) { + par.removeChild(span[0]); + par.innerHTML = Lang.trim(par.innerHTML); + //Put the HTML from the LI into this new LI + if (preContent) { + par.innerHTML = '' + preContent + ' '; + } else { + par.innerHTML = ' '; + } + } + } else { + if (preContent) { + par.innerHTML = preContent + ' '; + } else { + par.innerHTML = ' '; + } + } + + par.parentNode.replaceChild(newUl, par); + newUl.appendChild(par); + if (this.browser.webkit) { + this._getSelection().setBaseAndExtent(par.firstChild, 1, par.firstChild, par.firstChild.innerText.length); + if (!this.browser.webkit3) { + par.parentNode.parentNode.style.display = 'list-item'; + setTimeout(function() { + par.parentNode.parentNode.style.display = 'block'; + }, 1); + } + } else if (this.browser.ie) { + range = this._getDoc().body.createTextRange(); + range.moveToElementText(par); + range.collapse(false); + range.select(); + } else { + this._selectNode(par); + } + Event.stopEvent(ev); + } + if (this.browser.webkit) { + Event.stopEvent(ev); + } + this.nodeChange(); + } + }, + /** + * @method nodeChange + * @param {Boolean} force Optional paramenter to skip the threshold counter + * @description Handles setting up the toolbar buttons, getting the Dom path, fixing nodes. + */ + nodeChange: function(force) { + var NCself = this; + this._storeUndo(); + if (this.get('nodeChangeDelay')) { + this._nodeChangeDelayTimer = window.setTimeout(function() { + NCself._nodeChangeDelayTimer = null; + NCself._nodeChange.apply(NCself, arguments); + }, 0); + } else { + this._nodeChange(); + } + }, + /** + * @private + * @method _nodeChange + * @param {Boolean} force Optional paramenter to skip the threshold counter + * @description Fired from nodeChange in a setTimeout. + */ + _nodeChange: function(force) { + var threshold = parseInt(this.get('nodeChangeThreshold'), 10), + thisNodeChange = Math.round(new Date().getTime() / 1000), + self = this; + + if (force === true) { + this._lastNodeChange = 0; + } + + if ((this._lastNodeChange + threshold) < thisNodeChange) { + if (this._fixNodesTimer === null) { + this._fixNodesTimer = window.setTimeout(function() { + self._fixNodes.call(self); + self._fixNodesTimer = null; + }, 0); + } + } + this._lastNodeChange = thisNodeChange; + if (this.currentEvent) { + try { + this._lastNodeChangeEvent = this.currentEvent.type; + } catch (e) {} + } + + var beforeNodeChange = this.fire('beforeNodeChange', { type: 'beforeNodeChange' }); + if (beforeNodeChange === false) { + return false; + } + if (this.get('dompath')) { + Y.later(0, this, this._writeDomPath); + } + //Check to see if we are disabled before continuing + if (!this.get('disabled')) { + if (this.STOP_NODE_CHANGE) { + //Reset this var for next action + this.STOP_NODE_CHANGE = false; + return false; + } else { + var sel = this._getSelection(), + range = this._getRange(), + el = this._getSelectedElement(), + fn_button = this.toolbar.getButtonByValue('fontname'), + fs_button = this.toolbar.getButtonByValue('fontsize'), + undo_button = this.toolbar.getButtonByValue('undo'), + redo_button = this.toolbar.getButtonByValue('redo'); + + //Handle updating the toolbar with active buttons + var _ex = {}; + if (this._lastButton) { + _ex[this._lastButton.id] = true; + //this._lastButton = null; + } + if (!this._isElement(el, 'body')) { + if (fn_button) { + _ex[fn_button.get('id')] = true; + } + if (fs_button) { + _ex[fs_button.get('id')] = true; + } + } + if (redo_button) { + delete _ex[redo_button.get('id')]; + } + this.toolbar.resetAllButtons(_ex); + + //Handle disabled buttons + for (var d = 0; d < this._disabled.length; d++) { + var _button = this.toolbar.getButtonByValue(this._disabled[d]); + if (_button && _button.get) { + if (this._lastButton && (_button.get('id') === this._lastButton.id)) { + //Skip + } else { + if (!this._hasSelection() && !this.get('insert')) { + switch (this._disabled[d]) { + case 'fontname': + case 'fontsize': + break; + default: + //No Selection - disable + this.toolbar.disableButton(_button); + } + } else { + if (!this._alwaysDisabled[this._disabled[d]]) { + this.toolbar.enableButton(_button); + } + } + if (!this._alwaysEnabled[this._disabled[d]]) { + this.toolbar.deselectButton(_button); + } + } + } + } + var path = this._getDomPath(); + var tag = null, cmd = null; + for (var i = 0; i < path.length; i++) { + tag = path[i].tagName.toLowerCase(); + if (path[i].getAttribute('tag')) { + tag = path[i].getAttribute('tag').toLowerCase(); + } + cmd = this._tag2cmd[tag]; + if (cmd === undefined) { + cmd = []; + } + if (!Lang.isArray(cmd)) { + cmd = [cmd]; + } + + //Bold and Italic styles + if (path[i].style.fontWeight.toLowerCase() == 'bold') { + cmd[cmd.length] = 'bold'; + } + if (path[i].style.fontStyle.toLowerCase() == 'italic') { + cmd[cmd.length] = 'italic'; + } + if (path[i].style.textDecoration.toLowerCase() == 'underline') { + cmd[cmd.length] = 'underline'; + } + if (path[i].style.textDecoration.toLowerCase() == 'line-through') { + cmd[cmd.length] = 'strikethrough'; + } + if (cmd.length > 0) { + for (var j = 0; j < cmd.length; j++) { + this.toolbar.selectButton(cmd[j]); + this.toolbar.enableButton(cmd[j]); + } + } + //Handle Alignment + switch (path[i].style.textAlign.toLowerCase()) { + case 'left': + case 'right': + case 'center': + case 'justify': + var alignType = path[i].style.textAlign.toLowerCase(); + if (path[i].style.textAlign.toLowerCase() == 'justify') { + alignType = 'full'; + } + this.toolbar.selectButton('justify' + alignType); + this.toolbar.enableButton('justify' + alignType); + break; + } + } + //After for loop + + //Reset Font Family and Size to the inital configs + if (fn_button) { + var family = fn_button._conf.data.initValue.label; + fn_button.set('label', ''); + this._updateMenuChecked('fontname', family); + } + + if (fs_button) { + fs_button.set('label', fs_button._conf.data.initValue.label); + } + + var hd_button = this.toolbar.getButtonByValue('heading'); + if (hd_button) { + hd_button.set('label', hd_button._conf.data.initValue.label); + this._updateMenuChecked('heading', 'none'); + } + var img_button = this.toolbar.getButtonByValue('insertimage'); + if (img_button && this.currentWindow && (this.currentWindow.name == 'insertimage')) { + this.toolbar.disableButton(img_button); + } + if (this._lastButton && this._lastButton.isSelected) { + this.toolbar.deselectButton(this._lastButton.id); + } + this._undoNodeChange(); + } + } + + this.fire('afterNodeChange', { type: 'afterNodeChange' }); + }, + /** + * @private + * @method _updateMenuChecked + * @param {Object} button The command identifier of the button you want to check + * @param {String} value The value of the menu item you want to check + * @param {YAHOO.widget.Toolbar} The Toolbar instance the button belongs to (defaults to this.toolbar) + * @description Gets the menu from a button instance, if the menu is not rendered it will render it. It will then search the menu for the specified value, unchecking all other items and checking the specified on. + */ + _updateMenuChecked: function(button, value, tbar) { + if (!tbar) { + tbar = this.toolbar; + } + var _button = tbar.getButtonByValue(button); + _button.checkValue(value); + }, + /** + * @private + * @method _handleToolbarClick + * @param {Event} ev The event that triggered the button click + * @description This is an event handler attached to the Toolbar's buttonClick event. It will fire execCommand with the command identifier from the Toolbar Button. + */ + _handleToolbarClick: function(ev) { + var value = ''; + var str = ''; + var cmd = ev.button.value; + if (ev.button.menucmd) { + value = cmd; + cmd = ev.button.menucmd; + } + this._lastButton = ev.button; + if (this.STOP_EXEC_COMMAND) { + YAHOO.log('execCommand skipped because we found the STOP_EXEC_COMMAND flag set to true', 'warn', 'SimpleEditor'); + YAHOO.log('NOEXEC::execCommand::(' + cmd + '), (' + value + ')', 'warn', 'SimpleEditor'); + this.STOP_EXEC_COMMAND = false; + return false; + } else { + this.execCommand(cmd, value); + if (!this.browser.webkit) { + var Fself = this; + setTimeout(function() { + Fself.focus.call(Fself); + }, 5); + } + } + Event.stopEvent(ev); + }, + /** + * @private + * @method _setupAfterElement + * @description Creates the accessibility h2 header and places it after the iframe in the Dom for navigation. + */ + _setupAfterElement: function() { + if (!this.beforeElement) { + this.beforeElement = Y.Node.create(''); + this.beforeElement.set('innerHTML', this.STR_BEFORE_EDITOR); + this.get('element_cont').query('.first-child').insertBefore(this.beforeElement, this.toolbar.get('node').get('nextSibling')); + } + if (!this.afterElement) { + this.afterElement = Y.Node.create('' + this.STR_LEAVE_EDITOR + '
'); + this.get('element_cont').get('firstChild').appendChild(this.afterElement); + } + }, + /** + * @private + * @method _disableEditor + * @param {Boolean} disabled Pass true to disable, false to enable + * @description Creates a mask to place over the Editor. + */ + _disableEditor: function(disabled) { + var iframe, par, html, height; + if (!this.get('disabled_iframe') && disabled) { + iframe = this._createIframe(); + iframe.set('id', 'disabled_' + this.get('iframe').get('id')); + iframe.setStyle('height', '100%'); + iframe.setStyle('display', 'none'); + iframe.setStyle('visibility', 'visible'); + this.set('disabled_iframe', iframe); + par = this.get('iframe').get('parentNode'); + par.appendChild(iframe); + } + if (!iframe) { + iframe = this.get('disabled_iframe'); + } + if (disabled) { + this._orgIframe = this.get('iframe'); + + if (this.toolbar) { + this.toolbar.set('disabled', true); + } + + html = this.getEditorHTML(); + height = this.get('iframe').get('offsetHeight'); + iframe.setStyle('visibility', ''); + iframe.setStyle('position', ''); + iframe.setStyle('top', ''); + iframe.setStyle('left', ''); + this._orgIframe.setStyle('visibility', 'hidden'); + this._orgIframe.setStyle('position', 'absolute'); + this._orgIframe.setStyle('top', '-99999px'); + this._orgIframe.setStyle('left', '-99999px'); + this.set('iframe', iframe); + this._setInitialContent(true); + + if (!this._mask) { + this._mask = Y.Node.create(''); + if (this.browser.ie) { + this._mask.setStyle('height', height + 'px'); + } + this.get('iframe').get('parentNode').appendChild(this._mask); + } + this.on('editorContentReloaded', function() { + this._getDoc().body._rteLoaded = false; + this.setEditorHTML(html); + iframe.setStyle('display', 'block'); + }); + } else { + if (this._mask) { + this._mask.get('parentNode').removeChild(this._mask); + this._mask = null; + if (this.toolbar) { + this.toolbar.set('disabled', false); + } + iframe.setStyle('visibility', 'hidden'); + iframe.setStyle('position', 'absolute'); + iframe.setStyle('top', '-99999px'); + iframe.setStyle('left', '-99999px'); + this._orgIframe.setStyle('visibility', ''); + this._orgIframe.setStyle('position', ''); + this._orgIframe.setStyle('top', ''); + this._orgIframe.setStyle('left', ''); + this.set('iframe', this._orgIframe); + + this.focus(); + Y.later(100, this, this.nodeChange); + } + } + }, + /** + * @property SEP_DOMPATH + * @description The value to place in between the Dom path items + * @type String + */ + SEP_DOMPATH: '<', + /** + * @property STR_LEAVE_EDITOR + * @description The accessibility string for the element after the iFrame + * @type String + */ + STR_LEAVE_EDITOR: 'You have left the Rich Text Editor.', + /** + * @property STR_BEFORE_EDITOR + * @description The accessibility string for the element before the iFrame + * @type String + */ + STR_BEFORE_EDITOR: 'This text field can contain stylized text and graphics. To cycle through all formatting options, use the keyboard shortcut Shift + Escape to place focus on the toolbar and navigate between options with your arrow keys. To exit this text editor use the Escape key and continue tabbing.Common formatting keyboard shortcuts:
- Control Shift B sets text to bold
- Control Shift I sets text to italic
- Control Shift U underlines text
- Control Shift L adds an HTML link
' + lis[li].innerHTML + ''; + } + list.innerHTML = str; + this.currentElement[0] = el; + this.currentElement[0].parentNode.replaceChild(list, this.currentElement[0]); + } else { + YAHOO.log('Create list item', 'info', 'SimpleEditor'); + this._createCurrentElement(tag.toLowerCase()); + list = this._getDoc().createElement(tag); + for (li = 0; li < this.currentElement.length; li++) { + var newli = this._getDoc().createElement('li'); + newli.innerHTML = this.currentElement[li].innerHTML + ' '; + list.appendChild(newli); + if (li > 0) { + this.currentElement[li].parentNode.removeChild(this.currentElement[li]); + } + } + + var items = list.firstChild.innerHTML.split('
'); + if (items.length > 0) { + list.innerHTML = ''; + for (var i = 0; i < items.length; i++) { + var item = this._getDoc().createElement('li'); + item.innerHTML = items[i]; + list.appendChild(item); + } + } + + this.currentElement[0].parentNode.replaceChild(list, this.currentElement[0]); + this.currentElement[0] = list; + var _h = this.currentElement[0].firstChild; + _h = Dom.getElementsByClassName('yui-non', 'span', _h)[0]; + this._getSelection().setBaseAndExtent(_h, 1, _h, _h.innerText.length); + } + exec = false; + } else { + el = this._getSelectedElement(); + YAHOO.log(el.tagName); + if (this._isElement(el, 'li') && this._isElement(el.parentNode, tag) || (this.browser.ie && this._isElement(this._getRange().parentElement, 'li')) || (this.browser.ie && this._isElement(el, 'ul')) || (this.browser.ie && this._isElement(el, 'ol'))) { //we are in a list.. + YAHOO.log('We already have a list, undo it', 'info', 'SimpleEditor'); + if (this.browser.ie) { + if ((this.browser.ie && this._isElement(el, 'ul')) || (this.browser.ie && this._isElement(el, 'ol'))) { + el = el.getElementsByTagName('li')[0]; + } + YAHOO.log('Undo IE', 'info', 'SimpleEditor'); + str = ''; + var lis2 = el.parentNode.getElementsByTagName('li'); + for (var j = 0; j < lis2.length; j++) { + str += lis2[j].innerHTML + '
'; + } + var newEl = this._getDoc().createElement('span'); + newEl.innerHTML = str; + el.parentNode.parentNode.replaceChild(newEl, el.parentNode); + } else { + this.nodeChange(); + this._getDoc().execCommand(action, '', el.parentNode); + this.nodeChange(); + } + exec = false; + } + if (this.browser.opera) { + var self = this; + window.setTimeout(function() { + var liso = self._getDoc().getElementsByTagName('li'); + for (var i = 0; i < liso.length; i++) { + if (liso[i].innerHTML.toLowerCase() == '
') { + liso[i].parentNode.parentNode.removeChild(liso[i].parentNode); + } + } + },30); + } + if (this.browser.ie && exec) { + var html = ''; + if (this._getRange().html) { + html = ' - ' + this._getRange().html+ ' '; + } else { + var t = this._getRange().text.split('\n'); + if (t.length > 1) { + html = ''; + for (var ie = 0; ie < t.length; ie++) { + html += '
- ' + t[ie] + ' '; + } + } else { + var txt = this._getRange().text; + if (txt === '') { + html = '
- ' + txt + ' '; + } else { + html = '
- ' + txt + ' '; + } + } + } + this._getRange().pasteHTML('<' + tag + '>' + html + ''); + var new_item = this._getDoc().getElementById('new_list_item'); + if (new_item) { + var range = this._getDoc().body.createTextRange(); + range.moveToElementText(new_item); + range.collapse(false); + range.select(); + new_item.id = ''; + } + exec = false; + } + } + return exec; + }, + /** + * @method cmd_insertorderedlist + * @param value Value passed from the execCommand method + * @description This is an execCommand override method. It is called from execCommand when the execCommand('insertorderedlist ') is used. + */ + cmd_insertorderedlist: function(value) { + return [this.cmd_list('ol')]; + }, + /** + * @method cmd_insertunorderedlist + * @param value Value passed from the execCommand method + * @description This is an execCommand override method. It is called from execCommand when the execCommand('insertunorderedlist') is used. + */ + cmd_insertunorderedlist: function(value) { + return [this.cmd_list('ul')]; + }, + /** + * @method cmd_fontname + * @param value Value passed from the execCommand method + * @description This is an execCommand override method. It is called from execCommand when the execCommand('fontname') is used. + */ + cmd_fontname: function(value) { + var exec = true, + selEl = this._getSelectedElement(); + + this.currentFont = value; + if (selEl && selEl.tagName && !this._hasSelection() && !this._isElement(selEl, 'body') && !this.get('insert')) { + Dom.setStyle(selEl, 'fontFamily', value); + exec = false; + } else if (this.get('insert') && !this._hasSelection()) { + YAHOO.log('No selection and no selected element and we are in insert mode', 'info', 'SimpleEditor'); + var el = this._createInsertElement({ fontFamily: value }); + exec = false; + } + return [exec]; + }, + /** + * @method cmd_fontsize + * @param value Value passed from the execCommand method + * @description This is an execCommand override method. It is called from execCommand when the execCommand('fontsize') is used. + */ + cmd_fontsize: function(value) { + var el = null, go = true; + el = this._getSelectedElement(); + if (this.browser.webkit) { + if (this.currentElement[0]) { + if (el == this.currentElement[0]) { + go = false; + Dom.setStyle(el, 'fontSize', value); + this._selectNode(el); + this.currentElement[0] = el; + } + } + } + if (go) { + if (!this._isElement(this._getSelectedElement(), 'body') && (!this._hasSelection())) { + el = this._getSelectedElement(); + Dom.setStyle(el, 'fontSize', value); + if (this.get('insert') && this.browser.ie) { + var r = this._getRange(); + r.collapse(false); + r.select(); + } else { + this._selectNode(el); + } + } else if (this.currentElement && (this.currentElement.length > 0) && (!this._hasSelection()) && (!this.get('insert'))) { + Dom.setStyle(this.currentElement, 'fontSize', value); + } else { + if (this.get('insert') && !this._hasSelection()) { + el = this._createInsertElement({ fontSize: value }); + this.currentElement[0] = el; + this._selectNode(this.currentElement[0]); + } else { + this._createCurrentElement('span', {'fontSize': value, fontFamily: el.style.fontFamily, color: el.style.color, backgroundColor: el.style.backgroundColor }); + this._selectNode(this.currentElement[0]); + } + } + } + return [false]; + }, + /* }}} */ + /** + * @private + * @method _swapEl + * @param {HTMLElement} el The element to swap with + * @param {String} tagName The tagname of the element that you wish to create + * @param {Function} callback (optional) A function to run on the element after it is created, but before it is replaced. An element reference is passed to this function. + * @description This function will create a new element in the DOM and populate it with the contents of another element. Then it will assume it's place. + */ + _swapEl: function(el, tagName, callback) { + var _el = this._getDoc().createElement(tagName); + if (el) { + _el.innerHTML = el.innerHTML; + } + if (typeof callback == 'function') { + callback.call(this, _el); + } + if (el) { + el.parentNode.replaceChild(_el, el); + } + return _el; + }, + /** + * @private + * @method _createInsertElement + * @description Creates a new "currentElement" then adds some text (and other things) to make it selectable and stylable. Then the user can continue typing. + * @param {Object} css (optional) Object literal containing styles to apply to the new element. + * @return {HTMLElement} + */ + _createInsertElement: function(css) { + this._createCurrentElement('span', css); + var el = this.currentElement[0]; + if (this.browser.webkit) { + //Little Safari Hackery here.. + el.innerHTML = ' '; + el = el.firstChild; + this._getSelection().setBaseAndExtent(el, 1, el, el.innerText.length); + } else if (this.browser.ie || this.browser.opera) { + el.innerHTML = ' '; + } + this.focus(); + this._selectNode(el, true); + return el; + }, + /** + * @private + * @method _createCurrentElement + * @param {String} tagName (optional defaults to a) The tagname of the element that you wish to create + * @param {Object} tagStyle (optional) Object literal containing styles to apply to the new element. + * @description This is a work around for the various browser issues with execCommand. This method will run
- /gi, '/li>');
+ html = this.filter_safari(html);
+
+ html = this.filter_internals(html);
+
+ html = this.filter_all_rgb(html);
+
+ //Replace our backups with the real thing
+ html = this.post_filter_linebreaks(html, markup);
+
+ if (markup == 'xhtml') {
+ html = html.replace(/
'); + html = html.replace(/
'); + html = html.replace(/
- ..
- ..
');
+
+ html = html.replace(/<\/li> - ');
+ html = html.replace(/<\/ol>/gi, '
');
+ html = html.replace(/<\/ol><\/li>\n/gi, "- ');
+ html = html.replace(/<\/ul>/gi, '
');
+ html = html.replace(/<\/ul><\/li>\n?/gi, "- <\/li>/gi, ''); + html = html.replace(/
- <\/li>/gi, ''); + html = html.replace(/
- <\/li>/gi, '');
+ //Remove bogus DIV's - updated from just removing the div's to replacing /div with a break
+ if (this.get('ptags')) {
+ html = html.replace(/
- '+str+' '; + return myStr; + } + + + //create the constructor, chain the parent + function Timepicker(config){ + Timepicker.superclass.constructor.apply(this, arguments); + } + + Timepicker[NAME] = 'timepicker'; + + Timepicker.ATTRS = { + + time:{ + value:{ + hour:0, + minute:0, + ampm:AM + } + }, + + delay:{ + value:15 + }, + + strings: { + value: { + am : "AM", + pm : "PM", + seperator : ':' + } + } + }; + + + //build class names + Timepicker[HOUR_CLASS] = getClassName(Timepicker[NAME], HOUR_CLASS); + Timepicker[MINUTE_CLASS] = getClassName(Timepicker[NAME], MINUTE_CLASS); + Timepicker[AMPM_CLASS] = getClassName(Timepicker[NAME], AMPM_CLASS); + Timepicker[HOUR_CLASS] = getClassName(Timepicker[NAME], HOUR_CLASS, ROW); + Timepicker[MINUTE_CLASS] = getClassName(Timepicker[NAME], MINUTE_CLASS, ROW); + Timepicker[CELL_CLASS] = getClassName(Timepicker[NAME], CELL_CLASS); + Timepicker[ACTIVE_CLASS] = getClassName(Timepicker[NAME], ACTIVE_CLASS); + + + + Y.extend(Timepicker, Y.Widget, { + + + /* static vars */ + + AM:AM, + + PM:PM, + + /* the "model", actually a cache of dom refrences to find + elements quickly later */ + _model : {ampm:{},hour:{},minute:{}}, + + /* allow a short delay before highlight */ + _timer: null, + + + + initializer:function(){ + this.set('time.ampm', AM); + var hour = this.get('time.hour'); + this.set('time.hour', ((hour === 0) ? 12 : hour)); + + }, + + destructor: function(){ + // nuke the model, which is storing references to dom objects + + delete(this._model.ampm); + delete(this._model.hour); + delete(this._model.minute); + + }, + + /** + * This method syncs the value of time object, + * including building the strings for 12hr and 24hr + * also fires a 'timeset' event + * @method _syncTime + * @protected + * + */ + _syncTime:function(){ + + /** + * Fires when a new time has been set (after the time strings) + * have been built. Use this event rather than timeChange. + * @event timeset + * @param {Object} the time attribute object with the following attributes + *
- hour + *
- The 12 hour hour + *
- minute + *
- The minutes + *
- s12hour + *
- A string representing the 12 hour time, with a seperator and an am/pm indicator as defined in strings + *
- s24hour + *
- A string representing the 24 hour time, with the seperator defined in strings + *
- '+W+" ";return X;}function B(U){B.superclass.constructor.apply(this,arguments);}B[F]="timepicker";B.ATTRS={time:{value:{hour:0,minute:0,ampm:L}},delay:{value:15},strings:{value:{am:"AM",pm:"PM",seperator:":"}}};B[E]=J(B[F],E);B[Q]=J(B[F],Q);B[R]=J(B[F],R);B[E]=J(B[F],E,K);B[Q]=J(B[F],Q,K);B[G]=J(B[F],G);B[D]=J(B[F],D);A.extend(B,A.Widget,{AM:L,PM:N,_model:{ampm:{},hour:{},minute:{}},_timer:null,initializer:function(){this.set("time.ampm",L);var U=this.get("time.hour");this.set("time.hour",((U===0)?12:U));},destructor:function(){delete (this._model.ampm);delete (this._model.hour);delete (this._model.minute);},_syncTime:function(){var Y=this.get("time"),V=Y.ampm,W=this.get("strings.seperator"),Z=S(Y.minute),X=(V==L)?this.get(I):this.get(O);this.set("time.s12hour",((Y.hour===0)?12:Y.hour)+W+Z+X);var U=(V==N)?parseInt(Y.hour,10)+12:parseInt(Y.hour,10);if(U==24||U===0){U=Math.abs(U-12);}if(U==12&&V==L){U=0;}this.set("time.s24hour",U+W+Z);this.fire("timeset",this.get("time"));},_handleClick:function(U){if(U.target.test("."+B[G])){this.fire("cellclick",this.get("time"));}},_handleOver:function(W){var V=W.target,U=this.get(P);if(this._timer){this._timer.cancel();this._timer=null;}this._timer=A.later(U,this,this._highlight,V);},_highlight:function(U){if(U.test("."+B[G])){var V=U.get("innerHTML");if(U.hasClass(B[E])){this.set("time.hour",V);}else{if(U.hasClass(B[R])){var W=this.get(I);if(V==W){this.set("time.ampm",L);}else{this.set("time.ampm",N);}}else{this.set("time.minute",V);}}}this._syncTime();this.syncUI();},_handleOut:function(U){if(this._timer){this._timer.cancel();this._timer=null;}},renderUI:function(){var V=this.get("contentBox"),U=this._model;function Z(){return V.create("
- '+str+' '; + return myStr; + } + + + //create the constructor, chain the parent + function Timepicker(config){ + Timepicker.superclass.constructor.apply(this, arguments); + } + + Timepicker[NAME] = 'timepicker'; + + Timepicker.ATTRS = { + + time:{ + value:{ + hour:0, + minute:0, + ampm:AM + } + }, + + delay:{ + value:15 + }, + + strings: { + value: { + am : "AM", + pm : "PM", + seperator : ':' + } + } + }; + + + //build class names + Timepicker[HOUR_CLASS] = getClassName(Timepicker[NAME], HOUR_CLASS); + Timepicker[MINUTE_CLASS] = getClassName(Timepicker[NAME], MINUTE_CLASS); + Timepicker[AMPM_CLASS] = getClassName(Timepicker[NAME], AMPM_CLASS); + Timepicker[HOUR_CLASS] = getClassName(Timepicker[NAME], HOUR_CLASS, ROW); + Timepicker[MINUTE_CLASS] = getClassName(Timepicker[NAME], MINUTE_CLASS, ROW); + Timepicker[CELL_CLASS] = getClassName(Timepicker[NAME], CELL_CLASS); + Timepicker[ACTIVE_CLASS] = getClassName(Timepicker[NAME], ACTIVE_CLASS); + + + + Y.extend(Timepicker, Y.Widget, { + + + /* static vars */ + + AM:AM, + + PM:PM, + + /* the "model", actually a cache of dom refrences to find + elements quickly later */ + _model : {ampm:{},hour:{},minute:{}}, + + /* allow a short delay before highlight */ + _timer: null, + + + + initializer:function(){ + this.set('time.ampm', AM); + var hour = this.get('time.hour'); + this.set('time.hour', ((hour === 0) ? 12 : hour)); + + }, + + destructor: function(){ + // nuke the model, which is storing references to dom objects + + delete(this._model.ampm); + delete(this._model.hour); + delete(this._model.minute); + + }, + + /** + * This method syncs the value of time object, + * including building the strings for 12hr and 24hr + * also fires a 'timeset' event + * @method _syncTime + * @protected + * + */ + _syncTime:function(){ + + /** + * Fires when a new time has been set (after the time strings) + * have been built. Use this event rather than timeChange. + * @event timeset + * @param {Object} the time attribute object with the following attributes + *
- hour + *
- The 12 hour hour + *
- minute + *
- The minutes + *
- s12hour + *
- A string representing the 12 hour time, with a seperator and an am/pm indicator as defined in strings + *
- s24hour + *
- A string representing the 24 hour time, with the seperator defined in strings + *
- type: can be one of the following:
-
+ *
- A shortname for a node type (
'text','menu','html')
+ * - The name of a Node class under YAHOO.widget (
'TextNode', 'MenuNode', 'DateNode', etc)
+ * - a reference to an actual class:
YAHOO.widget.DateNode
+ *
+ * - A shortname for a node type (
- children: an array containing further node definitions
- plain text: a regular TextNode + *
- anchor <A>: a TextNode with its
hrefandtargettaken from the anchor
+ * - anything else: an HTMLNode
- 0 - not highlighted + *
- 1 - highlighted + *
- 2 - some children highlighted + * + * @property highlightState + * @type integer + * @default 0 + */ + + highlightState: 0, + + /** + * Tells whether highlighting will be propagated up to the parents of the clicked node + * @property propagateHighlightUp + * @type boolean + * @default false + */ + + propagateHighlightUp: false, + + /** + * Tells whether highlighting will be propagated down to the children of the clicked node + * @property propagateHighlightDown + * @type boolean + * @default false + */ + + propagateHighlightDown: false, + + /** + * User-defined className to be added to the Node + * @property className + * @type string + * @default null + */ + + className: null, + + /** + * The node type + * @property _type + * @private + * @type string + * @default "Node" +*/ + _type: "Node", + + /* + spacerPath: "http://l.yimg.com/a/i/space.gif", + expandedText: "Expanded", + collapsedText: "Collapsed", + loadingText: "Loading", + */ + + /** + * Initializes this node, gets some of the properties from the parent + * @method init + * @param oData {object} a string or object containing the data that will + * be used to render this node + * @param oParent {Node} this node's parent node + * @param expanded {boolean} the initial expanded/collapsed state + */ + _nodeinit: function(oData, oParent, expanded) { + + YAHOO.widget.Node.superclass.constructor.call(this); + + this.data = {}; + this.children = []; + this.index = YAHOO.widget.TreeView.nodeCount; + ++YAHOO.widget.TreeView.nodeCount; + this.contentElId = "ygtvcontentel" + this.index; + + if (Lang.isObject(oData)) { + for (var property in oData) { + if (oData.hasOwnProperty(property)) { + if (property.charAt(0) != '_' && !Lang.isUndefined(this[property]) && !Lang.isFunction(this[property]) ) { + this[property] = oData[property]; + } else { + this.data[property] = oData[property]; + } + } + } + } + if (!Lang.isUndefined(expanded) ) { this.expanded = expanded; } + + /** + * The parentChange event is fired when a parent element is applied + * to the node. This is useful if you need to apply tree-level + * properties to a tree that need to happen if a node is moved from + * one tree to another. + * + * @event parentChange + * @type CustomEvent + */ + this.publish("parentChange"); + + // oParent should never be null except when we create the root node. + if (oParent) { + oParent.appendChild(this); + } + }, + + /** + * Certain properties for the node cannot be set until the parent + * is known. This is called after the node is inserted into a tree. + * the parent is also applied to this node's children in order to + * make it possible to move a branch from one tree to another. + * @method applyParent + * @param {Node} parentNode this node's parent node + * @return {boolean} true if the application was successful + */ + applyParent: function(parentNode) { + if (!parentNode) { + return false; + } + + this.tree = parentNode.tree; + this.parent = parentNode; + this.depth = parentNode.depth + 1; + + // @todo why was this put here. This causes new nodes added at the + // root level to lose the menu behavior. + // if (! this.multiExpand) { + // this.multiExpand = parentNode.multiExpand; + // } + + this.tree.regNode(this); + parentNode.childrenRendered = false; + + // cascade update existing children + for (var i=0, len=this.children.length;i
- active {boolean}, whether there is an active cell editor + *
- whoHasIt {YAHOO.widget.TreeView} TreeView instance that is currently using the editor + *
- nodeType {string} value of static Node._type property, allows reuse of input element if node is of the same type. + *
- editorPanel {HTMLelement (<div>)} element holding the in-line editor + *
- inputContainer {HTMLelement (<div>)} element which will hold the type-specific input element(s) to be filled by the fillEditorContainer method + *
- buttonsContainer {HTMLelement (<div>)} element which holds the <button> elements for Ok/Cancel. If you don't want any of the buttons, hide it via CSS styles, don't destroy it + *
- node {YAHOO.widget.Node} reference to the Node being edited + *
- saveOnEnter {boolean}, whether the Enter key should be accepted as a Save command (Esc. is always taken as Cancel), disable for multi-line input elements + *
- oldValue {any} value before editing + *
- type: can be one of the following:
-
+ *
- A shortname for a node type (
'text','menu','html')
+ * - The name of a Node class under YAHOO.widget (
'TextNode', 'MenuNode', 'DateNode', etc)
+ * - a reference to an actual class:
YAHOO.widget.DateNode
+ *
+ * - A shortname for a node type (
- children: an array containing further node definitions
- plain text: a regular TextNode + *
- anchor <A>: a TextNode with its
hrefandtargettaken from the anchor
+ * - anything else: an HTMLNode
- 0 - not highlighted + *
- 1 - highlighted + *
- 2 - some children highlighted + * + * @property highlightState + * @type integer + * @default 0 + */ + + highlightState: 0, + + /** + * Tells whether highlighting will be propagated up to the parents of the clicked node + * @property propagateHighlightUp + * @type boolean + * @default false + */ + + propagateHighlightUp: false, + + /** + * Tells whether highlighting will be propagated down to the children of the clicked node + * @property propagateHighlightDown + * @type boolean + * @default false + */ + + propagateHighlightDown: false, + + /** + * User-defined className to be added to the Node + * @property className + * @type string + * @default null + */ + + className: null, + + /** + * The node type + * @property _type + * @private + * @type string + * @default "Node" +*/ + _type: "Node", + + /* + spacerPath: "http://l.yimg.com/a/i/space.gif", + expandedText: "Expanded", + collapsedText: "Collapsed", + loadingText: "Loading", + */ + + /** + * Initializes this node, gets some of the properties from the parent + * @method init + * @param oData {object} a string or object containing the data that will + * be used to render this node + * @param oParent {Node} this node's parent node + * @param expanded {boolean} the initial expanded/collapsed state + */ + _nodeinit: function(oData, oParent, expanded) { + + YAHOO.widget.Node.superclass.constructor.call(this); + + this.data = {}; + this.children = []; + this.index = YAHOO.widget.TreeView.nodeCount; + ++YAHOO.widget.TreeView.nodeCount; + this.contentElId = "ygtvcontentel" + this.index; + + if (Lang.isObject(oData)) { + for (var property in oData) { + if (oData.hasOwnProperty(property)) { + if (property.charAt(0) != '_' && !Lang.isUndefined(this[property]) && !Lang.isFunction(this[property]) ) { + this[property] = oData[property]; + } else { + this.data[property] = oData[property]; + } + } + } + } + if (!Lang.isUndefined(expanded) ) { this.expanded = expanded; } + + /** + * The parentChange event is fired when a parent element is applied + * to the node. This is useful if you need to apply tree-level + * properties to a tree that need to happen if a node is moved from + * one tree to another. + * + * @event parentChange + * @type CustomEvent + */ + this.publish("parentChange"); + + // oParent should never be null except when we create the root node. + if (oParent) { + oParent.appendChild(this); + } + }, + + /** + * Certain properties for the node cannot be set until the parent + * is known. This is called after the node is inserted into a tree. + * the parent is also applied to this node's children in order to + * make it possible to move a branch from one tree to another. + * @method applyParent + * @param {Node} parentNode this node's parent node + * @return {boolean} true if the application was successful + */ + applyParent: function(parentNode) { + if (!parentNode) { + return false; + } + + this.tree = parentNode.tree; + this.parent = parentNode; + this.depth = parentNode.depth + 1; + + // @todo why was this put here. This causes new nodes added at the + // root level to lose the menu behavior. + // if (! this.multiExpand) { + // this.multiExpand = parentNode.multiExpand; + // } + + this.tree.regNode(this); + parentNode.childrenRendered = false; + + // cascade update existing children + for (var i=0, len=this.children.length;i
- active {boolean}, whether there is an active cell editor + *
- whoHasIt {YAHOO.widget.TreeView} TreeView instance that is currently using the editor + *
- nodeType {string} value of static Node._type property, allows reuse of input element if node is of the same type. + *
- editorPanel {HTMLelement (<div>)} element holding the in-line editor + *
- inputContainer {HTMLelement (<div>)} element which will hold the type-specific input element(s) to be filled by the fillEditorContainer method + *
- buttonsContainer {HTMLelement (<div>)} element which holds the <button> elements for Ok/Cancel. If you don't want any of the buttons, hide it via CSS styles, don't destroy it + *
- node {YAHOO.widget.Node} reference to the Node being edited + *
- saveOnEnter {boolean}, whether the Enter key should be accepted as a Save command (Esc. is always taken as Cancel), disable for multi-line input elements + *
- oldValue {any} value before editing + *
- type: + * js or css, by default the loader will include both + *
- timeout: + * number of milliseconds before a timeout occurs when dynamically loading nodes. in not set, there is no timeout + *
- modules: + * A list of module definitions. See Loader.addModule for the supported module metadata + *
- type: + * js or css, by default the loader will include both + *
- timeout: + * number of milliseconds before a timeout occurs when dynamically loading nodes. in not set, there is no timeout + *
- modules: + * A list of module definitions. See Loader.addModule for the supported module metadata + *
- ");J=J.replace(/
- /gi,"
- ");return J;},filter_safari:function(J){if(this.browser.webkit){J=J.replace(/([^>])<\/span>/gi," ");J=J.replace(/Apple-style-span/gi,"");J=J.replace(/style="line-height: normal;"/gi,"");J=J.replace(/yui-wk-div/gi,"");J=J.replace(/yui-wk-p/gi,"");J=J.replace(/
/gi,"
/gi,"
/gi,"
/gi,"
( | )<\/p>/g," <\/p>/gi," Creates a basic custom Toolbar Button. Primarily used with the Rich Text Editor's Toolbar Provides a toolbar button based on the button and menu widgets, <select> elements are used in place of menu's. ( | )<\/p>/g, ' <\/p>/gi, ' The YUI 2 wrapper makes it easy to transform existing YUI 2 code into YUI 3 compatible code,
+* using lazy load to include the required yui2 modules, Leveraging YUI Loader Utility.
+* The YUI 2 wrapper makes it easy to transform existing YUI 2 code into YUI 3 compatible code,
+* using lazy load to include the required yui2 modules, Leveraging YUI Loader Utility.
+*
<\/p>/gi,"
");}else{K=K.replace(/
");}return K;},clearEditorDoc:function(){this._getDoc().body.innerHTML=" ";},openWindow:function(J){},moveWindow:function(){},_closeWindow:function(){},closeWindow:function(){this.toolbar.resetAllButtons();this.focus();},destructor:function(){if(this._nodeChangeDelayTimer){clearTimeout(this._nodeChangeDelayTimer);}this.hide();A.log("Destroying Editor","warn","SimpleEditor");if(this.resize){A.log("Destroying Resize","warn","SimpleEditor");this.resize.destroy();}if(this.dd){A.log("Unreg DragDrop Instance","warn","SimpleEditor");this.dd.unreg();}if(this.get("panel")){A.log("Destroying Editor Panel","warn","SimpleEditor");this.get("panel").destroy();}this.saveHTML();this.toolbar.destroy();A.log("Restoring TextArea","info","SimpleEditor");this.setStyle("visibility","visible");this.setStyle("position","static");this.setStyle("top","");this.setStyle("left","");var J=this.get("element");this.get("element_cont").get("parentNode").replaceChild(J,this.get("element_cont").get("element"));this.get("element_cont").get("element").innerHTML="";this.set("handleSubmit",false);return true;},toString:function(){var J="SimpleEditor";return J;}});C.namespace("Editor");C.Editor.Simple=E;C.Editor.Info={_instances:{},blankImage:"",window:{},panel:null,getEditorById:function(J){if(!H.isString(J)){J=J.id;}if(this._instances[J]){return this._instances[J];}return false;},saveAll:function(L){var K,M,J=C.Editor.Info._instances;if(L){C.each(J,function(N,O){if(O.get("element").form&&(O.get("element").form==L)){O.saveHTML();}});}else{C.each(J,function(N){N.saveHTML();});}},toString:function(){var J=0;C.each(this._instances,function(){J++;});return"Editor Info ("+J+" registered intance"+((J>1)?"s":"")+")";}};},"gallery-2009.11.02-20",{requires:["node","gallery-port","substitute"]});
\ No newline at end of file
diff --git a/build/gallery-simple-editor/gallery-simple-editor.js b/build/gallery-simple-editor/gallery-simple-editor.js
new file mode 100644
index 0000000000..e5af3801a4
--- /dev/null
+++ b/build/gallery-simple-editor/gallery-simple-editor.js
@@ -0,0 +1,7037 @@
+YUI.add('gallery-simple-editor', function(Y) {
+
+
+ /**
+ * @description
+ * {
+ * { id: 'b3', type: 'button', label: 'Underline', value: 'underline' },
+ * { type: 'separator' },
+ * { id: 'b4', type: 'menu', label: 'Align', value: 'align',
+ * menu: [
+ * { text: "Left", value: 'alignleft' },
+ * { text: "Center", value: 'aligncenter' },
+ * { text: "Right", value: 'alignright' }
+ * ]
+ * }
+ * }
+ * ' + titlebar + '
');
+ this._titlebar.appendChild(h2);
+ h2.get('firstChild').on('click', function(ev) {
+ ev.halt();
+ });
+ /*
+ Event.on([h2, h2.firstChild], 'focus', function() {
+ this._handleFocus();
+ }, this, true);
+ */
+ }
+ if (this.get('node').get('firstChild')) {
+ this.get('node').insertBefore(this._titlebar, this.get('node').get('firstChild'));
+ } else {
+ this.get('node').appendChild(this._titlebar);
+ }
+ if (this.get('collapse')) {
+ this.set('collapse', true);
+ }
+ } else if (this._titlebar) {
+ if (this._titlebar && this._titlebar.get('parentNode')) {
+ this._titlebar.get('parentNode').removeChild(this._titlebar);
+ }
+ }
+ },
+ /**
+ * @protected
+ * @property _configuredButtons
+ * @type Array
+ */
+ _configuredButtons: null,
+ /**
+ * @method _addMenuClasses
+ * @private
+ * @description This method is called from Menu's renderEvent to add a few more classes to the menu items
+ * @param {String} ev The event that fired.
+ * @param {Array} na Array of event information.
+ * @param {Object} o Button config object.
+ */
+ _addMenuClasses: function(ev, na, o) {
+ Dom.addClass(this.element, 'yui-toolbar-' + o.get('value') + '-menu');
+ if (Dom.hasClass(o._button.parentNode.parentNode, 'yui-toolbar-select')) {
+ Dom.addClass(this.element, 'yui-toolbar-select-menu');
+ }
+ var items = this.getItems();
+ for (var i = 0; i < items.length; i++) {
+ Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-').toLowerCase() : items[i]._oText.nodeValue.replace(/ /g, '-').toLowerCase()));
+ Dom.addClass(items[i].element, 'yui-toolbar-' + o.get('value') + '-' + ((items[i].value) ? items[i].value.replace(/ /g, '-') : items[i]._oText.nodeValue.replace(/ /g, '-')));
+ }
+ },
+ /**
+ * @property buttonType
+ * @description The default button to use
+ * @type Object
+ */
+ buttonType: Y.Toolbar.Button,
+ /**
+ * @property dd
+ * @description The DragDrop instance associated with the Toolbar
+ * @type Object
+ */
+ dd: null,
+ /**
+ * @property _colorData
+ * @description Object reference containing colors hex and text values.
+ * @type Object
+ */
+ _colorData: {
+/* {{{ _colorData */
+ '#111111': 'Obsidian',
+ '#2D2D2D': 'Dark Gray',
+ '#434343': 'Shale',
+ '#5B5B5B': 'Flint',
+ '#737373': 'Gray',
+ '#8B8B8B': 'Concrete',
+ '#A2A2A2': 'Gray',
+ '#B9B9B9': 'Titanium',
+ '#000000': 'Black',
+ '#D0D0D0': 'Light Gray',
+ '#E6E6E6': 'Silver',
+ '#FFFFFF': 'White',
+ '#BFBF00': 'Pumpkin',
+ '#FFFF00': 'Yellow',
+ '#FFFF40': 'Banana',
+ '#FFFF80': 'Pale Yellow',
+ '#FFFFBF': 'Butter',
+ '#525330': 'Raw Siena',
+ '#898A49': 'Mildew',
+ '#AEA945': 'Olive',
+ '#7F7F00': 'Paprika',
+ '#C3BE71': 'Earth',
+ '#E0DCAA': 'Khaki',
+ '#FCFAE1': 'Cream',
+ '#60BF00': 'Cactus',
+ '#80FF00': 'Chartreuse',
+ '#A0FF40': 'Green',
+ '#C0FF80': 'Pale Lime',
+ '#DFFFBF': 'Light Mint',
+ '#3B5738': 'Green',
+ '#668F5A': 'Lime Gray',
+ '#7F9757': 'Yellow',
+ '#407F00': 'Clover',
+ '#8A9B55': 'Pistachio',
+ '#B7C296': 'Light Jade',
+ '#E6EBD5': 'Breakwater',
+ '#00BF00': 'Spring Frost',
+ '#00FF80': 'Pastel Green',
+ '#40FFA0': 'Light Emerald',
+ '#80FFC0': 'Sea Foam',
+ '#BFFFDF': 'Sea Mist',
+ '#033D21': 'Dark Forrest',
+ '#438059': 'Moss',
+ '#7FA37C': 'Medium Green',
+ '#007F40': 'Pine',
+ '#8DAE94': 'Yellow Gray Green',
+ '#ACC6B5': 'Aqua Lung',
+ '#DDEBE2': 'Sea Vapor',
+ '#00BFBF': 'Fog',
+ '#00FFFF': 'Cyan',
+ '#40FFFF': 'Turquoise Blue',
+ '#80FFFF': 'Light Aqua',
+ '#BFFFFF': 'Pale Cyan',
+ '#033D3D': 'Dark Teal',
+ '#347D7E': 'Gray Turquoise',
+ '#609A9F': 'Green Blue',
+ '#007F7F': 'Seaweed',
+ '#96BDC4': 'Green Gray',
+ '#B5D1D7': 'Soapstone',
+ '#E2F1F4': 'Light Turquoise',
+ '#0060BF': 'Summer Sky',
+ '#0080FF': 'Sky Blue',
+ '#40A0FF': 'Electric Blue',
+ '#80C0FF': 'Light Azure',
+ '#BFDFFF': 'Ice Blue',
+ '#1B2C48': 'Navy',
+ '#385376': 'Biscay',
+ '#57708F': 'Dusty Blue',
+ '#00407F': 'Sea Blue',
+ '#7792AC': 'Sky Blue Gray',
+ '#A8BED1': 'Morning Sky',
+ '#DEEBF6': 'Vapor',
+ '#0000BF': 'Deep Blue',
+ '#0000FF': 'Blue',
+ '#4040FF': 'Cerulean Blue',
+ '#8080FF': 'Evening Blue',
+ '#BFBFFF': 'Light Blue',
+ '#212143': 'Deep Indigo',
+ '#373E68': 'Sea Blue',
+ '#444F75': 'Night Blue',
+ '#00007F': 'Indigo Blue',
+ '#585E82': 'Dockside',
+ '#8687A4': 'Blue Gray',
+ '#D2D1E1': 'Light Blue Gray',
+ '#6000BF': 'Neon Violet',
+ '#8000FF': 'Blue Violet',
+ '#A040FF': 'Violet Purple',
+ '#C080FF': 'Violet Dusk',
+ '#DFBFFF': 'Pale Lavender',
+ '#302449': 'Cool Shale',
+ '#54466F': 'Dark Indigo',
+ '#655A7F': 'Dark Violet',
+ '#40007F': 'Violet',
+ '#726284': 'Smoky Violet',
+ '#9E8FA9': 'Slate Gray',
+ '#DCD1DF': 'Violet White',
+ '#BF00BF': 'Royal Violet',
+ '#FF00FF': 'Fuchsia',
+ '#FF40FF': 'Magenta',
+ '#FF80FF': 'Orchid',
+ '#FFBFFF': 'Pale Magenta',
+ '#4A234A': 'Dark Purple',
+ '#794A72': 'Medium Purple',
+ '#936386': 'Cool Granite',
+ '#7F007F': 'Purple',
+ '#9D7292': 'Purple Moon',
+ '#C0A0B6': 'Pale Purple',
+ '#ECDAE5': 'Pink Cloud',
+ '#BF005F': 'Hot Pink',
+ '#FF007F': 'Deep Pink',
+ '#FF409F': 'Grape',
+ '#FF80BF': 'Electric Pink',
+ '#FFBFDF': 'Pink',
+ '#451528': 'Purple Red',
+ '#823857': 'Purple Dino',
+ '#A94A76': 'Purple Gray',
+ '#7F003F': 'Rose',
+ '#BC6F95': 'Antique Mauve',
+ '#D8A5BB': 'Cool Marble',
+ '#F7DDE9': 'Pink Granite',
+ '#C00000': 'Apple',
+ '#FF0000': 'Fire Truck',
+ '#FF4040': 'Pale Red',
+ '#FF8080': 'Salmon',
+ '#FFC0C0': 'Warm Pink',
+ '#441415': 'Sepia',
+ '#82393C': 'Rust',
+ '#AA4D4E': 'Brick',
+ '#800000': 'Brick Red',
+ '#BC6E6E': 'Mauve',
+ '#D8A3A4': 'Shrimp Pink',
+ '#F8DDDD': 'Shell Pink',
+ '#BF5F00': 'Dark Orange',
+ '#FF7F00': 'Orange',
+ '#FF9F40': 'Grapefruit',
+ '#FFBF80': 'Canteloupe',
+ '#FFDFBF': 'Wax',
+ '#482C1B': 'Dark Brick',
+ '#855A40': 'Dirt',
+ '#B27C51': 'Tan',
+ '#7F3F00': 'Nutmeg',
+ '#C49B71': 'Mustard',
+ '#E1C4A8': 'Pale Tan',
+ '#FDEEE0': 'Marble'
+/* }}} */
+ },
+ /**
+ * @property _colorPicker
+ * @description The HTML Element containing the colorPicker
+ * @type HTMLElement
+ */
+ _colorPicker: null,
+ /**
+ * @property STR_COLLAPSE
+ * @description String for Toolbar Collapse Button
+ * @type String
+ */
+ STR_COLLAPSE: 'Collapse Toolbar',
+ /**
+ * @property STR_EXPAND
+ * @description String for Toolbar Collapse Button - Expand
+ * @type String
+ */
+ STR_EXPAND: 'Expand Toolbar',
+ /**
+ * @property STR_SPIN_LABEL
+ * @description String for spinbutton dynamic label. Note the {VALUE} will be replaced with YAHOO.lang.substitute
+ * @type String
+ */
+ STR_SPIN_LABEL: 'Spin Button with value {VALUE}. Use Control Shift Up Arrow and Control Shift Down arrow keys to increase or decrease the value.',
+ /**
+ * @property STR_SPIN_UP
+ * @description String for spinbutton up
+ * @type String
+ */
+ STR_SPIN_UP: 'Click to increase the value of this input',
+ /**
+ * @property STR_SPIN_DOWN
+ * @description String for spinbutton down
+ * @type String
+ */
+ STR_SPIN_DOWN: 'Click to decrease the value of this input',
+ /**
+ * @property _titlebar
+ * @description Object reference to the titlebar
+ * @type HTMLElement
+ */
+ _titlebar: null,
+ /**
+ * @property browser
+ * @description Standard browser detection
+ * @type Object
+ */
+ browser: Y.UA,
+ /**
+ * @protected
+ * @property _buttonList
+ * @description Internal property list of current buttons in the toolbar
+ * @type Array
+ */
+ _buttonList: null,
+ /**
+ * @protected
+ * @property _buttonGroupList
+ * @description Internal property list of current button groups in the toolbar
+ * @type Array
+ */
+ _buttonGroupList: null,
+ /**
+ * @protected
+ * @property _sep
+ * @description Internal reference to the separator HTML Element for cloning
+ * @type HTMLElement
+ */
+ _sep: null,
+ /**
+ * @protected
+ * @property _sepCount
+ * @description Internal refernce for counting separators, so we can give them a useful class name for styling
+ * @type Number
+ */
+ _sepCount: null,
+ /**
+ * @protected
+ * @property draghandle
+ * @type HTMLElement
+ */
+ _dragHandle: null,
+ /**
+ * @protected
+ * @property _toolbarConfigs
+ * @type Object
+ */
+ _toolbarConfigs: {
+ renderer: true
+ },
+ /**
+ * @protected
+ * @property CLASS_CONTAINER
+ * @description Default CSS class to apply to the toolbar container element
+ * @type String
+ */
+ CLASS_CONTAINER: 'yui-toolbar-container',
+ /**
+ * @protected
+ * @property CLASS_DRAGHANDLE
+ * @description Default CSS class to apply to the toolbar's drag handle element
+ * @type String
+ */
+ CLASS_DRAGHANDLE: 'yui-toolbar-draghandle',
+ /**
+ * @protected
+ * @property CLASS_SEPARATOR
+ * @description Default CSS class to apply to all separators in the toolbar
+ * @type String
+ */
+ CLASS_SEPARATOR: 'yui-toolbar-separator',
+ /**
+ * @protected
+ * @property CLASS_DISABLED
+ * @description Default CSS class to apply when the toolbar is disabled
+ * @type String
+ */
+ CLASS_DISABLED: 'yui-toolbar-disabled',
+ /**
+ * @protected
+ * @property CLASS_PREFIX
+ * @description Default prefix for dynamically created class names
+ * @type String
+ */
+ CLASS_PREFIX: 'yui-toolbar',
+ /**
+ * @method init
+ * @description The Toolbar class's initialization method
+ */
+ initializer: function() {
+ var fs = Y.Node.create('');
+ this.set('id', this.get('node').get('id'));
+ this.get('node').appendChild(fs);
+ this.set('cont', fs.query('div.yui-toolbar-subcont'));
+ this.get('node').set('tabIndex', '-1');
+ this.get('node').addClass(this.CLASS_CONTAINER);
+
+ this._renderTitle();
+ this._handleCollapse();
+ this.on('titlebarChange', Y.bind(this._renderTitle, this));
+ this.on('collapseChange', Y.bind(this._handleCollapse, this));
+
+
+ this.processButtons();
+ },
+ processButtons: function() {
+ var button, buttons, len, b, data = this.get('buttons');
+ Y.each(data, function(i, k) {
+ if (i.type == 'separator') {
+ this.addSeparator();
+ } else if (i.group !== undefined) {
+ buttons = this.addButtonGroup(i);
+ if (buttons) {
+ len = buttons.length;
+ for(b = 0; b < len; b++) {
+ if (buttons[b]) {
+ this._configuredButtons[this._configuredButtons.length] = buttons[b].id;
+ }
+ }
+ }
+ this.set('buttons', data);
+ } else {
+ button = this.addButton(i);
+ if (button) {
+ this._configuredButtons[this._configuredButtons.length] = button.id;
+ }
+ }
+ }, this);
+ },
+ /**
+ * @method initAttributes
+ * @description Initializes all of the configuration attributes used to create
+ * the toolbar.
+ * @param {Object} attr Object literal specifying a set of
+ * configuration attributes used to create the toolbar.
+ */
+ initAttributes: function(attr) {
+ YAHOO.widget.Toolbar.superclass.initAttributes.call(this, attr);
+
+
+ /**
+ * @attribute disabled
+ * @description Boolean indicating if the toolbar should be disabled. It will also disable the draggable attribute if it is on.
+ * @default false
+ * @type Boolean
+ */
+ this.setAttributeConfig('disabled', {
+ value: false,
+ method: function(disabled) {
+ if (this.get('disabled') === disabled) {
+ return false;
+ }
+ if (disabled) {
+ this.addClass(this.CLASS_DISABLED);
+ this.set('draggable', false);
+ this.disableAllButtons();
+ } else {
+ this.removeClass(this.CLASS_DISABLED);
+ if (this._configs.draggable._initialConfig.value) {
+ //Draggable by default, set it back
+ this.set('draggable', true);
+ }
+ this.resetAllButtons();
+ }
+ }
+ });
+
+
+ /**
+ * @attribute draggable
+ * @description Boolean indicating if the toolbar should be draggable.
+ * @default false
+ * @type Boolean
+ */
+
+ this.setAttributeConfig('draggable', {
+ value: (attr.draggable || false),
+ method: function(draggable) {
+ if (draggable && !this.get('titlebar')) {
+ YAHOO.log('Dragging enabled', 'info', 'Toolbar');
+ if (!this._dragHandle) {
+ this._dragHandle = document.createElement('SPAN');
+ this._dragHandle.innerHTML = '|';
+ this._dragHandle.setAttribute('title', 'Click to drag the toolbar');
+ this._dragHandle.id = this.get('id') + '_draghandle';
+ Dom.addClass(this._dragHandle, this.CLASS_DRAGHANDLE);
+ if (this.get('cont').hasChildNodes()) {
+ this.get('cont').insertBefore(this._dragHandle, this.get('cont').firstChild);
+ } else {
+ this.get('cont').appendChild(this._dragHandle);
+ }
+ this.dd = new YAHOO.util.DD(this.get('id'));
+ this.dd.setHandleElId(this._dragHandle.id);
+
+ }
+ } else {
+ YAHOO.log('Dragging disabled', 'info', 'Toolbar');
+ if (this._dragHandle) {
+ this._dragHandle.parentNode.removeChild(this._dragHandle);
+ this._dragHandle = null;
+ this.dd = null;
+ }
+ }
+ if (this._titlebar) {
+ if (draggable) {
+ this.dd = new YAHOO.util.DD(this.get('id'));
+ this.dd.setHandleElId(this._titlebar);
+ Dom.addClass(this._titlebar, 'draggable');
+ } else {
+ Dom.removeClass(this._titlebar, 'draggable');
+ if (this.dd) {
+ this.dd.unreg();
+ this.dd = null;
+ }
+ }
+ }
+ },
+ validator: function(value) {
+ var ret = true;
+ if (!YAHOO.util.DD) {
+ ret = false;
+ }
+ return ret;
+ }
+ });
+
+ },
+ /**
+ * @method addButtonGroup
+ * @description Add a new button group to the toolbar. (uses addButton)
+ * @param {Object} oGroup Object literal reference to the Groups Config (contains an array of button configs as well as the group label)
+ */
+ addButtonGroup: function(oGroup) {
+
+ if (!this.get('node').hasClass(this.CLASS_PREFIX + '-grouped')) {
+ this.get('node').addClass(this.CLASS_PREFIX + '-grouped');
+ }
+ var div = Y.Node.create('');
+ if (oGroup.label) {
+ var label = Y.Node.create('' + oGroup.label + '
');
+ div.appendChild(label);
+ }
+ if (!this.get('grouplabels')) {
+ this.get('cont').addClass(this.CLASS_PREFIX, '-nogrouplabels');
+ }
+
+ this.get('cont').appendChild(div);
+
+ //For accessibility, let's put all of the group buttons in an Unordered List
+ var ul = Y.Node.create('');
+ div.appendChild(ul);
+
+ if (!this._buttonGroupList) {
+ this._buttonGroupList = {};
+ }
+
+ this._buttonGroupList[oGroup.group] = ul;
+
+
+ //An array of the button ids added to this group
+ //This is used for destruction later...
+ var addedButtons = [],
+ button;
+
+ Y.each(oGroup.buttons, function(i) {
+ var li = Y.Node.create('
execCommand('fontname', false, 'yui-tmp') on the given selection.
+ * It will then search the document for an element with the font-family set to yui-tmp and replace that with another span that has other information in it, then assign the new span to the
+ * this.currentElement array, so we now have element references to the elements that were just modified. At this point we can use standard DOM manipulation to change them as we see fit.
+ */
+ _createCurrentElement: function(tagName, tagStyle) {
+ tagName = ((tagName) ? tagName : 'a');
+ var tar = null,
+ el = [],
+ _doc = this._getDoc();
+
+ if (this.currentFont) {
+ if (!tagStyle) {
+ tagStyle = {};
+ }
+ tagStyle.fontFamily = this.currentFont;
+ this.currentFont = null;
+ }
+ this.currentElement = [];
+
+ var _elCreate = function(tagName, tagStyle) {
+ var el = null;
+ tagName = ((tagName) ? tagName : 'span');
+ tagName = tagName.toLowerCase();
+ switch (tagName) {
+ case 'h1':
+ case 'h2':
+ case 'h3':
+ case 'h4':
+ case 'h5':
+ case 'h6':
+ el = _doc.createElement(tagName);
+ break;
+ default:
+ el = _doc.createElement(tagName);
+ if (tagName === 'span') {
+ Dom.addClass(el, 'yui-tag-' + tagName);
+ Dom.addClass(el, 'yui-tag');
+ el.setAttribute('tag', tagName);
+ }
+ //console.log(tagStyle);
+ if (tagStyle) {
+ Y.each(tagStyle, function(v, k) {
+ el.style[k] = v;
+ });
+ }
+ break;
+ }
+ return el;
+ };
+
+ if (!this._hasSelection()) {
+ if (this._getDoc().queryCommandEnabled('insertimage')) {
+ this._getDoc().execCommand('insertimage', false, 'yui-tmp-img');
+ var imgs = this._getDoc().getElementsByTagName('img');
+ for (var j = 0; j < imgs.length; j++) {
+ if (imgs[j].getAttribute('src', 2) == 'yui-tmp-img') {
+ el = _elCreate(tagName, tagStyle);
+ imgs[j].parentNode.replaceChild(el, imgs[j]);
+ this.currentElement[this.currentElement.length] = el;
+ }
+ }
+ } else {
+ if (this.currentEvent) {
+ tar = Event.getTarget(this.currentEvent);
+ } else {
+ //For Safari..
+ tar = this._getDoc().body;
+ }
+ }
+ if (tar) {
+ /*
+ * @knownissue Safari Cursor Position
+ * @browser Safari 2.x
+ * @description The issue here is that we have no way of knowing where the cursor position is
+ * inside of the iframe, so we have to place the newly inserted data in the best place that we can.
+ */
+ el = _elCreate(tagName, tagStyle);
+ if (this._isElement(tar, 'body') || this._isElement(tar, 'html')) {
+ if (this._isElement(tar, 'html')) {
+ tar = this._getDoc().body;
+ }
+ tar.appendChild(el);
+ } else if (tar.nextSibling) {
+ tar.parentNode.insertBefore(el, tar.nextSibling);
+ } else {
+ tar.parentNode.appendChild(el);
+ }
+ //this.currentElement = el;
+ this.currentElement[this.currentElement.length] = el;
+ this.currentEvent = null;
+ if (this.browser.webkit) {
+ //Force Safari to focus the new element
+ this._getSelection().setBaseAndExtent(el, 0, el, 0);
+ if (this.browser.webkit3) {
+ this._getSelection().collapseToStart();
+ } else {
+ this._getSelection().collapse(true);
+ }
+ }
+ }
+ } else {
+ //Force CSS Styling for this action...
+ this._setEditorStyle(true);
+ this._getDoc().execCommand('fontname', false, 'yui-tmp');
+ var _tmp = [], __tmp, __els = ['font', 'span', 'i', 'b', 'u', 'li'];
+
+ if (!this._isElement(this._getSelectedElement(), 'body')) {
+ __els[__els.length] = this._getDoc().getElementsByTagName(this._getSelectedElement().tagName);
+ __els[__els.length] = this._getDoc().getElementsByTagName(this._getSelectedElement().parentNode.tagName);
+ }
+ for (var _els = 0; _els < __els.length; _els++) {
+ var _tmp1 = this._getDoc().getElementsByTagName(__els[_els]);
+ for (var e = 0; e < _tmp1.length; e++) {
+ _tmp[_tmp.length] = _tmp1[e];
+ }
+ }
+
+
+ for (var i = 0; i < _tmp.length; i++) {
+ if ((Dom.getStyle(_tmp[i], 'fontFamily') == 'yui-tmp') || (_tmp[i].face && (_tmp[i].face == 'yui-tmp'))) {
+ if (tagName !== 'span') {
+ el = _elCreate(tagName, tagStyle);
+ } else {
+ el = _elCreate(_tmp[i].tagName, tagStyle);
+ }
+ el.innerHTML = _tmp[i].innerHTML;
+ if (this._isElement(_tmp[i], 'ol') || (this._isElement(_tmp[i], 'ul'))) {
+ var fc = _tmp[i].getElementsByTagName('li')[0];
+ _tmp[i].style.fontFamily = 'inherit';
+ fc.style.fontFamily = 'inherit';
+ el.innerHTML = fc.innerHTML;
+ fc.innerHTML = '';
+ fc.appendChild(el);
+ this.currentElement[this.currentElement.length] = el;
+ } else if (this._isElement(_tmp[i], 'li')) {
+ _tmp[i].innerHTML = '';
+ _tmp[i].appendChild(el);
+ _tmp[i].style.fontFamily = 'inherit';
+ this.currentElement[this.currentElement.length] = el;
+ } else {
+ if (_tmp[i].parentNode) {
+ _tmp[i].parentNode.replaceChild(el, _tmp[i]);
+ this.currentElement[this.currentElement.length] = el;
+ this.currentEvent = null;
+ if (this.browser.webkit) {
+ //Force Safari to focus the new element
+ this._getSelection().setBaseAndExtent(el, 0, el, 0);
+ if (this.browser.webkit3) {
+ this._getSelection().collapseToStart();
+ } else {
+ this._getSelection().collapse(true);
+ }
+ }
+ if (this.browser.ie && tagStyle && tagStyle.fontSize) {
+ this._getSelection().empty();
+ }
+ if (this.browser.gecko) {
+ this._getSelection().collapseToStart();
+ }
+ }
+ }
+ }
+ }
+ var len = this.currentElement.length;
+ for (var o = 0; o < len; o++) {
+ if ((o + 1) != len) { //Skip the last one in the list
+ if (this.currentElement[o] && this.currentElement[o].nextSibling) {
+ if (this._isElement(this.currentElement[o], 'br')) {
+ this.currentElement[this.currentElement.length] = this.currentElement[o].nextSibling;
+ }
+ }
+ }
+ }
+ }
+ },
+ /**
+ * @method saveHTML
+ * @description Cleans the HTML with the cleanHTML method then places that string back into the textarea.
+ * @return String
+ */
+ saveHTML: function() {
+ var html = this.cleanHTML();
+ if (this._textarea) {
+ this.get('node').set('value', html);
+ } else {
+ this.get('node').set('innerHTML', html);
+ }
+ if (this.get('saveEl') !== this.get('node')) {
+ var out = this.get('saveEl');
+ if (out) {
+ if (out.get('tagName').toLowerCase() === 'textarea') {
+ out.set('value', html);
+ } else {
+ out.set('innerHTML', html);
+ }
+ }
+ }
+ return html;
+ },
+ /**
+ * @method setEditorHTML
+ * @param {String} incomingHTML The html content to load into the editor
+ * @description Loads HTML into the editors body
+ */
+ setEditorHTML: function(incomingHTML) {
+ var html = this._cleanIncomingHTML(incomingHTML);
+ html = html.replace(/RIGHT_BRACKET/gi, '{');
+ html = html.replace(/LEFT_BRACKET/gi, '}');
+ this._getDoc().body.innerHTML = html;
+ this.nodeChange();
+ },
+ /**
+ * @method getEditorHTML
+ * @description Gets the unprocessed/unfiltered HTML from the editor
+ */
+ getEditorHTML: function() {
+ try {
+ var b = this._getDoc().body;
+ if (b === null) {
+ YAHOO.log('Body is null, returning null.', 'error', 'SimpleEditor');
+ return null;
+ }
+ return this._getDoc().body.innerHTML;
+ } catch (e) {
+ return '';
+ }
+ },
+ /**
+ * @method show
+ * @description This method needs to be called if the Editor was hidden (like in a TabView or Panel). It is used to reset the editor after being in a container that was set to display none.
+ */
+ show: function() {
+ if (this.browser.gecko) {
+ this._setDesignMode('on');
+ this.focus();
+ }
+ if (this.browser.webkit) {
+ var self = this;
+ window.setTimeout(function() {
+ self._setInitialContent.call(self);
+ }, 10);
+ }
+ //Adding this will close all other Editor window's when showing this one.
+ if (this.currentWindow) {
+ this.closeWindow();
+ }
+ //Put the iframe back in place
+ this.get('iframe').setStyle('position', 'static');
+ this.get('iframe').setStyle('left', '');
+ },
+ /**
+ * @method hide
+ * @description This method needs to be called if the Editor is to be hidden (like in a TabView or Panel). It should be called to clear timeouts and close open editor windows.
+ */
+ hide: function() {
+ //Adding this will close all other Editor window's.
+ if (this.currentWindow) {
+ this.closeWindow();
+ }
+ if (this._fixNodesTimer) {
+ clearTimeout(this._fixNodesTimer);
+ this._fixNodesTimer = null;
+ }
+ if (this._nodeChangeTimer) {
+ clearTimeout(this._nodeChangeTimer);
+ this._nodeChangeTimer = null;
+ }
+ this._lastNodeChange = 0;
+ //Move the iframe off of the screen, so that in containers with visiblity hidden, IE will not cover other elements.
+ this.get('iframe').setStyle('position', 'absolute');
+ this.get('iframe').setStyle('left', '-9999px');
+ },
+ /**
+ * @method _cleanIncomingHTML
+ * @param {String} html The unfiltered HTML
+ * @description Process the HTML with a few regexes to clean it up and stabilize the input
+ * @return {String} The filtered HTML
+ */
+ _cleanIncomingHTML: function(html) {
+ html = html.replace(/{/gi, 'RIGHT_BRACKET');
+ html = html.replace(/}/gi, 'LEFT_BRACKET');
+
+ html = html.replace(/
').replace(/\r/g, '
');
+ html = html.replace(/ /gi, ' '); //Replace all double spaces
+ html = html.replace(/\t/gi, ' '); //Replace all tabs
+ }
+ //Removing Script Tags from the Editor
+ html = html.replace(//gi, '/span>');
+
+
+ //Case Changing
+ if (this.browser.ie) {
+ html = html.replace(/text-decoration/gi, 'text-decoration');
+ html = html.replace(/font-weight/gi, 'font-weight');
+ html = html.replace(/_width="([^>]*)"/gi, '');
+ html = html.replace(/_height="([^>]*)"/gi, '');
+ //Cleanup Image URL's
+ var url = this._baseHREF.replace(/\//gi, '\\/'),
+ re = new RegExp('src="' + url, 'gi');
+ html = html.replace(re, 'src="');
+ }
+ html = html.replace(//gi, '');
+ html = html.replace(//gi, '');
+ if ((markup == 'semantic') || (markup == 'xhtml') || (markup == 'css')) {
+ html = html.replace(new RegExp('/gi, '
");
+
+ html = html.replace(/<\/li>/gi, '
");
+
+ html = html.replace(/<\/li>/gi, "");
+ html = html.replace(/<\/ol>/gi, "");
+ html = html.replace(//gi, "
");
+ html = html.replace(/
/gi, "
");
+ return html;
+ },
+ /**
+ * @method filter_safari
+ * @param String html The HTML string to filter
+ * @description Filters strings specific to Safari
+ * @return String
+ */
+ filter_safari: function(html) {
+ if (this.browser.webkit) {
+ //
+ html = html.replace(/([^>])<\/span>/gi, ' ');
+ html = html.replace(/Apple-style-span/gi, '');
+ html = html.replace(/style="line-height: normal;"/gi, '');
+ html = html.replace(/yui-wk-div/gi, '');
+ html = html.replace(/yui-wk-p/gi, '');
+
+
+ //Remove bogus LI's
+ html = html.replace(/
');
+ html = html.replace(/
');
+ html = html.replace(/<\/div>/gi, '');
+ }
+ }
+ return html;
+ },
+ /**
+ * @method filter_internals
+ * @param String html The HTML string to filter
+ * @description Filters internal RTE strings and bogus attrs we don't want
+ * @return String
+ */
+ filter_internals: function(html) {
+ html = html.replace(/\r/g, '');
+ //Fix stuff we don't want
+ html = html.replace(/<\/?(body|head|html)[^>]*>/gi, '');
+ //Fix last BR in LI
+ html = html.replace(/
/gi, '
/gi, '
/gi, '
/gi, '
/gi, '
<\/p>/gi, '
');
+ } else {
+ html = html.replace(/
');
+ }
+ return html;
+ },
+ /**
+ * @method clearEditorDoc
+ * @description Clear the doc of the Editor
+ */
+ clearEditorDoc: function() {
+ this._getDoc().body.innerHTML = ' ';
+ },
+ /**
+ * @method openWindow
+ * @description Override Method for Advanced Editor
+ */
+ openWindow: function(win) {
+ },
+ /**
+ * @method moveWindow
+ * @description Override Method for Advanced Editor
+ */
+ moveWindow: function() {
+ },
+ /**
+ * @private
+ * @method _closeWindow
+ * @description Override Method for Advanced Editor
+ */
+ _closeWindow: function() {
+ },
+ /**
+ * @method closeWindow
+ * @description Override Method for Advanced Editor
+ */
+ closeWindow: function() {
+ //this.unsubscribeAll('afterExecCommand');
+ this.toolbar.resetAllButtons();
+ this.focus();
+ },
+ /**
+ * @method destroy
+ * @description Destroys the editor, all of it's elements and objects.
+ * @return {Boolean}
+ */
+ destructor: function() {
+ if (this._nodeChangeDelayTimer) {
+ clearTimeout(this._nodeChangeDelayTimer);
+ }
+ this.hide();
+
+ YAHOO.log('Destroying Editor', 'warn', 'SimpleEditor');
+ if (this.resize) {
+ YAHOO.log('Destroying Resize', 'warn', 'SimpleEditor');
+ this.resize.destroy();
+ }
+ if (this.dd) {
+ YAHOO.log('Unreg DragDrop Instance', 'warn', 'SimpleEditor');
+ this.dd.unreg();
+ }
+ if (this.get('panel')) {
+ YAHOO.log('Destroying Editor Panel', 'warn', 'SimpleEditor');
+ this.get('panel').destroy();
+ }
+ this.saveHTML();
+ this.toolbar.destroy();
+ YAHOO.log('Restoring TextArea', 'info', 'SimpleEditor');
+ this.setStyle('visibility', 'visible');
+ this.setStyle('position', 'static');
+ this.setStyle('top', '');
+ this.setStyle('left', '');
+ var textArea = this.get('element');
+ this.get('element_cont').get('parentNode').replaceChild(textArea, this.get('element_cont').get('element'));
+ this.get('element_cont').get('element').innerHTML = '';
+ this.set('handleSubmit', false); //Remove the submit handler
+ return true;
+ },
+ /**
+ * @method toString
+ * @description Returns a string representing the editor.
+ * @return {String}
+ */
+ toString: function() {
+ var str = 'SimpleEditor';
+ return str;
+ }
+ });
+
+ Y.namespace('Editor');
+ Y.Editor.Simple = SimpleEditor;
+
+/**
+* @event toolbarLoaded
+* @description Event is fired during the render process directly after the Toolbar is loaded. Allowing you to attach events to the toolbar. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event cleanHTML
+* @description Event is fired after the cleanHTML method is called.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event afterRender
+* @description Event is fired after the render process finishes. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorContentLoaded
+* @description Event is fired after the editor iframe's document fully loads and fires it's onload event. From here you can start injecting your own things into the document. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeNodeChange
+* @description Event fires at the beginning of the nodeChange process. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event afterNodeChange
+* @description Event fires at the end of the nodeChange process. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeExecCommand
+* @description Event fires at the beginning of the execCommand process. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event afterExecCommand
+* @description Event fires at the end of the execCommand process. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorMouseUp
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorMouseDown
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorDoubleClick
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorClick
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorKeyUp
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorKeyPress
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorKeyDown
+* @param {Event} ev The DOM Event that occured
+* @description Passed through HTML Event. See Element.addListener for more information on listening for this event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorMouseUp
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorMouseDown
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorDoubleClick
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorClick
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorKeyUp
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorKeyPress
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event beforeEditorKeyDown
+* @param {Event} ev The DOM Event that occured
+* @description Fires before editor event, returning false will stop the internal processing.
+* @type YAHOO.util.CustomEvent
+*/
+
+/**
+* @event editorWindowFocus
+* @description Fires when the iframe is focused. Note, this is window focus event, not an Editor focus event.
+* @type YAHOO.util.CustomEvent
+*/
+/**
+* @event editorWindowBlur
+* @description Fires when the iframe is blurred. Note, this is window blur event, not an Editor blur event.
+* @type YAHOO.util.CustomEvent
+*/
+
+
+/**
+ * @description Singleton object used to track the open window objects and panels across the various open editors
+ * @class Editor.Info
+ * @static
+*/
+Y.Editor.Info = {
+ /**
+ * @private
+ * @property _instances
+ * @description A reference to all editors on the page.
+ * @type Object
+ */
+ _instances: {},
+ /**
+ * @private
+ * @property blankImage
+ * @description A reference to the blankImage url
+ * @type String
+ */
+ blankImage: '',
+ /**
+ * @private
+ * @property window
+ * @description A reference to the currently open window object in any editor on the page.
+ * @type Object YAHOO.widget.EditorWindow
+ */
+ window: {},
+ /**
+ * @private
+ * @property panel
+ * @description A reference to the currently open panel in any editor on the page.
+ * @type Object YAHOO.widget.Overlay
+ */
+ panel: null,
+ /**
+ * @method getEditorById
+ * @description Returns a reference to the Editor object associated with the given textarea
+ * @param {String/HTMLElement} id The id or reference of the textarea to return the Editor instance of
+ * @return Object YAHOO.widget.Editor
+ */
+ getEditorById: function(id) {
+ if (!Lang.isString(id)) {
+ //Not a string, assume a node Reference
+ id = id.id;
+ }
+ if (this._instances[id]) {
+ return this._instances[id];
+ }
+ return false;
+ },
+ /**
+ * @method saveAll
+ * @description Saves all Editor instances on the page. If a form reference is passed, only Editor's bound to this form will be saved.
+ * @param {HTMLElement} form The form to check if this Editor instance belongs to
+ */
+ saveAll: function(form) {
+ var i, e, items = Y.Editor.Info._instances;
+ if (form) {
+ Y.each(items, function(v, e) {
+ if (e.get('element').form && (e.get('element').form == form)) {
+ e.saveHTML();
+ }
+ });
+ } else {
+ Y.each(items, function(v) {
+ v.saveHTML();
+ });
+ }
+ },
+ /**
+ * @method toString
+ * @description Returns a string representing the Editor.Info.
+ * @return {String}
+ */
+ toString: function() {
+ var len = 0;
+ Y.each(this._instances, function() {
+ len++;
+ });
+ return 'Editor Info (' + len + ' registered intance' + ((len > 1) ? 's' : '') + ')';
+ }
+};
+
+
+}, 'gallery-2009.11.02-20' ,{requires:['node','gallery-port','substitute']});
diff --git a/build/gallery-textarea-counter/gallery-textarea-counter-debug.js b/build/gallery-textarea-counter/gallery-textarea-counter-debug.js
new file mode 100644
index 0000000000..11123e084c
--- /dev/null
+++ b/build/gallery-textarea-counter/gallery-textarea-counter-debug.js
@@ -0,0 +1,159 @@
+YUI.add('gallery-textarea-counter', function(Y) {
+
+
+
+ var setNode = function(node) {
+ return Y.one(node);
+ },
+ setUI = function(attr, num) {
+ var n = this.get(attr);
+ if (n) {
+ n.set('innerHTML', num);
+ }
+ },
+ TC = function(config) {
+ config.node = config.host;
+ TC.superclass.constructor.call(this, config);
+ };
+
+ TC.NAME = "gallery-textarea-counter";
+
+ TC.NS = "counter";
+
+ TC.ATTRS = {
+ node: {
+ setter: setNode
+ },
+ wordsNode: {
+ setter: setNode
+ },
+ charsNode: {
+ setter: setNode
+ },
+ rowsNode: {
+ setter: setNode
+ },
+ colsNode: {
+ setter: setNode
+ },
+ rowCount: {
+ setter: function(num) {
+ setUI.call(this, 'rowsNode', num);
+ return num;
+ }
+ },
+ colCount: {
+ setter: function(num) {
+ setUI.call(this, 'colsNode', num);
+ return num;
+ }
+ },
+ wordCount: {
+ setter: function(num) {
+ setUI.call(this, 'wordsNode', num);
+ return num;
+ }
+ },
+ charCount: {
+ setter: function(num) {
+ setUI.call(this, 'charsNode', num);
+ return num;
+ }
+ }
+ };
+
+ Y.extend(TC, Y.Base, {
+ _handles: null,
+ initializer: function() {
+ this._handles = [];
+ var n = this.get('node'),
+ fn = Y.bind(this.count, this);
+ this._handles.push(n.on('keyup', fn));
+ this._handles.push(n.on('keypress', fn));
+ this._handles.push(n.on('mouseup', fn));
+ this._handles.push(n.on('focus', fn));
+
+ },
+ count: function() {
+ var node = this.get('node'),
+ text = node.get('value'),
+ defWordCount = this.get('wordCount'),
+ defCharCount = this.get('charCount'),
+ defColCount = this.get('colCount'),
+ defRowCount = this.get('rowCount'),
+ wordCount = 0,
+ charCount = ((text.length) ? text.length : ((node.get('textLength')) ? node.get('textLength') : 0)),
+ start = node.get('selectionStart'),
+ end = node.get('selectionEnd'),
+ rows = 0, cols = 0, range, stored_range, rowList, rowCount, i, sc, ec, r = 0;
+
+ if (charCount > 0) {
+ wordCount = text.match(/\b/g);
+ wordCount = ((wordCount) ? (wordCount.length / 2) : 0);
+ }
+
+
+ if (Y.UA.ie) {
+ if (document.selection) {
+ range = document.selection.createRange();
+ stored_range = range.duplicate();
+ stored_range.moveToElementText(node._node);
+ stored_range.setEndPoint('EndToEnd', range);
+ start = stored_range.text.length - range.text.length;
+ end = start + range.text.length;
+ }
+
+ }
+
+ rowList = text.split(/\n/);
+ rowCount = ((rowList) ? rowList.length : 1);
+
+ for (i = 0; i < rowCount; i++) {
+ if (Y.UA.gecko) {
+ charCount++;
+ }
+ r += (rowList[i].length + 1);
+ sc = (r - rowList[i].length - 1);
+ ec = ((rowList[i].length + 1) + sc);
+ if ((start >= sc) && (start <= ec)) {
+ rows = (i + 1);
+ cols = ((start - sc) + 1);
+ }
+ }
+
+ if (Y.UA.gecko) {
+ charCount--;
+ }
+ if (start !== end) { //No Selection
+ rows = 0;
+ cols = 0;
+ }
+
+ if (defWordCount !== wordCount) {
+ this.set('wordCount', wordCount);
+ }
+ if (defCharCount !== charCount) {
+ this.set('charCount', charCount);
+ }
+ if (defRowCount !== rows) {
+ this.set('rowCount', rows);
+ }
+ if (defColCount !== cols) {
+ this.set('colCount', cols);
+ }
+
+ },
+ destructor: function() {
+ if (this._handles) {
+ Y.each(this._handles, function(v) {
+ v.detach();
+ });
+ }
+ }
+ });
+ Y.namespace('Plugin');
+ Y.Plugin.Counter = TC;
+
+
+
+}, 'gallery-2009.11.09-19' ,{requires:['node', 'event']});
diff --git a/build/gallery-textarea-counter/gallery-textarea-counter-min.js b/build/gallery-textarea-counter/gallery-textarea-counter-min.js
new file mode 100644
index 0000000000..c6e5a75bb5
--- /dev/null
+++ b/build/gallery-textarea-counter/gallery-textarea-counter-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-textarea-counter",function(D){var A=function(E){return D.one(E);},C=function(E,F){var G=this.get(E);if(G){G.set("innerHTML",F);}},B=function(E){E.node=E.host;B.superclass.constructor.call(this,E);};B.NAME="gallery-textarea-counter";B.NS="counter";B.ATTRS={node:{setter:A},wordsNode:{setter:A},charsNode:{setter:A},rowsNode:{setter:A},colsNode:{setter:A},rowCount:{setter:function(E){C.call(this,"rowsNode",E);return E;}},colCount:{setter:function(E){C.call(this,"colsNode",E);return E;}},wordCount:{setter:function(E){C.call(this,"wordsNode",E);return E;}},charCount:{setter:function(E){C.call(this,"charsNode",E);return E;}}};D.extend(B,D.Base,{_handles:null,initializer:function(){this._handles=[];var F=this.get("node"),E=D.bind(this.count,this);this._handles.push(F.on("keyup",E));this._handles.push(F.on("keypress",E));this._handles.push(F.on("mouseup",E));this._handles.push(F.on("focus",E));},count:function(){var T=this.get("node"),O=T.get("value"),F=this.get("wordCount"),K=this.get("charCount"),W=this.get("colCount"),S=this.get("rowCount"),R=0,X=((O.length)?O.length:((T.get("textLength"))?T.get("textLength"):0)),H=T.get("selectionStart"),G=T.get("selectionEnd"),L=0,N=0,P,V,J,M,U,E,I,Q=0;if(X>0){R=O.match(/\b/g);R=((R)?(R.length/2):0);}if(D.UA.ie){if(document.selection){P=document.selection.createRange();V=P.duplicate();V.moveToElementText(T._node);V.setEndPoint("EndToEnd",P);H=V.text.length-P.text.length;G=H+P.text.length;}}J=O.split(/\n/);M=((J)?J.length:1);for(U=0;U
+ *
+ */
+
+
+ /**
+ * Fires when a cell is clicked on
+ * @event cellclick
+ * @param event {Event.Facade} An Event Facade object
+ */
+ var time = this.get('time'),
+
+ ampm = time.ampm,
+ seperator = this.get('strings.seperator'),
+ minute = pad(time.minute),
+
+ //build the string for ampm based on the strings
+ ampmString = (ampm == AM) ? this.get(AMSTR_KEY) : this.get(PMSTR_KEY);
+
+ //store the string representation of the 12 hour time
+
+ this.set('time.s12hour',
+ ((time.hour === 0) ? 12 : time.hour) +
+ seperator + minute + ampmString);
+
+ //convert 12 hour to 24
+ var hour = (ampm == PM) ? parseInt(time.hour,10) + 12 : parseInt(time.hour,10);
+ if(hour == 24 || hour === 0 ) {hour = Math.abs(hour-12);}
+ if(hour == 12 && ampm == AM) {hour = 0;}
+
+ //store the string for 24 hour time
+ this.set('time.s24hour', hour + seperator + minute);
+
+ //fire time change event
+ this.fire('timeset', this.get('time'));
+ },
+
+ _handleClick:function(e){
+ //dispatch 'cellclick' event on any clicks
+ if(e.target.test('.'+Timepicker[CELL_CLASS])){
+ this.fire('cellclick', this.get('time'));
+ }
+ },
+
+ _handleOver:function(e){
+ //this handles mouseover events, which it uses to change
+ //the store value of time as defined in the params
+
+ var targ = e.target, delay = this.get(DELAY_KEY);
+
+ if(this._timer){
+ this._timer.cancel();
+ this._timer = null;
+ }
+
+ this._timer = Y.later(delay, this, this._highlight, targ);
+
+
+ },
+
+ _highlight:function(targ){
+ //make sure this is one of our cells
+ if(targ.test('.'+Timepicker[CELL_CLASS])){
+
+ var value = targ.get('innerHTML');
+
+ //we are using classnames to figure out which row is which
+ if(targ.hasClass(Timepicker[HOUR_CLASS])){
+ this.set('time.hour',value);
+ }else if (targ.hasClass(Timepicker[AMPM_CLASS])){
+
+ //ugly, but otherwise we would need to embed metadata
+ //somewhere else, this seemed easy enough
+ var amString = this.get(AMSTR_KEY);
+
+ if(value == amString){
+ this.set('time.ampm', AM);
+ } else{
+ this.set('time.ampm', PM);
+ }
+
+ }else{
+ this.set('time.minute', value);
+ }
+
+ }
+ this._syncTime();
+
+ this.syncUI();
+ },
+
+ _handleOut:function(e){
+ if(this._timer){
+ this._timer.cancel();
+ this._timer = null;
+ }
+ },
+
+ renderUI: function(){
+ //FIXME: This could be more efficient!
+
+ /*
+ current implementation builds three ordered lists, one for
+ each row. Then we use the makeCell private method tp create a cell
+ with the given class, based on string constants defined up top
+ */
+ var cb = this.get('contentBox'),
+ m = this._model;
+
+ //create row function is very simple...
+ function createRow(){ return cb.create('');}
+
+ var row = [];
+ //only need three rows
+ for (var i=0; i <= 3; i++) {
+ row[i] = createRow();
+ }
+
+ //wrap make cell in node create
+ function mc (str, c){
+ return cb.create(makeCell(str, c));
+ }
+
+
+ m[AMPM_CLASS].AM = mc(this.get(AMSTR_KEY),AMPM_CLASS);
+ m[AMPM_CLASS].PM = mc(this.get(PMSTR_KEY),AMPM_CLASS);
+ row[0].appendChild(m[AMPM_CLASS].AM);
+ row[0].appendChild(m[AMPM_CLASS].PM);
+
+ //build rows, creating a function to use only twice, but
+ //still remove duplicates
+ function assembleRow(start, row, max, step, c){
+ for(var i = start; i<=max; i=i+step){
+ var cell = mc(i, c);
+ m[c][i] = cell;
+ row.appendChild(cell);
+ }
+ }
+
+ assembleRow(1, row[1], 12, 1, HOUR_CLASS);
+
+ assembleRow(0, row[2], 45, 15, MINUTE_CLASS);
+
+ this._model[AMPM_CLASS].row = row[0];
+ this._model[HOUR_CLASS].row = row[1];
+ this._model[MINUTE_CLASS].row = row[2];
+
+ var parent = cb.create('
");}var b=[];for(var X=0;X<=3;X++){b[X]=Z();}function a(d,e){return V.create(T(d,e));}U[R].AM=a(this.get(I),R);U[R].PM=a(this.get(O),R);b[0].appendChild(U[R].AM);b[0].appendChild(U[R].PM);function W(k,h,e,g,j){for(var f=k;f<=e;f=f+g){var d=a(f,j);U[j][f]=d;h.appendChild(d);}}W(1,b[1],12,1,E);W(0,b[2],45,15,Q);this._model[R].row=b[0];this._model[E].row=b[1];this._model[Q].row=b[2];var Y=V.create("
+ *
+ */
+
+
+ /**
+ * Fires when a cell is clicked on
+ * @event cellclick
+ * @param event {Event.Facade} An Event Facade object
+ */
+ var time = this.get('time'),
+
+ ampm = time.ampm,
+ seperator = this.get('strings.seperator'),
+ minute = pad(time.minute),
+
+ //build the string for ampm based on the strings
+ ampmString = (ampm == AM) ? this.get(AMSTR_KEY) : this.get(PMSTR_KEY);
+
+ //store the string representation of the 12 hour time
+
+ this.set('time.s12hour',
+ ((time.hour === 0) ? 12 : time.hour) +
+ seperator + minute + ampmString);
+
+ //convert 12 hour to 24
+ var hour = (ampm == PM) ? parseInt(time.hour,10) + 12 : parseInt(time.hour,10);
+ if(hour == 24 || hour === 0 ) {hour = Math.abs(hour-12);}
+ if(hour == 12 && ampm == AM) {hour = 0;}
+
+ //store the string for 24 hour time
+ this.set('time.s24hour', hour + seperator + minute);
+
+ //fire time change event
+ this.fire('timeset', this.get('time'));
+ },
+
+ _handleClick:function(e){
+ //dispatch 'cellclick' event on any clicks
+ if(e.target.test('.'+Timepicker[CELL_CLASS])){
+ this.fire('cellclick', this.get('time'));
+ }
+ },
+
+ _handleOver:function(e){
+ //this handles mouseover events, which it uses to change
+ //the store value of time as defined in the params
+
+ var targ = e.target, delay = this.get(DELAY_KEY);
+
+ if(this._timer){
+ this._timer.cancel();
+ this._timer = null;
+ }
+
+ this._timer = Y.later(delay, this, this._highlight, targ);
+
+
+ },
+
+ _highlight:function(targ){
+ //make sure this is one of our cells
+ if(targ.test('.'+Timepicker[CELL_CLASS])){
+
+ var value = targ.get('innerHTML');
+
+ //we are using classnames to figure out which row is which
+ if(targ.hasClass(Timepicker[HOUR_CLASS])){
+ this.set('time.hour',value);
+ }else if (targ.hasClass(Timepicker[AMPM_CLASS])){
+
+ //ugly, but otherwise we would need to embed metadata
+ //somewhere else, this seemed easy enough
+ var amString = this.get(AMSTR_KEY);
+
+ if(value == amString){
+ this.set('time.ampm', AM);
+ } else{
+ this.set('time.ampm', PM);
+ }
+
+ }else{
+ this.set('time.minute', value);
+ }
+
+ }
+ this._syncTime();
+
+ this.syncUI();
+ },
+
+ _handleOut:function(e){
+ if(this._timer){
+ this._timer.cancel();
+ this._timer = null;
+ }
+ },
+
+ renderUI: function(){
+ //FIXME: This could be more efficient!
+
+ /*
+ current implementation builds three ordered lists, one for
+ each row. Then we use the makeCell private method tp create a cell
+ with the given class, based on string constants defined up top
+ */
+ var cb = this.get('contentBox'),
+ m = this._model;
+
+ //create row function is very simple...
+ function createRow(){ return cb.create('');}
+
+ var row = [];
+ //only need three rows
+ for (var i=0; i <= 3; i++) {
+ row[i] = createRow();
+ }
+
+ //wrap make cell in node create
+ function mc (str, c){
+ return cb.create(makeCell(str, c));
+ }
+
+
+ m[AMPM_CLASS].AM = mc(this.get(AMSTR_KEY),AMPM_CLASS);
+ m[AMPM_CLASS].PM = mc(this.get(PMSTR_KEY),AMPM_CLASS);
+ row[0].appendChild(m[AMPM_CLASS].AM);
+ row[0].appendChild(m[AMPM_CLASS].PM);
+
+ //build rows, creating a function to use only twice, but
+ //still remove duplicates
+ function assembleRow(start, row, max, step, c){
+ for(var i = start; i<=max; i=i+step){
+ var cell = mc(i, c);
+ m[c][i] = cell;
+ row.appendChild(cell);
+ }
+ }
+
+ assembleRow(1, row[1], 12, 1, HOUR_CLASS);
+
+ assembleRow(0, row[2], 45, 15, MINUTE_CLASS);
+
+ this._model[AMPM_CLASS].row = row[0];
+ this._model[HOUR_CLASS].row = row[1];
+ this._model[MINUTE_CLASS].row = row[2];
+
+ var parent = cb.create('
+ *
+ * A string instead of an object will produce a node of type 'text' with the given string as its label.
+ * @method buildTreeFromObject
+ * @param oConfig {Array|Object|String} array containing a full description of the tree.
+ * An object or a string will be turned into an array with the given object or string as its only element.
+ *
+ */
+ buildTreeFromObject: function (oConfig) {
+ var logger = Y;
+ logger.log('Building tree from object');
+ var build = function (parent, oConfig) {
+ var i, item, node, children, type, NodeType, ThisType;
+ for (i = 0; i < oConfig.length; i++) {
+ item = oConfig[i];
+ if (Lang.isString(item)) {
+ node = new Widget.TextNode(item, parent);
+ } else if (Lang.isObject(item)) {
+ children = item.children;
+ delete item.children;
+ type = item.type || 'text';
+ delete item.type;
+ switch (Lang.isString(type) && type.toLowerCase()) {
+ case 'text':
+ node = new Widget.TextNode(item, parent);
+ break;
+ case 'menu':
+ node = new Widget.MenuNode(item, parent);
+ break;
+ case 'html':
+ node = new Widget.HTMLNode(item, parent);
+ break;
+ default:
+ if (Lang.isString(type)) {
+ NodeType = Widget[type];
+ } else {
+ NodeType = type;
+ }
+ if (Lang.isObject(NodeType)) {
+ for (ThisType = NodeType; ThisType && ThisType !== Widget.Node; ThisType = ThisType.superclass.constructor) {}
+ if (ThisType) {
+ node = new NodeType(item, parent);
+ } else {
+ logger.log('Invalid type in node definition: ' + type,'error');
+ }
+ } else {
+ logger.log('Invalid type in node definition: ' + type,'error');
+ }
+ }
+ if (children) {
+ build(node,children);
+ }
+ } else {
+ logger.log('Invalid node definition','error');
+ }
+ }
+ };
+ if (!Lang.isArray(oConfig)) {
+ oConfig = [oConfig];
+ }
+
+
+ build(this.root,oConfig);
+ },
+/**
+ * Builds the TreeView from existing markup. Markup should consist of <UL> or <OL> elements containing <LI> elements.
+ * Each <LI> can have one element used as label and a second optional element which is to be a <UL> or <OL>
+ * containing nested nodes.
+ * Depending on what the first element of the <LI> element is, the following Nodes will be created:
+ *
+ * Only the first outermost (un-)ordered list in the markup and its children will be parsed.
+ * Nodes will be collapsed unless an <LI> tag has a className called 'expanded'.
+ * All other className attributes will be copied over to the Node className property.
+ * If the <LI> element contains an attribute called yuiConfig, its contents should be a JSON-encoded object
+ * as the one used in method buildTreeFromObject.
+ * @method buildTreeFromMarkup
+ * @param id {string|HTMLElement} The id of the element that contains the markup or a reference to it.
+ */
+ buildTreeFromMarkup: function (id) {
+ Y.log('Building tree from existing markup');
+ var build = function (markup) {
+ var el, child, branch = [], config = {}, label, yuiConfig;
+ // Dom's getFirstChild and getNextSibling skip over text elements
+ for (el = Dom.getFirstChild(markup); el; el = Dom.getNextSibling(el)) {
+ switch (el.tagName.toUpperCase()) {
+ case 'LI':
+ label = '';
+ config = {
+ expanded: Dom.hasClass(el,'expanded'),
+ title: el.title || el.alt || null,
+ className: Lang.trim(el.className.replace(/\bexpanded\b/,'')) || null
+ };
+ // I cannot skip over text elements here because I want them for labels
+ child = el.firstChild;
+ if (child.nodeType == 3) {
+ // nodes with only whitespace, tabs and new lines don't count, they are probably just formatting.
+ label = Lang.trim(child.nodeValue.replace(/[\n\t\r]*/g,''));
+ if (label) {
+ config.type = 'text';
+ config.label = label;
+ } else {
+ child = Dom.getNextSibling(child);
+ }
+ }
+ if (!label) {
+ if (child.tagName.toUpperCase() == 'A') {
+ config.type = 'text';
+ config.label = child.innerHTML;
+ config.href = child.href;
+ config.target = child.target;
+ config.title = child.title || child.alt || config.title;
+ } else {
+ config.type = 'html';
+ var d = document.createElement('div');
+ d.appendChild(child.cloneNode(true));
+ config.html = d.innerHTML;
+ config.hasIcon = true;
+ }
+ }
+ // see if after the label it has a further list which will become children of this node.
+ child = Dom.getNextSibling(child);
+ switch (child && child.tagName.toUpperCase()) {
+ case 'UL':
+ case 'OL':
+ config.children = build(child);
+ break;
+ }
+ // if there are further elements or text, it will be ignored.
+
+ if (YAHOO.lang.JSON) {
+ yuiConfig = el.getAttribute('yuiConfig');
+ if (yuiConfig) {
+ yuiConfig = YAHOO.lang.JSON.parse(yuiConfig);
+ config = YAHOO.lang.merge(config,yuiConfig);
+ }
+ }
+
+ branch.push(config);
+ break;
+ case 'UL':
+ case 'OL':
+ Y.log('ULs or OLs can only contain LI elements, not other UL or OL. This will not work in some browsers','error');
+ config = {
+ type: 'text',
+ label: '',
+ children: build(child)
+ };
+ branch.push(config);
+ break;
+ }
+ }
+ return branch;
+ };
+
+ // var markup = Dom.getChildrenBy(Dom.get(id),function (el) {
+ // var tag = el.tagName.toUpperCase();
+ // return tag == 'UL' || tag == 'OL';
+ // });
+
+ var markup = Y.Selector.query('#' + this.id + '> ul,ol');
+
+ if (markup.length) {
+ this.buildTreeFromObject(build(markup[0]));
+ } else {
+ Y.log('Markup contains no UL or OL elements','warn');
+ }
+ },
+ /**
+ * Returns the TD element where the event has occurred
+ * @method _getEventTargetTdEl
+ * @private
+ */
+ _getEventTargetTdEl: function (ev) {
+ var target = ev.target,
+ crit = 'td .ygtvrow',
+ targetEl, pnode = target.get('parentNode');
+
+ if (target && pnode && !pnode.hasClass('ygtvrow')) {
+ target = target.ancestor('td');
+ pnode = target && target.get('parentNode');
+ }
+
+ if (!target) {
+ return null;
+ }
+
+ targetEl = target._node || target;
+
+ // If it is a spacer cell, do nothing
+ if (/\bygtv(blank)?depthcell/.test(targetEl.className)) {
+ return null;
+ }
+
+ // If it has an id, search for the node number and see if it belongs to a node in this tree.
+ if (targetEl.id) {
+ var m = targetEl.id.match(/\bygtv([^\d]*)(.*)/);
+ if (m && m[2] && this._nodes[m[2]]) {
+ return targetEl;
+ }
+ }
+
+ return null;
+ },
+ /**
+ *.DOM, Event listener for click events
+ * @method _onClickEvent
+ * @private
+ */
+ _onClickEvent: function (ev) {
+ var self = this,
+ td = this._getEventTargetTdEl(ev),
+ node,
+ target,
+ toggle = function (force) {
+ node.focus();
+ if (force || !node.href) {
+ node.toggle();
+ try {
+ ev.preventDefault();
+ } catch (e) {
+ // @TODO
+ // For some reason IE8 is providing an event object with
+ // most of the fields missing, but only when clicking on
+ // the node's label, and only when working with inline
+ // editing. This generates a "Member not found" error
+ // in that browser. Determine if this is a browser
+ // bug, or a problem with this code. Already checked to
+ // see if the problem has to do with access the event
+ // in the outer scope, and that isn't the problem.
+ // Maybe the markup for inline editing is broken.
+ }
+ }
+ };
+
+ if (!td) {
+ return;
+ }
+
+ node = this.getNodeByElement(td);
+ if (!node) {
+ return;
+ }
+
+ // exception to handle deprecated event labelClick
+ // @TODO take another look at this deprecation. It is common for people to
+ // only be interested in the label click, so why make them have to test
+ // the node type to figure out whether the click was on the label?
+
+ // target = Event.getTarget(ev);
+ target = ev.target;
+
+ // if (Dom.hasClass(target, node.labelStyle) || Dom.getAncestorByClassName(target,node.labelStyle)) {
+ if (target.hasClass(node.labelStyle) || target.ancestor(node.labelStyle)) {
+ Y.log("onLabelClick " + node.label);
+ this.fire('labelClick', node);
+ }
+
+ // If it is a toggle cell, toggle
+ if (/\bygtv[tl][mp]h?h?/.test(td.className)) {
+ toggle(true);
+ } else {
+ if (this._dblClickTimer) {
+ window.clearTimeout(this._dblClickTimer);
+ this._dblClickTimer = null;
+ } else {
+ if (this._hasDblClickSubscriber) {
+ this._dblClickTimer = window.setTimeout(function () {
+ self._dblClickTimer = null;
+ if (self.fire('clickEvent', {event:ev,node:node}) !== false) {
+ toggle();
+ }
+ }, 200);
+ } else {
+ if (self.fire('clickEvent', {event:ev,node:node}) !== false) {
+ toggle();
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * Event listener for double-click events
+ * @method _onDblClickEvent
+ * @private
+ */
+ _onDblClickEvent: function (ev) {
+ if (!this._hasDblClickSubscriber) {
+ return;
+ }
+
+ var td = this._getEventTargetTdEl(ev);
+ if (!td) {
+ return;
+ }
+
+ if (!(/\bygtv[tl][mp]h?h?/.test(td.className))) {
+
+ this.fire('dblClickEvent', {
+ event: ev,
+ node: this.getNodeByElement(td)
+ });
+
+ if (this._dblClickTimer) {
+ window.clearTimeout(this._dblClickTimer);
+ this._dblClickTimer = null;
+ }
+ }
+ },
+ /**
+ * Event listener for mouse over events
+ * @method _onMouseOverEvent
+ * @private
+ */
+ _onMouseOverEvent:function (ev) {
+ var target;
+ if ((target = this._getEventTargetTdEl(ev)) && (target = this.getNodeByElement(target)) && (target = target.getToggleEl())) {
+ target.className = target.className.replace(/\bygtv([lt])([mp])\b/gi,'ygtv$1$2h');
+ }
+ },
+ /**
+ * Event listener for mouse out events
+ * @method _onMouseOutEvent
+ * @private
+ */
+ _onMouseOutEvent: function (ev) {
+ var target;
+ if ((target = this._getEventTargetTdEl(ev)) && (target = this.getNodeByElement(target)) && (target = target.getToggleEl())) {
+ target.className = target.className.replace(/\bygtv([lt])([mp])h\b/gi,'ygtv$1$2');
+ }
+ },
+ /**
+ * Event listener for key down events
+ * @method _onKeyDownEvent
+ * @private
+ */
+ _onKeyDownEvent: function (ev) {
+ var target = ev.target,
+ targetEl = target._node,
+ node = this.getNodeByElement(targetEl),
+ newNode = node;
+
+ switch(ev.keyCode) {
+ case KEY.UP:
+ Y.log('UP');
+ do {
+ if (newNode.previousSibling) {
+ newNode = newNode.previousSibling;
+ } else {
+ newNode = newNode.parent;
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ case KEY.DOWN:
+ Y.log('DOWN');
+ do {
+ if (newNode.nextSibling) {
+ newNode = newNode.nextSibling;
+ } else {
+ newNode.expand();
+ newNode = (newNode.children.length || null) && newNode.children[0];
+ }
+ } while (newNode && !newNode._canHaveFocus);
+ if (newNode) { newNode.focus();}
+ ev.preventDefault();
+ break;
+ case KEY.LEFT:
+ Y.log('LEFT');
+ do {
+ if (newNode.parent) {
+ newNode = newNode.parent;
+ } else {
+ newNode = newNode.previousSibling;
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus();}
+ ev.preventDefault();
+ break;
+ case KEY.RIGHT:
+ Y.log('RIGHT');
+ var self = this,
+ moveFocusRight,
+ focusOnExpand = function (newNode) {
+ self.unsubscribe('expandComplete',focusOnExpand);
+ moveFocusRight(newNode);
+ };
+ moveFocusRight = function (newNode) {
+ do {
+ if (newNode.isDynamic() && !newNode.childrenRendered) {
+ self.subscribe('expandComplete',focusOnExpand);
+ newNode.expand();
+ newNode = null;
+ break;
+ } else {
+ newNode.expand();
+ if (newNode.children.length) {
+ newNode = newNode.children[0];
+ } else {
+ newNode = newNode.nextSibling;
+ }
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus();}
+ };
+
+ moveFocusRight(newNode);
+ ev.preventDefault();
+ break;
+ case KEY.ENTER:
+ Y.log('ENTER: ' + newNode.href);
+ if (node.href) {
+ if (node.target) {
+ window.open(node.href,node.target);
+ } else {
+ window.location(node.href);
+ }
+ } else {
+ node.toggle();
+ }
+ this.fire('enterKeyPressed',node);
+ ev.preventDefault();
+ break;
+ case KEY.HOME:
+ Y.log('HOME');
+ newNode = this.getRoot();
+ if (newNode.children.length) {newNode = newNode.children[0];}
+ if (newNode._canHaveFocus()) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ case KEY.END:
+ Y.log('END');
+ newNode = newNode.parent.children;
+ newNode = newNode[newNode.length -1];
+ if (newNode._canHaveFocus()) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ // case KEY.PAGE_UP:
+ // Y.log('PAGE_UP');
+ // break;
+ // case KEY.PAGE_DOWN:
+ // Y.log('PAGE_DOWN');
+ // break;
+ case 107: // plus key
+ if (ev.shiftKey) {
+ Y.log('Shift-PLUS');
+ node.parent.expandAll();
+ } else {
+ Y.log('PLUS');
+ node.expand();
+ }
+ break;
+ case 109: // minus key
+ if (ev.shiftKey) {
+ Y.log('Shift-MINUS');
+ node.parent.collapseAll();
+ } else {
+ Y.log('MINUS');
+ node.collapse();
+ }
+ break;
+ default:
+ break;
+ }
+ },
+ /**
+ * Renders the tree boilerplate and visible nodes
+ * @method render
+ */
+ render: function() {
+ var html = this.root.getHtml(),
+ el = this.getEl();
+ el.innerHTML = html;
+ if (!this._hasEvents) {
+ Y.on('click', this._onClickEvent, el, this);
+ Y.on('dblclick', this._onDblClickEvent, el, this, true);
+ Y.on('mouseover', this._onMouseOverEvent, el, this, true);
+ Y.on('mouseout', this._onMouseOutEvent, el, this, true);
+ Y.on('keydown', this._onKeyDownEvent, el, this, true);
+ }
+ this._hasEvents = true;
+ },
+
+ /**
+ * Returns the tree's host element
+ * @method getEl
+ * @return {HTMLElement} the host element
+ */
+ getEl: function() {
+ if (! this._el) {
+ var el = Y.Selector.query('#' + this.id, null, true);
+ this._el = el;
+
+ }
+ return this._el;
+ },
+
+ /**
+ * Nodes register themselves with the tree instance when they are created.
+ * @method regNode
+ * @param node {Node} the node to register
+ * @private
+ */
+ regNode: function(node) {
+ this._nodes[node.index] = node;
+ },
+
+ /**
+ * Returns the root node of this tree
+ * @method getRoot
+ * @return {Node} the root node
+ */
+ getRoot: function() {
+ return this.root;
+ },
+
+ /**
+ * Configures this tree to dynamically load all child data
+ * @method setDynamicLoad
+ * @param {function} fnDataLoader the function that will be called to get the data
+ * @param iconMode {int} configures the icon that is displayed when a dynamic
+ * load node is expanded the first time without children. By default, the
+ * "collapse" icon will be used. If set to 1, the leaf node icon will be
+ * displayed.
+ */
+ setDynamicLoad: function(fnDataLoader, iconMode) {
+ this.root.setDynamicLoad(fnDataLoader, iconMode);
+ },
+
+ /**
+ * Expands all child nodes. Note: this conflicts with the "multiExpand"
+ * node property. If expand all is called in a tree with nodes that
+ * do not allow multiple siblings to be displayed, only the last sibling
+ * will be expanded.
+ * @method expandAll
+ */
+ expandAll: function() {
+ if (!this.locked) {
+ this.root.expandAll();
+ }
+ },
+
+ /**
+ * Collapses all expanded child nodes in the entire tree.
+ * @method collapseAll
+ */
+ collapseAll: function() {
+ if (!this.locked) {
+ this.root.collapseAll();
+ }
+ },
+
+ /**
+ * Returns a node in the tree that has the specified index (this index
+ * is created internally, so this function probably will only be used
+ * in html generated for a given node.)
+ * @method getNodeByIndex
+ * @param {int} nodeIndex the index of the node wanted
+ * @return {Node} the node with index=nodeIndex, null if no match
+ */
+ getNodeByIndex: function(nodeIndex) {
+ var n = this._nodes[nodeIndex];
+ return (n) ? n : null;
+ },
+
+ /**
+ * Returns a node that has a matching property and value in the data
+ * object that was passed into its constructor.
+ * @method getNodeByProperty
+ * @param {object} property the property to search (usually a string)
+ * @param {object} value the value we want to find (usuall an int or string)
+ * @return {Node} the matching node, null if no match
+ */
+ getNodeByProperty: function(property, value) {
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if ((property in n && n[property] == value) || (n.data && value == n.data[property])) {
+ return n;
+ }
+ }
+ }
+
+ return null;
+ },
+
+ /**
+ * Returns a collection of nodes that have a matching property
+ * and value in the data object that was passed into its constructor.
+ * @method getNodesByProperty
+ * @param {object} property the property to search (usually a string)
+ * @param {object} value the value we want to find (usuall an int or string)
+ * @return {Array} the matching collection of nodes, null if no match
+ */
+ getNodesByProperty: function(property, value) {
+ var values = [];
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if ((property in n && n[property] == value) || (n.data && value == n.data[property])) {
+ values.push(n);
+ }
+ }
+ }
+
+ return (values.length) ? values : null;
+ },
+
+
+ /**
+ * Returns a collection of nodes that have passed the test function
+ * passed as its only argument.
+ * The function will receive a reference to each node to be tested.
+ * @method getNodesBy
+ * @param {function} a boolean function that receives a Node instance and returns true to add the node to the results list
+ * @return {Array} the matching collection of nodes, null if no match
+ */
+ getNodesBy: function(fn) {
+ var values = [];
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if (fn(n)) {
+ values.push(n);
+ }
+ }
+ }
+ return (values.length) ? values : null;
+ },
+ /**
+ * Returns the treeview node reference for an ancestor element
+ * of the node, or null if it is not contained within any node
+ * in this tree.
+ * @method getNodeByElement
+ * @param el {HTMLElement} the element to test
+ * @return {YAHOO.widget.Node} a node reference or null
+ */
+ getNodeByElement: function(el) {
+
+ var p=el, m, re=/ygtv([^\d]*)(.*)/;
+
+ do {
+
+ if (p && p.id) {
+ m = p.id.match(re);
+ if (m && m[2]) {
+ return this.getNodeByIndex(m[2]);
+ }
+ }
+
+ p = p.parentNode;
+
+ if (!p || !p.tagName) {
+ break;
+ }
+
+ }
+ while (p.id !== this.id && p.tagName.toLowerCase() !== "body");
+
+ return null;
+ },
+
+ /**
+ * When in singleNodeHighlight it returns the node highlighted
+ * or null if none. Returns null if singleNodeHighlight is false.
+ * @method getHighlightedNode
+ * @return {YAHOO.widget.Node} a node reference or null
+ */
+ getHighlightedNode: function() {
+ return this._currentlyHighlighted;
+ },
+
+
+ /**
+ * Removes the node and its children, and optionally refreshes the
+ * branch of the tree that was affected.
+ * @method removeNode
+ * @param {Node} node to remove
+ * @param {boolean} autoRefresh automatically refreshes branch if true
+ * @return {boolean} False is there was a problem, true otherwise.
+ */
+ removeNode: function(node, autoRefresh) {
+
+ // Don't delete the root node
+ if (node.isRoot()) {
+ return false;
+ }
+
+ // Get the branch that we may need to refresh
+ var p = node.parent;
+ if (p.parent) {
+ p = p.parent;
+ }
+
+ // Delete the node and its children
+ this._deleteNode(node);
+
+ // Refresh the parent of the parent
+ if (autoRefresh && p && p.childrenRendered) {
+ p.refresh();
+ }
+
+ return true;
+ },
+
+ /**
+ * wait until the animation is complete before deleting
+ * to avoid javascript errors
+ * @method _removeChildren_animComplete
+ * @param o the custom event payload
+ * @private
+ */
+ _removeChildren_animComplete: function(o) {
+ this.unsubscribe(this._removeChildren_animComplete);
+ this.removeChildren(o.node);
+ },
+
+ /**
+ * Deletes this nodes child collection, recursively. Also collapses
+ * the node, and resets the dynamic load flag. The primary use for
+ * this method is to purge a node and allow it to fetch its data
+ * dynamically again.
+ * @method removeChildren
+ * @param {Node} node the node to purge
+ */
+ removeChildren: function(node) {
+
+ if (node.expanded) {
+ // wait until the animation is complete before deleting to
+ // avoid javascript errors
+ if (this._collapseAnim) {
+ this.subscribe("animComplete",
+ this._removeChildren_animComplete, this, true);
+ Widget.Node.prototype.collapse.call(node);
+ return;
+ }
+
+ node.collapse();
+ }
+
+ Y.log("Removing children for " + node);
+ while (node.children.length) {
+ this._deleteNode(node.children[0]);
+ }
+
+ if (node.isRoot()) {
+ Widget.Node.prototype.expand.call(node);
+ }
+
+ node.childrenRendered = false;
+ node.dynamicLoadComplete = false;
+
+ node.updateIcon();
+ },
+
+ /**
+ * Deletes the node and recurses children
+ * @method _deleteNode
+ * @private
+ */
+ _deleteNode: function(node) {
+ // Remove all the child nodes first
+ this.removeChildren(node);
+
+ // Remove the node from the tree
+ this.popNode(node);
+ },
+
+ /**
+ * Removes the node from the tree, preserving the child collection
+ * to make it possible to insert the branch into another part of the
+ * tree, or another tree.
+ * @method popNode
+ * @param {Node} node to remove
+ */
+ popNode: function(node) {
+ var p = node.parent;
+
+ // Update the parent's collection of children
+ var a = [];
+
+ for (var i=0, len=p.children.length;i';
+
+ for (var i=0;i ';
+ }
+
+ sb[sb.length] = ' 0;
+ },
+ /**
+ * Removes the focus of previously selected Node
+ * @method _removeFocus
+ * @private
+ */
+ _removeFocus:function () {
+ if (this._focusedItem) {
+ Y.Event.detach('blur', this._focusedItem);
+ this._focusedItem = null;
+ }
+ var el;
+ while ((el = this._focusHighlightedItems.shift())) { // yes, it is meant as an assignment, really
+ Dom.removeClass(el,YAHOO.widget.TreeView.FOCUS_CLASS_NAME);
+ }
+ },
+ /**
+ * Sets the focus on the node element.
+ * It will only be able to set the focus on nodes that have anchor elements in it.
+ * Toggle or branch icons have anchors and can be focused on.
+ * If will fail in nodes that have no anchor
+ * @method focus
+ * @return {boolean} success
+ */
+ focus: function () {
+ var focused = false, self = this;
+
+ if (this.tree.currentFocus) {
+ this.tree.currentFocus._removeFocus();
+ }
+
+ var expandParent = function (node) {
+ if (node.parent) {
+ expandParent(node.parent);
+ node.parent.expand();
+ }
+ };
+ expandParent(this);
+
+ var root = new Y.Node(self.getEl().firstChild);
+
+ var tds = root.queryAll('td');
+
+ tds.each(function(node) {
+
+ if ((/ygtv(([tl][pmn]h?)|(content))/).test(node.get('className'))) {
+
+ node.addClass(YAHOO.widget.TreeView.FOCUS_CLASS_NAME);
+
+ if (!focused) {
+
+ var a = node.query('a', null, true);
+ if (a) {
+ var aRef = a._node;
+ a.focus();
+ self._focusedItem = aRef;
+ a.on('blur', function () {
+ self.tree.fire('focusChanged', {
+ oldNode: self.tree.currentFocus,
+ newNode: null
+ });
+ self.tree.currentFocus = null;
+ self._removeFocus();
+ });
+ focused = true;
+ }
+ }
+ self._focusHighlightedItems.push(node._node);
+ }
+ });
+
+ if (focused) {
+ this.tree.fire('focusChanged',{oldNode:this.tree.currentFocus,newNode:this});
+ this.tree.currentFocus = this;
+ } else {
+ this.tree.fire('focusChanged',{oldNode:self.tree.currentFocus,newNode:null});
+ this.tree.currentFocus = null;
+ this._removeFocus();
+ }
+ return focused;
+ },
+
+ /**
+ * Count of nodes in a branch
+ * @method getNodeCount
+ * @return {int} number of nodes in the branch
+ */
+ getNodeCount: function() {
+ for (var i = 0, count = 0;i< this.children.length;i++) {
+ count += this.children[i].getNodeCount();
+ }
+ return count + 1;
+ },
+
+ /**
+ * Returns an object which could be used to build a tree out of this node and its children.
+ * It can be passed to the tree constructor to reproduce this node as a tree.
+ * It will return false if the node or any children loads dynamically, regardless of whether it is loaded or not.
+ * @method getNodeDefinition
+ * @return {Object | false} definition of the tree or false if the node or any children is defined as dynamic
+ */
+ getNodeDefinition: function() {
+
+ if (this.isDynamic()) { return false; }
+
+ var def, defs = Lang.merge(this.data), children = [];
+
+
+
+ if (this.expanded) {defs.expanded = this.expanded; }
+ if (!this.multiExpand) { defs.multiExpand = this.multiExpand; }
+ if (!this.renderHidden) { defs.renderHidden = this.renderHidden; }
+ if (!this.hasIcon) { defs.hasIcon = this.hasIcon; }
+ if (this.nowrap) { defs.nowrap = this.nowrap; }
+ if (this.className) { defs.className = this.className; }
+ if (this.editable) { defs.editable = this.editable; }
+ if (this.enableHighlight) { defs.enableHighlight = this.enableHighlight; }
+ if (this.highlightState) { defs.highlightState = this.highlightState; }
+ if (this.propagateHighlightUp) { defs.propagateHighlightUp = this.propagateHighlightUp; }
+ if (this.propagateHighlightDown) { defs.propagateHighlightDown = this.propagateHighlightDown; }
+ defs.type = this._type;
+
+
+
+ for (var i = 0; i < this.children.length;i++) {
+ def = this.children[i].getNodeDefinition();
+ if (def === false) { return false;}
+ children.push(def);
+ }
+ if (children.length) { defs.children = children; }
+ return defs;
+ },
+
+
+ /**
+ * Generates the link that will invoke this node's toggle method
+ * @method getToggleLink
+ * @return {string} the javascript url for toggling this node
+ */
+ getToggleLink: function() {
+ return 'return false;';
+ },
+
+ /**
+ * Sets the value of property for this node and all loaded descendants.
+ * Only public and defined properties can be set, not methods.
+ * Values for unknown properties will be assigned to the refNode.data object
+ * @method setNodesProperty
+ * @param name {string} Name of the property to be set
+ * @param value {any} value to be set
+ * @param refresh {boolean} if present and true, it does a refresh
+ */
+ setNodesProperty: function(name, value, refresh) {
+ if (name.charAt(0) != '_' && !Lang.isUndefined(this[name]) && !Lang.isFunction(this[name]) ) {
+ this[name] = value;
+ } else {
+ this.data[name] = value;
+ }
+ for (var i = 0; i < this.children.length;i++) {
+ this.children[i].setNodesProperty(name,value);
+ }
+ if (refresh) {
+ this.refresh();
+ }
+ },
+ /**
+ * Toggles the highlighted state of a Node
+ * @method toggleHighlight
+ */
+ toggleHighlight: function() {
+ if (this.enableHighlight) {
+ // unhighlights only if fully highligthed. For not or partially highlighted it will highlight
+ if (this.highlightState == 1) {
+ this.unhighlight();
+ } else {
+ this.highlight();
+ }
+ }
+ },
+
+ /**
+ * Turns highlighting on node.
+ * @method highlight
+ * @param _silent {boolean} optional, don't fire the highlightEvent
+ */
+ highlight: function(_silent) {
+ if (this.enableHighlight) {
+ if (this.tree.singleNodeHighlight) {
+ if (this.tree._currentlyHighlighted) {
+ this.tree._currentlyHighlighted.unhighlight(_silent);
+ }
+ this.tree._currentlyHighlighted = this;
+ }
+ this.highlightState = 1;
+ this._setHighlightClassName();
+ if (!this.tree.singleNodeHighlight) {
+ if (this.propagateHighlightDown) {
+ for (var i = 0;i < this.children.length;i++) {
+ this.children[i].highlight(true);
+ }
+ }
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ if (!_silent) {
+ this.tree.fire('highlightEvent',this);
+ }
+ }
+ },
+ /**
+ * Turns highlighting off a node.
+ * @method unhighlight
+ * @param _silent {boolean} optional, don't fire the highlightEvent
+ */
+ unhighlight: function(_silent) {
+ if (this.enableHighlight) {
+ // might have checked singleNodeHighlight but it wouldn't really matter either way
+ this.tree._currentlyHighlighted = null;
+ this.highlightState = 0;
+ this._setHighlightClassName();
+ if (!this.tree.singleNodeHighlight) {
+ if (this.propagateHighlightDown) {
+ for (var i = 0;i < this.children.length;i++) {
+ this.children[i].unhighlight(true);
+ }
+ }
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ if (!_silent) {
+ this.tree.fire('highlightEvent',this);
+ }
+ }
+ },
+ /**
+ * Checks whether all or part of the children of a node are highlighted and
+ * sets the node highlight to full, none or partial highlight.
+ * If set to propagate it will further call the parent
+ * @method _childrenHighlighted
+ * @private
+ */
+ _childrenHighlighted: function() {
+ var yes = false, no = false;
+ if (this.enableHighlight) {
+ for (var i = 0;i < this.children.length;i++) {
+ switch(this.children[i].highlightState) {
+ case 0:
+ no = true;
+ break;
+ case 1:
+ yes = true;
+ break;
+ case 2:
+ yes = no = true;
+ break;
+ }
+ }
+ if (yes && no) {
+ this.highlightState = 2;
+ } else if (yes) {
+ this.highlightState = 1;
+ } else {
+ this.highlightState = 0;
+ }
+ this._setHighlightClassName();
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ },
+
+ /**
+ * Changes the classNames on the toggle and content containers to reflect the current highlighting
+ * @method _setHighlightClassName
+ * @private
+ */
+ _setHighlightClassName: function() {
+ var el = document.getElementById('ygtvtableel' + this.index);
+ if (el) {
+ el.className = el.className.replace(/\bygtv-highlight\d\b/gi,'ygtv-highlight' + this.highlightState);
+ }
+ }
+
+});
+
+})();
+(function () {
+ var YAHOO = Y.Port();
+/**
+ * A custom YAHOO.widget.Node that handles the unique nature of
+ * the virtual, presentationless root node.
+ * @namespace YAHOO.widget
+ * @class RootNode
+ * @extends YAHOO.widget.Node
+ * @param oTree {YAHOO.widget.TreeView} The tree instance this node belongs to
+ * @constructor
+ */
+var RootNode = function(oTree) {
+ // Initialize the node with null params. The root node is a
+ // special case where the node has no presentation. So we have
+ // to alter the standard properties a bit.
+ this._nodeinit(null, null, true);
+
+ /*
+ * For the root node, we get the tree reference from as a param
+ * to the constructor instead of from the parent element.
+ */
+ this.tree = oTree;
+};
+
+YAHOO.widget.RootNode = RootNode;
+var NS = Y.namespace('apm');
+NS.RootNode = YAHOO.widget.RootNode;
+
+Y.extend(RootNode, YAHOO.widget.Node, {
+
+ /**
+ * The node type
+ * @property _type
+ * @type string
+ * @private
+ * @default "RootNode"
+ */
+ _type: "RootNode",
+
+ // overrides YAHOO.widget.Node
+ getNodeHtml: function() {
+ return "";
+ },
+
+ toString: function() {
+ return this._type;
+ },
+
+ loadComplete: function() {
+ this.tree.draw();
+ },
+
+ /**
+ * Count of nodes in tree.
+ * It overrides Nodes.getNodeCount because the root node should not be counted.
+ * @method getNodeCount
+ * @return {int} number of nodes in the tree
+ */
+ getNodeCount: function() {
+ for (var i = 0, count = 0;i< this.children.length;i++) {
+ count += this.children[i].getNodeCount();
+ }
+ return count;
+ },
+
+ /**
+ * Returns an object which could be used to build a tree out of this node and its children.
+ * It can be passed to the tree constructor to reproduce this node as a tree.
+ * Since the RootNode is automatically created by treeView,
+ * its own definition is excluded from the returned node definition
+ * which only contains its children.
+ * @method getNodeDefinition
+ * @return {Object | false} definition of the tree or false if any child node is defined as dynamic
+ */
+ getNodeDefinition: function() {
+
+ for (var def, defs = [], i = 0; i < this.children.length;i++) {
+ def = this.children[i].getNodeDefinition();
+ if (def === false) { return false;}
+ defs.push(def);
+ }
+ return defs;
+ },
+
+ collapse: function() {},
+ expand: function() {},
+ getSiblings: function() { return null; },
+ focus: function () {}
+
+});
+})();
+(function () {
+ var YAHOO = Y.Port(),
+ Lang = YAHOO.lang;
+/**
+ * The default node presentation. The first parameter should be
+ * either a string that will be used as the node's label, or an object
+ * that has at least a string property called label. By default, clicking the
+ * label will toggle the expanded/collapsed state of the node. By
+ * setting the href property of the instance, this behavior can be
+ * changed so that the label will go to the specified href.
+ * @namespace YAHOO.widget
+ * @class TextNode
+ * @extends YAHOO.widget.Node
+ * @constructor
+ * @param oData {object} a string or object containing the data that will
+ * be used to render this node.
+ * Providing a string is the same as providing an object with a single property named label.
+ * All values in the oData will be used to set equally named properties in the node
+ * as long as the node does have such properties, they are not undefined, private or functions.
+ * All attributes are made available in noderef.data, which
+ * can be used to store custom attributes. TreeView.getNode(s)ByProperty
+ * can be used to retrieve a node by one of the attributes.
+ * @param oParent {YAHOO.widget.Node} this node's parent node
+ * @param expanded {boolean} the initial expanded/collapsed state (deprecated; use oData.expanded)
+ */
+YAHOO.widget.TextNode = function(oData, oParent, expanded) {
+
+ if (oData) {
+ if (Lang.isString(oData)) {
+ oData = { label: oData };
+ }
+ this._nodeinit(oData, oParent, expanded);
+ this.setUpLabel(oData);
+ }
+};
+var NS = Y.namespace('apm');
+NS.TextNode = YAHOO.widget.TextNode;
+
+Y.extend(YAHOO.widget.TextNode, YAHOO.widget.Node, {
+
+ /**
+ * The CSS class for the label href. Defaults to ygtvlabel, but can be
+ * overridden to provide a custom presentation for a specific node.
+ * @property labelStyle
+ * @type string
+ */
+ labelStyle: "ygtvlabel",
+
+ /**
+ * The derived element id of the label for this node
+ * @property labelElId
+ * @type string
+ */
+ labelElId: null,
+
+ /**
+ * The text for the label. It is assumed that the oData parameter will
+ * either be a string that will be used as the label, or an object that
+ * has a property called "label" that we will use.
+ * @property label
+ * @type string
+ */
+ label: null,
+
+ /**
+ * The text for the title (tooltip) for the label element
+ * @property title
+ * @type string
+ */
+ title: null,
+
+ /**
+ * The href for the node's label. If one is not specified, the href will
+ * be set so that it toggles the node.
+ * @property href
+ * @type string
+ */
+ href: null,
+
+ /**
+ * The label href target, defaults to current window
+ * @property target
+ * @type string
+ */
+ target: "_self",
+
+ /**
+ * The node type
+ * @property _type
+ * @private
+ * @type string
+ * @default "TextNode"
+ */
+ _type: "TextNode",
+
+
+ /**
+ * Sets up the node label
+ * @method setUpLabel
+ * @param oData string containing the label, or an object with a label property
+ */
+ setUpLabel: function(oData) {
+
+ if (Lang.isString(oData)) {
+ oData = {
+ label: oData
+ };
+ } else {
+ if (oData.style) {
+ this.labelStyle = oData.style;
+ }
+ }
+
+ this.label = oData.label;
+
+ this.labelElId = "ygtvlabelel" + this.index;
+
+ },
+
+ /**
+ * Returns the label element
+ * @for YAHOO.widget.TextNode
+ * @method getLabelEl
+ * @return {object} the element
+ */
+ getLabelEl: function() {
+ return document.getElementById(this.labelElId);
+ },
+
+ // overrides YAHOO.widget.Node
+ getContentHtml: function() {
+ var sb = [];
+ sb[sb.length] = this.href?'
+ *
+ * Editors are free to use this object to store additional data.
+ * @property editorData
+ * @static
+ * @for YAHOO.widget.TreeView
+ */
+ TV.editorData = {
+ active:false,
+ whoHasIt:null, // which TreeView has it
+ nodeType:null,
+ editorPanel:null,
+ inputContainer:null,
+ buttonsContainer:null,
+ node:null, // which Node is being edited
+ saveOnEnter:true,
+ oldValue:undefined
+ // Each node type is free to add its own properties to this as it sees fit.
+ };
+
+ /**
+ * Validator function for edited data, called from the TreeView instance scope,
+ * receives the arguments (newValue, oldValue, nodeInstance)
+ * and returns either the validated (or type-converted) value or undefined.
+ * An undefined return will prevent the editor from closing
+ * @property validator
+ * @type function
+ * @default null
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto.validator = null;
+
+ /**
+ * Entry point for initializing the editing plug-in.
+ * TreeView will call this method on initializing if it exists
+ * @method _initEditor
+ * @for YAHOO.widget.TreeView
+ * @private
+ */
+
+ TVproto._initEditor = function () {
+ /**
+ * Fires when the user clicks on the ok button of a node editor
+ * @event editorSaveEvent
+ * @type CustomEvent
+ * @param oArgs.newValue {mixed} the new value just entered
+ * @param oArgs.oldValue {mixed} the value originally in the tree
+ * @param oArgs.node {YAHOO.widget.Node} the node that has the focus
+ * @for YAHOO.widget.TreeView
+ */
+ // this.publish("editorSaveEvent");
+
+ /**
+ * Fires when the user clicks on the cancel button of a node editor
+ * @event editorCancelEvent
+ * @type CustomEvent
+ * @param {YAHOO.widget.Node} node the node that has the focus
+ * @for YAHOO.widget.TreeView
+ */
+ // this.publish("editorCancelEvent");
+
+ };
+
+ /**
+ * Entry point of the editing plug-in.
+ * TreeView will call this method if it exists when a node label is clicked
+ * @method _nodeEditing
+ * @param node {YAHOO.widget.Node} the node to be edited
+ * @return {Boolean} true to indicate that the node is editable and prevent any further bubbling of the click.
+ * @for YAHOO.widget.TreeView
+ * @private
+ */
+ TVproto._nodeEditing = function (node) {
+
+ if (node.fillEditorContainer && node.editable) {
+
+ var ed, topLeft, buttons, button, editorData = TV.editorData;
+ editorData.active = true;
+ editorData.whoHasIt = this;
+ if (!editorData.nodeType) {
+ editorData.editorPanel = ed = document.body.appendChild(document.createElement('div'));
+ Dom.addClass(ed,'ygtv-label-editor');
+
+ buttons = editorData.buttonsContainer = ed.appendChild(document.createElement('div'));
+ Dom.addClass(buttons,'ygtv-button-container');
+ button = buttons.appendChild(document.createElement('button'));
+ Dom.addClass(button,'ygtvok');
+ button.innerHTML = ' ';
+ button = buttons.appendChild(document.createElement('button'));
+ Dom.addClass(button,'ygtvcancel');
+ button.innerHTML = ' ';
+
+ Y.on('click', function (ev) {
+ Y.log('click on editor');
+ var target = ev.target,
+ targetEl = target._node,
+ node = TV.editorData.node;
+
+ // if (Dom.hasClass(target,'ygtvok')) {
+ if (target.hasClass('ygtvok')) {
+ Y.log('ygtvok');
+ ev.halt();
+ this._closeEditor(true);
+ }
+ // if (Dom.hasClass(target,'ygtvcancel')) {
+ if (target.hasClass('ygtvcancel')) {
+ Y.log('ygtvcancel');
+ ev.halt();
+ this._closeEditor(false);
+ }
+ }, buttons, this);
+
+ editorData.inputContainer = ed.appendChild(document.createElement('div'));
+ Dom.addClass(editorData.inputContainer,'ygtv-input');
+
+ Y.on('keydown', function (ev) {
+ var editorData = TV.editorData,
+ KEY = Y.TreeView.KEY;
+ switch (ev.keyCode) {
+ case KEY.ENTER:
+ Y.log('ENTER');
+ ev.halt();
+ if (editorData.saveOnEnter) {
+ this._closeEditor(true);
+ }
+ break;
+ case KEY.ESCAPE:
+ Y.log('ESC');
+ ev.halt();
+ this._closeEditor(false);
+ break;
+ }
+ }, ed, this);
+
+
+
+ } else {
+ ed = editorData.editorPanel;
+ }
+ editorData.node = node;
+ if (editorData.nodeType) {
+ Dom.removeClass(ed,'ygtv-edit-' + editorData.nodeType);
+ }
+ Dom.addClass(ed,' ygtv-edit-' + node._type);
+ topLeft = Dom.getXY(node.getContentEl());
+ Dom.setStyle(ed,'left',topLeft[0] + 'px');
+ Dom.setStyle(ed,'top',topLeft[1] + 'px');
+ Dom.setStyle(ed,'display','block');
+ ed.focus();
+ node.fillEditorContainer(editorData);
+
+ return true; // If inline editor available, don't do anything else.
+ }
+ };
+
+ /**
+ * Method to be associated with an event (clickEvent, dblClickEvent or enterKeyPressed) to pop up the contents editor
+ * It calls the corresponding node editNode method.
+ * @method onEventEditNode
+ * @param oArgs {object} Object passed as arguments to TreeView event listeners
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto.onEventEditNode = function (oArgs) {
+ if (oArgs instanceof YAHOO.widget.Node) {
+ oArgs.editNode();
+ } else if (oArgs.node instanceof YAHOO.widget.Node) {
+ oArgs.node.editNode();
+ }
+ };
+
+ /**
+ * Method to be called when the inline editing is finished and the editor is to be closed
+ * @method _closeEditor
+ * @param save {Boolean} true if the edited value is to be saved, false if discarded
+ * @private
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto._closeEditor = function (save) {
+ var ed = TV.editorData,
+ node = ed.node,
+ close = true;
+ if (save) {
+ close = (ed.node.saveEditorValue(ed) !== false);
+ } else {
+ this.fire('editorCancelEvent', node);
+ }
+
+ if (close) {
+ Dom.setStyle(ed.editorPanel,'display','none');
+ ed.active = false;
+ node.focus();
+ }
+ };
+
+ /**
+ * Entry point for TreeView's destroy method to destroy whatever the editing plug-in has created
+ * @method _destroyEditor
+ * @private
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto._destroyEditor = function() {
+ var ed = TV.editorData;
+ if (ed && ed.nodeType && (!ed.active || ed.whoHasIt === this)) {
+ Y.Event.detach('keydown', ed.editorPanel);
+ Y.Event.detach('click', ed.buttonContainer);
+ ed.node.destroyEditorContents(ed);
+ document.body.removeChild(ed.editorPanel);
+ ed.nodeType = ed.editorPanel = ed.inputContainer = ed.buttonsContainer = ed.whoHasIt = ed.node = null;
+ ed.active = false;
+ }
+ };
+
+ var Nproto = YAHOO.widget.Node.prototype;
+
+ /**
+ * Signals if the label is editable. (Ignored on TextNodes with href set.)
+ * @property editable
+ * @type boolean
+ * @for YAHOO.widget.Node
+ */
+ Nproto.editable = false;
+
+ /**
+ * pops up the contents editor, if there is one and the node is declared editable
+ * @method editNode
+ * @for YAHOO.widget.Node
+ */
+ Nproto.editNode = function () {
+ this.tree._nodeEditing(this);
+ };
+
+ /** Placeholder for a function that should provide the inline node label editor.
+ * Leaving it set to null will indicate that this node type is not editable.
+ * It should be overridden by nodes that provide inline editing.
+ * The Node-specific editing element (input box, textarea or whatever) should be inserted into editorData.inputContainer.
+ * @method fillEditorContainer
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return void
+ * @for YAHOO.widget.Node
+ */
+ Nproto.fillEditorContainer = null;
+
+ /**
+ * Node-specific destroy function to empty the contents of the inline editor panel.
+ * This function is the worst case alternative that will purge all possible events and remove the editor contents.
+ * Method Event.purgeElement is somewhat costly so if it can be replaced by specifc Event.removeListeners, it is better to do so.
+ * @method destroyEditorContents
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.Node
+ */
+ Nproto.destroyEditorContents = function (editorData) {
+ // In the worst case, if the input editor (such as the Calendar) has no destroy method
+ // we can only try to remove all possible events on it.
+ Event.purgeElement(editorData.inputContainer,true);
+ editorData.inputContainer.innerHTML = '';
+ };
+
+ /**
+ * Saves the value entered into the editor.
+ * @method saveEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {false or none} a return of exactly false will prevent the editor from closing
+ * @for YAHOO.widget.Node
+ */
+ Nproto.saveEditorValue = function (editorData) {
+ var node = editorData.node,
+ value,
+ validator = node.tree.validator;
+
+ value = this.getEditorValue(editorData);
+
+ if (Lang.isFunction(validator)) {
+ value = validator(value,editorData.oldValue,node);
+ if (Lang.isUndefined(value)) {
+ return false;
+ }
+ }
+
+ var ret = this.tree.fire('editorSaveEvent', {
+ newValue:value,
+ oldValue:editorData.oldValue,
+ node:node
+ });
+
+
+ if (ret !== false) {
+ this.displayEditedValue(value, editorData);
+ }
+ };
+
+ /**
+ * Returns the value(s) from the input element(s) .
+ * Should be overridden by each node type.
+ * @method getEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {any} value entered
+ * @for YAHOO.widget.Node
+ */
+
+ Nproto.getEditorValue = function (editorData) {
+ };
+
+ /**
+ * Finally displays the newly edited value(s) in the tree.
+ * Should be overridden by each node type.
+ * @method displayEditedValue
+ * @param value {any} value to be displayed and stored in the node
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.Node
+ */
+ Nproto.displayEditedValue = function (value,editorData) {
+ };
+
+ var TNproto = YAHOO.widget.TextNode.prototype;
+
+ /**
+ * Places an <input> textbox in the input container and loads the label text into it.
+ * @method fillEditorContainer
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return void
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.fillEditorContainer = function (editorData) {
+
+ var input;
+ // If last node edited is not of the same type as this one, delete it and fill it with our editor
+ if (editorData.nodeType != this._type) {
+ editorData.nodeType = this._type;
+ editorData.saveOnEnter = true;
+ editorData.node.destroyEditorContents(editorData);
+
+ editorData.inputElement = input = editorData.inputContainer.appendChild(document.createElement('input'));
+
+ } else {
+ // if the last node edited was of the same time, reuse the input element.
+ input = editorData.inputElement;
+ }
+ editorData.oldValue = this.label;
+ input.value = this.label;
+ input.focus();
+ input.select();
+ };
+
+ /**
+ * Returns the value from the input element.
+ * Overrides Node.getEditorValue.
+ * @method getEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {string} value entered
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.getEditorValue = function (editorData) {
+ return editorData.inputElement.value;
+ };
+
+ /**
+ * Finally displays the newly edited value in the tree.
+ * Overrides Node.displayEditedValue.
+ * @method displayEditedValue
+ * @param value {string} value to be displayed and stored in the node
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.displayEditedValue = function (value,editorData) {
+ var node = editorData.node;
+ node.label = value;
+ node.getLabelEl().innerHTML = value;
+ };
+
+ /**
+ * Destroys the contents of the inline editor panel.
+ * Overrides Node.destroyEditorContent.
+ * Since we didn't set any event listeners on this inline editor, it is more efficient to avoid the generic method in Node.
+ * @method destroyEditorContents
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.destroyEditorContents = function (editorData) {
+ editorData.inputContainer.innerHTML = '';
+ };
+})();
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['node','gallery-port']});
diff --git a/build/gallery-treeview/gallery-treeview-min.js b/build/gallery-treeview/gallery-treeview-min.js
new file mode 100644
index 0000000000..ff53298585
--- /dev/null
+++ b/build/gallery-treeview/gallery-treeview-min.js
@@ -0,0 +1,6 @@
+YUI.add("gallery-treeview",function(A){(function(){var B=A.Port(),E=A.DOM,J=B.util.Event,G=B.lang,F={ALT:18,BACK_SPACE:8,CAPS_LOCK:20,CONTROL:17,DELETE:46,DOWN:40,END:35,ENTER:13,ESCAPE:27,HOME:36,LEFT:37,META:224,NUM_LOCK:144,PAGE_DOWN:34,PAGE_UP:33,PAUSE:19,PRINTSCREEN:44,RIGHT:39,SCROLL_LOCK:145,SHIFT:16,SPACE:32,TAB:9,UP:38};B.widget=B.widget||{};var H=B.widget;var C=function(L,K){C.superclass.constructor.call(this);if(L){this._treeinit(L);}if(K){this.buildTreeFromObject(K);}else{if(G.trim(this._el.innerHTML)){this.buildTreeFromMarkup(L);}}};C.KEY=F;H.TreeView=C;var D=A.namespace("apm");D.TreeView=C;A.extend(C,A.PortBase,{id:null,_el:null,_nodes:null,locked:false,_expandAnim:null,_collapseAnim:null,_animCount:0,maxAnim:2,_hasDblClickSubscriber:false,_dblClickTimer:null,currentFocus:null,singleNodeHighlight:false,_currentlyHighlighted:null,setExpandAnim:function(K){this._expandAnim=(H.TVAnim.isValid(K))?K:null;},setCollapseAnim:function(K){this._collapseAnim=(H.TVAnim.isValid(K))?K:null;},animateExpand:function(M,N){if(this._expandAnim&&this._animCount';}if(this.hasIcon){G[G.length]='
";return G.join("");},getContentHtml:function(){return"";},refresh:function(){this.getChildrenEl().innerHTML=this.completeRender();if(this.hasIcon){var F=this.getToggleEl();if(F){F.className=F.className.replace(/\bygtv[lt][nmp]h*\b/gi,this.getStyle());}}},toString:function(){return this._type+" ("+this.index+")";},_focusHighlightedItems:[],_focusedItem:null,_canHaveFocus:function(){return this.getEl().getElementsByTagName("a").length>0;},_removeFocus:function(){if(this._focusedItem){A.Event.detach("blur",this._focusedItem);this._focusedItem=null;}var F;while((F=this._focusHighlightedItems.shift())){B.removeClass(F,E.widget.TreeView.FOCUS_CLASS_NAME);}},focus:function(){var J=false,G=this;if(this.tree.currentFocus){this.tree.currentFocus._removeFocus();}var I=function(K){if(K.parent){I(K.parent);K.parent.expand();}};I(this);var F=new A.Node(G.getEl().firstChild);var H=F.queryAll("td");H.each(function(L){if((/ygtv(([tl][pmn]h?)|(content))/).test(L.get("className"))){L.addClass(E.widget.TreeView.FOCUS_CLASS_NAME);if(!J){var K=L.query("a",null,true);if(K){var M=K._node;K.focus();G._focusedItem=M;K.on("blur",function(){G.tree.fire("focusChanged",{oldNode:G.tree.currentFocus,newNode:null});G.tree.currentFocus=null;G._removeFocus();});J=true;}}G._focusHighlightedItems.push(L._node);}});if(J){this.tree.fire("focusChanged",{oldNode:this.tree.currentFocus,newNode:this});this.tree.currentFocus=this;}else{this.tree.fire("focusChanged",{oldNode:G.tree.currentFocus,newNode:null});this.tree.currentFocus=null;this._removeFocus();}return J;},getNodeCount:function(){for(var F=0,G=0;F ';}G[G.length]='
+ *
+ * A string instead of an object will produce a node of type 'text' with the given string as its label.
+ * @method buildTreeFromObject
+ * @param oConfig {Array|Object|String} array containing a full description of the tree.
+ * An object or a string will be turned into an array with the given object or string as its only element.
+ *
+ */
+ buildTreeFromObject: function (oConfig) {
+ var build = function (parent, oConfig) {
+ var i, item, node, children, type, NodeType, ThisType;
+ for (i = 0; i < oConfig.length; i++) {
+ item = oConfig[i];
+ if (Lang.isString(item)) {
+ node = new Widget.TextNode(item, parent);
+ } else if (Lang.isObject(item)) {
+ children = item.children;
+ delete item.children;
+ type = item.type || 'text';
+ delete item.type;
+ switch (Lang.isString(type) && type.toLowerCase()) {
+ case 'text':
+ node = new Widget.TextNode(item, parent);
+ break;
+ case 'menu':
+ node = new Widget.MenuNode(item, parent);
+ break;
+ case 'html':
+ node = new Widget.HTMLNode(item, parent);
+ break;
+ default:
+ if (Lang.isString(type)) {
+ NodeType = Widget[type];
+ } else {
+ NodeType = type;
+ }
+ if (Lang.isObject(NodeType)) {
+ for (ThisType = NodeType; ThisType && ThisType !== Widget.Node; ThisType = ThisType.superclass.constructor) {}
+ if (ThisType) {
+ node = new NodeType(item, parent);
+ } else {
+ }
+ } else {
+ }
+ }
+ if (children) {
+ build(node,children);
+ }
+ } else {
+ }
+ }
+ };
+ if (!Lang.isArray(oConfig)) {
+ oConfig = [oConfig];
+ }
+
+
+ build(this.root,oConfig);
+ },
+/**
+ * Builds the TreeView from existing markup. Markup should consist of <UL> or <OL> elements containing <LI> elements.
+ * Each <LI> can have one element used as label and a second optional element which is to be a <UL> or <OL>
+ * containing nested nodes.
+ * Depending on what the first element of the <LI> element is, the following Nodes will be created:
+ *
+ * Only the first outermost (un-)ordered list in the markup and its children will be parsed.
+ * Nodes will be collapsed unless an <LI> tag has a className called 'expanded'.
+ * All other className attributes will be copied over to the Node className property.
+ * If the <LI> element contains an attribute called yuiConfig, its contents should be a JSON-encoded object
+ * as the one used in method buildTreeFromObject.
+ * @method buildTreeFromMarkup
+ * @param id {string|HTMLElement} The id of the element that contains the markup or a reference to it.
+ */
+ buildTreeFromMarkup: function (id) {
+ var build = function (markup) {
+ var el, child, branch = [], config = {}, label, yuiConfig;
+ // Dom's getFirstChild and getNextSibling skip over text elements
+ for (el = Dom.getFirstChild(markup); el; el = Dom.getNextSibling(el)) {
+ switch (el.tagName.toUpperCase()) {
+ case 'LI':
+ label = '';
+ config = {
+ expanded: Dom.hasClass(el,'expanded'),
+ title: el.title || el.alt || null,
+ className: Lang.trim(el.className.replace(/\bexpanded\b/,'')) || null
+ };
+ // I cannot skip over text elements here because I want them for labels
+ child = el.firstChild;
+ if (child.nodeType == 3) {
+ // nodes with only whitespace, tabs and new lines don't count, they are probably just formatting.
+ label = Lang.trim(child.nodeValue.replace(/[\n\t\r]*/g,''));
+ if (label) {
+ config.type = 'text';
+ config.label = label;
+ } else {
+ child = Dom.getNextSibling(child);
+ }
+ }
+ if (!label) {
+ if (child.tagName.toUpperCase() == 'A') {
+ config.type = 'text';
+ config.label = child.innerHTML;
+ config.href = child.href;
+ config.target = child.target;
+ config.title = child.title || child.alt || config.title;
+ } else {
+ config.type = 'html';
+ var d = document.createElement('div');
+ d.appendChild(child.cloneNode(true));
+ config.html = d.innerHTML;
+ config.hasIcon = true;
+ }
+ }
+ // see if after the label it has a further list which will become children of this node.
+ child = Dom.getNextSibling(child);
+ switch (child && child.tagName.toUpperCase()) {
+ case 'UL':
+ case 'OL':
+ config.children = build(child);
+ break;
+ }
+ // if there are further elements or text, it will be ignored.
+
+ if (YAHOO.lang.JSON) {
+ yuiConfig = el.getAttribute('yuiConfig');
+ if (yuiConfig) {
+ yuiConfig = YAHOO.lang.JSON.parse(yuiConfig);
+ config = YAHOO.lang.merge(config,yuiConfig);
+ }
+ }
+
+ branch.push(config);
+ break;
+ case 'UL':
+ case 'OL':
+ config = {
+ type: 'text',
+ label: '',
+ children: build(child)
+ };
+ branch.push(config);
+ break;
+ }
+ }
+ return branch;
+ };
+
+ // var markup = Dom.getChildrenBy(Dom.get(id),function (el) {
+ // var tag = el.tagName.toUpperCase();
+ // return tag == 'UL' || tag == 'OL';
+ // });
+
+ var markup = Y.Selector.query('#' + this.id + '> ul,ol');
+
+ if (markup.length) {
+ this.buildTreeFromObject(build(markup[0]));
+ } else {
+ }
+ },
+ /**
+ * Returns the TD element where the event has occurred
+ * @method _getEventTargetTdEl
+ * @private
+ */
+ _getEventTargetTdEl: function (ev) {
+ var target = ev.target,
+ crit = 'td .ygtvrow',
+ targetEl, pnode = target.get('parentNode');
+
+ if (target && pnode && !pnode.hasClass('ygtvrow')) {
+ target = target.ancestor('td');
+ pnode = target && target.get('parentNode');
+ }
+
+ if (!target) {
+ return null;
+ }
+
+ targetEl = target._node || target;
+
+ // If it is a spacer cell, do nothing
+ if (/\bygtv(blank)?depthcell/.test(targetEl.className)) {
+ return null;
+ }
+
+ // If it has an id, search for the node number and see if it belongs to a node in this tree.
+ if (targetEl.id) {
+ var m = targetEl.id.match(/\bygtv([^\d]*)(.*)/);
+ if (m && m[2] && this._nodes[m[2]]) {
+ return targetEl;
+ }
+ }
+
+ return null;
+ },
+ /**
+ *.DOM, Event listener for click events
+ * @method _onClickEvent
+ * @private
+ */
+ _onClickEvent: function (ev) {
+ var self = this,
+ td = this._getEventTargetTdEl(ev),
+ node,
+ target,
+ toggle = function (force) {
+ node.focus();
+ if (force || !node.href) {
+ node.toggle();
+ try {
+ ev.preventDefault();
+ } catch (e) {
+ // @TODO
+ // For some reason IE8 is providing an event object with
+ // most of the fields missing, but only when clicking on
+ // the node's label, and only when working with inline
+ // editing. This generates a "Member not found" error
+ // in that browser. Determine if this is a browser
+ // bug, or a problem with this code. Already checked to
+ // see if the problem has to do with access the event
+ // in the outer scope, and that isn't the problem.
+ // Maybe the markup for inline editing is broken.
+ }
+ }
+ };
+
+ if (!td) {
+ return;
+ }
+
+ node = this.getNodeByElement(td);
+ if (!node) {
+ return;
+ }
+
+ // exception to handle deprecated event labelClick
+ // @TODO take another look at this deprecation. It is common for people to
+ // only be interested in the label click, so why make them have to test
+ // the node type to figure out whether the click was on the label?
+
+ // target = Event.getTarget(ev);
+ target = ev.target;
+
+ // if (Dom.hasClass(target, node.labelStyle) || Dom.getAncestorByClassName(target,node.labelStyle)) {
+ if (target.hasClass(node.labelStyle) || target.ancestor(node.labelStyle)) {
+ this.fire('labelClick', node);
+ }
+
+ // If it is a toggle cell, toggle
+ if (/\bygtv[tl][mp]h?h?/.test(td.className)) {
+ toggle(true);
+ } else {
+ if (this._dblClickTimer) {
+ window.clearTimeout(this._dblClickTimer);
+ this._dblClickTimer = null;
+ } else {
+ if (this._hasDblClickSubscriber) {
+ this._dblClickTimer = window.setTimeout(function () {
+ self._dblClickTimer = null;
+ if (self.fire('clickEvent', {event:ev,node:node}) !== false) {
+ toggle();
+ }
+ }, 200);
+ } else {
+ if (self.fire('clickEvent', {event:ev,node:node}) !== false) {
+ toggle();
+ }
+ }
+ }
+ }
+ },
+
+ /**
+ * Event listener for double-click events
+ * @method _onDblClickEvent
+ * @private
+ */
+ _onDblClickEvent: function (ev) {
+ if (!this._hasDblClickSubscriber) {
+ return;
+ }
+
+ var td = this._getEventTargetTdEl(ev);
+ if (!td) {
+ return;
+ }
+
+ if (!(/\bygtv[tl][mp]h?h?/.test(td.className))) {
+
+ this.fire('dblClickEvent', {
+ event: ev,
+ node: this.getNodeByElement(td)
+ });
+
+ if (this._dblClickTimer) {
+ window.clearTimeout(this._dblClickTimer);
+ this._dblClickTimer = null;
+ }
+ }
+ },
+ /**
+ * Event listener for mouse over events
+ * @method _onMouseOverEvent
+ * @private
+ */
+ _onMouseOverEvent:function (ev) {
+ var target;
+ if ((target = this._getEventTargetTdEl(ev)) && (target = this.getNodeByElement(target)) && (target = target.getToggleEl())) {
+ target.className = target.className.replace(/\bygtv([lt])([mp])\b/gi,'ygtv$1$2h');
+ }
+ },
+ /**
+ * Event listener for mouse out events
+ * @method _onMouseOutEvent
+ * @private
+ */
+ _onMouseOutEvent: function (ev) {
+ var target;
+ if ((target = this._getEventTargetTdEl(ev)) && (target = this.getNodeByElement(target)) && (target = target.getToggleEl())) {
+ target.className = target.className.replace(/\bygtv([lt])([mp])h\b/gi,'ygtv$1$2');
+ }
+ },
+ /**
+ * Event listener for key down events
+ * @method _onKeyDownEvent
+ * @private
+ */
+ _onKeyDownEvent: function (ev) {
+ var target = ev.target,
+ targetEl = target._node,
+ node = this.getNodeByElement(targetEl),
+ newNode = node;
+
+ switch(ev.keyCode) {
+ case KEY.UP:
+ do {
+ if (newNode.previousSibling) {
+ newNode = newNode.previousSibling;
+ } else {
+ newNode = newNode.parent;
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ case KEY.DOWN:
+ do {
+ if (newNode.nextSibling) {
+ newNode = newNode.nextSibling;
+ } else {
+ newNode.expand();
+ newNode = (newNode.children.length || null) && newNode.children[0];
+ }
+ } while (newNode && !newNode._canHaveFocus);
+ if (newNode) { newNode.focus();}
+ ev.preventDefault();
+ break;
+ case KEY.LEFT:
+ do {
+ if (newNode.parent) {
+ newNode = newNode.parent;
+ } else {
+ newNode = newNode.previousSibling;
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus();}
+ ev.preventDefault();
+ break;
+ case KEY.RIGHT:
+ var self = this,
+ moveFocusRight,
+ focusOnExpand = function (newNode) {
+ self.unsubscribe('expandComplete',focusOnExpand);
+ moveFocusRight(newNode);
+ };
+ moveFocusRight = function (newNode) {
+ do {
+ if (newNode.isDynamic() && !newNode.childrenRendered) {
+ self.subscribe('expandComplete',focusOnExpand);
+ newNode.expand();
+ newNode = null;
+ break;
+ } else {
+ newNode.expand();
+ if (newNode.children.length) {
+ newNode = newNode.children[0];
+ } else {
+ newNode = newNode.nextSibling;
+ }
+ }
+ } while (newNode && !newNode._canHaveFocus());
+ if (newNode) { newNode.focus();}
+ };
+
+ moveFocusRight(newNode);
+ ev.preventDefault();
+ break;
+ case KEY.ENTER:
+ if (node.href) {
+ if (node.target) {
+ window.open(node.href,node.target);
+ } else {
+ window.location(node.href);
+ }
+ } else {
+ node.toggle();
+ }
+ this.fire('enterKeyPressed',node);
+ ev.preventDefault();
+ break;
+ case KEY.HOME:
+ newNode = this.getRoot();
+ if (newNode.children.length) {newNode = newNode.children[0];}
+ if (newNode._canHaveFocus()) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ case KEY.END:
+ newNode = newNode.parent.children;
+ newNode = newNode[newNode.length -1];
+ if (newNode._canHaveFocus()) { newNode.focus(); }
+ ev.preventDefault();
+ break;
+ // case KEY.PAGE_UP:
+ // break;
+ // case KEY.PAGE_DOWN:
+ // break;
+ case 107: // plus key
+ if (ev.shiftKey) {
+ node.parent.expandAll();
+ } else {
+ node.expand();
+ }
+ break;
+ case 109: // minus key
+ if (ev.shiftKey) {
+ node.parent.collapseAll();
+ } else {
+ node.collapse();
+ }
+ break;
+ default:
+ break;
+ }
+ },
+ /**
+ * Renders the tree boilerplate and visible nodes
+ * @method render
+ */
+ render: function() {
+ var html = this.root.getHtml(),
+ el = this.getEl();
+ el.innerHTML = html;
+ if (!this._hasEvents) {
+ Y.on('click', this._onClickEvent, el, this);
+ Y.on('dblclick', this._onDblClickEvent, el, this, true);
+ Y.on('mouseover', this._onMouseOverEvent, el, this, true);
+ Y.on('mouseout', this._onMouseOutEvent, el, this, true);
+ Y.on('keydown', this._onKeyDownEvent, el, this, true);
+ }
+ this._hasEvents = true;
+ },
+
+ /**
+ * Returns the tree's host element
+ * @method getEl
+ * @return {HTMLElement} the host element
+ */
+ getEl: function() {
+ if (! this._el) {
+ var el = Y.Selector.query('#' + this.id, null, true);
+ this._el = el;
+
+ }
+ return this._el;
+ },
+
+ /**
+ * Nodes register themselves with the tree instance when they are created.
+ * @method regNode
+ * @param node {Node} the node to register
+ * @private
+ */
+ regNode: function(node) {
+ this._nodes[node.index] = node;
+ },
+
+ /**
+ * Returns the root node of this tree
+ * @method getRoot
+ * @return {Node} the root node
+ */
+ getRoot: function() {
+ return this.root;
+ },
+
+ /**
+ * Configures this tree to dynamically load all child data
+ * @method setDynamicLoad
+ * @param {function} fnDataLoader the function that will be called to get the data
+ * @param iconMode {int} configures the icon that is displayed when a dynamic
+ * load node is expanded the first time without children. By default, the
+ * "collapse" icon will be used. If set to 1, the leaf node icon will be
+ * displayed.
+ */
+ setDynamicLoad: function(fnDataLoader, iconMode) {
+ this.root.setDynamicLoad(fnDataLoader, iconMode);
+ },
+
+ /**
+ * Expands all child nodes. Note: this conflicts with the "multiExpand"
+ * node property. If expand all is called in a tree with nodes that
+ * do not allow multiple siblings to be displayed, only the last sibling
+ * will be expanded.
+ * @method expandAll
+ */
+ expandAll: function() {
+ if (!this.locked) {
+ this.root.expandAll();
+ }
+ },
+
+ /**
+ * Collapses all expanded child nodes in the entire tree.
+ * @method collapseAll
+ */
+ collapseAll: function() {
+ if (!this.locked) {
+ this.root.collapseAll();
+ }
+ },
+
+ /**
+ * Returns a node in the tree that has the specified index (this index
+ * is created internally, so this function probably will only be used
+ * in html generated for a given node.)
+ * @method getNodeByIndex
+ * @param {int} nodeIndex the index of the node wanted
+ * @return {Node} the node with index=nodeIndex, null if no match
+ */
+ getNodeByIndex: function(nodeIndex) {
+ var n = this._nodes[nodeIndex];
+ return (n) ? n : null;
+ },
+
+ /**
+ * Returns a node that has a matching property and value in the data
+ * object that was passed into its constructor.
+ * @method getNodeByProperty
+ * @param {object} property the property to search (usually a string)
+ * @param {object} value the value we want to find (usuall an int or string)
+ * @return {Node} the matching node, null if no match
+ */
+ getNodeByProperty: function(property, value) {
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if ((property in n && n[property] == value) || (n.data && value == n.data[property])) {
+ return n;
+ }
+ }
+ }
+
+ return null;
+ },
+
+ /**
+ * Returns a collection of nodes that have a matching property
+ * and value in the data object that was passed into its constructor.
+ * @method getNodesByProperty
+ * @param {object} property the property to search (usually a string)
+ * @param {object} value the value we want to find (usuall an int or string)
+ * @return {Array} the matching collection of nodes, null if no match
+ */
+ getNodesByProperty: function(property, value) {
+ var values = [];
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if ((property in n && n[property] == value) || (n.data && value == n.data[property])) {
+ values.push(n);
+ }
+ }
+ }
+
+ return (values.length) ? values : null;
+ },
+
+
+ /**
+ * Returns a collection of nodes that have passed the test function
+ * passed as its only argument.
+ * The function will receive a reference to each node to be tested.
+ * @method getNodesBy
+ * @param {function} a boolean function that receives a Node instance and returns true to add the node to the results list
+ * @return {Array} the matching collection of nodes, null if no match
+ */
+ getNodesBy: function(fn) {
+ var values = [];
+ for (var i in this._nodes) {
+ if (this._nodes.hasOwnProperty(i)) {
+ var n = this._nodes[i];
+ if (fn(n)) {
+ values.push(n);
+ }
+ }
+ }
+ return (values.length) ? values : null;
+ },
+ /**
+ * Returns the treeview node reference for an ancestor element
+ * of the node, or null if it is not contained within any node
+ * in this tree.
+ * @method getNodeByElement
+ * @param el {HTMLElement} the element to test
+ * @return {YAHOO.widget.Node} a node reference or null
+ */
+ getNodeByElement: function(el) {
+
+ var p=el, m, re=/ygtv([^\d]*)(.*)/;
+
+ do {
+
+ if (p && p.id) {
+ m = p.id.match(re);
+ if (m && m[2]) {
+ return this.getNodeByIndex(m[2]);
+ }
+ }
+
+ p = p.parentNode;
+
+ if (!p || !p.tagName) {
+ break;
+ }
+
+ }
+ while (p.id !== this.id && p.tagName.toLowerCase() !== "body");
+
+ return null;
+ },
+
+ /**
+ * When in singleNodeHighlight it returns the node highlighted
+ * or null if none. Returns null if singleNodeHighlight is false.
+ * @method getHighlightedNode
+ * @return {YAHOO.widget.Node} a node reference or null
+ */
+ getHighlightedNode: function() {
+ return this._currentlyHighlighted;
+ },
+
+
+ /**
+ * Removes the node and its children, and optionally refreshes the
+ * branch of the tree that was affected.
+ * @method removeNode
+ * @param {Node} node to remove
+ * @param {boolean} autoRefresh automatically refreshes branch if true
+ * @return {boolean} False is there was a problem, true otherwise.
+ */
+ removeNode: function(node, autoRefresh) {
+
+ // Don't delete the root node
+ if (node.isRoot()) {
+ return false;
+ }
+
+ // Get the branch that we may need to refresh
+ var p = node.parent;
+ if (p.parent) {
+ p = p.parent;
+ }
+
+ // Delete the node and its children
+ this._deleteNode(node);
+
+ // Refresh the parent of the parent
+ if (autoRefresh && p && p.childrenRendered) {
+ p.refresh();
+ }
+
+ return true;
+ },
+
+ /**
+ * wait until the animation is complete before deleting
+ * to avoid javascript errors
+ * @method _removeChildren_animComplete
+ * @param o the custom event payload
+ * @private
+ */
+ _removeChildren_animComplete: function(o) {
+ this.unsubscribe(this._removeChildren_animComplete);
+ this.removeChildren(o.node);
+ },
+
+ /**
+ * Deletes this nodes child collection, recursively. Also collapses
+ * the node, and resets the dynamic load flag. The primary use for
+ * this method is to purge a node and allow it to fetch its data
+ * dynamically again.
+ * @method removeChildren
+ * @param {Node} node the node to purge
+ */
+ removeChildren: function(node) {
+
+ if (node.expanded) {
+ // wait until the animation is complete before deleting to
+ // avoid javascript errors
+ if (this._collapseAnim) {
+ this.subscribe("animComplete",
+ this._removeChildren_animComplete, this, true);
+ Widget.Node.prototype.collapse.call(node);
+ return;
+ }
+
+ node.collapse();
+ }
+
+ while (node.children.length) {
+ this._deleteNode(node.children[0]);
+ }
+
+ if (node.isRoot()) {
+ Widget.Node.prototype.expand.call(node);
+ }
+
+ node.childrenRendered = false;
+ node.dynamicLoadComplete = false;
+
+ node.updateIcon();
+ },
+
+ /**
+ * Deletes the node and recurses children
+ * @method _deleteNode
+ * @private
+ */
+ _deleteNode: function(node) {
+ // Remove all the child nodes first
+ this.removeChildren(node);
+
+ // Remove the node from the tree
+ this.popNode(node);
+ },
+
+ /**
+ * Removes the node from the tree, preserving the child collection
+ * to make it possible to insert the branch into another part of the
+ * tree, or another tree.
+ * @method popNode
+ * @param {Node} node to remove
+ */
+ popNode: function(node) {
+ var p = node.parent;
+
+ // Update the parent's collection of children
+ var a = [];
+
+ for (var i=0, len=p.children.length;i';
+
+ for (var i=0;i ';
+ }
+
+ sb[sb.length] = ' 0;
+ },
+ /**
+ * Removes the focus of previously selected Node
+ * @method _removeFocus
+ * @private
+ */
+ _removeFocus:function () {
+ if (this._focusedItem) {
+ Y.Event.detach('blur', this._focusedItem);
+ this._focusedItem = null;
+ }
+ var el;
+ while ((el = this._focusHighlightedItems.shift())) { // yes, it is meant as an assignment, really
+ Dom.removeClass(el,YAHOO.widget.TreeView.FOCUS_CLASS_NAME);
+ }
+ },
+ /**
+ * Sets the focus on the node element.
+ * It will only be able to set the focus on nodes that have anchor elements in it.
+ * Toggle or branch icons have anchors and can be focused on.
+ * If will fail in nodes that have no anchor
+ * @method focus
+ * @return {boolean} success
+ */
+ focus: function () {
+ var focused = false, self = this;
+
+ if (this.tree.currentFocus) {
+ this.tree.currentFocus._removeFocus();
+ }
+
+ var expandParent = function (node) {
+ if (node.parent) {
+ expandParent(node.parent);
+ node.parent.expand();
+ }
+ };
+ expandParent(this);
+
+ var root = new Y.Node(self.getEl().firstChild);
+
+ var tds = root.queryAll('td');
+
+ tds.each(function(node) {
+
+ if ((/ygtv(([tl][pmn]h?)|(content))/).test(node.get('className'))) {
+
+ node.addClass(YAHOO.widget.TreeView.FOCUS_CLASS_NAME);
+
+ if (!focused) {
+
+ var a = node.query('a', null, true);
+ if (a) {
+ var aRef = a._node;
+ a.focus();
+ self._focusedItem = aRef;
+ a.on('blur', function () {
+ self.tree.fire('focusChanged', {
+ oldNode: self.tree.currentFocus,
+ newNode: null
+ });
+ self.tree.currentFocus = null;
+ self._removeFocus();
+ });
+ focused = true;
+ }
+ }
+ self._focusHighlightedItems.push(node._node);
+ }
+ });
+
+ if (focused) {
+ this.tree.fire('focusChanged',{oldNode:this.tree.currentFocus,newNode:this});
+ this.tree.currentFocus = this;
+ } else {
+ this.tree.fire('focusChanged',{oldNode:self.tree.currentFocus,newNode:null});
+ this.tree.currentFocus = null;
+ this._removeFocus();
+ }
+ return focused;
+ },
+
+ /**
+ * Count of nodes in a branch
+ * @method getNodeCount
+ * @return {int} number of nodes in the branch
+ */
+ getNodeCount: function() {
+ for (var i = 0, count = 0;i< this.children.length;i++) {
+ count += this.children[i].getNodeCount();
+ }
+ return count + 1;
+ },
+
+ /**
+ * Returns an object which could be used to build a tree out of this node and its children.
+ * It can be passed to the tree constructor to reproduce this node as a tree.
+ * It will return false if the node or any children loads dynamically, regardless of whether it is loaded or not.
+ * @method getNodeDefinition
+ * @return {Object | false} definition of the tree or false if the node or any children is defined as dynamic
+ */
+ getNodeDefinition: function() {
+
+ if (this.isDynamic()) { return false; }
+
+ var def, defs = Lang.merge(this.data), children = [];
+
+
+
+ if (this.expanded) {defs.expanded = this.expanded; }
+ if (!this.multiExpand) { defs.multiExpand = this.multiExpand; }
+ if (!this.renderHidden) { defs.renderHidden = this.renderHidden; }
+ if (!this.hasIcon) { defs.hasIcon = this.hasIcon; }
+ if (this.nowrap) { defs.nowrap = this.nowrap; }
+ if (this.className) { defs.className = this.className; }
+ if (this.editable) { defs.editable = this.editable; }
+ if (this.enableHighlight) { defs.enableHighlight = this.enableHighlight; }
+ if (this.highlightState) { defs.highlightState = this.highlightState; }
+ if (this.propagateHighlightUp) { defs.propagateHighlightUp = this.propagateHighlightUp; }
+ if (this.propagateHighlightDown) { defs.propagateHighlightDown = this.propagateHighlightDown; }
+ defs.type = this._type;
+
+
+
+ for (var i = 0; i < this.children.length;i++) {
+ def = this.children[i].getNodeDefinition();
+ if (def === false) { return false;}
+ children.push(def);
+ }
+ if (children.length) { defs.children = children; }
+ return defs;
+ },
+
+
+ /**
+ * Generates the link that will invoke this node's toggle method
+ * @method getToggleLink
+ * @return {string} the javascript url for toggling this node
+ */
+ getToggleLink: function() {
+ return 'return false;';
+ },
+
+ /**
+ * Sets the value of property for this node and all loaded descendants.
+ * Only public and defined properties can be set, not methods.
+ * Values for unknown properties will be assigned to the refNode.data object
+ * @method setNodesProperty
+ * @param name {string} Name of the property to be set
+ * @param value {any} value to be set
+ * @param refresh {boolean} if present and true, it does a refresh
+ */
+ setNodesProperty: function(name, value, refresh) {
+ if (name.charAt(0) != '_' && !Lang.isUndefined(this[name]) && !Lang.isFunction(this[name]) ) {
+ this[name] = value;
+ } else {
+ this.data[name] = value;
+ }
+ for (var i = 0; i < this.children.length;i++) {
+ this.children[i].setNodesProperty(name,value);
+ }
+ if (refresh) {
+ this.refresh();
+ }
+ },
+ /**
+ * Toggles the highlighted state of a Node
+ * @method toggleHighlight
+ */
+ toggleHighlight: function() {
+ if (this.enableHighlight) {
+ // unhighlights only if fully highligthed. For not or partially highlighted it will highlight
+ if (this.highlightState == 1) {
+ this.unhighlight();
+ } else {
+ this.highlight();
+ }
+ }
+ },
+
+ /**
+ * Turns highlighting on node.
+ * @method highlight
+ * @param _silent {boolean} optional, don't fire the highlightEvent
+ */
+ highlight: function(_silent) {
+ if (this.enableHighlight) {
+ if (this.tree.singleNodeHighlight) {
+ if (this.tree._currentlyHighlighted) {
+ this.tree._currentlyHighlighted.unhighlight(_silent);
+ }
+ this.tree._currentlyHighlighted = this;
+ }
+ this.highlightState = 1;
+ this._setHighlightClassName();
+ if (!this.tree.singleNodeHighlight) {
+ if (this.propagateHighlightDown) {
+ for (var i = 0;i < this.children.length;i++) {
+ this.children[i].highlight(true);
+ }
+ }
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ if (!_silent) {
+ this.tree.fire('highlightEvent',this);
+ }
+ }
+ },
+ /**
+ * Turns highlighting off a node.
+ * @method unhighlight
+ * @param _silent {boolean} optional, don't fire the highlightEvent
+ */
+ unhighlight: function(_silent) {
+ if (this.enableHighlight) {
+ // might have checked singleNodeHighlight but it wouldn't really matter either way
+ this.tree._currentlyHighlighted = null;
+ this.highlightState = 0;
+ this._setHighlightClassName();
+ if (!this.tree.singleNodeHighlight) {
+ if (this.propagateHighlightDown) {
+ for (var i = 0;i < this.children.length;i++) {
+ this.children[i].unhighlight(true);
+ }
+ }
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ if (!_silent) {
+ this.tree.fire('highlightEvent',this);
+ }
+ }
+ },
+ /**
+ * Checks whether all or part of the children of a node are highlighted and
+ * sets the node highlight to full, none or partial highlight.
+ * If set to propagate it will further call the parent
+ * @method _childrenHighlighted
+ * @private
+ */
+ _childrenHighlighted: function() {
+ var yes = false, no = false;
+ if (this.enableHighlight) {
+ for (var i = 0;i < this.children.length;i++) {
+ switch(this.children[i].highlightState) {
+ case 0:
+ no = true;
+ break;
+ case 1:
+ yes = true;
+ break;
+ case 2:
+ yes = no = true;
+ break;
+ }
+ }
+ if (yes && no) {
+ this.highlightState = 2;
+ } else if (yes) {
+ this.highlightState = 1;
+ } else {
+ this.highlightState = 0;
+ }
+ this._setHighlightClassName();
+ if (this.propagateHighlightUp) {
+ if (this.parent) {
+ this.parent._childrenHighlighted();
+ }
+ }
+ }
+ },
+
+ /**
+ * Changes the classNames on the toggle and content containers to reflect the current highlighting
+ * @method _setHighlightClassName
+ * @private
+ */
+ _setHighlightClassName: function() {
+ var el = document.getElementById('ygtvtableel' + this.index);
+ if (el) {
+ el.className = el.className.replace(/\bygtv-highlight\d\b/gi,'ygtv-highlight' + this.highlightState);
+ }
+ }
+
+});
+
+})();
+(function () {
+ var YAHOO = Y.Port();
+/**
+ * A custom YAHOO.widget.Node that handles the unique nature of
+ * the virtual, presentationless root node.
+ * @namespace YAHOO.widget
+ * @class RootNode
+ * @extends YAHOO.widget.Node
+ * @param oTree {YAHOO.widget.TreeView} The tree instance this node belongs to
+ * @constructor
+ */
+var RootNode = function(oTree) {
+ // Initialize the node with null params. The root node is a
+ // special case where the node has no presentation. So we have
+ // to alter the standard properties a bit.
+ this._nodeinit(null, null, true);
+
+ /*
+ * For the root node, we get the tree reference from as a param
+ * to the constructor instead of from the parent element.
+ */
+ this.tree = oTree;
+};
+
+YAHOO.widget.RootNode = RootNode;
+var NS = Y.namespace('apm');
+NS.RootNode = YAHOO.widget.RootNode;
+
+Y.extend(RootNode, YAHOO.widget.Node, {
+
+ /**
+ * The node type
+ * @property _type
+ * @type string
+ * @private
+ * @default "RootNode"
+ */
+ _type: "RootNode",
+
+ // overrides YAHOO.widget.Node
+ getNodeHtml: function() {
+ return "";
+ },
+
+ toString: function() {
+ return this._type;
+ },
+
+ loadComplete: function() {
+ this.tree.draw();
+ },
+
+ /**
+ * Count of nodes in tree.
+ * It overrides Nodes.getNodeCount because the root node should not be counted.
+ * @method getNodeCount
+ * @return {int} number of nodes in the tree
+ */
+ getNodeCount: function() {
+ for (var i = 0, count = 0;i< this.children.length;i++) {
+ count += this.children[i].getNodeCount();
+ }
+ return count;
+ },
+
+ /**
+ * Returns an object which could be used to build a tree out of this node and its children.
+ * It can be passed to the tree constructor to reproduce this node as a tree.
+ * Since the RootNode is automatically created by treeView,
+ * its own definition is excluded from the returned node definition
+ * which only contains its children.
+ * @method getNodeDefinition
+ * @return {Object | false} definition of the tree or false if any child node is defined as dynamic
+ */
+ getNodeDefinition: function() {
+
+ for (var def, defs = [], i = 0; i < this.children.length;i++) {
+ def = this.children[i].getNodeDefinition();
+ if (def === false) { return false;}
+ defs.push(def);
+ }
+ return defs;
+ },
+
+ collapse: function() {},
+ expand: function() {},
+ getSiblings: function() { return null; },
+ focus: function () {}
+
+});
+})();
+(function () {
+ var YAHOO = Y.Port(),
+ Lang = YAHOO.lang;
+/**
+ * The default node presentation. The first parameter should be
+ * either a string that will be used as the node's label, or an object
+ * that has at least a string property called label. By default, clicking the
+ * label will toggle the expanded/collapsed state of the node. By
+ * setting the href property of the instance, this behavior can be
+ * changed so that the label will go to the specified href.
+ * @namespace YAHOO.widget
+ * @class TextNode
+ * @extends YAHOO.widget.Node
+ * @constructor
+ * @param oData {object} a string or object containing the data that will
+ * be used to render this node.
+ * Providing a string is the same as providing an object with a single property named label.
+ * All values in the oData will be used to set equally named properties in the node
+ * as long as the node does have such properties, they are not undefined, private or functions.
+ * All attributes are made available in noderef.data, which
+ * can be used to store custom attributes. TreeView.getNode(s)ByProperty
+ * can be used to retrieve a node by one of the attributes.
+ * @param oParent {YAHOO.widget.Node} this node's parent node
+ * @param expanded {boolean} the initial expanded/collapsed state (deprecated; use oData.expanded)
+ */
+YAHOO.widget.TextNode = function(oData, oParent, expanded) {
+
+ if (oData) {
+ if (Lang.isString(oData)) {
+ oData = { label: oData };
+ }
+ this._nodeinit(oData, oParent, expanded);
+ this.setUpLabel(oData);
+ }
+};
+var NS = Y.namespace('apm');
+NS.TextNode = YAHOO.widget.TextNode;
+
+Y.extend(YAHOO.widget.TextNode, YAHOO.widget.Node, {
+
+ /**
+ * The CSS class for the label href. Defaults to ygtvlabel, but can be
+ * overridden to provide a custom presentation for a specific node.
+ * @property labelStyle
+ * @type string
+ */
+ labelStyle: "ygtvlabel",
+
+ /**
+ * The derived element id of the label for this node
+ * @property labelElId
+ * @type string
+ */
+ labelElId: null,
+
+ /**
+ * The text for the label. It is assumed that the oData parameter will
+ * either be a string that will be used as the label, or an object that
+ * has a property called "label" that we will use.
+ * @property label
+ * @type string
+ */
+ label: null,
+
+ /**
+ * The text for the title (tooltip) for the label element
+ * @property title
+ * @type string
+ */
+ title: null,
+
+ /**
+ * The href for the node's label. If one is not specified, the href will
+ * be set so that it toggles the node.
+ * @property href
+ * @type string
+ */
+ href: null,
+
+ /**
+ * The label href target, defaults to current window
+ * @property target
+ * @type string
+ */
+ target: "_self",
+
+ /**
+ * The node type
+ * @property _type
+ * @private
+ * @type string
+ * @default "TextNode"
+ */
+ _type: "TextNode",
+
+
+ /**
+ * Sets up the node label
+ * @method setUpLabel
+ * @param oData string containing the label, or an object with a label property
+ */
+ setUpLabel: function(oData) {
+
+ if (Lang.isString(oData)) {
+ oData = {
+ label: oData
+ };
+ } else {
+ if (oData.style) {
+ this.labelStyle = oData.style;
+ }
+ }
+
+ this.label = oData.label;
+
+ this.labelElId = "ygtvlabelel" + this.index;
+
+ },
+
+ /**
+ * Returns the label element
+ * @for YAHOO.widget.TextNode
+ * @method getLabelEl
+ * @return {object} the element
+ */
+ getLabelEl: function() {
+ return document.getElementById(this.labelElId);
+ },
+
+ // overrides YAHOO.widget.Node
+ getContentHtml: function() {
+ var sb = [];
+ sb[sb.length] = this.href?'
+ *
+ * Editors are free to use this object to store additional data.
+ * @property editorData
+ * @static
+ * @for YAHOO.widget.TreeView
+ */
+ TV.editorData = {
+ active:false,
+ whoHasIt:null, // which TreeView has it
+ nodeType:null,
+ editorPanel:null,
+ inputContainer:null,
+ buttonsContainer:null,
+ node:null, // which Node is being edited
+ saveOnEnter:true,
+ oldValue:undefined
+ // Each node type is free to add its own properties to this as it sees fit.
+ };
+
+ /**
+ * Validator function for edited data, called from the TreeView instance scope,
+ * receives the arguments (newValue, oldValue, nodeInstance)
+ * and returns either the validated (or type-converted) value or undefined.
+ * An undefined return will prevent the editor from closing
+ * @property validator
+ * @type function
+ * @default null
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto.validator = null;
+
+ /**
+ * Entry point for initializing the editing plug-in.
+ * TreeView will call this method on initializing if it exists
+ * @method _initEditor
+ * @for YAHOO.widget.TreeView
+ * @private
+ */
+
+ TVproto._initEditor = function () {
+ /**
+ * Fires when the user clicks on the ok button of a node editor
+ * @event editorSaveEvent
+ * @type CustomEvent
+ * @param oArgs.newValue {mixed} the new value just entered
+ * @param oArgs.oldValue {mixed} the value originally in the tree
+ * @param oArgs.node {YAHOO.widget.Node} the node that has the focus
+ * @for YAHOO.widget.TreeView
+ */
+ // this.publish("editorSaveEvent");
+
+ /**
+ * Fires when the user clicks on the cancel button of a node editor
+ * @event editorCancelEvent
+ * @type CustomEvent
+ * @param {YAHOO.widget.Node} node the node that has the focus
+ * @for YAHOO.widget.TreeView
+ */
+ // this.publish("editorCancelEvent");
+
+ };
+
+ /**
+ * Entry point of the editing plug-in.
+ * TreeView will call this method if it exists when a node label is clicked
+ * @method _nodeEditing
+ * @param node {YAHOO.widget.Node} the node to be edited
+ * @return {Boolean} true to indicate that the node is editable and prevent any further bubbling of the click.
+ * @for YAHOO.widget.TreeView
+ * @private
+ */
+ TVproto._nodeEditing = function (node) {
+
+ if (node.fillEditorContainer && node.editable) {
+
+ var ed, topLeft, buttons, button, editorData = TV.editorData;
+ editorData.active = true;
+ editorData.whoHasIt = this;
+ if (!editorData.nodeType) {
+ editorData.editorPanel = ed = document.body.appendChild(document.createElement('div'));
+ Dom.addClass(ed,'ygtv-label-editor');
+
+ buttons = editorData.buttonsContainer = ed.appendChild(document.createElement('div'));
+ Dom.addClass(buttons,'ygtv-button-container');
+ button = buttons.appendChild(document.createElement('button'));
+ Dom.addClass(button,'ygtvok');
+ button.innerHTML = ' ';
+ button = buttons.appendChild(document.createElement('button'));
+ Dom.addClass(button,'ygtvcancel');
+ button.innerHTML = ' ';
+
+ Y.on('click', function (ev) {
+ var target = ev.target,
+ targetEl = target._node,
+ node = TV.editorData.node;
+
+ // if (Dom.hasClass(target,'ygtvok')) {
+ if (target.hasClass('ygtvok')) {
+ ev.halt();
+ this._closeEditor(true);
+ }
+ // if (Dom.hasClass(target,'ygtvcancel')) {
+ if (target.hasClass('ygtvcancel')) {
+ ev.halt();
+ this._closeEditor(false);
+ }
+ }, buttons, this);
+
+ editorData.inputContainer = ed.appendChild(document.createElement('div'));
+ Dom.addClass(editorData.inputContainer,'ygtv-input');
+
+ Y.on('keydown', function (ev) {
+ var editorData = TV.editorData,
+ KEY = Y.TreeView.KEY;
+ switch (ev.keyCode) {
+ case KEY.ENTER:
+ ev.halt();
+ if (editorData.saveOnEnter) {
+ this._closeEditor(true);
+ }
+ break;
+ case KEY.ESCAPE:
+ ev.halt();
+ this._closeEditor(false);
+ break;
+ }
+ }, ed, this);
+
+
+
+ } else {
+ ed = editorData.editorPanel;
+ }
+ editorData.node = node;
+ if (editorData.nodeType) {
+ Dom.removeClass(ed,'ygtv-edit-' + editorData.nodeType);
+ }
+ Dom.addClass(ed,' ygtv-edit-' + node._type);
+ topLeft = Dom.getXY(node.getContentEl());
+ Dom.setStyle(ed,'left',topLeft[0] + 'px');
+ Dom.setStyle(ed,'top',topLeft[1] + 'px');
+ Dom.setStyle(ed,'display','block');
+ ed.focus();
+ node.fillEditorContainer(editorData);
+
+ return true; // If inline editor available, don't do anything else.
+ }
+ };
+
+ /**
+ * Method to be associated with an event (clickEvent, dblClickEvent or enterKeyPressed) to pop up the contents editor
+ * It calls the corresponding node editNode method.
+ * @method onEventEditNode
+ * @param oArgs {object} Object passed as arguments to TreeView event listeners
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto.onEventEditNode = function (oArgs) {
+ if (oArgs instanceof YAHOO.widget.Node) {
+ oArgs.editNode();
+ } else if (oArgs.node instanceof YAHOO.widget.Node) {
+ oArgs.node.editNode();
+ }
+ };
+
+ /**
+ * Method to be called when the inline editing is finished and the editor is to be closed
+ * @method _closeEditor
+ * @param save {Boolean} true if the edited value is to be saved, false if discarded
+ * @private
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto._closeEditor = function (save) {
+ var ed = TV.editorData,
+ node = ed.node,
+ close = true;
+ if (save) {
+ close = (ed.node.saveEditorValue(ed) !== false);
+ } else {
+ this.fire('editorCancelEvent', node);
+ }
+
+ if (close) {
+ Dom.setStyle(ed.editorPanel,'display','none');
+ ed.active = false;
+ node.focus();
+ }
+ };
+
+ /**
+ * Entry point for TreeView's destroy method to destroy whatever the editing plug-in has created
+ * @method _destroyEditor
+ * @private
+ * @for YAHOO.widget.TreeView
+ */
+ TVproto._destroyEditor = function() {
+ var ed = TV.editorData;
+ if (ed && ed.nodeType && (!ed.active || ed.whoHasIt === this)) {
+ Y.Event.detach('keydown', ed.editorPanel);
+ Y.Event.detach('click', ed.buttonContainer);
+ ed.node.destroyEditorContents(ed);
+ document.body.removeChild(ed.editorPanel);
+ ed.nodeType = ed.editorPanel = ed.inputContainer = ed.buttonsContainer = ed.whoHasIt = ed.node = null;
+ ed.active = false;
+ }
+ };
+
+ var Nproto = YAHOO.widget.Node.prototype;
+
+ /**
+ * Signals if the label is editable. (Ignored on TextNodes with href set.)
+ * @property editable
+ * @type boolean
+ * @for YAHOO.widget.Node
+ */
+ Nproto.editable = false;
+
+ /**
+ * pops up the contents editor, if there is one and the node is declared editable
+ * @method editNode
+ * @for YAHOO.widget.Node
+ */
+ Nproto.editNode = function () {
+ this.tree._nodeEditing(this);
+ };
+
+ /** Placeholder for a function that should provide the inline node label editor.
+ * Leaving it set to null will indicate that this node type is not editable.
+ * It should be overridden by nodes that provide inline editing.
+ * The Node-specific editing element (input box, textarea or whatever) should be inserted into editorData.inputContainer.
+ * @method fillEditorContainer
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return void
+ * @for YAHOO.widget.Node
+ */
+ Nproto.fillEditorContainer = null;
+
+ /**
+ * Node-specific destroy function to empty the contents of the inline editor panel.
+ * This function is the worst case alternative that will purge all possible events and remove the editor contents.
+ * Method Event.purgeElement is somewhat costly so if it can be replaced by specifc Event.removeListeners, it is better to do so.
+ * @method destroyEditorContents
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.Node
+ */
+ Nproto.destroyEditorContents = function (editorData) {
+ // In the worst case, if the input editor (such as the Calendar) has no destroy method
+ // we can only try to remove all possible events on it.
+ Event.purgeElement(editorData.inputContainer,true);
+ editorData.inputContainer.innerHTML = '';
+ };
+
+ /**
+ * Saves the value entered into the editor.
+ * @method saveEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {false or none} a return of exactly false will prevent the editor from closing
+ * @for YAHOO.widget.Node
+ */
+ Nproto.saveEditorValue = function (editorData) {
+ var node = editorData.node,
+ value,
+ validator = node.tree.validator;
+
+ value = this.getEditorValue(editorData);
+
+ if (Lang.isFunction(validator)) {
+ value = validator(value,editorData.oldValue,node);
+ if (Lang.isUndefined(value)) {
+ return false;
+ }
+ }
+
+ var ret = this.tree.fire('editorSaveEvent', {
+ newValue:value,
+ oldValue:editorData.oldValue,
+ node:node
+ });
+
+
+ if (ret !== false) {
+ this.displayEditedValue(value, editorData);
+ }
+ };
+
+ /**
+ * Returns the value(s) from the input element(s) .
+ * Should be overridden by each node type.
+ * @method getEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {any} value entered
+ * @for YAHOO.widget.Node
+ */
+
+ Nproto.getEditorValue = function (editorData) {
+ };
+
+ /**
+ * Finally displays the newly edited value(s) in the tree.
+ * Should be overridden by each node type.
+ * @method displayEditedValue
+ * @param value {any} value to be displayed and stored in the node
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.Node
+ */
+ Nproto.displayEditedValue = function (value,editorData) {
+ };
+
+ var TNproto = YAHOO.widget.TextNode.prototype;
+
+ /**
+ * Places an <input> textbox in the input container and loads the label text into it.
+ * @method fillEditorContainer
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return void
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.fillEditorContainer = function (editorData) {
+
+ var input;
+ // If last node edited is not of the same type as this one, delete it and fill it with our editor
+ if (editorData.nodeType != this._type) {
+ editorData.nodeType = this._type;
+ editorData.saveOnEnter = true;
+ editorData.node.destroyEditorContents(editorData);
+
+ editorData.inputElement = input = editorData.inputContainer.appendChild(document.createElement('input'));
+
+ } else {
+ // if the last node edited was of the same time, reuse the input element.
+ input = editorData.inputElement;
+ }
+ editorData.oldValue = this.label;
+ input.value = this.label;
+ input.focus();
+ input.select();
+ };
+
+ /**
+ * Returns the value from the input element.
+ * Overrides Node.getEditorValue.
+ * @method getEditorValue
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @return {string} value entered
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.getEditorValue = function (editorData) {
+ return editorData.inputElement.value;
+ };
+
+ /**
+ * Finally displays the newly edited value in the tree.
+ * Overrides Node.displayEditedValue.
+ * @method displayEditedValue
+ * @param value {string} value to be displayed and stored in the node
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.displayEditedValue = function (value,editorData) {
+ var node = editorData.node;
+ node.label = value;
+ node.getLabelEl().innerHTML = value;
+ };
+
+ /**
+ * Destroys the contents of the inline editor panel.
+ * Overrides Node.destroyEditorContent.
+ * Since we didn't set any event listeners on this inline editor, it is more efficient to avoid the generic method in Node.
+ * @method destroyEditorContents
+ * @param editorData {YAHOO.widget.TreeView.editorData} a shortcut to the static object holding editing information
+ * @for YAHOO.widget.TextNode
+ */
+ TNproto.destroyEditorContents = function (editorData) {
+ editorData.inputContainer.innerHTML = '';
+ };
+})();
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['node','gallery-port']});
diff --git a/build/gallery-yui2/gallery-yui2-debug.js b/build/gallery-yui2/gallery-yui2-debug.js
new file mode 100644
index 0000000000..fedf98d928
--- /dev/null
+++ b/build/gallery-yui2/gallery-yui2-debug.js
@@ -0,0 +1,216 @@
+YUI.add('gallery-yui2', function(Y) {
+
+/**
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-yui2". This will
+* // load a wrapper for YUI 2 code. This wrapper will allow you to define
+* // yui 2 dependencies, and wrapping yui 2 code using lazy load using YUI 2 Loader
+* // to include those dependencies.
+*
+* YUI().use("gallery-yui2", function(Y) {
+*
+* Y.yui2().use("tabview", function () {
+*
+* // The scope of the callback will be a reference to Y
+*
+* var myTabs = new YAHOO.widget.TabView("demo");
+*
+* });
+*
+* });
+*
+* </script>
+*
+ *
+ */
+Y.yui2 = function (o) {
+ o = _filterConf(o);
+ return {
+ /**
+ * Load a set of modules and notify thru the callback method.
+ * @method use
+ * @param modules* {string} 1-n modules to bind (uses arguments array)
+ * @param *callback {function} callback function executed when
+ * the instance has the required functionality. If included, it
+ * must be the last parameter.
+ *
+ * Y.yui2().use('tabview', callback)
+ *
+ * @return void
+ */
+ use: function () {
+ var a=Array.prototype.slice.call(arguments, 0),
+ callback = a.pop (),
+ _queue = Env._legacy._useQueue;
+
+ _queue.add ({
+ fn: function () {
+ var _loader = Env._legacy._loader;
+ _loader.require(a);
+ _loader.insert({
+ onSuccess: function (o) {
+ _queue.run();
+ callback.apply(Y, [Y, {success: o}]);
+ },
+ onFailure: function(o){
+ _queue.run();
+ callback.apply(Y, [Y, {failure: o}]);
+ },
+ onTimeout: function () {
+ _queue.run();
+ callback.apply(Y, [Y, {failure: { timeout: true }}]);
+ }
+ }, o.type);
+ },
+ autoContinue: false
+ });
+ // verifying if the loader is ready in the page, if not, it will be
+ // included automatically and then the process will continue.
+ if (!_queue.isRunning() && _queue.size()===1) {
+ _queue.run ();
+ }
+ }
+ };
+};
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['node-base', 'get', 'async-queue']});
diff --git a/build/gallery-yui2/gallery-yui2-min.js b/build/gallery-yui2/gallery-yui2-min.js
new file mode 100644
index 0000000000..94fa41f38b
--- /dev/null
+++ b/build/gallery-yui2/gallery-yui2-min.js
@@ -0,0 +1 @@
+YUI.add("gallery-yui2",function(A){var D=A.Env,F=((typeof YAHOO_config=="undefined"||!YAHOO_config)?{}:YAHOO_config),G=F.base||"http://yui.yahooapis.com/2.8.0/build/",B=F.seed||"yuiloader/yuiloader-min.js",K=!(typeof YAHOO=="undefined"||!YAHOO||!YAHOO.util||!YAHOO.util.YUILoader),C,E;function H(L){L.combine=L.combine||true;L.filter=L.filter||"min";return(new YAHOO.util.YUILoader(L));}function J(M,L){if(A.isObject(L)){L.name=L.name||M;L.type=L.type||((L.fullpath||L.path).indexOf(".css")>=0?"css":"js");D._legacy._useQueue.add({fn:function(){D._legacy._loader.addModule(L);},autoContinue:true});}}function I(N){N=N||{};var L=N.modules||{},M;for(M in L){if(L.hasOwnProperty(M)){J(M,L[M]);}}return N;}if(!D._legacy){D._legacy={_useQueue:new A.AsyncQueue()};if(!K){D._legacy._useQueue.add({fn:function(){YUI({modules:{"yui2-yuiloader":{fullpath:G+B}}}).use("yui2-yuiloader",function(M,L){if(L.success){D._legacy._loader=H(F);D._legacy._useQueue.run();}else{}});},autoContinue:false}).run();}F=I(F);}A.yui2=function(L){L=I(L);return{use:function(){var M=Array.prototype.slice.call(arguments,0),O=M.pop(),N=D._legacy._useQueue;N.add({fn:function(){var P=D._legacy._loader;P.require(M);P.insert({onSuccess:function(Q){N.run();O.apply(A,[A,{success:Q}]);},onFailure:function(Q){N.run();O.apply(A,[A,{failure:Q}]);},onTimeout:function(){N.run();O.apply(A,[A,{failure:{timeout:true}}]);}},L.type);},autoContinue:false});if(!N.isRunning()&&N.size()===1){N.run();}}};};},"gallery-2009.11.19-20",{requires:["node-base","get","async-queue"]});
\ No newline at end of file
diff --git a/build/gallery-yui2/gallery-yui2.js b/build/gallery-yui2/gallery-yui2.js
new file mode 100644
index 0000000000..9a99980bdd
--- /dev/null
+++ b/build/gallery-yui2/gallery-yui2.js
@@ -0,0 +1,213 @@
+YUI.add('gallery-yui2', function(Y) {
+
+/**
+*
+* <script type="text/javascript">
+*
+*
+* // Call the "use" method, passing in "gallery-yui2". This will
+* // load a wrapper for YUI 2 code. This wrapper will allow you to define
+* // yui 2 dependencies, and wrapping yui 2 code using lazy load using YUI 2 Loader
+* // to include those dependencies.
+*
+* YUI().use("gallery-yui2", function(Y) {
+*
+* Y.yui2().use("tabview", function () {
+*
+* // The scope of the callback will be a reference to Y
+*
+* var myTabs = new YAHOO.widget.TabView("demo");
+*
+* });
+*
+* });
+*
+* </script>
+*
+ *
+ */
+Y.yui2 = function (o) {
+ o = _filterConf(o);
+ return {
+ /**
+ * Load a set of modules and notify thru the callback method.
+ * @method use
+ * @param modules* {string} 1-n modules to bind (uses arguments array)
+ * @param *callback {function} callback function executed when
+ * the instance has the required functionality. If included, it
+ * must be the last parameter.
+ *
+ * Y.yui2().use('tabview', callback)
+ *
+ * @return void
+ */
+ use: function () {
+ var a=Array.prototype.slice.call(arguments, 0),
+ callback = a.pop (),
+ _queue = Env._legacy._useQueue;
+
+ _queue.add ({
+ fn: function () {
+ var _loader = Env._legacy._loader;
+ _loader.require(a);
+ _loader.insert({
+ onSuccess: function (o) {
+ _queue.run();
+ callback.apply(Y, [Y, {success: o}]);
+ },
+ onFailure: function(o){
+ _queue.run();
+ callback.apply(Y, [Y, {failure: o}]);
+ },
+ onTimeout: function () {
+ _queue.run();
+ callback.apply(Y, [Y, {failure: { timeout: true }}]);
+ }
+ }, o.type);
+ },
+ autoContinue: false
+ });
+ // verifying if the loader is ready in the page, if not, it will be
+ // included automatically and then the process will continue.
+ if (!_queue.isRunning() && _queue.size()===1) {
+ _queue.run ();
+ }
+ }
+ };
+};
+
+
+}, 'gallery-2009.11.19-20' ,{requires:['node-base', 'get', 'async-queue']});
diff --git a/src/gallery-accordion/README b/src/gallery-accordion/README
index 1d5c3c4bae..4fc229d138 100644
--- a/src/gallery-accordion/README
+++ b/src/gallery-accordion/README
@@ -1,6 +1,8 @@
Accordion widget for YUI 3
I. Changelog
+ver. 1.05
+ - Setting item label bugfix
ver. 1.04
- progressive enhancement improvements in AccordionItem
- header HTML structure changed - table no more used, links will be used instead
diff --git a/src/gallery-accordion/apidocs.sh b/src/gallery-accordion/apidocs.sh
index c42d810680..b333ed947b 100755
--- a/src/gallery-accordion/apidocs.sh
+++ b/src/gallery-accordion/apidocs.sh
@@ -20,7 +20,7 @@ generator_out=../../build/gallery-accordion/apidocs/
template=$yuidoc_home/template
# The version of your project to display within the documentation.
-version=1.04
+version=1.06
# The version of YUI the project is using. This effects the output for
# YUI configuration attributes. This should start with '2' or '3'.
diff --git a/src/gallery-accordion/js/gallery-accordion-item.js b/src/gallery-accordion/js/gallery-accordion-item.js
index 507064f096..0345f4bd06 100755
--- a/src/gallery-accordion/js/gallery-accordion-item.js
+++ b/src/gallery-accordion/js/gallery-accordion-item.js
@@ -1,5 +1,5 @@
/**
- * Provides the Accordion class
+ * Provides AccordionItem class
*
* @module gallery-accordion
*/
@@ -72,7 +72,12 @@ var Lang = Y.Lang,
HREF = "href",
HREF_VALUE = "#",
YUICONFIG = "yuiConfig",
- HEADER_CONTENT = "headerContent";
+ HEADER_CONTENT = "headerContent",
+
+ REGEX_TRUE = /^(?:true|yes|1)$/,
+ REGEX_AUTO = /^auto\s*/,
+ REGEX_STRETCH = /^stretch\s*/,
+ REGEX_FIXED = /^fixed-\d+/;
/**
* Static property provides a string to identify the class.
@@ -193,7 +198,7 @@ AccordionItem.ATTRS = {
},
/**
- * @description Get/Set the expanded status of the item
+ * @description Get/Set expanded status of the item
*
* @attribute expanded
* @default false
@@ -239,7 +244,7 @@ AccordionItem.ATTRS = {
},
/**
- * @description Get/Set the expanded status of the item
+ * @description Get/Set always visible status of the item
*
* @attribute alwaysVisible
* @default false
@@ -319,7 +324,7 @@ AccordionItem.HTML_PARSER = {
},
label: function( contentBox ){
- var node, labelSelector, yuiConfig;
+ var node, labelSelector, yuiConfig, label;
yuiConfig = this._getConfigDOMAttribute( contentBox );
@@ -327,6 +332,12 @@ AccordionItem.HTML_PARSER = {
return yuiConfig.label;
}
+ label = contentBox.getAttribute( "data-label" );
+
+ if( label ){
+ return label;
+ }
+
labelSelector = HEADER_SELECTOR_SUB + C_LABEL;
node = contentBox.query( labelSelector );
@@ -379,47 +390,70 @@ AccordionItem.HTML_PARSER = {
},
expanded: function( contentBox ){
- var yuiConfig = this._getConfigDOMAttribute( contentBox );
+ var yuiConfig, expanded;
+
+ yuiConfig = this._getConfigDOMAttribute( contentBox );
- if( yuiConfig && Lang.isValue( yuiConfig.expanded ) ){
+ if( yuiConfig && Lang.isBoolean( yuiConfig.expanded ) ){
return yuiConfig.expanded;
}
+ expanded = contentBox.getAttribute( "data-expanded" );
+
+ if( expanded ) {
+ return REGEX_TRUE.test( expanded );
+ }
+
return contentBox.hasClass( C_EXPANDED );
},
alwaysVisible: function( contentBox ){
- var value, yuiConfig;
+ var yuiConfig, alwaysVisible;
yuiConfig = this._getConfigDOMAttribute( contentBox );
- if( yuiConfig && Lang.isValue( yuiConfig.alwaysVisible ) ){
- value = yuiConfig.alwaysVisible;
+ if( yuiConfig && Lang.isBoolean( yuiConfig.alwaysVisible ) ){
+ alwaysVisible = yuiConfig.alwaysVisible;
} else {
- value = contentBox.hasClass( C_ALWAYSVISIBLE );
+ alwaysVisible = contentBox.getAttribute( "data-alwaysvisible" );
+
+ if( alwaysVisible ) {
+ alwaysVisible = REGEX_TRUE.test( alwaysVisible );
+ } else {
+ alwaysVisible = contentBox.hasClass( C_ALWAYSVISIBLE );
+ }
}
- if( Lang.isBoolean(value) && value ){
+ if( alwaysVisible ){
this.set( "expanded", true, {
internalCall: true
} );
}
- return value;
+ return alwaysVisible;
},
closable: function( contentBox ){
- var yuiConfig = this._getConfigDOMAttribute( contentBox );
+ var yuiConfig, closable;
+
+ yuiConfig = this._getConfigDOMAttribute( contentBox );
- if( yuiConfig && Lang.isValue( yuiConfig.closable ) ){
+ if( yuiConfig && Lang.isBoolean( yuiConfig.closable ) ){
return yuiConfig.closable;
}
+ closable = contentBox.getAttribute( "data-closable" );
+
+ if( closable ) {
+ return REGEX_TRUE.test( closable );
+ }
+
return contentBox.hasClass( C_CLOSABLE );
},
contentHeight: function( contentBox ){
- var contentHeightClass, classValue, height = 0, i, length, index, chr, yuiConfig;
+ var contentHeightClass, classValue, height = 0, index, yuiConfig,
+ contentHeight;
yuiConfig = this._getConfigDOMAttribute( contentBox );
@@ -427,6 +461,26 @@ AccordionItem.HTML_PARSER = {
return yuiConfig.contentHeight;
}
+ contentHeight = contentBox.getAttribute( "data-contentheight" );
+
+ if( REGEX_AUTO.test( contentHeight ) ){
+ return {
+ method: AUTO
+ };
+ } else if( REGEX_STRETCH.test( contentHeight ) ){
+ return {
+ method: STRETCH
+ };
+ } else if( REGEX_FIXED.test( contentHeight ) ){
+ height = this._extractFixedMethodValue( contentHeight );
+
+ return {
+ method: FIXED,
+ height: height
+ };
+ }
+
+
classValue = contentBox.get( CLASS_NAME );
contentHeightClass = C_CONTENTHEIGHT + '-';
@@ -434,31 +488,21 @@ AccordionItem.HTML_PARSER = {
index = classValue.indexOf( contentHeightClass, 0);
if( index >= 0 ){
- length = classValue.length;
index += contentHeightClass.length;
classValue = classValue.substring( index );
- if( classValue.match( /^auto\s*/g ) ){
+ if( REGEX_AUTO.test( classValue ) ){
return {
method: AUTO
};
- } else if( classValue.match( /^stretch\s*/g ) ){
+ } else if( REGEX_STRETCH.test( classValue ) ){
return {
method: STRETCH
};
- } else if( classValue.match( /^fixed-\d+/g ) ){
- for( i = 6, length = classValue.length; i < length; i++ ){ // 6 = "fixed-".length
- chr = classValue.charAt(i);
- chr = parseInt( chr, 10 );
-
- if( Lang.isNumber( chr ) ){
- height = (height * 10) + chr;
- } else {
- break;
- }
- }
-
+ } else if( REGEX_FIXED.test( classValue ) ){
+ height = this._extractFixedMethodValue( classValue );
+
return {
method: FIXED,
height: height
@@ -650,7 +694,7 @@ Y.extend( AccordionItem, Y.Widget, {
if( this.get( RENDERED ) ){
label = this.get( NODE_LABEL );
- label.set( INNER_HTML, ["", params.newVal, "" ].join('') );
+ label.set( INNER_HTML, params.newVal );
}
},
@@ -865,9 +909,9 @@ Y.extend( AccordionItem, Y.Widget, {
* This function will be replaced with more clever solution when YUI 3.1 becomes available
*
* @method _getConfigDOMAttribute
- * @private
* @param {Node} contentBox Widget's contentBox
* @return {Object} The parsed yuiConfig value
+ * @private
*/
_getConfigDOMAttribute: function( contentBox ) {
if( !this._parsedCfg ){
@@ -879,6 +923,33 @@ Y.extend( AccordionItem, Y.Widget, {
}
return this._parsedCfg;
+ },
+
+
+ /**
+ * Parses and returns the value of contentHeight property, if set method "fixed".
+ * The value must be in this format: fixed-X, where X is integer
+ *
+ * @method _extractFixedMethodValue
+ * @param {String} value The value to be parsed
+ * @return {Number} The parsed value or null
+ * @protected
+ */
+ _extractFixedMethodValue: function( value ){
+ var i, length, chr, height = null;
+
+ for( i = 6, length = value.length; i < length; i++ ){ // 6 = "fixed-".length
+ chr = value.charAt(i);
+ chr = parseInt( chr, 10 );
+
+ if( Lang.isNumber( chr ) ){
+ height = (height * 10) + chr;
+ } else {
+ break;
+ }
+ }
+
+ return height;
}
});
diff --git a/src/gallery-accordion/js/gallery-accordion.js b/src/gallery-accordion/js/gallery-accordion.js
index 5d03750767..72f0938a53 100755
--- a/src/gallery-accordion/js/gallery-accordion.js
+++ b/src/gallery-accordion/js/gallery-accordion.js
@@ -1,5 +1,5 @@
/**
- * Provides the Accordion class
+ * Provides Accordion widget
*
* @module gallery-accordion
*/
diff --git a/src/gallery-accordion/tests/quirksmode.html b/src/gallery-accordion/tests/quirksmode.html
index b20c6b7dc0..de96a2f8cf 100644
--- a/src/gallery-accordion/tests/quirksmode.html
+++ b/src/gallery-accordion/tests/quirksmode.html
@@ -24,10 +24,10 @@
-