epfl-elements 1.0.0 → 4.0.0

package/src/js/datepicker-fancy.js

@@ -1,212 +0,0 @@
-/* globals $ */
-
-export default () => {
-  // initialise booleans to enable or disable js mobile features, based on css breakpoints
-  let isMobile = false;
-  let showLastMonthWeek = false;
-  let initialWeek = false;
-  const now = new Date();
-  const timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate()) / 1;
-
-  /*
-  * define if all dates in a row are disabled
-  */
-  function isRowDisabled(weekNum, container) {
-    const disabledCount = $(`tbody tr:nth-child(${weekNum}) .picker__day--outfocus`, container)
-      .length;
-    if (disabledCount === 7) {
-      return true;
-    }
-    return false;
-  }
-
-  /*
-  * Custom managemet of prev / next on mobile
-  */
-  function handlePrevNext(container, selected) {
-    let weekNum = $('tr', container).index($('tr:has(.picker__day--selected)', container));
-    if (initialWeek) {
-      weekNum = initialWeek;
-      initialWeek = false;
-    }
-
-    // only setup listeners when on mobile
-    if (!isMobile) return container;
-
-    if (showLastMonthWeek) {
-      // handle display last week of the month after clicking prev
-      showLastMonthWeek = false;
-      weekNum = 6;
-      if (isRowDisabled(6, container)) {
-        weekNum = 5;
-      }
-    }
-
-    // initialise data attibute
-    $('tbody', container).attr('data-week', weekNum);
-
-    $('.picker__nav--next', container).on('click', (e) => {
-      if (weekNum < 6 && !isRowDisabled(weekNum + 1, container)) {
-        // if we are not displaying the last row:
-        // disable built-in behaviour and update data attribute
-        e.stopPropagation();
-        weekNum += 1;
-        $('tbody', container).css('transition', 'left 0.4s');
-        $('tbody', container).attr('data-week', weekNum);
-      } else {
-        // let plugin proceed to next month
-
-        // reset week index
-        weekNum = 1;
-      }
-    });
-
-    $('.picker__nav--prev', container).on('click', (e) => {
-      if (weekNum > 1) {
-        // if we are not displaying the first row:
-        // disable built-in behaviour and update visual to show previous week
-        e.stopPropagation();
-        weekNum -= 1;
-        $('tbody', container).css('transition', 'left 0.4s');
-        $('tbody', container).attr('data-week', weekNum);
-      } else {
-        // let plugin proceed to previous month
-
-        // set flag to display last week of month at next render
-        showLastMonthWeek = true;
-      }
-    });
-
-    // enable transitions only when prev/next arrow are clicked
-    $('.picker__day', container).each(function () {
-      $(this).on('click', function () {
-        $(this)
-          .parent()
-          .parent()
-          .parent()
-          .css('transition', 'left 0s');
-      });
-    });
-  }
-
-  /*
-  * Focus today
-  */
-  function selectToday(picker) {
-    // select today's week on initialisation
-    picker.set('select', [now.getFullYear(), now.getMonth(), now.getDate()]);
-  }
-
-  /*
-  * Display correct month labels on the side of the desktop version
-  */
-  function handleMonthLabels(picker, months) {
-    const alreadyHandled = $('.nextMonthLabel', picker.$holder).length > 0;
-    if (alreadyHandled) {
-      return true;
-    }
-
-    const wrapper = picker.component.$node.parent();
-    const next = $('.nextMonthLabel', wrapper);
-    const prev = $('.prevMonthLabel', wrapper);
-
-    let nextMonthIndex = picker.component.item.view.month + 1;
-    if (nextMonthIndex === months.length) nextMonthIndex = 0;
-
-    let prevMonthIndex = picker.component.item.view.month - 1;
-    if (prevMonthIndex < 0) prevMonthIndex = 11;
-
-    next.html(months[nextMonthIndex]);
-    prev.html(months[prevMonthIndex]);
-
-    $('.picker__box', picker.$root).append(next.clone());
-    $('.picker__box', picker.$root).append(prev.clone());
-  }
-
-  /*
-  * handle custom highlights
-  */
-  function setHighlights(container) {
-    // we check all displayed dates, and highlight the ones we want to
-    $('.picker__day--infocus', container).each(function () {
-      const currentTimestamp = $(this).data('pick');
-      const date = new Date(currentTimestamp);
-      const dateString = `${date.getFullYear()}-${`0${date.getMonth() + 1}`.slice(-2)}-${`0${date.getDate()}`.slice(-2)}`;
-
-      // this is arbitrary. change this with personal logic when needed and add you own class
-      if (dateString === '2018-03-28') {
-        $(this).addClass('custom-highlight');
-      }
-    });
-  }
-
-  /*
-  * INIT datepicket-event
-  */
-  $('.datepicker-fancy').each(function () {
-    const monthsShort = [
-      'Jan',
-      'Fév',
-      'Mar',
-      'Avr',
-      'Mai',
-      'Jui',
-      'Jui',
-      'Aoû',
-      'Sep',
-      'Oct',
-      'Nov',
-      'Déc',
-    ];
-    const container = $(this).parent();
-    $(this).pickadate({
-      monthsFull: [
-        'Janvier',
-        'Février',
-        'Mars',
-        'Avril',
-        'Mai',
-        'Juin',
-        'Juillet',
-        'Août',
-        'Septembre',
-        'Octobre',
-        'Novembre',
-        'Décembre',
-      ],
-      monthsShort,
-      weekdaysFull: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
-      weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
-      labelMonthNext: 'Prochain mois',
-      labelMonthPrev: 'Mois précédent',
-      labelMonthSelect: 'Sélectionnez un mois',
-      labelYearSelect: 'Sélectionnez une année',
-      format: 'd mmmm yyyy',
-      firstDay: 1,
-      today: '',
-      clear: '',
-      close: '',
-      onRender() {
-        handleMonthLabels(this, monthsShort);
-
-        if (isMobile) {
-          // refresh listeners after render
-          handlePrevNext(container);
-        }
-      },
-      onStart() {
-        selectToday(this);
-        setHighlights(this);
-
-        // focus on today's week on start
-        const selected = $('tr:has(.picker__day--selected)', container);
-        if (selected.length > 0) {
-          initialWeek = $('tr', container).index(selected);
-        }
-
-        // enable mobile behaviour when needed
-        isMobile = $('.datepicker-fancy + .picker table').css('display') === 'block';
-      }
-    });
-  });
-};

