fixes: U4-10600 Add "Don't show this tour again" option

This commit is contained in:
Mads Rasmussen
2017-10-31 10:59:13 +01:00
parent 358536ffaa
commit 773d249d36
4 changed files with 58 additions and 23 deletions

View File

@@ -16,7 +16,7 @@
scope.model.endTour = function() {
unbindEvent();
tourService.endTour();
tourService.endTour(scope.model);
backdropService.close();
};
@@ -26,6 +26,12 @@
backdropService.close();
};
scope.model.disableTour = function() {
unbindEvent();
tourService.disableTour(scope.model);
backdropService.close();
}
function onInit() {
popover = el.find(".umb-tour__popover");
popover.hide();

View File

@@ -11,6 +11,7 @@
"name": "Introduction",
"alias": "umbIntroIntroduction",
"group": "Getting Started",
"allowDisable": true,
"steps": [
{
title: "Welcome to Umbraco - The Friendly CMS",
@@ -419,13 +420,20 @@
currentTour = tour;
}
function endTour() {
function endTour(tour) {
eventsService.emit("appState.tour.end", tour);
currentTour = null;
eventsService.emit("appState.tour.end");
}
function disableTour(tour) {
tour.disabled = true;
saveInLocalStorage(tour);
eventsService.emit("appState.tour.end", tour);
currentTour = null;
}
function completeTour(tour) {
tour.completed = true;
saveInLocalStorage(tour);
eventsService.emit("appState.tour.complete", tour);
currentTour = null;
@@ -452,11 +460,19 @@
}
function getCompletedTours() {
var completedTours = localStorageService.get(localStorageKey);
var storedTours = localStorageService.get(localStorageKey);
var completedTours = _.where(storedTours, {completed: true});
var aliases = _.pluck(completedTours, "alias");
return aliases;
}
function getDisabledTours() {
var storedTours = localStorageService.get(localStorageKey);
var disabledTours = _.where(storedTours, {disabled: true});
var aliases = _.pluck(disabledTours, "alias");
return aliases;
}
///////////
function setCompletedTours() {
@@ -483,23 +499,28 @@
var storedTours = [];
var tourFound = false;
// check if something exists in local storage
if (localStorageService.get(localStorageKey)) {
storedTours = localStorageService.get(localStorageKey);
}
// update existing tour in localstorage if it's already there
if (storedTours.length > 0) {
angular.forEach(storedTours, function (storedTour) {
if (storedTour.alias === tour.alias) {
storedTour.completed = true;
storedTour.completed = storedTour.completed ? storedTour.completed : tour.completed;
storedTour.disabled = storedTour.disabled ? storedTour.disabled : tour.disabled;
tourFound = true;
}
});
}
// create new entry in local storage
if (!tourFound) {
var storageObject = {
"alias": tour.alias,
"completed": true
"completed": tour.completed,
"disabled": tour.disabled
};
storedTours.push(storageObject);
}
@@ -511,12 +532,14 @@
var service = {
startTour: startTour,
endTour: endTour,
disableTour: disableTour,
completeTour: completeTour,
getCurrentTour: getCurrentTour,
getAllTours: getAllTours,
getGroupedTours: getGroupedTours,
getTourByAlias: getTourByAlias,
getCompletedTours: getCompletedTours
getCompletedTours: getCompletedTours,
getDisabledTours: getDisabledTours,
};
return service;

View File

@@ -7,7 +7,7 @@
<div ng-if="!configuredView && !elementNotFound">
<!-- Regular steps -->
<umb-tour-step ng-if="model.currentStepIndex < model.steps.length" on-close="model.endTour()" hide-close="model.currentStep.type === 'intro'">
<umb-tour-step ng-if="model.currentStepIndex < model.steps.length" on-close="model.endTour()">
<umb-tour-step-header
title="model.currentStep.title">
@@ -17,20 +17,25 @@
content="model.currentStep.content">
</umb-tour-step-content>
<umb-tour-step-footer class="flex justify-between items-center">
<umb-tour-step-footer>
<umb-tour-step-counter
current-step="model.currentStepIndex + 1"
total-steps="model.steps.length">
</umb-tour-step-counter>
<div ng-if="model.currentStep.type !== 'intro'">
<umb-button size="xs" ng-if="!model.currentStep.event" button-style="success" type="button" action="model.nextStep()" label="Next"></umb-button>
</div>
<div class="flex justify-between items-center">
<div ng-if="model.currentStep.type === 'intro'">
<umb-button size="m" button-style="link" type="button" action="model.endTour()" label="Do it later"></umb-button>
<umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
<div>
<umb-tour-step-counter
current-step="model.currentStepIndex + 1"
total-steps="model.steps.length">
</umb-tour-step-counter>
<div ng-if="model.allowDisable && model.currentStep.type === 'intro'" style="font-size: 13px;"><a href="" class="underline" ng-click="model.disableTour()">Don't show this tour again</a></div>
</div>
<div ng-if="model.currentStep.type !== 'intro'">
<umb-button size="xs" ng-if="!model.currentStep.event" button-style="success" type="button" action="model.nextStep()" label="Next"></umb-button>
</div>
<div ng-if="model.currentStep.type === 'intro'">
<umb-button size="m" button-style="success" type="button" action="model.nextStep()" label="Start tour"></umb-button>
</div>
</div>
</umb-tour-step-footer>

View File

@@ -32,14 +32,15 @@ function startUpDynamicContentController($timeout, dashboardResource, assetsServ
// load tours
vm.tours = tourService.getGroupedTours();
// get list of completed tours
// get list of completed tours and disabled tours
var completedTours = tourService.getCompletedTours();
var disabledTours = tourService.getDisabledTours();
// get intro tour
var introTour = tourService.getTourByAlias("umbIntroIntroduction");
// start tour if it hasn't been completed
if(completedTours.indexOf(introTour.alias) === -1) {
// start intro tour if it hasn't been completed or disabled
if(completedTours.indexOf(introTour.alias) === -1 && disabledTours.indexOf(introTour.alias) === -1) {
tourService.startTour(introTour);
}