angular-bricklayer.plugin.js

/* global Bricklayer:none, imagesLoaded:none */
(function(ng){
  'use strict';

  var MODULE_NAME = 'jtt_bricklayer';
  var MAIN_DIRECTIVE_NAME = 'bricklayer';
  var APPEND_DIRECTIVE_NAME = 'bricklayerAppend';
  var PREPEND_DIRECTIVE_NAME = 'bricklayerPrepend';

  ng.module(MODULE_NAME, []);

  ng.module(MODULE_NAME).directive(MAIN_DIRECTIVE_NAME, ['$timeout', _mainFn]);
  ng.module(MODULE_NAME).directive(APPEND_DIRECTIVE_NAME, [_appendFn]);
  ng.module(MODULE_NAME).directive(PREPEND_DIRECTIVE_NAME, [_prependFn]);


  function _mainFn($timeout) {

    function _linkFn($sc, $element, $attr) {

      var _id = $attr['id'];
      var _$element = $element.get(0);

      var _br = new Bricklayer(_$element);

      _redrawOnLoad(_$element, _br);

      //Append
      $sc.$on('bricklayer.append', function($evt, _data) {
        if(_data['target'] !== _id) { return; }

        _br.append(_data['element']);
        _br.redraw();
        _redrawOnLoad(_data['element'], _br)
      });

      //Prepend
      $sc.$on('bricklayer.prepend', function($evt, _data) {
        if(_data['target'] !== _id) { return; }

        _br.prepend(_data['element']);
        _br.redraw();
        _redrawOnLoad(_data['element'], _br);
      });

      //Redraw
      $sc.$on('bricklayer.redraw', function($evt, _data) {
        if(_data['target'] !== _id) { return; }
        _br.redraw();
      });

      //Removes at specified index
      $sc.$on('bricklayer.removeAt', function($evt, _data) {
        if(_data['target'] !== _id) { return; }

        $timeout(function() {
          _br['elements'].splice(_data['index'], 1);
          _br.redraw();
        });
      });

      function _redrawOnLoad($$element, bricklayer) {
        imagesLoaded($$element, function(){ bricklayer.redraw(); })
      }

    }

    return {
      'restrict': 'C',
      'link': _linkFn,
      'controller': function(){}
    };
  }

  function _appendFn(){

    function _linkFn($sc, $element, $attr){
      $sc.$emit('bricklayer.append', {'element': $element.get(0), 'target': $attr['target']});
    }

    return {
      'require': '^^bricklayer',
      'restrict': 'ACE',
      'link': _linkFn
    };

  }

  function _prependFn(){

    function _linkFn($sc, $element, $attr){
      $sc.$emit('bricklayer.prepend', {'element': $element.get(0), 'target': $attr['target']});
    }

    return {
      'require': '^^bricklayer',
      'restrict': 'ACE',
      'link': _linkFn
    };
  }

})(angular);