Famo.us/Angular: Animate data structure changes with Famo.us

/*Downloaded from https://www.codeseek.co/aknip/famousangular-animate-data-structure-changes-with-famous-jxoaD */
body { 
  padding: 0;
  margin: 0;
  font-family: "roboto";
  font-weight: 300; 
}


.phone-view-container{
  position: absolute;
  left: 33px;
  top: 122px;
  width: 320px;
  z-index: 2;
}

@media (max-width: 385px) {
  .phone-frame{
    display: none;
  }

  .phone-view-container{
    left: 0;
    right: 0;
    top: 0;
  }
}


.famous-angular-container {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

/* APP STYLES */

/*Downloaded from https://www.codeseek.co/aknip/famousangular-animate-data-structure-changes-with-famous-jxoaD */
//
// For more info see my blog: http://viz-co.de/
//

// UI Router

angular.module('famousApp', ['famous.angular', 'ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {

        $urlRouterProvider.otherwise("/homeview");
        $stateProvider

            .state("homeview", {
                controller: "homeview",
                url: "/homeview",
                templateUrl: "homeview.html"
            }) 

    }); 

// Controller


function translateSquare(index) {
    return 70 * (index || 0) + 35
}

angular.module('famousApp')
    .controller('homeview', function ($scope, $famous) {
        
        $scope.config={
          translateX: 14,
          repeatedItems : 6
        }; 
      
        $scope.squares = _.map(_.range(0, 4), function(index) {
            return {x: translateSquare(index)}
        });
      
        $scope.modifiers = [0, 1, 2]; 
      
        $scope.$watch("config.repeatedItems", function(value) {
            $scope.modifiers = _.range(0, value)
        });
      
        
        
    });


angular.module('famousApp')
    .directive("squaremod", ["$famous", function($famous) {
        var Transform       = $famous["famous/core/Transform"];
        var Transitionable  = $famous["famous/transitions/Transitionable"];
        var SnapTransition  = $famous["famous/transitions/SnapTransition"];
        var flipOut = Transform.rotateZ(Math.PI / 2);
        var flipIn = Transform.inverse(flipOut);
      
        return {restrict: "A",priority: 3,link: function(scope) {
          
                function enter() {
                    return transform.set(Transform.multiply(transform.get(), flipIn), {duration: 250,transition: SnapTransition}), opacity.set(1, {duration: 250,curve: "easeOut"}), 250
                };
          
                function leave() {
                    return transform.set(Transform.multiply(transform.get(), flipOut), {duration: 250,transition: SnapTransition}), opacity.set(0, {duration: 250,curve: "easeIn"}), 250
                };
          
                function halt() {
                    scope.transform.halt()
                };
          
                var transform = new Transitionable(
                  Transform.multiply(
                    Transform.translate(translateSquare(scope.$index % 4), 60 * Math.floor(scope.$index / 4) + 40, 0), 
                    flipOut)); 
                
                var opacity = new Transitionable(0);
          
                angular.extend(scope, {enter: enter,leave: leave,halt: halt,opacity: opacity,transform: transform});
          
            }}
    }]);


angular.module('famousApp')
  .directive('presentationframe', function($compile) {
    return {
      replace : true,
      scope : false,
      restrict: 'EA',
      link: function($scope, $element, $attr) {
        // Compute Output DOM:    
        var deviceDom1 = '<div style="position: relative; width: 385px; margin: 0 auto;"> <!-- Phone Picture as SVG --> <svg class ="phone-frame" x="0px" y="0px"viewBox="0 0 188 390" enable-background="new 0 0 188 390" xml:space="preserve" preserveAspectRatio="none" height="812" width="384">  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,58H3.7c-1,0-1.8,0.8-1.8,1.8v13.4c0,1,0.8,1.8,1.8,1.8h0.2   L3.9,58L3.9,58z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,93.1H3.7c-1,0-1.8,0.9-1.8,1.9v9.6c0,1.1,0.8,1.9,1.8,1.9h0.2   L3.9,93.1L3.9,93.1z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M3.9,124.6H3.7c-1,0-1.8,0.9-1.8,1.9v9.6c0,1.1,0.8,1.9,1.8,1.9   h0.2L3.9,124.6L3.9,124.6z"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M184.2,352.4V41c0-35.5-23.1-35-23.1-35s-96.4,0-127.9,0   S3.6,41,3.6,41v311.4c0.4,35.5,24.1,32.8,24.1,32.8s105.9,0,131.8,0C185.4,385.2,184.2,352.4,184.2,352.4z"/>  <path fill="#414141" d="M173.6,331c0,1-0.8,1.8-1.8,1.8H16.3c-1,0-1.8-0.8-1.8-1.8V59.7c0-1,0.8-1.8,1.8-1.8h155.5   c1,0,1.8,0.8,1.8,1.8L173.6,331L173.6,331z"/>  <ellipse fill="#F0EEE9" cx="94.1" cy="357.7" rx="16.7" ry="16.5"/>  <ellipse fill="#FFFFFF" cx="94.1" cy="357.7" rx="14.9" ry="14.8"/>  <path fill="#5E5E5E" d="M109.1,38.8c0,1-0.8,1.8-1.8,1.8H80.9c-1,0-1.8-0.8-1.8-1.8V38c0-1,0.8-1.8,1.8-1.8h26.4   c1,0,1.8,0.8,1.8,1.8V38.8z"/>  <ellipse fill="#5E5E5E" cx="69.3" cy="38.4" rx="2.5" ry="2.5"/>  <ellipse fill="#5E5E5E" cx="94.1" cy="24.2" rx="3.4" ry="3.4"/>  <path fill="#FFFFFF" stroke="#868684" stroke-miterlimit="10" d="M152,5.9c0.7,0,1.4,0,2.1,0.1V4.2c0-1-0.8-1.8-1.8-1.8h-27.2   c-1,0-1.8,0.8-1.8,1.8v1.6H152z"/>  </svg>';
        
        var deviceDom2 = '</div>';
        
        var famousDomDevice = '<!-- Container for Famo.us --> <div class="phone-view-container" ui-view></div>';
        
        var famousDomPlain = '<!-- Container for Famo.us --> <div class="plain-view-container" ui-view></div>';
        
        var css1 = '<style type="text/css"> \n'+ 
                    'Add style rules here \n'+
                    '</style> \n';
        
        var device = $attr.device || 'none';
        
        var width = window.innerWidth;
        var height = window.innerHeight;
        
        var outputDOM = '';
        var csscode = '';
        
        if (device != 'none') {
          outputDOM = angular.element(deviceDom1 + famousDomDevice + deviceDom2);
          csscode = ".appsize {width:320px; height:568px}";
        } else {
          outputDOM = angular.element(famousDomPlain);
          csscode = ".appsize {width:"+ width +"px; height:" + height + "px}";
        }
        
        // CREATE CSS       
        var style = document.createElement('style');
        style.type = 'text/css';
        if (style.styleSheet) {
          // IE 
          style.styleSheet.cssText = csscode;
        } else {
          // Other browsers
          style.innerHTML = csscode;
        }
        document.getElementsByTagName("head")[0].appendChild( style );

        // compile and finish
        var $e =$compile(outputDOM)($scope);
        $element.replaceWith($e);
      }
    }    
  });