preview opening works wery well now :)

This commit is contained in:
Bachir Soussi Chiadmi
2015-03-08 21:36:07 +01:00
parent 10b99958e2
commit 76c7154f4e
4 changed files with 386 additions and 367 deletions
+89 -74
View File
@@ -47,18 +47,16 @@ jQuery(document).ready(function($) {
// launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element
});
};
function initDebug(){
$('<p>').attr('id', 'fps').appendTo(_$body);
$('<p>').attr('id', 'fps').appendTo(_$container);
_fps = document.getElementById('fps');
requestAnimationFrame(displayFps);
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo('body');
_$nav_cursor = $('<div id="nav-cursor"></div>').appendTo(_$container);
moveDebugCursor();
};
};
function displayFps(){
requestAnimationFrame(displayFps);
@@ -75,7 +73,6 @@ jQuery(document).ready(function($) {
left:_nav_pos.x+_center.x+"px",
top:_nav_pos.y+_center.y+"px"
});
};
function initChapters(){
@@ -213,12 +210,15 @@ jQuery(document).ready(function($) {
this.trans = {x:0, y:0};
this.ease = randB(0.05, 0.3);
//preview
this.is_previewed = false;
//parties
this.$parties = $('.field-name-field-partie', e);
this.parts_pos = {xs:new Array(), ys:new Array()};
this.lines = new Array();
this.linesAnimeInterval = null;
this.linesAnimeCounter = 0;
this.linesAnimeTime = 2; // sec
this.linesAnimeStartTime = 0,
this.linesAnimeDuration = 2000; // milli sec
// prototypes
if (typeof Chapter.initialized == "undefined") {
@@ -290,8 +290,13 @@ jQuery(document).ready(function($) {
};
Chapter.prototype.preview = function(e){
// don't relaunch preview more that one time
if(this.is_previewed) return;
console.log('preview', this.i);
this.is_previewed = true;
// close other chapters
for (var i = _chapitres_len - 1; i >= 0; i--) {
if(i !== this.i)
@@ -299,51 +304,50 @@ jQuery(document).ready(function($) {
};
// define randomly position of parties
var px, py, tXt = new Array(), tYt = new Array();
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
px=randB(-30, 30); py=randB(40, 60);
break;
case 1:
px=randB(180, 280); py=randB(200,300);
break;
case 2:
px=randB(-280, -180); py=randB(380,480);
break;
}
this.resetPartsPos();
tXt.push(px);
tYt.push(py);
};
console.log("tXt", tXt);
console.log("tYt", tYt);
tXt = shuffleArray(tXt);
tYt = shuffleArray(tYt);
// apply new position to parties
var that = this;
this.$parties.each(function(i, e) {
setTimeout(
(function(i, e, tXt, tYt){
(function(i, e, xs, ys){
return function(){
$(e)
.css({
translate:[tXt[i], tYt[i]],
transform:"translate3d("+xs[i]+"px,"+ys[i]+"px,0)",
});
}
}(i, e, tXt, tYt)),
}(i, e, that.parts_pos.xs, that.parts_pos.ys)),
10);
}); // each $parties
this.$e.addClass('previewed');
this.animeLines();
requestAnimationFrame(this.animeLines.bind(this));
};
Chapter.prototype.resetPartsPos = function(){
this.parts_pos = {xs:new Array(), ys:new Array()};
for (var i = 0; i < 3; i++) {
switch(i){
case 0:
this.parts_pos.xs.push(randB(-30,30)); this.parts_pos.ys.push(randB(90,110)); break;
case 1:
this.parts_pos.xs.push(randB(180,280)); this.parts_pos.ys.push(randB(250,350)); break;
case 2:
this.parts_pos.xs.push(randB(-280,-180)); this.parts_pos.ys.push(randB(430,530)); break;
}
};
this.parts_pos.xs = shuffleArray(this.parts_pos.xs);
this.parts_pos.ys = shuffleArray(this.parts_pos.ys);
};
Chapter.prototype.closePreview = function(){
this.$e.removeClass('previewed')
.find('.field-name-field-partie')
.css({transform:"none"});
this.animeLines();
requestAnimationFrame(this.animeLines.bind(this));
this.is_previewed = false;
};
Chapter.prototype.drawLines = function(){
@@ -354,52 +358,49 @@ jQuery(document).ready(function($) {
};
};
Chapter.prototype.animeLines = function(){
this.linesAnimeCounter = 0;
this.linesAnimeInterval = setInterval(
(function(_this){
return function(){
// console.log("partie pos : ", _this.$parties.eq(2).position());
Chapter.prototype.animeLines = function(timestamp){
// console.log("anime line "+this.nid);
// get the time on first anime launch
if(this.linesAnimeStartTime === 0)
this.linesAnimeStartTime = timestamp;
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < _this.lines.length; i++) {
pos1 = _this.$parties.eq(i).position();
pos2 = _this.$parties.eq(i+1).position();
// limit the animation time
if(timestamp - this.linesAnimeStartTime < this.linesAnimeDuration){
requestAnimationFrame(this.animeLines.bind(this));
}else{
this.linesAnimeStartTime = 0;
}
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// get the lines length
var l, a, pos1, pos2;
for (var i = 0; i < this.lines.length; i++) {
pos1 = this.$parties.eq(i).position();
pos2 = this.$parties.eq(i+1).position();
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
l = Math.sqrt(
Math.pow(
pos2.left - pos1.left
,2
)
+
Math.pow(
pos2.top - pos1.top
,2
)
);
// console.log("a = "+a);
_this.lines[i].$line.css({
'height':l,
rotate:a+"deg"
});
// get the rotation
a = 180 / 3.14 * Math.acos((pos2.top - pos1.top) / l);
if(pos2.left > pos1.left)
a *= -1;
};
// console.log("a = "+a);
this.lines[i].$line.css({
'height':l,
transform:"rotate3d(0,0,1,"+a+"deg)"
});
console.log("anime line interval");
// limit the naimation time
_this.linesAnimeCounter ++;
if(_this.linesAnimeCounter > (1000/_fps)*_this.linesAnimeTime)
clearInterval(_this.linesAnimeInterval);
};
}(this)),
_fps);
};
};
Chapter.prototype.loadNode = function(e){
@@ -441,6 +442,20 @@ jQuery(document).ready(function($) {
return o;
};
if (!Date.now) {
Date.now = function now() {
return new Date().getTime();
};
}
/*
_ _ __
(_)___ (_) /_
/ / __ \/ / __/
/ / / / / / /_
/_/_/ /_/_/\__/
*/
init();
});