Skip to content

Instantly share code, notes, and snippets.

@nulltask

nulltask/controller.js

Created May 25, 2011 10:12
Show Gist options
  • Save nulltask/990716 to your computer and use it in GitHub Desktop.
Save nulltask/990716 to your computer and use it in GitHub Desktop.
Download ZIP
20110525_prototype
Raw
controller.js
(function(exports) {
var Reel, Pane, Controller;
Reel = function(panes) {
this.panes = panes;
this._current = 0;
}
Reel.prototype = {
prev: function() {
return this.move(--this._current);
},
next: function() {
return this.move(++this._current);
},
move: function(pos) {
var r = true;
if (pos < 0) {
pos = 0;
r = false;
}
else if (pos >= this.panes.length) {
pos = this.panes.length - 1;
r = false;
}
this._current = pos;
return r;
},
current: function() {
return this._current;
},
activePane: function() {
return this.panes[this._current];
}
}
Pane = function(length, offset) {
this.length = length;
this._offset = offset || 0;
}
Pane.prototype = {
prev: function() {
return this.move(--this._offset);
},
next: function() {
return this.move(++this._offset);
},
move: function(pos) {
var r = true;
if (pos < 0) {
pos = 0;
r = false;
}
else if (pos >= this.length) {
pos = this.length - 1;
r = false;
}
this._offset = pos;
return r;
},
offset: function() {
return this._offset;
}
}
Controller = function(options) {
this.options = options;
this.onForwardCallbackList = [];
var panes = [];
for (var i = 0; i < options.paneList.length; ++i) {
panes.push(new Pane(options.paneList[i], 0));
}
this._reel = new Reel(panes);
}
Controller.prototype = {
registerForwardCallback: function(callback) {
this.onForwardCallbackList.push(callback);
},
forwarded: function(succeed) {
var pane = this._reel.activePane();
var args = [ this._reel.current(), pane.offset(), succeed ];
for (var i = 0, len = this.onForwardCallbackList.length; i < len; ++i) {
this.onForwardCallbackList[i].apply(this, args);
}
},
prevReel: function() {
this.forwarded(this._reel.prev());
},
nextReel: function() {
this.forwarded(this._reel.next());
},
prevPane: function() {
var pane = this._reel.activePane();
this.forwarded(pane.prev());
},
nextPane: function() {
var pane = this._reel.activePane();
this.forwarded(pane.next());
},
reel: function(pos) {
if (pos === undefined) {
return this._reel.current();
}
this.forwarded(this._reel.move(pos));
},
pane: function(pos) {
var pane = this._reel.activePane();
if (pos === undefined) {
return pane.offset();
}
this.forwarded(pane.move(pos));
}
}
exports.Controller = exports.Controller || Controller;
})(window);
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" -->
<title>20110525_prototype</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" href="style.css">
<!-- script src="http://visionmedia.github.com/move.js/move.min.js"></script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script>
<script src="https://github.com/brandonaaron/jquery-cssHooks/raw/master/transform.js"></script>
<script src="http://plugins.jquery.com/files/jquery.touchSwipe-1.2.4.js_.txt"></script>
<script src="https://github.com/jeresig/jquery.hotkeys/raw/master/jquery.hotkeys.js"></script>
<script src="controller.js"></script>
<script src="site.js"></script>
</head>
<body>
<div id="debug">
<p>clientX: <span id="clientX"></span></p>
<p>clientY: <span id="clientY"></span></p>
<p>rad: <span id="rad"></span></p>
</div>
<div id="topArrow" class="arrow">↑</div>
<div id="rightArrow" class="arrow">→</div>
<div id="bottomArrow" class="arrow">↓</div>
<div id="leftArrow" class="arrow">←</div>
<div id="wrapper" class="window-height">
<div id="container" class="window-height">
<ul class="window-height">
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test1.html">1</li>
<li class="page window-height" data-page-url="./test2.html">2</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test4.html">4</li>
</ul>
</li>
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test4.html">4</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test2.html">2</li>
<li class="page window-height" data-page-url="./test1.html">1</li>
</ul>
</li>
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test4.html">4</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test1.html">1</li>
</ul>
</li>
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test4.html">4</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
</ul>
</li>
<li class="col window-height">
<ul class="row window-height">
<li class="page window-height" data-page-url="./test2.html">2</li>
<li class="page window-height" data-page-url="./test3.html">3</li>
<li class="page window-height" data-page-url="./test4.html">4</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</html>
Raw
site.js
(function(window, document, $, undefined) {
var $window = $(window),
$document = $(document),
ctl
;
$document
.bind("keydown", "up", function(event) {
ctl.prevPane();
})
.bind("keydown", "right", function(event) {
ctl.nextReel();
})
.bind("keydown", "down", function(event) {
ctl.nextPane();
})
.bind("keydown", "left", function(event) {
ctl.prevReel();
})
;
$(function() {
var paneList = [];
$(".col").each(function(i, n) {
// $(this).css("left", params.width * i);
paneList.push($(this).find(".row").each(function(j, n) {
$(this).find(".page").each(function(k, n) {
// $(this).css("top", params.height * i);
var $this = $(this);
var url = $(this).data("page-url");
var jqxhr = $.ajax({
url: url,
dataType: "html"
})
.success(function(data) {
var $data = $(data);
$data.find("#ajaxContent").children().appendTo($this);
})
.error(function() {
})
.complete(function() {
});
});
}).find(".page").length);
});
console.log(paneList);
ctl = new Controller({ paneList: paneList });
ctl.registerForwardCallback(function(reel, pane, succeed) {
console.log(["onForward", reel, pane, succeed]);
/* TODO: set offset using CSS3 translate */
var contentWidth = $document.width();
var contentHeight = $window.height();
$("#container")
.css("-webkit-transform", "translate3d(" + (-contentWidth * reel) + "px, 0px, 0px)")
;
$(".col").eq(reel).css("-webkit-transform", "translate3d(0px, " + (-contentHeight * pane) + "px, 0px)");
});
$window
.bind("resize", function(event) {
var contentWidth = $document.width();
var contentHeight = $window.height();
var params = {
width: contentWidth,
height: contentHeight
};
$(".page").css(params);
$(".col").css(params);
$(".row").css(params);
$(".col").each(function(i, n) {
$(this).css("left", params.width * i);
$(this).find(".row").each(function(i, n) {
$(this).find(".page").each(function(i, n) {
$(this).css("top", params.height * i);
});
});
});
})
.trigger("resize");
});
$(function() {
var $arrow = $(".arrow"),
$arrows = {
top: $("#topArrow"),
right: $("#rightArrow"),
bottom: $("#bottomArrow"),
left: $("#leftArrow")
}
;
$arrow.css({
position: "fixed"
});
$window
.mousemove(function(event) {
var halfWidth = $document.width() / 2;
var halfHeight = $window.height() / 2;
$("#clientX").text(event.clientX - halfWidth);
$("#clientY").text(event.clientY - halfHeight);
var atan = Math.atan2(event.clientY - halfHeight, event.clientX - halfWidth) + (Math.PI / 8);
if (atan < Math.atan2(-halfHeight, -halfWidth) + (Math.PI / 8)) {
$("#rad").text("←");
$arrows.left.css("opacity", 1);
$arrow.not("#leftArrow").css("opacity", 0);
}
else if (atan < Math.atan2(-halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("↑");
$arrows.top.css("opacity", 1);
$arrow.not("#topArrow").css("opacity", 0);
}
else if (atan < Math.atan2(halfHeight, halfWidth) + (Math.PI / 8)) {
$("#rad").text("→");
$arrows.right.css("opacity", 1);
$arrow.not("#rightArrow").css("opacity", 0);
}
else {
$("#rad").text("↓");
$arrows.bottom.css("opacity", 1);
$arrow.not("#bottomArrow").css("opacity", 0);
}
})
.resize(function(event) {
var halfWidth = $document.width() / 2;
var halfHeight = $window.height() / 2;
$arrows.top.css({
top: 50,
left: halfWidth - ($arrows.top.outerWidth() / 2)
});
$arrows.right.css({
top: halfHeight - ($arrows.right.outerHeight() / 2),
right: 50
});
$arrows.bottom.css({
bottom: 50,
left: halfWidth - ($arrows.bottom.outerWidth() / 2)
});
$arrows.left.css({
left: 50,
top: halfHeight - ($arrows.left.outerHeight() / 2)
});
})
.trigger("resize")
;
});
$(function() {
var $container = $("#container");
function swipeReset() {
$container.css("-webkit-transition-duration", "0.5s");
offset = {
top: 0,
left: 0,
};
}
swipeReset();
var swipeStatus = {
swipe: function(event, phase, direction, distance) {
console.log(direction);
console.log(distance);
},
move: function(event, phase, direction, distance) {
var cur_c = $container.css("-webkit-transform");
var cur_p = $container
.find(".col").eq(ctl.reel())
.find(".row").find(".page").eq(ctl.pane())
.css("-webkit-transform");
var c = parseInt(cur_c.split(",")[4] || 0);
var p = parseInt(cur_p.split(",")[5] || 0);
if (direction == "left") {
$container.css("-webkit-transform", "translate3d(" + (c - distance) + "px, " + -p + "px, 0px)");
}
else if (direction == "right") {
$container.css("-webkit-transform", "translate3d(" + (c + distance) + "px, " + -p + "px, 0px)");
}
else if (direction == "up") {
$container.find(".col").eq(ctl.reel())
.find(".row").find(".page").eq(ctl.pane())
.css("-webkit-transform", "translate3d(" + (-c) +"px, " + (p - distance) + "px, 0px)");
}
else if (direction == "down") {
$container.find(".col").eq(ctl.reel())
.find(".row").find(".page").eq(ctl.pane())
.css("-webkit-transform", "translate3d(" + (-c) + "px, " + (p + distance) + "px, 0px)");
}
},
cancel: function(event, phase, direction, distance) {
swipeReset();
},
end: function(event, phase, direction, distance) {
swipeReset();
}
};
$container
.bind("movetop", function(event) {
ctl.prevPane();
})
.bind("moveright", function(event) {
ctl.nextReel();
})
.bind("movebottom", function(event) {
ctl.nextPane();
})
.bind("moveleft", function(event) {
ctl.prevReel();
})
.swipe({
swipeLeft: function(event) {
$container.trigger("moveright");
},
swipeRight: function(event) {
$container.trigger("moveleft");
},
swipeUp: function(event) {
$container.trigger("movebottom");
},
swipeDown: function(event) {
$container.trigger("movetop");
},
swipeStatus: function(event, phase, direction, distance) {
if (swipeStatus[phase]) {
swipeStatus[phase](event, phase, direction, distance);
}
}
})
;
});
window.ctl = window.ctl || ctl;
})(window, document, jQuery);
Raw
style.css
html {
height: 100%;
}
body {
height: 100%;
overflow: hidden;
background-color: lightgray;
}
.window-height {
height: 100%;
}
.page {
position: absolute;
top: 0; left: 0;
background-color: rgba(192, 192, 192, 0.5);
overflow: hidden;
}
.col {
position: absolute;
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transition-property: -moz-transform;
-moz-transition-duration: 0.3s;
-moz-transition-timing-function: ease-out;
-moz-transform: translate(0px, 0px, 0px);
}
.row {
position: relative;
}
#wrapper {
overflow: hidden;
background-size: 100%;
-webkit-transition-property: background-position;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: background-position;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
}
#container {
-webkit-transition-property: -webkit-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transition-property: -moz-transform;
-moz-transition-duration: 0.5s;
-moz-transition-timing-function: ease-out;
-moz-transform: translate(0px, 0px, 0px);
-webkit-box-shadow: 0 0 5px #000;
}
#debug {
position: fixed;
bottom: 10px;
left: 10px;
width: 160px;
height: 100px;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1000;
color: white;
border-radius: 5px;
}
.arrow {
-webkit-transition-property: opacity;
-webkit-transition-duration: 200ms;
-webkit-transition-timing-function: ease-out;
-webkit-animation-name: shadow;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
opacity: 0;
font-size: 30px;
width: 40px;
height: 40px;
background-color: rgba(0,0,0,0.5);
color: white;
padding: 10px;
font-family: "Trebuchet MS";
border-radius: 50%;
font-weight: bold;
text-align: center;
z-index: 9999;
}
@-webkit-keyframes shadow {
0% {
-webkit-box-shadow: 0 0 20px #008;
}
50% {
-webkit-box-shadow: 0 0 100px #00f;
}
100% {
-webkit-box-shadow: 0 0 20px #008;
}
}
Raw
test1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test1</p>
<img src="http://shunimoto.files.wordpress.com/2010/11/japanese-curry.jpg">
</div>
</div>
</body>
</html>
Raw
test2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test2</p>
<img src="http://sucurry.img.jugem.jp/20100209_746842.jpg">
</div>
</div>
</body>
</html>
Raw
test3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test3</p>
<img src="http://www.indocurry.com/img/curry.jpg">
</div>
</div>
</body>
</html>
Raw
test4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div id="wrapper">
<div id="ajaxContent">
<p>test4</p>
<img src="http://pakistandishes.up.seesaa.net/image/chicken_curry.jpg">
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment