Merge pull request #22 from LIN3S/feature/es6-refactor

Refactored the JS code

Author: benatespina

src/LIN3S/AdminBundle/Resources/private/js/app.js

@@ -10,15 +10,13 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  */
 
-'use strict';
-
 import {onDomReady} from 'lin3s-event-bus';
-
 import 'picturefill';
 import FastClick from 'fastclick';
 import svg4everybody from 'svg4everybody';
 import {initParsley} from 'lin3s-front-foundation';
 
+import './polyfills';
 import './filter';
 import './form-collection-type';
 import './menu';

src/LIN3S/AdminBundle/Resources/private/js/filter.js

@@ -10,25 +10,22 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  */
 
-'use strict';
-
 import {onDomReady} from 'lin3s-event-bus';
-
 import $ from 'jquery';
 
-function onReady() {
+const onReady = () => {
   if ($('.filter').length === 0) {
     return;
   }
 
-  $('.filter__filter-by').change(function () {
-    var $options = $('.filter__options');
+  const $options = $('.filter__options');
 
+  $('.filter__filter-by').on('change', () => {
     $options.children().addClass('filter__option--hidden').attr('name', '');
     $options
       .find('[data-filter-field="' + $(this).val() + '"]')
-      .removeClass('filter__option--hidden').attr('name', 'filter').focus();
+      .removeClass('filter__option--hidden').attr('name', 'filter').trigger('focus');
   });
-}
+};
 
 onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/form-collection-type.js

@@ -10,45 +10,53 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  */
 
-'use strict';
-
 import {onDomReady} from 'lin3s-event-bus';
-
 import $ from 'jquery';
 
-let $form, $collectionHolder;
-
-function addFormType($aCollectionHolder) {
-  let
-    prototype = $aCollectionHolder.attr('data-prototype'),
-    prototypeName = $aCollectionHolder.attr('data-prototype-name'),
-    regExp = new RegExp(prototypeName === undefined ? '__name__' : prototypeName, 'g'),
-    index = $aCollectionHolder.find(':input').length,
-    newForm = prototype.replace(regExp, index);
-
-  $(newForm).appendTo($aCollectionHolder);
-  $aCollectionHolder.data('index', index + 1);
-}
-
-function onReady() {
-  $form = $('form');
-
-  $('.form__collection-item-toggle').click(function () {
-    $(this).parents('.form__collection-item').toggleClass('form__collection-item--hidden')
-  });
-
-  $form.on('click', '.js-collection-add', function () {
-    $collectionHolder = $(this).closest('.form__collection').find('.form__collection-items').first();
-    addFormType($collectionHolder);
-
-    return false;
-  });
-
-  $form.on('click', '.js-collection-remove', function () {
-    $(this).closest('.form__collection-item').remove();
-
-    return false;
-  });
-}
+const
+  addFormType = ($aCollectionHolder) => {
+    let
+      prototype = $aCollectionHolder.attr('data-prototype'),
+      prototypeName = $aCollectionHolder.attr('data-prototype-name'),
+      regExp = new RegExp(prototypeName === undefined ? '__name__' : prototypeName, 'g'),
+      index = $aCollectionHolder.find(':input').length,
+      newForm = prototype.replace(regExp, index);
+
+    $(newForm).appendTo($aCollectionHolder);
+    $aCollectionHolder.data('index', index + 1);
+  },
+  onReady = () => {
+    const
+      $formCollectionAddButtons = $('.js-collection-add'),
+      $formCollectionRemoveButtons = $('.js-collection-remove'),
+      $formToggles = $('.form__collection-item-toggle');
+
+    Array.from($formCollectionAddButtons).forEach(formCollectionAddButton => {
+      const $formCollectionAddButton = $(formCollectionAddButton);
+
+      $formCollectionAddButton.on('click', () => {
+        const $collectionHolder = $formCollectionAddButton
+          .closest('.form__collection').find('.form__collection-items').first();
+        addFormType($collectionHolder);
+
+        return false;
+      });
+    });
+
+    Array.from($formCollectionRemoveButtons).forEach(formCollectionRemoveButton => {
+      const $formCollectionRemoveButton = $(formCollectionRemoveButton);
+      $formCollectionRemoveButton.closest('.form__collection-item').remove();
+
+      return false;
+    });
+
+    Array.from($formToggles).forEach(formToggle => {
+      const $formToggle = $(formToggle);
+
+      $formToggle.on('click', function () {
+        $formToggle.closest('.form__collection-item').toggleClass('form__collection-item--hidden')
+      });
+    });
+  };
 
 onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/menu.js

@@ -10,24 +10,25 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  */
 
-'use strict';
-
 import {onDomReady} from 'lin3s-event-bus';
-
 import $ from 'jquery';
 
-function onReady() {
-  $('.menu-toggle').click(function () {
-    var $menu = $(this).parents('.menu');
+const onReady = () => {
+  const $menuToggle = $('.menu-toggle');
+
+  $menuToggle.on('click', () => {
+    const $menu = $menuToggle.closest('.menu');
+
+    $menuToggle.toggleClass('menu-toggle--visible');
 
-    $(this).toggleClass('menu-toggle--visible');
     if ($menu.hasClass('menu--open')) {
       $menu.attr('style', '');
     } else {
       $menu.height($menu.get(0).scrollHeight);
     }
+
     $menu.toggleClass('menu--open');
   });
-}
+};
 
 onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/panel.js

@@ -10,16 +10,19 @@
  * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
  */
 
-'use strict';
-
 import {onDomReady} from 'lin3s-event-bus';
-
 import $ from 'jquery';
 
-function onReady() {
-  $('.panel__header').click(function () {
-    $(this).parent().toggleClass('panel--closed');
+const onReady = () => {
+  const $panelHeaders = $('.panel__header');
+
+  Array.from($panelHeaders).forEach(panelHeader => {
+    const $panelHeader = $(panelHeader);
+
+    $panelHeader.on('click', () => {
+      $panelHeader.parent().toggleClass('panel--closed');
+    });
   });
-}
+};
 
 onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/polyfills.js

@@ -0,0 +1,14 @@
+/*
+ * This file is part of the Admin Bundle.
+ *
+ * Copyright (c) 2015-2016 LIN3S <info@lin3s.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Mikel Tuesta <mikeltuesta@gmail.com>
+ */
+
+if (typeof Array.from === 'undefined') {
+  Array.from = require('array-from'); // eslint-disable-line no-undef
+}

src/LIN3S/AdminBundle/Resources/private/package.json

@@ -42,6 +42,7 @@
     "build:prod": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js -p"
   },
   "dependencies": {
+    "array-from": "^2.1.1",
     "fastclick": "^1.0.6",
     "jquery": "^3.2.1",
     "lin3s-css-grid": "^0.3.0",

src/LIN3S/AdminBundle/Resources/private/yarn.lock

@@ -115,6 +115,10 @@ array-find-index@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1"
 
+array-from@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/array-from/-/array-from-2.1.1.tgz#cfe9d8c26628b9dc5aecc62a9f5d8f1f352c1195"
+
 array-map@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-map/-/array-map-0.0.0.tgz#88a2bab73d1cf7bcd5c1b118a003f66f665fa662"