station 0.0.0 → 0.0.100

data/lib/nexmo_developer/app/webpacker/javascript/components/search/NDPArticle.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class='Nxd-search__result'>
+    <a class='Nxd-search__result__link' v-bind:href='url'>
+      <div>
+        <h6 class='Vlt-blue-dark'>
+          {{ hit.title }}
+          <small v-if="showHeading"> &gt; {{ hit.heading }}</small>
+        </h6>
+
+        <p class='Nxd-search__result__desc'>{{ description }}</p>
+        <p class='Nxd-search__result__highlight' v-html='snippet'></p>
+        <span class='Vlt-badge Vlt-badge--grey Nxd-search__badge'>{{ badge }}</span>
+      </div>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: ['hit'],
+  computed: {
+    badge: function() {
+      return this.hit.product;
+    },
+    description: function() {
+      return this.hit.description ? this.hit.description.substring(0, 150) : '';
+    },
+    showHeading: function() {
+      return this.hit.heading && this.hit.heading == this.hit.title;
+    },
+    snippet: function() {
+      return `...${this.hit._snippetResult.body.value}...`;
+    },
+    url: function() {
+      return `${this.hit.path}#${this.hit.anchor}`;
+    }
+  },
+}
+</script>

data/lib/nexmo_developer/app/webpacker/javascript/components/search/Search.vue

@@ -0,0 +1,182 @@
+<template>
+  <div>
+    <div>
+      <div class="Vlt-composite">
+        <div class="Vlt-composite__prepend Vlt-composite__prepend--icon">
+          <svg><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-search"/></svg>
+        </div>
+        <div class="Vlt-input Vlt-input--round">
+          <input
+            v-model="query"
+            name="query"
+            placeholder="Search"
+            id="searchbox-test"
+            type="text"
+            autoComplete="off"
+            v-on:keydown.esc="onEscDownHandler"
+            v-on:input="onInputHandler"
+            ></input>
+        </div>
+      </div>
+    </div>
+
+    <svg v-show="query" class="Nxd-search__clear"><use xlink:href="/symbol/volta-icons.svg#Vlt-icon-cross"/></svg>
+
+    <div v-show="showResults" class="Nxd-search">
+      <div class="Nxd-search__wrapper">
+        <div v-show="loading" class="spinner">
+          <i class="icon icon-cog"></i>
+        </div>
+        <div v-show="!loading" class="Nxd-search__wrapper">
+          <div class="Nxd-search__results" v-for="result in results" v-bind:key="result.index">
+            <h3 class="Nx-search__title">
+              {{ resultTitle(result.index) }}
+            </h3>
+            <div v-if="result.hits.length > 0" >
+              <div v-if="isZendeskArticle(result)">
+                <ZendeskArticle v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
+              </div>
+              <div v-else-if="isNDPArticle(result)">
+                <NDPArticle v-for="hit in result.hits" v-bind:hit="hit" v-bind:key="hitKey(result, hit)"/>
+              </div>
+            </div>
+            <div v-else>
+              <p class="Nxd-search--no-results"><i>No results</i></p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import algoliasearch from 'algoliasearch'
+import debounce from 'lodash/debounce'
+import NDPArticle from './NDPArticle.vue';
+import ZendeskArticle from './ZendeskArticle.vue';
+
+export default {
+  data: function() {
+    return {
+      analyticsTriggered: false,
+      client: undefined,
+      expanded: false,
+      loading: false,
+      query: '',
+      results: [],
+      analyticsStrongIndicationOfReadingTimer: undefined,
+    }
+  },
+  created: function() {
+    this.client = algoliasearch(
+      document.querySelector('meta[name=algolia_application_id]').getAttribute('content'),
+      document.querySelector('meta[name=algolia_search_key]').getAttribute('content')
+    );
+  },
+  mounted: function() {
+    if (document.querySelector('.Nxd-template')) {
+      document.querySelector('.Nxd-template').addEventListener('click', this.onClickOutside.bind(this));
+    }
+  },
+  onDestroy: function() {
+    if (document.querySelector('.Nxd-template')) {
+      document.querySelector('.Nxd-template').removeEventListener('click', this.onClickOutside.bind(this));
+    }
+  },
+  computed: {
+    showResults: function() {
+      return this.query != '';
+    }
+  },
+  methods: {
+    resultTitle: function(name) {
+      if (name == 'zendesk_nexmo_articles') {
+        return 'Knowledgebase';
+      } else if (name.includes('nexmo_developer')) {
+        return 'Nexmo Developer';
+      }
+    },
+    isZendeskArticle: function(result) {
+      return result.index == 'zendesk_nexmo_articles';
+    },
+    isNDPArticle: function(result) {
+      return result.index.includes('nexmo_developer');
+    },
+    hitKey: function(result, hit) {
+      return result.index + hit.objectID;
+    },
+    onClickOutside: function(event) {
+      if (this.showResults) {
+        this.reset();
+      }
+      if (this.expanded) {
+        this.expanded = false;
+      }
+    },
+    onEscDownHandler: function(event) {
+      if (!this.analyticsTriggered && this.query !== '') {
+        this.triggerAnalyticalSearch();
+      }
+      this.reset();
+    },
+    reset: function() {
+      this.resetAnalyticsListeners();
+      this.query = '';
+      this.results = [];
+      this.loading = false;
+    },
+    onInputHandler: function(event) {
+      event.stopPropagation();
+      if (this.query === '') {
+        this.reset();
+      } else {
+        debounce(this.handleSearch.bind(this), 250)(event);
+      }
+    },
+    handleSearch: function(event) {
+      this.loading = this.query === '';
+      this.analyticsTriggered = false;
+      this.performSearch();
+
+      this.resetAnalyticsListeners();
+      this.analyticsStrongIndicationOfReadingTimer = setTimeout(this.triggerAnalyticalSearch, 2000);
+      window.addEventListener('mousemove', this.triggerAnalyticalSearch);
+    },
+    performSearch: function(analytics = false) {
+      const parameters = Array.from(document.querySelectorAll('meta[name=algolia_index]')).map((element) => {
+        return {
+          indexName: element.getAttribute('content'),
+          query: this.query,
+          params: {
+            analytics: analytics,
+            hitsPerPage: analytics ? 1 : 4
+          }
+        }
+      })
+
+      const searchPromise = this.client.search(parameters)
+
+      if (!analytics) {
+        searchPromise.then((response) => {
+          this.results = response['results'];
+          this.loading = false;
+        })
+      }
+    },
+    resetAnalyticsListeners: function() {
+      clearTimeout(this.analyticsStrongIndicationOfReadingTimer);
+      window.removeEventListener('mousemove', this.triggerAnalyticalSearch);
+    },
+    triggerAnalyticalSearch: function() {
+      this.performSearch(true);
+      this.analyticsTriggered = true;
+      this.resetAnalyticsListeners();
+    }
+  },
+  components: {
+    ZendeskArticle, NDPArticle
+  }
+}
+</script>
+<style scoped>
+</style>

data/lib/nexmo_developer/app/webpacker/javascript/components/search/ZendeskArticle.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class='Nxd-search__result'>
+    <a class='Nxd-search__result__link' v-bind:href='url' target='_blank'>
+      <div>
+        <h6 class='Vlt-blue-dark'>{{ title }}</h6>
+        <p class='Nxd-search__result__highlight' v-html='snippet'></p>
+        <span class='Vlt-badge Vlt-badge--grey Nxd-search__badge'>{{ badge }}</span>
+      </div>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: ['hit'],
+  computed: {
+    badge: function() {
+      return this.hit.section.full_path;
+    },
+    snippet: function() {
+      return `...${this.hit._snippetResult.body_safe.value}...`;
+    },
+    title: function() {
+      return this.hit.title;
+    },
+    url: function() {
+      return `https://help.nexmo.com/hc/en-us/articles/${this.hit.id}`;
+    },
+  }
+}
+</script>

data/lib/nexmo_developer/app/webpacker/javascript/format/index.js

@@ -0,0 +1,36 @@
+export default class Format {
+  constructor() {
+    this.formatSelector = $('.js-format-selector')[0]
+    if (this.formatSelector) {
+      this.formatChanged(this.formatSelector.value, false)
+      $(this.formatSelector).change((event) => this.formatChanged(event.target.value))
+
+      this.restoreFormat()
+    }
+  }
+
+  formatChanged(format, persist = true) {
+    $('.js-format').hide()
+    $(`.js-format[data-format='${format}']`).show()
+
+    if (persist) {
+      this.persistFormat(format)
+    }
+  }
+
+  persistFormat(format) {
+    if (window.localStorage) {
+      window.localStorage.setItem('format', format)
+    }
+  }
+
+  restoreFormat() {
+    if (window.localStorage) {
+      const format = window.localStorage.getItem('format')
+      if (format) {
+        $(this.formatSelector).val(format)
+        this.formatChanged(format, false)
+      }
+    }
+  }
+}

