krasaee / ngmorph

ngMorph

Morphable Elements

This module is an attempt at packaging transitions/animations into directives that enable the reuse of elements by morphing them into other elements. The idea was inspired by Google's Topeka project and a great concept I saw on Codrops. Simply create an originating element and apply the ng-morph-<type> directive to make it morphable. Check out the demo page to see it in action!

Demo

Available here. Demo source available here.

Getting Started

1. Include the module in your project:

     angular.module('yourApp', ['ngMorph']);

Usage

Morphables require a settings object which you define in your controller. Settings for each morphable can be found in their respective usage example below.

###Modal###

  <button ng-morph="settings"> Log In </button>

  app.controller('AppCtrl', function ($scope) {
    $scope.settings = {
      closeEl: '.close',
      transition: 'modal'
      templateUrl: 'path/to/view.html',
      callback:{
       console.log('On close');
      },
      controller: ['$scope', function($scope){
       console.log($scope);
      }],
      data:{
       param: 'Param 1'
      },
      actions:{
       onClick:{
         Console.log('On click in modal');
       }
      },
      position: {
       top: '30%',
       left: '20%'
      },
      fade: false
    }
  });

Modal Settings

• closeEl: A class/id selector that will close the modal when clicked.
• modal: Required. The modal configuration object.
• templateUrl: Required if template is not defined. The path to the view template.
• template: Required if templateUrl is not defined. An HTML template string. If templateUrl is also defined, template will take priority.
• position: Optional. The positioning of the end-state element. Can either be pixels or a percentage. If no unit is specified, the input will be treated as a percentage ("30" => "30%").
• fade: Optional. Fade the background content when the modal is open. Default is true.

###Overlay###

  <div ng-morph="settings"> ... </div>

  app.controller('AppCtrl', function ($scope) {
    $scope.settings = {
      closeEl: '.close',
      templateUrl: 'path/to/view.html',
      scroll: false,
      transition: 'overlay'
      callback:{
       console.log('On close');
      },
      controller: ['$scope', function($scope){
       console.log($scope);
      }],
      data:{
       param: 'Param 1'
      },
      actions:{
       onClick:{
         Console.log('On click in modal');
       }
      },
      position: {
       top: '30%',
       left: '20%'
      },
      fade: false
    }
    }
  });

Overlay Settings

• closeEl: A class/id selector that will close the overlay when clicked.
• overlay: Required. The overlay configuration object.
• scroll: Optional. Disable scrolling when overlay is active. Default is true.
• templateUrl: Required if template is not defined. The path to the view template.
• template: Required if templateUrl is not defined. An HTML template string. If templateUrl is also defined, template will take priority.

###Views### In order for elements to morph into their end-state view properly, the contents that make up the view need to be wrapped in a single containing element. Here's an example of what a proper view looks like:

  <div class="col-md-12 login"> <!-- the containing element -->
  
    <!-- contents that make up the view start here -->
    <div class="row">
      <span class="glyphicon glyphicon-remove close-x pull-right"></span>
    </div>
    <div class="row">
      <form>
        <p><label>Email</label><input type="text" /></p>
        <p><label>Password</label><input type="password" /></p>
        <p><button>Login</button></p>
      </form>
    </div>
    
  </div> <!-- /end containing element -->

Contributing

What's Next

There is a lot of work to do before this is ready for an alpha release.. Following is a list of todos to get this repo in shape:

• Abstract functionality from the post-linking function of the morphable directive.
• Refactor using ngAnimate and GSAP (sticking with CSS transitions)
• Add support for nested morphables (morphables within view templates)
• Add different transitions (modal, screen overlay, expand (left, right, down, up))
• Add before/after animation hooks.. (or broadcast events?)
• Validate input settings
• Add error handling
• Write tests
• Write docs
• convert these items into GH issues