Initial commit

lib/assets/javascripts/builder/components/onboardings/layers/analysis-onboarding/analysis-onboarding-view.js

@@ -0,0 +1,36 @@
+var _ = require('underscore');
+var OnboardingView = require('builder/components/onboardings/generic/generic-onboarding-view');
+var AnalysesService = require('builder/editor/layers/layer-content-views/analyses/analyses-service');
+var template = require('./analysis-onboarding.tpl');
+
+module.exports = OnboardingView.extend({
+  events: OnboardingView.extendEvents({
+    'click .js-add-analysis': '_onAddAnalysisClicked'
+  }),
+
+  initialize: function (opts) {
+    OnboardingView.prototype.initialize.call(this, _.extend(opts, {
+      template: template,
+      numberOfSteps: 0,
+      modifier: '--analysis'
+    }));
+  },
+
+  _onAddAnalysisClicked: function () {
+    this._forget();
+
+    this.clean();
+
+    AnalysesService.addAnalysis();
+  },
+
+  _onChangeStep: function () {
+    OnboardingView.prototype._onChangeStep.call(this);
+
+    var step = this.model.get('step');
+
+    if (step === 0) {
+      this._setMiddlePad('.js-editorPanel');
+    }
+  }
+});

lib/assets/javascripts/builder/components/onboardings/layers/analysis-onboarding/analysis-onboarding.tpl

@@ -0,0 +1,46 @@
+<div class="LayerOnboarding-toolbarOverlay"></div>
+
+<div class="LayerOnboarding-pads LayerOnboarding-pads--left">
+  <div class="LayerOnboarding-padTop"></div>
+  <div class="LayerOnboarding-padMiddle js-highlight"></div>
+</div>
+
+<div class="LayerOnboarding-contentWrapper LayerOnboarding-contentWrapper--analysis is-step0 js-step">
+  <div class="LayerOnboarding-contentBody LayerOnboarding-contentBody--analysis is-step0 js-step">
+    <div class="Onboarding-body">
+      <p class="CDB-Text LayerOnboarding-headerTitle"><%- _t('analysis-onboarding.title')%></p>
+
+      <p class="CDB-Text Onboarding-headerDescription"><%- _t('analysis-onboarding.description')%></p>
+
+      <ul class="Onboarding-list">
+        <li class="Onboarding-listItem">
+          <p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item1')%></p>
+        </li>
+
+        <li class="Onboarding-listItem">
+          <p class="CDB-Text LayerOnboarding-description"><%= _t('analysis-onboarding.description-list.item2')%></p>
+        </li>
+
+        <li class="Onboarding-listItem">
+          <p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item3')%></p>
+        </li>
+
+        <li class="Onboarding-listItem">
+          <p class="CDB-Text LayerOnboarding-description"><%- _t('analysis-onboarding.description-list.item4')%></p>
+        </li>
+      </ul>
+    </div>
+
+    <div class="LayerOnboarding-footer">
+      <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('analysis-onboarding.done')%></span>
+        </button>
+
+        <button class="CDB-Button CDB-Button--primary CDB-Button--big js-add-analysis">
+          <span class="CDB-Button-Text CDB-Text u-upperCase is-semibold CDB-Size-medium"><%- _t('analysis-onboarding.add-analysis')%></span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>

lib/assets/javascripts/builder/components/onboardings/layers/data-onboarding/data-onboarding-view.js

@@ -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
+    };
+  }
+});

lib/assets/javascripts/builder/components/onboardings/layers/data-onboarding/data-onboarding.tpl

@@ -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>

lib/assets/javascripts/builder/components/onboardings/layers/style-onboarding/style-onboarding-view.js

@@ -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
+      }
+    };
+  }
+});

lib/assets/javascripts/builder/components/onboardings/layers/style-onboarding/style-onboarding.tpl

@@ -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>

lib/assets/javascripts/builder/components/onboardings/layers/style-onboarding/style-points-onboarding.tpl

@@ -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>