data/lib/nexmo_developer/app/webpacker/javascript/github_cards/index.js

@@ -0,0 +1,16 @@
+import 'whatwg-fetch'
+
+export default () => {
+  $('[data-github]').each((index, element) => {
+    let repo = $(element).data('github');
+
+    fetch('https://api.github.com/repos/' + repo)
+    .then(function (response) {
+      return response.json();
+    })
+    .then((response) => {
+      $(element).find('[data-forks]').text(response.forks);
+      $(element).find('[data-stars]').text(response.stargazers_count);
+    });
+  });
+}

data/lib/nexmo_developer/app/webpacker/javascript/locale_switcher/index.js

@@ -0,0 +1,40 @@
+import Rails from '@rails/ujs';
+
+export default class LocaleSwitcher {
+  constructor() {
+    this.switcher = document.getElementById('locale-switcher');
+    if (this.switcher) {
+      this.setupEventListeners();
+    }
+  }
+
+  setupEventListeners() {
+    const self = this;
+
+    window.addEventListener('load', function() {
+      let dropdownBtn = self.switcher.querySelector('.Nxd-locale');
+      let dropdownOptions = self.switcher.querySelectorAll('.Vlt-dropdown__link');
+      let pannel = self.switcher.querySelector('.Vlt-dropdown__panel');
+
+      dropdownOptions.forEach(function(option) {
+        option.addEventListener("click", function(event) {
+          event.stopPropagation();
+
+          dropdownBtn.innerHTML = option.innerHTML;
+
+          pannel.hidden = true;
+          self.localeChangeHandler(option.dataset.locale);
+        });
+      });
+    });
+  }
+
+  localeChangeHandler(locale) {
+    Rails.ajax({
+      url: "/set_user_locale",
+      type: "PUT",
+      dataType: 'json',
+      data: `preferred_locale=${locale}`
+    })
+  }
+}

data/lib/nexmo_developer/app/webpacker/javascript/notices/index.js

@@ -0,0 +1,52 @@
+export default () => {
+  const noticeCloseComplete = function(notice) {
+    notice.remove()
+    removeNoticesIfEmpty()
+  }
+
+  const noticeKey = function (notice) {
+    const id = notice.data('notice-id')
+    return `notice-dismissed(id:${id})`
+  }
+
+  const isDismissible = function (notice) {
+    return notice.data('notice-dismissible')
+  }
+
+  const bootstrap = function() {
+    $(document).on('click', '.notice a[data-close]', function(event) {
+      const notice = $(this).parents('.notice')
+      localStorage.setItem(noticeKey(notice), true)
+
+      TweenLite.to(notice, 0.6, {
+        scale: 0,
+        height: 0,
+        transformOrigin: "center top",
+        ease: Power2.easeIn,
+        onComplete: () => noticeCloseComplete(notice)
+      });
+    });
+  }
+
+  const removeNoticesIfEmpty = function() {
+    if ($('.notices .notice').length === 0) {
+      $('.notices').remove()
+    }
+  }
+
+  const clearRead = function() {
+    $('.notices .notice').each(function() {
+      const notice = $(this)
+      if(isDismissible(notice)) { return }
+      if (localStorage.getItem(noticeKey(notice))) {
+        $(this).remove()
+      }
+    })
+    removeNoticesIfEmpty()
+  }
+
+  $(document).ready(function() {
+    bootstrap()
+    clearRead()
+  });
+}

data/lib/nexmo_developer/app/webpacker/javascript/scroll/index.js