package/src/js/datepicker.js

@@ -1,19 +0,0 @@
-/* globals $ */
-
-export default () => {
-  $('.datepicker').pickadate({
-    monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
-    monthsShort: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'],
-    weekdaysFull: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
-    weekdaysShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
-    labelMonthNext: 'Prochain mois',
-    labelMonthPrev: 'Mois précédent',
-    labelMonthSelect: 'Sélectionnez un mois',
-    labelYearSelect: 'Sélectionnez une année',
-    format: 'd mmmm yyyy',
-    firstDay: 1,
-    today: '',
-    clear: '',
-    close: '',
-  });
-};

package/src/js/gallery.js

@@ -1,73 +0,0 @@
-/* globals $ */
-
-import Flickity from 'flickity';
-import FlickityFullscreen from 'flickity-fullscreen'; // eslint-disable-line
-import FlickityNav from 'flickity-as-nav-for'; // eslint-disable-line
-import Imagesloaded from 'imagesloaded';
-
-export default () => {
-  const $galleries = $('.gallery');
-  const $galleryNavs = $('.gallery-nav');
-
-  // Base gallery logic
-  if ($galleries.length > 0) {
-    $galleries.each(function () {
-      Imagesloaded(this, () => {
-        const $items = $(this).find('.gallery-item');
-
-        // Toggle opacity to avoid load blink
-        $(this).addClass('ready');
-
-        // Add counter
-        $items.each(function (i) {
-          $(this).find('figcaption').append(`
-            <span class="gallery-counter">${i + 1}/${$items.length}</span>
-          `);
-        });
-
-        // Instantiate Flickity gallery
-        const flkty = new Flickity(this, {
-          pageDots: false,
-          fullscreen: true,
-          setGallerySize: true,
-          arrowShape: 'M14.2,45.8L53,7.1c1.6-1.6,1.6-4.3,0-5.9s-4.3-1.6-5.9,0L1.2,47c-1.6,1.6-1.6,4.3,0,5.9c0,0,0,0,0,0l45.8,45.8c1.6,1.6,4.3,1.6,5.9,0s1.6-4.3,0-5.9L14.2,54.1h81.6c2.3,0,4.2-1.9,4.2-4.2s-1.9-4.2-4.2-4.2H14.2z',
-        });
-
-        // Replace fullscreen icons
-        $('.flickity-fullscreen-button-view svg path').attr(
-          'd',
-          'M32,11.9h-2.7V6.5H24V3.8h8V11.9z M24,28.2v-2.7h5.3v-5.4H32v8.2H24z M0,20.1h2.7v5.4H8v2.7H0V20.1z M8,3.8v2.7H2.7v5.4H0V3.8H8z',
-        );
-        $('.flickity-fullscreen-button-exit svg path').attr(
-          'd',
-          'M18.1,16l13.4,13.4c0.6,0.6,0.6,1.5,0,2.1c-0.6,0.6-1.5,0.6-2.1,0L16,18.1L2.6,31.6c-0.6,0.6-1.5,0.6-2.1,0c-0.6-0.6-0.6-1.5,0-2.1l0,0L13.9,16L0.4,2.6C-0.1,2-0.1,1,0.4,0.4s1.5-0.6,2.1,0L16,13.9L29.4,0.4c0.6-0.6,1.5-0.6,2.1,0c0.6,0.6,0.6,1.5,0,2.1L18.1,16z',
-        );
-
-        // Improve prev/next buttons position
-        const height = $(this).find('.gallery-item.is-selected img').height();
-        $(this).find('.flickity-prev-next-button').css('top', `${height / 2}px`);
-      });
-    });
-  }
-
-  // Nav gallery logic
-  if ($galleryNavs.length > 0) {
-    $galleryNavs.each(function () {
-      Imagesloaded(this, () => {
-        const target = $(this).data('gallery');
-
-        // Toggle opacity to avoid load blink
-        $(this).addClass('ready');
-
-        // Instantiate Flickity nav
-        const flkty = new Flickity(this, {
-          asNavFor: `#${target}`,
-          cellAlign: 'left',
-          pageDots: false,
-          prevNextButtons: false,
-          contain: true,
-        });
-      });
-    });
-  }
-};

