Initial commit
This commit is contained in:
zhongjin
+128
@@ -0,0 +1,128 @@
|
||||
var $ = require('jquery');
|
||||
var Backbone = require('backbone');
|
||||
var CoreView = require('backbone/core-view');
|
||||
var template = require('./builder-view.tpl');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
var GAPusher = require('builder/helpers/ga-pusher');
|
||||
|
||||
var BUILDER_KEY = 'onboarding';
|
||||
|
||||
var LEFT_KEY_CODE = 37;
|
||||
var RIGHT_KEY_CODE = 39;
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'userModel',
|
||||
'onboardingNotification',
|
||||
'editorModel'
|
||||
];
|
||||
|
||||
module.exports = CoreView.extend({
|
||||
className: 'BuilderOnboarding is-step0 is-opening',
|
||||
|
||||
events: {
|
||||
'click .js-start': '_onClickNext',
|
||||
'click .js-next': '_onClickNext',
|
||||
'click .js-close': '_close'
|
||||
},
|
||||
|
||||
initialize: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
|
||||
this._initModels();
|
||||
this._initBinds();
|
||||
},
|
||||
|
||||
render: function () {
|
||||
this.$el.html(template({
|
||||
name: this._userModel.get('name') || this._userModel.get('username')
|
||||
}));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
_initModels: function () {
|
||||
this.model = new Backbone.Model({
|
||||
step: 0
|
||||
});
|
||||
},
|
||||
|
||||
_initBinds: function () {
|
||||
this._keyDown = this._onKeyDown.bind(this);
|
||||
$(document).on('keydown', this._keyDown);
|
||||
|
||||
this.listenTo(this.model, 'change:step', this._onChangeStep);
|
||||
this.listenTo(this.model, 'destroy', this._close);
|
||||
this.listenTo(this._editorModel, 'change:edition', this._changeEdition);
|
||||
},
|
||||
|
||||
_changeEdition: function (mdl) {
|
||||
var isEditing = !!mdl.get('edition');
|
||||
this.$el.toggleClass('is-editing', isEditing);
|
||||
},
|
||||
|
||||
_prev: function () {
|
||||
if (this._currentStep() >= 1) {
|
||||
this.model.set('step', this._currentStep() - 1);
|
||||
}
|
||||
},
|
||||
|
||||
_next: function () {
|
||||
if (this._currentStep() <= 3) {
|
||||
this.model.set('step', this._currentStep() + 1);
|
||||
}
|
||||
},
|
||||
|
||||
_currentStep: function () {
|
||||
return this.model.get('step');
|
||||
},
|
||||
|
||||
_onClickNext: function () {
|
||||
this._next();
|
||||
},
|
||||
|
||||
_onChangeStep: function () {
|
||||
var self = this;
|
||||
|
||||
this.$el.removeClass('is-step' + this.model.previous('step'), function () {
|
||||
self.$el.addClass('is-step' + self._currentStep());
|
||||
});
|
||||
|
||||
this.$('.js-step').removeClass('is-step' + this.model.previous('step'), function () {
|
||||
self.$('.js-step').addClass('is-step' + self._currentStep());
|
||||
});
|
||||
},
|
||||
|
||||
_close: function () {
|
||||
this._forget();
|
||||
|
||||
GAPusher({
|
||||
eventName: 'send',
|
||||
hitType: 'event',
|
||||
eventCategory: 'Edit your Map',
|
||||
eventAction: 'click',
|
||||
eventLabel: 'Builder'
|
||||
});
|
||||
|
||||
this.trigger('close', this);
|
||||
},
|
||||
|
||||
_onKeyDown: function (e) {
|
||||
e.stopPropagation();
|
||||
|
||||
if (e.which === LEFT_KEY_CODE) {
|
||||
this._prev();
|
||||
} else if (e.which === RIGHT_KEY_CODE) {
|
||||
this._next();
|
||||
}
|
||||
},
|
||||
|
||||
_forget: function () {
|
||||
this._onboardingNotification.setKey(BUILDER_KEY, true);
|
||||
this._onboardingNotification.save();
|
||||
},
|
||||
|
||||
clean: function () {
|
||||
$(document).off('keydown', this._keyDown);
|
||||
CoreView.prototype.clean.apply(this);
|
||||
}
|
||||
});
|
||||
+83
@@ -0,0 +1,83 @@
|
||||
<div class="BuilderOnboarding-pad"></div>
|
||||
<div class="BuilderOnboarding-pad2"></div>
|
||||
<div class="BuilderOnboarding-contentWrapper is-step0 js-step">
|
||||
<div class="BuilderOnboarding-body">
|
||||
<div class="BuilderOnboarding-header is-step0">
|
||||
<p class="CDB-Text Onboarding-headerTitle"><%- _t('builder-onboarding.title')%></p>
|
||||
<p class="CDB-Text Onboarding-headerText"><%- name %></p>
|
||||
|
||||
<p class="CDB-Text BuilderOnboarding-description">
|
||||
<%- _t('builder-onboarding.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-footer is-step0">
|
||||
<div class="BuilderOnboarding-footerButtons">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--white CDB-Button--big Onboarding-footer--marginRight js-start">
|
||||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('builder-onboarding.take-tour')%></span>
|
||||
</button>
|
||||
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-close track-onboarding--editMap">
|
||||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('builder-onboarding.edit-map')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-step is-step1">
|
||||
<p class="CDB-Text Onboarding-headerTitle">1/4</p>
|
||||
<p class="CDB-Text Onboarding-headerText"><%- _t('builder-onboarding.toolbar.title')%></p>
|
||||
<p class="CDB-Text BuilderOnboarding-description">
|
||||
<%- _t('builder-onboarding.toolbar.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-step is-step2">
|
||||
<p class="CDB-Text Onboarding-headerTitle">2/4</p>
|
||||
<p class="CDB-Text Onboarding-headerText"><%- _t('builder-onboarding.configurator.title')%></p>
|
||||
<p class="CDB-Text BuilderOnboarding-description">
|
||||
<%- _t('builder-onboarding.configurator.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-step is-step3">
|
||||
<p class="CDB-Text Onboarding-headerTitle">3/4</p>
|
||||
<p class="CDB-Text Onboarding-headerText"><%- _t('builder-onboarding.map.title')%></p>
|
||||
<p class="CDB-Text BuilderOnboarding-description">
|
||||
<%- _t('builder-onboarding.map.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-step is-step4">
|
||||
<p class="CDB-Text Onboarding-headerTitle">4/4</p>
|
||||
<p class="CDB-Text Onboarding-headerText"><%- _t('builder-onboarding.widgets.title')%></p>
|
||||
<p class="CDB-Text BuilderOnboarding-description">
|
||||
<%- _t('builder-onboarding.widgets.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-footer is-step1 is-step2 is-step3">
|
||||
<div class="BuilderOnboarding-footerButtons">
|
||||
<button class="CDB-Button CDB-Button--secondary CDB-Button--white CDB-Button--big Onboarding-footer--marginRight js-close">
|
||||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('builder-onboarding.skip')%></span>
|
||||
</button>
|
||||
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-next">
|
||||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('builder-onboarding.next')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-footer is-step4">
|
||||
<div class="BuilderOnboarding-footerButtons">
|
||||
<button class="CDB-Button CDB-Button--primary CDB-Button--big js-close">
|
||||
<span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('builder-onboarding.edit-map')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="BuilderOnboarding-pad3"></div>
|
||||
<div class="BuilderOnboarding-pad4"></div>
|
||||
<div class="BuilderOnboarding-pad5"></div>
|
||||
<div class="BuilderOnboarding-shadow"></div>
|
||||
@@ -0,0 +1,31 @@
|
||||
var BuilderOnboardingView = require('./builder-view');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
var BUILDER_KEY = 'onboarding';
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'onboardings',
|
||||
'userModel',
|
||||
'onboardingNotification',
|
||||
'editorModel'
|
||||
];
|
||||
|
||||
module.exports = (function () {
|
||||
return {
|
||||
init: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
},
|
||||
|
||||
launch: function () {
|
||||
if (!this._onboardingNotification.getKey(BUILDER_KEY)) {
|
||||
this._onboardings.create(function () {
|
||||
return new BuilderOnboardingView({
|
||||
userModel: this._userModel,
|
||||
editorModel: this._editorModel,
|
||||
onboardingNotification: this._onboardingNotification
|
||||
});
|
||||
}.bind(this));
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user