Skip to content

Commit

Permalink
added support for firefox
Browse files Browse the repository at this point in the history
  • Loading branch information
@diervo
diervo committed Jun 2, 2012
1 parent f5f5c23 commit 936daf2
Show file tree
Hide file tree
Showing 9 changed files with 579 additions and 171 deletions.
80 changes: 61 additions & 19 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,25 @@
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "user-scalable=no">
<title>HTML5 Rubik's cube (CSS3 + JS)</title>
<meta property="og:title" content="3D HTML5 Rubik&#039;s Cube" />
<meta property="og:type" content="product" />
<meta property="og:url" content="http://html5rubik.com" />
<meta property="og:image" content="http://html5rubik.com/img/rotate.png" />
<meta property="og:site_name" content="3D HTML5 Rubik&#039;s cube" />
<meta property="fb:admins" content="1220708115" />

<meta name = "viewport" content = "user-scalable=no">
<meta name = "description" content = "Rubik's cube in HTML5 (CSS3 + JavaScript)">
<meta name = "keywords" content = "html5, CSS3, rubik's,cube, 3D, rubik, Javascript, YUI, Mojito">
<meta charset="UTF-8" />

<link href='http://fonts.googleapis.com/css?family=Luckiest+Guy' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css"></link>
<link rel="stylesheet" href="rubik.css"></link>
<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script>
<script src="rubik.js"></script>
<script src="message-scroll.js"></script>
<script>
YUI().use('node','rubik','message-scroll',function(Y){
var scrollpanel = new Y.MessageScroll();
var cube = window.cube = new Y.Rubik();
cube.run();
});
</script>
</head>
<body>
<header>
Expand All @@ -29,23 +33,35 @@ <h2><a href="//www.rubiks.com">Rubik's Cube</a> &#174;

<section id="log">
<div class= "twitter">
<a href="https://twitter.com/share"
class="twitter-share-button"
data-url="http://html5rubik.com" data-size="small" data-hashtags="html5rubik">
Twitt!
</a>
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://html5rubik.com" data-text="Rubik's cube in HTML5 (CSS3 and JavaScript) Check it out in your mobile/tablet!" data-lang="en" data-hashtags="html5rubik">Twittear</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>

<div class="facebook"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhtml5rubik.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true"></iframe>
</div>

<div class="facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fhtml5rubik.com&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:150px; height:21px;" allowTransparency="true">
</iframe>
</div>
<a href="tutorial">
<div class="html5">
<span href="/tutorial">Tutorial</span>
</div>
</a>

</section>

<section id="ads">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-5950464454835011";
/* rubik-mainpage */
google_ad_slot = "3487054699";
google_ad_width = 320;
google_ad_height = 50;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</section>

<section id="tutorial">
Expand Down Expand Up @@ -243,16 +259,42 @@ <h2>
<section id="main">
<div id="cube-controls">
<ul>
<li class="undo"></li>
<li class="redo"></li>
<li class="solve"></li>
<li id="rotation" class="rotate"></li>
<li>
<div class="undo"></div>
</li>
<li>
<div class="redo"></div>
</li>
<li>
<div class="solve"></div>
</li>
<li id="rotation">
<div class="rotate"></div>
</li>
</ul>
</div>
</section>
</aside>
</section>
<script>
YUI().use('node','rubik','message-scroll',function(Y){
var scrollpanel = new Y.MessageScroll();
var cube = window.cube = new Y.Rubik();
cube.run();
});
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32149285-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

</script>
</body>

</html>
3 changes: 2 additions & 1 deletion message-scroll.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,15 @@ YUI.add('message-scroll',function(Y){
},
bind: function(){
this._src.on('webkitTransitionEnd',this._endTransition,this);
this._src.on('transitionend',this._endTransition,this);
this._ul.on("flick", Y.bind(this.flickHandler, this), {
minDistance: 5,
minVelocity: 0.2,
preventDefault: true
});
},
checkSupport: function (){
var notSupported = (Y.UA.gecko || Y.UA.opera || Y.UA.ie);
var notSupported = (Y.UA.opera || Y.UA.ie);
if(notSupported){
var tmpl = '<hgroup>' +
'<h1>Ups!, Browser not supported yet!</h1>' +
Expand Down
136 changes: 107 additions & 29 deletions rubik.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@
#cube-viewport{
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;

-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 800px;
}

#cube{
Expand Down Expand Up @@ -47,41 +49,102 @@

/* CUBIE COLORS*/
#cube .cubie > div.yellow {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,yellow), color-stop(70%,#ffff1a),
color-stop(90%,#ffff33), color-stop(100%,#ffff4d));
background-image: linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -o-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -moz-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);
background-image: -ms-linear-gradient(top, rgb(255,232,54) 30%, rgb(214,214,34) 65%, rgb(184,184,24) 83%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.3, rgb(255,232,54)),
color-stop(0.65, rgb(214,214,34)),
color-stop(0.83, rgb(184,184,24))
);

}

