Refactor aioseop-count-chars.js (#2976)

* Refactor aioseop-count-chars.js #2755 * Clear preview snippet description when "Autogenerated Descriptions" is disabled #2975 * Fix #2927, #2747, #2337 * Set character treshold to 55 for OG:title and OG:description #2413 * Change let to var + minify * Use minified JavaScript files instead * Fix variable naming * Fix Grunt issues * Revert minified js * 3.3 (#17) * Add PHPCompatibility sniffs to PHPCS & fix issues (#2907) * Add PHPCompatibility sniffs to PHPCS #2851 * Ignore Composer & VScode for Git #2851 * Fix PHP compatibility issues (1) #2851 * Don't check PHP compatibility of unit tests #2851 * Fix PHP compatibility issues (2) #2851 * Move parse_ini_string() to compatibility/php-functions.php #2851 * Fix typo #2851 * Fix typo (2) #2851 * Add Grunt task set for Travis CI builds #2851 * Add Travis CI support for PHPCompatibility #2851 * Print installed sniffs after "composer install" in Travis CI #2851 * Delete composer.lock #2851 * Move parse_ini_string() from aioseop_functions.php to compatibility/php-functions.php #2851 * Remove compat-gutenberg.php * Readd compat-gutenberg.php * Fix Grunt #2851 * Fix path to compat files #2851 * Add package-lock.json to .gitignore #2851 * Add composer.lock to .gitignore #2851 * Fix phpDoc in compatibility/php-funcitons.php #2851 * Change schema person's name & logo to add the option of manually ente… (#2920) * Change schema person's name & logo to add the option of manually entered name & image * Grunt * Add Schema to AMP plugin (#2879) * Fix loose comparator in AMP Head causing a return with empty description * Move AMP hooks to separate function for AMP hooks * Add remove hook for AMP Schema * Add AIOSEOP's Schema to AMP * Dev-change aioseop_amp_description filter to only affect meta descriptions * Add filter aioseop_amp_schema to enable/disable schema on AMP posts * Dev-Fix disable schema filter and no meta desc. * Invert if statement and add third decimal to phpDoc since tags #506 * Add third decimal to phpDoc since tag (2) #506 * Fix Grunt issue * Fix Grunt issue (2) * Change bin path for phpcs (#2966) * Change bin path for phpcs #2965 * Delete phpcs and phpcompatibility script entries #2965 * Add new line to init-grunt.sh #2965 * Refactor operations in All_in_One_SEO_Pack_Opengraph::add_meta() (#2941) * Change variable variables to direct variables * Change early initialize thumbnail variable to use image variable * Change operations from call filter to call method * Add filter documentation * Change to group operations together * Add dev notes * Grunt * Dev-Fix filter params * Dev-Add dev note * Dev-Fix error on SSL enabled site * Dev-Change duplicate code to function * Only output meta descriptions if autogenerate descriptions is enabled (#2947) * Fix issue 2439 * Dev-Change to strict comparator * Dev-Fix empty value check * Dev-Change applied changes The excerpt was being added elsewhere as a final fallback * Revert previous changes #2439 * Refactor code #2439 * Remove unneeded check #2439 * Fix Grunt issue * Fix SEO for search results page (#2964) * Added/updated help text for new Schema fields (#2959) * #2958 Added/updated help text for new Schema fields * Add missing i18n domains #2958 * Resolves #2411 (#2955) * 3.2.10 to 3.3 (#2986) * Update help text for Sitemap Indexes setting (#2961) * Only show Welcome Screen on major version updates (#2922) * add get_major_version function #2662 * only show welcome screen on major version updates #2662 * remove function * move function to aioseop_functions.php * Remove class keywords #2662 * Grunt & WPCS * Fix conflict between Chromium v77.0.3865.75 and Gutenberg (#2921) * Fix conflict between Chromium v77.0.3865.75 and Gutenberg #2914 * Grunt fixes #2914 * Revert removed package tag #2914 * Target WP 5.0 <= X < 5.3 #2914 * Move echo statement inside version check #2914 * Do proper version checks #2914 * Fix phpDoc #2914 * Add filter hook to disable schema.org markup (#2915) * Add filter hook to disable schema.org markup * fix return value for schema filter * Grunt fix #2913 * reversing schema filter logic and using a boolean instead of string * Update help text for Sitemap Indexes setting #2954 * Remove version check for Gutenberg/Chrome compatibility fix and check if user agent is set (#2928) * Fix conflict between Chromium v77.0.3865.75 and Gutenberg #2914 * Grunt fixes #2914 * Revert removed package tag #2914 * Target WP 5.0 <= X < 5.3 #2914 * Move echo statement inside version check #2914 * Do proper version checks #2914 * Fix phpDoc #2914 * Only show Welcome Screen on major version updates (#2922) * add get_major_version function #2662 * only show welcome screen on major version updates #2662 * remove function * move function to aioseop_functions.php * Remove class keywords #2662 * Grunt & WPCS * Fix conflict between Chromium v77.0.3865.75 and Gutenberg (#2921) * Fix conflict between Chromium v77.0.3865.75 and Gutenberg #2914 * Grunt fixes #2914 * Revert removed package tag #2914 * Target WP 5.0 <= X < 5.3 #2914 * Move echo statement inside version check #2914 * Do proper version checks #2914 * Fix phpDoc #2914 * Add filter hook to disable schema.org markup (#2915) * Add filter hook to disable schema.org markup * fix return value for schema filter * Grunt fix #2913 * reversing schema filter logic and using a boolean instead of string * Remove WP v5.3 version check and move function out of action hook #2914 * Invert version_compare and prefix functions #2914 * Fix phpDocs #2914 * Rename compat-gutenberg.php to gutenberg-chrome.php #2914 * Fix undefined index HTTP_USER_AGENT #2952 * version bump to 3.2.10 * Update readme.txt * Delete duplicate file * Fix file paths * Fix Grunt issues #2990 * Add characterCounter to ignored JS variables * Fix bugs * Update character counter when editor changes #2977 * Fix bug where counter background colour doesn't change * PR comments * Support non-default plugin path * Remove unused code * Remove unneeded variable declaration * Include post-new.php as edit page * Use legacy code for taxonomies * Fix Grunt issues * Revert minified scripts * Variable alignment * Use let (ES6) and align variables
awesomemotive · Nov 4, 2019 · f3f25ca · f3f25ca
1 parent a6f59f7
commit f3f25ca
Show file tree

Hide file tree

Showing 11 changed files with 665 additions and 245 deletions.
diff --git a/.jshintrc b/.jshintrc
@@ -3,7 +3,7 @@
 	"curly": true,
 	"eqeqeq": true,
 	"eqnull": true,
-	"esversion": 5,
+	"esversion": 6,
 	"expr": true,
 	"immed": true,
 	"jquery": true,
@@ -34,6 +34,8 @@
 		"aioseop_count_chars",
 		"aioseop_preview_snippet",
 		"tinymce",
-		"XRegExp"
+		"XRegExp",
+		"aioseopCharacterCounter",
+		"aioseopOGCharacterCounter"
 	]
 }
