Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html ng-app="angular-flippy-demo">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  
  <div class="container">
    <h1>angular-flippy Demo Page</h1>
    <p>
      Please refer to the <a href="https://github.com/zwacky/angular-flippy">README.md</a> for instructions on how to use angular-flippy.
    </p>
    <br><br><br><br><br><br>
    <div class="col-sm-12" ng-repeat="item in [1]">
      <h2>Item #{{$index+1}}</h2>
      <flippy
              class="fancy"
              flip="['click']"
              flip-back="['click']"
              duration="800"
              timing-function="ease-in-out">
​
        <flippy-front>
          <img src="http://placehold.it/300x300&text=Im the front" alt="the front" />
        </flippy-front>
​
        <flippy-back>
          <img src="http://placehold.it/300x300&text=Aaaaaand the back" alt="the back" />
        </flippy-back>
​
      </flippy>
    </div>
  </div>
​
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>angular-flippy Demo</title>
</head>
<body>
​
</body>
</html>
 
​
/**
 * handles the behaviour of flipping card.
 */
angular.module('angular-flippy', []).directive('flippy', function () {
    return {
        restrict: 'E',
        scope: {
            flip: '=',
            flipBack: '=',
            duration: '@',
            timingFunction: '@'
        },
        link: function link($scope, $elem, $attrs) {
​
            var CUSTOM_PREFIX = 'custom:';
            var state = {
                flipped: false
            };
            var options = {
                duration: 400,
                timingFunction: 'ease-in-out'
            };
​
            // assign new options
            angular.forEach(['duration', 'timingFunction'], function (item) {
                options[item] = $scope.item ? $scope.item : options[item];
            });
​
            angular.forEach({ flip: flip, flipBack: flipBack }, function (flipFunc, evt) {
                angular.forEach($scope[evt], function (eventName) {
                    if (eventName.indexOf(CUSTOM_PREFIX) === -1) {
                        // directly register event listener to avoid having to start off angular's digest cycle
                        angular.element($elem)[0].addEventListener(eventName, flipFunc);
                    } else {
                        $scope.$on(eventName.substr(eventName.indexOf(CUSTOM_PREFIX)), flipFunc);
                    }
                });
            });
​
            // set flip duration
            angular.forEach(['flippy-front', 'flippy-back'], function (name) {
                var el = $elem.find(name);
                if (el.length == 1) {
                    angular.forEach(['', '-ms-', '-webkit-'], function (prefix) {
                        angular.element(el[0]).css(prefix + 'transition', 'all ' + options.duration / 1000 + 's ' + options.timingFunction);
                    });
                }
            });
​
            /**
    * flips the card.
    * will be ignored, if the state is already the same as the target state.
    *
    * @param boolean isBack
    */
            function _flip() {
                var isBack = arguments.length <= 0 || arguments[0] === undefined ? false : arguments[0];
​
                if (!isBack && !state.flipped || isBack && state.flipped) {
                    // to avoid toggling it right back if flip-back is the same event
                    setTimeout(function () {
                        $elem.toggleClass('flipped');
                        state.flipped = !state.flipped;
                    }, 0);
                }
            }
​
            function flip() {
                _flip();
            }
​
            function flipBack() {
                _flip(true);
            }
        }
    };
});
​
angular.module('angular-flippy-demo', [
    'angular-flippy'
]);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers