sm-shape.js

(function(app)
{

  app
    .factory('SemanticShapeLink', ['SemanticUI', SemanticShapeLink])
    .directive('smShapeBind', ['SemanticUI', SemanticShapeBind])
    .directive('smShape', ['SemanticShapeLink', SemanticShape])
  ;

  var BEHAVIORS = {
    smShapeFlipUp:          'flip up',
    smShapeFlipDown:        'flip down',
    smShapeFlipLeft:        'flip left',
    smShapeFlipRight:       'flip right',
    smShapeFlipOver:        'flip over',
    smShapeFlipBack:        'flip back',
    smShapeSetNextSide:     'set next side',
    smShapeReset:           'reset',
    smShapeQueue:           'queue',
    smShapeRepaint:         'repaint',
    smShapeSetDefaultSide:  'set default side',
    smShapeSetStageSize:    'set stage size',
    smShapeRefresh:         'refresh'
  };

  angular.forEach( BEHAVIORS, function(method, directive)
  {
    app.directive( directive, ['SemanticUI', function(SemanticUI)
    {
      return SemanticUI.createBehavior( directive, 'shape', method );
    }]);
  });

  function SemanticShapeBind(SemanticUI)
  {
    return SemanticUI.createBind( 'smShapeBind', 'shape' );
  }

  function SemanticShape(SemanticShapeLink)
  {
    return {

      restrict: 'E',

      replace: true,

      transclude: true,

      scope: {

        settings: '=',
        onInit: '=',
        /* Events */
        onBeforeChange: '=',
        onChange: '=',
      },

      template: [
        '<div class="ui shape">',
        ' <div class="sides" ng-transclude>',
        ' </div>',
        '</div>'
      ].join('\n'),

      link: SemanticShapeLink

    };
  }

  function SemanticShapeLink(SemanticUI)
  {
    return function(scope, element, attributes)
    {
      var settings = scope.settings || {};

      SemanticUI.linkSettings( scope, element, attributes, 'shape' );

      SemanticUI.linkEvents( scope, settings, $.fn.shape.settings, {
        onBeforeChange:   'onBeforeChange',
        onChange:         'onChange'
      });

      element.shape( settings );

      if ( angular.isFunction( scope.onInit ) ) {
        scope.onInit( element );
      }
    };
  }

})( angular.module('semantic-ui-shape', ['semantic-ui-core']) );