Version 2.0

Flexbox and Fetch, among other improvements.
impressivewebs · Jan 17, 2021 · d681853 · d681853
1 parent 9df44d3
commit d681853
Show file tree

Hide file tree

Showing 14 changed files with 670 additions and 370 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ When the user pushes the `?` key, QuestionMark.js triggers a modal window that d
 
 I think every app that has keyboard shortcuts should do this. This could also be a generic 'help' menu for the app, but that would require some tweaking to the code and the CSS. For now, this works primarily as a shortcut keys menu.
 
-[View a demo here](http://www.impressivewebs.com/demo-files/question-mark-js/)
+[View a demo here](https://www.impressivewebs.com/demo-files/question-mark-js/)
 
 ## Instructions
 To make it work, it's pretty simple. Link the CSS file in the `<head>` and run the script on page load (or at the bottom). Make sure all the mandatory files are included (`question.mark.html`, `question.mark.css`, and `question.mark.js`).
@@ -13,27 +13,26 @@ To customize, edit the `question.mark.html` file to include your own keyboard sh
 
 Within each `<ul>` a single key/definition combo is inside one `<li>`, within which there is more markup. Edit the text to include your own app's key combos. It should be pretty self-explanatory when you look at the example markup.
 
-If you have only one column of keyboard shortcuts, then you should remove the `onwindowresize` section of code.
+
 
 ## Technical Info
-The script is about 2KB minified and gzip'd and it has no dependencies. It's also more or less responsive (doing this via JavaScript).
+The script is less than 1KB minified and gzip'd and it has no dependencies.
+
+The content from `question.mark.html` (which also holds all the markup that builds the modal) is loaded via the Fetch API and inserted into the `<body>` element of the page. The modal starts out invisible and is displayed via CSS transitions.
 
-The content from `question.mark.html` (which also holds all the markup that builds the modal) is loaded via Ajax and inserted into the `<body>` element of the page. The modal starts out invisible and is displayed via CSS transitions. Browsers that don't support transitions will display it instantly with no transition.
 
-The script also uses `window.onresize` to manage width/height of the modal, which can have performance issues. If you find this is slowing down your app, just comment out the part of the code that looks for the window resize. The drawback to this is that it will display at full size on a small window. Of course, if you only have a small single column of keyboard shortcuts, you won't need the `window.onresize` part, so, as mentioned above, just remove it.
 
 ## Browser Support
-This should work in all the normal browsers and IE8+. No IE6/7 support. If you want IE8 support, include attachevent.js before question.mark.js.
+This should work in all browsers that support the Fetch API. If you want older browser support, you'll have to use version 1.0.0, which you can get in the GitHub history.
 
-## Bugs? Suggestion?
-The script is pretty new and I'm sure there will be reported issues and whatnot, so feel free to fork it and make it better. I don't know of any other scripts like this one, so you can help optimize the code and make this the go-to standard for including a shortcut key menu in web apps!
 
 ## Demo Page
-For a demo of QuestionMark.js, [go here](http://www.impressivewebs.com/demo-files/question-mark-js/).
+For a demo of QuestionMark.js, [go here](https://www.impressivewebs.com/demo-files/question-mark-js/) or you can fiddle around with the version [on CodePen](https://codepen.io/impressivewebs/pen/eJzsw?editors=0010).
+
 
 ## MIT License
 
-Copyright © 2013 by Louis Lazaris
+Copyright © 2013 – 2021 by Louis Lazaris
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -51,4 +50,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "question-mark-js",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "homepage": "https://www.impressivewebs.com/demo-files/question-mark-js/",
   "authors": [
     "Louis Lazaris"

diff --git a/css/question.mark.css b/css/question.mark.css
diff --git a/dist/css/question.mark.css b/dist/css/question.mark.css
@@ -0,0 +1,152 @@
+.help-underlay * {
+  box-sizing: border-box;
+}
+
+.help-underlay {
+  position: absolute;
+  background: #555;
+  background: rgba(0, 0, 0, 0.5);
+  visibility: hidden;
+  opacity: 0;
+  transition: opacity 0.2s linear;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.help-modal {
+  position: absolute;
+  z-index: 99999;
+  left: 10%;
+  right: 10%;
+  top: 10%;
+  bottom: 20%;
+  margin: auto;
+  background: #fff;
+  color: #676767;
+  max-width: 1178px;
+  overflow: auto;
+  font-family: Arial, sans-serif;
+  border-radius: 3px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4),
+    inset 0 1px 0 rgba(255, 255, 255, 0.5);
+  transition: width 0.2s linear;
+}
+
+.help-modal-content {
+  padding: 0 20px;
+}
+
+.help-close {
+  position: absolute;
+  top: 0.4em;
+  right: 0.5em;
+  font-size: 1.8em;
+  cursor: pointer;
+  transition: color 0.2s linear;
+}
+
+.help-close:hover {
+  color: #000;
+}
+
+.help-modal h1 {
+  text-align: center;
+  margin: 0.5em;
+  font-size: 1.5em;
+  padding-bottom: 0.4em;
+  border-bottom: solid 2px #ccc;
+  font-weight: normal;
+}
+
+.help-modal h1 .help-key {
+  line-height: 1.5;
+  position: relative;
+  bottom: 4px;
+}
+
+.help-isVisible {
+  opacity: 1;
+  visibility: visible;
+  height: auto;
+  z-index: 8888;
+}
+
+.help-list-wrap {
+  transition: width 0.2s linear;
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.help-list {
+  list-style: none;
+  margin: 0;
+  padding: 0 0 10px 0;
+}
+
+.help-key-unit {
+  line-height: 1.8;
+  margin-right: 2em;
+  padding: 5px 0;
+}
+
+.help-key {
+  position: relative;
+  bottom: 2px;
+}
+
+.help-key span {
+  font-size: 14px;
+  color: #555;
+  display: inline-block;
+  padding: 0 8px;
+  text-align: center;
+  background-color: #eee;
+  background-repeat: repeat-x;
+  background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
+  border: 1px solid #ccc;
+  border-radius: 3px;
+  box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+}
+
+.help-key-def {
+  margin-left: 1em;
+}
+
+@media (max-width: 1460px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
+
+@media (max-width: 1280px) {
+  .help-modal {
+    left: 25%;
+    right: 25%;
+  }
+
+  .help-list {
+    width: 50%;
+  }
+}
+
+@media (max-width: 1230px) {
+  .help-modal {
+    left: 30%;
+    right: 30%;
+  }
+
+  .help-list {
+    width: 100%;
+  }
+}
+
+@media (max-width: 870px) {
+  .help-modal {
+    left: 10%;
+    right: 10%;
+  }
+}
diff --git a/index.html → dist/index.html b/index.html → dist/index.html
@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <meta name="monetization" content="$ilp.uphold.com/K2Xp98WeRgUn">
   <title>QuestionMark.js</title>
-  <link rel="stylesheet" href="css/question.mark.css?v=1.0.5">
+  <link rel="stylesheet" href="css/question.mark.css?v=2.0.0">
 
   <style>
   .demo {
@@ -51,15 +51,15 @@
 
   <div class="demo">
     <h1>QuestionMark.js</h1>
-    <p>A lightweight, cross-browser, modal window that displays shortcut keys for your app, similar to what happens on Twitter, Gmail, GitHub, etc.</a></p>
+    <p>A tiny (&lt;1kb), cross-browser, modal window that displays shortcut keys for your app when the user presses the <code>?</code> key – similar to what happens on Twitter, Gmail, GitHub, etc.</a></p>
 
     <p>This is an example page.</p>
     <p>Press the <code>?</code> key to see the modal.</p>
-    <p>More info:<br><a href="https://github.com/impressivewebs/QuestionMark.js">https://github.com/impressivewebs/QuestionMark.js</a> and <a href="https://www.impressivewebs.com/questionmark-js-shortcut-keys-displayed/">the blog post</a>.</p>
+    <p>More info:<br><a href="https://github.com/impressivewebs/QuestionMark.js">GitHub repo</a> and <a href="https://www.impressivewebs.com/questionmark-js-shortcut-keys-displayed/">the blog post</a>.</p>
     <p>Made by <a href="https://twitter.com/ImpressiveWebs">Louis Lazaris</a>. Use it for whatever you want.</p>
   </div><!-- .demo -->
 
-  <script src="js/question.mark.js?v=1.0.1"></script>
+  <script src="js/question.mark.min.js?v=2.0.0"></script>
 
   <script>
     var _gaq = _gaq || [];