http_sim 1.0.1 → 1.0.2

data/lib/public/assets/js/vendor/what-input.js

@@ -0,0 +1,295 @@
+window.whatInput = (function() {
+
+  'use strict';
+
+  /*
+    ---------------
+    variables
+    ---------------
+  */
+
+  // array of actively pressed keys
+  var activeKeys = [];
+
+  // cache document.body
+  var body;
+
+  // boolean: true if touch buffer timer is running
+  var buffer = false;
+
+  // the last used input type
+  var currentInput = null;
+
+  // `input` types that don't accept text
+  var nonTypingInputs = [
+    'button',
+    'checkbox',
+    'file',
+    'image',
+    'radio',
+    'reset',
+    'submit'
+  ];
+
+  // detect version of mouse wheel event to use
+  // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
+  var mouseWheel = detectWheel();
+
+  // list of modifier keys commonly used with the mouse and
+  // can be safely ignored to prevent false keyboard detection
+  var ignoreMap = [
+    16, // shift
+    17, // control
+    18, // alt
+    91, // Windows key / left Apple cmd
+    93  // Windows menu / right Apple cmd
+  ];
+
+  // mapping of events to input types
+  var inputMap = {
+    'keydown': 'keyboard',
+    'keyup': 'keyboard',
+    'mousedown': 'mouse',
+    'mousemove': 'mouse',
+    'MSPointerDown': 'pointer',
+    'MSPointerMove': 'pointer',
+    'pointerdown': 'pointer',
+    'pointermove': 'pointer',
+    'touchstart': 'touch'
+  };
+
+  // add correct mouse wheel event mapping to `inputMap`
+  inputMap[detectWheel()] = 'mouse';
+
+  // array of all used input types
+  var inputTypes = [];
+
+  // mapping of key codes to a common name
+  var keyMap = {
+    9: 'tab',
+    13: 'enter',
+    16: 'shift',
+    27: 'esc',
+    32: 'space',
+    37: 'left',
+    38: 'up',
+    39: 'right',
+    40: 'down'
+  };
+
+  // map of IE 10 pointer events
+  var pointerMap = {
+    2: 'touch',
+    3: 'touch', // treat pen like touch
+    4: 'mouse'
+  };
+
+  // touch buffer timer
+  var timer;
+
+
+  /*
+    ---------------
+    functions
+    ---------------
+  */
+
+  // allows events that are also triggered to be filtered out for `touchstart`
+  function eventBuffer() {
+    clearTimer();
+    setInput(event);
+
+    buffer = true;
+    timer = window.setTimeout(function() {
+      buffer = false;
+    }, 650);
+  }
+
+  function bufferedEvent(event) {
+    if (!buffer) setInput(event);
+  }
+
+  function unBufferedEvent(event) {
+    clearTimer();
+    setInput(event);
+  }
+
+  function clearTimer() {
+    window.clearTimeout(timer);
+  }
+
+  function setInput(event) {
+    var eventKey = key(event);
+    var value = inputMap[event.type];
+    if (value === 'pointer') value = pointerType(event);
+
+    // don't do anything if the value matches the input type already set
+    if (currentInput !== value) {
+      var eventTarget = target(event);
+      var eventTargetNode = eventTarget.nodeName.toLowerCase();
+      var eventTargetType = (eventTargetNode === 'input') ? eventTarget.getAttribute('type') : null;
+
+      if (
+        (// only if the user flag to allow typing in form fields isn't set
+        !body.hasAttribute('data-whatinput-formtyping') &&
+
+        // only if currentInput has a value
+        currentInput &&
+
+        // only if the input is `keyboard`
+        value === 'keyboard' &&
+
+        // not if the key is `TAB`
+        keyMap[eventKey] !== 'tab' &&
+
+        // only if the target is a form input that accepts text
+        (
+           eventTargetNode === 'textarea' ||
+           eventTargetNode === 'select' ||
+           (eventTargetNode === 'input' && nonTypingInputs.indexOf(eventTargetType) < 0)
+        )) || (
+          // ignore modifier keys
+          ignoreMap.indexOf(eventKey) > -1
+        )
+      ) {
+        // ignore keyboard typing
+      } else {
+        switchInput(value);
+      }
+    }
+
+    if (value === 'keyboard') logKeys(eventKey);
+  }
+
+  function switchInput(string) {
+    currentInput = string;
+    body.setAttribute('data-whatinput', currentInput);
+
+    if (inputTypes.indexOf(currentInput) === -1) inputTypes.push(currentInput);
+  }
+
+  function key(event) {
+    return (event.keyCode) ? event.keyCode : event.which;
+  }
+
+  function target(event) {
+    return event.target || event.srcElement;
+  }
+
+  function pointerType(event) {
+    if (typeof event.pointerType === 'number') {
+      return pointerMap[event.pointerType];
+    } else {
+      return (event.pointerType === 'pen') ? 'touch' : event.pointerType; // treat pen like touch
+    }
+  }
+
+  // keyboard logging
+  function logKeys(eventKey) {
+    if (activeKeys.indexOf(keyMap[eventKey]) === -1 && keyMap[eventKey]) activeKeys.push(keyMap[eventKey]);
+  }
+
+  function unLogKeys(event) {
+    var eventKey = key(event);
+    var arrayPos = activeKeys.indexOf(keyMap[eventKey]);
+
+    if (arrayPos !== -1) activeKeys.splice(arrayPos, 1);
+  }
+
+  function bindEvents() {
+    body = document.body;
+
+    // pointer events (mouse, pen, touch)
+    if (window.PointerEvent) {
+      body.addEventListener('pointerdown', bufferedEvent);
+      body.addEventListener('pointermove', bufferedEvent);
+    } else if (window.MSPointerEvent) {
+      body.addEventListener('MSPointerDown', bufferedEvent);
+      body.addEventListener('MSPointerMove', bufferedEvent);
+    } else {
+
+      // mouse events
+      body.addEventListener('mousedown', bufferedEvent);
+      body.addEventListener('mousemove', bufferedEvent);
+
+      // touch events
+      if ('ontouchstart' in window) {
+        body.addEventListener('touchstart', eventBuffer);
+      }
+    }
+
+    // mouse wheel
+    body.addEventListener(mouseWheel, bufferedEvent);
+
+    // keyboard events
+    body.addEventListener('keydown', unBufferedEvent);
+    body.addEventListener('keyup', unBufferedEvent);
+    document.addEventListener('keyup', unLogKeys);
+  }
+
+
+  /*
+    ---------------
+    utilities
+    ---------------
+  */
+
+  // detect version of mouse wheel event to use
+  // via https://developer.mozilla.org/en-US/docs/Web/Events/wheel
+  function detectWheel() {
+    return mouseWheel = 'onwheel' in document.createElement('div') ?
+      'wheel' : // Modern browsers support "wheel"
+
+      document.onmousewheel !== undefined ?
+        'mousewheel' : // Webkit and IE support at least "mousewheel"
+        'DOMMouseScroll'; // let's assume that remaining browsers are older Firefox
+  }
+
+
+  /*
+    ---------------
+    init
+
+    don't start script unless browser cuts the mustard,
+    also passes if polyfills are used
+    ---------------
+  */
+
+  if (
+    'addEventListener' in window &&
+    Array.prototype.indexOf
+  ) {
+
+    // if the dom is already ready already (script was placed at bottom of <body>)
+    if (document.body) {
+      bindEvents();
+
+    // otherwise wait for the dom to load (script was placed in the <head>)
+    } else {
+      document.addEventListener('DOMContentLoaded', bindEvents);
+    }
+  }
+
+
+  /*
+    ---------------
+    api
+    ---------------
+  */
+
+  return {
+
+    // returns string: the current input type
+    ask: function() { return currentInput; },
+
+    // returns array: currently pressed keys
+    keys: function() { return activeKeys; },
+
+    // returns array: all the detected input types
+    types: function() { return inputTypes; },
+
+    // accepts string: manually set the input type
+    set: switchInput
+  };
+
+}());

