Initial commit
This commit is contained in:
zhongjin
+55
@@ -0,0 +1,55 @@
|
||||
var _ = require('underscore');
|
||||
var $ = require('jquery');
|
||||
var OnboardingView = require('builder/components/onboardings/generic/generic-onboarding-view');
|
||||
var template = require('./data-onboarding.tpl');
|
||||
|
||||
module.exports = OnboardingView.extend({
|
||||
initialize: function (opts) {
|
||||
OnboardingView.prototype.initialize.call(this, _.extend(opts, {
|
||||
template: template,
|
||||
numberOfSteps: 4,
|
||||
modifier: '--data'
|
||||
}));
|
||||
},
|
||||
|
||||
_onChangeStep: function () {
|
||||
OnboardingView.prototype._onChangeStep.call(this);
|
||||
|
||||
var step = this.model.get('step');
|
||||
|
||||
if (step === 0) {
|
||||
this._setMiddlePad('.js-editorPanel');
|
||||
} else if (step === 1) {
|
||||
this._setMiddlePad('.js-editorPanelHeader', {top: 16, right: 24, left: 24});
|
||||
} else if (step === 2) {
|
||||
this._setMiddlePad('.js-editorPanelContent', {top: 8, right: 24, left: 24, bottom: -$('.js-optionsBar').outerHeight()});
|
||||
} else if (step === 3) {
|
||||
this._setMiddlePad('.js-optionsBar', null, {top: -190});
|
||||
} else if (step === 4) {
|
||||
var featurePosition = this._getFeatureEditionPosition();
|
||||
this._setMiddlePad(featurePosition, {top: 8, right: 8, bottom: 8, left: 8}, {top: -270, left: -330});
|
||||
}
|
||||
},
|
||||
|
||||
_getFeatureEditionPosition: function () {
|
||||
var $switch = $('.js-mapTableView').first();
|
||||
var $featureEdition = $('.js-newGeometryView').first();
|
||||
var leftOffset = Math.min($switch.length > 0 ? $switch.offset().left : Number.MAX_VALUE, $featureEdition.length > 0 ? $featureEdition.offset().left : Number.MAX_VALUE);
|
||||
var topOffset = Math.min($switch.length > 0 ? $switch.offset().top : Number.MAX_VALUE, $featureEdition.length > 0 ? $featureEdition.offset().top : Number.MAX_VALUE);
|
||||
var rightOffset = Math.max(
|
||||
$switch.length > 0 ? $switch.offset().left + $switch.outerWidth() : Number.MIN_VALUE,
|
||||
$featureEdition.length > 0 ? $featureEdition.offset().left + $featureEdition.outerWidth() : Number.MIN_VALUE
|
||||
);
|
||||
var bottomOffset = Math.max(
|
||||
$switch.length > 0 ? $switch.offset().top + $switch.outerHeight() : Number.MIN_VALUE,
|
||||
$featureEdition.length > 0 ? $featureEdition.offset().top + $featureEdition.outerHeight() : Number.MIN_VALUE
|
||||
);
|
||||
|
||||
return {
|
||||
left: leftOffset,
|
||||
top: topOffset,
|
||||
width: rightOffset - leftOffset,
|
||||
height: bottomOffset - topOffset
|
||||
};
|
||||
}
|
||||
});
|
||||
+84
@@ -0,0 +1,84 @@
|
||||
<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/4</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.layer-options.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('data-onboarding.layer-options.description')%>
|
||||
</p>
|
||||
</div>
|
||||
<div class="LayerOnboarding-step is-step2">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">2/4</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.data-tab.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('data-onboarding.data-tab.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-step is-step3">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">3/4</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText"><%- _t('data-onboarding.sql-editor.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%- _t('data-onboarding.sql-editor.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-step is-step4">
|
||||
<p class="CDB-Text LayerOnboarding-headerTitle">4/4</p>
|
||||
<p class="CDB-Text LayerOnboarding-headerText is-step4"><%- _t('data-onboarding.add-geometry.title')%></p>
|
||||
<p class="CDB-Text LayerOnboarding-description is-step4">
|
||||
<%- _t('data-onboarding.add-geometry.description')%>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step1 is-step2 is-step3">
|
||||
<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('data-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('data-onboarding.next')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="LayerOnboarding-footer is-step4">
|
||||
<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('data-onboarding.add-geometry.edit-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('data-onboarding.title')%></p>
|
||||
|
||||
<p class="CDB-Text LayerOnboarding-description">
|
||||
<%= _t('data-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('data-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('data-onboarding.edit-layer')%></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user