";
+ $(step.element).popover('destroy'); // destroy existing hover popovers so we can add our own
step.onShow = function(){
- // Since all the steps are currently on the tasks page, ensure we go back there for each step in case they
- // clicked elsewhere during the tour. FIXME: $state.go() returns a promise, necessary for async tour steps;
- // however, that's not working here - have to use timeout instead :/
- if (!$state.is('tasks')) return $timeout(function(){$state.go('tasks');}, 0)
+ // step.path doesn't work in Angular do to async ui-router. Our custom solution:
+ if (step.state && !$state.is(step.state)) {
+ // $state.go() returns a promise, necessary for async tour steps; however, that's not working here - have to use timeout instead :/
+ $state.go(step.state);
+ return $timeout(function(){});
+ }
}
- step.html = true;
- tour.addStep(step);
+ step.onHide = function(){
+ if (step.final) { // -1 indicates complete
+ var ups={};ups['flags.tour.'+k] = -1;
+ User.set(ups);
+ }
+ }
+ })
+ })
+
+ var tour = {};
+ _.each(chapters, function(v,k){
+ tour[k] = new Tour({
+ backdrop: true,
+ template: function(i,step){
+ return '
' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '
' +
+ //''+
+ (step.final ? '' : '')+
+ '
' +
+ ' ' +
+ ' ' +
+ ' ' +
+ '
' +
+ '
' +
+ '
';
+ },
+ storage: false,
+ //onEnd: function(){
+ // User.set({'flags.showTour': false});
+ //}
});
- tour.restart(); // Tour doesn't quite mesh with our handling of flags.showTour, just restart it on page load
- //tour.start(true);
- };
+ });
- var alreadyShown = function(before, after) {
- return !(!before && after === true);
- };
-
- var showPopover = function(selector, title, html, placement) {
- if (!placement) placement = 'bottom';
- $(selector).popover('destroy');
- var button = "";
- if (env.worldDmg.guide) {
- html = "
" + html + ' ' + button + '
';
+ var goto = function(chapter, page, force) {
+ var curr = User.user.flags.tour[chapter];
+ if ((page != curr+1 || curr > page) && !force) return;
+ var updates = {};updates['flags.tour.'+chapter] = page;
+ User.set(updates);
+ var chap = tour[chapter], opts = chap._options;
+ opts.steps = [];
+ _.times(page, function(p){
+ opts.steps = opts.steps.concat(chapters[chapter][p]);
+ })
+ var end = opts.steps.length;
+ opts.steps = opts.steps.concat(chapters[chapter][page]);
+ chap._removeState('end');
+ if (chap._inited) {
+ chap.goTo(end);
} else {
- html = "
" + html + ' ' + button + '
';
+ chap.setCurrentStep(end);
+ chap.start();
}
- $(selector).popover({
- title: title,
- placement: placement,
- trigger: 'manual',
- html: true,
- content: html
- }).popover('show');
- };
+ }
- $rootScope.$watch('user.flags.customizationsNotification', function(after, before) {
- if (alreadyShown(before, after)) return;
- showPopover('.main-herobox', window.env.t('customAvatar'), window.env.t('customAvatarText'), 'bottom');
- });
+ //Init and show the welcome tour (only after user is pulled from server & wrapped).
+ var watcher = $rootScope.$watch('User.user.ops.update', function(updateFn){
+ if (!updateFn) return; // only run after user has been wrapped
+ watcher(); // deregister watcher
+ if (window.env.IS_MOBILE) return; // Don't show tour immediately on mobile devices
+ goto('intro', User.user.flags.tour.intro, true);
- $rootScope.$watch('user.flags.itemsEnabled', function(after, before) {
- if (alreadyShown(before, after)) return;
- var html = window.env.t('storeUnlockedText');
- showPopover('div.rewards', window.env.t('storeUnlocked'), html, 'left');
- });
-
- $rootScope.$watch('user.flags.partyEnabled', function(after, before) {
- if (alreadyShown(before, after)) return;
- var html = window.env.t('partySysText');
- showPopover('.user-menu', window.env.t('partySys'), html, 'bottom');
- });
-
- $rootScope.$watch('user.flags.dropsEnabled', function(after, before) {
- if (alreadyShown(before, after)) return;
- var eggs = User.user.items.eggs || {};
- if (!eggs) {
- eggs['Wolf'] = 1; // This is also set on the server
- }
- $rootScope.openModal('dropsEnabled');
- });
-
- $rootScope.$watch('user.flags.rebirthEnabled', function(after, before) {
+ var alreadyShown = function(before, after) { return !(!before && after === true) };
+ //$rootScope.$watch('user.flags.dropsEnabled', _.flow(alreadyShown, function(already) { //FIXME requires lodash@~3.2.0
+ $rootScope.$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){
+ if (toState.name == 'options.profile.avatar') goto('intro', 5);
+ })
+ $rootScope.$watch('user.flags.dropsEnabled', function(after, before) {
+ if (alreadyShown(before,after)) return;
+ var eggs = User.user.items.eggs || {};
+ if (!eggs) eggs['Wolf'] = 1; // This is also set on the server
+ $rootScope.openModal('dropsEnabled');
+ });
+ $rootScope.$watch('user.flags.rebirthEnabled', function(after, before) {
if (alreadyShown(before, after)) return;
$rootScope.openModal('rebirthEnabled');
+ });
});
-
- /**
- * Classes Tour
- */
- function classesTour(){
-
- // TODO notice my hack-job `onShow: _.once()` functions. Without these, the syncronous path redirects won't properly handle showing tour
- var tourSteps = [
- {
- path: '/#/options/inventory/equipment',
- onShow: _.once(function(tour){
- $timeout(function(){tour.goTo(0)});
- }),
- element: '.equipment-tab',
- title: window.env.t('classGear'),
- content: window.env.t('classGearText', {klass: User.user.stats.class})
- },
- {
- path: '/#/options/profile/stats',
- onShow: _.once(function(tour){
- $timeout(function(){tour.goTo(1)});
- }),
- element: ".allocate-stats",
- title: window.env.t('stats'),
- content: window.env.t('classStats'),
- }, {
- element: ".auto-allocate",
- title: window.env.t('autoAllocate'),
- placement: 'left',
- content: window.env.t('autoAllocateText'),
- }, {
- element: ".meter.mana",
- title: window.env.t('spells'),
- content: window.env.t('spellsText') + " " + window.env.t('toDo') + "."
- }, {
- orphan: true,
- title: window.env.t('readMore'),
- content: window.env.t('moreClass') + " Wikia."
- }
- ];
- _.each(tourSteps, function(step){
- if (env.worldDmg.guide) {
- step.content = "