Initial commit

lib/assets/javascripts/dashboard/components/dashboard-header/breadcrumbs/dropdown-link.tpl

@@ -0,0 +1 @@
+<button class="Header-navigationBreadcrumbLink <%- dropdownEnabled ? "DropdownLink DropdownLink--white" : "is-disabled" %>"><%- title %></button>

lib/assets/javascripts/dashboard/components/dashboard-header/breadcrumbs/dropdown-view.js

@@ -0,0 +1,68 @@
+const $ = require('jquery');
+const checkAndBuildOpts = require('builder/helpers/required-opts');
+const navigateThroughRouter = require('builder/helpers/navigate-through-router');
+const AdminDropdownMenu = require('dashboard/components/dropdown/dropdown-admin-view');
+
+const REQUIRED_OPTS = [
+  'viewModel'
+];
+
+/**
+ * The content of the dropdown menu opened by the link at the end of the breadcrumbs menu, e.g.
+ *   username > [Maps]
+ *          ______/\____
+ *         |            |
+ *         |    this    |
+ *         |____________|
+ */
+
+module.exports = AdminDropdownMenu.extend({
+  className: 'Dropdown BreadcrumbsDropdown',
+
+  events: {
+    'click a': '_navigateToLinksHref'
+  },
+
+  initialize: function (options) {
+    checkAndBuildOpts(options, REQUIRED_OPTS, this);
+    AdminDropdownMenu.prototype.initialize.apply(this, arguments);
+  },
+
+  render: function () {
+    var dashboardUrl = this.model.viewUrl().dashboard();
+    var datasetsUrl = dashboardUrl.datasets();
+    var deepInsightsUrl = dashboardUrl.deepInsights();
+    var mapsUrl = dashboardUrl.maps();
+
+    this.$el.html(this.template({
+      avatarUrl: this.model.get('avatar_url'),
+      userName: this.model.get('username'),
+      mapsUrl: mapsUrl,
+      datasetsUrl: datasetsUrl,
+      deepInsightsUrl: deepInsightsUrl,
+      lockedDatasetsUrl: datasetsUrl.lockedItems(),
+      lockedMapsUrl: mapsUrl.lockedItems(),
+      isDeepInsights: this._viewModel.isDisplayingDeepInsights(),
+      isDatasets: this._viewModel.isDisplayingDatasets(),
+      isMaps: this._viewModel.isDisplayingMaps(),
+      isLocked: this._viewModel.isDisplayingLockedItems()
+    }));
+
+    // Necessary to hide dialog on click outside popup, for example.
+    // TODO: Handle this
+    // cdb.god.bind('closeDialogs', this.hide, this);
+
+    // TODO: taken from existing code, how should dropdowns really be added to the DOM?
+    $('body').append(this.el);
+
+    return this;
+  },
+
+  _navigateToLinksHref: function () {
+    this.hide(); // Hide must be called before routing for proper deconstruct of dropdown
+
+    if (this.options.router) {
+      navigateThroughRouter.apply(this, arguments);
+    }
+  }
+});

lib/assets/javascripts/dashboard/components/dashboard-header/breadcrumbs/dropdown.tpl

@@ -0,0 +1,20 @@
+<ul class="BreadcrumbsDropdown-list CDB-Text CDB-Size-medium">
+  <li class="BreadcrumbsDropdown-listItem">
+    <span class="BreadcrumbsDropdown-icon u-rSpace--xl">
+      <img class="UserAvatar-img UserAvatar-img--small" src="<%- avatarUrl %>" title="<%- userName %>" alt="<%- userName %>" />
+    </span>
+    <nav class="BreadcrumbsDropdown-options">
+      <a href="<%- mapsUrl %>" class="BreadcrumbsDropdown-optionsItem <%- isMaps && !isDeepInsights && !isLocked ? 'is-selected' : '' %>">Your maps</a>
+      <a href="<%- datasetsUrl %>" class="BreadcrumbsDropdown-optionsItem has-margin <%- isDatasets && !isLocked ? 'is-selected' : '' %>">Your datasets</a>
+    </nav>
+  </li>
+  <li class="BreadcrumbsDropdown-listItem is-dark u-flex">
+    <span class="BreadcrumbsDropdown-lockIcon BreadcrumbsDropdown-icon u-flex u-alignCenter u-justifyCenter u-rSpace--xl">
+      <i class="CDB-IconFont CDB-IconFont-lock"></i>
+    </span>
+    <nav class="BreadcrumbsDropdown-options">
+      <a href="<%- lockedMapsUrl %>" class="BreadcrumbsDropdown-optionsItem <%- isMaps && isLocked ? 'is-selected' : '' %>">Your locked maps</a>
+      <a href="<%- lockedDatasetsUrl %>" class="BreadcrumbsDropdown-optionsItem has-margin <%- isDatasets && isLocked ? 'is-selected' : '' %>">Your locked datasets</a>
+    </nav>
+  </li>
+</ul>