package/src/js/nav-main.js

@@ -1,107 +0,0 @@
-/* global $ */
-
-const nav = () => {
-  // declare classes used to identify current menu and it's parents (based on wordpress classes)
-  const activeClass = 'current-menu-parent';
-  const parentClass = 'current-menu-ancestor';
-
-  // toggle mobile navigation
-  const toggleMobileMenu = () => {
-    // handle correct menu display when on level 0 page on mobile
-    const firstLeveItem = $('.nav-main .nav-menu>.current-menu-item');
-    if (firstLeveItem.length > 0) {
-      const parent = firstLeveItem.parents()[1];
-      $(parent).addClass(activeClass);
-    }
-
-    $('body').toggleClass('mobile-menu-open');
-  };
-
-  // Open or close desktop toggle navigation, keeping it's atual position.
-  // Used for the hamburger desktop menu to display current position
-  const toggleDesktopMenu = (mustOpen = false) => {
-    const navToggle = $('#nav-toggle');
-    navToggle.toggleClass('open');
-    const offsetX = navToggle.offset().left + navToggle.outerWidth(true);
-    const offsetY = navToggle.offset().top - $(window).scrollTop();
-    $('.nav-main').css('top', offsetY);
-
-    $('body').toggleClass('desktop-menu-open');
-    if (mustOpen && $('body').hasClass('desktop-menu-open')) {
-      $('.nav-main').css('left', offsetX);
-    } else {
-      $('.nav-main').css('left', '');
-    }
-  };
-
-  // moves the navigation one level up when clicking a "back" link
-  // eslint-disable-next-line
-  $('.nav-main .nav-back a').on('click', function(e) {
-    e.preventDefault();
-
-    const parents = $(this).parents();
-
-    const parent = parents[2];
-    $(parent)
-      .removeClass(parentClass)
-      .removeClass(activeClass);
-
-    const ancestor = parents[4];
-    $(ancestor)
-      .removeClass(parentClass)
-      .addClass(activeClass);
-  });
-
-  /*
-    move the navigation one level down,
-    when clicking the "show children" arrow on the right of a menu item
-  */
-  // eslint-disable-next-line
-  $('.nav-main .nav-arrow').on('click', function(e) {
-    e.preventDefault();
-
-    const parents = $(this).parents();
-
-    const parent = parents[0];
-    $(parent).addClass(activeClass);
-
-    const ancestor = parents[2];
-    $(ancestor)
-      .addClass(parentClass)
-      .removeClass(activeClass);
-  });
-
-  // bind action to mobile menu toggle
-  $('.nav-toggle-mobile').on('click', () => {
-    toggleMobileMenu();
-  });
-
-  // Bind aciton to close toggle navigation, when clicking the white overlay
-  $('.overlay').on('click', (e) => {
-    e.preventDefault();
-    toggleDesktopMenu();
-  });
-
-  // Bind action to the desktop hamburger (next to breadcrumbs)
-  // eslint-disable-next-line
-  $('#nav-toggle').on('click', function() {
-    if ($(this).hasClass('nav-toggle-async') && !$(this).hasClass('open')) {
-      $(this).addClass('is-loading');
-
-      // Demo of loading resolution
-      if ($('#styleguide').length > 0) {
-        setTimeout(() => $('#nav-toggle').trigger('loadend'), 2000);
-      }
-    } else {
-      toggleDesktopMenu(true);
-    }
-  });
-
-  // eslint-disable-next-line
-  $('#nav-toggle').on('loadend', function() {
-    $(this).removeClass('is-loading');
-    toggleDesktopMenu(true);
-  });
-};
-
-export default nav;

