stik-helpers

#Helpers Helpers can be used as a shortcut to create small functional pieces of code.

All defined helpers reside under the $h module that can be injected into controllers, behaviors and boundaries.

##Defining

// this helper does not have dependencies
stik.helper("hasClass", function(){
  return function(elm, selector){
    var className = " " + selector + " ";
    return (" " + elm.className + " ").replace(/[\n\t]/g, " ").indexOf(className) > -1;
  };
});
// the helper defined below depends on the
// previously defined hasClass helper
stik.helper("toggleClass", function(hasClass){
  return function(elm, selector){
    if (hasClass(elm, selector)) {
      var regex = new RegExp("\\b\\s?" + selector + "\\b", "g");
      elm.className = elm.className.replace(regex, '');
    } else if (!hasClass(elm, selector)) {
      elm.className += " " + selector;
    }
  };
});

##Using it

stik.controller("AppCtrl", "List", function($template, $h){
  $h.toggleClass($template, "stik-is-awesome");
});

stik.behavior("shine-on-focus", function($template, $h){
  $template.addEventListener("focus", function(){
    $h.toggleClass($template, "shining");
  });
  $template.addEventListener('blur', function(){
    $h.toggleClass($template, "shining");
  });
});

stik.boundary({
  as: "myAwesomeExternalLibraryBoundary",
  from: "controller",
  resolvable: true,
  to: function($h, $template){
    var http = new SomeHttpLibrary();
    if ($h.hasClass($template, 'not-loaded')) {
      http.get('/load-app.html').wheDone(function(res){
        $h.toggleClass($template, 'loading-done');
      });
    }
  }
});

##$window Allows you to mock the window global obj

stik.behavior("someWindowDependentBehavior", function($window){
  $window.AudioListener();
  // in this way you can later on
  // mock the window object on your tests
});

// or

stik.helper("clearTimeout", function($window){
  return $window.clearTimeout;
});

##debounce Debouncing ensures that a method gets executed only once, during the specified interval, even if several calls were triggered.

stik.behavior("shineOnMouseMove", function($h, $template){
  function shine(){
    ...
  }
  shine.bind({}, $template);

  // the `shineThis` function will only be called
  // once within 500ms even if the browser triggers
  // 100+ mouse events
  $template.addEventListener("mousemove", $h.debounce(shine, 500));
});

##isArray Returns true or false for wether the obj is an instance of Array

stik.controller("AppCtrl", "List", function($h){
  $h.isArray([1,2,3]); // true
  $h.isArray({"a": 1}); // false
});

##deepExtend Gives you the ability to deep copy all properties and values from one object to another.

stik.controller("AppCtrl", "Post", function($h, httpGet){
  currentPost = {};

  anotherPost = httpGet("/posts/1029783.json");

  $h.deepExtend currentPost, anotherPost
  // currentPost will have all new properties
  // and values from anotherPost
});

##zip Merges two arrays into a third

stik.controller("AppCtrl", "List", function($h){
  var firstArray = [1,2,3];
  var secondArray = [4,5,6];

  $h.zip(firstArray, secondArray); // [1,2,3,4,5,6]
});