<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.4.8" data-semver="1.3.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<script data-require="angular-animate@1.4.8" data-semver="1.3.8" src="https://code.angularjs.org/1.4.8/angular-animate.js"></script>
<script data-require="angular.js@1.3.20" data-semver="1.3.20" src="https://code.angularjs.org/1.3.20/angular.js"></script>
<link data-require="bootstrap-css@3.1.*" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<link data-require="font-awesome@*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<link rel="stylesheet" href="ngWizard.css" />
<script src="app.js"></script>
<script src="ngWizard.js"></script>
</head>
<body ng-controller="wizard">
<h1>ngWizard Demo</h1>
<wizard current-step-number="currentStepNumber" submit="submit()">
<wizard-step title="step 1" entered="stepEntered()">
<p>step 1</p>
<input type="text" ng-model="requiredText" required="" placeholder="Required Field" />
</wizard-step>
<wizard-step title="step 2" required-step-number="0" entered="stepEntered()">
<p>step 2</p>
<input type="email" ng-model="requiredText" required="" placeholder="Required Email Address" />
</wizard-step>
<wizard-step ng-repeat="step in dynamicSteps" required-step-number="{{$index + 1}}" title="{{step}}">
<p>{{step}}</p>
<input type="text" required="" ng-model="localScope" />
</wizard-step>
</wizard>
<br />
<br />
<p> --- End of Wizard --- </p>
<input type="text" ng-model="newStep" />
<button class="btn btn-primary" ng-click="addNewStep(newStep)">Add New Step</button>
</body>
</html>
angular.module("ngWizard", [ "720kb.tooltips", "ngAnimate", "templates" ]).directive("wizard", [ "$window", "$q", function($window, $q) {
"use strict";
return {
restrict: "E",
transclude: true,
scope: {
currentStepNumber: "=",
submit: "&"
},
templateUrl: "src/wizardTemplate.html",
controller: function($scope) {
$scope.currentStepNumber = $scope.currentStepNumber || 0;
$scope.getCurrentStep = function() {
return $scope.steps[$scope.currentStepNumber];
};
this.getCurrentStep = $scope.getCurrentStep;
$scope.goToStepByReference = function(step) {
var stepNumber = $scope.steps.indexOf(step);
return $scope.goToStep(stepNumber);
};
var isValidStepNumber = function(stepNumber) {
return stepNumber < $scope.steps.length && stepNumber >= 0;
};
$scope.canGoToStep = function(stepNumber) {
if (!isValidStepNumber(stepNumber)) {
return false;
}
var newStep = $scope.steps[stepNumber];
return $scope.getStepState(newStep) != $scope.stepStatesEnum.disabled;
};
$scope.goToStep = function(stepNumber) {
if ($scope.canGoToStep(stepNumber)) {
$scope.currentStepNumber = stepNumber;
return true;
}
return false;
};
$scope.getStepState = function(step) {
if (step.requiredStepNumber && isValidStepNumber(step.requiredStepNumber) && $scope.getStepState($scope.steps[step.requiredStepNumber]) != $scope.stepStatesEnum.complete) {
return $scope.stepStatesEnum.disabled;
} else if (step.stepForm.$valid) {
return $scope.stepStatesEnum.complete;
} else return $scope.stepStatesEnum.ready;
};
$scope.stepStatesEnum = {
disabled: 0,
ready: 1,
complete: 2
};
$scope.goToNext = function() {
$scope.goToStep($scope.currentStepNumber + 1);
};
$scope.hasNext = function() {
return $scope.steps.length > $scope.currentStepNumber + 1 && $scope.getStepState($scope.steps[$scope.currentStepNumber + 1]) != $scope.stepStatesEnum.disabled;
};
$scope.goToPrevious = function() {
$scope.goToStep($scope.currentStepNumber - 1);
};
$scope.hasPrevious = function() {
return $scope.currentStepNumber > 0;
};
$scope.getProgressPercentage = function() {
var completeSteps = $scope.steps.filter(function(step) {
return $scope.getStepState(step) == $scope.stepStatesEnum.complete;
});
return completeSteps.length / $scope.steps.length * 100;
};
$scope.steps = [];
this.registerStep = function(stepScope) {
$scope.steps.push(stepScope);
};
this.unregisterStep = function(stepScope) {
var index = $scope.steps.indexOf(stepScope);
if (index >= 0) {
$scope.steps.splice(index, 1);
}
};
$scope.isSubmittable = function() {
return $scope.steps.every(function(step) {
return $scope.getStepState(step) == $scope.stepStatesEnum.complete;
});
};
$scope.submitting = false;
$scope.onSubmitClicked = function() {
$scope.submitting = true;
$q.when($scope.submit()).then(function() {
$scope.submitting = false;
});
};
$scope.$watch("currentStepNumber", function(val, oldVal) {
if (val != oldVal) {
if (!$scope.canGoToStep(val)) {
if (oldVal && $scope.canGoToStep(oldVal)) {
$scope.currentStepNumber = oldVal;
} else $scope.currentStepNumber = 0;
} else {
$scope.getCurrentStep().entered();
}
}
});
$scope.$watch("steps.length", function() {
if (!$scope.getCurrentStep()) {
$scope.currentStepNumber = 0;
}
}, true);
}
};
} ]).directive("wizardStep", function() {
return {
require: "^wizard",
restrict: "E",
transclude: true,
scope: {
title: "@",
requiredStepNumber: "@",
entered: "&",
animation: "@"
},
template: "<ng-form name='stepForm' ng-show='isActive()' class='wizard-step animate' ng-class='animation || \"slide\"'><ng-transclude></ng-transclude></ng-form>",
link: function($scope, element, attrs, wizardCtrl) {
wizardCtrl.registerStep($scope);
$scope.isActive = function() {
return $scope == wizardCtrl.getCurrentStep();
};
$scope.$on("$destroy", function() {
wizardCtrl.unregisterStep($scope);
});
}
};
});
angular.module("templates", [ "src/wizardTemplate.html" ]);
angular.module("src/wizardTemplate.html", []).run([ "$templateCache", function($templateCache) {
$templateCache.put("src/wizardTemplate.html", '<div class="row wizard-container">\n' + ' <div class="col-md-3 col-xs-12">\n' + ' <ul class="nav nav-pills nav-stacked wizard-sidebar">\n' + ' <li tooltip="{{getProgressPercentage() | number : 2}}%">\n' + " <progressbar value=\"getProgressPercentage()\" type=\"{{getProgressPercentage() == 100 ? 'success' : 'default'}}\"></progressbar>\n" + " </li>\n" + ' <li ng-repeat="step in steps" ng-class="{disabled: getStepState(step) == stepStatesEnum.disabled, active: getCurrentStep() == step}"\n' + ' ng-click="goToStepByReference(step)" ng-disabled="getStepState(step) == stepStatesEnum.disabled">\n' + " <a>\n" + ' {{step.title}} <i class="fa fa-check" ng-show="getStepState(step) == stepStatesEnum.complete"></i>\n' + " </a>\n" + " </li>\n" + " </ul>\n" + " </div>\n" + ' <div class="col-md-9 col-xs-12 wizard-main">\n' + ' <ul class="pager">\n' + ' <li class="previous" ng-class="{disabled: !hasPrevious()}"><a href="#" ng-click="goToPrevious()"><i class="fa fa-arrow-circle-left"></i> Previous</a></li>\n' + ' <li ng-repeat="step in steps">\n' + " <i class=\"fa\" ng-class=\"{'fa-circle-o disabled': getStepState(step) == stepStatesEnum.disabled, 'fa-circle': getStepState(step) == stepStatesEnum.complete, 'fa-circle-o': getStepState(step) == stepStatesEnum.ready, selected: getCurrentStep() == step}\"\n" + ' ng-click="goToStepByReference(step)" tooltips tooltip-template="{{step.title}}" tooltip-side="top"></i>\n' + " </li>\n" + ' <li class="next" ng-class="{disabled: !hasNext()}"><a href="#" ng-click="goToNext()">Next <i class="fa fa-arrow-circle-right"></i></a></li>\n' + " </ul>\n" + ' <div class="wizard-step-container" ng-transclude></div>\n' + " </div>\n" + ' <div class="row">\n' + ' <div class="col-xs-12">\n' + ' <button class="btn btn-primary btn-block submit animate fade-in-out" ng-hide="!isSubmittable()" ng-click="onSubmitClicked()" ng-disabled="submitting">Submit <i class="fa fa-circle-o-notch fa-spin" ng-show="submitting"></i></button>\n' + " </div>\n" + " </div>\n" + "</div>");
} ]);
(function withAngular(angular, window) {
"use strict";
var directiveName = "tooltips", resizeObserver = function resizeObserver() {
var callbacks = [], lastTime = 0, runCallbacks = function runCallbacks(currentTime) {
if (currentTime - lastTime >= 15) {
callbacks.forEach(function iterator(callback) {
callback();
});
lastTime = currentTime;
} else {
window.console.log("Skipped!");
}
}, resize = function resize() {
window.requestAnimationFrame(runCallbacks);
}, addCallback = function addCallback(callback) {
if (callback) {
callbacks.push(callback);
}
};
return {
add: function add(callback) {
if (!callbacks.length) {
window.addEventListener("resize", resize);
}
addCallback(callback);
}
};
}(), getAttributesToAdd = function getAttributesToAdd(element) {
var attributesToAdd = {};
element.removeAttr(directiveName);
if (element.attr("tooltip-template") !== undefined) {
attributesToAdd["tooltip-template"] = element.attr("tooltip-template");
element.removeAttr("tooltip-template");
}
if (element.attr("tooltip-template-url") !== undefined) {
attributesToAdd["tooltip-template-url"] = element.attr("tooltip-template-url");
element.removeAttr("tooltip-template-url");
}
if (element.attr("tooltip-controller") !== undefined) {
attributesToAdd["tooltip-controller"] = element.attr("tooltip-controller");
element.removeAttr("tooltip-controller");
}
if (element.attr("tooltip-side") !== undefined) {
attributesToAdd["tooltip-side"] = element.attr("tooltip-side");
element.removeAttr("tooltip-side");
}
if (element.attr("tooltip-show-trigger") !== undefined) {
attributesToAdd["tooltip-show-trigger"] = element.attr("tooltip-show-trigger");
element.removeAttr("tooltip-show-trigger");
}
if (element.attr("tooltip-hide-trigger") !== undefined) {
attributesToAdd["tooltip-hide-trigger"] = element.attr("tooltip-hide-trigger");
element.removeAttr("tooltip-hide-trigger");
}
if (element.attr("tooltip-smart") !== undefined) {
attributesToAdd["tooltip-smart"] = element.attr("tooltip-smart");
element.removeAttr("tooltip-smart");
}
if (element.attr("tooltip-class") !== undefined) {
attributesToAdd["tooltip-class"] = element.attr("tooltip-class");
element.removeAttr("tooltip-class");
}
if (element.attr("tooltip-close-button") !== undefined) {
attributesToAdd["tooltip-close-button"] = element.attr("tooltip-close-button");
element.removeAttr("tooltip-close-button");
}
if (element.attr("tooltip-size") !== undefined) {
attributesToAdd["tooltip-size"] = element.attr("tooltip-size");
element.removeAttr("tooltip-size");
}
if (element.attr("tooltip-speed") !== undefined) {
attributesToAdd["tooltip-speed"] = element.attr("tooltip-speed");
element.removeAttr("tooltip-speed");
}
return attributesToAdd;
}, getStyle = function getStyle(anElement) {
if (window.getComputedStyle) {
return window.getComputedStyle(anElement, "");
} else if (anElement.currentStyle) {
return anElement.currentStyle;
}
}, getAppendedTip = function getAppendedTip(theTooltipElement) {
var tipsInBody = window.document.querySelectorAll("._exradicated-tooltip"), aTipInBody, tipsInBodyIndex = 0, tipsInBodyLength = tipsInBody.length, angularizedElement;
for (;tipsInBodyIndex < tipsInBodyLength; tipsInBodyIndex += 1) {
aTipInBody = tipsInBody.item(tipsInBodyIndex);
if (aTipInBody) {
angularizedElement = angular.element(aTipInBody);
if (angularizedElement.data("_tooltip-parent") && angularizedElement.data("_tooltip-parent") === theTooltipElement) {
return angularizedElement;
}
}
}
}, removeAppendedTip = function removeAppendedTip(theTooltipElement) {
var tipElement = getAppendedTip(theTooltipElement);
if (tipElement) {
tipElement.remove();
}
}, isOutOfPage = function isOutOfPage(theTipElement) {
if (theTipElement) {
var squarePosition = theTipElement[0].getBoundingClientRect();
if (squarePosition.top < 0 || squarePosition.top > window.document.body.offsetHeight || squarePosition.left < 0 || squarePosition.left > window.document.body.offsetWidth || squarePosition.bottom < 0 || squarePosition.bottom > window.document.body.offsetHeight || squarePosition.right < 0 || squarePosition.right > window.document.body.offsetWidth) {
theTipElement.css({
top: "",
left: "",
bottom: "",
right: ""
});
return true;
}
return false;
}
throw new Error("You must provide a position");
}, tooltipConfigurationProvider = function tooltipConfigurationProvider() {
var tooltipConfiguration = {
side: "top",
showTrigger: "mouseover",
hideTrigger: "mouseleave",
"class": "",
smart: false,
closeButton: false,
size: "",
speed: "steady"
};
return {
configure: function configure(configuration) {
var configurationKeys = Object.keys(tooltipConfiguration), configurationIndex = 0, aConfigurationKey;
if (configuration) {
for (;configurationIndex < configurationKeys.length; configurationIndex += 1) {
aConfigurationKey = configurationKeys[configurationIndex];
if (aConfigurationKey && configuration[aConfigurationKey]) {
tooltipConfiguration[aConfigurationKey] = configuration[aConfigurationKey];
}
}
}
},
$get: function instantiateProvider() {
return tooltipConfiguration;
}
};
}, tooltipDirective = [ "$log", "$http", "$compile", "$timeout", "$controller", "$injector", "tooltipsConf", function tooltipDirective($log, $http, $compile, $timeout, $controller, $injector, tooltipsConf) {
var linkingFunction = function linkingFunction($scope, $element, $attrs, $controllerDirective, $transcludeFunc) {
if ($attrs.tooltipTemplate && $attrs.tooltipTemplateUrl) {
throw new Error("You can not define tooltip-template and tooltip-url together");
}
if (!($attrs.tooltipTemplateUrl || $attrs.tooltipTemplate) && $attrs.tooltipController) {
throw new Error("You can not have a controller without a template or templateUrl defined");
}
var oldTooltipSide = "_" + tooltipsConf.side, oldTooltipShowTrigger = tooltipsConf.showTrigger, oldTooltipHideTrigger = tooltipsConf.hideTrigger, oldTooltipClass, oldSize = tooltipsConf.size, oldSpeed = "_" + tooltipsConf.speed;
$attrs.tooltipSide = $attrs.tooltipSide || tooltipsConf.side;
$attrs.tooltipShowTrigger = $attrs.tooltipShowTrigger || tooltipsConf.showTrigger;
$attrs.tooltipHideTrigger = $attrs.tooltipHideTrigger || tooltipsConf.hideTrigger;
$attrs.tooltipClass = $attrs.tooltipClass || tooltipsConf.class;
$attrs.tooltipSmart = $attrs.tooltipSmart === "true" || tooltipsConf.smart;
$attrs.tooltipCloseButton = $attrs.tooltipCloseButton || tooltipsConf.closeButton.toString();
$attrs.tooltipSize = $attrs.tooltipSize || tooltipsConf.size;
$attrs.tooltipSpeed = $attrs.tooltipSpeed || tooltipsConf.speed;
$attrs.tooltipAppendToBody = $attrs.tooltipAppendToBody === "true";
$transcludeFunc($scope, function onTransclusionDone(element, scope) {
var attributes = getAttributesToAdd(element), tooltipElement = angular.element(window.document.createElement("tooltip")), tipContElement = angular.element(window.document.createElement("tip-cont")), tipElement = angular.element(window.document.createElement("tip")), tipTipElement = angular.element(window.document.createElement("tip-tip")), closeButtonElement = angular.element(window.document.createElement("span")), tipArrowElement = angular.element(window.document.createElement("tip-arrow")), whenActivateMultilineCalculation = function whenActivateMultilineCalculation() {
return tipContElement.html();
}, calculateIfMultiLine = function calculateIfMultiLine(newValue) {
if (newValue !== undefined && tipContElement[0].getClientRects().length > 1) {
tooltipElement.addClass("_multiline");
} else {
tooltipElement.removeClass("_multiline");
}
}, onTooltipShow = function onTooltipShow(event) {
tipElement.addClass("_hidden");
if ($attrs.tooltipSmart) {
switch ($attrs.tooltipSide) {
case "top":
{
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_top");
tooltipElement.addClass("_left");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_left");
tooltipElement.addClass("_bottom");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_bottom");
tooltipElement.addClass("_right");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_right");
tooltipElement.addClass("_top");
}
}
}
}
break;
}
case "left":
{
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_left");
tooltipElement.addClass("_bottom");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_bottom");
tooltipElement.addClass("_right");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_right");
tooltipElement.addClass("_top");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_top");
tooltipElement.addClass("_left");
}
}
}
}
break;
}
case "bottom":
{
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_bottom");
tooltipElement.addClass("_left");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_left");
tooltipElement.addClass("_top");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_top");
tooltipElement.addClass("_right");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_right");
tooltipElement.addClass("_bottom");
}
}
}
}
break;
}
case "right":
{
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_right");
tooltipElement.addClass("_top");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_top");
tooltipElement.addClass("_left");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_left");
tooltipElement.addClass("_bottom");
if (isOutOfPage(tipElement)) {
tooltipElement.removeClass("_bottom");
tooltipElement.addClass("_right");
}
}
}
}
break;
}
default:
{
throw new Error("Position not supported");
}
}
}
if ($attrs.tooltipAppendToBody) {
var tipTipElementStyle = getStyle(tipTipElement[0]), tipArrowElementStyle = getStyle(tipArrowElement[0]), tipElementStyle = getStyle(tipElement[0]), tipElementBoundingClientRect = tipElement[0].getBoundingClientRect(), exradicatedTipElement = angular.copy(tipElement), tipTipStyleIndex = 0, tipTipStyleLength = tipTipElementStyle.length, tipArrowStyleIndex = 0, tipArrowStyleLength = tipArrowElementStyle.length, tipStyleIndex = 0, tipStyleLength = tipElementStyle.length, aStyleKey, tipTipCssToSet = {}, tipCssToSet = {}, tipArrowCssToSet = {}, paddingTopValue, paddingBottomValue, paddingLeftValue, paddingRightValue;
tipElement.removeClass("_hidden");
exradicatedTipElement.removeClass("_hidden");
exradicatedTipElement.data("_tooltip-parent", tooltipElement);
removeAppendedTip(tooltipElement);
for (;tipTipStyleIndex < tipTipStyleLength; tipTipStyleIndex += 1) {
aStyleKey = tipTipElementStyle[tipTipStyleIndex];
if (aStyleKey && tipTipElementStyle.getPropertyValue(aStyleKey)) {
tipTipCssToSet[aStyleKey] = tipTipElementStyle.getPropertyValue(aStyleKey);
}
}
for (;tipArrowStyleIndex < tipArrowStyleLength; tipArrowStyleIndex += 1) {
aStyleKey = tipArrowElementStyle[tipArrowStyleIndex];
if (aStyleKey && tipArrowElementStyle.getPropertyValue(aStyleKey)) {
tipArrowCssToSet[aStyleKey] = tipArrowElementStyle.getPropertyValue(aStyleKey);
}
}
for (;tipStyleIndex < tipStyleLength; tipStyleIndex += 1) {
aStyleKey = tipElementStyle[tipStyleIndex];
if (aStyleKey && aStyleKey !== "position" && aStyleKey !== "display" && aStyleKey !== "opacity" && aStyleKey !== "z-index" && aStyleKey !== "bottom" && aStyleKey !== "height" && aStyleKey !== "left" && aStyleKey !== "right" && aStyleKey !== "top" && aStyleKey !== "width" && tipElementStyle.getPropertyValue(aStyleKey)) {
tipCssToSet[aStyleKey] = tipElementStyle.getPropertyValue(aStyleKey);
}
}
paddingTopValue = window.parseInt(tipElementStyle.getPropertyValue("padding-top"), 10);
paddingBottomValue = window.parseInt(tipElementStyle.getPropertyValue("padding-bottom"), 10);
paddingLeftValue = window.parseInt(tipElementStyle.getPropertyValue("padding-left"), 10);
paddingRightValue = window.parseInt(tipElementStyle.getPropertyValue("padding-right"), 10);
tipCssToSet.top = tipElementBoundingClientRect.top + window.scrollY + "px";
tipCssToSet.left = tipElementBoundingClientRect.left + window.scrollX + "px";
tipCssToSet.height = tipElementBoundingClientRect.height - (paddingTopValue + paddingBottomValue) + "px";
tipCssToSet.width = tipElementBoundingClientRect.width - (paddingLeftValue + paddingRightValue) + "px";
exradicatedTipElement.css(tipCssToSet);
exradicatedTipElement.children().css(tipTipCssToSet);
exradicatedTipElement.children().next().css(tipArrowCssToSet);
if (event && $attrs.tooltipHidden !== "true") {
exradicatedTipElement.addClass("_exradicated-tooltip");
angular.element(window.document.body).append(exradicatedTipElement);
}
} else {
tipElement.removeClass("_hidden");
if (event && $attrs.tooltipHidden !== "true") {
tooltipElement.addClass("active");
}
}
}, onTooltipHide = function onTooltipHide() {
if ($attrs.tooltipAppendToBody) {
removeAppendedTip(tooltipElement);
} else {
tooltipElement.removeClass("active");
}
}, registerOnScrollFrom = function registerOnScrollFrom(theElement) {
var parentElement = theElement.parent(), timer;
if (theElement[0] && (theElement[0].scrollHeight > theElement[0].clientHeight || theElement[0].scrollWidth > theElement[0].clientWidth)) {
theElement.on("scroll", function onScroll() {
var that = this;
if (timer) {
$timeout.cancel(timer);
}
timer = $timeout(function doLater() {
var theTipElement = getAppendedTip(tooltipElement), tooltipBoundingRect = tooltipElement[0].getBoundingClientRect(), thatBoundingRect = that.getBoundingClientRect();
if (tooltipBoundingRect.top < thatBoundingRect.top || tooltipBoundingRect.bottom > thatBoundingRect.bottom || tooltipBoundingRect.left < thatBoundingRect.left || tooltipBoundingRect.right > thatBoundingRect.right) {
removeAppendedTip(tooltipElement);
} else if (theTipElement) {
onTooltipShow(true);
}
});
});
}
if (parentElement && parentElement.length) {
registerOnScrollFrom(parentElement);
}
}, onTooltipTemplateChange = function onTooltipTemplateChange(newValue) {
if (newValue) {
tipTipElement.empty();
tipTipElement.append(closeButtonElement);
tipTipElement.append(newValue);
$timeout(function doLater() {
onTooltipShow();
});
}
}, onTooltipTemplateUrlChange = function onTooltipTemplateUrlChange(newValue) {
if (newValue) {
$http.get(newValue).then(function onResponse(response) {
if (response && response.data) {
tipTipElement.empty();
tipTipElement.append(closeButtonElement);
tipTipElement.append($compile(response.data)(scope));
$timeout(function doLater() {
onTooltipShow();
});
}
});
}
}, onTooltipSideChange = function onTooltipSideChange(newValue) {
if (newValue) {
if (oldTooltipSide) {
tooltipElement.removeAttr("_" + oldTooltipSide);
}
tooltipElement.addClass("_" + newValue);
oldTooltipSide = newValue;
}
}, onTooltipShowTrigger = function onTooltipShowTrigger(newValue) {
if (newValue) {
if (oldTooltipShowTrigger) {
tooltipElement.off(oldTooltipShowTrigger);
}
tooltipElement.on(newValue, onTooltipShow);
oldTooltipShowTrigger = newValue;
}
}, onTooltipHideTrigger = function onTooltipHideTrigger(newValue) {
if (newValue) {
if (oldTooltipHideTrigger) {
tooltipElement.off(oldTooltipHideTrigger);
}
tooltipElement.on(newValue, onTooltipHide);
oldTooltipHideTrigger = newValue;
}
}, onTooltipClassChange = function onTooltipClassChange(newValue) {
if (newValue) {
if (oldTooltipClass) {
tipElement.removeClass(oldTooltipClass);
}
tipElement.addClass(newValue);
oldTooltipClass = newValue;
}
}, onTooltipSmartChange = function onTooltipSmartChange() {
if (typeof $attrs.tooltipSmart !== "boolean") {
$attrs.tooltipSmart = $attrs.tooltipSmart === "true";
}
}, onTooltipCloseButtonChange = function onTooltipCloseButtonChange(newValue) {
var enableButton = newValue === "true";
if (enableButton) {
closeButtonElement.on("click", onTooltipHide);
closeButtonElement.css("display", "block");
} else {
closeButtonElement.off("click");
closeButtonElement.css("display", "none");
}
}, onTooltipTemplateControllerChange = function onTooltipTemplateControllerChange(newValue) {
if (newValue) {
var tipController = $controller(newValue, {
$scope: scope
}), newScope = scope.$new(false, scope), indexOfAs = newValue.indexOf("as"), controllerName;
if (indexOfAs >= 0) {
controllerName = newValue.substr(indexOfAs + 3);
newScope[controllerName] = tipController;
} else {
angular.extend(newScope, tipController);
}
tipTipElement.replaceWith($compile(tipTipElement)(newScope));
unregisterOnTooltipControllerChange();
}
}, onTooltipSizeChange = function onTooltipSizeChange(newValue) {
if (newValue) {
if (oldSize) {
tipTipElement.removeClass("_" + oldSize);
}
tipTipElement.addClass("_" + newValue);
oldSize = newValue;
}
}, onTooltipSpeedChange = function onTooltipSpeedChange(newValue) {
if (newValue) {
if (oldSpeed) {
tooltipElement.removeClass("_" + oldSpeed);
}
tooltipElement.addClass("_" + newValue);
oldSpeed = newValue;
}
}, unregisterOnTooltipTemplateChange = $attrs.$observe("tooltipTemplate", onTooltipTemplateChange), unregisterOnTooltipTemplateUrlChange = $attrs.$observe("tooltipTemplateUrl", onTooltipTemplateUrlChange), unregisterOnTooltipSideChangeObserver = $attrs.$observe("tooltipSide", onTooltipSideChange), unregisterOnTooltipShowTrigger = $attrs.$observe("tooltipShowTrigger", onTooltipShowTrigger), unregisterOnTooltipHideTrigger = $attrs.$observe("tooltipHideTrigger", onTooltipHideTrigger), unregisterOnTooltipClassChange = $attrs.$observe("tooltipClass", onTooltipClassChange), unregisterOnTooltipSmartChange = $attrs.$observe("tooltipSmart", onTooltipSmartChange), unregisterOnTooltipCloseButtonChange = $attrs.$observe("tooltipCloseButton", onTooltipCloseButtonChange), unregisterOnTooltipControllerChange = $attrs.$observe("tooltipController", onTooltipTemplateControllerChange), unregisterOnTooltipSizeChange = $attrs.$observe("tooltipSize", onTooltipSizeChange), unregisterOnTooltipSpeedChange = $attrs.$observe("tooltipSpeed", onTooltipSpeedChange), unregisterTipContentChangeWatcher = scope.$watch(whenActivateMultilineCalculation, calculateIfMultiLine);
closeButtonElement.attr({
id: "close-button"
});
closeButtonElement.html("×");
tipElement.addClass("_hidden");
tipTipElement.append(closeButtonElement);
tipTipElement.append($attrs.tooltipTemplate);
tipElement.append(tipTipElement);
tipElement.append(tipArrowElement);
tipContElement.append(element);
tooltipElement.attr(attributes);
tooltipElement.addClass("tooltips");
tooltipElement.append(tipContElement);
tooltipElement.append(tipElement);
$element.after(tooltipElement);
if ($attrs.tooltipAppendToBody) {
resizeObserver.add(function onResize() {
registerOnScrollFrom(tooltipElement);
});
registerOnScrollFrom(tooltipElement);
}
resizeObserver.add(function registerResize() {
calculateIfMultiLine();
onTooltipShow();
});
$timeout(function doLater() {
onTooltipShow();
tipElement.removeClass("_hidden");
tooltipElement.addClass("_ready");
});
scope.$on("$destroy", function unregisterListeners() {
unregisterOnTooltipTemplateChange();
unregisterOnTooltipTemplateUrlChange();
unregisterOnTooltipSideChangeObserver();
unregisterOnTooltipShowTrigger();
unregisterOnTooltipHideTrigger();
unregisterOnTooltipClassChange();
unregisterOnTooltipSmartChange();
unregisterOnTooltipCloseButtonChange();
unregisterOnTooltipSizeChange();
unregisterOnTooltipSpeedChange();
unregisterTipContentChangeWatcher();
element.off($attrs.tooltipShowTrigger + " " + $attrs.tooltipHideTrigger);
});
});
};
return {
restrict: "A",
transclude: "element",
priority: 1,
terminal: true,
link: linkingFunction
};
} ];
angular.module("720kb.tooltips", []).provider(directiveName + "Conf", tooltipConfigurationProvider).directive(directiveName, tooltipDirective);
})(angular, window);
.animate.slide.ng-hide-remove-active,
.animate.slide.ng-hide-add-active {
-webkit-transition: 0.5s all ease;
position: relative;
}
.animate.slide.ng-hide-remove.ng-hide-remove-active {
transform: translateX(0);
-ms-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
opacity: 1;
}
.animate.slide.ng-hide-remove {
transform: translateX(20%);
-ms-transform: translateX(20%);
-moz-transform: translateX(20%);
-webkit-transform: translateX(20%);
opacity: 0.5;
}
.animate.slide.ng-hide-add {
transform: translateX(0);
-ms-transform: translateX(0);
-moz-transform: translateX(0);
-webkit-transform: translateX(0);
opacity: 1;
}
.animate.slide.ng-hide-add.ng-hide-add-active {
transform: translateX(20%);
-ms-transform: translateX(20%);
-moz-transform: translateX(20%);
-webkit-transform: translateX(20%);
opacity: 0.5;
}
.animate.slide.ng-hide-add {
display: none !important;
}
.animate.fade-in.ng-hide-remove-active,
.animate.fade-in.ng-hide-add-active {
-webkit-transition: 0.5s all ease;
position: relative;
}
.animate.fade-in.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
.animate.fade-in.ng-hide-remove {
opacity: 0;
}
.animate.fade-in.ng-hide-add {
opacity: 1;
}
.animate.fade-in.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.animate.fade-in.ng-hide-add {
display: none !important;
}
.animate.fade-in-out.ng-hide-remove-active,
.animate.fade-in-out.ng-hide-add-active {
-webkit-transition: 0.5s all ease;
position: relative;
}
.animate.fade-in-out.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
.animate.fade-in-out.ng-hide-remove {
opacity: 0;
}
.animate.fade-in-out.ng-hide-add {
opacity: 1;
}
.animate.fade-in-out.ng-hide-add.ng-hide-add-active {
opacity: 0;
}
.animate.zoom.ng-hide-remove-active,
.animate.zoom.ng-hide-add-active {
-webkit-transition: 0.5s all ease;
position: relative;
}
.animate.zoom.ng-hide-remove.ng-hide-remove-active {
transform: translateZ(0);
-ms-transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-filter: opacity(100%);
-moz-filter: opacity(100%);
-o-filter: opacity(100%);
-ms-filter: opacity(100%);
}
.animate.zoom.ng-hide-remove {
transform: translateZ(-250px);
-ms-transform: translateZ(-250px);
-moz-transform: translateZ(-250px);
-webkit-transform: translateZ(-250px);
-webkit-filter: opacity(10%);
-moz-filter: opacity(10%);
-o-filter: opacity(10%);
-ms-filter: opacity(10%);
}
.animate.zoom.ng-hide-add {
transform: translateZ(0);
-ms-transform: translateZ(0);
-moz-transform: translateZ(0);
-webkit-transform: translateZ(0);
-webkit-filter: opacity(100%);
-moz-filter: opacity(100%);
-o-filter: opacity(100%);
-ms-filter: opacity(100%);
}
.animate.zoom.ng-hide-add.ng-hide-add-active {
transform: translateZ(-250px);
-ms-transform: translateZ(-250px);
-moz-transform: translateZ(-250px);
-webkit-transform: translateZ(-250px);
-webkit-filter: opacity(10%);
-moz-filter: opacity(10%);
-o-filter: opacity(10%);
-ms-filter: opacity(10%);
}
.animate.zoom.ng-hide-add {
display: none !important;
}
/*
* angular-tooltips
* 1.0.6
*
* Angular.js tooltips module.
* http://720kb.github.io/angular-tooltips
*
* MIT license
* Wed Dec 09 2015
*/
._exradicated-tooltip {
position: absolute;
display: block;
opacity: 1;
z-index: 999; }
tooltip {
display: inline-block;
position: relative; }
@-webkit-keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
@-moz-keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
@-ms-keyframes animate-tooltip {
tooltip 0% {
opacity: 0; }
tooltip 50% {
opacity: .5; }
tooltip 60% {
opacity: .8; }
tooltip 70% {
opacity: .9; }
tooltip 90% {
opacity: 1; } }
@keyframes animate-tooltip {
0% {
opacity: 0; }
50% {
opacity: .5; }
60% {
opacity: .8; }
70% {
opacity: .9; }
90% {
opacity: 1; } }
tooltip._multiline {
display: block; }
tooltip._slow._ready tip {
animation: animate-tooltip 0.65s; }
tooltip._fast._ready tip {
animation: animate-tooltip 0.15s; }
tooltip._steady._ready tip {
animation: animate-tooltip 0.35s; }
tooltip tip {
border-radius: 3px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
display: none;
line-height: normal;
max-width: 500px;
min-width: 100px;
opacity: 0;
padding: 8px 16px;
position: absolute;
text-align: center;
width: auto;
will-change: top, left, bottom, right; }
tooltip tip._hidden {
display: block;
visibility: hidden; }
tooltip.active tip {
display: block;
opacity: 1;
z-index: 999; }
tooltip tip-tip {
font-size: .95em; }
tooltip tip-tip._large {
font-size: 1.1em; }
tooltip tip-tip._small {
font-size: .8em; }
tooltip tip-tip #close-button {
cursor: pointer;
float: right;
left: 8%;
margin-top: -7%;
position: relative; }
tooltip._top tip {
left: 50%;
top: -9px;
transform: translateX(-50%) translateY(-100%); }
tooltip._top tip tip-arrow {
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid rgba(0, 0, 0, 0.85);
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
top: 100%;
width: 0; }
tooltip._bottom tip {
right: 50%;
top: 100%;
transform: translateY(9px) translateX(50%); }
tooltip._bottom tip tip-arrow {
border-bottom: 6px solid rgba(0, 0, 0, 0.85);
border-left: 6px solid transparent;
border-right: 6px solid transparent;
bottom: 100%;
content: '';
height: 0;
left: 50%;
margin-left: -6px;
position: absolute;
width: 0; }
tooltip._right tip {
left: 100%;
top: 50%;
transform: translateX(9px) translateY(-50%); }
tooltip._right tip tip-arrow {
border-bottom: 6px solid transparent;
border-right: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
margin-top: -6px;
position: absolute;
right: 100%;
top: 50%;
width: 0; }
tooltip._left tip {
left: -9px;
top: 50%;
transform: translateX(-100%) translateY(-50%); }
tooltip._left tip tip-arrow {
border-bottom: 6px solid transparent;
border-left: 6px solid rgba(0, 0, 0, 0.85);
border-top: 6px solid transparent;
content: '';
height: 0;
left: 100%;
margin-top: -6px;
position: absolute;
top: 50%;
width: 0; }
/*# sourceMappingURL=angular-tooltips.css.map */
.wizard-container {
background-color: #e7e7e7;
}
.wizard-container .wizard-main {
padding: 20px;
}
.wizard-container .wizard-main .pager i {
-webkit-transition: all 0.3s ease;
}
.wizard-container .wizard-main .pager i.selected {
color: #38a7e2;
-webkit-transform: translateY(-3px);
}
.wizard-container .wizard-main .pager i.disabled {
color: gray;
cursor: not-allowed;
}
.wizard-container .wizard-main .wizard-step-container {
overflow-x: hidden;
-webkit-perspective: 800px;
-moz-perspective: 800px;
-ms-perspective: 800px;
perspective: 800px;
}
.wizard-container .wizard-main .wizard-step {
background-color: white;
padding: 15px;
box-shadow: gray 5px 10px 30px;
display: block;
}
.wizard-container .wizard-sidebar {
margin-top: 65px;
margin-bottom: 30px;
background-color: white;
}
.wizard-container .wizard-sidebar .progress {
margin: 0;
}
.wizard-container .wizard-sidebar li.active a {
margin-left: 15px;
}
.wizard-container .wizard-sidebar li a {
-ms-transition: margin 0.5s ease;
-moz-transition: margin 0.5s ease;
-webkit-transition: margin 0.5s ease;
transition: margin 0.5s ease;
}
.wizard-container .btn.submit {
margin-bottom: 5px;
}
.wizard-container .btn.submit i.ng-hide-add {
display: none;
}
angular.module("app", ["ngWizard"])
.controller('wizard', function ($scope){
$scope.submit = function (){
alert("Submitted Wizard!");
}
$scope.addNewStep = function (newStep){
$scope.dynamicSteps.push(newStep);
}
$scope.dynamicSteps = ["step 3"];
$scope.dynamicRequiredText = {};
});