#cube .cubie > div.red {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#f00), color-stop(70%,#ff1a1a), color-stop(90%,#ff3333),
color-stop(100%,#ff4d4d));
}
#cube .cubie > div.yellow {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,yellow), color-stop(70%,#E6E600),
color-stop(90%,#CC0), color-stop(100%,#B3B300));
background-image: linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -o-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -moz-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -ms-linear-gradient(top, rgb(255,56,56) 30%, rgb(212,36,36) 65%, rgb(161,27,27) 83%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.3, rgb(255,56,56)),
color-stop(0.65, rgb(212,36,36)),
color-stop(0.83, rgb(161,27,27))
);
}
#cube .cubie > div.orange {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#ffa500), color-stop(70%,#e69500),
color-stop(90%,#cc8400), color-stop(100%,#b37400));
background-image: linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -o-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -moz-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -webkit-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -ms-linear-gradient(top, rgb(255,159,56) 30%, rgb(212,141,36) 65%, rgb(161,111,26) 83%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.3, rgb(255,159,56)),
color-stop(0.65, rgb(212,141,36)),
color-stop(0.83, rgb(161,111,26))
);
}
#cube .cubie > div.green {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#00ff00), color-stop(70%,#00e600),
color-stop(90%,#00cc00), color-stop(100%,#00b300));
background-image: linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -o-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -moz-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -webkit-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);
background-image: -ms-linear-gradient(top, rgb(16,122,9) 11%, rgb(71,204,41) 56%, rgb(87,255,61) 78%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.11, rgb(16,122,9)),
color-stop(0.56, rgb(71,204,41)),
color-stop(0.78, rgb(87,255,61))
);

}
#cube .cubie > div.blue {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#4365a9), color-stop(70%,#4d71b9),
color-stop(90%,#607fc0), color-stop(100%,#728ec7));
background-image: linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -o-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -moz-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -webkit-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);
background-image: -ms-linear-gradient(top, rgb(86,56,255) 30%, rgb(62,36,212) 65%, rgb(42,26,163) 83%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.3, rgb(86,56,255)),
color-stop(0.65, rgb(62,36,212)),
color-stop(0.83, rgb(42,26,163))
);
}
#cube .cubie > div.white {
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#fff), color-stop(70%,#f2f2f2),
color-stop(90%,#e6e6e6), color-stop(100%,#d9d9d9));
}
background-image: linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -o-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -moz-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -webkit-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);
background-image: -ms-linear-gradient(top, rgb(143,143,143) 11%, rgb(255,255,255) 56%, rgb(255,255,255) 78%);

background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.11, rgb(143,143,143)),
color-stop(0.56, rgb(255,255,255)),
color-stop(0.78, rgb(255,255,255))
);
}
/* TEXT ROTATIONS */
.textLeft{-webkit-transform: rotate(-90deg)}
.textDown{-webkit-transform: rotate(-180deg)}
Expand All @@ -93,34 +156,49 @@
#plane{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.moving {
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
}

/*PLANE M */
.M-left {
-webkit-transform-origin: 0px 200px;
-webkit-transform:rotateX(90deg);
-moz-transform-origin: 0px 200px;
-moz-transform:rotateX(90deg);
}
.M-right {
-webkit-transform-origin: 0px 200px;
-webkit-transform:rotateX(-90deg)
-webkit-transform:rotateX(-90deg);
-moz-transform-origin: 0px 200px;
-moz-transform:rotateX(-90deg);
}

/*PLANE E */
.E-right {-webkit-transform:rotateY(90deg)}
.E-left {-webkit-transform:rotateY(-90deg)}
.E-right {
-webkit-transform:rotateY(90deg);
-moz-transform:rotateY(90deg)
}
.E-left {
-webkit-transform:rotateY(-90deg);
-moz-transform:rotateY(-90deg)
}

/*PLANE S */
.S-left {
-webkit-transform-origin: 200px 200px;
-webkit-transform:rotateZ(-90deg);
-moz-transform-origin: 200px 200px;
-moz-transform:rotateZ(-90deg);
}
.S-right {
-webkit-transform-origin: 200px 200px;
-webkit-transform:rotateZ(90deg);
-moz-transform-origin: 200px 200px;
-moz-transform:rotateZ(90deg);
}

/* CUBIES POSITIONS*/
Expand Down
9 changes: 5 additions & 4 deletions rubik.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -196,6 +196,8 @@ YUI.add('rubik', function (Y) {
* so it works with the mouse click or with tap/flick gestures.
*/
_bind: function () {
//TODO: Fix YUI bug to abstract transitionEnd
this._cube.on('transitionend',this._endTransition,this);
this._cube.on('webkitTransitionEnd',this._endTransition,this);

this._container.on('gesturemovestart',this._onTouchCube,{preventDefault:true},this);
Expand Down Expand Up @@ -286,7 +288,7 @@ YUI.add('rubik', function (Y) {
this._setInitialColors();
//TODO: set as a configurable ATTR on instanciation
var pos = cfg && cfg.position || {x: 30, y: -30 };
this._cube.setStyle('webkitTransform','rotateX('+ pos.y + 'deg) rotateY(' +pos.x + 'deg)');
this._cube.setStyle('transform','rotateX('+ pos.y + 'deg) rotateY(' +pos.x + 'deg)');

this._cubeXY = pos;
this._tempXY = pos;
Expand Down Expand Up @@ -335,8 +337,7 @@ YUI.add('rubik', function (Y) {
if (this._gesture){
this._tempXY = {x: x, y:y};
this._moved = true;
this._cube.setStyle('webkitTransform','rotateX('+ y + 'deg) rotateY(' + x + 'deg)');
Y.one('#log > p').setContent("Moved:" + Math.floor(y) +' , ' + Math.floor(x) );
this._cube.setStyle('transform','rotateX('+ y + 'deg) rotateY(' + x + 'deg)');
}else{
this._moved = false;
}
Expand Down Expand Up @@ -623,7 +624,7 @@ YUI.add('rubik', function (Y) {
tiltFR = this._tempXY.y - Math.round(evt.beta * 1.4) ,
rotation = "rotateY(" + tiltLR + "deg) rotateX("+tiltFR +"deg)";
//Y.one('#log > p').setContent(rotation);
this._cube.setStyle('webkitTransform',rotation);
this._cube.setStyle('transform',rotation);
//this._tempXY = {x: tiltFR,y: tiltLR};
},
_initPortrait:function () {
Expand Down
Loading

0 comments on commit 936daf2

Please sign in to comment.