• sonofabear

    (@sonofabear)


    Hello, I am adding a word count display to the title field, similar to the body field when editing a post (don’t ask me why, it’s a client request). I’ve got it working

    • By displaying the count by hooking in to the “edit_form_after_title”
    • Editing word-count.min.js and duplicating the code there for my new counter element
    • Editing post.min.js and duplicating the trigger handler for changing the value of the word count (search for // word count in post.js near line 960)

    So now that I’ve got it working, my question is how do I get the new javascript code to live outside of these files, so they aren’t wiped out on an upgrade? I’ve created a custom .js file and enqueued it in my functions file, but I’m unable to get it working the same way. The file does get loaded in, but things just aren’t working the correctly if the new javascript I write is not in the original files. It’s probably just my limited knowledge of javascript, but I would like to get this working separated from the wordpress javascript files.

    Here’s the working post.js word count javascript (original function first, my copied function is second). I’ve also set the “ti” variable higher up in the code where “co” is set

    // word count
    	if ( typeof(wpWordCount) != 'undefined' ) {
    		$document.triggerHandler('wpcountwords', [ co.val() ]);
    
    		co.keyup( function(e) {
    			var k = e.keyCode || e.charCode;
    
    			if ( k == last )
    				return true;
    
    			if ( 13 == k || 8 == last || 46 == last )
    				$document.triggerHandler('wpcountwords', [ co.val() ]);
    
    			last = k;
    			return true;
    		});
    	}
    
    	if ( typeof(wpWordCount_title) != 'undefined' ) {
    		$document.triggerHandler('wpWordCount_title', [ ti.val() ]);
    
    		ti.keyup( function(e) {
    			$document.triggerHandler('wpWordCount_title', [ ti.val() ]);
    			var k = e.keyCode || e.charCode;
    
    			if ( k == last )
    				return true;
    
    			if ( 13 == k || 8 == last || 46 == last )
    				$document.triggerHandler('wpWordCount_title', [ ti.val() ]);
    
    			last = k;
    			return true;
    		});
    	}

    And here’s my duplicated/tweaked function for word-count.js

    var wpWordCount_title;
    ! function (a, b) {
    	wpWordCount_title = {
    		settings: {
    			strip: /<[a-zA-Z\/][^<>]*>/g,
    			clean: /[0-9.(),;:!?%#$¿'"_+=\\/-]+/g,
    			w: /\S\s+/g,
    			c: /\S/g
    		},
    		block: 0,
    		wc: function (c, d) {
    			var e = this,
    				f = a(".title-word-count"),
    				g = 0;
    			d === b && (d = wordCountL10n.type), "w" !== d && "c" !== d && (d = "w"), e.block || (e.block = 1, setTimeout(function () {
    				c && (c = c.replace(e.settings.strip, " ").replace(/ | /gi, " "), c = c.replace(e.settings.clean, ""), c.replace(e.settings[d], function () {
    					g++
    				})), f.html(g.toString()), setTimeout(function () {
    					e.block = 0
    				}, 2e3)
    			}, 1))
    		}
    	}, a(document).bind("wpWordCount_title", function (a, b) {
    		wpWordCount_title.wc(b)
    	})
    }(jQuery);
  • The topic ‘Custom Javascript on the Admin Pages’ is closed to new replies.