diff --git a/aioseop_class.php b/aioseop_class.php
@@ -3676,42 +3676,62 @@ public function admin_enqueue_scripts( $hook_suffix ) {
 		add_filter( "{$this->prefix}display_settings", array( $this, 'filter_settings' ), 10, 3 );
 		add_filter( "{$this->prefix}display_options", array( $this, 'filter_options' ), 10, 2 );
 
-		$extra_title_len = 0;
+		$count_chars_data = array();
 		switch ( $hook_suffix ) {
+			case 'term.php':
+				// Legacy code for taxonomy terms until we refactor all title format related code.
+				$count_chars_data['aiosp_title_extra'] = 0;
+				wp_enqueue_script(
+					'aioseop-count-chars-old',
+					AIOSEOP_PLUGIN_URL . 'js/admin/aioseop-count-chars-old.js',
+					array(),
+					AIOSEOP_VERSION,
+					true
+				);
+				wp_localize_script( 'aioseop-count-chars-old', 'aioseop_count_chars', $count_chars_data );
+				break;
 			case 'post.php':
 			case 'post-new.php':
+				$title_format       = $this->get_preview_snippet_title();
+				$extra_title_length = strlen( preg_replace( '/<span.*\/span>/', '', $title_format ) );
+
+				$snippet_preview_data = array(
+					'isGutenberg'              => $is_gutenberg,
+					'autogenerateDescriptions' => $aioseop_options['aiosp_generate_descriptions'],
+					'skipExcerpt'              => $aioseop_options['aiosp_skip_excerpt'],
+				);
+
+				$count_chars_data['extraTitleLength']         = $extra_title_length;
+				$count_chars_data['isGutenberg']              = $is_gutenberg;
+				$count_chars_data['autogenerateDescriptions'] = $aioseop_options['aiosp_generate_descriptions'];
+
 				wp_enqueue_script(
 					'aioseop-preview-snippet',
 					AIOSEOP_PLUGIN_URL . 'js/admin/aioseop-preview-snippet.js',
 					array(),
 					AIOSEOP_VERSION
 				);
+				wp_localize_script( 'aioseop-preview-snippet', 'aioseop_preview_snippet', $snippet_preview_data );
 
 				wp_enqueue_script(
 					'xregexp',
 					'https://cdn.jsdelivr.net/npm/xregexp@3.2.0',
 					array(),
 					'3.2.0'
 				);
-
-				$snippet_preview_data = array(
-					'isGutenberg'              => $is_gutenberg,
-					'autogenerateDescriptions' => $aioseop_options['aiosp_generate_descriptions'],
-					'skipExcerpt'              => $aioseop_options['aiosp_skip_excerpt'],
-				);
-				wp_localize_script( 'aioseop-preview-snippet', 'aioseop_preview_snippet', $snippet_preview_data );
 				// No break required.
 			case 'toplevel_page_' . AIOSEOP_PLUGIN_DIRNAME . '/aioseop_class':
+				$count_chars_data['pluginDirName'] = AIOSEOP_PLUGIN_DIRNAME;
+				$count_chars_data['currentPage']   = $hook_suffix;
+
 				wp_enqueue_script(
 					'aioseop-count-chars',
 					AIOSEOP_PLUGIN_URL . 'js/admin/aioseop-count-chars.js',
 					array(),
-					AIOSEOP_VERSION
-				);
-				$count_chars_data = array(
-					'extraTitleLength' => (int) $extra_title_len,
+					AIOSEOP_VERSION,
+					true
 				);
-				wp_localize_script( 'aioseop-count-chars', 'aioseop_count_chars', $count_chars_data );
+				wp_localize_script( 'aioseop-count-chars', 'aioseopCharacterCounter', $count_chars_data );
 				break;
 		}
 		parent::admin_enqueue_scripts( $hook_suffix );

diff --git a/css/modules/aioseop_module.css b/css/modules/aioseop_module.css
@@ -1538,16 +1538,15 @@ div#aioseop_snippet > div > span {
 	border: 0;
 }
 
