diff --git a/src/gallery-itsatoolbar/assets/gallery-itsatoolbar-core.css b/src/gallery-itsatoolbar/assets/gallery-itsatoolbar-core.css
index 3e29af0448..11ecfba61f 100644
--- a/src/gallery-itsatoolbar/assets/gallery-itsatoolbar-core.css
+++ b/src/gallery-itsatoolbar/assets/gallery-itsatoolbar-core.css
@@ -13,7 +13,7 @@
.itsa-button-icon {
display: inline-block;
- height: 20px;
+ height: 21px;
vertical-align: middle;
width: 20px;
background-repeat: no-repeat;
@@ -33,21 +33,21 @@
width:15px;
height:15px;
}
-.itsatoolbar-colors .itsa-selectlist-ullist li {
+.yui3-itsaselectlist.itsa-leftalign.itsatoolbar-colors li {
display: inline-block;
padding: 2px;
border: solid 1px #FFF;
}
-.itsatoolbar-colors .itsa-selectlist-ullist li.itsa-selectlist-selected {
+.yui3-itsaselectlist.itsa-leftalign.itsatoolbar-colors li.itsa-selectlist-selected {
background-image: none;
border-color: #000;
}
-.itsatoolbar-fontsize .itsa-selectlist-ullist li {
+.yui3-itsaselectlist.itsa-rightalign.itsatoolbar-fontsize li {
padding: 1px 3px 2px;
margin: 0px 2px;
border: solid 1px #FFF;
}
-.itsatoolbar-fontsize .itsa-selectlist-ullist li.itsa-selectlist-selected {
+.yui3-itsaselectlist.itsa-rightalign.itsatoolbar-fontsize li.itsa-selectlist-selected {
background-image: none;
border-color: #000;
}
@@ -116,6 +116,13 @@
padding: 4px 0px 0px;
}
+.itsatoolbar.itsa-buttonsize-small .yui3-itsaselectlist.itsa-leftalign .itsa-selectlist-basediv {
+ margin-top: -3px;
+}
+.itsatoolbar.itsa-buttonsize-small .yui3-itsaselectlist.itsa-rightalign .itsa-selectlist-basediv {
+ margin-top: -3px;
+}
+
.itsatoolbar {
width: 100%;
padding: 4px 4px 4px 0px;
diff --git a/src/gallery-itsatoolbar/js/itsatoolbar.js b/src/gallery-itsatoolbar/js/itsatoolbar.js
index aad8fbd2cc..9e94fb1199 100644
--- a/src/gallery-itsatoolbar/js/itsatoolbar.js
+++ b/src/gallery-itsatoolbar/js/itsatoolbar.js
@@ -304,18 +304,9 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
// need to make sure we can use execCommand, so do not render before the frame exists.
if (instance.editor.frame && instance.editor.frame.get('node')) {instance._render();}
else {
- var delayIE = false;
- if (delayIE && (Y.UA.ie>0)) {
- // didn't find out yet: IE stops creating the editorinstance when pluggedin too soon!
- // GOTTA check out
- // at the time being: delaying
- Y.later(250, instance, instance._render);
- }
- else {
- // do not subscribe to the frame:ready, but to the ready-event
- // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
- instance.editor.on('ready', instance._render, instance);
- }
+ // do not subscribe to the frame:ready, but to the ready-event
+ // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
+ instance.editor.on('ready', instance._render, instance);
}
},
@@ -352,7 +343,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* @private
* @param {Boolean} [selectionIfAvailable] do return the selectionnode if a selection is made. If set to false, then always just the cursornode will be returned.
* Which means -in case of selection- that the cursornode exists as a last child of the selection. Default = false.
- * @returns {Y.Node} created empty referencenode
+ * @return {Y.Node} created empty referencenode
*/
_getCursorRef : function(selectionIfAvailable) {
Y.log('_getCursorRef', 'info', 'ITSAToolbar');
@@ -488,7 +479,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* So descendenst of ItsaSelectlist should refer to this cursorref.
* @method _getBackupCursorRef
* @private
- * @returns {Y.Node} created empty referencenode
+ * @return {Y.Node} created empty referencenode
*/
_getBackupCursorRef : function() {
return this._backupCursorRef;
@@ -510,7 +501,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
else {e.changedNode = cursorRef;}
Y.later(250, instance, instance._removeCursorRef);
}
- instance.toolbarNode.fire('itsatoolbar:statusChange', e);
+ if (instance.toolbarNode) {instance.toolbarNode.fire('itsatoolbar:statusChange', e);}
},
/**
@@ -547,7 +538,13 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
buttonInnerNode = Node.create(ITSA_BTNINNERNODE);
buttonInnerNode.addClass(iconClass);
buttonNode.append(buttonInnerNode);
- instance.toolbarNode.append(buttonNode);
+ // be aware of that addButton might get called when the editor isn't rendered yet. In that case instance.toolbarNode does not exist
+ if (instance.toolbarNode) {instance.toolbarNode.append(buttonNode);}
+ else {
+ // do not subscribe to the frame:ready, but to the ready-event
+ // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
+ instance.editor.on('ready', function(e, buttonNode){instance.toolbarNode.append(buttonNode);}, instance, buttonNode);
+ }
return buttonNode;
},
@@ -574,7 +571,13 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
var instance = this,
buttonNode = instance.addButton(iconClass, execCommand, indent, position);
if (!isToggleButton) {buttonNode.addClass(ITSA_BTNSYNC);}
- instance.toolbarNode.addTarget(buttonNode);
+ // be aware of that addButton might get called when the editor isn't rendered yet. In that case instance.toolbarNode does not exist
+ if (instance.toolbarNode) {instance.toolbarNode.addTarget(buttonNode);}
+ else {
+ // do not subscribe to the frame:ready, but to the ready-event
+ // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
+ instance.editor.on('ready', function(e, buttonNode){instance.toolbarNode.addTarget(buttonNode);}, instance, buttonNode);
+ }
if (Lang.isFunction(syncFunc)) {buttonNode.on('itsatoolbar:statusChange', Y.bind(syncFunc, context || instance));}
return buttonNode;
},
@@ -615,10 +618,34 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* - [context] (instance): context for the syncFunction. Default is Toolbar's instance
* @param {Boolean} [indent] To indent the button thus creating a whitespace between the previous button. Default=false.
* @param {Number} [position] Index where to insert the button. Default=null, which means added as the last button.
- * @return {Y.Node} reference to the first buttonnode of the created buttongroup
*/
addButtongroup : function(buttons, indent, position) {
Y.log('addButtongroup', 'info', 'ITSAToolbar');
+ var instance = this;
+ if (instance.toolbarNode) {instance._addButtongroup(buttons, indent, position);}
+ else {
+ // do not subscribe to the frame:ready, but to the ready-event
+ // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
+ instance.editor.on('ready', function(e, buttons, indent, position){instance._addButtongroup(buttons, indent, position);}, instance, buttons, indent, position);
+ }
+ },
+
+ /**
+ * Does the real action of addButtongroup, but assumes that the editor is rendered.
+ * therefore not to be called mannually, only by addButtongroup()
+ * @method _addButtongroup
+ * @private
+ * @param {Array} buttons Should consist of objects with at least two fields:
+ * - iconClass (String): defines the icon's look. Refer to the static Properties for some predefined classes like ICON_BOLD.
+ * - command (String): the execcommand that will be executed on buttonclick.
+ * - [value] (String) optional: additional value for the execcommand.
+ * - syncFunc (Function): callback-function that will be called after a statusChange, when the users manupilates the text, or the cursor is moved (for more info on the sync-function, see addToggleButton).
+ * - [context] (instance): context for the syncFunction. Default is Toolbar's instance.
+ * @param {Boolean} [indent] To indent the button thus creating a whitespace between the previous button. Default=false.
+ * @param {Number} [position] Index where to insert the button. Default=null, which means added as the last button.
+ */
+ _addButtongroup : function(buttons, indent, position) {
+ Y.log('_addButtongroup', 'info', 'ITSAToolbar');
var instance = this,
buttonGroup = Y.guid(),
button,
@@ -642,13 +669,12 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
}
return returnNode;
},
-
/**
* Creates a selectList on the Toolbar. By default at the end of the toolbar.
* When fired, the event-object returnes with 2 fields:
* - e.value: value of selected item
* - e.index: indexnr of the selected item
.
- * CAUTION: when using a selectlist, you cannot
+ * CAUTION: when using a selectlist, you cannot use standard execCommands. That will not work in most browsers, because the focus will be lost.
* Instead, create your customexecCommand and use cursorrefference _getBackupCursorRef(): see example _defineExecCommandFontFamily()
* @method addSelectList
* @param {Array} items contains all the items. Should be either a list of (String), or a list of (Objects). In case of an Object-list, the objects should contain two fields:
@@ -679,7 +705,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
config = Y.merge(config, {items: items, defaultButtonText: ''});
selectlist = new Y.ITSASelectList(config);
selectlist.after('render', function(e, execCommand, syncFunc, context, indent){
- Y.log('addSelectlist - rendered', 'cmas', 'ITSAToolbar');
+ Y.log('addSelectlist - rendered', 'info', 'ITSAToolbar');
var instance = this,
selectlist = e.currentTarget,
buttonNode = selectlist.buttonNode;
@@ -690,13 +716,20 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
if (Lang.isString(execCommand.restoreValue)) {buttonNode.setData('restoreValue', execCommand.restoreValue);}
}
if (indent) {selectlist.get('boundingBox').addClass('itsa-button-indent');}
+ // instance.toolbarNode should always exist here
instance.toolbarNode.addTarget(buttonNode);
selectlist.on('show', instance._createBackupCursorRef, instance);
selectlist.on('selectChange', instance._handleSelectChange, instance);
if (Lang.isFunction(syncFunc)) {buttonNode.on('itsatoolbar:statusChange', Y.rbind(syncFunc, context || instance));}
instance.editor.on('nodeChange', selectlist.hideListbox, selectlist);
}, instance, execCommand, syncFunc, context, indent);
- selectlist.render(instance.toolbarNode);
+ // be aware of that addButton might get called when the editor isn't rendered yet. In that case instance.toolbarNode does not exist
+ if (instance.toolbarNode) {selectlist.render(instance.toolbarNode);}
+ else {
+ // do not subscribe to the frame:ready, but to the ready-event
+ // Iliyan Peychev made an editor that doesn't use Frame, so this way it works on all editors
+ instance.editor.on('ready', function(){selectlist.render(instance.toolbarNode);}, instance);
+ }
return selectlist;
},
@@ -888,7 +921,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
*
* @method _hasSelection
* @private
- * @returns {Boolean} whether there is a selection
+ * @return {Boolean} whether there is a selection
*/
_hasSelection : function() {
Y.log('_hasSelection', 'info', 'ITSAToolbar');
@@ -904,7 +937,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* @private
* @param {String} selector The selector to check for
* @param {Y.Node} cursornode Active node where the cursor resides, or the selection
- * @returns {Boolean} whether node resides inbetween selector
+ * @return {Boolean} whether node resides inbetween selector
*/
_checkInbetweenSelector : function(selector, cursornode) {
Y.log('_checkInbetweenHeader', 'info', 'ITSAToolbar');
@@ -934,7 +967,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* @method _getActiveHeader
* @private
* @param {Y.Node} cursornode Active node where the cursor resides, or the selection. Can be supplied by e.changedNode, or left empty to make this function determine itself.
- * @returns {Y.Node|null} the headernode where the cursor remains. Returns null if outside any header.
+ * @return {Y.Node|null} the headernode where the cursor remains. Returns null if outside any header.
*/
_getActiveHeader : function(cursornode) {
Y.log('_getActiveHeader', 'info', 'ITSAToolbar');
@@ -1265,6 +1298,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
// just for temporary local use ITS Asbreuk
// should NOT be part of the gallery
if (false) {
+ instance.addButton(instance.ICON_EURO, {command: 'inserthtml', value: '€'}, true);
instance.addSyncButton(
instance.ICON_FILE,
{ customFunc: function(e) {
@@ -1428,6 +1462,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
itsatoolbar._setCursorAtRef();
}
else {
+ // Don't forget to place a ITSA_REFEMPTYCONTENT before ITSA_REFNODE --> IE cannot focus cursor inside an empty -element and would otherwise focus just before the outerside -element
itsatoolbar.execCommand("inserthtml", "" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
@@ -1480,6 +1515,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
itsatoolbar._setCursorAtRef();
}
else {
+ // Don't forget to place a ITSA_REFEMPTYCONTENT before ITSA_REFNODE --> IE cannot focus cursor inside an empty -element and would otherwise focus just before the outerside -element
itsatoolbar.execCommand("inserthtml", "" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
@@ -1528,6 +1564,7 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
itsatoolbar._setCursorAtRef();
}
else {
+ // Don't forget to place a ITSA_REFEMPTYCONTENT before ITSA_REFNODE --> IE cannot focus cursor inside an empty -element and would otherwise focus just before the outerside -element
itsatoolbar.execCommand("inserthtml", "" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
@@ -1577,7 +1614,8 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
itsatoolbar._setCursorAtRef();
}
else {
- itsatoolbar.execCommand("inserthtml", "" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "");
+ // Don't forget to place a ITSA_REFEMPTYCONTENT before ITSA_REFNODE --> IE cannot focus cursor inside an empty -element and would otherwise focus just before the outerside -element
+ itsatoolbar.execCommand("inserthtml", "" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
}