Răsfoiți Sursa

Correct snippet and remove initial values.

Mateusz Samsel 6 ani în urmă
părinte
comite
b6de2b1334

+ 1 - 1
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.html

@@ -27,7 +27,7 @@
 	<div class="customized-count__words">
 		<label>
 			<span>Words:</span>
-			<progress value="12" max="20"></progress>
+			<progress max="20"></progress>
 		</label>
 	</div>
 	<div class="customized-count__characters">

+ 29 - 29
packages/ckeditor5-word-count/docs/_snippets/features/word-count-update.js

@@ -28,39 +28,39 @@ ClassicEditor
 		},
 		table: {
 			contentToolbar: [ 'tableColumn', 'tableRow', 'mergeTableCells' ]
-		}
-	} )
-	.then( editor => {
-		const wordCountPlugin = editor.plugins.get( 'WordCount' );
-
-		const progressBar = document.querySelector( '.customized-count progress' );
-		const colorBox = document.querySelector( '.customized-count__color-box' );
+		},
+		wordCount: {
+			onUpdate: ( () => {
+				// 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
 
-		wordCountPlugin.on( 'update', ( evt, data ) => {
-			const charactersHue = calculateHue( {
-				characters: data.characters,
-				greenUntil: 70,
-				maxCharacters: 120
-			} );
+					return ( redHue - greenHue ) * discreetProgress + greenHue;
+				}
 
-			progressBar.value = data.words;
-			colorBox.style.setProperty( '--hue', charactersHue );
-		} );
+				const progressBar = document.querySelector( '.customized-count progress' );
+				const colorBox = document.querySelector( '.customized-count__color-box' );
 
-		// 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
+				return data => {
+					const charactersHue = calculateHue( {
+						characters: data.characters,
+						greenUntil: 70,
+						maxCharacters: 120
+					} );
 
-			return ( redHue - greenHue ) * discreetProgress + greenHue;
+					progressBar.value = data.words;
+					colorBox.style.setProperty( '--hue', charactersHue );
+				};
+			} )()
 		}
 	} )
 	.catch( err => {