Selaa lähdekoodia

Various improvements to the Word count guide.

Piotrek Koszuliński 6 vuotta sitten
vanhempi
commit
5f318d479b

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

@@ -1,7 +1,7 @@
 
 <style>
 	.customized-count__color-box {
-		--hue: 180;
+		--hue: 56;
 		width: 20px;
 		height: 20px;
 		background-color: hsl( var( --hue ), 100%, 50% );
@@ -21,13 +21,13 @@
 </style>
 
 <div id="demo-editor-update">
-		<p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”. And that’s probably true. The more you try the more speechless you become. Words give only a semblance of truth. The real truth about its beauty is revealed when you adore <strong>different shades of “Taj” depending on the time of the day</strong> or when you admire the exquisite inlay work in different corners of the façade.</p>
+	<p>Tourists frequently admit that <a href="https://en.wikipedia.org/wiki/Taj_Mahal">Taj Mahal</a> “simply cannot be described with words”.</p>
 </div>
 <div class="word-count customized-count">
 	<div class="customized-count__words">
 		<label>
 			<span>Words:</span>
-			<progress value="69" max="100"></progress>
+			<progress value="12" max="20"></progress>
 		</label>
 	</div>
 	<div class="customized-count__characters">

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

@@ -36,11 +36,31 @@ ClassicEditor
 		const progressBar = document.querySelector( '.customized-count progress' );
 		const colorBox = document.querySelector( '.customized-count__color-box' );
 
-		wordCountPlugin.on( 'update', updateHandler );
+		wordCountPlugin.on( 'update', ( evt, data ) => {
+			const charactersHue = calculateHue( {
+				characters: data.characters,
+				greenUntil: 70,
+				maxCharacters: 120
+			} );
 
-		function updateHandler( evt, payload ) {
-			progressBar.value = payload.words;
-			colorBox.style.setProperty( '--hue', payload.characters * 3 );
+			progressBar.value = data.words;
+			colorBox.style.setProperty( '--hue', charactersHue );
+		} );
+
+		// Calculates the hue based on the number of characters.
+		//
+		// For a character count:
+		//
+		// * below greenUntil: returns green hue
+		// * 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 ( redHue - greenHue ) * discreetProgress + greenHue;
 		}
 	} )
 	.catch( err => {

Tiedoston diff-näkymää rajattu, sillä se on liian suuri
+ 82 - 13
packages/ckeditor5-word-count/docs/features/word-count.md


+ 4 - 4
packages/ckeditor5-word-count/src/wordcount.js

@@ -278,7 +278,7 @@ export default class WordCount extends Plugin {
  *
  *		const wordCountConfig = {
  *			displayWords: false
- *		}
+ *		};
  *
  * The configuration above will result in the following container:
  *
@@ -296,7 +296,7 @@ export default class WordCount extends Plugin {
  *
  *		const wordCountConfig = {
  *			displayCharacters: false
- *		}
+ *		};
  *
  * The configuration above will result in the following container:
  *
@@ -317,7 +317,7 @@ export default class WordCount extends Plugin {
  *				doSthWithWordNumber( stats.words );
  *				doSthWithCharacterNumber( stats.characters );
  *			}
- *		}
+ *		};
  *
  * @member {Function} module:word-count/wordcount~WordCountConfig#onUpdate
  */
@@ -328,7 +328,7 @@ export default class WordCount extends Plugin {
  *
  *		const wordCountConfig = {
  *			container: document.getElementById( 'container-for-word-count' );
- *		}
+ *		};
  *
  * @member {HTMLElement} module:word-count/wordcount~WordCountConfig#container
  */