Removed jquery dependencies from the code

Author: benatespina

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

@@ -13,11 +13,11 @@
 import {onDomReady} from 'lin3s-event-bus';
 import FastClick from 'fastclick';
 
+import './components/Filter';
 import './components/FormCollection';
+import './components/MenuToggle';
+import './components/Panel';
 import './polyfills';
-import './filter';
-import './menu';
-import './panel';
 
 const onReady = () => {
   new FastClick(document.body);

src/LIN3S/AdminBundle/Resources/private/js/components/Filter.js

@@ -0,0 +1,53 @@
+/*
+ * This file is part of the Admin Bundle.
+ *
+ * Copyright (c) 2015-present LIN3S <info@lin3s.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Beñat Espiña <benatespina@gmail.com>
+ */
+
+import {onDomReady} from 'lin3s-event-bus';
+
+class Filter {
+  constructor(rootNode) {
+    this.options = rootNode.querySelector('.filter__options');
+    this.filterBy = rootNode.querySelector('.filter__filter-by');
+
+    this.onFilterByChanged = this.onFilterByChanged.bind(this);
+
+    this.filterBy.addEventListener('change', this.onFilterByChanged);
+  }
+
+  onFilterByChanged(event) {
+    const
+      optionInputs = this.options.children,
+      filter = this.options.querySelector(`[data-filter-field="${event.currentTarget.value}"]`),
+      focusEvent = document.createEvent('HTMLEvents');
+
+    Array.from(optionInputs).forEach((optionInput) => {
+      optionInput.classList.add('filter__option--hidden');
+      optionInput.setAttribute('name', '');
+    });
+
+    focusEvent.initEvent('focus', true, false);
+
+    filter.classList.remove('filter__option--hidden');
+    filter.setAttribute('name', 'filter');
+    filter.dispatchEvent(focusEvent);
+  }
+}
+
+const onReady = () => {
+  const filters = document.querySelectorAll('.filter');
+
+  if (filters.length === 0) {
+    return;
+  }
+
+  Array.from(filters).forEach(filter => new Filter(filter));
+};
+
+onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/components/MenuToggle.js

@@ -0,0 +1,50 @@
+/*
+ * This file is part of the Admin Bundle.
+ *
+ * Copyright (c) 2015-present LIN3S <info@lin3s.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Beñat Espiña <benatespina@gmail.com>
+ * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
+ */
+
+import {onDomReady} from 'lin3s-event-bus';
+
+class MenuToggle {
+  constructor(rootNode) {
+    this.menuToggle = rootNode;
+    this.menu = this.menuToggle.closest('.menu');
+
+    this.onClick = this.onClick.bind(this);
+
+    this.menuToggle.addEventListener('click', this.onClick);
+  }
+
+  onClick(event) {
+    event.preventDefault();
+
+    this.menuToggle.classList.toggle('menu-toggle--visible');
+
+    if (this.menu.classList.contains('menu--open')) {
+      this.menu.setAttribute('style', '');
+    } else {
+      this.menu.style.height = `${this.menu.scrollHeight}px`;
+    }
+
+    this.menu.classList.toggle('menu--open');
+  }
+}
+
+const onReady = () => {
+  const menuToggles = document.querySelectorAll('.menu-toggle');
+
+  if (menuToggles.length === 0) {
+    return;
+  }
+
+  Array.from(menuToggles).forEach(menuToggle => new MenuToggle(menuToggle));
+};
+
+onDomReady(onReady);

src/LIN3S/AdminBundle/Resources/private/js/components/Panel.js

@@ -0,0 +1,42 @@
+/*
+ * This file is part of the Admin Bundle.
+ *
+ * Copyright (c) 2015-present LIN3S <info@lin3s.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *
+ * @author Beñat Espiña <benatespina@gmail.com>
+ * @author Gorka Laucirica <gorka.lauzirika@gmail.com>
+ */
+
+import {onDomReady} from 'lin3s-event-bus';
+
+class Panel {
+  constructor(rootNode) {
+    this.panel = rootNode;
+    this.panelHeaders = this.panel.querySelectorAll('.panel__header');
+
+    this.onClick = this.onClick.bind(this);
+
+    Array.from(this.panelHeaders).forEach(panelHeader => panelHeader.addEventListener('click', this.onClick));
+  }
+
+  onClick(event) {
+    event.preventDefault();
+
+    this.panel.classList.toggle('panel--closed');
+  }
+}
+
+const onReady = () => {
+  const panels = document.querySelectorAll('.panel');
+
+  if (panels.length === 0) {
+    return;
+  }
+
+  Array.from(panels).forEach(panel => new Panel(panel));
+};
+
+onDomReady(onReady);

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

@@ -1,30 +1,30 @@
 {
   "name": "lin3s-admin-bundle",
+  "description": "Admin Bundle in the LIN3S way",
   "author": "LIN3S",
+  "license": "MIT",
   "private": true,
+  "scripts": {
+    "build": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js",
+    "build:watch": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js --watch",
+    "build:prod": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js -p"
+  },
   "babel": {
     "presets": [
       "stage-2",
-      "react",
       "es2015"
     ],
     "plugins": [
       "transform-class-properties"
     ]
   },
-  "scripts": {
-    "build": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js",
-    "build:watch": "node_modules/.bin/webpack --config=./webpack.bundle.config.babel.js --watch",
-    "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",
     "lin3s-event-bus": "^0.6.0",
-    "lin3s-front-foundation": "^0.5.0",
-    "magnific-popup": "^1.1.0"
+    "lin3s-front-foundation": "^0.5.0"
   },
   "devDependencies": {
     "autoprefixer": "^6.7.2",

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

@@ -1,17 +1,18 @@
 // This file is part of the Admin Bundle.
 //
-// Copyright (c) 2015-2016 LIN3S <info@lin3s.com>
+// Copyright (c) 2015-present LIN3S <info@lin3s.com>
 //
 // For the full copyright and license information, please view the LICENSE
 // file that was distributed with this source code.
 //
 // @author Gorka Laucirica <gorka.lauzirika@gmail.com>
-
-@import './../../node_modules/lin3s-css-grid/scss/variables';
+// @author Beñat Espiña <benatespina@gmail.com>
 
 @import '../variables/colors';
+@import '../variables/grid';
 
 $filter-background-color: $color-white !default;
+$filter-element-height: 37px;
 
 .filter {
   align-items: center;
@@ -22,21 +23,32 @@ $filter-background-color: $color-white !default;
 }
 
 .filter__filter-by {
+  margin-right: -1px; // Solves 1px border-width sum
   order: 0;
 }
 
 .filter__filter-by,
 .filter__options .form__input {
   width: 100%;
+
+  &:focus {
+    z-index: 1;
+  }
 }
 
 .filter__option--hidden {
   display: none;
 }
 
 .filter__button {
-  margin-top: 15px;
-  width: 100%;
+  height: $filter-element-height;
+
+  .button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+    box-shadow: none;
+    height: 100%;
+  }
 }
 
 @media #{$medium-up} {
@@ -46,9 +58,6 @@ $filter-background-color: $color-white !default;
 
   .filter__button.button {
     align-self: stretch;
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-    box-shadow: none;
     margin-top: 0;
     width: auto;
   }

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

@@ -69,7 +69,8 @@ $form-collection-item-toggle-icon-color: $color-mercury !default;
 .form-collection__footer {
   border-top: 1px solid $form-collection-footer-border-color;
   order: 3;
-  padding: 15px;
+  padding-bottom: 15px;
+  padding-top: 15px;
   text-align: right;
 }