|
|
@@ -3,10 +3,11 @@
|
|
|
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
|
|
|
*/
|
|
|
|
|
|
-/* global window, document, console, ClassicEditor */
|
|
|
+/* global window, document, console, BalloonEditor */
|
|
|
+const sendButton = document.querySelector( '.demo-update__send' );
|
|
|
|
|
|
-ClassicEditor
|
|
|
- .create( document.querySelector( '#demo-editor-update' ), {
|
|
|
+BalloonEditor
|
|
|
+ .create( document.querySelector( '#demo-update__editor' ), {
|
|
|
toolbar: {
|
|
|
items: [
|
|
|
'heading',
|
|
|
@@ -26,43 +27,58 @@ ClassicEditor
|
|
|
],
|
|
|
viewportTopOffset: window.getViewportTopOffsetConfig()
|
|
|
},
|
|
|
+ placeholder: 'Text of the post',
|
|
|
table: {
|
|
|
contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
|
|
|
},
|
|
|
wordCount: {
|
|
|
onUpdate: ( () => {
|
|
|
- const progressBar = document.querySelector( '.customized-count progress' );
|
|
|
- const colorBox = document.querySelector( '.customized-count__color-box' );
|
|
|
+ const maxCharacters = 120;
|
|
|
+ const container = document.querySelector( '.demo-update' );
|
|
|
+ const progressCircle = document.querySelector( '.demo-update__chart__circle' );
|
|
|
+ const charactersBox = document.querySelector( '.demo-update__chart__characters' );
|
|
|
+ const wordsBox = document.querySelector( '.demo-update__words' );
|
|
|
+ const circleCircumference = Math.floor( 2 * Math.PI * progressCircle.getAttribute( 'r' ) );
|
|
|
|
|
|
+ // Update the UI as the content of the editor changes.
|
|
|
return data => {
|
|
|
- const charactersHue = calculateHue( {
|
|
|
- characters: data.characters,
|
|
|
- greenUntil: 70,
|
|
|
- maxCharacters: 120
|
|
|
- } );
|
|
|
+ const currentCharacters = data.characters;
|
|
|
+ const currentWords = data.words;
|
|
|
+ const charactersProgress = currentCharacters / maxCharacters * circleCircumference;
|
|
|
+ const isLimitExceeded = currentCharacters > maxCharacters;
|
|
|
+ const isCloseToLimit = !isLimitExceeded && currentCharacters > maxCharacters * .8;
|
|
|
+ const circleDashArray = Math.min( charactersProgress, circleCircumference );
|
|
|
|
|
|
- progressBar.value = data.words;
|
|
|
- colorBox.style.setProperty( '--hue', charactersHue );
|
|
|
- };
|
|
|
+ // Set the stroke of the circle to show the how many characters were typed.
|
|
|
+ progressCircle.setAttribute( 'stroke-dasharray', `${ circleDashArray },${ circleCircumference }` );
|
|
|
+
|
|
|
+ // Display the number of characters in the progress chart. When exceeded the limit,
|
|
|
+ // display how many characters should be removed.
|
|
|
+ if ( isLimitExceeded ) {
|
|
|
+ charactersBox.textContent = `-${ currentCharacters - maxCharacters }`;
|
|
|
+ } else {
|
|
|
+ charactersBox.textContent = currentCharacters;
|
|
|
+ }
|
|
|
+
|
|
|
+ wordsBox.textContent = `Words in the post: ${ currentWords }`;
|
|
|
|
|
|
- // Calculates the hue based on the number of characters.
|
|
|
- //
|
|
|
- // For the character counter:
|
|
|
- //
|
|
|
- // * below greenUntil - Returns green.
|
|
|
- // * between greenUntil and maxCharacters - Returns a hue between green and red.
|
|
|
- // * above maxCharacters - Returns red.
|
|
|
- function calculateHue( { characters, greenUntil, maxCharacters } ) {
|
|
|
- const greenHue = 70;
|
|
|
- const redHue = 0;
|
|
|
- const progress = Math.max( 0, Math.min( 1, ( characters - greenUntil ) / ( maxCharacters - greenUntil ) ) ); // 0-1
|
|
|
- const discreetProgress = Math.floor( progress * 10 ) / 10; // 0, 0.1, 0.2, ..., 1
|
|
|
+ // If the content length is close to the characters limit, add a CSS class to warns the user.
|
|
|
+ container.classList.toggle( 'demo-update__limit-close', isCloseToLimit );
|
|
|
|
|
|
- return ( redHue - greenHue ) * discreetProgress + greenHue;
|
|
|
- }
|
|
|
+ // If exceeded the characters limit, add a CSS class that makes the content's background red.
|
|
|
+ container.classList.toggle( 'demo-update__limit-exceeded', isLimitExceeded );
|
|
|
+
|
|
|
+ // If exceeded the characters limit, disable the send button.
|
|
|
+ sendButton.toggleAttribute( 'disabled', isLimitExceeded );
|
|
|
+ };
|
|
|
} )()
|
|
|
}
|
|
|
} )
|
|
|
+ .then( () => {
|
|
|
+ sendButton.addEventListener( 'click', () => {
|
|
|
+ window.alert( 'Post sent!' ); // eslint-disable-line no-alert
|
|
|
+ } );
|
|
|
+ } )
|
|
|
.catch( err => {
|
|
|
console.error( err.stack );
|
|
|
} );
|