data/lib/request.html.erb

@@ -1,12 +1,11 @@
 <html>
   <head>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
-
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
-
-    <!-- Latest compiled and minified JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="/assets/css/foundation.min.css">
+    <link rel="stylesheet" href="/assets/css/app.css">
+    <script src="/assets/js/vendor/jquery.js"></script>
+    <script src="/assets/js/vendor/foundation.min.js"></script>
+    <script src="/assets/js/vendor/what-input.js"></script>
+    <script src="/assets/js/app.js"></script>
   </head>
   <body>
     <h2>Requests for: <%= endpoint.method %> <%= endpoint.path %></h2>

data/lib/response.html.erb

@@ -1,23 +1,54 @@
 <html>
   <head>
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
+    <link rel="stylesheet" href="/assets/css/foundation.min.css">
+    <link rel="stylesheet" href="/assets/css/app.css">
+    <script src="/assets/js/vendor/jquery.js"></script>
+    <script src="/assets/js/vendor/foundation.min.js"></script>
+    <script src="/assets/js/vendor/what-input.js"></script>
+    <script src="/assets/js/app.js"></script>
 
-    <!-- Optional theme -->
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
+    <style>
+      .current {
+        height: 30%;
+      }
 
-    <!-- Latest compiled and minified JavaScript -->
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
-  </head>
-  <body>
-    <h2>Response for: <%= endpoint.method %> <%= endpoint.path %></h2>
+      .current div {
+        height: 100%;
+        padding-bottom: 20px;
+      }
 
-    <div><%= endpoint.response %></div>
+      pre {
+        background-color: lightgray;
+        border: 1px solid gray;
+        border-radius: 1px;
+        padding: 5px;
+      }
 
-    <h2>Change response</h2>
+      form {
+        height: 70%;
+      }
 
-    <form action="<%= endpoint.path %>/response" method="post">
-      <textarea name="response"></textarea>
-      <input type="submit">
+        form textarea {
+          height: 50%;
+        }
+    </style>
+  </head>
+  <body>
+    <div class="row current">
+      <div class="medium-12">
+        <h2>Response for: <%= endpoint.method %> <%= endpoint.path %></h2>
+        <pre><%= endpoint.response %></pre>
+      </div>
+    </div>
+    <form>
+      <div class="row">
+        <div class="medium-12 columns">
+          <label>Change response
+            <textarea name="response" placeholder="Drop your data here!"></textarea>
+          </label>
+          <input type="submit" class="button" value="Submit">
+        </div>
+      </div>
     </form>
   </body>
 </html>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: http_sim
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.0.2
 platform: ruby
 authors:
 - Jean de Klerk
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-02 00:00:00.000000000 Z
+date: 2016-05-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: sinatra
@@ -99,8 +99,17 @@ files:
 - Rakefile
 - example.rb
 - http_sim.gemspec
+- lib/endpoint.rb
 - lib/http_sim.rb
 - lib/index.html.erb
+- lib/public/assets/css/app.css
+- lib/public/assets/css/foundation.css
+- lib/public/assets/css/foundation.min.css
+- lib/public/assets/js/app.js
+- lib/public/assets/js/vendor/foundation.js
+- lib/public/assets/js/vendor/foundation.min.js
+- lib/public/assets/js/vendor/jquery.js
+- lib/public/assets/js/vendor/what-input.js
 - lib/request.html.erb
 - lib/response.html.erb
 - spec/features/register_endpoint_spec.rb