epfl-elements - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

build/js/base.js

 /* globals jQuery, Tablesaw */
-
 import objectFitImages from 'object-fit-images';
@@ -19,10 +18,8 @@ import upload from './upload';
 import coursebook from './coursebook.js';
-import cookieconsent, {get_cookieconsent_config} from './cookie-consent.js';
+import cookieconsent, { get_cookieconsent_config } from './cookie-consent.js';
 import anchors from './anchors';
-
 import guide from './guide.js';
-
 svgIcons(); // Must run as soon as possible
 
-const init = () => {
+var init = function init() {
   upload();
@@ -44,8 +41,7 @@ selectMultiple();
   cookieconsent(get_cookieconsent_config());
-
   guide();
-  anchors();
+  anchors(); // Init polyfill for Object Fit on IE11
 
-  // Init polyfill for Object Fit on IE11
-  const isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+  var isIE11 = !!window.MSInputMethodContext && !!document.documentMode;
+
   if (isIE11) {
@@ -55,15 +51,657 @@ objectFitImages();
   }
-};
+}; // Will init the scripts outside of Toolbox
 
-// Will init the scripts outside of Toolbox
+
 if (undefined === window.sources) {
-  (($) => {
-    $(document).ready(() => init());
+  (function ($) {
+    $(document).ready(function () {
+      return init();
+    });
   })(jQuery);
-}
+} // Will init the scripts inside of Toolbox
 
-// Will init the scripts inside of Toolbox
-document.addEventListener('ToolboxReady', () => {
+
+document.addEventListener('ToolboxReady', function () {
   console.log('backstopjs_ready');
   init();
 });
+/* globals $ */
+export default (function () {
+  var breadcrumb = $('#breadcrumb-wrapper');
+
+  if ($(breadcrumb).length > 0) {
+    // don't expect to have the breadcrumb on every case
+    var breadcrumbNode = breadcrumb[0];
+    var breadcrumbComponent = breadcrumb.find('.breadcrumb');
+
+    if ($(window).width() > 1199 && $(breadcrumbComponent).length > 0 && // don't expect to have the breadcrumbComponent on every case
+    breadcrumb.width() < breadcrumbComponent[0].scrollWidth) {
+      var isDown = false;
+      var startX;
+      var scrollLeft;
+      breadcrumb.on('mousedown', function (e) {
+        isDown = true;
+        breadcrumb.addClass('moving');
+        startX = e.pageX - breadcrumbNode.offsetLeft; // eslint-disable-next-line
+
+        scrollLeft = breadcrumbNode.scrollLeft;
+      });
+      breadcrumb.on('mouseleave', function () {
+        isDown = false;
+        breadcrumb.removeClass('moving');
+      });
+      breadcrumb.on('mouseup', function () {
+        isDown = false;
+        breadcrumb.removeClass('moving');
+      });
+      breadcrumb.on('mousemove', function (e) {
+        if (!isDown) return; // stop the fn from running
+
+        e.preventDefault();
+        var x = e.pageX - breadcrumbNode.offsetLeft;
+        var walk = (x - startX) * 3;
+        breadcrumbNode.scrollLeft = scrollLeft - walk;
+      });
+      breadcrumb.mousewheel(function (e, delta) {
+        e.preventDefault();
+        breadcrumbNode.scrollLeft -= delta * 40;
+      });
+      breadcrumb.find('*').on('dragstart', function () {
+        return false;
+      });
+    }
+  }
+});
+/* globals $ */
+import Flickity from 'flickity';
+import Imagesloaded from 'imagesloaded';
+export default (function () {
+  if ($('.card-slider').length > 0) {
+    // Mobile width corresponds to SM breakpoint from Bootstrap.
+    var isMobile = $(window).width() < 768;
+    Imagesloaded('.card-slider', function () {
+      var flkty = new Flickity('.card-slider', {
+        cellAlign: 'left',
+        setGallerySize: true,
+        pageDots: isMobile,
+        prevNextButtons: false,
+        contain: true,
+        groupCells: false
+      });
+      $('.card-slider-cell').css('height', '100%');
+      $('#card-slider-prev').on('click', function () {
+        flkty.previous();
+      });
+      $('#card-slider-next').on('click', function () {
+        flkty.next();
+      });
+      flkty.on('select', function () {
+        $('.card-slider-btn').removeClass('disabled');
+
+        if (flkty.selectedIndex === 0) {
+          $('#card-slider-prev').addClass('disabled');
+        }
+
+        if (flkty.selectedIndex + 1 === flkty.slides.length || flkty.selectedIndex + 2 === flkty.slides.length) {
+          $('#card-slider-next').addClass('disabled');
+        }
+      });
+    });
+  }
+});
+/* globals $ */
+function get_cookieconsent_config() {
+  // Translation
+  var cookieI18n = {
+    en: {
+      msg: 'By continuing your browsing on this site, you agree to the use ' + 'of cookies to improve your user experience and to make statistics ' + 'of visits.',
+      link: 'Read the legal notice',
+      href: '//www.epfl.ch/about/overview/overview/regulations-and-guidelines/'
+    },
+    fr: {
+      msg: 'En poursuivant votre navigation sur ce site, vous acceptez ' + 'l\'utilisation de cookies pour am&eacute;liorer votre ' + 'exp&eacute;rience utilisateur et r&eacute;aliser des statistiques ' + 'de visites.',
+      link: 'Lire les mentions l&eacute;gales',
+      href: '//www.epfl.ch/about/overview/fr/reglements-et-directives/'
+    }
+  }; // Retrieve language, default 'fr'
+
+  var langAttribute = document.documentElement.lang;
+  var lang = langAttribute.substring(0, 2);
+
+  if (!cookieI18n[lang]) {
+    lang = 'fr';
+  } // Retrieve the domain
+  // Don't work with google.co.uk for example
+
+
+  var domain_name = 'epfl.ch';
+  var hostame = window.location.hostname;
+
+  if (hostame === 'localhost' || hostame === '127.0.0.1') {
+    domain_name = hostame;
+  } else {
+    var hostParts = hostame.split('.').reverse();
+
+    if (hostParts[0] !== undefined && hostParts[1] !== undefined) {
+      domain_name = hostParts[1] + '.' + hostParts[0];
+    }
+  }
+
+  var config = {
+    "theme": "classic",
+    "palette": {
+      "popup": {
+        "background": "rgba(69, 69, 69, 0.96)"
+      },
+      "button": {
+        "background": "#b51f1f"
+      }
+    },
+    "content": {
+      "message": cookieI18n[lang].msg,
+      "dismiss": "OK",
+      "link": cookieI18n[lang].link,
+      "href": cookieI18n[lang].href
+    },
+    "cookie": {
+      "name": "petitpois",
+      // Chosen by a magical unicorn!
+      "domain": domain_name,
+      "autoAttach": false // attach it manually to the end, or SEO will crawl it before any content
+
+    }
+  };
+  return config;
+}
+
+var cookieconsent = function cookieconsent(cookieconsent_config) {
+  if (undefined !== window.sources) {
+    // Open it in the cookie consent page only for Toolbox
+    if (window.location.href.includes('cookie-consent')) {
+      if (!window.cookie_consent_popup) {
+        window.cookieconsent.initialise(cookieconsent_config, function (popup) {
+          window.cookie_consent_popup = popup;
+          document.body.appendChild(popup.element);
+        }, function (err) {
+          console.error(err);
+        });
+      }
+
+      window.cookie_consent_popup.open();
+    } else {
+      // Force close if we are not on the correct page
+      if (window.cookie_consent_popup) {
+        window.cookie_consent_popup.close();
+      }
+    }
+  } else {
+    var p; // Init cookieconsent for the site
+
+    window.cookieconsent.initialise(cookieconsent_config, function (popup) {
+      p = popup;
+      document.body.appendChild(p.element);
+    }, function (err) {
+      console.error(err);
+    });
+    return p;
+  }
+};
+
+export default cookieconsent;
+export { get_cookieconsent_config };
+/* global $ */
+export default (function () {
+  var id = new Date().getTime().toString(16);
+  $('.coursebook-program .tree>li').each(function (i, collapse) {
+    // identify toggle and target
+    var toggle = $('.underline a', collapse);
+    var target = $('>ul', collapse); // generate page-unique id
+
+    var itemId = "".concat(id, "-").concat(i); // set correct attributes
+
+    target.addClass('collapse collapse-item collapse-item-desktop');
+    toggle.addClass('collapse-title collapse-title-desktop collapsed');
+    target.attr('id', itemId);
+    toggle.attr('data-target', "#".concat(itemId));
+    toggle.attr('data-toggle', 'collapse'); // automatically add full width buttons at the end of the collapse
+
+    var link = $('<a></a>');
+    link.addClass('btn btn-block btn-sm btn-primary my-3');
+    link.html("Voir le plan d'études");
+    link.attr('href', toggle.attr('href'));
+    target.append(link);
+  });
+});
+/* globals $ */
+export default (function () {
+  // initialise booleans to enable or disable js mobile features, based on css breakpoints
+  var isMobile = false;
+  var showLastMonthWeek = false;
+  var initialWeek = false;
+  var now = new Date();
+  var timestamp = new Date(now.getFullYear(), now.getMonth(), now.getDate()) / 1;
+  /*
+  * define if all dates in a row are disabled
+  */
+
+  function isRowDisabled(weekNum, container) {
+    var disabledCount = $("tbody tr:nth-child(".concat(weekNum, ") .picker__day--outfocus"), container).length;
+
+    if (disabledCount === 7) {
+      return true;
+    }
+
+    return false;
+  }
+  /*
+  * Custom managemet of prev / next on mobile
+  */
+
+
+  function handlePrevNext(container, selected) {
+    var 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', function (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', function (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) {
+    var alreadyHandled = $('.nextMonthLabel', picker.$holder).length > 0;
+
+    if (alreadyHandled) {
+      return true;
+    }
+
+    var wrapper = picker.component.$node.parent();
+    var next = $('.nextMonthLabel', wrapper);
+    var prev = $('.prevMonthLabel', wrapper);
+    var nextMonthIndex = picker.component.item.view.month + 1;
+    if (nextMonthIndex === months.length) nextMonthIndex = 0;
+    var 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 () {
+      var currentTimestamp = $(this).data('pick');
+      var date = new Date(currentTimestamp);
+      var dateString = "".concat(date.getFullYear(), "-").concat("0".concat(date.getMonth() + 1).slice(-2), "-").concat("0".concat(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 () {
+    var monthsShort = ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jui', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc'];
+    var container = $(this).parent();
+    $(this).pickadate({
+      monthsFull: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
+      monthsShort: 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: function onRender() {
+        handleMonthLabels(this, monthsShort);
+
+        if (isMobile) {
+          // refresh listeners after render
+          handlePrevNext(container);
+        }
+      },
+      onStart: function onStart() {
+        selectToday(this);
+        setHighlights(this); // focus on today's week on start
+
+        var 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';
+      }
+    });
+  });
+});
+/* globals $ */
+export default (function () {
+  $('.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: ''
+  });
+});
+/* 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 (function () {
+  var $galleries = $('.gallery');
+  var $galleryNavs = $('.gallery-nav'); // Base gallery logic
+
+  if ($galleries.length > 0) {
+    $galleries.each(function () {
+      var _this = this;
+
+      Imagesloaded(this, function () {
+        var $items = $(_this).find('.gallery-item'); // Toggle opacity to avoid load blink
+
+        $(_this).addClass('ready'); // Add counter
+
+        $items.each(function (i) {
+          $(this).find('figcaption').append("\n            <span class=\"gallery-counter\">".concat(i + 1, "/").concat($items.length, "</span>\n          "));
+        }); // Instantiate Flickity gallery
+
+        var 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
+
+        var height = $(_this).find('.gallery-item.is-selected img').height();
+        $(_this).find('.flickity-prev-next-button').css('top', "".concat(height / 2, "px"));
+      });
+    });
+  } // Nav gallery logic
+
+
+  if ($galleryNavs.length > 0) {
+    $galleryNavs.each(function () {
+      var _this2 = this;
+
+      Imagesloaded(this, function () {
+        var target = $(_this2).data('gallery'); // Toggle opacity to avoid load blink
+
+        $(_this2).addClass('ready'); // Instantiate Flickity nav
+
+        var flkty = new Flickity(_this2, {
+          asNavFor: "#".concat(target),
+          cellAlign: 'left',
+          pageDots: false,
+          prevNextButtons: false,
+          contain: true
+        });
+      });
+    });
+  }
+});
+/* global $ */
+var nav = function nav() {
+  // declare classes used to identify current menu and it's parents (based on wordpress classes)
+  var activeClass = 'current-menu-parent';
+  var parentClass = 'current-menu-ancestor'; // toggle mobile navigation
+
+  var toggleMobileMenu = function toggleMobileMenu() {
+    // handle correct menu display when on level 0 page on mobile
+    var firstLeveItem = $('.nav-main .nav-menu>.current-menu-item');
+
+    if (firstLeveItem.length > 0) {
+      var 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
+
+
+  var toggleDesktopMenu = function toggleDesktopMenu() {
+    var mustOpen = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    var navToggle = $('#nav-toggle');
+    navToggle.toggleClass('open');
+    var offsetX = navToggle.offset().left + navToggle.outerWidth(true);
+    var 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();
+    var parents = $(this).parents();
+    var parent = parents[2];
+    $(parent).removeClass(parentClass).removeClass(activeClass);
+    var 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();
+    var parents = $(this).parents();
+    var parent = parents[0];
+    $(parent).addClass(activeClass);
+    var ancestor = parents[2];
+    $(ancestor).addClass(parentClass).removeClass(activeClass);
+  }); // bind action to mobile menu toggle
+
+  $('.nav-toggle-mobile').on('click', function () {
+    toggleMobileMenu();
+  }); // Bind aciton to close toggle navigation, when clicking the white overlay
+
+  $('.overlay').on('click', function (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(function () {
+          return $('#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;
+/* globals $ */
+export default (function () {
+  $(function () {
+    $('[data-toggle="popover"]').popover({
+      placement: 'top',
+      html: true,
+      offset: -135,
+      template: '<div class="popover" role="tooltip"><div class="popover-body"></div></div>'
+    });
+  });
+});
+/* global $ */
+export default (function () {
+  $('.search').on('shown.bs.dropdown', function () {
+    $('.search input[type="text"]').focus();
+  });
+});
+/* globals $ */
+export default (function () {
+  $('.select-multiple').each(function (index, element) {
+    $(element).multipleSelect({
+      placeholder: $(element).attr('data-placeholder') || '',
+      width: '100%'
+    });
+  });
+});
+/* globals $, ClipboardJS */
+export default (function () {
+  $('.social-share-copy').each(function () {
+    var copyBtn = $(this);
+    var baseText = copyBtn.text();
+    var successText = copyBtn.data('success');
+    var clipboard = new ClipboardJS(copyBtn[0], {
+      target: function target(trigger) {
+        return $(trigger).parent().prev()[0];
+      }
+    });
+    clipboard.on('success', function (e) {
+      $(e.trigger).text(successText);
+      setTimeout(function () {
+        return $(e.trigger).text(baseText);
+      }, 2000);
+      e.clearSelection();
+    });
+  });
+});
+/* globals $ */
+export default (function () {
+  $('.tag-input').selectize({
+    plugins: ['remove_button'],
+    render: {
+      item: function item(data, escape) {
+        return "<div class=\"tag tag-primary\">".concat(escape(data.text), "</div>");
+      }
+    },
+    create: function create(input) {
+      return {
+        value: input,
+        text: input
+      };
+    }
+  });
+});
+/* globals $ */
+export default (function () {
+  $('.upload').find('input[type="file"]').each(function () {
+    var $input = $(this);
+    var $preview = $input.next().next('.upload-preview');
+    $input.on('change', function () {
+      var files = $input[0].files;
+      var previewContent = files[0].name;
+
+      if (files.length > 1) {
+        previewContent = "<ul>".concat(Array.from(files).map(function (file) {
+          return "<li>".concat(file.name, "</li>");
+        }).join().replace(/,/g, ''), "</ul>");
+      }
+
+      $preview.html(previewContent);
+    });
+  });
+});

gulpfile.js

 'use strict'
 
-const gulp            = require('gulp')
+const gulp = require('gulp')
 const gulpLoadPlugins = require('gulp-load-plugins')
 
 const autoprefixer = require('autoprefixer')
-const del          = require('del')
-const merge        = require('merge-stream')
+const del = require('del')
+const merge = require('merge-stream')
 
@@ -15,8 +15,13 @@ const $ = gulpLoadPlugins()
 const production = false;
+
 function errorAlert(error) {
-  if (!production) {
-    $.notify.onError({ title: 'SCSS Error', message: 'Check your terminal', sound: 'Sosumi' })(error);
-    $.util.log(error.messageFormatted ? error.messageFormatted : error.message);
-  }
-  this.emit('end');
+    if (!production) {
+        $.notify.onError({
+            title: 'SCSS Error',
+            message: 'Check your terminal',
+            sound: 'Sosumi'
+        })(error);
+        $.util.log(error.messageFormatted ? error.messageFormatted : error.message);
+    }
+    this.emit('end');
 }
@@ -26,59 +31,99 @@
 const dir = {
-  src:  "./src/",
-  dest: "./build/"
+    src: "./src/",
+    dest: "./build/",
+    npm: "./node_modules/"
 }
 
-function scss(){
-  return gulp.src(dir.src + 'scss/base.scss')
-    .pipe($.sass({
-        includePaths: ['./node_modules']
-    }))
-    .pipe($.plumber({ errorHandler: errorAlert }))
-    .pipe($.sourcemaps.init())
-    .pipe($.sass.sync().on('error', $.sass.logError))
-    .pipe($.postcss([
-      autoprefixer({ grid: true }),
-      require('cssnano'),
-    ]))
-    .pipe($.sourcemaps.write('./'))
-    .pipe(gulp.dest(dir.dest + 'css'))
+function scss() {
+    return gulp.src(dir.src + 'scss/base.scss')
+        .pipe($.sass({
+            includePaths: ['./node_modules']
+        }))
+        .pipe($.plumber({
+            errorHandler: errorAlert
+        }))
+        .pipe($.sourcemaps.init())
+        .pipe($.sass.sync().on('error', $.sass.logError))
+        .pipe($.postcss([
+            autoprefixer({
+                grid: true
+            }),
+            require('cssnano'),
+        ]))
+        .pipe($.sourcemaps.write('./'))
+        .pipe(gulp.dest(dir.dest + 'css'))
 }
 
-function js(){
-  return gulp.src(dir.src + 'js/base.js')
-    .pipe(gulp.dest(dir.dest + 'js'))
+function js() {
+    return gulp.src(dir.src + 'js/*.js')
+        .pipe($.plumber())
+        .pipe($.babel({
+            presets: [
+                ['@babel/env', {
+                    modules: false
+                }]
+            ]
+        }))
+        .pipe($.concat('base.js'))
+        .pipe(gulp.dest(dir.dest + 'js'))
 }
 
+function jsDeps() {
+    const files = [
+        'jquery/dist/jquery.min.js',
+        'popper.js/dist/popper.min.js',
+        'bootstrap/dist/js/bootstrap.bundle.min.js'
+    ]
+    return merge(files.map((item) => {
+        return gulp.src(dir.npm + item)
+            .pipe($.plumber())
+            .pipe($.concat('main.deps.js'))
+            .pipe(gulp.dest(dir.dest + 'js'))
+    }))
+}
+
 function watchSass() {
-  gulp.watch('path/to/scss/file', ['scss'])
+    gulp.watch('path/to/scss/file', ['scss'])
 }
 
 function watchJS() {
-  gulp.watch('path/to/js/files', ['js'])
+    gulp.watch('path/to/js/files', ['js'])
 }
 
-const clean = () => del([dir.dest], {force: true})
+const clean = () => del([dir.dest], {
+    force: true
+})
 
-let copyPaths = [{
-  src: 'svg/epfl-logo.svg',
-  dest: 'icons',
-}, {
-  src: 'favicons/**/*',
-  dest: 'icons',
-}]
-
 const copyAssets = () => {
-  return merge(copyPaths.map((item) => {
-    return gulp.src(dir.src + item.src)
-      .pipe(gulp.dest(dir.dest + item.dest))
-  }))
+    let copyPaths = [{
+        src: 'svg/epfl-logo.svg',
+        dest: 'icons',
+    }, {
+        src: 'favicons/**/*',
+        dest: 'icons',
+    }]
+    return merge(copyPaths.map((item) => {
+        return gulp.src(dir.src + item.src)
+            .pipe(gulp.dest(dir.dest + item.dest))
+    }))
 }
 
+const importNpmAssets = () => {
+    const npmAssets = [{
+        src: 'multiple-select/multiple-select.png',
+        dest: 'images'
+    }]
+    return merge(npmAssets.map((item) => {
+        return gulp.src(dir.npm + item.src)
+            .pipe(gulp.dest(dir.dest + item.dest))
+    }))
+}
+
 exports.build = gulp.series(
-  clean,
-  gulp.parallel(scss, js, copyAssets)
+    clean,
+    gulp.parallel(scss, js, copyAssets, importNpmAssets, jsDeps)
 )
 exports.watch = gulp.series(
-  clean,
-  gulp.parallel(watchSass, watchJS)
+    clean,
+    gulp.parallel(watchSass, watchJS)
 )

package.json

 {
   "name": "epfl-elements",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "EPFL frontend assets",
@@ -12,2 +12,4 @@ "main": "index.js",
   "devDependencies": {
+    "@babel/core": "^7.4.0",
+    "@babel/preset-env": "^7.4.2",
     "autoprefixer": "^9.5.0",
@@ -18,2 +20,4 @@ "bootstrap": "^4.3.1",
     "gulp": "^4.0.0",
+    "gulp-babel": "^8.0.0",
+    "gulp-concat": "^2.6.1",
     "gulp-load-plugins": "^1.5.0",
@@ -28,2 +32,3 @@ "gulp-notify": "^3.2.0",
     "merge-stream": "^1.0.1",
+    "multiple-select": "^1.2.2",
     "node-sass": "^4.11.0",
@@ -33,4 +38,3 @@ "popper.js": "^1.14.7",
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

New alerts

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

10270415

increased by1.11%

Number of package files

302

increased by0.67%

Lines of code

3509

increased by36.7%

Worsened metrics

Dev dependency count

22

increased by29.41%

Number of low quality alerts

3

increased by50%

No dependency changes