Merge branch 'v2' into v2-configuration

docgen/assets/data/community-projects.json

@@ -0,0 +1,38 @@
+[
+	{
+		"name":"places.js",
+		"url":"https://community.algolia.com/places/",
+		"logo":"https://community.algolia.com/places/images/svg/places-illustration-65745839.svg",
+		"backgroundColor": "#3a5395"
+	},
+	{
+		"name":"wordpress",
+		"url":"https://community.algolia.com/wordpress",
+		"logo":"https://community.algolia.com/wordpress/img/icons/wp-icon.svg",
+		"backgroundColor": "linear-gradient(to bottom right, #4041B2, #516ED1)"
+	},
+	{
+		"name":"Autocomplete.js",
+		"url":"https://github.com/algolia/autocomplete.js",
+		"logo":"https://community.algolia.com/img/illus-autocomplete.svg",
+		"backgroundColor": "#00587f"
+	},
+	{
+		"name":"instantsearch.js",
+		"url":"https://community.algolia.com/instantsearch.js/",
+		"logo":"https://community.algolia.com/img/logo-is.svg",
+		"backgroundColor": "#385D72"
+	},
+	{
+		"name":"Helper.js",
+		"url":"https://community.algolia.com/algoliasearch-helper-js/",
+		"logo":"https://community.algolia.com/img/logo-helper.svg",
+		"backgroundColor": "#FDBD57"
+	},
+	{
+		"name":"magento",
+		"url":"https://community.algolia.com/magento/",
+		"logo":"http://res.cloudinary.com/hilnmyskv/image/upload/v1477318624/magento-icon-white.svg",
+		"backgroundColor": "linear-gradient(to bottom right, #ed9259, #e76d22)"
+	}
+]

docgen/assets/js/communityProjects.js

@@ -0,0 +1,31 @@
+import projects from '../data/community-projects.json';
+
+function init() {
+  const list = [];
+  const target = document.querySelector('[data-inject-community]');
+
+  projects.forEach(e => {
+    list.push({
+      name: e.name,
+      url: e.url,
+      logo: e.logo,
+      backgroundColor: e.backgroundColor ? e.backgroundColor : 'transparent',
+    });
+  });
+
+  list.forEach(t => {
+    const tpl = `
+      <div class="dropdown-item">
+        <a href="${t.url}">
+          <span class="item-icon" style="background: ${t.backgroundColor}">
+            <img src="${t.logo}" />
+          </span>
+          <h4>${t.name}</h4>
+        </a>
+      </div>`;
+    target.innerHTML += tpl;
+  });
+}
+
+export default init;
+

docgen/assets/js/dropdowns.js

@@ -0,0 +1,29 @@
+function dropdowns() {
+  const openDropdown = document.querySelectorAll('[data-toggle-dropdown]');
+  const otherDropdown = document.querySelectorAll('.simple-dropdown');
+
+  for (let i = 0; i < openDropdown.length; i++) {
+    toggleDropdown(openDropdown[i]);
+  }
+
+  function toggleDropdown(element) {
+    const dropdown = element.getAttribute('data-toggle-dropdown');
+    element.addEventListener('click', function() {
+      if (!document.getElementById(dropdown).classList.contains('opened')) {
+        for (let i = 0; i < otherDropdown.length; i++) {
+          otherDropdown[i].classList.remove('opened');
+        }
+
+        document.getElementById(dropdown).classList.add('opened');
+        document.getElementById(dropdown).setAttribute('aria-expanded', 'true');
+        this.setAttribute('aria-expanded', 'true');
+      } else {
+        document.getElementById(dropdown).classList.remove('opened');
+        document.getElementById(dropdown).setAttribute('aria-expanded', 'false');
+        this.setAttribute('aria-expanded', 'false');
+      }
+    });
+  }
+}
+
+export default dropdowns;

docgen/assets/js/header.js

