refactor(cxl-ui): cxl-marketing-nav support `vaadin-tab.current-menu-…

…item`, fix #42 Close #45
conversionxl · Apr 12, 2020 · e830f1d · e830f1d
1 parent 7e99744
commit e830f1d
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js
@@ -183,6 +183,7 @@ export class CXLMarketingNavElement extends LitElement {
  updated(changedProps) {
  if (changedProps.has('contextMenuItems')) {
  this._updatedContextMenuItems();
+ this._updatedSelectCurrentTab()
  }
 
  if (changedProps.has('wide')) {
@@ -222,6 +223,20 @@ export class CXLMarketingNavElement extends LitElement {
  return contextMenuItems;
  }
 
+ /**
+ * The can't have a default selection. WordPress provides a `current-menu-item` class for the current item
+ * This sets `selected` attribute for with that tab index when menu items are ready. Happens once.
+ * @private
+ */
+ _updatedSelectCurrentTab() {
+ const currentTab = this.querySelector('.current-menu-item');
+ if (currentTab && currentTab.id) {
+ const tabsContainer = currentTab.parentElement;
+ const idx = tabsContainer.items.findIndex(i => i.id === currentTab.id);
+ tabsContainer.selected = idx;
+ }
+ }
+
  /**
  * Populate children `<vaadin-context-menu>` elements.
  *

diff --git a/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js b/packages/storybook/cxl-ui/cxl-marketing-nav.stories.js
@@ -66,7 +66,7 @@ export const CxlMarketingNav = () => {
  ><iron-icon icon="cxl:logo" style="width: var(--lumo-icon-size-xl, 48px);"></iron-icon
  ></a>
  </vaadin-tab>
- <vaadin-tab class="menu-item" theme="cxl-marketing-nav"
+ <vaadin-tab id="menu-item-94" class="current-menu-item menu-item menu-item-94" theme="cxl-marketing-nav"
  ><a href="https://conversionxl.com/institute/">Institute</a></vaadin-tab
  >
  <vaadin-tab