Skip to content

Commit

Permalink
Remove jquery requirement from expand component (#59)
Browse files Browse the repository at this point in the history
alexander-schranz authored Oct 1, 2021
1 parent 42e9f93 commit 1dc1d07
Showing 1 changed file with 17 additions and 17 deletions.
34 changes: 17 additions & 17 deletions packages/components/expand/expand.js
Original file line number Diff line number Diff line change
@@ -2,8 +2,6 @@

'use strict';

var $ = require('jquery');

module.exports = function Expand() {
var expand = {};

@@ -25,31 +23,33 @@ module.exports = function Expand() {
* @param {object} options
*/
expand.initialize = function initialize(el, options) {
// Define necessary component elements, instance $el handed in on initialization
expand.$el = $(el);
expand.id = expand.$el.attr('id');
expand.el = el;
expand.id = el.id;
expand.closeOnEsc = options.closeOnEsc ? options.closeOnEsc : false;
expand.$container = options.container ? $('#' + options.container) : $('#' + expand.id + '-container');
expand.container = options.container
? document.getElementById(options.container)
: document.getElementById(expand.id + '-container');
expand.modifier = options.modifier ? options.modifier : '--open';
expand.toggleButtonClass = expand.getFirstClass(expand.$el) + expand.modifier;
expand.toggleContainerClass = expand.getFirstClass(expand.$container) + expand.modifier;
expand.toggleButtonClass = expand.getFirstClass(expand.el) + expand.modifier;
expand.toggleContainerClass = expand.getFirstClass(expand.container) + expand.modifier;

// Run init functions
expand.bindEvents();
};

/**
* @param {jQuery} $element
* @param {HTMLElement} element
* @returns {string}
*/
expand.getFirstClass = function getFirstClass($element) {
return $element.attr('class').split(' ')[0];
expand.getFirstClass = function getFirstClass(element) {
return element.getAttribute('class').split(' ')[0];
};

expand.bindEvents = function bindEvents() {
expand.$el.on('click', expand.toggle);
expand.el.addEventListener('click', expand.toggle);

if (expand.closeOnEsc) {
$(document).keyup(function(event) {
document.addEventListener('keyup', function(event) {
if (event.keyCode === 27) {
expand.close();
}
@@ -58,13 +58,13 @@ module.exports = function Expand() {
};

expand.toggle = function toggle() {
expand.$el.toggleClass(expand.toggleButtonClass);
expand.$container.toggleClass(expand.toggleContainerClass);
expand.el.classList.toggle(expand.toggleButtonClass);
expand.container.classList.toggle(expand.toggleContainerClass);
};

expand.close = function close() {
expand.$el.removeClass(expand.toggleButtonClass);
expand.$container.removeClass(expand.toggleContainerClass);
expand.el.classList.remove(expand.toggleButtonClass);
expand.container.classList.remove(expand.toggleContainerClass);
};

return {

0 comments on commit 1dc1d07

Please sign in to comment.