Skip to content

Instantly share code, notes, and snippets.

@agumonkey

agumonkey/index.html

Forked from anonymous/index.html
Created May 13, 2015 01:13
Show Gist options
  • Save agumonkey/c0de35135eeda64b832a to your computer and use it in GitHub Desktop.
Save agumonkey/c0de35135eeda64b832a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
#main{
padding:4px;
cursor: pointer;
}
#main:hover {
background-color: palegreen;
}
#main:active {
color: white;
background-color: black;
}
pre#log {
border: 1px solid gray;
background-color: white;
padding: 4px;
}
pre#log:hover {
border-color: red;
background-color: pink;
}
footer#f {
border-radius: 4px;
padding: 4px;
margin-top: 1em;
border: 2px solid black;
}
</style>
</head>
<body>
<div id="main">hi</div>
<pre id="log">LOG</pre>
<div id="root">...</div>
<footer id="f">@@@</footer>
<script id="jsbin-javascript">
var handler, handlers, mon, s, t, u, v;
handlers = [];
handler = function(id) {
var o;
o = {};
o.id = id;
o.b = [];
o.on = true;
o.ps1 = '>';
o.log = function(m) {
var s;
s = "" + o.id + "(" + (o.size()) + ")" + o.ps1 + " " + m;
console.log(s);
return s;
};
o.size = function() {
return o.b.length;
};
o.toggle = function() {
return o.on = !o.on;
};
o.push = function() {
var _;
_ = o.b;
o.b = [];
return _;
};
o.send = function(e) {
if (o.on) {
o.b.push(e);
}
o.log("<" + e.type + ">");
return o;
};
handlers.push(o);
return o;
};
s = handler('root');
t = handler('main');
u = handler('log');
v = handler('f');
$("#root").dblclick(s.send);
$("#main").dblclick(t.send);
$("#log").dblclick(u.send);
$("#f").dblclick(v.send);
mon = function() {
return handlers.map(function(h) {
return h.log(".");
});
};
</script>
<script id="jsbin-source-css" type="text/css">#main{
padding:4px;
cursor: pointer;
}
#main:hover {
background-color: palegreen;
}
#main:active {
color: white;
background-color: black;
}
pre#log {
border: 1px solid gray;
background-color: white;
padding: 4px;
}
pre#log:hover {
border-color: red;
background-color: pink;
}
footer#f {
border-radius: 4px;
padding: 4px;
margin-top: 1em;
border: 2px solid black;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">handlers = []
handler = (id) ->
o = {}
o.id = id
o.b = []
o.on = true
o.ps1 = '>'
o.log = (m) ->
s = "#{o.id}(#{o.size()})#{o.ps1} #{m}"
console.log s
s
o.size = () -> o.b.length
o.toggle = () -> o.on = !o.on
o.push = () -> _ = o.b; o.b = []; _
o.send = (e) ->
if o.on
o.b.push e
o.log "<#{e.type}>"
o
handlers.push o
o
s = handler('root')
t = handler('main')
u = handler('log')
v = handler('f')
$("#root").dblclick(s.send)
$("#main").dblclick(t.send)
$("#log").dblclick(u.send)
$("#f").dblclick(v.send)
mon = () ->
handlers.map (h) -> h.log(".")
#setInterval(5000, () -> console.log (handlers.map (h) -> [h.id, h.length]))</script></body>
</html>
Raw
jsbin.yavotukula.css
#main{
padding:4px;
cursor: pointer;
}
#main:hover {
background-color: palegreen;
}
#main:active {
color: white;
background-color: black;
}
pre#log {
border: 1px solid gray;
background-color: white;
padding: 4px;
}
pre#log:hover {
border-color: red;
background-color: pink;
}
footer#f {
border-radius: 4px;
padding: 4px;
margin-top: 1em;
border: 2px solid black;
}
Raw
jsbin.yavotukula.js
var handler, handlers, mon, s, t, u, v;
handlers = [];
handler = function(id) {
var o;
o = {};
o.id = id;
o.b = [];
o.on = true;
o.ps1 = '>';
o.log = function(m) {
var s;
s = "" + o.id + "(" + (o.size()) + ")" + o.ps1 + " " + m;
console.log(s);
return s;
};
o.size = function() {
return o.b.length;
};
o.toggle = function() {
return o.on = !o.on;
};
o.push = function() {
var _;
_ = o.b;
o.b = [];
return _;
};
o.send = function(e) {
if (o.on) {
o.b.push(e);
}
o.log("<" + e.type + ">");
return o;
};
handlers.push(o);
return o;
};
s = handler('root');
t = handler('main');
u = handler('log');
v = handler('f');
$("#root").dblclick(s.send);
$("#main").dblclick(t.send);
$("#log").dblclick(u.send);
$("#f").dblclick(v.send);
mon = function() {
return handlers.map(function(h) {
return h.log(".");
});
};
@agumonkey
Copy link
Author

original coffeescript

handlers = []

handler = (id) ->
  o = {}
  o.id = id
  o.b = []
  o.on = true
  o.ps1 = '>'
  o.log = (m) ->
    s = "#{o.id}(#{o.size()})#{o.ps1} #{m}"
    console.log s
    s
  o.size = () -> o.b.length
  o.toggle = () -> o.on = !o.on
  o.push = () -> _ = o.b; o.b = []; _
  o.send = (e) ->
    if o.on
      o.b.push e
    o.log "<#{e.type}>"
    o
  handlers.push o
  o

s = handler('root')
t = handler('main')
u = handler('log')
v = handler('f')

$("#root").dblclick(s.send)
$("#main").dblclick(t.send)
$("#log").dblclick(u.send)
$("#f").dblclick(v.send)

mon = () ->
  handlers.map (h) -> h.log(".")


#setInterval(5000, () -> console.log (handlers.map (h) -> [h.id, h.length]))

@agumonkey
Copy link
Author

Using Classes

handlers = []

class Handler
  b:[]
  flag: true

  constructor: (@id) ->
    handlers.push this

  size: () -> @b.length

  send: (e) ->
    if @flag
      @b.push e
    @log()

  log: () ->
    s = "#{@id}(#{@size()})"
    console.log s
    s

h = new Handler 'root'
h.send 'wat'
h.send 'duh'

console.log(h.size())

@agumonkey
Copy link
Author

After reading about CoffeeScript syntax, class syntax and idioms

handlers = []

class Handler
  b: []
  flag: true

  constructor: (@id) ->
    handlers.push this

  # Handler interface

  send: (e) -> if @flag then @b.push e; @log()

  toggle: -> @flag = !@flag; @flag

  size: -> @b.length

  # Rest

  unb: (b) -> if b then 'on' else 'off'

  str: -> "#{@id}:#{@unb(@flag)}(#{@size()})"

  log: -> console.log @str()


s = new Handler 'root'
s.log()
s.toggle()

alternate formatting

handlers = []

class Handler
  b: []
  flag: true

  constructor: (@id) ->
    handlers.push this

  # Handler interface

  send: (e) ->
    if @flag
      @b.push e
    @log()

  toggle: ->
    @flag = !@flag
    @flag

  size: -> @b.length

  # Rest

  unb: (b) -> if b then 'on' else 'off'

  str: -> "#{@id}:#{@unb(@flag)}(#{@size()})"

  log: -> console.log @str()


s = new Handler 'root'
s.log()
s.toggle()

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment