Initial commit

lib/assets/javascripts/builder/components/modals/privacy-warning/privacy-warning-view.js

@@ -0,0 +1,60 @@
+var ConfirmationView = require('builder/components/modals/confirmation/modal-confirmation-view');
+var IconView = require('builder/components/icon/icon-view');
+var template = require('./privacy-warning.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'modalModel',
+  'privacyType'
+];
+
+/**
+ *  Privacy Warning modal dialog
+ */
+module.exports = ConfirmationView.extend({
+  className: 'Dialog-content',
+
+  events: {
+    'click .js-confirm': '_onConfirm',
+    'click .js-cancel': '_onDismiss'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+
+    if (this.options.onConfirm) {
+      this._onConfirmCallback = this.options.onConfirm;
+    }
+
+    if (this.options.onDismiss) {
+      this._onDismissCallback = this.options.onDismiss;
+    }
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template({
+      type: this.options.type || 'visualization',
+      selectedPrivacyType: this._privacyType
+    }));
+
+    var warningIcon = new IconView({
+      placeholder: this.$el.find('.js-icon-warning'),
+      icon: 'warning'
+    });
+    warningIcon.render();
+    this.addView(warningIcon);
+
+    return this;
+  },
+
+  _onConfirm: function () {
+    this._modalModel.destroy();
+    this._onConfirmCallback && this._onConfirmCallback();
+  },
+
+  _onDismiss: function () {
+    this._modalModel.destroy();
+    this._onDismissCallback && this._onDismissCallback();
+  }
+});

lib/assets/javascripts/builder/components/modals/privacy-warning/privacy-warning.tpl

@@ -0,0 +1,31 @@
+<div class="u-flex u-justifyCenter">
+  <div class="Modal-inner Modal-inner--grid u-flex u-justifyCenter">
+    <div class="Modal-icon">
+      <div class="Modal-icon--svg js-icon-warning"></div>
+    </div>
+    <div>
+      <h2 class="CDB-Text CDB-Size-huge is-light u-bSpace--xl">
+        <%- _t('components.modals.privacy-warning.title.' + type + '.' + selectedPrivacyType) %>
+      </h2>
+      <p class="CDB-Text CDB-Size-large u-altTextColor">
+          <%- _t('components.modals.privacy-warning.description.' + selectedPrivacyType) %>
+      </p>
+      <ul class="Modal-listActions u-flex u-alignCenter">
+        <li class="Modal-listActionsitem">
+          <button class="CDB-Button CDB-Button--secondary CDB-Button--big js-cancel">
+            <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
+                <%- _t('components.modals.privacy-warning.cancel') %>
+            </span>
+          </button>
+        </li>
+        <li class="Modal-listActionsitem">
+          <button class="CDB-Button CDB-Button--primary CDB-Button--big js-confirm">
+            <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">
+                <%- _t('components.modals.privacy-warning.confirm') %>
+            </span>
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>