<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[32856] trunk: Editor: restructure word count</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/32856">32856</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/32856","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>iseulde</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2015-06-19 10:34:59 +0000 (Fri, 19 Jun 2015)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Editor: restructure word count
* The WordCounter should only do one thing: count words. This makes it also easier to test.
* Add some really basic unit tests.
* Instead of only refreshing the count on enter and delete, refresh the count when the user stops typing. Also look at paste and content changes in TinyMCE.
* Use `match` instead of `replace` when it is appropriate.
* More readable code.
See <a href="https://core.trac.wordpress.org/ticket/30966">#30966</a>. Fixes <a href="https://core.trac.wordpress.org/ticket/26620">#26620</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpadminjspostjs">trunk/src/wp-admin/js/post.js</a></li>
<li><a href="#trunksrcwpadminjswordcountjs">trunk/src/wp-admin/js/word-count.js</a></li>
<li><a href="#trunksrcwpincludesjstinymcepluginswordpresspluginjs">trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js</a></li>
<li><a href="#trunksrcwpincludesscriptloaderphp">trunk/src/wp-includes/script-loader.php</a></li>
<li><a href="#trunktestsqunitindexhtml">trunk/tests/qunit/index.html</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunktestsqunitwpadminjswordcountjs">trunk/tests/qunit/wp-admin/js/word-count.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpadminjspostjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/post.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/post.js 2015-06-19 08:36:37 UTC (rev 32855)
+++ trunk/src/wp-admin/js/post.js 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -203,7 +203,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> jQuery(document).ready( function($) {
</span><span class="cx" style="display: block; padding: 0 10px"> var stamp, visibility, $submitButtons, updateVisibility, updateText,
</span><span class="cx" style="display: block; padding: 0 10px"> sticky = '',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- last = 0,
</del><span class="cx" style="display: block; padding: 0 10px"> $textarea = $('#content'),
</span><span class="cx" style="display: block; padding: 0 10px"> $document = $(document),
</span><span class="cx" style="display: block; padding: 0 10px"> $editSlugWrap = $('#edit-slug-box'),
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -788,24 +787,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // word count
- if ( typeof(wpWordCount) != 'undefined' ) {
- $document.triggerHandler('wpcountwords', [ $textarea.val() ]);
-
- $textarea.keyup( function(e) {
- var k = e.keyCode || e.charCode;
-
- if ( k == last )
- return true;
-
- if ( 13 == k || 8 == last || 46 == last )
- $document.triggerHandler('wpcountwords', [ $textarea.val() ]);
-
- last = k;
- return true;
- });
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> wptitlehint = function(id) {
</span><span class="cx" style="display: block; padding: 0 10px"> id = id || 'title';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -935,3 +916,44 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+( function( $, counter ) {
+ $( function() {
+ var $content = $( '#content' ),
+ $count = $( '#wp-word-count' ).find( '.word-count' ),
+ prevCount = 0,
+ contentEditor;
+
+ function update() {
+ var text, count;
+
+ if ( ! contentEditor || contentEditor.isHidden() ) {
+ text = $content.val();
+ } else {
+ text = contentEditor.getContent( { format: 'raw' } );
+ }
+
+ count = counter.count( text );
+
+ if ( count !== prevCount ) {
+ $count.text( count );
+ }
+
+ prevCount = count;
+ }
+
+ $( document ).on( 'tinymce-editor-init', function( event, editor ) {
+ if ( editor.id !== 'content' ) {
+ return;
+ }
+
+ contentEditor = editor;
+
+ editor.on( 'nodechange keyup', _.debounce( update, 2000 ) );
+ } );
+
+ $content.on( 'input keyup', _.debounce( update, 2000 ) );
+
+ update();
+ } );
+} )( jQuery, new wp.utils.WordCounter() );
</ins></span></pre></div>
<a id="trunksrcwpadminjswordcountjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-admin/js/word-count.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-admin/js/word-count.js 2015-06-19 08:36:37 UTC (rev 32855)
+++ trunk/src/wp-admin/js/word-count.js 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,44 +1,48 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/* global wordCountL10n */
-var wpWordCount;
-(function($,undefined) {
- wpWordCount = {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function() {
+ function WordCounter( settings ) {
+ var key;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- settings : {
- strip : /<[a-zA-Z\/][^<>]*>/g, // strip HTML tags
- clean : /[0-9.(),;:!?%#$¿'"_+=\\/-]+/g, // regexp to remove punctuation, etc.
- w : /\S\s+/g, // word-counting regexp
- c : /\S/g // char-counting regexp for asian languages
- },
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( settings ) {
+ for ( key in settings ) {
+ if ( settings.hasOwnProperty( key ) ) {
+ this.settings[ key ] = settings[ key ];
+ }
+ }
+ }
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- block : 0,
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ WordCounter.prototype.settings = {
+ HTMLRegExp: /<\/?[a-z][^>]*?>/gi,
+ spaceRegExp: / | /gi,
+ removeRegExp: /[0-9.(),;:!?%#$¿'"_+=\\\/-]+/g,
+ wordsRegExp: /\S\s+/g,
+ charactersRegExp: /\S/g,
+ l10n: window.wordCountL10n || {}
+ };
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wc : function(tx, type) {
- var t = this, w = $('.word-count'), tc = 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ WordCounter.prototype.count = function( text, type ) {
+ var count = 0;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( type === undefined )
- type = wordCountL10n.type;
- if ( type !== 'w' && type !== 'c' )
- type = 'w';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ type = type || this.settings.l10n.type || 'words';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- if ( t.block )
- return;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( text ) {
+ text = ' ' + text + ' ';
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- t.block = 1;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text = text.replace( this.settings.HTMLRegExp, ' ' );
+ text = text.replace( this.settings.spaceRegExp, ' ' );
+ text = text.replace( this.settings.removeRegExp, '' );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setTimeout( function() {
- if ( tx ) {
- tx = tx.replace( t.settings.strip, ' ' ).replace( / | /gi, ' ' );
- tx = tx.replace( t.settings.clean, '' );
- tx.replace( t.settings[type], function(){tc++;} );
- }
- w.html(tc.toString());
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ text = text.match( this.settings[ type + 'RegExp' ] );
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- setTimeout( function() { t.block = 0; }, 2000 );
- }, 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( text ) {
+ count = text.length;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ return count;
</ins><span class="cx" style="display: block; padding: 0 10px"> };
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $(document).bind( 'wpcountwords', function(e, txt) {
- wpWordCount.wc(txt);
- });
-}(jQuery));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ window.wp = window.wp || {};
+ window.wp.utils = window.wp.utils || {};
+ window.wp.utils.WordCounter = WordCounter;
+} )();
</ins></span></pre></div>
<a id="trunksrcwpincludesjstinymcepluginswordpresspluginjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js 2015-06-19 08:36:37 UTC (rev 32855)
+++ trunk/src/wp-includes/js/tinymce/plugins/wordpress/plugin.js 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,8 +7,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> var DOM = tinymce.DOM,
</span><span class="cx" style="display: block; padding: 0 10px"> each = tinymce.each,
</span><span class="cx" style="display: block; padding: 0 10px"> __ = editor.editorManager.i18n.translate,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- wpAdvButton, style,
- last = 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wpAdvButton, style;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> if ( typeof window.jQuery !== 'undefined' ) {
</span><span class="cx" style="display: block; padding: 0 10px"> window.jQuery( document ).triggerHandler( 'tinymce-editor-setup', [ editor ] );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -363,23 +362,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> });
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- // Word count
- if ( typeof window.jQuery !== 'undefined' ) {
- editor.on( 'keyup', function( e ) {
- var key = e.keyCode || e.charCode;
-
- if ( key === last ) {
- return;
- }
-
- if ( 13 === key || 8 === last || 46 === last ) {
- window.jQuery( document ).triggerHandler( 'wpcountwords', [ editor.getContent({ format : 'raw' }) ] );
- }
-
- last = key;
- });
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> editor.on( 'SaveContent', function( e ) {
</span><span class="cx" style="display: block; padding: 0 10px"> // If editor is hidden, we just want the textarea's value to be saved
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! editor.inline && editor.isHidden() ) {
</span></span></pre></div>
<a id="trunksrcwpincludesscriptloaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-includes/script-loader.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-includes/script-loader.php 2015-06-19 08:36:37 UTC (rev 32855)
+++ trunk/src/wp-includes/script-loader.php 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -371,11 +371,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'wpdialogs', "/wp-includes/js/wpdialog$suffix.js", array( 'jquery-ui-dialog' ), false, 1 );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'word-count', "/wp-admin/js/word-count$suffix.js", array( 'jquery' ), false, 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'word-count', "/wp-admin/js/word-count$suffix.js", array(), false, 1 );
</ins><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->localize( 'word-count', 'wordCountL10n', array(
</span><span class="cx" style="display: block; padding: 0 10px"> /* translators: If your word count is based on single characters (East Asian characters),
</span><span class="cx" style="display: block; padding: 0 10px"> enter 'characters'. Otherwise, enter 'words'. Do not translate into your own language. */
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'type' => 'characters' == _x( 'words', 'word count: words or characters?' ) ? 'c' : 'w',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'type' => _x( 'words', 'word count: words or characters?' )
</ins><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> $scripts->add( 'media-upload', "/wp-admin/js/media-upload$suffix.js", array( 'thickbox', 'shortcode' ), false, 1 );
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -451,7 +451,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'tagDelimiter' => _x( ',', 'tag delimiter' ),
</span><span class="cx" style="display: block; padding: 0 10px"> ) );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box' ), false, 1 );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count' ), false, 1 );
</ins><span class="cx" style="display: block; padding: 0 10px"> did_action( 'init' ) && $scripts->localize( 'post', 'postL10n', array(
</span><span class="cx" style="display: block; padding: 0 10px"> 'ok' => __('OK'),
</span><span class="cx" style="display: block; padding: 0 10px"> 'cancel' => __('Cancel'),
</span></span></pre></div>
<a id="trunktestsqunitindexhtml"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/tests/qunit/index.html</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/index.html 2015-06-19 08:36:37 UTC (rev 32855)
+++ trunk/tests/qunit/index.html 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -32,6 +32,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-includes/js/customize-models.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-includes/js/shortcode.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="../../src/wp-admin/js/customize-controls.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="../../src/wp-admin/js/word-count.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- Unit tests -->
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/password-strength-meter.js"></script>
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -40,6 +41,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-includes/js/shortcode.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/customize-controls.js"></script>
</span><span class="cx" style="display: block; padding: 0 10px"> <script src="wp-admin/js/customize-controls-utils.js"></script>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <script src="wp-admin/js/word-count.js"></script>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- Customizer templates for sections -->
</span><span class="cx" style="display: block; padding: 0 10px"> <script type="text/html" id="tmpl-customize-section-default">
</span></span></pre></div>
<a id="trunktestsqunitwpadminjswordcountjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/tests/qunit/wp-admin/js/word-count.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/tests/qunit/wp-admin/js/word-count.js (rev 0)
+++ trunk/tests/qunit/wp-admin/js/word-count.js 2015-06-19 10:34:59 UTC (rev 32856)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,47 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+( function( QUnit ) {
+ var wordCounter = new window.wp.utils.WordCounter();
+
+ QUnit.module( 'word-count' );
+
+ QUnit.test( 'All.', function( assert ) {
+ var tests = [
+ {
+ message: 'Basic test.',
+ string: 'one two three',
+ wordCount: 3,
+ charCount: 11
+ },
+ {
+ message: 'HTML tags.',
+ string: 'one <em class="test">two</em><br />three',
+ wordCount: 3,
+ charCount: 11
+ },
+ {
+ message: 'Line breaks.',
+ string: 'one\ntwo\nthree',
+ wordCount: 3,
+ charCount: 11
+ },
+ {
+ message: 'Encoded spaces.',
+ string: 'one two three',
+ wordCount: 3,
+ charCount: 11
+ },
+ {
+ message: 'Punctuation.',
+ string: 'It\'s two three... 4?',
+ wordCount: 3,
+ charCount: 11
+ }
+ ];
+
+ var i = tests.length;
+
+ while ( i-- ) {
+ assert.equal( wordCounter.count( tests[ i ].string ), tests[ i ].wordCount, tests[ i ].message + ' (words)' );
+ assert.equal( wordCounter.count( tests[ i ].string, 'characters' ), tests[ i ].charCount, tests[ i ].message + ' (characters)' );
+ }
+ } );
+} )( window.QUnit );
</ins></span></pre>
</div>
</div>
</body>
</html>