+ *
+ *
+ * {{ number }}
+ *
+ *
+ * Fade me in out
+ *
+ *
+ *
+ * ```
+ *
+ * Notice the CSS class **fade**? We can now create the CSS transition code that references this class:
+ *
+ * ```css
+ * /* The starting CSS styles for the enter animation */
+ * .fade.ng-enter {
+ * transition:0.5s linear all;
+ * opacity:0;
+ * }
+ *
+ * /* The finishing CSS styles for the enter animation */
+ * .fade.ng-enter.ng-enter-active {
+ * opacity:1;
+ * }
+ * ```
+ *
+ * The key thing to remember here is that, depending on the animation event (which each of the directives above trigger depending on what's going on) two
+ * generated CSS classes will be applied to the element; in the example above we have `.ng-enter` and `.ng-enter-active`. For CSS transitions, the transition
+ * code **must** be defined within the starting CSS class (in this case `.ng-enter`). The destination class is what the transition will animate towards.
+ *
+ * If for example we wanted to create animations for `leave` and `move` (ngRepeat triggers move) then we can do so using the same CSS naming conventions:
+ *
+ * ```css
+ * /* now the element will fade out before it is removed from the DOM */
+ * .fade.ng-leave {
+ * transition:0.5s linear all;
+ * opacity:1;
+ * }
+ * .fade.ng-leave.ng-leave-active {
+ * opacity:0;
+ * }
+ * ```
+ *
+ * We can also make use of **CSS Keyframes** by referencing the keyframe animation within the starting CSS class:
+ *
+ * ```css
+ * /* there is no need to define anything inside of the destination
+ * CSS class since the keyframe will take charge of the animation */
+ * .fade.ng-leave {
+ * animation: my_fade_animation 0.5s linear;
+ * -webkit-animation: my_fade_animation 0.5s linear;
+ * }
+ *
+ * @keyframes my_fade_animation {
+ * from { opacity:1; }
+ * to { opacity:0; }
+ * }
+ *
+ * @-webkit-keyframes my_fade_animation {
+ * from { opacity:1; }
+ * to { opacity:0; }
+ * }
+ * ```
+ *
+ * Feel free also mix transitions and keyframes together as well as any other CSS classes on the same element.
+ *
+ * ### CSS Class-based Animations
+ *
+ * Class-based animations (animations that are triggered via `ngClass`, `ngShow`, `ngHide` and some other directives) have a slightly different
+ * naming convention. Class-based animations are basic enough that a standard transition or keyframe can be referenced on the class being added
+ * and removed.
+ *
+ * For example if we wanted to do a CSS animation for `ngHide` then we place an animation on the `.ng-hide` CSS class:
+ *
+ * ```html
+ *
+ * Show and hide me
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * All that is going on here with ngShow/ngHide behind the scenes is the `.ng-hide` class is added/removed (when the hidden state is valid). Since
+ * ngShow and ngHide are animation aware then we can match up a transition and ngAnimate handles the rest.
+ *
+ * In addition the addition and removal of the CSS class, ngAnimate also provides two helper methods that we can use to further decorate the animation
+ * with CSS styles.
+ *
+ * ```html
+ *
+ * Highlight this box
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * We can also make use of CSS keyframes by placing them within the CSS classes.
+ *
+ *
+ * ### CSS Staggering Animations
+ * A Staggering animation is a collection of animations that are issued with a slight delay in between each successive operation resulting in a
+ * curtain-like effect. The ngAnimate module (versions >=1.2) supports staggering animations and the stagger effect can be
+ * performed by creating a **ng-EVENT-stagger** CSS class and attaching that class to the base CSS class used for
+ * the animation. The style property expected within the stagger class can either be a **transition-delay** or an
+ * **animation-delay** property (or both if your animation contains both transitions and keyframe animations).
+ *
+ * ```css
+ * .my-animation.ng-enter {
+ * /* standard transition code */
+ * transition: 1s linear all;
+ * opacity:0;
+ * }
+ * .my-animation.ng-enter-stagger {
+ * /* this will have a 100ms delay between each successive leave animation */
+ * transition-delay: 0.1s;
+ *
+ * /* As of 1.4.4, this must always be set: it signals ngAnimate
+ * to not accidentally inherit a delay property from another CSS class */
+ * transition-duration: 0s;
+ * }
+ * .my-animation.ng-enter.ng-enter-active {
+ * /* standard transition styles */
+ * opacity:1;
+ * }
+ * ```
+ *
+ * Staggering animations work by default in ngRepeat (so long as the CSS class is defined). Outside of ngRepeat, to use staggering animations
+ * on your own, they can be triggered by firing multiple calls to the same event on $animate. However, the restrictions surrounding this
+ * are that each of the elements must have the same CSS className value as well as the same parent element. A stagger operation
+ * will also be reset if one or more animation frames have passed since the multiple calls to `$animate` were fired.
+ *
+ * The following code will issue the **ng-leave-stagger** event on the element provided:
+ *
+ * ```js
+ * var kids = parent.children();
+ *
+ * $animate.leave(kids[0]); //stagger index=0
+ * $animate.leave(kids[1]); //stagger index=1
+ * $animate.leave(kids[2]); //stagger index=2
+ * $animate.leave(kids[3]); //stagger index=3
+ * $animate.leave(kids[4]); //stagger index=4
+ *
+ * window.requestAnimationFrame(function() {
+ * //stagger has reset itself
+ * $animate.leave(kids[5]); //stagger index=0
+ * $animate.leave(kids[6]); //stagger index=1
+ *
+ * $scope.$digest();
+ * });
+ * ```
+ *
+ * Stagger animations are currently only supported within CSS-defined animations.
+ *
+ * ### The `ng-animate` CSS class
+ *
+ * When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.
+ * This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).
+ *
+ * Therefore, animations can be applied to an element using this temporary class directly via CSS.
+ *
+ * ```css
+ * .zipper.ng-animate {
+ * transition:0.5s linear all;
+ * }
+ * .zipper.ng-enter {
+ * opacity:0;
+ * }
+ * .zipper.ng-enter.ng-enter-active {
+ * opacity:1;
+ * }
+ * .zipper.ng-leave {
+ * opacity:1;
+ * }
+ * .zipper.ng-leave.ng-leave-active {
+ * opacity:0;
+ * }
+ * ```
+ *
+ * (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove
+ * the CSS class once an animation has completed.)
+ *
+ *
+ * ### The `ng-[event]-prepare` class
+ *
+ * This is a special class that can be used to prevent unwanted flickering / flash of content before
+ * the actual animation starts. The class is added as soon as an animation is initialized, but removed
+ * before the actual animation starts (after waiting for a $digest).
+ * It is also only added for *structural* animations (`enter`, `move`, and `leave`).
+ *
+ * In practice, flickering can appear when nesting elements with structural animations such as `ngIf`
+ * into elements that have class-based animations such as `ngClass`.
+ *
+ * ```html
+ *
+ *
+ * ```
+ *
+ * It is possible that during the `enter` animation, the `.message` div will be briefly visible before it starts animating.
+ * In that case, you can add styles to the CSS that make sure the element stays hidden before the animation starts:
+ *
+ * ```css
+ * .message.ng-enter-prepare {
+ * opacity: 0;
+ * }
+ *
+ * ```
+ *
+ * ## JavaScript-based Animations
+ *
+ * ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared
+ * CSS class that is referenced in our HTML code) but in addition we need to register the JavaScript animation on the module. By making use of the
+ * `module.animation()` module function we can register the animation.
+ *
+ * Let's see an example of a enter/leave animation using `ngRepeat`:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * See the **slide** CSS class? Let's use that class to define an animation that we'll structure in our module code by using `module.animation`:
+ *
+ * ```js
+ * myModule.animation('.slide', [function() {
+ * return {
+ * // make note that other events (like addClass/removeClass)
+ * // have different function input parameters
+ * enter: function(element, doneFn) {
+ * jQuery(element).fadeIn(1000, doneFn);
+ *
+ * // remember to call doneFn so that angular
+ * // knows that the animation has concluded
+ * },
+ *
+ * move: function(element, doneFn) {
+ * jQuery(element).fadeIn(1000, doneFn);
+ * },
+ *
+ * leave: function(element, doneFn) {
+ * jQuery(element).fadeOut(1000, doneFn);
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * The nice thing about JS-based animations is that we can inject other services and make use of advanced animation libraries such as
+ * greensock.js and velocity.js.
+ *
+ * If our animation code class-based (meaning that something like `ngClass`, `ngHide` and `ngShow` triggers it) then we can still define
+ * our animations inside of the same registered animation, however, the function input arguments are a bit different:
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ * this box is moody
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * ```js
+ * myModule.animation('.colorful', [function() {
+ * return {
+ * addClass: function(element, className, doneFn) {
+ * // do some cool animation and call the doneFn
+ * },
+ * removeClass: function(element, className, doneFn) {
+ * // do some cool animation and call the doneFn
+ * },
+ * setClass: function(element, addedClass, removedClass, doneFn) {
+ * // do some cool animation and call the doneFn
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * ## CSS + JS Animations Together
+ *
+ * AngularJS 1.4 and higher has taken steps to make the amalgamation of CSS and JS animations more flexible. However, unlike earlier versions of Angular,
+ * defining CSS and JS animations to work off of the same CSS class will not work anymore. Therefore the example below will only result in **JS animations taking
+ * charge of the animation**:
+ *
+ * ```html
+ *
+ * ```
+ *
+ * ```js
+ * myModule.animation('.slide', [function() {
+ * return {
+ * enter: function(element, doneFn) {
+ * jQuery(element).slideIn(1000, doneFn);
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * ```css
+ * .slide.ng-enter {
+ * transition:0.5s linear all;
+ * transform:translateY(-100px);
+ * }
+ * .slide.ng-enter.ng-enter-active {
+ * transform:translateY(0);
+ * }
+ * ```
+ *
+ * Does this mean that CSS and JS animations cannot be used together? Do JS-based animations always have higher priority? We can make up for the
+ * lack of CSS animations by using the `$animateCss` service to trigger our own tweaked-out, CSS-based animations directly from
+ * our own JS-based animation code:
+ *
+ * ```js
+ * myModule.animation('.slide', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element) {
+* // this will trigger `.slide.ng-enter` and `.slide.ng-enter-active`.
+ * return $animateCss(element, {
+ * event: 'enter',
+ * structural: true
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * The nice thing here is that we can save bandwidth by sticking to our CSS-based animation code and we don't need to rely on a 3rd-party animation framework.
+ *
+ * The `$animateCss` service is very powerful since we can feed in all kinds of extra properties that will be evaluated and fed into a CSS transition or
+ * keyframe animation. For example if we wanted to animate the height of an element while adding and removing classes then we can do so by providing that
+ * data into `$animateCss` directly:
+ *
+ * ```js
+ * myModule.animation('.slide', ['$animateCss', function($animateCss) {
+ * return {
+ * enter: function(element) {
+ * return $animateCss(element, {
+ * event: 'enter',
+ * structural: true,
+ * addClass: 'maroon-setting',
+ * from: { height:0 },
+ * to: { height: 200 }
+ * });
+ * }
+ * }
+ * }]);
+ * ```
+ *
+ * Now we can fill in the rest via our transition CSS code:
+ *
+ * ```css
+ * /* the transition tells ngAnimate to make the animation happen */
+ * .slide.ng-enter { transition:0.5s linear all; }
+ *
+ * /* this extra CSS class will be absorbed into the transition
+ * since the $animateCss code is adding the class */
+ * .maroon-setting { background:red; }
+ * ```
+ *
+ * And `$animateCss` will figure out the rest. Just make sure to have the `done()` callback fire the `doneFn` function to signal when the animation is over.
+ *
+ * To learn more about what's possible be sure to visit the {@link ngAnimate.$animateCss $animateCss service}.
+ *
+ * ## Animation Anchoring (via `ng-animate-ref`)
+ *
+ * ngAnimate in AngularJS 1.4 comes packed with the ability to cross-animate elements between
+ * structural areas of an application (like views) by pairing up elements using an attribute
+ * called `ng-animate-ref`.
+ *
+ * Let's say for example we have two views that are managed by `ng-view` and we want to show
+ * that there is a relationship between two components situated in within these views. By using the
+ * `ng-animate-ref` attribute we can identify that the two components are paired together and we
+ * can then attach an animation, which is triggered when the view changes.
+ *
+ * Say for example we have the following template code:
+ *
+ * ```html
+ *
+ *
+ *
+ *
+ *
+ *
+ * 
+ *
+ *
+ *
+ *
+ * ```
+ *
+ * Now, when the view changes (once the link is clicked), ngAnimate will examine the
+ * HTML contents to see if there is a match reference between any components in the view
+ * that is leaving and the view that is entering. It will scan both the view which is being
+ * removed (leave) and inserted (enter) to see if there are any paired DOM elements that
+ * contain a matching ref value.
+ *
+ * The two images match since they share the same ref value. ngAnimate will now create a
+ * transport element (which is a clone of the first image element) and it will then attempt
+ * to animate to the position of the second image element in the next view. For the animation to
+ * work a special CSS class called `ng-anchor` will be added to the transported element.
+ *
+ * We can now attach a transition onto the `.banner.ng-anchor` CSS class and then
+ * ngAnimate will handle the entire transition for us as well as the addition and removal of
+ * any changes of CSS classes between the elements:
+ *
+ * ```css
+ * .banner.ng-anchor {
+ * /* this animation will last for 1 second since there are
+ * two phases to the animation (an `in` and an `out` phase) */
+ * transition:0.5s linear all;
+ * }
+ * ```
+ *
+ * We also **must** include animations for the views that are being entered and removed
+ * (otherwise anchoring wouldn't be possible since the new view would be inserted right away).
+ *
+ * ```css
+ * .view-animation.ng-enter, .view-animation.ng-leave {
+ * transition:0.5s linear all;
+ * position:fixed;
+ * left:0;
+ * top:0;
+ * width:100%;
+ * }
+ * .view-animation.ng-enter {
+ * transform:translateX(100%);
+ * }
+ * .view-animation.ng-leave,
+ * .view-animation.ng-enter.ng-enter-active {
+ * transform:translateX(0%);
+ * }
+ * .view-animation.ng-leave.ng-leave-active {
+ * transform:translateX(-100%);
+ * }
+ * ```
+ *
+ * Now we can jump back to the anchor animation. When the animation happens, there are two stages that occur:
+ * an `out` and an `in` stage. The `out` stage happens first and that is when the element is animated away
+ * from its origin. Once that animation is over then the `in` stage occurs which animates the
+ * element to its destination. The reason why there are two animations is to give enough time
+ * for the enter animation on the new element to be ready.
+ *
+ * The example above sets up a transition for both the in and out phases, but we can also target the out or
+ * in phases directly via `ng-anchor-out` and `ng-anchor-in`.
+ *
+ * ```css
+ * .banner.ng-anchor-out {
+ * transition: 0.5s linear all;
+ *
+ * /* the scale will be applied during the out animation,
+ * but will be animated away when the in animation runs */
+ * transform: scale(1.2);
+ * }
+ *
+ * .banner.ng-anchor-in {
+ * transition: 1s linear all;
+ * }
+ * ```
+ *
+ *
+ *
+ *
+ * ### Anchoring Demo
+ *
+ +
+
+
+ Welcome to the home page +
Please click on an element
+ + {{ record.title }} + +
+ {{ profile.title }}
+
+ \n
\n\n {{heading}}\n
\n\n \n
\n');
+hidden:/(auto|scroll|hidden)/},f={auto:/\s?auto?\s?/i,primary:/^(top|bottom|left|right)$/,secondary:/^(top|bottom|left|right|center)$/,vertical:/^(top|bottom)$/},g=/(HTML|BODY)/;return{getRawNode:function(a){return a.nodeName?a:a[0]||a},parseStyle:function(a){return a=parseFloat(a),isFinite(a)?a:0},offsetParent:function(c){function d(a){return"static"===(b.getComputedStyle(a).position||"static")}c=this.getRawNode(c);for(var e=c.offsetParent||a[0].documentElement;e&&e!==a[0].documentElement&&d(e);)e=e.offsetParent;return e||a[0].documentElement},scrollbarWidth:function(e){if(e){if(angular.isUndefined(d)){var f=a.find("body");f.addClass("uib-position-body-scrollbar-measure"),d=b.innerWidth-f[0].clientWidth,d=isFinite(d)?d:0,f.removeClass("uib-position-body-scrollbar-measure")}return d}if(angular.isUndefined(c)){var g=angular.element('');a.find("body").append(g),c=g[0].offsetWidth-g[0].clientWidth,c=isFinite(c)?c:0,g.remove()}return c},scrollbarPadding:function(a){a=this.getRawNode(a);var c=b.getComputedStyle(a),d=this.parseStyle(c.paddingRight),e=this.parseStyle(c.paddingBottom),f=this.scrollParent(a,!1,!0),h=this.scrollbarWidth(f,g.test(f.tagName));return{scrollbarWidth:h,widthOverflow:f.scrollWidth>f.clientWidth,right:d+h,originalRight:d,heightOverflow:f.scrollHeight>f.clientHeight,bottom:e+h,originalBottom:e}},isScrollable:function(a,c){a=this.getRawNode(a);var d=c?e.hidden:e.normal,f=b.getComputedStyle(a);return d.test(f.overflow+f.overflowY+f.overflowX)},scrollParent:function(c,d,f){c=this.getRawNode(c);var g=d?e.hidden:e.normal,h=a[0].documentElement,i=b.getComputedStyle(c);if(f&&g.test(i.overflow+i.overflowY+i.overflowX))return c;var j="absolute"===i.position,k=c.parentElement||h;if(k===h||"fixed"===i.position)return h;for(;k.parentElement&&k!==h;){var l=b.getComputedStyle(k);if(j&&"static"!==l.position&&(j=!1),!j&&g.test(l.overflow+l.overflowY+l.overflowX))break;k=k.parentElement}return k},position:function(c,d){c=this.getRawNode(c);var e=this.offset(c);if(d){var f=b.getComputedStyle(c);e.top-=this.parseStyle(f.marginTop),e.left-=this.parseStyle(f.marginLeft)}var g=this.offsetParent(c),h={top:0,left:0};return g!==a[0].documentElement&&(h=this.offset(g),h.top+=g.clientTop-g.scrollTop,h.left+=g.clientLeft-g.scrollLeft),{width:Math.round(angular.isNumber(e.width)?e.width:c.offsetWidth),height:Math.round(angular.isNumber(e.height)?e.height:c.offsetHeight),top:Math.round(e.top-h.top),left:Math.round(e.left-h.left)}},offset:function(c){c=this.getRawNode(c);var d=c.getBoundingClientRect();return{width:Math.round(angular.isNumber(d.width)?d.width:c.offsetWidth),height:Math.round(angular.isNumber(d.height)?d.height:c.offsetHeight),top:Math.round(d.top+(b.pageYOffset||a[0].documentElement.scrollTop)),left:Math.round(d.left+(b.pageXOffset||a[0].documentElement.scrollLeft))}},viewportOffset:function(c,d,e){c=this.getRawNode(c),e=e!==!1;var f=c.getBoundingClientRect(),g={top:0,left:0,bottom:0,right:0},h=d?a[0].documentElement:this.scrollParent(c),i=h.getBoundingClientRect();if(g.top=i.top+h.clientTop,g.left=i.left+h.clientLeft,h===a[0].documentElement&&(g.top+=b.pageYOffset,g.left+=b.pageXOffset),g.bottom=g.top+h.clientHeight,g.right=g.left+h.clientWidth,e){var j=b.getComputedStyle(h);g.top+=this.parseStyle(j.paddingTop),g.bottom-=this.parseStyle(j.paddingBottom),g.left+=this.parseStyle(j.paddingLeft),g.right-=this.parseStyle(j.paddingRight)}return{top:Math.round(f.top-g.top),bottom:Math.round(g.bottom-f.bottom),left:Math.round(f.left-g.left),right:Math.round(g.right-f.right)}},parsePlacement:function(a){var b=f.auto.test(a);return b&&(a=a.replace(f.auto,"")),a=a.split("-"),a[0]=a[0]||"top",f.primary.test(a[0])||(a[0]="top"),a[1]=a[1]||"center",f.secondary.test(a[1])||(a[1]="center"),b?a[2]=!0:a[2]=!1,a},positionElements:function(a,c,d,e){a=this.getRawNode(a),c=this.getRawNode(c);var g=angular.isDefined(c.offsetWidth)?c.offsetWidth:c.prop("offsetWidth"),h=angular.isDefined(c.offsetHeight)?c.offsetHeight:c.prop("offsetHeight");d=this.parsePlacement(d);var i=e?this.offset(a):this.position(a),j={top:0,left:0,placement:""};if(d[2]){var k=this.viewportOffset(a,e),l=b.getComputedStyle(c),m={width:g+Math.round(Math.abs(this.parseStyle(l.marginLeft)+this.parseStyle(l.marginRight))),height:h+Math.round(Math.abs(this.parseStyle(l.marginTop)+this.parseStyle(l.marginBottom)))};if(d[0]="top"===d[0]&&m.height>k.top&&m.height<=k.bottom?"bottom":"bottom"===d[0]&&m.height>k.bottom&&m.height<=k.top?"top":"left"===d[0]&&m.width>k.left&&m.width<=k.right?"right":"right"===d[0]&&m.width>k.right&&m.width<=k.left?"left":d[0],d[1]="top"===d[1]&&m.height-i.height>k.bottom&&m.height-i.height<=k.top?"bottom":"bottom"===d[1]&&m.height-i.height>k.top&&m.height-i.height<=k.bottom?"top":"left"===d[1]&&m.width-i.width>k.right&&m.width-i.width<=k.left?"right":"right"===d[1]&&m.width-i.width>k.left&&m.width-i.width<=k.right?"left":d[1],"center"===d[1])if(f.vertical.test(d[0])){var n=i.width/2-g/2;k.left+n<0&&m.width-i.width<=k.right?d[1]="left":k.right+n<0&&m.width-i.width<=k.left&&(d[1]="right")}else{var o=i.height/2-m.height/2;k.top+o<0&&m.height-i.height<=k.bottom?d[1]="top":k.bottom+o<0&&m.height-i.height<=k.top&&(d[1]="bottom")}}switch(d[0]){case"top":j.top=i.top-h;break;case"bottom":j.top=i.top+i.height;break;case"left":j.left=i.left-g;break;case"right":j.left=i.left+i.width}switch(d[1]){case"top":j.top=i.top;break;case"bottom":j.top=i.top+i.height-h;break;case"left":j.left=i.left;break;case"right":j.left=i.left+i.width-g;break;case"center":f.vertical.test(d[0])?j.left=i.left+i.width/2-g/2:j.top=i.top+i.height/2-h/2}return j.top=Math.round(j.top),j.left=Math.round(j.left),j.placement="center"===d[1]?d[0]:d[0]+"-"+d[1],j},adjustTop:function(a,b,c,d){return-1!==a.indexOf("top")&&c!==d?{top:b.top-d+"px"}:void 0},positionArrow:function(a,c){a=this.getRawNode(a);var d=a.querySelector(".tooltip-inner, .popover-inner");if(d){var e=angular.element(d).hasClass("tooltip-inner"),g=e?a.querySelector(".tooltip-arrow"):a.querySelector(".arrow");if(g){var h={top:"",bottom:"",left:"",right:""};if(c=this.parsePlacement(c),"center"===c[1])return void angular.element(g).css(h);var i="border-"+c[0]+"-width",j=b.getComputedStyle(g)[i],k="border-";k+=f.vertical.test(c[0])?c[0]+"-"+c[1]:c[1]+"-"+c[0],k+="-radius";var l=b.getComputedStyle(e?d:a)[k];switch(c[0]){case"top":h.bottom=e?"0":"-"+j;break;case"bottom":h.top=e?"0":"-"+j;break;case"left":h.right=e?"0":"-"+j;break;case"right":h.left=e?"0":"-"+j}h[c[1]]=l,angular.element(g).css(h)}}}}}]),angular.module("ui.bootstrap.datepickerPopup",["ui.bootstrap.datepicker","ui.bootstrap.position"]).value("$datepickerPopupLiteralWarning",!0).constant("uibDatepickerPopupConfig",{altInputFormats:[],appendToBody:!1,clearText:"Clear",closeOnDateSelection:!0,closeText:"Done",currentText:"Today",datepickerPopup:"yyyy-MM-dd",datepickerPopupTemplateUrl:"uib/template/datepickerPopup/popup.html",datepickerTemplateUrl:"uib/template/datepicker/datepicker.html",html5Types:{date:"yyyy-MM-dd","datetime-local":"yyyy-MM-ddTHH:mm:ss.sss",month:"yyyy-MM"},onOpenFocus:!0,showButtonBar:!0,placement:"auto bottom-left"}).controller("UibDatepickerPopupController",["$scope","$element","$attrs","$compile","$log","$parse","$window","$document","$rootScope","$uibPosition","dateFilter","uibDateParser","uibDatepickerPopupConfig","$timeout","uibDatepickerConfig","$datepickerPopupLiteralWarning",function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p){function q(b){var c=l.parse(b,w,a.date);if(isNaN(c))for(var d=0;d\n
\n\n {{heading}}\n
\n\n \n
\n');
}]),angular.module("uib/template/accordion/accordion.html",[]).run(["$templateCache",function(a){a.put("uib/template/accordion/accordion.html",'')}]),angular.module("uib/template/alert/alert.html",[]).run(["$templateCache",function(a){a.put("uib/template/alert/alert.html",'\n\n')}]),angular.module("uib/template/carousel/carousel.html",[]).run(["$templateCache",function(a){a.put("uib/template/carousel/carousel.html",'\n\n \n previous\n\n\n \n next\n\n- \n
- \n slide {{ $index + 1 }} of {{ slides.length }}, currently active\n \n
\n \n \n \n
\n')}]),angular.module("uib/template/datepicker/day.html",[]).run(["$templateCache",function(a){a.put("uib/template/datepicker/day.html",'| \n | \n | \n |
|---|---|---|
| \n | {{::label.abbr}} | \n|
| {{ weekNumbers[$index] }} | \n\n \n | \n
| \n | \n | \n |
|---|---|---|
| \n \n | \n
| \n | \n | \n |
|---|---|---|
| \n \n | \n
\n")}]),angular.module("uib/template/pager/pager.html",[]).run(["$templateCache",function(a){a.put("uib/template/pager/pager.html",'
\n \n \n
\n')}]),angular.module("uib/template/popover/popover-template.html",[]).run(["$templateCache",function(a){a.put("uib/template/popover/popover-template.html",'\n\n\n \n \n
\n')}]),angular.module("uib/template/popover/popover.html",[]).run(["$templateCache",function(a){a.put("uib/template/popover/popover.html",'\n\n\n \n \n
\n')}]),angular.module("uib/template/progressbar/bar.html",[]).run(["$templateCache",function(a){a.put("uib/template/progressbar/bar.html",'\n')}]),angular.module("uib/template/progressbar/progress.html",[]).run(["$templateCache",function(a){a.put("uib/template/progressbar/progress.html",'')}]),angular.module("uib/template/progressbar/progressbar.html",[]).run(["$templateCache",function(a){a.put("uib/template/progressbar/progressbar.html",'\n \n
\n')}]),angular.module("uib/template/rating/rating.html",[]).run(["$templateCache",function(a){a.put("uib/template/rating/rating.html",'\n ({{ $index < value ? \'*\' : \' \' }})\n \n\n')}]),angular.module("uib/template/tabs/tab.html",[]).run(["$templateCache",function(a){a.put("uib/template/tabs/tab.html",'\n \n
\n')}]),angular.module("uib/template/timepicker/timepicker.html",[]).run(["$templateCache",function(a){a.put("uib/template/timepicker/timepicker.html",'\n
\n\n
\n | \n | \n | \n | \n | \n | \n |
| \n \n | \n: | \n\n \n | \n: | \n\n \n | \n\n |
| \n | \n | \n | \n | \n | \n |
-
Login option:
- + -
- Pokesistant
-
-
-
-
+
+
+
-
+
-
+
+
{{errorMessage}}
- - - +
+
+
\ No newline at end of file
diff --git a/server/public/static/partials/pokemonList.html b/server/public/static/partials/pokemonList.html
index 5821d1e..d1272cb 100644
--- a/server/public/static/partials/pokemonList.html
+++ b/server/public/static/partials/pokemonList.html
@@ -1,37 +1,62 @@
-
-
-{{alert.msg}}
+
+
- +
+
+
+
+
+
+
-
diff --git a/server/public/templates/index.html b/server/public/templates/index.html
index d19a198..8e12550 100644
--- a/server/public/templates/index.html
+++ b/server/public/templates/index.html
@@ -17,25 +17,43 @@
-
+
- ![]()
- Pokemon: {{pokemon.pokemon_name}} | IV: {{pokemon.IV}} | CP: {{pokemon.cp}}
- Attack: {{pokemon.individual_attack}} | Defense: {{pokemon.individual_defense}} | Stamina: - {{pokemon.individual_stamina}}
- Move 1: {{pokemon.move_1_desc}}
- Move 2: {{pokemon.move_2_desc}} -
-
- / 15
-
-
-
-
- - Pokemon: {{pokemon.pokemon_name}} | IV: {{pokemon.IV}} | CP: {{pokemon.cp}}
- Attack: {{pokemon.individual_attack}} | Defense: {{pokemon.individual_defense}} | Stamina: - {{pokemon.individual_stamina}}
- Move 1: {{pokemon.move_1_desc}}
- Move 2: {{pokemon.move_2_desc}} -
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+ IV: {{pokemon.IV}}
+ CP: {{pokemon.cp}}
+
+ Pokemon: {{pokemon.pokemon_name}}
+ Date Catched: {{pokemon.creation_time_ms | date:'dd-MM-yyyy h:m:s'}}
+ Move 1: {{pokemon.move_1_desc}}
+ Move 2: {{pokemon.move_2_desc}}
+
+
+
+
+
+ + Date Catched: {{pokemon.creation_time_ms | date:'dd-MM-yyyy h:m:s'}}
+ Move 1: {{pokemon.move_1_desc}}
+ Move 2: {{pokemon.move_2_desc}}
+
Pokesistant: v
diff --git a/server/web.py b/server/web.py
index 76a9a74..5c346dd 100644
--- a/server/web.py
+++ b/server/web.py
@@ -2,53 +2,28 @@
from __future__ import unicode_literals
-import os
+import os, sys
import time
-from urlparse import urljoin
time.sleep(3)
-import sys
-import sqlite3, os
-from requests.exceptions import (ConnectionError, HTTPError)
sys.path.insert(1, os.path.abspath(os.path.join(os.path.dirname(__file__), 'lib')))
sys.path.append('libs')
+import logging
-from lib.pokemongo.api import PokeAuthSession
-from lib.pokemongo.location import Location
-from lib.pokemongo.pokedex import pokedex, move_list
-from lib.pokemongo.custom_exceptions import GeneralPogoException
+# create our little application :)
+import tornado
+from tornado.options import define, options
+from tornado.web import Application
+from webserver.core import (HomeHandler, PokemonHandler, LoginHandler)
+from tornado.httpserver import HTTPServer
-from flask import Flask, session, redirect, url_for, \
- abort, render_template, flash, jsonify, request
-from contextlib import closing
-from passlib.hash import md5_crypt
-from operator import itemgetter
-import logging
+define('port', default=8888, help='run on the given port', type=int)
+
+# Global store dict, using as an application level store object
+store = {}
-# create our little application :)
-app = Flask(__name__,
- template_folder='public',
- static_folder='public',
- static_url_path='')
-
-# Load default config and override config from an environment variable
-app.config.update(dict(
- DEBUG=True,
- SECRET_KEY='development key',
- USERNAME='admin',
- PASSWORD='pikapika',
- STORE={},
-))
-app.config.from_envvar('FLASKR_SETTINGS', silent=True)
-
-DEBUG = True
-STARTED = ""
-STARTEDTHREAD = ""
-SECRET_KEY = 'development key'
-USERNAME = 'admin'
-PASSWORD = 'default'
def setupLogger():
logger = logging.getLogger()
@@ -60,172 +35,31 @@ def setupLogger():
logger.addHandler(ch)
-def get_pogo_auth(username=None, password=None, auth='google'):
- # Create PokoAuthObject
-
- if (not username or not password) and not app.config['STORE'].get(session.get('username')):
- return None
-
- if username and password:
- # Create a new session
- pogo_session = PokeAuthSession(
- username,
- password,
- auth,
+class MyApplication(Application):
+ def __init__(self):
+ handlers = [
+ (r'/', HomeHandler, dict(store=store)),
+ (r'/pokemon', PokemonHandler, dict(store=store)),
+ (r'/login', LoginHandler, dict(store=store)),
+ ]
+ settings = dict(
+ blog_title=u'Pokesistant',
+ template_path=os.path.join(os.path.dirname(__file__), 'public/templates'),
+ static_path=os.path.join(os.path.dirname(__file__), 'public/static'),
+ xsrf_cookies=False,
+ cookie_secret='SfI#dfs)_9d8!235@&#%FLsfewidlsdfciE**',
+ login_url='/login',
+ debug=True,
)
- app.config['STORE'][username] = {'session': pogo_session, 'last_update': time.time()}
-
- else:
- # reuse old
- pogo_session = app.config['STORE'][session.get('username')].get('session')
+ super(MyApplication, self).__init__(handlers, **settings)
- return pogo_session.authenticate()
+def main():
+ tornado.options.parse_command_line()
+ http_server = HTTPServer(MyApplication())
+ http_server.listen(options.port)
+ tornado.ioloop.IOLoop.current().start()
-def check_refresh_session(timeout=1800):
- username = session.get('username')
- password = session.get('password')
- auth = session.get('auth')
-
- if username and app.config['STORE'][username].get('last_update') + timeout < time.time():
- return get_pogo_auth(username, password, auth)
- else:
- return get_pogo_auth()
-
-
-@app.route('/getPokemon', methods=['GET'])
-def getpokemon():
-
- pogo_session = check_refresh_session()
-
- if not pogo_session:
- return redirect(url_for('openApp'))
-
- party = pogo_session.getInventory().party
- pokemons = []
- attributes = ['id', 'cp', 'stamina', 'stamina_max', 'move_1', 'move_2', 'individual_attack',
- 'individual_defense', 'individual_stamina', 'nickname', 'pokemon_id', 'num_upgrades',
- 'is_egg', 'battles_attacked', 'battles_defended', 'additional_cp_multiplier',
- 'creation_time_ms', 'cp_multiplier', 'weight_kg']
- for pokemon in party:
- pokemon_attributes = {}
- for attr in attributes:
- pokemon_attributes[attr] = getattr(pokemon, attr)
- pokemon_attributes['pokemon_name'] = pokedex[pokemon_attributes['pokemon_id']]
- pokemon_attributes['IV'] = round((getattr(pokemon, 'individual_attack') +
- getattr(pokemon, 'individual_defense') +
- getattr(pokemon, 'individual_stamina')) * (100/45.0), 0)
- pokemon_attributes['image_nr'] = str(pokemon_attributes['pokemon_id']).zfill(3)
- pokemon_attributes['move_1_desc'] = move_list[pokemon_attributes['move_1']]
- pokemon_attributes['move_2_desc'] = move_list[pokemon_attributes['move_2']]
-
- pokemons.append(pokemon_attributes)
-
- if pokemons:
- #logging.info(str(pokemons))
- return jsonify(pokemons=sorted(pokemons, key=lambda k: k['IV'], reverse=True))
- return []
-
-
-@app.route('/getPogoSession', methods=['POST'])
-def get_pogo_session():
- """This route was intended for doing the login, and then store the pogo_session object
- in a session. But unfortunatly because the object is not serializable this is not possible."""
-
- error = False
- error_msg = ''
-
- auth = request.json.get('auth', 'google').encode('utf-8')
- username = request.json.get('username').encode('utf-8')
- password = request.json.get('password').encode('utf-8')
-
- if not username or not password:
- return jsonify({'error': 'need username and password'})
-
- # Check service
- if auth not in ['ptc', 'google']:
- logging.error('Invalid auth service {0}'.format(auth))
- sys.exit(-1)
-
- session['username'] = username
- session['password'] = password
- session['auth'] = auth
-
- try:
- pogo_session = get_pogo_auth(username, password, auth)
- access_token = pogo_session.accessToken
- except (ConnectionError, HTTPError, GeneralPogoException) as e:
- error = True
- error_msg = e
- pogo_session = None
- access_token = ''
-
- if pogo_session:
- session['access_token'] = {'last_update': time.time(), 'token': pogo_session.accessToken}
-
- return jsonify({'authenticated': bool(pogo_session), 'accessToken': access_token,
- 'error': error, 'error_msg': str(getattr(error_msg, 'message', ''))})
-
-
-@app.route('/getSession', methods=['GET'])
-def get_session():
- return jsonify({'username': session.get('username', ''),
- 'password': session.get('password', ''),
- 'auth': session.get('auth', '')})
-
-'''
-Basic Web functions Login/Logoff
-'''
-
-
-@app.route('/login', methods=['GET', 'POST'])
-def login():
- error = None
- if request.method == 'POST':
- username = request.form.get('username')
- password = request.form.get('password')
- if username and password:
- if username == 'admin' and password == app.config['PASSWORD']:
- session['logged_in'] = True
- return redirect(url_for('index'))
- else:
- error = 'Invalid password'
- session['logged_in'] = False
- else:
- error = 'Wrong credentials provided'
- return render_template('login.html', error=error)
-
-
-@app.route('/logout')
-def logout():
- session.pop('logged_in', None)
- flash('You were logged out')
-
-
-@app.route('/', methods=['GET', 'POST'])
-def openApp():
- return render_template('templates/index.html')
if __name__ == '__main__':
- # Process arguments
- app.debug = True
- setupLogger()
-
- arguments = sys.argv
- if len(sys.argv) > 1:
- port = int(sys.argv[1])
- print("Starting on port: [%s]" % (int(sys.argv[1])))
- port = 8080
- else:
- pass
-
- if len(sys.argv) > 2:
- port = int(sys.argv[1])
- print("Starting on port: [%s]" % (int(sys.argv[1])))
- if sys.argv[2].split("=")[0] == "debug":
- app.debug = str2bool(sys.argv[2].split("=")[1])
- print("Starting with Debug: [%s]" % (bool(sys.argv[2].split("=")[1])))
- else:
- port = 8080
-
- app.run(port=port, host='0.0.0.0', use_reloader=False)
+ main()
diff --git a/server/webserver/__init__.py b/server/webserver/__init__.py
new file mode 100644
index 0000000..e69de29
diff --git a/server/webserver/core.py b/server/webserver/core.py
new file mode 100644
index 0000000..1caf3a8
--- /dev/null
+++ b/server/webserver/core.py
@@ -0,0 +1,223 @@
+# coding=utf-8
+
+from __future__ import unicode_literals
+
+import json
+import logging
+import time
+from requests.exceptions import ConnectionError, HTTPError
+
+from pokemongo.api import PokeAuthSession
+from pokemongo.location import Location
+from pokemongo.pokedex import pokedex, move_list
+from pokemongo.custom_exceptions import GeneralPogoException
+
+import tornado
+from tornado.web import RequestHandler
+
+store = {}
+
+
+class BaseHandler(RequestHandler):
+ def initialize(self, store):
+ self.store = store
+
+ def get_username(self):
+ return self.get_secure_cookie('username')
+
+ def set_username(self, some_value):
+ return self.set_secure_cookie('username', some_value)
+
+ def get_password(self):
+ return self.get_secure_cookie('password')
+
+ def set_password(self, some_value):
+ return self.set_secure_cookie('password', some_value)
+
+ def get_auth(self):
+ return self.get_secure_cookie('auth')
+
+ def set_auth(self, some_value):
+ return self.set_secure_cookie('auth', some_value)
+
+ def get_access_token(self):
+ return self.get_secure_cookie('access_token')
+
+ def set_access_token(self, some_value):
+ return self.set_secure_cookie('access_token', some_value)
+
+ def get_pokemon(self):
+ pogo_session = self.check_refresh_session()
+
+# if not pogo_session:
+# return redirect(url_for('openApp'))
+
+ party = pogo_session.getInventory().party
+ pokemons = []
+ attributes = ['id', 'cp', 'stamina', 'stamina_max', 'move_1', 'move_2', 'individual_attack',
+ 'individual_defense', 'individual_stamina', 'nickname', 'pokemon_id', 'num_upgrades',
+ 'is_egg', 'battles_attacked', 'battles_defended', 'additional_cp_multiplier',
+ 'creation_time_ms', 'cp_multiplier', 'weight_kg']
+ for pokemon in party:
+ pokemon_attributes = {}
+ for attr in attributes:
+ pokemon_attributes[attr] = getattr(pokemon, attr)
+ pokemon_attributes['pokemon_name'] = pokedex[pokemon_attributes['pokemon_id']]
+ pokemon_attributes['IV'] = round((getattr(pokemon, 'individual_attack') +
+ getattr(pokemon, 'individual_defense') +
+ getattr(pokemon, 'individual_stamina')) * (100/45.0), 0)
+ pokemon_attributes['image_nr'] = str(pokemon_attributes['pokemon_id']).zfill(3)
+ pokemon_attributes['move_1_desc'] = move_list[pokemon_attributes['move_1']]
+ pokemon_attributes['move_2_desc'] = move_list[pokemon_attributes['move_2']]
+
+ pokemons.append(pokemon_attributes)
+
+ if pokemons:
+ #logging.info(str(pokemons))
+ return {'pokemons': sorted(pokemons, key=lambda k: k['IV'], reverse=True)}
+ return []
+
+ def get_pogo_auth(self, username=None, password=None, auth='google'):
+ # Create PokoAuthObject
+
+ if (not username or not password) and not self.store.get(self.get_username()):
+ raise tornado.web.HTTPError(401)
+
+ if username and password:
+ # Create a new session
+ auth = PokeAuthSession(
+ username,
+ password,
+ auth,
+ )
+ pogo_session = auth.authenticate()
+ self.store[username] = {'session': pogo_session, 'last_update': time.time()}
+ else:
+ # reuse old
+ pogo_session = self.store[self.get_username()].get('session')
+
+ return pogo_session
+
+ def check_refresh_session(self, timeout=1800):
+ username = self.get_username()
+ password = self.get_password()
+ auth = self.get_auth()
+
+ if (username and
+ self.store.get(username) and
+ self.store[username].get('last_update') + timeout < time.time()):
+ return self.get_pogo_auth(username, password, auth)
+ else:
+ return self.get_pogo_auth()
+
+
+class JsonHandler(BaseHandler):
+ """Request handler where requests and responses speak JSON."""
+ def prepare(self):
+ # Incorporate request JSON into arguments dictionary.
+ if self.request.body:
+ try:
+ json_data = json.loads(self.request.body)
+ self.request.arguments.update(json_data)
+ except ValueError:
+ message = 'Unable to parse JSON.'
+ self.send_error(400, message=message) # Bad Request
+
+ # Set up response dictionary.
+ self.response = dict()
+
+ def set_default_headers(self):
+ self.set_header('Content-Type', 'application/json')
+
+ def write_error(self, status_code, **kwargs):
+ if 'message' not in kwargs:
+ if status_code == 405:
+ kwargs['message'] = 'Invalid HTTP method.'
+ else:
+ kwargs['message'] = 'Unknown error.'
+
+ self.response = kwargs
+ self.write_json()
+
+ def write_json(self):
+ output = json.dumps(self.response)
+ self.write(output)
+
+
+class HomeHandler(BaseHandler):
+ def get(self):
+ self.render("index.html")
+
+
+class LoginHandler(JsonHandler):
+ def post(self):
+ error = False
+ error_msg = ''
+ data = tornado.escape.json_decode(self.request.body)
+ username = data.get('username')
+ password = data.get('password')
+ auth = data.get('auth', 'google')
+
+ if not username or not password:
+ self.response = {'error': 'need username and password'}
+ self.write_json()
+
+ # Check service
+ if auth not in ['ptc', 'google']:
+ self.response = {'error': 'Invalid auth service {0}'.format(auth)}
+ self.write_json()
+
+ self.set_secure_cookie('username', username)
+ self.set_secure_cookie('password', password)
+ self.set_secure_cookie('auth', auth)
+
+ try:
+ pogo_session = self.get_pogo_auth(username, password, auth)
+ access_token = pogo_session.accessToken
+ except (ConnectionError, HTTPError, GeneralPogoException) as e:
+ error = True
+ error_msg = e
+ pogo_session = None
+ access_token = ''
+
+ if pogo_session:
+ self.store[username]['access_token'] = {'last_update': time.time(), 'token': pogo_session.accessToken}
+
+ self.response = {'authenticated': bool(pogo_session), 'accessToken': access_token,
+ 'error': error, 'error_msg': str(getattr(error_msg, 'message', ''))}
+
+ self.write_json()
+
+
+class PokemonHandler(JsonHandler):
+ def get(self):
+
+ pogo_session = self.check_refresh_session()
+
+ if not pogo_session:
+ self.response = {'error': 'Need to login first'}
+
+ party = pogo_session.getInventory().party
+ pokemons = []
+ attributes = ['id', 'cp', 'stamina', 'stamina_max', 'move_1', 'move_2', 'individual_attack',
+ 'individual_defense', 'individual_stamina', 'nickname', 'pokemon_id', 'num_upgrades',
+ 'is_egg', 'battles_attacked', 'battles_defended', 'additional_cp_multiplier',
+ 'creation_time_ms', 'cp_multiplier', 'weight_kg']
+ for pokemon in party:
+ pokemon_attributes = {}
+ for attr in attributes:
+ pokemon_attributes[attr] = getattr(pokemon, attr)
+ pokemon_attributes['pokemon_name'] = pokedex[pokemon_attributes['pokemon_id']]
+ pokemon_attributes['IV'] = round((getattr(pokemon, 'individual_attack') +
+ getattr(pokemon, 'individual_defense') +
+ getattr(pokemon, 'individual_stamina')) * (100/45.0), 0)
+ pokemon_attributes['image_nr'] = str(pokemon_attributes['pokemon_id']).zfill(3)
+ pokemon_attributes['move_1_desc'] = move_list[pokemon_attributes['move_1']]
+ pokemon_attributes['move_2_desc'] = move_list[pokemon_attributes['move_2']]
+
+ pokemons.append(pokemon_attributes)
+
+ if pokemons:
+ #logging.info(str(pokemons))
+ self.response = {'pokemons': sorted(pokemons, key=lambda k: k['IV'], reverse=True)}
+ self.write_json()