jQuery interaction simulator

by justinbrown

HTML

<input id="search" type="text" style="width: 300px"/>
<button id="go-btn">Go!</button>
<img id="tutorial-pointer" src="http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/cursor_arrow.png" />

CSS

html, body {
  height: 100%;
  position: relative;
  width: 100%;
}

#tutorial-pointer {
  left: 50%;
  top: 50%;
  position: absolute;
}

JavaScript

(function( $ ){
    
  $.fn.simulateClick = function() {  
    console.log('simulateClick');

    var def = $.Deferred(),
        anims = [];
      
    this.each(function() {
      var elem = $(this),
          pos = elem.position();
      
        anims.push($('#tutorial-pointer').animate({ left: pos.left + elem.width()/2, top: pos.top + elem.height()/2 }, 'slow', function() {
          console.log('complete simulateClick');
          elem.focus().click();
          def.resolve(); }));
    });
      
    /*$.when.apply(null, anims).done(function() {
      def.resolve();
    });*/
    
    return def.promise();
  };

  $.fn.simulateInput = function(text, options) {  
    console.log('simulateInput', text, options);
    // Create some defaults, extending them with any options that were provided
    var settings = $.extend( {
      'location'         : 'top',
      'background-color' : 'blue'
    }, options);

    var def = $.Deferred(),
        anims = [];
      
    this.each(function() {
      var elem = $(this);  
      elem.focus();
      anims.push($({count:0}).animate({ count: text.length }, {
        duration: text.length * 100,
          complete: function() { def.resolve(); },
        step: function() {
          elem.val( text.substring(0, Math.round(this.count)) );
        }
      }));
    });
      
    /*$.when.apply(null, anims).done(function() {
      def.resolve();
    });*/
    
    return def.promise();
  };
})( jQuery );

var tutorialPointer = $('#tutorial-pointer'),
    s = $('#search');

$('#go-btn').click(function() {
   console.log('go!'); 
});

setTimeout(function() {
  var query = 'North Korea missile launches';

  $.when(s.simulateClick()).pipe(function() {
    return s.simulateInput(query);
  }).pipe(function() {
    return $('#go-btn').simulateClick();
  });

}, 1500);