From 3d6c6670c3cb3155e5bd4082d4f3d01478eebd20 Mon Sep 17 00:00:00 2001 From: Davy Chiu Date: Sun, 31 Aug 2014 22:13:01 -0400 Subject: [PATCH 1/3] chore: update readme for animations --- README.md | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) diff --git a/README.md b/README.md index 625ca8f..46949d4 100644 --- a/README.md +++ b/README.md @@ -19,6 +19,8 @@ bower install angular-modal [Plunker demo](http://plnkr.co/edit/lJDNqafSCKdpMI8AjR0B?p=preview) +[Plunker demo (with animations)](http://plnkr.co/edit/EymZrEhiWa4zvXiA37qL?p=preview) + ### Typical Use > app.js @@ -63,6 +65,41 @@ controller('MyCtrl', function (myModal) { ``` +### Animations + +With Angular 1.2, ngAnimate needs to be loaded as a separate module and injected as a dependency. Upon modal ```activate``` and ```deactivate```, animation css classes are automatically added to the element. + +> app.js + +```javascript +angular.module('myApp', ['btford.modal', 'ngAnimate']). +// ... +``` + +> modal.css + +```css +// ... +.btf-modal.ng-enter { + transition: 1s linear all; + opacity: 0; +} +.btf-modal.ng-enter.ng-enter-active { + opacity: 1; +} +.btf-modal.ng-leave { + transition: 1s linear all; + opacity: 1; +} +.btf-modal.ng-leave.ng-leave-active { + transition: 1s linear all; + opacity: 0; +} +``` + +**Note:** the container in which the element is attached to must be under ng-app where ngAnimate is injected. + + ### Cleaning up If you add any listeners within the modal's controller that are **outside the modal's `scope`**, From a2324c06cadfa47ccc1744c8410682eb49dd8a82 Mon Sep 17 00:00:00 2001 From: Davy Chiu Date: Mon, 1 Sep 2014 12:16:25 -0700 Subject: [PATCH 2/3] fix: animate before compile --- modal.js | 6 +++--- modal.min.js | 3 ++- modal.min.js.map | 2 +- 3 files changed, 6 insertions(+), 5 deletions(-) diff --git a/modal.js b/modal.js index 6c295df..9f8e94c 100644 --- a/modal.js +++ b/modal.js @@ -46,9 +46,8 @@ factory('btfModal', function ($animate, $compile, $rootScope, $controller, $q, $ function attach (html, locals) { element = angular.element(html); if (element.length === 0) { - throw new Error('The template contains no elements; you need to wrap text nodes') + throw new Error('The template contains no elements; you need to wrap text nodes'); } - $animate.enter(element, container); scope = $rootScope.$new(); if (locals) { for (var prop in locals) { @@ -59,7 +58,8 @@ factory('btfModal', function ($animate, $compile, $rootScope, $controller, $q, $ if (controllerAs) { scope[controllerAs] = ctrl; } - $compile(element)(scope); + $compile(element)(scope) + $animate.enter(element, container); } function deactivate () { diff --git a/modal.min.js b/modal.min.js index b357950..825b69d 100644 --- a/modal.min.js +++ b/modal.min.js @@ -4,4 +4,5 @@ * (c) 2013 Brian Ford http://briantford.com * License: MIT */ -"use strict";angular.module("btford.modal",[]).factory("btfModal",["$animate","$compile","$rootScope","$controller","$q","$http","$templateCache",function(e,t,r,n,o,a,l){return function(c){function i(e){return p.then(function(t){$||u(t,e)})}function u(o,a){if($=angular.element(o),0===$.length)throw new Error("The template contains no elements; you need to wrap text nodes");if(e.enter($,h),d=r.$new(),a)for(var l in a)d[l]=a[l];var c=n(s,{$scope:d});v&&(d[v]=c),t($)(d)}function m(){var t=o.defer();return $?e.leave($,function(){d.$destroy(),$=null,t.resolve()}):t.resolve(),t.promise}function f(){return!!$}if(!(!c.template^!c.templateUrl))throw new Error("Expected modal to have exacly one of either `template` or `templateUrl`");var p,d,s=(c.template,c.controller||angular.noop),v=c.controllerAs,h=angular.element(c.container||document.body),$=null;if(c.template){var g=o.defer();g.resolve(c.template),p=g.promise}else p=a.get(c.templateUrl,{cache:l}).then(function(e){return e.data});return{activate:i,deactivate:m,active:f}}}]); \ No newline at end of file +"use strict";angular.module("btford.modal",[]).factory("btfModal",["$animate","$compile","$rootScope","$controller","$q","$http","$templateCache",function(e,t,r,n,o,a,l){return function(c){function i(e){return p.then(function(t){$||u(t,e)})}function u(o,a){if($=angular.element(o),0===$.length)throw new Error("The template contains no elements; you need to wrap text nodes");if(d=r.$new(),a)for(var l in a)d[l]=a[l];var c=n(s,{$scope:d});v&&(d[v]=c),t($)(d),e.enter($,h)}function m(){var t=o.defer();return $?e.leave($,function(){d.$destroy(),$=null,t.resolve()}):t.resolve(),t.promise}function f(){return!!$}if(!(!c.template^!c.templateUrl))throw new Error("Expected modal to have exacly one of either `template` or `templateUrl`");var p,d,s=(c.template,c.controller||angular.noop),v=c.controllerAs,h=angular.element(c.container||document.body),$=null;if(c.template){var g=o.defer();g.resolve(c.template),p=g.promise}else p=a.get(c.templateUrl,{cache:l}).then(function(e){return e.data});return{activate:i,deactivate:m,active:f}}}]); +//# sourceMappingURL=modal.min.js.map \ No newline at end of file diff --git a/modal.min.js.map b/modal.min.js.map index 545a186..37a2537 100644 --- a/modal.min.js.map +++ b/modal.min.js.map @@ -1 +1 @@ -{"version":3,"file":"modal.min.js.map","sources":["modal.min.js"],"names":["angular","module","factory","$animate","$compile","$rootScope","$controller","$q","$http","$templateCache","config","activate","locals","html","then","element","attach","length","Error","enter","container","scope","$new","prop","ctrl","controller","$scope","controllerAs","deactivate","deferred","defer","leave","$destroy","resolve","promise","active","template","templateUrl","noop","document","body","get","cache","response","data"],"mappings":";;;;;;AAMA,YACAA,SAAQC,OAAO,mBAAoBC,QAAQ,YACzC,WACA,WACA,aACA,cACA,KACA,QACA,iBACA,SAAUC,EAAUC,EAAUC,EAAYC,EAAaC,EAAIC,EAAOC,GAChE,MAAO,UAAsBC,GAc3B,QAASC,GAASC,GAChB,MAAOC,GAAKC,KAAK,SAAUD,GACpBE,GACHC,EAAOH,EAAMD,KAInB,QAASI,GAAOH,EAAMD,GAEpB,GADAG,EAAUf,QAAQe,QAAQF,GACH,IAAnBE,EAAQE,OACV,KAAM,IAAIC,OAAM,iEAIlB,IAFAf,EAASgB,MAAMJ,EAASK,GACxBC,EAAQhB,EAAWiB,OACfV,EACF,IAAK,GAAIW,KAAQX,GACfS,EAAME,GAAQX,EAAOW,EAGzB,IAAIC,GAAOlB,EAAYmB,GAAcC,OAAQL,GACzCM,KACFN,EAAMM,GAAgBH,GAExBpB,EAASW,GAASM,GAEpB,QAASO,KACP,GAAIC,GAAWtB,EAAGuB,OAUlB,OATIf,GACFZ,EAAS4B,MAAMhB,EAAS,WACtBM,EAAMW,WACNjB,EAAU,KACVc,EAASI,YAGXJ,EAASI,UAEJJ,EAASK,QAElB,QAASC,KACP,QAASpB,EApDX,MAAOL,EAAO0B,UAAY1B,EAAO2B,aAC/B,KAAM,IAAInB,OAAM,0EAElB,IAAoML,GAAMQ,EAA1KI,GAAjBf,EAAO0B,SAAuB1B,EAAOe,YAAczB,QAAQsC,MAAMX,EAAejB,EAAOiB,aAAcP,EAAYpB,QAAQe,QAAQL,EAAOU,WAAamB,SAASC,MAAOzB,EAAU,IAC9L,IAAIL,EAAO0B,SAAU,CACnB,GAAIP,GAAWtB,EAAGuB,OAClBD,GAASI,QAAQvB,EAAO0B,UACxBvB,EAAOgB,EAASK,YAEhBrB,GAAOL,EAAMiC,IAAI/B,EAAO2B,aAAeK,MAAOjC,IAAkBK,KAAK,SAAU6B,GAC7E,MAAOA,GAASC,MA4CpB,QACEjC,SAAUA,EACViB,WAAYA,EACZO,OAAQA"} \ No newline at end of file +{"version":3,"file":"modal.min.js.map","sources":["modal.min.js"],"names":["angular","module","factory","$animate","$compile","$rootScope","$controller","$q","$http","$templateCache","config","activate","locals","html","then","element","attach","length","Error","scope","$new","prop","ctrl","controller","$scope","controllerAs","enter","container","deactivate","deferred","defer","leave","$destroy","resolve","promise","active","template","templateUrl","noop","document","body","get","cache","response","data"],"mappings":";;;;;;AAMA,YACAA,SAAQC,OAAO,mBAAoBC,QAAQ,YACzC,WACA,WACA,aACA,cACA,KACA,QACA,iBACA,SAAUC,EAAUC,EAAUC,EAAYC,EAAaC,EAAIC,EAAOC,GAChE,MAAO,UAAsBC,GAc3B,QAASC,GAASC,GAChB,MAAOC,GAAKC,KAAK,SAAUD,GACpBE,GACHC,EAAOH,EAAMD,KAInB,QAASI,GAAOH,EAAMD,GAEpB,GADAG,EAAUf,QAAQe,QAAQF,GACH,IAAnBE,EAAQE,OACV,KAAM,IAAIC,OAAM,iEAGlB,IADAC,EAAQd,EAAWe,OACfR,EACF,IAAK,GAAIS,KAAQT,GACfO,EAAME,GAAQT,EAAOS,EAGzB,IAAIC,GAAOhB,EAAYiB,GAAcC,OAAQL,GACzCM,KACFN,EAAMM,GAAgBH,GAExBlB,EAASW,GAASI,GAClBhB,EAASuB,MAAMX,EAASY,GAE1B,QAASC,KACP,GAAIC,GAAWtB,EAAGuB,OAUlB,OATIf,GACFZ,EAAS4B,MAAMhB,EAAS,WACtBI,EAAMa,WACNjB,EAAU,KACVc,EAASI,YAGXJ,EAASI,UAEJJ,EAASK,QAElB,QAASC,KACP,QAASpB,EApDX,MAAOL,EAAO0B,UAAY1B,EAAO2B,aAC/B,KAAM,IAAInB,OAAM,0EAElB,IAAoML,GAAMM,EAA1KI,GAAjBb,EAAO0B,SAAuB1B,EAAOa,YAAcvB,QAAQsC,MAAMb,EAAef,EAAOe,aAAcE,EAAY3B,QAAQe,QAAQL,EAAOiB,WAAaY,SAASC,MAAOzB,EAAU,IAC9L,IAAIL,EAAO0B,SAAU,CACnB,GAAIP,GAAWtB,EAAGuB,OAClBD,GAASI,QAAQvB,EAAO0B,UACxBvB,EAAOgB,EAASK,YAEhBrB,GAAOL,EAAMiC,IAAI/B,EAAO2B,aAAeK,MAAOjC,IAAkBK,KAAK,SAAU6B,GAC7E,MAAOA,GAASC,MA4CpB,QACEjC,SAAUA,EACViB,WAAYA,EACZO,OAAQA"} \ No newline at end of file From 130ebdeea4b887e6a2edfb12904715afdad59285 Mon Sep 17 00:00:00 2001 From: Davy Chiu Date: Mon, 1 Sep 2014 12:17:31 -0700 Subject: [PATCH 3/3] v0.4.1 --- bower.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/bower.json b/bower.json index d729fb1..aac7a8b 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "angular-modal", - "version": "0.4.0", + "version": "0.4.1", "main": "modal.js", "ignore": [ "**/.*", diff --git a/package.json b/package.json index ce58a49..1445192 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "angular-modal", - "version": "0.4.0", + "version": "0.4.1", "description": "easily add a modal to your angular app", "main": "modal.js", "scripts": {