Snippets

Gravitywell AwfulJS

Created by Lucian Buzzo
awful.js
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
;(function () {
  function Awful(id, value) {
    this.container = window[id];
    this.contentAttribute = (this.container.value === undefined ? 'innerText' : 'value');
    value !== undefined && (this.container[contentAttribute] = value);
  }
  Awful.prototype.set = function(value) {
    this.container[this.contentAttribute] = value;
  };
  Awful.prototype.value = function() {
    return this.container[this.contentAttribute];
  };
  Awful.prototype.toggle = function() {
    this.container.hidden = !this.container.hidden;
  };
  Awful.prototype.on = function(eventName, fn) {
    if(eventName = 'on' + eventName, container.hasOwnProperty(eventName)) {
      container[eventName] = fn;
    } else {
      return false;
    }
  };

  window.Awful = Awful;
}());
index.html
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AwfulJS</title>
  <style>
    body {
      font-family: arial, sans-serif;
      padding: 0 15px;
    }
  </style>
</head>
<body>
  <h1><span id="awful_output">AwfulJS</span> example</h1>
  <div id="container">
    <label for="awful_input">Type a value</label>
    <input id="awful_input" type="text" value=""/>
  </div>

  <script src="awful.js"></script>
  <script>
    (function() {
      var inny = new Awful('awful_input');
      var outty = new Awful('awful_output');
      inny.on('keyup', function(e) {
        outty.set(inny.value());
      });
    }());
  </script>
</body>
</html>

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.