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>
 
flippy {
  float: left;
  -webkit-perspective: 600px;
          perspective: 600px;
  -ms-perspective: none;
}
flippy flippy-front,
flippy flippy-back {
  position: absolute;
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
flippy flippy-front {
  z-index: 900;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
          transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotateY(0deg);
}
flippy flippy-back {
  z-index: 800;
  -webkit-transform: rotate3d(0, 1, 0, -180deg);
          transform: rotate3d(0, 1, 0, -180deg);
  -ms-transform: rotateY(180deg);
}
flippy.flipped flippy-front {
  z-index: 900;
  -webkit-transform: rotate3d(0, 1, 0, 180deg);
          transform: rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotateY(180deg);
}
flippy.flipped flippy-back {
  z-index: 1000;
  -webkit-transform: rotate3d(0, 0, 0, 0deg);
          transform: rotate3d(0, 0, 0, 0deg);
  -ms-transform: rotateY(0deg);
}
​
​
​
flippy.fancy {
  float: left;
  margin: 0 10px 10px 0;
  position: relative;
  font-size: .8em;
  cursor: pointer;
  width: 250px;
  height: 250px;
}
flippy.fancy img {
  height: 100%;
  width: 100%;
}
flippy.fancy flippy-front {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 900;
  width: inherit;
  height: inherit;
  border: 1px solid #ccc;
  background: white;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-front.flipped {
  border-color: #eee;
  /*background: #333;*/
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
flippy.fancy flippy-back {
  float: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 800;
  width: inherit;
  height: inherit;
  border: 1px solid #ccc;
  background: white;
  text-align: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.9);
}
flippy.fancy flippy-back.flipped {
  /*background: #80868d;*/
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
}
​
 
​
/**
 * 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

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers