Shortened text directive - angularjs

 In this artricle we will try to create angularjs directive which  will display only first 10 characters of element text and link  that opens the whole text when user clicked on it.

Before clicking: 

After clicking: 

To simplify the example i'm using the code of angular phonecat tuttorial.
In the example we need to display the snippet  property of phone object

html markup:

Directive declaration:

 
/* app\js\directives.js */
var phonecatDirectives = angular.module('phonecatDirectives', []);
phonecatDirectives.directive('zippy', function () { 
    
    return {
      restrict: "E",
      replace: true,
      transclude: false,
      scope: { title:'@zippyTitle' },
      template: '

{{title}}
' ,  
      // The linking function will add behavior to the template
      link: function(scope, element, attrs) {
      var opened=true;
     scope.$watch('title',function(newVal, oldVal){
   element.html(scope.title.substr(0,10)+' ...');
                // Title element
   var title = angular.element(element.children()[0]),
            // Opened / closed state
            opened = true;
 
        // Clicking on title should open/close the zippy
   title.on('click', toggle);
  })
   


 
        // Toggle the closed/opened state
        function toggle() {
    if(opened) element.text(scope.title)
          opened = !opened;
          //element.removeClass(opened ? 'closed' : 'opened');
          //element.addClass(opened ? 'opened' : 'closed');
    
        }
 
 
      }
   
   };
  });

Testing our widget with unit tests

Why to write tests?
When developing something, it is good practice to check after each change if your code still working correctly, doing the things you want it to do.
As the code becomes more complicate, the quantity of cases to check became larger, and more difficult to complete all of them without forget something.
That's where unit tests came to help us. Jquery-ui works with Qunit unit tests, so we will use this framework too.
When you write your unit test you must think about which behavior you want to be tested.
Lets list some behaviors we want our loading indicator widget to behave:
1. after initialization, loading widget should add a div styled with 'loading' class.
2. The loading div should been removed after widget destroyed.


Writing tests

When you write a test you need to specify 3 things:
1. to set up the initial conditions the test will begin with
2. to Specify what result you expect
3. to check if the result is as expected
Lets test the first behavior

   
module( "loadingindicator: core" );

test( "the loading element appears", function() {
 expect( 1 );
 var element = $( "#main" ).loadingindicator();
 ok( $( "#main .loading" ).length, 1 );

});

Explanation: in this test we applying the plugin on the "main" div element (located on the testing environment) and after this we checking if some element decorated with class element appears inside the "main" after plugin code activated.
After running the tests in Qunit testing environment, if everything is working as expected (acording to the plan) - we get the following screen with blue lines:

creating jquery-ui plugin -part2

In this post we will extend the plugin created in previous post, so it will became more customizable.

Firstly lets speak about options.
Options like parameters which supplied to the plugin when it initiated.
Lets make the user to be able of customizing the text of loading message:

     $.widget( "ui.loadingindicator", {       
        options: {
          caption: "loading..."
        },
     ...

Explanation: Here we specifying the caption parameter (the message text), which value by default is "loading...", but user may change it if plugin initiated following way:

$( "#main" ).loadingindicator({caption:'wait please'});

Another thing we can extend our plugin is to add to it some public methods.
Lets add close method  which will make the 'loading' message disappear after the process finished:

   //public
    close: function(){
          this._destroy();
    },
   //private
   _destroy: function(){
          this.element.find(".loading").remove();
   },

Explanation:
$.widget factory makes methods without '_' prefix to be accessible from within plugin calls. From now you may hide the indicator by writing following code:

$( "#main" ).loadingindicator('close');

One more thing that you can see almost in each jquery-ui plugin is events.
Events are fired by plugin when some actions occurred. The plugin's user can specify callbacks, which will take place in response of the event.
Lets add some event to our plugin:

 //click event and callback
  var that = this;     
  this._on( this.loadingDiv, {
   click: function( event ) {
     that._trigger( "click", event, {caption:that.options.caption});     
   }     
 })

Now, if user want something to happen when loading message being clicked he can subscribe to the event when plugin initiated:

var lodaing=$( "#main" ).loadingindicator({
 caption:'wait please',
 click: function(event ,ui ){
   //will close the message
   lodaing.loadingindicator('close');
 }  
});

demo