Skip to content

Commit

Permalink
Merge pull request #7845 from ckeditor/i/7803-list-styles-ui
Browse files Browse the repository at this point in the history 
Internal (list): Created the list styles UI. Closes #7803.
  • Loading branch information
@pomek
pomek committed Aug 18, 2020
2 parents 3d35fbf + f8faee1 commit 87beb07
Show file tree
Hide file tree
Showing 17 changed files with 730 additions and 33 deletions.
22 changes: 21 additions & 1 deletion packages/ckeditor5-list/lang/contexts.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,25 @@
{
"Numbered List": "Toolbar button tooltip for the Numbered List feature.",
"Bulleted List": "Toolbar button tooltip for the Bulleted List feature.",
"To-do List": "Toolbar button tooltip for the To-do List feature."
"To-do List": "Toolbar button tooltip for the To-do List feature.",
"Bulleted list styles toolbar": "The ARIA label of the toolbar displaying buttons allowing users to change the bulleted list style.",
"Numbered list styles toolbar": "The ARIA label of the toolbar displaying buttons allowing users to change the numbered list style.",
"Toggle the disc list style": "The ARIA label of the button that toggles the \"disc\" list style.",
"Toggle the circle list style": "The ARIA label of the button that toggles the \"circle\" list style.",
"Toggle the square list style": "The ARIA label of the button that toggles the \"square\" list style.",
"Toggle the decimal list style": "The ARIA label of the button that toggles the \"decimal\" list style.",
"Toggle the decimal with leading zero list style": "The ARIA label of the button that toggles the \"decimal with leading zero\" list style.",
"Toggle the lower–roman list style": "The ARIA label of the button that toggles the \"lower–roman\" list style.",
"Toggle the upper–roman list style": "The ARIA label of the button that toggles the \"upper–roman\" list style.",
"Toggle the lower–latin list style": "The ARIA label of the button that toggles the \"lower–latin\" list style.",
"Toggle the upper–latin list style": "The ARIA label of the button that toggles the \"upper–latin\" list style.",
"Disc": "The tooltip text of the button that toggles the \"disc\" list style.",
"Circle": "The tooltip text of the button that toggles the \"circle\" list style.",
"Square": "The tooltip text of the button that toggles the \"square\" list style.",
"Decimal": "The tooltip text of the button that toggles the \"decimal\" list style.",
"Decimal with leading zero": "The tooltip text of the button that toggles the \"decimal with leading zero\" list style.",
"Lower–roman": "The tooltip text of the button that toggles the \"lower–roman\" list style.",
"Upper-roman": "The tooltip text of the button that toggles the \"upper–roman\" list style.",
"Lower-latin": "The tooltip text of the button that toggles the \"lower–latin\" list style.",
"Upper-latin": "The tooltip text of the button that toggles the \"upper–latin\" list style."
}
2 changes: 1 addition & 1 deletion packages/ckeditor5-list/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
"@ckeditor/ckeditor5-basic-styles": "^21.0.0",
"@ckeditor/ckeditor5-block-quote": "^21.0.0",
"@ckeditor/ckeditor5-clipboard": "^21.0.0",
"@ckeditor/ckeditor5-essential": "^21.0.0",
"@ckeditor/ckeditor5-essentials": "^21.0.0",
"@ckeditor/ckeditor5-editor-classic": "^21.0.0",
"@ckeditor/ckeditor5-enter": "^21.0.0",
"@ckeditor/ckeditor5-font": "^21.0.0",
Expand Down
204 changes: 203 additions & 1 deletion packages/ckeditor5-list/src/liststylesui.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,35 @@
*/

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
import SplitButtonView from '@ckeditor/ckeditor5-ui/src/dropdown/button/splitbuttonview';
import {
createDropdown,
addToolbarToDropdown
} from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import bulletedListIcon from '../theme/icons/bulletedlist.svg';
import numberedListIcon from '../theme/icons/numberedlist.svg';