@@ -0,0 +1,25 @@
+export default () => {
+  $(document).ready(function(){
+    const $body = $('.Vlt-main');
+    const nav = $('.Nxd-header');
+    const codeNav = $('.Nxd-api__code__header');
+
+    $body.on('scroll', function(){
+      var scrollTop = $body.scrollTop();
+
+      //navigation
+      if (scrollTop > 50) {
+        nav.addClass('Nxd-scroll-minify');
+      } else {
+        nav.removeClass('Nxd-scroll-minify');
+      }
+
+      //api code
+      if (scrollTop > 70 && codeNav.length > 0) {
+        codeNav.addClass('Nxd-api__code__header--sticky');
+      } else if(codeNav.length > 0) {
+        codeNav.removeClass('Nxd-api__code__header--sticky');
+      }
+    });
+  })
+}

data/lib/nexmo_developer/app/webpacker/javascript/sidenav/index.js

@@ -0,0 +1,251 @@
+class Menu {
+  constructor(domNode, parent) {
+    this.domNode = domNode;
+    this.parent = parent;
+    this.items = [];
+
+    this.firstItem = null;
+    this.lastItem = null;
+
+    this.buildItems();
+  }
+
+  buildItems() {
+    Array.from(this.domNode.children).forEach((child) => {
+      if (child.children.length > 0) {
+        this.items.push(new SidenavItem(child.querySelector('a.Vlt-sidemenu__trigger, a.Vlt-sidemenu__link, .Vlt-sidemenu__title'), this.parent));
+      }
+    });
+    this.firstItem = this.items[0];
+    this.lastItem = this.items[this.items.length - 1];
+  }
+
+  setFocusToNextItem(current) {
+    let node = null;
+
+    if (current === this.lastItem) {
+      node = this.firstItem.domNode;
+    }
+    else {
+      node = this.items[this.items.indexOf(current) + 1].domNode;
+    }
+    node.tabIndex = 0;
+    node.focus();
+  }
+
+  setFocusToPreviousItem(item) {
+    if (item === this.firstItem) {
+      this.lastItem.domNode.focus();
+    }
+    else {
+      this.items[this.items.indexOf(item) - 1].domNode.focus();
+    }
+  }
+
+  setFocusToFirstItem() {
+    this.firstItem.domNode.focus();
+  }
+}
+
+class SidenavItem {
+  constructor(domNode, parent) {
+    this.domNode = domNode;
+    this.parent = parent;
+    this.menu = null;
+
+    this.buildItem();
+
+    this.keyCode = Object.freeze({
+      'ENTER': 13,
+      'LEFT': 37,
+      'UP': 38,
+      'RIGHT': 39,
+      'DOWN': 40
+    });
+    this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this));
+    this.domNode.addEventListener('click', this.handleClick.bind(this));
+  }
+
+  buildItem() {
+    if (this.isMenu()) {
+      this.menu = new Menu(this.domNode.nextElementSibling, this);
+    }
+  }
+
+  isMenu() {
+    return this.domNode.nextElementSibling && this.domNode.nextElementSibling.tagName === 'UL';
+  }
+
+  handleKeyDown(event) {
+    let target = event.currentTarget;
+    let key = event.key;
+    let bubbleUp = false;
+
+    switch (event.keyCode) {
+      case this.keyCode.ENTER:
+        if (this.menu) {
+          this.toggleElement(true);
+          bubbleUp = true;
+        }
+        break;
+
+      case this.keyCode.DOWN:
+        this.parent.setFocusToNextItem(this);
+        bubbleUp = true;
+        break;
+
+      case this.keyCode.LEFT:
+        this.parent.toggleElement(true);
+        bubbleUp = true;
+        break;
+
+      case this.keyCode.RIGHT:
+        if (this.menu) {
+          this.toggleElement(true);
+        }
+        bubbleUp = true;
+        break;
+
+      case this.keyCode.UP:
+        this.parent.setFocusToPreviousItem(this);
+        bubbleUp = true;
+        break;
+    }
+
+    if (bubbleUp) {
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  handleClick(event) {
+    if (this.menu) {
+      event.preventDefault();
+      event.stopPropagation();
+      this.toggleElement();
+    }
+  }
+
+  toggleElement(focus) {
+    if (this.domNode.classList.contains('Vlt-sidemenu__trigger_active')) {
+      this.domNode.setAttribute('aria-expanded', 'false');
+      this.domNode.classList.remove('Vlt-sidemenu__trigger_active');
+      this.domNode.tabIndex = -1;
+      if (focus) { this.domNode.focus(); }
+    } else {
+      this.domNode.tabIndex = 0;
+      this.domNode.setAttribute('aria-expanded', 'true');
+      this.domNode.classList.add('Vlt-sidemenu__trigger_active');
+      this.domNode.dispatchEvent(new CustomEvent('menuClosed', { bubbles: true }));
+      if (focus) { this.menu.setFocusToFirstItem(); }
+    }
+  }
+
+  setFocusToPreviousLevel() {
+    if (this.menu) {
+      this.domNode.setAttribute('aria-expanded', 'false');
+      this.domNode.classList.remove('Vlt-sidemenu__trigger_active');
+      this.domNode.tabIndex = -1;
+      this.domNode.focus();
+    } else {
+      this.parent.setFocusToPreviousItem(this);
+    }
+  }
+
+  setFocusToNextItem(current) {
+    if (this.menu) {
+      this.menu.setFocusToNextItem(current);
+    }
+  }
+
+  setFocusToPreviousItem(current) {
+    if (this.menu) {
+      this.menu.setFocusToPreviousItem(current);
+    }
+  }
+}
+
+export default class Sidenav {
+  constructor(domNode) {
+    this.domNode = document.getElementById('sidenav');
+    this.mobileTrigger = document.getElementById('Vlt-sidenav-mobile-trigger');
+    this.container = document.getElementById('Vlt-sidenav');
+
+    if (this.domNode) {
+      this.buildMenu();
+      this.setActiveItem();
+      this.expandActiveMenu();
+      this.setupListeners();
+    } else {
+      this.mobileTrigger.style.display = 'none';
+    }
+  }
+
+  setupListeners() {
+    this.domNode.addEventListener('menuClosed', this.closeOpenedMenu.bind(this));
+    this.mobileTrigger.addEventListener('click', this.mobileHandler.bind(this));
+    this.mobileTrigger.addEventListener('touchstart', this.mobileHandler.bind(this));
+
+    document.querySelector('body').addEventListener('click', this.closeMobileMenu.bind(this));
+    document.querySelector('body').addEventListener('touchstart', this.closeMobileMenu.bind(this));
+  }
+
+  buildMenu() {
+    this.menu = new Menu(this.domNode.firstElementChild, this);
+  }
+
+  setFocusToNextItem(current) {
+    this.menu.setFocusToNextItem(current);
+  }
+
+  setFocusToPreviousItem(current) {
+    this.menu.setFocusToPreviousItem(current);
+  }
+
+  // No-op
+  toggleElement() {}
+
+  setActiveItem() {
+    let url = document.querySelector('nav.sidenav').dataset.active;
+    let activeItemSelector = `.Vlt-sidemenu__link[href="${url}"]`;
+    let activeItem = document.querySelector(activeItemSelector);
+    if (activeItem) {
+      activeItem.classList.add('Vlt-sidemenu__link_active');
+    }
+  }
+
+  expandActiveMenu() {
+    const activeItem = this.domNode.querySelector('.Vlt-sidemenu__link_active');
+    if (activeItem) {
+      let activeTrigger = activeItem.closest('ul').previousElementSibling;
+
+      while (activeTrigger) {
+        activeTrigger.classList.add('Vlt-sidemenu__trigger_active', 'Vlt-sidemenu__trigger_current');
+        activeTrigger = activeTrigger.parentNode.closest('ul').previousElementSibling;
+      }
+    }
+  }
+
+  closeOpenedMenu(event) {
+    Array.from(this.domNode.querySelectorAll('.Vlt-sidemenu__trigger_active')).forEach((subMenu) => {
+      if (subMenu !== event.target && !subMenu.parentNode.contains(event.target)) {
+        subMenu.classList.remove('Vlt-sidemenu__trigger_active');
+      }
+    });
+  }
+
+  mobileHandler(event) {
+    if (!this.container.classList.contains('Vlt-sidenav_visible')) {
+      this.container.classList.add('Vlt-sidenav_visible');
+      document.body.classList.add('Vlt-body--mobile-menu-open');
+      event.stopPropagation();
+    }
+  }
+
+  closeMobileMenu(event) {
+    if (!this.domNode.contains(event.target)) {
+      this.container.classList.remove('Vlt-sidenav_visible');
+      document.body.classList.remove('Vlt-body--mobile-menu-open');
+    }
+  }
+}