Created
January 12, 2014 00:14
-
-
Save dereckson/8378753 to your computer and use it in GitHub Desktop.
https://github.com/impressivewebs/QuestionMark.js ported to Dojo 1.9 and Mousetrap
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ------------------------------------------------------------- | |
Keyboard shorcuts help | |
Based on QuestionMark.js by Louis Lazaris | |
http://impressivewebs.github.io/QuestionMark.js/ | |
CC-BY 2.0 license with additional waiver 'no credit required' | |
Port to Dojo 1.9 by Dereckson | |
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ | |
require([ | |
"dojo/request", | |
"dojo/on", | |
"dojo/window", | |
"dojo/dom", | |
"dojo/dom-construct", | |
"dojo/dom-class", | |
"dojo/query" | |
], function (request, on, win, dom, domConstruct, domClass, query) { | |
/** | |
* Timeout to resize the help window | |
*/ | |
var resizeHelpWindowTimeout = null; | |
/** | |
* Initializes keyboard shorcuts help | |
* | |
* @param string content The HTML content of the help window | |
*/ | |
function initializeKeyboardShorcuts (content) { | |
//Places keyboard shorcuts element in DOM | |
domConstruct.place(content, dojo.body(), "last"); | |
resizeHelpWindow(); | |
// | |
// Events | |
// | |
//? to open or close the help window | |
Mousetrap.bind("?", toggleHelp); | |
//Closes on the close box and the dimmed part of the screen, but not in the hep window itself | |
on(dom.byId("helpUnderlay"), "click", closeHelp); | |
on(dom.byId("helpModal"), "click", function (e) { | |
e.stopPropagation(); | |
}); | |
on(dom.byId("helpClose"), "click", closeHelp); | |
//On window resize (if there is more than one column) | |
if (query(".help-list").length > 1) { | |
on(window, "resize", function (e) { | |
if (resizeHelpWindowTimeout != null) { | |
clearTimeout(resizeHelpWindowTimeout); | |
} | |
resizeHelpWindowTimeoutt = setTimeout(resizeHelpWindow, 100); | |
}); | |
} | |
} | |
/** | |
* Resizes the help window | |
*/ | |
function resizeHelpWindow () { | |
//Matches the window dim effect layer to the window height. | |
dom.byId("helpUnderlay").style.height = win.getBox().h + "px"; | |
//Finds out how many columns there are, creates array of heights | |
var helpLists = query(".help-list"); | |
var helpColsCount = helpLists.length, maxHeight = 0; | |
for (var i = 0 ; i < helpLists.length ; i++) { | |
if (helpLists[i].offsetHeight > maxHeight) { | |
maxHeight = helpLists[i].offsetHeight; | |
} | |
} | |
//Quasi-responsive | |
var windowWidth = win.getBox().w; | |
if (helpColsCount > 2 && windowWidth <= 1180 && windowWidth > 630) { | |
helpColsCount = 2; | |
maxHeight *= maxHeight; | |
} | |
if (windowWidth <= 630) { | |
maxHeight *= helpColsCount; | |
helpColsCount = 1; | |
} | |
//Changes the width/height of the modal and wrapper to fit the columns | |
//Sorry for the magic numbers. Whatevs. | |
var helpListWrap = dom.byId("helpListWrap"), | |
helpModal = dom.byId("helpModal"); | |
helpListWrap.style.offsetWidth = (helpLists[0].offsetWidth * helpColsCount) + "px"; | |
helpListWrap.style.height = maxHeight + "px"; | |
helpModal.style.width = (helpLists[0].offsetWidth * helpColsCount) + 60 + "px"; | |
helpModal.style.height = maxHeight + 100 + "px"; | |
} | |
/** | |
* Opens help window | |
*/ | |
function openHelp () { | |
domClass.add("helpUnderlay", "help-isVisible"); | |
Mousetrap.bind("esc", closeHelp); | |
} | |
/** | |
* Closes help window | |
*/ | |
function closeHelp () { | |
domClass.remove("helpUnderlay", "help-isVisible"); | |
Mousetrap.unbind("esc"); | |
} | |
/** | |
* Toggles help window close state | |
*/ | |
function toggleHelp () { | |
if (domClass.contains("helpUnderlay", "help-isVisible")) { | |
closeHelp(); | |
} else { | |
openHelp(); | |
} | |
} | |
//Reads help file and initializes help | |
request("question.mark.html").then( | |
initializeKeyboardShorcuts, | |
function (err) { | |
console.log("Error fetching Keyboard shorcuts help: ", err); | |
} | |
); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment