preview opening works wery well now :)
This commit is contained in:
@@ -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();
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user