import listStyleDiscIcon from '../theme/icons/liststyledisc.svg';
import listStyleCircleIcon from '../theme/icons/liststylecircle.svg';
import listStyleSquareIcon from '../theme/icons/liststylesquare.svg';
import listStyleDecimalIcon from '../theme/icons/liststyledecimal.svg';
import listStyleDecimalWithLeadingZeroIcon from '../theme/icons/liststyledecimalleadingzero.svg';
import listStyleLowerRomanIcon from '../theme/icons/liststylelowerroman.svg';
import listStyleUpperRomanIcon from '../theme/icons/liststyleupperroman.svg';
import listStyleLowerLatinIcon from '../theme/icons/liststylelowerlatin.svg';
import listStyleUpperLatinIcon from '../theme/icons/liststyleupperlatin.svg';

import '../theme/liststyles.css';

/**
* The list styles UI plugin. It introduces the extended `'bulletedList'` and `'numberedList'` toolbar
* buttons that allow users change styles of individual lists in the content.
*
* **Note**: Buttons introduces by this plugin override implementations from the {@link module:list/listui~ListUI}
* (because they share the same names).
*
* @extends module:core/plugin~Plugin
*/
export default class ListStylesUI extends Plugin {
Expand All @@ -21,6 +48,181 @@ export default class ListStylesUI extends Plugin {
}

init() {
return null;
const editor = this.editor;
const t = editor.locale.t;

editor.ui.componentFactory.add( 'bulletedList', getSplitButtonCreator( {
editor,
parentCommandName: 'bulletedList',
buttonLabel: t( 'Bulleted List' ),
buttonIcon: bulletedListIcon,
toolbarAriaLabel: t( 'Bulleted list styles toolbar' ),
styleDefinitions: [
{
label: t( 'Toggle the disc list style' ),
tooltip: t( 'Disc' ),
type: 'disc',
icon: listStyleDiscIcon
},
{
label: t( 'Toggle the circle list style' ),
tooltip: t( 'Circle' ),
type: 'circle',
icon: listStyleCircleIcon
},
{
label: t( 'Toggle the square list style' ),
tooltip: t( 'Square' ),
type: 'square',
icon: listStyleSquareIcon
}
]
} ) );

editor.ui.componentFactory.add( 'numberedList', getSplitButtonCreator( {
editor,
parentCommandName: 'numberedList',
buttonLabel: t( 'Numbered List' ),
buttonIcon: numberedListIcon,
toolbarAriaLabel: t( 'Numbered list styles toolbar' ),
styleDefinitions: [
{
label: t( 'Toggle the decimal list style' ),
tooltip: t( 'Decimal' ),
type: 'decimal',
icon: listStyleDecimalIcon
},
{
label: t( 'Toggle the decimal with leading zero list style' ),
tooltip: t( 'Decimal with leading zero' ),
type: 'decimal-leading-zero',
icon: listStyleDecimalWithLeadingZeroIcon
},
{
label: t( 'Toggle the lower–roman list style' ),
tooltip: t( 'Lower–roman' ),
type: 'lower-roman',
icon: listStyleLowerRomanIcon
},
{
label: t( 'Toggle the upper–roman list style' ),
tooltip: t( 'Upper-roman' ),
type: 'upper-roman',
icon: listStyleUpperRomanIcon
},
{
label: t( 'Toggle the lower–latin list style' ),
tooltip: t( 'Lower-latin' ),
type: 'lower-latin',
icon: listStyleLowerLatinIcon
},
{
label: t( 'Toggle the upper–latin list style' ),
tooltip: t( 'Upper-latin' ),
type: 'upper-latin',
icon: listStyleUpperLatinIcon
}
]
} ) );
}
}

