I have included ui-bootstrap (just the progress-bar part) js and css. Now when I open a popup, it opens from the bottom right of the screen and flickers a couple of times. Can someone tell me what part of ui-bootstrap code messes with the popup
Here is the bootstrap.js code for progressbar.
/*
* angular-ui-bootstrap
* http://angular-ui.github.io/bootstrap/
* Version: 0.10.0 - 2014-01-14
* License: MIT
*/
angular.module("ui.bootstrap", ["ui.bootstrap.tpls", "ui.bootstrap.transition","ui.bootstrap.progressbar"]);
angular.module("ui.bootstrap.tpls", ["template/progressbar/bar.html","template/progressbar/progress.html","template/progressbar/progressbar.html"]);
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;
}]);
angular.module('ui.bootstrap.progressbar', ['ui.bootstrap.transition'])
.constant('progressConfig', {
animate: true,
max: 100
})
.controller('ProgressController', ['$scope', '$attrs', 'progressConfig', '$transition', function($scope, $attrs, progressConfig, $transition) {
var self = this,
bars = [],
max = angular.isDefined($attrs.max) ? $scope.$parent.$eval($attrs.max) : progressConfig.max,
animate = angular.isDefined($attrs.animate) ? $scope.$parent.$eval($attrs.animate) : progressConfig.animate;
this.addBar = function(bar, element) {
var oldValue = 0, index = bar.$parent.$index;
if ( angular.isDefined(index) && bars[index] ) {
oldValue = bars[index].value;
}
bars.push(bar);
this.update(element, bar.value, oldValue);
bar.$watch('value', function(value, oldValue) {
if (value !== oldValue) {
self.update(element, value, oldValue);
}
});
bar.$on('$destroy', function() {
self.removeBar(bar);
});
};
// Update bar element width
this.update = function(element, newValue, oldValue) {
var percent = this.getPercentage(newValue);
if (animate) {
element.css('width', this.getPercentage(oldValue) + '%');
$transition(element, {width: percent + '%'});
} else {
element.css({'transition': 'none', 'width': percent + '%'});
}
};
this.removeBar = function(bar) {
bars.splice(bars.indexOf(bar), 1);
};
this.getPercentage = function(value) {
return Math.round(100 * value / max);
};
}])
.directive('progress', function() {
return {
restrict: 'EA',
replace: true,
transclude: true,
controller: 'ProgressController',
require: 'progress',
scope: {},
template: '<div class="progress" ng-transclude></div>'
//templateUrl: 'template/progressbar/progress.html' // Works in AngularJS 1.2
};
})
.directive('bar', function() {
return {
restrict: 'EA',
replace: true,
transclude: true,
require: '^progress',
scope: {
value: '=',
type: '@'
},
templateUrl: 'template/progressbar/bar.html',
link: function(scope, element, attrs, progressCtrl) {
progressCtrl.addBar(scope, element);
}
};
})
.directive('progressbar', function() {
return {
restrict: 'EA',
replace: true,
transclude: true,
controller: 'ProgressController',
scope: {
value: '=',
type: '@'
},
templateUrl: 'template/progressbar/progressbar.html',
link: function(scope, element, attrs, progressCtrl) {
progressCtrl.addBar(scope, angular.element(element.children()[0]));
}
};
});
angular.module("template/progressbar/bar.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/progressbar/bar.html",
"<div class=\"progress-bar\" ng-class=\"type && 'progress-bar-' + type\" ng-transclude></div>");
}]);
angular.module("template/progressbar/progress.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/progressbar/progress.html",
"<div class=\"progress\" ng-transclude></div>");
}]);
angular.module("template/progressbar/progressbar.html", []).run(["$templateCache", function($templateCache) {
$templateCache.put("template/progressbar/progressbar.html",
"<div class=\"progress\"><div class=\"progress-bar\" ng-class=\"type && 'progress-bar-' + type\" ng-transclude></div></div>");
}]);