Index: _source/plugins/button/plugin.js
===================================================================
--- _source/plugins/button/plugin.js (revision 7460)
+++ _source/plugins/button/plugin.js (working copy)
@@ -87,13 +87,13 @@
var element = CKEDITOR.document.getById( id );
element.focus();
},
- execute : function()
+ execute : function( button, onArrow )
{
// IE 6 needs some time before execution (#7922)
if ( CKEDITOR.env.ie && CKEDITOR.env.version < 7 )
- CKEDITOR.tools.setTimeout( function(){ this.button.click( editor ); }, 0, this );
+ CKEDITOR.tools.setTimeout( function(){ this.button.click( editor, button, onArrow ); }, 0, this );
else
- this.button.click( editor );
+ this.button.click( editor, button, onArrow );
}
};
@@ -182,7 +182,7 @@
output.push(
'',
'= 10900 && !env.hc ? '' : '" href="javascript:void(\''+ ( this.title || '' ).replace( "'", '' )+ '\')"',
' title="', this.title, '"' +
' tabindex="-1"' +
@@ -225,18 +225,56 @@
'> ' +
'', this.label, '' );
+ if (this.additionalHTML)
+ output.push( this.additionalHTML );
+
+ output.push( '' );
+
if ( this.hasArrow )
{
output.push(
+ '= 10900 && !env.hc ? '' : '" href="javascript:void(\''+ ( this.title || '' ).replace( "'", '' )+ '\')"',
+ ' title="', this.title, '"' +
+ ' tabindex="-1"' +
+ ' hidefocus="true"' +
+ ' role="button"' +
+ ' aria-labelledby="' + id + '_label"' +
+ ' aria-haspopup="true"' );
+
+ // Some browsers don't cancel key events in the keydown but in the
+ // keypress.
+ // TODO: Check if really needed for Gecko+Mac.
+ if ( env.opera || ( env.gecko && env.mac ) )
+ {
+ output.push(
+ ' onkeypress="return false;"' );
+ }
+
+ // With Firefox, we need to force the button to redraw, otherwise it
+ // will remain in the focus state.
+ if ( env.gecko )
+ {
+ output.push(
+ ' onblur="this.style.cssText = this.style.cssText;"' );
+ }
+
+ output.push(
+ ' onkeydown="return CKEDITOR.tools.callFunction(', keydownFn, ', event);"' +
+ ' onfocus="return CKEDITOR.tools.callFunction(', focusFn,', event);" ' +
+ ( CKEDITOR.env.ie ? 'onclick="return false;" onmouseup' : 'onclick' ) + // #188
+ '="CKEDITOR.tools.callFunction(', clickFn, ', this, true); return false;">' );
+
+ output.push(
''
// BLACK DOWN-POINTING TRIANGLE
+ ( CKEDITOR.env.hc ? '▼' : ' ' )
+ '' );
+ output.push( '' );
}
- output.push(
- '',
- '' );
+ output.push( '' );
if ( this.onRender )
this.onRender();
@@ -264,6 +302,24 @@
element.setAttribute( 'aria-pressed', true ) :
element.removeAttribute( 'aria-pressed' );
+ // If the button has an arrow, apply the same state to it
+ if ( this.hasArrow )
+ {
+ element = CKEDITOR.document.getById( this._.id + '_arrow' );
+
+ if ( element )
+ {
+ element.setState( state );
+ state == CKEDITOR.TRISTATE_DISABLED ?
+ element.setAttribute( 'aria-disabled', true ) :
+ element.removeAttribute( 'aria-disabled' );
+
+ state == CKEDITOR.TRISTATE_ON ?
+ element.setAttribute( 'aria-pressed', true ) :
+ element.removeAttribute( 'aria-pressed' );
+ }
+ }
+
return true;
}
else
Index: _source/plugins/colorbutton/plugin.js
===================================================================
--- _source/plugins/colorbutton/plugin.js (revision 7460)
+++ _source/plugins/colorbutton/plugin.js (working copy)
@@ -15,32 +15,42 @@
init : function( editor )
{
var config = editor.config,
- lang = editor.lang.colorButton;
+ lang = editor.lang.colorButton,
+ lastColor = {};
var clickFn;
if ( !CKEDITOR.env.hc )
{
- addButton( 'TextColor', 'fore', lang.textColorTitle );
- addButton( 'BGColor', 'back', lang.bgColorTitle );
+ addButton( 'TextColor', 'fore', lang.textColorTitle, editor.config.colorButton_defaultFore || '#f00' );
+ addButton( 'BGColor', 'back', lang.bgColorTitle, editor.config.colorButton_defaultBack || '#a9a9a9' );
}
- function addButton( name, type, title )
+ function addButton( name, type, title, initialValue )
{
var colorBoxId = CKEDITOR.tools.getNextId() + '_colorBox';
+
+ lastColor[ type ] = initialValue;
+
editor.ui.add( name, CKEDITOR.UI_PANELBUTTON,
{
label : title,
title : title,
className : 'cke_button_' + name.toLowerCase(),
modes : { wysiwyg : 1 },
-
+ additionalHTML : '',
panel :
{
css : editor.skin.editor.css,
attributes : { role : 'listbox', 'aria-label' : lang.panelTitle }
},
+ onButtonClick: function()
+ {
+ // one-click color
+ applyColor( lastColor[ type ], type );
+ },
+
onBlock : function( panel, block )
{
block.autoSize = true;
@@ -89,7 +99,44 @@
});
}
+ function applyColor( color, type )
+ {
+ editor.focus();
+ editor.fire( 'saveSnapshot' );
+
+ // Clean up any conflicting style within the range.
+ new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : 'inherit' } ).remove( editor.document );
+
+ if ( color )
+ {
+ var colorStyle = config['colorButton_' + type + 'Style'];
+
+ colorStyle.childRule = type == 'back' ?
+ function( element )
+ {
+ // It's better to apply background color as the innermost style. (#3599)
+ // Except for "unstylable elements". (#6103)
+ return isUnstylable( element );
+ }
+ :
+ function( element )
+ {
+ // Fore color style must be applied inside links instead of around it. (#4772,#6908)
+ return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
+ };
+
+ new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
+ }
+
+ editor.fire( 'saveSnapshot' );
+
+ // Update toolbar preview:
+ var preview = CKEDITOR.document.getById( type + '_preview_' + editor.id );
+ if ( preview )
+ preview.setStyle('backgroundColor', color);
+ }
+
function renderColors( panel, type, colorBoxId )
{
var output = [],
@@ -117,37 +164,12 @@
return;
}
- editor.focus();
+ // Store it for one-click reuse
+ lastColor[ type ] = color;
panel.hide( false );
- editor.fire( 'saveSnapshot' );
-
- // Clean up any conflicting style within the range.
- new CKEDITOR.style( config['colorButton_' + type + 'Style'], { color : 'inherit' } ).remove( editor.document );
-
- if ( color )
- {
- var colorStyle = config['colorButton_' + type + 'Style'];
-
- colorStyle.childRule = type == 'back' ?
- function( element )
- {
- // It's better to apply background color as the innermost style. (#3599)
- // Except for "unstylable elements". (#6103)
- return isUnstylable( element );
- }
- :
- function( element )
- {
- // Fore color style must be applied inside links instead of around it. (#4772,#6908)
- return !( element.is( 'a' ) || element.getElementsByTag( 'a' ).count() ) || isUnstylable( element );
- };
-
- new CKEDITOR.style( colorStyle, { color : color } ).apply( editor.document );
- }
-
- editor.fire( 'saveSnapshot' );
+ applyColor( color, type );
});
// Render the "Automatic" button.
@@ -298,3 +320,23 @@
element : 'span',
styles : { 'background-color' : '#(color)' }
};
+
+/**
+ * Default value for the text foreground color button.
+ * @name CKEDITOR.config.colorButton_defaultFore
+ * @default '#f00'
+ * @type string
+ * @since 3.6.3
+ * @example
+ * config.colorButton_defaultFore = '#0f0';
+ */
+
+/**
+ * Default value for the text background color button.
+ * @name CKEDITOR.config.colorButton_defaultBack
+ * @default '#a9a9a9'
+ * @type string
+ * @since 3.6.3
+ * @example
+ * config.colorButton_defaultBack = '#ff0';
+ */
\ No newline at end of file
Index: _source/plugins/menubutton/plugin.js
===================================================================
--- _source/plugins/menubutton/plugin.js (revision 7460)
+++ _source/plugins/menubutton/plugin.js (working copy)
@@ -21,7 +21,7 @@
(function()
{
- var clickFn = function( editor )
+ var clickFn = function( editor, button, onArrow )
{
var _ = this._;
@@ -29,6 +29,14 @@
if ( _.state === CKEDITOR.TRISTATE_DISABLED )
return;
+ // If the click wasn't on the arrow and the instance has a handler defined
+ // notify it and don't show the pane
+ if ( !onArrow && this.onButtonClick )
+ {
+ this.onButtonClick();
+ return;
+ }
+
_.previousState = _.state;
// Check if we already have a menu for it, otherwise just create it.
Index: _source/plugins/panelbutton/plugin.js
===================================================================
--- _source/plugins/panelbutton/plugin.js (revision 7460)
+++ _source/plugins/panelbutton/plugin.js (working copy)
@@ -8,13 +8,21 @@
requires : [ 'button' ],
onLoad : function()
{
- function clickFn( editor )
+ function clickFn( editor, button, onArrow )
{
var _ = this._;
if ( _.state == CKEDITOR.TRISTATE_DISABLED )
return;
+ // If the click wasn't on the arrow and the instance has a handler defined
+ // notify it and don't show the pane
+ if ( !onArrow && this.onButtonClick )
+ {
+ this.onButtonClick();
+ return;
+ }
+
this.createPanel( editor );
if ( _.on )
Index: _source/plugins/scayt/plugin.js
===================================================================
--- _source/plugins/scayt/plugin.js (revision 7460)
+++ _source/plugins/scayt/plugin.js (working copy)
@@ -615,10 +615,16 @@
{
command.on( 'state', function()
{
+ console.log(this)
this.setState( command.state );
},
this);
},
+ onButtonClick: function()
+ {
+ // one-click toggle
+ command.exec();
+ },
onMenu : function()
{
var isEnabled = plugin.isScaytEnabled( editor );
Index: _source/skins/kama/toolbar.css
===================================================================
--- _source/skins/kama/toolbar.css (revision 7460)
+++ _source/skins/kama/toolbar.css (working copy)
@@ -206,9 +206,11 @@
}
.cke_skin_kama .cke_button a:hover.cke_on,
+.cke_skin_kama .cke_button:hover a.cke_on,
.cke_skin_kama .cke_button a:focus.cke_on,
.cke_skin_kama .cke_button a:active.cke_on, /* IE */
.cke_skin_kama .cke_button a:hover.cke_off,
+.cke_skin_kama .cke_button:hover a.cke_off,
.cke_skin_kama .cke_button a:focus.cke_off,
.cke_skin_kama .cke_button a:active.cke_off /* IE */
{
@@ -218,6 +220,7 @@
}
.cke_skin_kama .cke_button a:hover,
+.cke_skin_kama .cke_button:hover a,
.cke_skin_kama .cke_button a:focus,
.cke_skin_kama .cke_button a:active /* IE */
{
@@ -225,6 +228,7 @@
}
.cke_skin_kama .cke_button a:hover.cke_on,
+.cke_skin_kama .cke_button:hover a.cke_on,
.cke_skin_kama .cke_button a:focus.cke_on,
.cke_skin_kama .cke_button a:active.cke_on /* IE */
{
@@ -232,6 +236,7 @@
}
.cke_skin_kama .cke_hc .cke_button a:hover,
+.cke_skin_kama .cke_hc .cke_button:hover a,
.cke_skin_kama .cke_hc .cke_button a:focus,
.cke_skin_kama .cke_hc .cke_button a:active /* IE */
{
@@ -406,3 +411,31 @@
{
padding-bottom: 0;
}
+
+.cke_pane_button
+{
+ position: relative;
+}
+
+.cke_skin_kama .cke_button a.cke_pane_button
+{
+ border-radius: 3px 0px 0px 3px;
+ border-right: 0;
+ padding-right: 0 !important;
+}
+
+.cke_skin_kama .cke_button a.cke_pane_arrow
+{
+ border-radius: 0px 3px 3px 0px;
+ padding-left: 0 !important;
+}
+
+.cke_color_preview
+{
+ bottom: 0;
+ display: inline-block;
+ height: 3px;
+ left: 4px;
+ position: absolute;
+ width: 16px;
+}
Index: _source/skins/office2003/toolbar.css
===================================================================
--- _source/skins/office2003/toolbar.css (revision 7460)
+++ _source/skins/office2003/toolbar.css (working copy)
@@ -269,6 +269,7 @@
}
.cke_skin_office2003 .cke_hc .cke_button a:hover,
+.cke_skin_office2003 .cke_hc .cke_button:hover a,
.cke_skin_office2003 .cke_hc .cke_button a:focus,
.cke_skin_office2003 .cke_hc .cke_button a:active /* IE */
{
@@ -308,6 +309,7 @@
}
.cke_skin_office2003 .cke_button a:hover,
+.cke_skin_office2003 .cke_button:hover a,
.cke_skin_office2003 .cke_button a:focus,
.cke_skin_office2003 .cke_button a:active /* IE */
{
@@ -520,3 +522,31 @@
{
cursor: default;
}
+
+.cke_pane_button
+{
+ position: relative;
+}
+
+.cke_skin_office2003 .cke_button a.cke_pane_button
+{
+ border-radius: 3px 0px 0px 3px;
+ border-right: 0;
+ padding-right: 0 !important;
+}
+
+.cke_skin_office2003 .cke_button a.cke_pane_arrow
+{
+ border-radius: 0px 3px 3px 0px;
+ padding-left: 0 !important;
+}
+
+.cke_color_preview
+{
+ bottom: 0;
+ display: inline-block;
+ height: 3px;
+ left: 4px;
+ position: absolute;
+ width: 16px;
+}
Index: _source/skins/v2/toolbar.css
===================================================================
--- _source/skins/v2/toolbar.css (revision 7460)
+++ _source/skins/v2/toolbar.css (working copy)
@@ -278,6 +278,7 @@
}
.cke_skin_v2 .cke_button a:hover,
+.cke_skin_v2 .cke_button:hover a,
.cke_skin_v2 .cke_button a:focus,
.cke_skin_v2 .cke_button a:active /* IE */
{
@@ -287,6 +288,7 @@
}
.cke_skin_v2 .cke_hc .cke_button a:hover,
+.cke_skin_v2 .cke_hc .cke_button:hover a,
.cke_skin_v2 .cke_hc .cke_button a:focus,
.cke_skin_v2 .cke_hc .cke_button a:active /* IE */
{
@@ -463,3 +465,33 @@
{
cursor: default;
}
+
+.cke_pane_button
+{
+ position: relative;
+}
+
+.cke_skin_v2 .cke_button a.cke_pane_button
+{
+ border-radius: 3px 0px 0px 3px;
+ border-right: 0;
+ padding-right: 0 !important;
+}
+
+.cke_skin_v2 .cke_button a.cke_pane_arrow
+{
+ border-radius: 0px 3px 3px 0px;
+ padding-left: 0 !important;
+ position: relative;
+ top: -1px;
+}
+
+.cke_color_preview
+{
+ bottom: 0;
+ display: inline-block;
+ height: 3px;
+ left: 4px;
+ position: absolute;
+ width: 16px;
+}