Initial release

cornips · Nov 26, 2018 · d240f87 · d240f87
commit d240f87
Show file tree

Hide file tree

Showing 9 changed files with 223 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,8 @@
+# Changelog
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
+and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
+
+## [0.1.0] - 2018-11-27
+- Initial release
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Martijn Cornips
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,14 @@
+# js-keyboard-keys
+Some simple code to include working keyboard key visuals to help explain users keyboard shortcuts. Automatically adapts for Windows/Mac users.
+
+## Demo
+[Checkout the demo](https://cornips.github.io/js-keyboard-keys)
+
+## Usage
+```html
+<span class="key-ctrl">Ctrl</span>
+<span class="key-shift">Shift</span>
+<span class="key-alt">Alt</span>
+<span class="key-meta">⊞ Win</span>
+```
+JavaScript will change buttons to Mac variants.
diff --git a/demo.css b/demo.css
@@ -0,0 +1,17 @@
+p {
+    line-height: 1.8
+}
+.animated.key,
+.animated[class*=key-] {
+    line-height: 1.5;
+}
+pre {
+    background: #eaeef3;
+    padding: 5px 10px;
+}
+.keys-showcase {
+    zoom: 1.4;
+}
+.keys-showcase > span {
+    margin-right: 5px;
+}
diff --git a/demo.html b/demo.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>js-keyboard-keys</title>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://stackpath.bootstrapcdn.com/bootswatch/4.1.3/litera/bootstrap.min.css" rel="stylesheet" integrity="sha384-JuAGGg3c8UPrWdf0N8ZPJyOHkACruI9+mbl0C+H6XSYOqv9xIdiUSKehRyA8jUol" crossorigin="anonymous">
+    <link rel="stylesheet" href="dist/js-keyboard-keys.min.css" />
+    <link rel="stylesheet" href="demo.css" />
+    </head>
+<body>
+    <noscript>
+      <div class="container">
+        <div class="alert alert-danger px-4 py-4">
+          <h4 class="alert-heading">Whoops!</h4>
+          <p class="mb-0">You should <a href="https://www.enable-javascript.com/" target="_blank" class="alert-link">enable JavaScript</a> in order to let this baby shine.</p>
+        </div>
+      </div><!-- /.container -->
+    </noscript>
+
+    <div class="container">
+        <div class="row mt-3">
+            <div class="col col-md-6">
+                <h1 class="mb-3">js-keyboard-keys</h1>
+                <p>Some simple code to include working keyboard key visuals to help explain users keyboard shortcuts. Automatically adapts for Windows/Mac users.</p>
+            </div><!-- /.col -->
+        </div><!-- /.row -->
+
+        <div class="row my-4">
+            <div class="col col-md-6 keys-showcase">
+                <span class="key-ctrl">Ctrl</span>
+                <span class="key-shift">Shift</span>
+                <span class="key-alt">Alt</span>
+                <span class="key-meta">⊞ Win</span>
+            </div><!-- /.col -->
+        </div><!-- /.row -->
+
+        <div class="row mt-5">
+            <div class="col col-md-6">
+                <h2>Usage</h2>
+                <pre><code>&lt;span class="key-ctrl"&gt;Ctrl&lt;/span&gt;
+&lt;span class="key-shift"&gt;Shift&lt;/span&gt;
+&lt;span class="key-alt"&gt;Alt&lt;/span&gt;
+&lt;span class="key-meta"&gt;⊞ Win&lt;/span&gt;</code></pre>
+                <p>JavaScript will change buttons to Mac variants.</p>
+                <p>Try pressing <span class="key-ctrl">Ctrl</span> or <span class="key-shift">Shift</span> to see this baby shine.</p>
+                <p>This <span class="key-ctrl">Ctrl</span>-key and this <span class="key-cmd-mac">Cmd</span>-key will look the same on Mac. While this <span class="key-ctrl-mac">Ctrl</span>-key will look like a Ctrl key, that only listens to Mac.</p>
+                <p>We can do <span class="key-alt">Alt</span>-key too, or <span class="key-option-mac">Option</span> for Mac users, who see two identical buttons.</p>
+            </div><!-- /.col -->
+        </div><!-- /.row -->
+
+        <div class="row mt-3">
+            <div class="col col-md-6">
+                <h2>Animation</h2>
+                <p>Add a subtle pressing effect by adding class <code>animated</code>.</p>
+                <pre><code>&lt;span class="animated key-ctrl"&gt;Ctrl&lt;/span&gt;</code></pre>
+                <p>Now you got your <span class="animated key-ctrl">Ctrl</span> or <span class="animated key-shift">Shift</span> keys visually pressed.</p>
+                <p>And of course, it works with the <span class="animated key-alt">Alt</span>-key too, or <span class="animated key-option-mac">Option</span> for Mac users, who see two identical buttons.</p>
+            </div><!-- /.col -->
+        </div><!-- /.row -->
+
+        <div class="row mt-3">
+            <div class="col col-md-6">
+                <p>-- © 2018 <a href="https://github.com/cornips">Martijn Cornips</a></p>
+            </div><!-- /.col -->
+        </div><!-- /.row -->
+    </div><!-- /.container -->
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+    <script src="dist/js-keyboard-keys.min.js"></script>
+</body>
+</html>
diff --git a/dist/js-keyboard-keys.min.css b/dist/js-keyboard-keys.min.css
diff --git a/dist/js-keyboard-keys.min.js b/dist/js-keyboard-keys.min.js
diff --git a/source/js-keyboard-keys.css b/source/js-keyboard-keys.css
@@ -0,0 +1,30 @@
+/*
+ * Keyboard keys
+ * Usage:
+ *  .key, .key-ctrl, .key-ctrl-mac
+ *  .key.animated
+ *  .key.static
+ */
+.key,
+*[class*=key-] {
+    border: 1px solid #d4d4d4;
+    border-radius: 3px;
+    padding: 3px;
+    border-bottom-width: 2px;
+    color: #868e96;
+    cursor: default;
+    transition: 60ms;
+}
+.keydown {
+    background-color: #d4d4d4;
+    border-color: rgba(134, 142, 150,.4);
+}
+.animated.key,
+.animated[class*=key-] {
+    display: inline-block;
+    height: 2em;
+}
+.animated.keydown {
+    transform: translateY(1px);
+    border-width: 1px;
+}
diff --git a/source/js-keyboard-keys.js b/source/js-keyboard-keys.js
@@ -0,0 +1,57 @@
+let isMac = navigator.platform.toLowerCase().indexOf("mac") > -1;
+
+(function($){
+
+    if ( isMac ) {
+        $(".key-shift,.key-shift-mac").each(function(){
+                let $this = $(this);
+                $this.html("&#8679; Shift");
+        });
+        $(".key-ctrl,.key-cmd-mac,.key-meta").each(function(){
+                let $this = $(this);
+                $this.html("&#8984; Cmd");
+        });
+        $(".key-ctrl-mac").each(function(){
+                let $this = $(this);
+                $this.html("&#8963; Ctrl");
+        });
+        $(".key-alt,.key-option-mac").each(function(){
+                let $this = $(this);
+                $this.html("&#8997; Option");
+        });
+    }//if isMac
+
+    $(window).keydown(function( event ) {
+        let keySelector = "";
+        if ( event.metaKey )
+            keySelector += isMac ? ".key-ctrl,.key-cmd-mac,.key-meta," : ".key-cmd-mac,.key-meta,";
+        if ( event.ctrlKey )
+            keySelector += isMac ? ".key-ctrl-mac," : ".key-ctrl,";
+        if ( event.altKey )
+            keySelector += ".key-option-mac,.key-alt,";
+        if ( event.shiftKey )
+            keySelector += ".key-shift,.key-shift-mac,";
+        keySelector = keySelector.slice(0,-1);
+
+        if (keySelector.length)
+            $(keySelector).not(".static").addClass("keydown");
+    });
+    $(window).keyup(function( event ) {
+        let $keydownObjs = $(".keydown");
+        if ($keydownObjs.length){
+            let keySelector = "";
+            if ( event.metaKey )
+                keySelector += isMac ? ".key-ctrl,.key-cmd-mac,.key-meta," : ".key-cmd-mac,.key-meta,";
+            if ( event.ctrlKey )
+                keySelector += isMac ? ".key-ctrl-mac," : ".key-ctrl,";
+            if ( event.altKey )
+                keySelector += ".key-option-mac,.key-alt,";
+            if ( event.shiftKey )
+                keySelector += ".key-shift,.key-shift-mac,";
+            keySelector = keySelector.slice(0,-1);
+
+            $keydownObjs.not(keySelector).removeClass("keydown");
+        }
+    });
+
+})(jQuery);