package/src/js/popover.js

@@ -1,13 +0,0 @@
-/* globals $ */
-
-export default () => {
-  $(function () {
-    $('[data-toggle="popover"]').popover({
-      placement: 'top',
-      html: true,
-      offset: -135,
-      template: '<div class="popover" role="tooltip"><div class="popover-body"></div></div>',
-    });
-  });
-};
-

package/src/js/search.js

@@ -1,7 +0,0 @@
-/* global $ */
-
-export default () => {
-  $('.search').on('shown.bs.dropdown', () => {
-    $('.search input[type="text"]').focus();
-  });
-};

package/src/js/select-multiple.js

@@ -1,11 +0,0 @@
-/* globals $ */
-
-export default () => {
-  $('.select-multiple').each((index, element) => {
-    $(element).multipleSelect({
-      placeholder: $(element).attr('data-placeholder') || '',
-      width: '100%',
-    });
-  });
-};
-

package/src/js/share.js

@@ -1,21 +0,0 @@
-/* globals $, ClipboardJS */
-
-export default () => {
-  $('.social-share-copy').each(function () {
-    const copyBtn = $(this);
-    const baseText = copyBtn.text();
-    const successText = copyBtn.data('success');
-    const clipboard = new ClipboardJS(copyBtn[0], {
-      target: (trigger) => {
-        return $(trigger).parent().prev()[0];
-      },
-    });
-
-    clipboard.on('success', (e) => {
-      $(e.trigger).text(successText);
-      setTimeout(() => $(e.trigger).text(baseText), 2000);
-
-      e.clearSelection();
-    });
-  });
-};

package/src/js/social-feed.scss

