<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//unpkg.com/tether@1.4.0/dist/js/tether.min.js"></script>
<script src="//unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script>
<script src="//unpkg.com/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<!--dependencies-->
<script src="//unpkg.com/angular@1.6.5/angular.js"></script>
<script src="bindHtmlCompile.js"></script>
<script src="//unpkg.com/angular-sanitize@1.6.5/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-route@1.6.5/angular-route.min.js"></script>
<script src="//unpkg.com/angular-animate@1.6.4/angular-animate.min.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap-tpls.js"></script>
<script src="//unpkg.com/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="//unpkg.com/ez-ng@0.1.8/dist/ez-ng.min.js"></script>
<script src="//unpkg.com/angular-hotkeys@1.7.0/build/hotkeys.js"></script>
<script src="//unpkg.com/hone@1.0.3/dist/hone.js"></script>
<script src="//unpkg.com/angular-scroll@1.0.2/angular-scroll.js"></script>
<script src="//unpkg.com/angular-ui-tour@0.8.2/dist/angular-ui-tour.js"></script>
<script src="app.js"></script>
<script src="app.route.js"></script>
<script src="indexCtrl.js"></script>
<script src="helloCtrl.js"></script>
<script src="aboutCtrl.js"></script>
<script src="settingsController.js"></script>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="//unpkg.com/angular-ui-bootstrap@2.5.0/dist/ui-bootstrap-csp.css"/>
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<!--Single Page Tour first-->
<!--Then multi pages tour-->
<!--tour-step-next-path="page2" -->
<!--tour-step-next-step="page2step1"-->
<!---->
<body ng-controller="indexCtrl" ui-tour="testTour" ui-tour-on-ready="onTourReady()"
ui-tour-template-url="'welcomeTemplate.html'"
ui-tour-on-end="onTourEnd()"
ui-tour-append-to-body="true">
<div>
<script type="text/ng-template" id="settings.html">
<div class="modal-header">
<h3>header</h3>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</script>
<hr />
<hr />
<div>
<div tour-step="welcomeStep"
tour-step-belongs-to="testTour"
tour-step-order="0"
tour-step-title="Welcome"
tour-step-content="Welcome to the testTour"
tour-step-on-show="changeContent();"
tour-step-on-next="createStep()"
tour-step-template-url="'welcomeTemplate.html'"
tour-step-placement="bottom"
tour-step-backdrop=true
tour-step-animation=true></div>
<div id="welcomeElement">
</div>
</div>
<div class="mainContainer" id="tabs">
<div class="firstContainer">
<a ui-sref="hello" ui-sref-active="active"
tour-step="firstStep"
tour-step-belongs-to="testTour"
tour-step-order="10"
tour-step-on-next="goToHello('go to hello now')"
tour-step-title="Hello"
tour-step-content="Navigate to route 'hello'"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true
ng-click="goHello()">Hello</a>
</div>
<div class="secondContainer">
<a ui-sref="about" ui-sref-active="active"
tour-step="aboutStep"
tour-step-belongs-to="testTour"
tour-step-order="20"
tour-step-title="About"
tour-step-content="Navigate to route about"
tour-step-on-show="showAboutStep();"
tour-step-on-next="goToAbout('go to about now');"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true
ng-click="goAbout()">About</a>
</div>
<div>
<button class="form-control btn-primary startTourBtn" ng-click="toggleTour()">start tour</button>
</div>
</div>
<div class="mainElement"
id="comments"
tour-step="fourthStep"
tour-step-belongs-to="testTour"
tour-step-order="40"
tour-step-title="Comments"
tour-step-content="Put comments here"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<label>Please put comment here: </label>
<textarea class="form-control">
</textarea>
</div>
<!--tour-step-on-next="openSettingsModal()"-->
<div class="settingsModal"
tour-step="eighthStep"
tour-step-belongs-to="testTour"
tour-step-order="100"
tour-step-title="Settings"
tour-step-content="Popup doesn't work well with dialogs, click button to show how it will look!"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<button class="form-control" ng-click="showSettingsModal()">settings</button>
</div>
<hr />
<div class="uiView">
<ui-view></ui-view>
</div>
</div>
</body>
</html>
// Code goes here
(function() {
'use strict';
var app = angular.module('app');
app.controller('indexCtrl', ['$rootScope', '$scope', '$state', '$timeout', '$uibModal', '$templateCache', '$sce', 'uiTourService',
function($rootScope, $scope, $state, $timeout, $uibModal, $templateCache, $sce, uiTourService) {
activate();
var testTour = uiTourService.getTourByName('testTour');
$scope.createdStepFlag = false;
function activate() {
console.log('Start');
}
$scope.changeContent = function() {
$timeout(function() {
testTour._getCurrentStep().content = "Content changed as well! <br />" +
"<ul><li>Orphan doesn't work well in plunker</li></ul>";
testTour._getCurrentStep().title = "Title Changed!";
}, 0, false);
}
$scope.showTestTour = false;
$scope.goToStep = function(step) {
testTour.removeStep(step);
console.log(testTour._getSteps());
}
// click previous and then next, the step will be created twice
// need to check if the step is created
$scope.createStep = function(name) {
if (!$scope.createdStepFlag) {
$scope.createdStepFlag = true;
console.log('step created!');
testTour.createStep({
elementId: 'welcomeElement',
stepId: 'createdStep',
order: 5,
title: 'new Step',
backdrop: true,
placement: 'right',
appendToBody: true,
content: 'step created with createStep()',
trustedContent: $sce.trustAsHtml('<strong>This can contain HTML, and will override `step.content` if set.</strong>')
});
}
}
// settings modal
$scope.showSettingsModal = function() {
// var settingsTemplate = $templateCache.get('settingsFile.html');
var modalInstance = $uibModal.open({
animation: true,
templateUrl: 'settingsFile.html',
controller: 'settingsController',
backdrop: true,
size: 'sm'
});
modalInstance.opened.then(function () {
$scope.modalOpen = true;
});
modalInstance.result.then(function(result) {
}, function(error) {
if (error === 'save') {
}
}).finally(function() {
$scope.modalOpen = false;
});
}
// $scope.openSettingsModal = function() {
// var testTour = uiTourService.getTour();
// testTour.end().then(function () {
// return $scope.showSettingsModal();
// }).then(function () {
// });
// }
// click the element to do the same as next
// get the status of tour, if tour is ON, go to the next step of tour
// else behave normally
$scope.goHello = function() {
if (testTour.getStatus() === testTour.Status.ON) {
$scope.goToHello('clicked hello');
}
else {
$state.go('hello');
}
}
$scope.goAbout = function() {
if (testTour.getStatus() === testTour.Status.ON) {
$scope.goToAbout('clicked about');
}
else {
$state.go('about');
}
}
$scope.toggleTour = function() {
$scope.showTestTour = true;
$scope.onTourReady();
}
$scope.onTourReady = function() {
if ($scope.showTestTour === true) {
$scope.showTestTour = false;
testTour.start();
}
return true;
}
$scope.onTourEnd = function() {
$scope.showTestTour = false;
}
// ui-router is not integrated with ui-tour
// so we need to end the current tour and start at the specific step
$scope.goToHello = function (str) {
testTour.end().then(function () {
return $state.go('hello');
}).then(function () {
return testTour.startAt('hellostep1');
});
};
$scope.showAboutStep = function() {
console.log('on-show is working!');
}
$scope.goToAbout = function (str) {
console.log(str);
testTour.end().then(function () {
return $state.go('about');
}).then(function () {
return testTour.startAt('aboutstep1');
});
}
}]);
})();
/* Styles go here */
#welcomeElement {
width: 10px;
height: 10px;
background: red;
}
.startTourBtn {
width: 100px !important;
}
.mainContainer {
display: inline-flex;
width: 100%;
}
.firstContainer {
width: 50%;
text-align: center;
}
.secondContainer {
width: 50%;
text-align: center;
}
.mainElement {
width: 50%;
margin: 0 auto;
}
.uiView {
width: 70%;
margin: 0 auto;
}
.small {
background: grey;
width: 50px;
height: 50px;
}
.settingsModal {
width: 30%;
margin: 20px auto;
}
.ui-tour-backdrop {
background-color: rgba(0, 0, 0, 0.5);
fill: rgba(0, 0, 0, 0.5);
}
.ui-tour-popup {
background: yellow;
}
.popover-title {
background: pink;
font-weight: bold;
}
<style>
</style>
<h3>This is HELLO</h3>
<div tour-step="hellostep1"
tour-step-belongs-to="testTour"
tour-step-order="11"
tour-step-title="Hello input"
tour-step-content="Hello input"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<label>Please input something</label>
<input type="text" class="form-control"/>
</div>
<div tour-step="hellostep2"
tour-step-belongs-to="testTour"
tour-step-on-next="startAboutStep()"
tour-step-order="12"
tour-step-title="Hello select"
tour-step-content="Hello select"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<label>Select one:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<style>
</style>
<h3> This is ABOUT</h3>
<div tour-step="aboutstep1"
tour-step-belongs-to="testTour"
tour-step-order="21"
tour-step-title="About input"
tour-step-content="About input"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<label>Please input something</label>
<input type="text" class="form-control"/>
</div>
<div tour-step="aboutstep2"
tour-step-belongs-to="testTour"
tour-step-order="22"
tour-step-title="About select"
tour-step-content="About select"
tour-step-backdrop=true
tour-step-placement="bottom"
tour-step-animation=true>
<label>select one:</label>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
(function() {
'use strict';
var app = angular.module('app', ['ngAnimate', 'ui.bootstrap', 'ui.router', 'angular-bind-html-compile', 'bm.uiTour']);
app.run(['uiTourService', function (uiTourService) {
uiTourService.createDetachedTour('testTour', {backdrop: true});
uiTourService.createDetachedTour('settingsTour', {backdrop: true});
}]);
})();
(function() {
'use strict';
var app = angular.module('app');
// config route states
app.config(function($stateProvider) {
var helloState = {
name: 'hello',
url: '/hello',
templateUrl: 'hello.html',
controller: 'helloCtrl'
}
var aboutState = {
name: 'about',
url: '/about',
templateUrl: 'about.html',
controller: 'aboutCtrl'
}
$stateProvider.state(helloState);
$stateProvider.state(aboutState);
});
})();
<style>
.popover-content .tour-step-content {
background: lightblue;
}
/*.popover-inner h3 {*/
/* background: transparent;*/
/* border: none;*/
/*}*/
/*.ui-tour-popup {*/
/* background-color: transparent;*/
/* border: none;*/
/*}*/
</style>
<div class="arrow"></div>
<div class="popover-inner tour-step-inner">
<div class="popover-content tour-step-content"
ng-bind-html="tourStep.content || tourStep.trustedContent"></div>
<div class="popover-navigation tour-step-navigation">
<div class="btn-group">
<button type="button" class="btn btn-sm btn-default"
ng-if="tourStep.isPrev()" ng-click="tour.prev()">« Prev</button>
<button type="button" class="btn btn-sm btn-default"
ng-if="tourStep.isNext()" ng-click="tour.next()">Next »</button>
</div>
<button type="button" class="btn btn-sm btn-default" ng-click="tour.end()">End tour</button>
</div>
</div>
(function() {
'use strict';
var app = angular.module('app');
app.controller('aboutCtrl', ['$scope', 'uiTourService', function($scope, uiTourService) {
activate();
function activate() {
console.log('aboutCtrl Start');
}
$scope.showTestTour = false;
}]);
})();
(function() {
'use strict';
var app = angular.module('app');
app.controller('helloCtrl', ['$scope', 'uiTourService', '$timeout', function ($scope, uiTourService, $timeout) {
var testTour = uiTourService.getTourByName('testTour');
activate();
function activate() {
console.log('helloCtrl Start');
}
$scope.showTestTour = false;
$scope.startAboutStep = function() {
testTour.end().then(function() {
$timeout(function() {
testTour.startAt('aboutStep');
}, 0, false);
});
}
}]);
})();
(function() {
'use strict';
var app = angular.module('app');
app.controller('settingsController', ['$scope', 'uiTourService', '$uibModalInstance',
function($scope, uiTourService, $uibModalInstance, someData) {
var settingsTour = uiTourService.getTourByName('settingsTour');
var testTour = uiTourService.getTourByName('testTour');
activate();
$scope.teamName = "this is stupid";
$scope.onTourReady = function() {
};
function activate() {
console.log(testTour.getStatus());
if (testTour.getStatus() === 1) {
testTour.end().then(function() {
settingsTour.start();
});
}
}
$scope.logChange = function() {
if (settingsTour.getStatus() === 1) {
settingsTour.pause();
}
console.log($scope.teamName);
}
$scope.ok = function() {
console.log($scope.teamName);
$uibModalInstance.close(someData);
};
$scope.cancel = function() {
$uibModalInstance.dismiss('cancel');
};
}]);
})();
<div ui-tour="settingsTour"
ui-tour-template-url="'welcomeTemplate.html'"
ui-tour-backdrop="false"
ui-tour-on-ready="onTourReady()">
<div tour-step="settingsStep1"
tour-step-order="0"
tour-step-belongs-to="settingsTour"
tour-step-title="Settings"
tour-step-content="Here you can change the settings"
tour-step-placement="bottom"
tour-step-backdrop=true
tour-step-animation=true
tour-step-append-to-body=false>
<div class="modal-header">
<h3>header</h3>
</div>
<div class="modal-body">
<input ng-model="teamName" ng-change="logChange()"/>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>
</div>
</div>
(function (angular) {
'use strict';
var bindHtmlCompile = angular.module('angular-bind-html-compile', []);
bindHtmlCompile.directive('bindHtmlCompile', ['$compile', function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(function () {
return scope.$eval(attrs.bindHtmlCompile);
}, function (value) {
// In case value is a TrustedValueHolderType, sometimes it
// needs to be explicitly called into a string in order to
// get the HTML string.
element.html(value && value.toString());
// If scope is provided use it, otherwise use parent scope
var compileScope = scope;
if (attrs.bindHtmlScope) {
compileScope = scope.$eval(attrs.bindHtmlScope);
}
$compile(element.contents())(compileScope);
});
}
};
}]);
if (typeof module !== 'undefined' && module.exports) {
module.exports = bindHtmlCompile.name;
}
}(window.angular));