[okShortcut] Add example page

okbreathe · Aug 23, 2011 · 3e17bff · 3e17bff
1 parent 9a6b7d8
commit 3e17bff
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 16 deletions.
diff --git a/okShortcut/README.md b/okShortcut/README.md
@@ -41,5 +41,5 @@ options                 | default           | description
 type                    | 'keydown'         | What event to bind to (can be keydown,keyup or keypress)
 propagate               | false             | Whether events propagate
 disableInInput          | false             | Whether or not key bindings are disabled when an input has focus
-target                  | document          | What element event are bound to
+target                  | document          | What element events should be bound to
 keycode                 | false             | Give an explicit keycode to test for
diff --git a/okShortcut/example.html b/okShortcut/example.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+<title>jQuery.okSlide</title>
+<meta http-equiv="content-type" content="text/html;charset=utf-8" />
+<meta http-equiv="Content-Style-Type" content="text/css" />
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
+<script type="text/javascript" src="jquery.okShortcut.js"></script>
+<link rel="stylesheet" href="screen.css" type="text/css" />
+</head>
+
+<body>
+  <div id='doc'>
+    <h1>okShortcut</h1>
+    <p class='large'>Easy keybinding</p> 
+    <h2>Demonstration</h2>
+    <div class='ct'>
+      <h4 id='result-0'>Press 'enter' without any input focused to update this text</h4>
+    </div>
+    <p>
+      Events can also be bound to specific elements. Remember to pass the
+      <code>'propagate:false'</code> option otherwise the event will bubble to
+      any shortcut bound to containing elements.
+    </p>
+    <div id='group-1' class='ct'>
+      <h4 id='result-1'>Type in the text the input and press 'enter' to replace this text</h4>
+      <input id='input-1' type='text'/>
+    </div>
+
+    <div id='group-2' class='ct'>
+      <h4 id='result-2'>Type in the text the input and press 'enter' to replace this text</h4>
+      <input id='input-2' type='text'/>
+    </div>
+  </div>
+  <script type='text/javascript'>
+    var i=0;
+    $.shortcut.add("enter", function(){ $("#result-1").html("Typed '" + $("#input-1").val() + "' in input 1"); }, { target: $("#group-1"), propagate: false});
+    $.shortcut.add("enter", function(){ $("#result-2").html("Typed '" + $("#input-2").val() + "' in input 2"); }, { target: $("#group-2"), propagate: false});
+    $.shortcut.add("enter", function(){ i++; $("#result-0").html("Pressed enter without focusing an input <span style='color:#f00'>" + i + "</span> times."); });
+  </script>
+</body>
+</html>
diff --git a/okShortcut/jquery.okShortcut.js b/okShortcut/jquery.okShortcut.js
@@ -124,6 +124,7 @@ jQuery.shortcut = (function(){
   }
 
   return {
+    // Add a shortcut
     add: function(combination, callback, options) {
       options = options || {};
 
@@ -133,27 +134,19 @@ jQuery.shortcut = (function(){
         }
       }
 
-      var target = options.target;
-
-      if (typeof target === 'string') {
-        target = document.getElementById(target);
-      }
-
-      var func = makeKeypressedFun( combination, callback, options );
+      var fn = makeKeypressedFun( combination, callback, options );
 
       bindings[combination.toLowerCase()] = {
-        'callback' : func,
-        'target'	 : target,
+        'callback' : fn,
+        'target'	 : options.target,
         'event'    : options.type
       };
 
-      // Attach the function with the event
-      // jQuery normalizes event handling
-      jQuery(target).bind(options.type, func);
+      jQuery(options.target).bind(options.type, fn);
       return this;
     },
 
-    //Remove the shortcut - just specify the shortcut and I will remove the binding
+    // Remove a shortcut - you only need to pass the shortcut
     remove: function(combination) {
       var binding = bindings[combination.toLowerCase()];
 

diff --git a/okShortcut/jquery.okShortcut.min.js b/okShortcut/jquery.okShortcut.min.js
diff --git a/okShortcut/screen.css b/okShortcut/screen.css
@@ -0,0 +1,89 @@
+/*=================== RESET ======================== */
+
+html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
+body {line-height:1.5;}
+table {border-collapse:separate;border-spacing:0;}
+caption, th, td {text-align:left;font-weight:normal;}
+table, td, th {vertical-align:middle;}
+blockquote:before, blockquote:after, q:before, q:after {content:"";}
+blockquote, q {quotes:"" "";}
+a img {border:none;}
+
+/*=================== BASE ======================== */
+
+body {
+	font-family:"Helvetica Neue", Arial, Helvetica, sans-serif, 'Liberation Sans', FreeSans, sans-serif;
+  font-size:62.5%; /* Set 1em = 10px */
+}
+
+/*=================== TYPOGRAPHY ================== */
+
+html {font-size:100.01%;}
+body {font-size:75%;color:#222;background:#ccc;font-family: Arial, Helvetica, sans-serif;}
+h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#09f;}
+h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
+h2 {font-size:2em;margin-bottom:0.75em;}
+h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
+h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;}
+h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
+h6 {font-size:1em;font-weight:bold;}
+p {margin:0 0 1.5em;}
+a:focus, a:hover {color:#000;}
+a {color:#009;text-decoration:underline;}
+blockquote {margin:1.5em;color:#666;font-style:italic;}
+strong {font-weight:bold;}
+pre {margin:1.5em 0;white-space:pre;}
+pre, code, tt {font:1em 'andale mono', 'lucida console', monospace;line-height:1.5;}
+li ul, li ol {margin:0;}
+ul, ol {margin:0 1.5em 1.5em 0;padding-left:3.333em;}
+ul {list-style-type:none;}
+ol {list-style-type:none;}
+dl {margin:0 0 1.5em 0;}
+dl dt {font-weight:bold;}
+dd {margin-left:1.5em;}
+.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
+.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
+.hide {display:none;}
+.quiet {color:#666;}
+.loud {color:#000;}
+.highlight {background:#ff0;}
+
+
+/* Tables
+--------------------------------------------------------- */
+
+table {margin-bottom:1.4em;width:100%;}
+th {background:#c3d9ff;font-weight:bold;}
+thead th {background:#c3d9ff;}
+th, td, caption {padding:4px 10px 4px 5px;}
+tr.even td {background:#e5ecf9;}
+tfoot { font-style:italic; }
+
+/*=================== FORM ======================== */
+
+label {font-weight:bold;display:block;}
+fieldset {padding:1.4em;margin:0 0 1.5em 0;border:1px solid #ccc;}
+legend {font-weight:bold;font-size:1.2em;}
+input[type=text], input[type=password], input.text, input.title, textarea, select {width:300px;background-color:#fff;border:1px solid #bbb;}
+input[type=text]:focus, input[type=password]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus {border-color:#666;}
+input[type=text], input[type=password], input.text, input.title, textarea, select {margin:0.5em 0;}
+textarea {width:390px;height:250px;padding:5px;}
+input[type=checkbox], input[type=radio], input.checkbox, input.radio {position:relative;top:.25em;}
+form.inline {line-height:3;}
+form.inline p {margin-bottom:0;}
+.error, .notice, .success {padding:.8em;margin-bottom:1em;border:2px solid #ddd;}
+.error {background:#FBE3E4;color:#8a1f11;border-color:#FBC2C4;}
+.notice {background:#FFF6BF;color:#514721;border-color:#FFD324;}
+.success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
+.error a {color:#8a1f11;}
+.notice a {color:#514721;}
+.success a {color:#264409;}
+
+.clear { clear:both; display:block; overflow:hidden; visibility:hidden; width:0; height:0; } 
+.clearfix:after { clear:both; content:'.'; display:block; visibility:hidden; height:0; }
+
+/*=================== Layout ======================== */
+
+#doc { width: 920px; background: #fff; margin:0 auto; padding: 20px; height:100%;}
+.box {padding:1.5em;margin-bottom:1.5em;background:#E5ECF9;}
+.ct {padding:1em;}