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); }