Skip to content

Instantly share code, notes, and snippets.

@tomcask

tomcask/index.html

Created February 24, 2015 15:24
Show Gist options
  • Save tomcask/4b4b4b00b293db018555 to your computer and use it in GitHub Desktop.
Save tomcask/4b4b4b00b293db018555 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/hihahevonu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style id="jsbin-css">
#block { width: 200px; height: 200px; background-color: #f00; }
#button-set { margin-bottom: 5px; }
</style>
</head>
<body>
<div id="button-set">
<button id="open">Open</button>
<button id="close">Close</button>
<button id="toggle">Toggle</button>
</div>
<div id="block"></div>
<script id="jsbin-javascript">
var ExpandingBlock;
(function() {
ExpandingBlock = function(element) {
var fsm = new karakuri({
states: {
open: {
close: function() {
this.transitionTo('closing');
},
toggle: function() {
this.transitionTo('closing');
}
},
closing: {
_onEnter: function() {
var machine = this;
element.slideUp({
complete: function() {
machine.transitionTo('closed');
}
});
}
},
closed: {
open: function() {
this.transitionTo('opening');
},
toggle: function() {
this.transitionTo('opening');
}
},
opening: {
_onEnter: function() {
var machine = this;
element.slideDown({
complete: function() {
machine.transitionTo('open');
}
});
}
}
},
initial: 'open'
});
return {
open: function() {
fsm.handle('open');
},
close: function() {
fsm.handle('close');
},
toggle: function() {
fsm.handle('toggle');
}
};
};
})();
$(function() {
var block = new ExpandingBlock($('#block'));
$('#button-set')
.on('click', '#open', function() { block.open(); })
.on('click', '#close', function() { block.close(); })
.on('click', '#toggle', function() { block.toggle(); });
});
var karakuri = {} || karakuri;
(function() {
var arraySlice = Array.prototype.slice;
karakuri = function(options) {
var state,
ctx = {
transitionTo: function (newState) {
state = newState;
return runHandler('_onEnter', arraySlice.call(arguments, 1));
}
};
function runHandler(eventName, argumentsArray) {
var handler = options.states[state][eventName];
if(handler) {
return handler.apply(ctx, argumentsArray);
}
}
ctx.transitionTo(options.initial);
return {
handle: function(eventName) {
return runHandler(eventName, arraySlice.call(arguments, 1));
}
};
};
})();
</script>
<script id="jsbin-source-css" type="text/css">#block { width: 200px; height: 200px; background-color: #f00; }
#button-set { margin-bottom: 5px; } </script>
<script id="jsbin-source-javascript" type="text/javascript">var ExpandingBlock;
(function() {
ExpandingBlock = function(element) {
var fsm = new karakuri({
states: {
open: {
close: function() {
this.transitionTo('closing');
},
toggle: function() {
this.transitionTo('closing');
}
},
closing: {
_onEnter: function() {
var machine = this;
element.slideUp({
complete: function() {
machine.transitionTo('closed');
}
});
}
},
closed: {
open: function() {
this.transitionTo('opening');
},
toggle: function() {
this.transitionTo('opening');
}
},
opening: {
_onEnter: function() {
var machine = this;
element.slideDown({
complete: function() {
machine.transitionTo('open');
}
});
}
}
},
initial: 'open'
});
return {
open: function() {
fsm.handle('open');
},
close: function() {
fsm.handle('close');
},
toggle: function() {
fsm.handle('toggle');
}
};
};
})();
$(function() {
var block = new ExpandingBlock($('#block'));
$('#button-set')
.on('click', '#open', function() { block.open(); })
.on('click', '#close', function() { block.close(); })
.on('click', '#toggle', function() { block.toggle(); });
});
var karakuri = {} || karakuri;
(function() {
var arraySlice = Array.prototype.slice;
karakuri = function(options) {
var state,
ctx = {
transitionTo: function (newState) {
state = newState;
return runHandler('_onEnter', arraySlice.call(arguments, 1));
}
};
function runHandler(eventName, argumentsArray) {
var handler = options.states[state][eventName];
if(handler) {
return handler.apply(ctx, argumentsArray);
}
}
ctx.transitionTo(options.initial);
return {
handle: function(eventName) {
return runHandler(eventName, arraySlice.call(arguments, 1));
}
};
};
})();</script></body>
</html>
Raw
jsbin.hihahevonu.css
#block { width: 200px; height: 200px; background-color: #f00; }
#button-set { margin-bottom: 5px; }
Raw
jsbin.hihahevonu.js
var ExpandingBlock;
(function() {
ExpandingBlock = function(element) {
var fsm = new karakuri({
states: {
open: {
close: function() {
this.transitionTo('closing');
},
toggle: function() {
this.transitionTo('closing');
}
},
closing: {
_onEnter: function() {
var machine = this;
element.slideUp({
complete: function() {
machine.transitionTo('closed');
}
});
}
},
closed: {
open: function() {
this.transitionTo('opening');
},
toggle: function() {
this.transitionTo('opening');
}
},
opening: {
_onEnter: function() {
var machine = this;
element.slideDown({
complete: function() {
machine.transitionTo('open');
}
});
}
}
},
initial: 'open'
});
return {
open: function() {
fsm.handle('open');
},
close: function() {
fsm.handle('close');
},
toggle: function() {
fsm.handle('toggle');
}
};
};
})();
$(function() {
var block = new ExpandingBlock($('#block'));
$('#button-set')
.on('click', '#open', function() { block.open(); })
.on('click', '#close', function() { block.close(); })
.on('click', '#toggle', function() { block.toggle(); });
});
var karakuri = {} || karakuri;
(function() {
var arraySlice = Array.prototype.slice;
karakuri = function(options) {
var state,
ctx = {
transitionTo: function (newState) {
state = newState;
return runHandler('_onEnter', arraySlice.call(arguments, 1));
}
};
function runHandler(eventName, argumentsArray) {
var handler = options.states[state][eventName];
if(handler) {
return handler.apply(ctx, argumentsArray);
}
}
ctx.transitionTo(options.initial);
return {
handle: function(eventName) {
return runHandler(eventName, arraySlice.call(arguments, 1));
}
};
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment