Skip to content

Instantly share code, notes, and snippets.

@hs0ucy

hs0ucy/index.html

Created March 1, 2018 15:17
Show Gist options
  • Save hs0ucy/37a9d550fdb7f66a48aa38a96e784635 to your computer and use it in GitHub Desktop.
Save hs0ucy/37a9d550fdb7f66a48aa38a96e784635 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/zilatec
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-css">
.js-drawer-isopen, .js-drawer-isclose {
background: yellow;
height: auto;
overflow: hidden;
}
.js-drawer-isopen {
max-height: 100em;
transition: max-height 0.5s ease-in-out;
}
.js-drawer-isclose {
max-height: 0;
transition: max-height 0.35s ease-in-out;
}
</style>
</head>
<body>
<button id="btn1">Boutton 1</button>
<button id="btn2">Boutton 2</button>
<button id="btn3">Boutton 3</button>
<section class="a ab abc" id="tirr1">Tirroir 1</section>
<section class="d de def" id="tirr2">Tirroir 2</section>
<section class="g gh ghi" id="tirr3">Tirroir 3</section>
<script id="jsbin-javascript">
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var Drawer = function Drawer(handle, drawer, user_options) {
var _this = this;
_classCallCheck(this, Drawer);
this.drawer = drawer;
this.handle = handle;
this.default_options = {
open: false,
openOnlyOne: false,
openClass: 'js-drawer-isopen',
closeClass: 'js-drawer-isclose'
};
// Merge `user_options` & `default_options` into a new object
this.options = Object.assign({}, this.default_options, user_options);
// Check if `handle` and `drawer` are existing `HTMLElement`
this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) && !!(this.drawer && this.drawer.nodeType === 1);
// Check if `handle` and `drawer` are existing `NodeList`
this.isNodeList = handle instanceof NodeList && drawer instanceof NodeList && handle.length === drawer.length;
this.init = function () {
var drawer = _this.drawer;
var handle = _this.handle;
if (_this.isHTMLElement) {
_this.openClose(_this.handle, _this.drawer);
} else if (_this.isNodeList) {
(function () {
var handles = Array.from(_this.handle);
var drawers = Array.from(_this.drawer);
var drawerset = [handles, drawers];
var that = _this;
drawers.forEach(function (drawer, index) {
that.openClose(handles[index], drawers[index], drawerset);
});
})();
}
return null;
};
this.openClose = function (currHandle, currDrawer, drawerset) {
var isOpen = _this.options.openClass;
var isClose = _this.options.closeClass;
var _toggle = function _toggle(thatEvt) {
var handles = drawerset ? drawerset[0] : null;
var drawers = drawerset ? drawerset[1] : null;
thatEvt.preventDefault();
thatEvt.stopPropagation();
if (currDrawer.dataset.jsDrawerIsopen === 'false') {
var drawerIsOpen = new CustomEvent('drawerIsOpen', {});
currDrawer.dispatchEvent(drawerIsOpen);
currDrawer.dataset.jsDrawerIsopen = 'true';
thatEvt.target.dataset.jsDrawerHasopened = 'true';
} else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
currDrawer.dataset.jsDrawerIsopen = 'false';
thatEvt.target.dataset.jsDrawerHasopened = 'false';
}
if (_this.options.openOnlyOne) {
drawers.filter(function (d) {
return d !== currDrawer;
}).forEach(function (d, index) {
d.dataset.jsDrawerIsopen = 'false';
});
handles.filter(function (h) {
return h !== currHandle;
}).forEach(function (h, index) {
h.dataset.jsDrawerHasopened = 'false';
});
}
currDrawer.addEventListener('drawerIsOpen', function (e) {
console.log(e);
});
};
// Closed by default
if (_this.options.open) {
currDrawer.dataset.jsDrawerIsopen = 'true';
currHandle.dataset.jsDrawerHasopened = 'true';
} else {
currDrawer.dataset.jsDrawerIsopen = 'false';
currHandle.dataset.jsDrawerHasopened = 'false';
}
// Onclick toggle between open and close
return currHandle.addEventListener('click', _toggle);
};
};
var test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), { openOnlyOne: true });
test.init();
//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
</script>
<script id="jsbin-source-css" type="text/css">.js-drawer {
// Accordion Slide{Up|Down}
&-isopen,
&-isclose {
background: yellow;
height: auto;
overflow: hidden;
}
&-isopen {
max-height: 100em;
transition: max-height 0.5s ease-in-out;
}
&-isclose {
max-height: 0;
transition: max-height 0.35s ease-in-out;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">class Drawer {
constructor(handle, drawer, user_options) {
this.drawer = drawer;
this.handle = handle;
this.default_options = {
open: false,
openOnlyOne: false,
openClass: 'js-drawer-isopen',
closeClass: 'js-drawer-isclose',
};
// Merge `user_options` & `default_options` into a new object
this.options = Object.assign({}, this.default_options, user_options);
// Check if `handle` and `drawer` are existing `HTMLElement`
this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) &&
!!(this.drawer && this.drawer.nodeType === 1);
// Check if `handle` and `drawer` are existing `NodeList`
this.isNodeList = (handle instanceof NodeList &&
drawer instanceof NodeList) &&
(handle.length === drawer.length);
this.init = () => {
const drawer = this.drawer;
const handle = this.handle;
if (this.isHTMLElement) {
this.openClose(this.handle, this.drawer);
} else if (this.isNodeList) {
const handles = Array.from(this.handle);
const drawers = Array.from(this.drawer);
const drawerset = [handles, drawers];
const that = this;
drawers.forEach((drawer, index) => {
that.openClose(handles[index], drawers[index], drawerset);
});
}
return null;
};
this.openClose = (currHandle, currDrawer, drawerset) => {
const isOpen = this.options.openClass;
const isClose = this.options.closeClass;
const _toggle = thatEvt => {
const handles = (drawerset ? drawerset[0] : null);
const drawers = (drawerset ? drawerset[1] : null);
thatEvt.preventDefault();
thatEvt.stopPropagation();
if (currDrawer.dataset.jsDrawerIsopen === 'false') {
const drawerIsOpen = new CustomEvent('drawerIsOpen', {});
currDrawer.dispatchEvent(drawerIsOpen);
currDrawer.dataset.jsDrawerIsopen = 'true';
thatEvt.target.dataset.jsDrawerHasopened = 'true';
} else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
currDrawer.dataset.jsDrawerIsopen = 'false';
thatEvt.target.dataset.jsDrawerHasopened = 'false';
}
if (this.options.openOnlyOne) {
drawers.filter(d => d !== currDrawer).forEach((d, index) => {
d.dataset.jsDrawerIsopen = 'false';
});
handles.filter(h => h !== currHandle).forEach((h, index) => {
h.dataset.jsDrawerHasopened = 'false';
});
}
currDrawer.addEventListener('drawerIsOpen', function(e) {
console.log(e);
});
};
// Closed by default
if (this.options.open) {
currDrawer.dataset.jsDrawerIsopen = 'true';
currHandle.dataset.jsDrawerHasopened = 'true';
} else {
currDrawer.dataset.jsDrawerIsopen = 'false';
currHandle.dataset.jsDrawerHasopened = 'false';
}
// Onclick toggle between open and close
return currHandle.addEventListener('click', _toggle);
};
}
}
const test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), {openOnlyOne: true,});
test.init();
//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
</script></body>
</html>
Raw
jsbin.zilatec.css
.js-drawer-isopen, .js-drawer-isclose {
background: yellow;
height: auto;
overflow: hidden;
}
.js-drawer-isopen {
max-height: 100em;
transition: max-height 0.5s ease-in-out;
}
.js-drawer-isclose {
max-height: 0;
transition: max-height 0.35s ease-in-out;
}
Raw
jsbin.zilatec.js
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
var Drawer = function Drawer(handle, drawer, user_options) {
var _this = this;
_classCallCheck(this, Drawer);
this.drawer = drawer;
this.handle = handle;
this.default_options = {
open: false,
openOnlyOne: false,
openClass: 'js-drawer-isopen',
closeClass: 'js-drawer-isclose'
};
// Merge `user_options` & `default_options` into a new object
this.options = Object.assign({}, this.default_options, user_options);
// Check if `handle` and `drawer` are existing `HTMLElement`
this.isHTMLElement = !!(this.handle && this.handle.nodeType === 1) && !!(this.drawer && this.drawer.nodeType === 1);
// Check if `handle` and `drawer` are existing `NodeList`
this.isNodeList = handle instanceof NodeList && drawer instanceof NodeList && handle.length === drawer.length;
this.init = function () {
var drawer = _this.drawer;
var handle = _this.handle;
if (_this.isHTMLElement) {
_this.openClose(_this.handle, _this.drawer);
} else if (_this.isNodeList) {
(function () {
var handles = Array.from(_this.handle);
var drawers = Array.from(_this.drawer);
var drawerset = [handles, drawers];
var that = _this;
drawers.forEach(function (drawer, index) {
that.openClose(handles[index], drawers[index], drawerset);
});
})();
}
return null;
};
this.openClose = function (currHandle, currDrawer, drawerset) {
var isOpen = _this.options.openClass;
var isClose = _this.options.closeClass;
var _toggle = function _toggle(thatEvt) {
var handles = drawerset ? drawerset[0] : null;
var drawers = drawerset ? drawerset[1] : null;
thatEvt.preventDefault();
thatEvt.stopPropagation();
if (currDrawer.dataset.jsDrawerIsopen === 'false') {
var drawerIsOpen = new CustomEvent('drawerIsOpen', {});
currDrawer.dispatchEvent(drawerIsOpen);
currDrawer.dataset.jsDrawerIsopen = 'true';
thatEvt.target.dataset.jsDrawerHasopened = 'true';
} else if (currDrawer.dataset.jsDrawerIsopen === 'true') {
currDrawer.dataset.jsDrawerIsopen = 'false';
thatEvt.target.dataset.jsDrawerHasopened = 'false';
}
if (_this.options.openOnlyOne) {
drawers.filter(function (d) {
return d !== currDrawer;
}).forEach(function (d, index) {
d.dataset.jsDrawerIsopen = 'false';
});
handles.filter(function (h) {
return h !== currHandle;
}).forEach(function (h, index) {
h.dataset.jsDrawerHasopened = 'false';
});
}
currDrawer.addEventListener('drawerIsOpen', function (e) {
console.log(e);
});
};
// Closed by default
if (_this.options.open) {
currDrawer.dataset.jsDrawerIsopen = 'true';
currHandle.dataset.jsDrawerHasopened = 'true';
} else {
currDrawer.dataset.jsDrawerIsopen = 'false';
currHandle.dataset.jsDrawerHasopened = 'false';
}
// Onclick toggle between open and close
return currHandle.addEventListener('click', _toggle);
};
};
var test = new Drawer(document.querySelectorAll('button'), document.querySelectorAll('section'), { openOnlyOne: true });
test.init();
//const test2 = new Drawer(document.querySelector('#btn1'), document.querySelector('#tirr1'));
//test2.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment