Initial commit
This commit is contained in:
zhongjin
+113
@@ -0,0 +1,113 @@
|
||||
var _ = require('underscore');
|
||||
var $ = require('jquery');
|
||||
var OnboardingView = require('builder/components/onboardings/generic/generic-onboarding-view');
|
||||
var defaultTemplate = require('./style-onboarding.tpl');
|
||||
var pointsTemplate = require('./style-points-onboarding.tpl');
|
||||
var checkAndBuildOpts = require('builder/helpers/required-opts');
|
||||
|
||||
var REQUIRED_OPTS = [
|
||||
'geom'
|
||||
];
|
||||
|
||||
module.exports = OnboardingView.extend({
|
||||
module: 'components/onboardings/layers/style-onboarding/style-onboarding-view',
|
||||
|
||||
initialize: function (opts) {
|
||||
checkAndBuildOpts(opts, REQUIRED_OPTS, this);
|
||||
|
||||
var template = defaultTemplate;
|
||||
var modifier = '--style';
|
||||
var steps = 2;
|
||||
|
||||
if (this._geom === 'point') {
|
||||
template = pointsTemplate;
|
||||
steps = 3;
|
||||
}
|
||||
|
||||
OnboardingView.prototype.initialize.call(this, _.extend(opts, {
|
||||
template: template,
|
||||
numberOfSteps: steps,
|
||||
modifier: modifier
|
||||
}));
|
||||
},
|
||||
|
||||
_onChangeStep: function () {
|
||||
OnboardingView.prototype._onChangeStep.call(this);
|
||||
|
||||
var step = this.model.get('step');
|
||||
|
||||
switch (step) {
|
||||
case 0:
|
||||
this._setMiddlePad('.js-editorPanel');
|
||||
break;
|
||||
case 1:
|
||||
this._setStepOne();
|
||||
break;
|
||||
case 2:
|
||||
this._setStepTwo();
|
||||
break;
|
||||
case 3:
|
||||
this._highlightOptionsBar();
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
_setStepOne: function () {
|
||||
var $noGeom = $('.js-styleNoGeom');
|
||||
|
||||
if ($noGeom.length > 0) {
|
||||
this._setMiddlePad('.js-styleNoGeom', {top: 8, right: 24, left: 24, bottom: 8});
|
||||
} else if (this._numberOfSteps === 3) {
|
||||
var aggregationInfo = this._getAggregationPositionAndPadding();
|
||||
this._setMiddlePad(aggregationInfo.position, aggregationInfo.padding);
|
||||
} else {
|
||||
this._highlightStyleProperties();
|
||||
}
|
||||
},
|
||||
|
||||
_setStepTwo: function () {
|
||||
if (this._numberOfSteps === 2) {
|
||||
this._highlightOptionsBar();
|
||||
} else {
|
||||
this._highlightStyleProperties();
|
||||
}
|
||||
},
|
||||
|
||||
_highlightStyleProperties: function () {
|
||||
this._setMiddlePad('.js-styleProperties', {top: 8, right: 24, left: 24, bottom: 8});
|
||||
},
|
||||
|
||||
_highlightOptionsBar: function () {
|
||||
this._setMiddlePad('.js-optionsBar', null, {top: -190});
|
||||
},
|
||||
|
||||
_getAggregationPositionAndPadding: function () {
|
||||
var $aggregationTypes = $('.js-aggregationTypes');
|
||||
var $aggregationOptions = $('.js-aggregationOptions');
|
||||
var left = $aggregationTypes.offset().left;
|
||||
var top = $aggregationTypes.offset().top;
|
||||
var width = $aggregationTypes.outerWidth();
|
||||
var height = $aggregationTypes.outerHeight();
|
||||
var bottomPadding = 0;
|
||||
|
||||
if ($aggregationOptions.length > 0) {
|
||||
height += $aggregationOptions.outerHeight();
|
||||
bottomPadding = 8;
|
||||
}
|
||||
|
||||
return {
|
||||
position: {
|
||||
top: top,
|
||||
left: left,
|
||||
width: width,
|
||||
height: height
|
||||
},
|
||||
padding: {
|
||||
top: 8,
|
||||
right: 24,
|
||||
left: 24,
|
||||
bottom: bottomPadding
|
||||
}
|
||||
};
|
||||
}
|
||||
});
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
<div class="LayerOnboarding-toolbarOverlay"></div>
|
||||
|
||||
<div class="LayerOnboarding-pads LayerOnboarding-pads--left">
|
||||
<div class="LayerOnboarding-padTop"></div>
|
||||
<div class="LayerOnboarding-padMiddle js-highlight">
|
||||
<div class="LayerOnboarding-body is-step0 js-step">
|
||||
<div class="LayerOnboarding-step is-step1">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">1/2</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('style-onboarding.style.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description LayerOnboarding-description--style">
|
||||
<%- _t('style-onboarding.style.short-description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-step is-step2">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">2/2</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('style-onboarding.cartocss.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('style-onboarding.cartocss.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step1">
|
||||
<div class="LayerOnboarding-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('style-onboarding.exit')%></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('style-onboarding.next')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step2">
|
||||
<div class="LayerOnboarding-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('style-onboarding.style-layer')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="LayerOnboarding-padBottom"></div>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-contentWrapper is-step0 js-step">
|
||||
<div class="LayerOnboarding-contentBody is-step0 js-step">
|
||||
<div class="LayerOnboarding-header is-step0">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle"><%- _t('style-onboarding.title')%></p>
|
||||
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('style-onboarding.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step0">
|
||||
<div class="LayerOnboarding-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('style-onboarding.take-tour')%></span>
|
||||
</button>
|
||||
|
||||
<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('style-onboarding.style-layer')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
+76
@@ -0,0 +1,76 @@
|
||||
<div class="LayerOnboarding-toolbarOverlay"></div>
|
||||
|
||||
<div class="LayerOnboarding-pads LayerOnboarding-pads--left">
|
||||
<div class="LayerOnboarding-padTop"></div>
|
||||
<div class="LayerOnboarding-padMiddle js-highlight">
|
||||
<div class="LayerOnboarding-body is-step0 js-step">
|
||||
<div class="LayerOnboarding-step is-step1">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">1/3</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('style-onboarding.aggregation.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('style-onboarding.aggregation.description')%>
|
||||
</p>
|
||||
</div>
|
||||
<div class="LayerOnboarding-step is-step2">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">2/3</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('style-onboarding.style.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description LayerOnboarding-description--style">
|
||||
<%- _t('style-onboarding.style.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-step is-step3">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">3/3</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('style-onboarding.cartocss.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('style-onboarding.cartocss.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step1 is-step2">
|
||||
<div class="LayerOnboarding-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('style-onboarding.exit')%></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('style-onboarding.next')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step3">
|
||||
<div class="LayerOnboarding-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('style-onboarding.style-layer')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="LayerOnboarding-padBottom"></div>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-contentWrapper is-step0 js-step">
|
||||
<div class="LayerOnboarding-contentBody is-step0 js-step">
|
||||
<div class="LayerOnboarding-header is-step0">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle"><%- _t('style-onboarding.title')%></p>
|
||||
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('style-onboarding.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step0">
|
||||
<div class="LayerOnboarding-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('style-onboarding.take-tour')%></span>
|
||||
</button>
|
||||
|
||||
<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('style-onboarding.style-layer')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user