diff --git a/src/transition/test/transition.spec.js b/src/transition/test/transition.spec.js deleted file mode 100644 index 34f744b037..0000000000 --- a/src/transition/test/transition.spec.js +++ /dev/null @@ -1,147 +0,0 @@ - -describe('$transition', function() { - - // Work out if we are running IE - var ie = (function(){ - var v = 3, - div = document.createElement('div'), - all = div.getElementsByTagName('i'); - do { - div.innerHTML = ''; - } while(all[0]); - return v > 4 ? v : undefined; - }()); - - var $transition, $timeout; - - beforeEach(module('ui.bootstrap.transition')); - - beforeEach(inject(function(_$transition_, _$timeout_) { - $transition = _$transition_; - $timeout = _$timeout_; - })); - - it('returns our custom promise', function() { - var element = angular.element('
'); - var promise = $transition(element, ''); - expect(promise.then).toEqual(jasmine.any(Function)); - expect(promise.cancel).toEqual(jasmine.any(Function)); - }); - - it('changes the css if passed a string', function() { - var element = angular.element('
'); - spyOn(element, 'addClass'); - $transition(element, 'triggerClass'); - $timeout.flush(); - - expect(element.addClass).toHaveBeenCalledWith('triggerClass'); - }); - - it('changes the style if passed an object', function() { - var element = angular.element('
'); - var triggerStyle = { height: '11px' }; - spyOn(element, 'css'); - $transition(element, triggerStyle); - $timeout.flush(); - expect(element.css).toHaveBeenCalledWith(triggerStyle); - }); - - it('calls the function if passed', function() { - var element = angular.element('
'); - var triggerFunction = jasmine.createSpy('triggerFunction'); - $transition(element, triggerFunction); - $timeout.flush(); - expect(triggerFunction).toHaveBeenCalledWith(element); - }); - - // Versions of Internet Explorer before version 10 do not have CSS transitions - if ( !ie || ie > 9 ) { - describe('transitionEnd event', function() { - var element, triggerTransitionEnd; - - beforeEach(function() { - element = angular.element('
'); - // Mock up the element.bind method - spyOn(element, 'bind').andCallFake(function(element, handler) { - // Store the handler to be used to simulate the end of the transition later - triggerTransitionEnd = handler; - }); - // Mock up the element.unbind method - spyOn(element, 'unbind'); - }); - - describe('transitionEndEventName', function() { - it('should be a string ending with transitionend', function() { - expect($transition.transitionEndEventName).toMatch(/transitionend$/i); - }); - }); - - describe('animationEndEventName', function() { - it('should be a string ending with animationend', function() { - expect($transition.animationEndEventName).toMatch(/animationend$/i); - }); - }); - - it('binds a transitionEnd handler to the element', function() { - $transition(element, ''); - expect(element.bind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function)); - }); - - it('binds an animationEnd handler to the element if option is given', function() { - $transition(element, '', {animation: true}); - expect(element.bind).toHaveBeenCalledWith($transition.animationEndEventName, jasmine.any(Function)); - }); - - it('resolves the promise when the transitionEnd is triggered', function() { - var resolutionHandler = jasmine.createSpy('resolutionHandler'); - - // Run the transition - $transition(element, '').then(resolutionHandler); - - // Simulate the end of transition event - triggerTransitionEnd(); - $timeout.flush(); - - expect(resolutionHandler).toHaveBeenCalledWith(element); - }); - - it('rejects the promise if transition is cancelled', function() { - var rejectionHandler = jasmine.createSpy('rejectionHandler'); - - var promise = $transition(element, ''); - promise.then(null, rejectionHandler); - - promise.cancel(); - inject(function($rootScope) { - $rootScope.$digest(); - }); - expect(rejectionHandler).toHaveBeenCalledWith(jasmine.any(String)); - expect(element.unbind).toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function)); - }); - }); - } else { - - describe('transitionEndEventName', function() { - it('should be undefined', function() { - expect($transition.transitionEndEventName).not.toBeDefined(); - }); - }); - - it('does not bind a transitionEnd handler to the element', function() { - var element = angular.element('
'); - spyOn(element, 'bind'); - $transition(element, ''); - expect(element.bind).not.toHaveBeenCalledWith($transition.transitionEndEventName, jasmine.any(Function)); - }); - - it('resolves the promise', function() { - var element = angular.element('
'); - var transitionEndHandler = jasmine.createSpy('transitionEndHandler'); - $transition(element, '').then(transitionEndHandler); - $timeout.flush(); - expect(transitionEndHandler).toHaveBeenCalledWith(element); - }); - - } -}); - diff --git a/src/transition/transition.js b/src/transition/transition.js deleted file mode 100644 index 8e08838bdb..0000000000 --- a/src/transition/transition.js +++ /dev/null @@ -1,82 +0,0 @@ -angular.module('ui.bootstrap.transition', []) - -/** - * $transition service provides a consistent interface to trigger CSS 3 transitions and to be informed when they complete. - * @param {DOMElement} element The DOMElement that will be animated. - * @param {string|object|function} trigger The thing that will cause the transition to start: - * - As a string, it represents the css class to be added to the element. - * - As an object, it represents a hash of style attributes to be applied to the element. - * - As a function, it represents a function to be called that will cause the transition to occur. - * @return {Promise} A promise that is resolved when the transition finishes. - */ -.factory('$transition', ['$q', '$timeout', '$rootScope', function($q, $timeout, $rootScope) { - - var $transition = function(element, trigger, options) { - options = options || {}; - var deferred = $q.defer(); - var endEventName = $transition[options.animation ? 'animationEndEventName' : 'transitionEndEventName']; - - var transitionEndHandler = function(event) { - $rootScope.$apply(function() { - element.unbind(endEventName, transitionEndHandler); - deferred.resolve(element); - }); - }; - - if (endEventName) { - element.bind(endEventName, transitionEndHandler); - } - - // Wrap in a timeout to allow the browser time to update the DOM before the transition is to occur - $timeout(function() { - if ( angular.isString(trigger) ) { - element.addClass(trigger); - } else if ( angular.isFunction(trigger) ) { - trigger(element); - } else if ( angular.isObject(trigger) ) { - element.css(trigger); - } - //If browser does not support transitions, instantly resolve - if ( !endEventName ) { - deferred.resolve(element); - } - }); - - // Add our custom cancel function to the promise that is returned - // We can call this if we are about to run a new transition, which we know will prevent this transition from ending, - // i.e. it will therefore never raise a transitionEnd event for that transition - deferred.promise.cancel = function() { - if ( endEventName ) { - element.unbind(endEventName, transitionEndHandler); - } - deferred.reject('Transition cancelled'); - }; - - return deferred.promise; - }; - - // Work out the name of the transitionEnd event - var transElement = document.createElement('trans'); - var transitionEndEventNames = { - 'WebkitTransition': 'webkitTransitionEnd', - 'MozTransition': 'transitionend', - 'OTransition': 'oTransitionEnd', - 'transition': 'transitionend' - }; - var animationEndEventNames = { - 'WebkitTransition': 'webkitAnimationEnd', - 'MozTransition': 'animationend', - 'OTransition': 'oAnimationEnd', - 'transition': 'animationend' - }; - function findEndEventName(endEventNames) { - for (var name in endEventNames){ - if (transElement.style[name] !== undefined) { - return endEventNames[name]; - } - } - } - $transition.transitionEndEventName = findEndEventName(transitionEndEventNames); - $transition.animationEndEventName = findEndEventName(animationEndEventNames); - return $transition; -}]);