114 lines
2.9 KiB
JavaScript
114 lines
2.9 KiB
JavaScript
|
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
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
});
|