Skip to content

First attempt at removing the jQuery dependancy #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jasonwilliams wants to merge 1 commit into
base: master
Choose a base branch
from
Open

First attempt at removing the jQuery dependancy #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 53 additions & 40 deletions app/focus-element-overlay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,51 +26,43 @@
*/

(function(exports) {
var $overlay = null;
var $element = null;
var overlay = null;
var element = null;
var isVisible = false;
var options = {
fadeDuration: 700,
hideOnClick: false,
hideOnESC: false,
findOnResize: false
hideOnESC: false
};
var body = null;

$(document).ready(setup);
document.addEventListener('DOMContentLoaded', setup);

function setup() {
createPlugin();
body = document.body
var newDiv = document.createElement('div')

$('body').prepend('<div id="overlay-layer"></div>');
$overlay = $('#overlay-layer');
newDiv.id = "overlay-layer";
body.insertBefore(newDiv, body.firstChild);
overlay = document.querySelector('#overlay-layer');

addStylesheet();
addEvents();
}

/**
* Defines Focusable as jQuey plugin
* @return {jQuery object} this
*/
function createPlugin() {
$.fn.focusable = function(options) {
Focusable.setFocus(this, options);
return this;
};
}

function addEvents() {
$overlay.on('click', '.column', clickOnOverlay);
$(window).on("resize", resizeHandler);
$(window).on("keyup", keyupHandler);
overlay.addEventListener('click', clickOnOverlay);
window.addEventListener('resize', resizeHandler);
window.addEventListener("keyup", keyupHandler);
}

function resizeHandler() {
if (!$element) {
if (!element) {
return;
}
//Refind the element
$element = options.findOnResize ? $($element.selector) : $element;
// .selector should not be used anyway as its deprecated
// element = options.findOnResize ? $($element.selector) : element;

createColumns();
}
Expand All @@ -87,27 +79,44 @@
hide();
}

function setFocus($el, userOptions) {
$('body').css('overflow', 'hidden');
options = $.extend(options, userOptions);
$element = $el;
function extend(a, b){
for(var key in b)
if(b.hasOwnProperty(key))
a[key] = b[key];
return a;
}

function setFocus(el, userOptions) {
body.style.overflow = 'hidden';
options = extend(options, userOptions);
element = el;
createColumns();
$overlay.fadeIn(options.fadeDuration);
overlay.style.display = "block";
// the transition won't happen at the same time as display: block; create a short delay
setTimeout(function() {
overlay.style.opacity = "1";
}, 50);
};

function clearColumns() {
$overlay.find('.column').remove();
var columns = overlay.querySelectorAll('.column');
/* Convert nodeList into array */
columns = Array.prototype.slice.call(columns);
for (var i = 0;i < columns.length; i++) {
columns[i].parentNode.removeChild(columns[i]);
}
}

function hide() {
isVisible = false;
$element = null;
$('body').css('overflow', '');
$overlay.fadeOut(options.fadeDuration, clearColumns);
element = null;
body.style.overflow = '';
overlay.style.display = "none";
clearColumns();
}

function createColumns() {
if (!$element) {
if (!element) {
return;
}

Expand All @@ -122,9 +131,10 @@
}

function createColumn(index) {
var offset = $element.offset();
var top = 0, left = 0, width = px($element.outerWidth()), height = "100%";
var offset = element.getBoundingClientRect();
var top = 0, left = 0, width = px(element.clientWidth), height = "100%";
var styles = '';
var columnDiv = document.createElement('div');

switch (index) {
case 0:
Expand All @@ -136,16 +146,19 @@
break;
case 2:
left = px(offset.left);
top = px($element.outerHeight() + offset.top);
top = px(element.clientHeight + offset.top);
break;
case 3:
width = "100%";
left = px(($element.outerWidth() + offset.left));
left = px((element.clientWidth + offset.left));
break;
}

styles = 'top:' + top + ';left:' + left + ';width:' + width + ';height:' + height;
$overlay.append('<div class="column" style="' + styles + '"></div>');
columnDiv.className = "column"
columnDiv.setAttribute('style', styles);

overlay.appendChild(columnDiv);
}

function px(value) {
Expand All @@ -162,7 +175,7 @@
return style.sheet;
})();

sheet.insertRule("#overlay-layer{ display:none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: hidden; pointer-events: none; }", 0);
sheet.insertRule("#overlay-layer{ display:none; opacity:0; transition: opacity 700ms; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; overflow: hidden; pointer-events: none; }", 0);
sheet.insertRule("#overlay-layer .column{ position: absolute; background: rgba(0,0,0,0.8); pointer-events: all; }", 1);
}

Expand Down
15 changes: 10 additions & 5 deletions sample-app/demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
$(document).ready(function() {
$('.show').on('click', show);
$('.hide').on('click', hide);
document.addEventListener('DOMContentLoaded', function() {
var listeners = document.querySelectorAll('.show');
listeners = Array.prototype.slice.call(listeners);

for (var i = 0; i < listeners.length; i++) {
listeners[i].addEventListener('click', show);
}
// document.querySelector('.hide').addEventListener('click', hide);

function show() {
var selector = $(this).attr('data-selector');
Focusable.setFocus($(selector));
var selector = this.getAttribute('data-selector');
Focusable.setFocus(document.querySelector(selector));
}

function hide() {
Expand Down
3 changes: 1 addition & 2 deletions sample-app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<title>Focus element overlay sample app</title>
<script src="jquery-2.1.1.js"></script>
<script src="../app/focus-element-overlay.js"></script>
<script src="demo.js"></script>
<style>
Expand Down Expand Up @@ -33,7 +32,7 @@
<header>
<button class="show" data-selector="header">Focus header</button>
<button class="show" data-selector="ul">Focus list</button>
<button class="show" data-selector="li:first">Focus first item</button>
<button class="show" data-selector="li:first-child">Focus first item</button>
<button class="show" data-selector="img">Focus image</button>
</header>
<ul>
Expand Down