This repository has been archived by the owner on Nov 16, 2017. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 2
t/131: Contextual toolbar sample #135
Merged
Changes from 9 commits
Commits
Show all changes
17 commits
Select commit
Hold shift + click to select a range
0c66afe
Contextual toolbar sample.
oleq e04d480
Moved StickyToolbarView manual tests to a dedicated folder.
oleq 97b22c7
Updated sample to the latest API.
oleq fd7f7f1
Simplified contextual toolbar sample.
oleq 090a12f
Hide contextual toolbar when focusTracker says editor is blurred.
oleq dd5ffdd
Multi-line sample.
oleq 0d30445
Added support for multi-line selection.
oleq ef7486c
Some docs and code refactoring.
oleq a5c858e
Clean-up of the sample.
oleq 623451d
Merge branch 'master' into t/131
oleq d50d302
Added static BalloonPanelView's WarrowVerticalOffset and #arrowHorizo…
oleq 5b8e646
Code refactoring in contextual toolbar sample.
oleq 8464f20
Code refactoring in the contextual toolbar sample.
oleq 410d557
Merge branch 'master' into t/131
Reinmar 0af97f0
Fixed: BalloonPanelView.arrow[Horizontal, Vertical]Offset properties …
oleq 33df236
Fixed: Contextual toolbar does not work in Firefox because a mouseup …
oleq df26113
Docs: Clarified docs about balloon positions and their relation with …
oleq File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
16 changes: 16 additions & 0 deletions
16
tests/manual/createcontextualtoolbar/createcontextualtoolbar.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <head> | ||
| <link rel="stylesheet" href="/theme/ckeditor.css"> | ||
| </head> | ||
|
|
||
| <div id="editor"> | ||
| <p><em>This</em> is an <strong>editor</strong> instance.</p> | ||
| <p><em>This</em> is an <strong>editor</strong> instance.</p> | ||
| <p><em>This</em> is an <strong>editor</strong> instance.</p> | ||
| </div> | ||
|
|
||
| <style> | ||
| .ck-editor { | ||
| margin: 10em auto; | ||
| max-width: 70%; | ||
| } | ||
| </style> |
109 changes: 109 additions & 0 deletions
109
tests/manual/createcontextualtoolbar/createcontextualtoolbar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| /** | ||
| * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md. | ||
| */ | ||
|
|
||
| /* globals window, document, console:false */ | ||
|
|
||
| import ClassicEditor from 'ckeditor5/editor-classic/classic.js'; | ||
| import ClickObserver from 'ckeditor5/engine/view/observer/clickobserver.js'; | ||
| import Enter from 'ckeditor5/enter/enter.js'; | ||
| import Typing from 'ckeditor5/typing/typing.js'; | ||
| import Paragraph from 'ckeditor5/paragraph/paragraph.js'; | ||
| import Undo from 'ckeditor5/undo/undo.js'; | ||
| import Bold from 'ckeditor5/basic-styles/bold.js'; | ||
| import Italic from 'ckeditor5/basic-styles/italic.js'; | ||
|
|
||
| import Template from 'ckeditor5/ui/template.js'; | ||
| import ToolbarView from 'ckeditor5/ui/toolbar/toolbarview.js'; | ||
| import BalloonPanelView from 'ckeditor5/ui/balloonpanel/balloonpanelview.js'; | ||
|
|
||
| const positions = { | ||
| // [ Target ] | ||
| // ^ | ||
| // +-----------------+ | ||
| // | Balloon | | ||
| // +-----------------+ | ||
| forwardSelection: ( targetRect, balloonRect ) => ( { | ||
| top: targetRect.bottom + 15, | ||
| left: targetRect.right - balloonRect.width / 2, | ||
| name: 's' | ||
| } ), | ||
|
|
||
| // +-----------------+ | ||
| // | Balloon | | ||
| // +-----------------+ | ||
| // V | ||
| // [ Target ] | ||
| backwardSelection: ( targetRect, balloonRect ) => ( { | ||
| top: targetRect.top - balloonRect.height - 15, | ||
| left: targetRect.left - balloonRect.width / 2, | ||
| name: 'n' | ||
| } ) | ||
| }; | ||
|
|
||
| ClassicEditor.create( document.querySelector( '#editor' ), { | ||
| plugins: [ Enter, Typing, Paragraph, Undo, Bold, Italic ], | ||
| toolbar: [ 'bold', 'italic', 'undo', 'redo' ] | ||
| } ) | ||
| .then( editor => { | ||
| const viewDocument = editor.editing.view; | ||
| const toolbar = new ToolbarView(); | ||
| const panel = new BalloonPanelView( editor.locale ); | ||
|
|
||
| Template.extend( panel.template, { | ||
| attributes: { | ||
| class: [ | ||
| 'ck-toolbar_contextual', | ||
| ] | ||
| } | ||
| } ); | ||
|
|
||
| panel.content.add( toolbar ); | ||
| viewDocument.addObserver( ClickObserver ); | ||
|
|
||
| editor.ui.view.body.add( panel ).then( () => { | ||
| // Fill the toolbar with some buttons. In this case – copy default editor toolbar. | ||
| for ( let name of editor.config.get( 'toolbar' ) ) { | ||
| toolbar.items.add( editor.ui.componentFactory.create( name ) ); | ||
| } | ||
|
|
||
| // Let the focusTracker know about new focusable UI element. | ||
| editor.ui.focusTracker.add( panel.element ); | ||
|
|
||
| // Hide the panel when editor loses focus but no the other way around. | ||
| panel.listenTo( editor.ui.focusTracker, 'change:isFocused', ( evt, name, is, was ) => { | ||
| if ( was && !is ) { | ||
| panel.hide(); | ||
| } | ||
| } ); | ||
|
|
||
| // Position the panel each time the user clicked in editable. | ||
| editor.listenTo( viewDocument, 'click', () => { | ||
| // This implementation assumes that only non–collapsed selections gets the contextual toolbar. | ||
| if ( !viewDocument.selection.isCollapsed ) { | ||
| const isBackward = viewDocument.selection.isBackward; | ||
|
|
||
| // getBoundingClientRect() makes no sense when the selection spans across number | ||
| // of lines of text. Using getClientRects() allows us to browse micro–ranges | ||
| // that would normally make up the bounding client rect. | ||
| const rangeRects = viewDocument.domConverter.viewRangeToDom( viewDocument.selection.getFirstRange() ).getClientRects(); | ||
|
|
||
| // Select the proper range rect depending on the direction of the selection. | ||
| const rangeRect = isBackward ? rangeRects.item( 0 ) : rangeRects.item( rangeRects.length - 1 ); | ||
|
|
||
| panel.attachTo( { | ||
| target: rangeRect, | ||
| positions: [ positions[ isBackward ? 'backwardSelection' : 'forwardSelection' ] ] | ||
| } ); | ||
| } else { | ||
| panel.hide(); | ||
| } | ||
| } ); | ||
| } ); | ||
|
|
||
| window.editor = editor; | ||
| } ) | ||
| .catch( err => { | ||
| console.error( err.stack ); | ||
| } ); | ||
4 changes: 4 additions & 0 deletions
4
tests/manual/createcontextualtoolbar/createcontextualtoolbar.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| ## Contextual toolbar demo | ||
|
|
||
| 1. Create a non–collapsed selection. | ||
| 2. Create another non–collapsed selection but in another direction. |
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| // Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved. | ||
| // For licensing, see LICENSE.md or http://ckeditor.com/license | ||
|
|
||
| .ck-toolbar_contextual { | ||
| background: ck-color( 'foreground' ); | ||
|
|
||
| .ck-toolbar { | ||
| @include ck-editor-toolbar; | ||
|
|
||
| border: 0; | ||
| } | ||
|
|
||
| &.ck-balloon-panel { | ||
| &_arrow_s, | ||
| &_arrow_se, | ||
| &_arrow_sw { | ||
| &:after { | ||
| border-bottom-color: ck-color( 'foreground' ); | ||
| } | ||
| } | ||
|
|
||
| &_arrow_n, | ||
| &_arrow_ne, | ||
| &_arrow_nw { | ||
| &:after { | ||
| border-top-color: ck-color( 'foreground' ); | ||
| } | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's 15?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
https://github.com/ckeditor/ckeditor5-ui-default/blob/t/131/src/balloonpanel/balloonpanelview.js#L19 I forgot to make these public. Static class properties?