Little tutorial for adding a "truncate text" function to a text/textarea fields. Here's a little step by step tutorial how to add javascript behaviour to fields using Admin Custom Files. We are gonna truncate the text length of the title field. The plugin only works for simple text and textarea fields and is language aware. Note that the plugin won't work for TinyMCE or CKEditor a likes.
Create a file in the Admin Custom Folder called: ProcessPageEdit.js
Create a file in the Admin Custom Folder called: custom-plugins.js
Go to custom-plugins.js and copy/paste the plug-in code and save the file.
Open the ProcessPageEdit.js file and paste in the code from Using the plug-in and save the file.
Go to the Admin Custom Files module settings
Select the process ProcessPageEdit
In the Dependencies textarea type: ProcessPageEdit AdminCustomFiles/custom-plugins.js
Save the module.
You're done, go to a page where you have a title field to see the result.
plug-in code: /site/templates/AdminCustomFiles/custom-plugins.js
(function ($) {
$.fn.truncate = function(options) {
var $fields = this,
name = $fields.attr('name'),
settings = $.extend({
characters: 128,
prefix: '',
suffix: '',
class: 'notes'
}, options );
if ($fields.parent('.LanguageSupport').length) {
var $fields = $("#langTabs_Inputfield_" + name ).find("input, textarea");
}
$fields.after("<span class='" + settings.class + "'></span>");
$fields.each(function (index, el) {
var truncate = function () {
var value = $(el).val(),
typed = typeof value != 'undefined' ? value.length : 0,
left = settings.characters - typed;
if (left < 0) {
$(el).val(value.substr(0, settings.characters));
truncate();
} else {
$(el).next("span").text(settings.prefix + left + settings.suffix);
}
}
$(el).keyup(function() { truncate(); });
return truncate();
});
};
}(jQuery));
using the plug-in: /site/templates/AdminCustomFiles/ProcessPageEdit.js
// DOM is ready
$(function () {
// field with the name attribute title
$("[name='title']").truncate({
characters: 64,
prefix: 'To go: ',
suffix: ' characters'
});
});