-/* the good, the bad and the ugly character counts */
-.aioseop_count_good {
+.aioseop_count_chars_below_treshold {
 	color: #515151 !important;
 	background-color: #eee !important;
 }
-.aioseop_count_bad {
+.aioseop_count_chars_near_treshold {
 	color: #515151 !important;
 	background-color: #ff0 !important;
 }
-.aioseop_count_ugly {
+.aioseop_count_chars_past_treshold {
 	color: #fff !important;
 	background-color: #f00 !important;
 }

diff --git a/css/modules/aioseop_module.min.css b/css/modules/aioseop_module.min.css
diff --git a/js/admin/aioseop-count-chars-old.js b/js/admin/aioseop-count-chars-old.js
@@ -0,0 +1,90 @@
+/**
+ * Script for Counting Characters
+ *
+ * @summary Binds input elements and counts characters for Title and Description on Post Edit, Post New,
+ *          & AIOSEOP General Settings screens.
+ *
+ * @author Michael Torbert.
+ * @author Semper Fi Web Design.
+ * @copyright https://semperplugins.com
+ * @version 2.9.2
+ */
+
+var aiosp_title_extra = parseInt( aioseop_count_chars.aiosp_title_extra, 10 ); // jshint ignore:line
+
+jQuery( document ).ready( function() {
+	aioseopInitCounting();
+});
+
+/**
+ * Preview Snippet
+ *
+ * @since ?
+ * @since 2.9.2 Move from PHP value to JS file
+ */
+jQuery(document).ready( function() {
+	jQuery("#aiosp_title_wrapper").bind("input", function() {
+		jQuery("#aiosp_snippet_title").text(jQuery("#aiosp_title_wrapper input").val().replace(/<(?:.|\n)*?>/gm, ""));
+	});
+	jQuery("#aiosp_description_wrapper").bind("input", function() {
+		jQuery("#aioseop_snippet_description").text(jQuery("#aiosp_description_wrapper textarea").val().replace(/<(?:.|\n)*?>/gm, ""));
+	});
+});
+
+/**
+ * AIOSEOP Init Counting
+ *
+ * @since ?
+ */
+function aioseopInitCounting(){
+	/* count them characters */
+	jQuery( '.aioseop_count_chars' ).on('keyup keydown', function(){
+		aioseopCountChars( jQuery(this).eq(0), jQuery(this).parent().find('[name="' + jQuery(this).attr('data-length-field') + '"]').eq(0));
+	});
+	jQuery( '.aioseop_count_chars' ).each(function(){
+		aioseopCountChars( jQuery(this).eq(0), jQuery(this).parent().find('[name="' + jQuery(this).attr('data-length-field') + '"]').eq(0));
+	});
+}
+
+/**
+ * @summary Counts characters.
+ *
+ * @since 1.0.0
+ * @since 2.9.1 Fix JS conflict with LearnDash and function name.
+ *
+ * @param Object $field.
+ * @param Object $cntfield.
+ * @return Mixed.
+ */
+function aioseopCountChars( field, cntfield ) {
+	var extra = 0;
+	var field_size;
+	if ( ( field.attr('name') === 'aiosp_title' ) && ( typeof aiosp_title_extra !== 'undefined' ) ) {
+		extra = aiosp_title_extra;
+	}
+	cntfield.val( field.val().length + extra );
+	if ( typeof field.attr('size') !== 'undefined' ) {
+		field_size = field.attr('size');
+	} else {
+		field_size = field.attr('rows') * field.attr('cols');
+	}
+	field_size = parseInt(field_size, 10);
+	if ( field_size < 10 ) {
+		return;
+	}
+	if ( cntfield.val() > field_size ) {
+		cntfield.removeClass().addClass('aioseop_count_ugly');
+	} else if ( ( 'aiosp_title' === field.attr('name' ) ) || ( 'aiosp_home_title' === field.attr('name') ) ) {
+		if ( cntfield.val() > ( field_size - 6 ) ) {
+			cntfield.removeClass().addClass('aioseop_count_bad');
+		} else {
+			cntfield.removeClass().addClass('aioseop_count_good');
+		}
+	} else {
+		if ( cntfield.val() > ( field_size - 10 ) ) {
+			cntfield.removeClass().addClass('aioseop_count_bad');
+		} else {
+			cntfield.removeClass().addClass('aioseop_count_good');
+		}
+	}
+}
diff --git a/js/admin/aioseop-count-chars-old.min.js b/js/admin/aioseop-count-chars-old.min.js