@@ -0,0 +1,188 @@
+export default function initHeader() {
+  const cmSearch = function () {
+    const searchIcon = document.querySelector('#search');
+    const cancelIcon = document.querySelector('#cancel');
+    const searchContainer = document.querySelector('.cm-search__input');
+    const searchInput = document.querySelector('#searchbox');
+
+    function openSearchInput () {
+      searchContainer.classList.add('open');
+      searchInput.focus();
+    }
+
+    function closeSearchInput () {
+      searchContainer.classList.remove('open');
+    }
+
+    function emptySearchInput () {
+      if (searchInput.value !== '') {
+        searchInput.value = '';
+      } else {
+        closeSearchInput();
+      }
+    }
+
+    searchIcon.addEventListener('click', openSearchInput);
+    cancelIcon.addEventListener('click', emptySearchInput);
+
+    window.onresize = function () {
+      emptySearchInput();
+      closeSearchInput();
+    };
+
+    return cmSearch;
+  };
+
+  const toggleMobileMenu = function(args) {
+    const trigger = args.trigger || '#open-menu';
+    let opened = false;
+    const target = args.target || '.cm-navigation__menu';
+    const openedClass = args.openedClass || 'opened';
+
+    document.querySelector(trigger).addEventListener('click', toggleMenu);
+
+    function toggleMenu() {
+      if (document.body.clientWidth < 768) {
+        if (opened === false) {
+          opened = true;
+          document.querySelector('#menu-wrapper').classList.add(openedClass);
+        } else {
+          opened = false;
+          document.querySelector('#menu-wrapper').classList.remove(openedClass);
+        }
+      } else if (opened === false) {
+        opened = true;
+        document.querySelector(target).classList.add(openedClass);
+      } else {
+        opened = false;
+        document.querySelector(target).classList.remove(openedClass);
+      }
+
+      const cancelIconMobile = document.querySelector('#cancel-mobile');
+      cancelIconMobile.addEventListener('click', mobileSearchBla);
+
+      function mobileSearchBla() {
+        document.querySelector('#searchbox-mobile').value = '';
+      }
+    }
+  };
+
+  function wrapMenuOnMobile() {
+    const container = document.querySelector('.cm-navigation');
+    const wrapper = document.createElement('div');
+    wrapper.id = 'menu-wrapper';
+    wrapper.classList.add('cm-navigation__menu');
+    wrapper.classList.add('mobile-navigation-wrapper');
+    const innerMenu = document.querySelector('.cm-navigation__menu').innerHTML;
+
+    if (!document.getElementById('menu-wrapper')) {
+      wrapper.innerHTML = innerMenu;
+      container.appendChild(wrapper);
+
+      setTimeout(() => {
+        const inm = document.querySelector('.mobile-navigation-wrapper input');
+        const searchButton = document.querySelector('.mobile-navigation-wrapper button#search');
+        const cancelButton = document.querySelector('.mobile-navigation-wrapper button#cancel');
+        inm.id = 'searchbox-mobile';
+        searchButton.id = 'search-mobile';
+        cancelButton.id = 'cancel-mobile';
+      });
+    } else {
+      document.getElementById('menu-wrapper').remove();
+    }
+  }
+
+  function displayDropdown() {
+    let hover = false;
+    const trigger = document.querySelectorAll('.cm-navigation__brands--community')[0];
+    const ddHolder = document.querySelectorAll('.cm-navigation__brands-dropdown')[0];
+    const dropdownClass = 'dropdownActive';
+
+    trigger.addEventListener('mouseenter', addDropdown);
+    trigger.addEventListener('mouseleave', removeDropdown);
+
+    ddHolder.addEventListener('mouseenter', () => {
+      hover = true;
+      keepDropdown();
+    });
+
+    ddHolder.addEventListener('mouseleave', removeDropdown);
+
+  // Make sure to remove the dropdown if the user move the mouse
+  // and if the dropdown isn't hovered
+    document.body.addEventListener('mousemove', () => {
+    // hover = true;
+      if (hover === false) {
+        removeDropdown();
+      }
+    });
+
+    function addDropdown() {
+      trigger.classList.add(dropdownClass);
+    }
+
+    function removeDropdown() {
+      if (hover === true) {
+        trigger.classList.remove(dropdownClass);
+        hover = false;
+      } else {
+      // ...
+      }
+    }
+
+    function keepDropdown() {
+      trigger.classList.add(dropdownClass);
+      hover = true;
+    }
+  }
+
+// If the user type :"s", open the searchbox
+  function catchCmdF() {
+    let keyPressed = {};
+
+    document.addEventListener('keydown', e => {
+      keyPressed[e.keyCode] = true;
+    }, false);
+    document.addEventListener('keyup', e => {
+      keyPressed[e.keyCode] = false;
+    }, false);
+
+    function searchLoop() {
+      if (keyPressed['83']) {
+        document.querySelector('.cm-search__input').classList.add('open');
+        document.querySelector('#searchbox').focus();
+
+        setTimeout(() => {
+          keyPressed = {};
+        }, 500);
+      } else if (keyPressed['27']) {
+        document.querySelector('.cm-search__input').classList.remove('open');
+        document.querySelector('#searchbox').blur();
+
+        setTimeout(() => {
+          keyPressed = {};
+        }, 500);
+      }
+      setTimeout(searchLoop, 5);
+    }
+
+    searchLoop();
+  }
+
+  window.addEventListener('DOMContentLoaded', () => {
+    cmSearch();
+    toggleMobileMenu({
+      trigger: '#open-menu',
+    });
+
+    wrapMenuOnMobile();
+    displayDropdown();
+    catchCmdF();
+  });
+
+  window.addEventListener('resize', () => {
+    if (document.body.clientWidth < 768) {
+      wrapMenuOnMobile();
+    }
+  });
+}

docgen/assets/js/main.js

@@ -1,4 +1,7 @@
 import sidebar from './sidebar.js';
+import header from './header.js';
+import communityProjects from './communityProjects.js';
+import dropdowns from './dropdowns.js';
 
 const container = document.querySelector('.documentation-container');
 const sidebarContainer = document.querySelector('.sidebar');
@@ -10,3 +13,7 @@ if (container && sidebar) {
     headerStartLevel: 2,
   });
 }
+
+header();
+communityProjects();
+dropdowns();