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. Install with bower:

```sh
  bower install --save angular-morph
```

2. 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-modal="settings"> Log In </button>

  app.controller('AppCtrl', function ($scope) {
    $scope.settings = {
      closeEl: '.close',
      modal: {
        templateUrl: 'path/to/view.html',
        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-overlay="settings"> ... </div>

  app.controller('AppCtrl', function ($scope) {
    $scope.settings = {
      closeEl: '.close',
      overlay: {
        templateUrl: 'path/to/view.html'
      }
    }
  });

Overlay Settings

• closeEl: A class/id selector that will close the overlay when clicked.
• overlay: Required. The overlay 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.

###Expand (Coming Soon!)###

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

  app.controller('AppCtrl', function ($scope) {
    $scope.settings = {
      closeEl: '.close',
      expand: {
        templateUrl: 'path/to/view.html'
      }
    }
  });

###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 -->

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