ch.Countdown

Description

Countdown counts the maximum of characters that user can enter in a form control. Countdown could limit the possibility to continue inserting charset.

How-to

// Create a new Countdown.
var countdown = new ch.Countdown([el], [options]);
// Create a new Countdown with custom options.
var countdown = new ch.Countdown({
    'max': 250,
    'plural': 'Left: # characters.',
    'singular': 'Left: # character.'
});
// Create a new Countdown using the shorthand way (max as parameter).
var countdown = new ch.Countdown({'max': 500});

Parameters

  • el - HTMLElement : A HTMLElement to create an instance of ch.Countdown.
  • options - Object : Options to customize an instance.
    • max - Number : Number of the maximum amount of characters user can input in form control. Default: 500.
    • plural - String : Message of remaining amount of characters, when it's different to 1. The variable that represents the number to be replaced, should be a hash. Default: "# characters left.".
    • singular - String : Message of remaining amount of characters, when it's only 1. The variable that represents the number to be replaced, should be a hash. Default: "# character left.".

Extends

Properties

.Component#name String

The name of a component.

.Countdown#name String

The name of the component.

.trigger HTMLTextAreaElement

The countdown trigger.

// Gets the countdown trigger.
countdown.trigger;

.uid Number

A unique id to identify the instance of a component.

Methods

.constructor()



    
Returns a reference to the constructor function.







    
        




.destroy()




    
Destroys an instance of Component and remove its data from asociated element.






    



// Destroy a component
component.destroy();
// Empty the component reference
component = undefined;








    
        




.disable() → {component}




    
Disables an instance of Component.






    



// Disabling an instance of Component.
component.disable();








    
        




.enable() → {component}




    
Enables an instance of Component.






    



// Enabling an instance of Component.
component.enable();








    
        




.require() → {component}




    
Adds functionality or abilities from other classes.






    



// You can require some abilitiest to use in your component.
// For example you should require the collpasible abitliy.
var component = new Component(element, options);
component.require('Collapsible');








    
        




.constructor()




    
Returns a reference to the constructor function.







    
        




.destroy()




    
Destroys a Countdown instance.






    



// Destroy a countdown
countdown.destroy();
// Empty the countdown reference
countdown = undefined;








    






    
Events


    

        




'destroy'




    
Emits when a component is destroyed.






    



// Subscribe to "destroy" event.
component.on('destroy', function () {
    // Some code here!
});








    
        




'disable'




    
Emits when a component is disable.






    



// Subscribe to "disable" event.
component.on('disable', function () {
    // Some code here!
});








    
        




'enable'




    
Emits when a component is enabled.






    



// Subscribe to "enable" event.
component.on('enable', function () {
    // Some code here!
});








    
        




'exceed'




    
Event emitted when the lenght of characters is exceeded.






    



// Subscribe to "exceed" event.
countdown.on('exceed', function () {
    // Some code here!
});








    
        




'ready'




    
Event emitted when the component is ready to use.






    



// Subscribe to "ready" event.
countdown.on('ready', function () {
    // Some code here!
});