Skip to content

Instantly share code, notes, and snippets.

@navio

navio/index.html

Created May 26, 2017 03:07
Show Gist options
  • Save navio/69c8db77b8b515f72b4ce226d4eba3f7 to your computer and use it in GitHub Desktop.
Save navio/69c8db77b8b515f72b4ce226d4eba3f7 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/xozaqo
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">
.modal{
display:block;
position:absolute;
margin-top:50%;
margin-left:50%;
border: 1px solid;
}
.hidden{
display:none;
}
.controllers{
border:1px solid;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="hidden modal">I am a modal</div>
<div class="hidden modal">I am a new modal</div>
<div class="hidden modal">I am a third modal</div>
<div class="controllers">
<label>Meh<button>Modal 1</button></label><Br />
<label>Meh<button>Modal 2</button></label><Br />
<label>Meh<button>Modal 3</button></label><Br />
</div>
<div>
<script id="jsbin-javascript">
var elements = function(wrapper){
var activeElements = [];
/*
* Creates special container outside of body.
*
*/
var _inside =
function(container){
var inside =
document.querySelector('#inside');
if(!inside){
inside = document.createElement('div')
inside.setAttribute('id','inside');
document.body.parentElement.appendChild(inside);
}
return inside;
};
/*
* Add new element to the active elements stack.
*/
var _add =
function(element){
activeElements.push(element);
}
/*
* Retrieves next in line to be displayed.
*
*/
var _next =
function(){
_focusMe(activeElements.pop(element));
}
/* Find first focusable element in the container
* If nothing exist it creates an anchor.
* @element = HTMLNode
*/
var _focusMe =
function(element){
var attach =
element.querySelectorAll('[tabindex],a,input');
attach = attach.length > 0 ? attach.length[0] :
(function(){ var anchor = document.createElement('a'); anchor.setAttribute('href','#'); return anchor; }())
;
attach.focus();
}
/*
* Hides previous visible element.
* Hides body for screen reader.
* Show new visible element
*/
var _onlyMe = function(el){
var inside = _inside();
document.body
.setAttribute("aria-hidden","true");
inside
.setAttribute("aria-hidden","false");
inside
.appendChild(el);
return;
}
return {
add: _add,
next: _next
}
}
(function(window){
var toggleMe =
function(el){
return function(){
el.classList.toggle('hidden');
};
};
var modals =
document.querySelectorAll('div.modal')
var buttons =
document.querySelectorAll('button');
buttons
.forEach(function(el,ind){
el.addEventListener('click',toggleMe(modals[ind]));
});
}(window))
</script>
<script id="jsbin-source-css" type="text/css">
.modal{
display:block;
position:absolute;
margin-top:50%;
margin-left:50%;
border: 1px solid;
}
.hidden{
display:none;
}
.controllers{
border:1px solid;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var elements = function(wrapper){
var activeElements = [];
/*
* Creates special container outside of body.
*
*/
var _inside =
function(container){
var inside =
document.querySelector('#inside');
if(!inside){
inside = document.createElement('div')
inside.setAttribute('id','inside');
document.body.parentElement.appendChild(inside);
}
return inside;
};
/*
* Add new element to the active elements stack.
*/
var _add =
function(element){
activeElements.push(element);
}
/*
* Retrieves next in line to be displayed.
*
*/
var _next =
function(){
_focusMe(activeElements.pop(element));
}
/* Find first focusable element in the container
* If nothing exist it creates an anchor.
* @element = HTMLNode
*/
var _focusMe =
function(element){
var attach =
element.querySelectorAll('[tabindex],a,input');
attach = attach.length > 0 ? attach.length[0] :
(function(){ var anchor = document.createElement('a'); anchor.setAttribute('href','#'); return anchor; }())
;
attach.focus();
}
/*
* Hides previous visible element.
* Hides body for screen reader.
* Show new visible element
*/
var _onlyMe = function(el){
var inside = _inside();
document.body
.setAttribute("aria-hidden","true");
inside
.setAttribute("aria-hidden","false");
inside
.appendChild(el);
return;
}
return {
add: _add,
next: _next
}
}
(function(window){
var toggleMe =
function(el){
return function(){
el.classList.toggle('hidden');
};
};
var modals =
document.querySelectorAll('div.modal')
var buttons =
document.querySelectorAll('button');
buttons
.forEach(function(el,ind){
el.addEventListener('click',toggleMe(modals[ind]));
});
}(window))</script></body>
</html>
Raw
jsbin.xozaqo.css
.modal{
display:block;
position:absolute;
margin-top:50%;
margin-left:50%;
border: 1px solid;
}
.hidden{
display:none;
}
.controllers{
border:1px solid;
}
Raw
jsbin.xozaqo.js
var elements = function(wrapper){
var activeElements = [];
/*
* Creates special container outside of body.
*
*/
var _inside =
function(container){
var inside =
document.querySelector('#inside');
if(!inside){
inside = document.createElement('div')
inside.setAttribute('id','inside');
document.body.parentElement.appendChild(inside);
}
return inside;
};
/*
* Add new element to the active elements stack.
*/
var _add =
function(element){
activeElements.push(element);
}
/*
* Retrieves next in line to be displayed.
*
*/
var _next =
function(){
_focusMe(activeElements.pop(element));
}
/* Find first focusable element in the container
* If nothing exist it creates an anchor.
* @element = HTMLNode
*/
var _focusMe =
function(element){
var attach =
element.querySelectorAll('[tabindex],a,input');
attach = attach.length > 0 ? attach.length[0] :
(function(){ var anchor = document.createElement('a'); anchor.setAttribute('href','#'); return anchor; }())
;
attach.focus();
}
/*
* Hides previous visible element.
* Hides body for screen reader.
* Show new visible element
*/
var _onlyMe = function(el){
var inside = _inside();
document.body
.setAttribute("aria-hidden","true");
inside
.setAttribute("aria-hidden","false");
inside
.appendChild(el);
return;
}
return {
add: _add,
next: _next
}
}
(function(window){
var toggleMe =
function(el){
return function(){
el.classList.toggle('hidden');
};
};
var modals =
document.querySelectorAll('div.modal')
var buttons =
document.querySelectorAll('button');
buttons
.forEach(function(el,ind){
el.addEventListener('click',toggleMe(modals[ind]));
});
}(window))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment