Skip to content

Commit

Permalink
gallery-2012.10.03-20-02 ItsAsbreuk gallery-itsatoolbar
Browse files Browse the repository at this point in the history
  • Loading branch information
YUI Builder committed Oct 3, 2012
1 parent 2ebc42c commit 5a585c0
Show file tree
Hide file tree
Showing 2 changed files with 76 additions and 31 deletions.
17 changes: 12 additions & 5 deletions src/gallery-itsatoolbar/assets/gallery-itsatoolbar-core.css
View file
Expand Up @@ -13,7 +13,7 @@

.itsa-button-icon {
display: inline-block;
height: 20px;
height: 21px;
vertical-align: middle;
width: 20px;
background-repeat: no-repeat;
Expand All @@ -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;
}
Expand Down Expand Up @@ -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;
Expand Down
90 changes: 64 additions & 26 deletions src/gallery-itsatoolbar/js/itsatoolbar.js
View file
Expand Up @@ -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);
}
},

Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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;
Expand All @@ -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);}
},

/**
Expand Down Expand Up @@ -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;
},

Expand All @@ -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;
},
Expand Down Expand Up @@ -615,10 +618,34 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
* <i>- [context]</i> (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.<br>
* therefore not to be called mannually, only by addButtongroup()
* @method _addButtongroup
* @private
* @param {Array} buttons Should consist of objects with at least two fields:<br>
* <i>- iconClass</i> (String): defines the icon's look. Refer to the static Properties for some predefined classes like ICON_BOLD.<br>
* <i>- command</i> (String): the execcommand that will be executed on buttonclick.<br>
* <i>- [value]</i> (String) optional: additional value for the execcommand.<br>
* <i>- syncFunc</i> (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).<br>
* <i>- [context]</i> (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,
Expand All @@ -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:<br>
* <i>- e.value</i>: value of selected item<br>
* <i>- e.index</i>: indexnr of the selected item<br>.
* CAUTION: when using a selectlist, you <u>cannot</u? use standard execCommands. That will not work in most browsers, because the focus will be lost. <br>
* CAUTION: when using a selectlist, you <u>cannot</u> use standard execCommands. That will not work in most browsers, because the focus will be lost. <br>
* Instead, create your customexecCommand and use cursorrefference <i>_getBackupCursorRef()</i>: see example <i>_defineExecCommandFontFamily()</i>
* @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:<br>
Expand Down Expand Up @@ -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;
Expand All @@ -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;
},

Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand Down Expand Up @@ -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');
Expand Down Expand Up @@ -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: '&#8364;'}, true);
instance.addSyncButton(
instance.ICON_FILE,
{ customFunc: function(e) {
Expand Down Expand Up @@ -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 <span>-element and would otherwise focus just before the outerside <span>-element
itsatoolbar.execCommand("inserthtml", "<span class='" + ITSA_FONTFAMILYNODE + "' style='font-family:" + val + "'>" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "</span>");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
Expand Down Expand Up @@ -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 <span>-element and would otherwise focus just before the outerside <span>-element
itsatoolbar.execCommand("inserthtml", "<span class='" + ITSA_FONTSIZENODE + "' style='font-size:" + val + "'>" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "</span>");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
Expand Down Expand Up @@ -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 <span>-element and would otherwise focus just before the outerside <span>-element
itsatoolbar.execCommand("inserthtml", "<span class='" + ITSA_FONTCOLORNODE + "' style='color:" + val + "'>" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "</span>");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
Expand Down Expand Up @@ -1577,7 +1614,8 @@ Y.namespace('Plugin').ITSAToolbar = Y.Base.create('itsatoolbar', Y.Plugin.Base,
itsatoolbar._setCursorAtRef();
}
else {
itsatoolbar.execCommand("inserthtml", "<span class='" + ITSA_MARKCOLORNODE + "' style='backgroundColor:" + val + "'>" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "</span>");
// Don't forget to place a ITSA_REFEMPTYCONTENT before ITSA_REFNODE --> IE cannot focus cursor inside an empty <span>-element and would otherwise focus just before the outerside <span>-element
itsatoolbar.execCommand("inserthtml", "<span class='" + ITSA_MARKCOLORNODE + "' style='background-color:" + val + "'>" + ITSA_REFEMPTYCONTENT + ITSA_REFNODE + "</span>");
itsatoolbar._setCursorAtRef();
Y.later(30000, itsatoolbar, itsatoolbar._clearEmptyFontRef);
}
Expand Down

0 comments on commit 5a585c0

Please sign in to comment.