@@ -1,27 +0,0 @@
-@charset 'utf-8';
-
-.social-feed {
-  position: relative;
-  padding: 2.2rem 1.5rem 1.5rem;
-  background: $white;
-  color: $gray-600;
-
-  strong {
-    color: $black;
-  }
-
-  .social-icon {
-    position: absolute;
-    top: -1.3rem;
-  }
-
-  .social-feed-header {
-    margin-bottom: 0.6rem;
-  }
-
-  picture {
-    img {
-      margin-bottom: $paragraph-margin-bottom;
-    }
-  }
-}

package/src/js/tag-input.js

@@ -1,14 +0,0 @@
-/* globals $ */
-
-export default () => {
-  $('.tag-input').selectize({
-    plugins: ['remove_button'],
-    render: {
-      item: (data, escape) => `<div class="tag tag-primary">${escape(data.text)}</div>`,
-    },
-    create: input => ({
-      value: input,
-      text: input,
-    }),
-  });
-};

package/src/js/upload.js

@@ -1,20 +0,0 @@
-/* globals $ */
-
-export default () => {
-  $('.upload').find('input[type="file"]').each(function () {
-    const $input = $(this);
-    const $preview = $input.next().next('.upload-preview');
-
-    $input.on('change', () => {
-      const files = $input[0].files;
-      let previewContent = files[0].name;
-
-      if (files.length > 1) {
-        previewContent = `<ul>${Array.from(files).map(file => `<li>${file.name}</li>`).join().replace(/,/g, '')}</ul>`;
-      }
-
-      $preview.html(previewContent);
-    });
-  });
-};
-

package/src/scss/atoms/alert.scss

@@ -1,44 +0,0 @@
-@charset 'utf-8';
-
-$alert-icon-size: 2rem;
-$alert-icons: (
-  success: "%3Csvg viewBox='0 0 36 36' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle fill='#{$green}' cx='18' cy='18' r='18'/%3E%3Cpath stroke='#FFF' stroke-width='3' d='M10 16.976L16 23l10-10'/%3E%3C/g%3E%3C/svg%3E",
-  danger: "%3Csvg viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath fill='#{$red}' d='M24.042 0L34 9.958v14.084L24.042 34H9.958L0 24.042V9.958L9.958 0z'/%3E%3Cg stroke='#FFF' stroke-width='4'%3E%3Cpath d='M17 9v10M17 21v4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E",
-  warning: "%3Csvg viewBox='0 0 36 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M19.746 1.124l15.591 27.9A2 2 0 0 1 33.591 32H2.41a2 2 0 0 1-1.746-2.976l15.591-27.9a2 2 0 0 1 3.492 0z' fill='#{$yellow}'/%3E%3Cpath d='M18 12v10M18 24v2' stroke='#FFF' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E",
-  info: "%3Csvg viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Crect fill='#{$blue}' width='34' height='34' rx='4'/%3E%3Cpath d='M17 25V15M17 13V9' stroke='#FFF' stroke-width='4'/%3E%3C/g%3E%3C/svg%3E",
-);
-
-.alert {
-  position: relative;
-  min-height: $alert-padding-y * 2.4 + $alert-icon-size;
-  padding-top: $alert-padding-y * 1.6;
-  padding-left: $alert-padding-x * 2 + $alert-icon-size;
-  background: $white;
-  color: $body-color;
-
-  &:before {
-    display: inline-block;
-    position: absolute;
-    top: 50%;
-    left: $alert-padding-x;
-    width: $alert-icon-size;
-    height: $alert-icon-size;
-    margin-top: $alert-icon-size * -0.5;
-  }
-}
-
-@each $color, $value in $theme-colors {
-  .alert-#{$color} {
-    border-color: $value;
-    hr { border-top-color: darken($value, 5%); }
-    .alert-link { color: darken($value, 10%); }
-  }
-}
-
-@each $color, $svg in $alert-icons {
-  .alert-#{$color}:before {
-    content: str-replace(url("data:image/svg+xml;charset=utf8," + $svg), "#", "%23");
-  }
-}
-
-.close:hover { color: $red; }