// A helper that returns a function that creates a split button with a toolbar in the dropdown,
// which in turn contains buttons allowing users to change list styles in the context of the current selection.
//
// @param {Object} options
// @param {module:core/editor/editor~Editor} options.editor
// @param {'bulletedList'|'numberedList'} options.parentCommandName The name of the higher-order editor command associated with
// the set of particular list styles (e.g. "bulletedList" for "disc", "circle", and "square" styles).
// @param {String} options.buttonLabel Label of the main part of the split button.
// @param {String} options.buttonIcon The SVG string of an icon for the main part of the split button.
// @param {String} options.toolbarAriaLabel The ARIA label for the toolbar in the split button dropdown.
// @param {Object} options.styleDefinitions Definitions of the style buttons.
// @returns {Function} A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
function getSplitButtonCreator( { editor, parentCommandName, buttonLabel, buttonIcon, toolbarAriaLabel, styleDefinitions } ) {
const parentCommand = editor.commands.get( parentCommandName );
const listStylesCommand = editor.commands.get( 'listStyles' );

// @param {module:utils/locale~Locale} locale
// @returns {module:ui/dropdown/dropdownview~DropdownView}
return locale => {
const dropdownView = createDropdown( locale, SplitButtonView );
const splitButtonView = dropdownView.buttonView;
const styleButtonCreator = getStyleButtonCreator( { editor, parentCommandName, listStylesCommand } );

addToolbarToDropdown( dropdownView, styleDefinitions.map( styleButtonCreator ) );

dropdownView.bind( 'isEnabled' ).to( parentCommand );
dropdownView.toolbarView.ariaLabel = toolbarAriaLabel;
dropdownView.class = 'ck-list-styles-dropdown';

splitButtonView.on( 'execute', () => {
editor.execute( parentCommandName );
editor.editing.view.focus();
} );

splitButtonView.set( {
label: buttonLabel,
icon: buttonIcon,
tooltip: true,
isToggleable: true
} );

splitButtonView.bind( 'isOn' ).to( parentCommand, 'value', value => !!value );

return dropdownView;
};
}

// A helper that returns a function (factory) that creates individual buttons used by users to change styles
// of lists.
//
// @param {Object} options
// @param {module:core/editor/editor~Editor} options.editor
// @param {module:list/liststylescommand~ListStylesCommand} options.listStylesCommand The instance of the `ListStylesCommand` class.
// @param {'bulletedList'|'numberedList'} options.parentCommandName The name of the higher-order command associated with a
// particular list style (e.g. "bulletedList" is associated with "square" and "numberedList" is associated with "roman").
// @returns {Function} A function that can be passed straight into {@link module:ui/componentfactory~ComponentFactory#add}.
function getStyleButtonCreator( { editor, listStylesCommand, parentCommandName } ) {
const locale = editor.locale;
const parentCommand = editor.commands.get( parentCommandName );

// @param {String} label The label of the style button.
// @param {String} type The type of the style button (e.g. "roman" or "circle").
// @param {String} icon The SVG string of an icon of the style button.
// @param {String} tooltip The tooltip text of the button (shorter than verbose label).
// @returns {module:ui/button/buttonview~ButtonView}
return ( { label, type, icon, tooltip } ) => {
const button = new ButtonView( locale );

button.set( { label, icon, tooltip } );

listStylesCommand.on( 'change:value', () => {
button.isOn = listStylesCommand.value === type;
} );

button.on( 'execute', () => {
// If the content the selection is anchored to is a list, let's change its style.
if ( parentCommand.value ) {
// If the current list style is not set in the model or the style is different than the
// one to be applied, simply apply the new style.
if ( listStylesCommand.value !== type ) {
editor.execute( 'listStyles', { type } );
}
// If the style was the same, remove it (the button works as an off toggle).
else {
editor.execute( 'listStyles', { type: 'default' } );
}
}
// If the content the selection is anchored to is not a list, let's create a list of a desired style.
else {
editor.execute( parentCommandName );
editor.execute( 'listStyles', { type } );
}

editor.editing.view.focus();
} );

return button;
};
}
Loading

0 comments on commit 87beb07

Please sign in to comment.