bachir/jeunes-et-engages-d7
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Chapter is quite ok

Browse Source 
ajax loaded content
graphics ok
interactivity ok
remains the video interactions
This commit is contained in:
Bachir Soussi Chiadmi
2015-03-10 20:23:17 +01:00
parent d5edfa75c8
commit dab5226cd7
30 changed files with 3508 additions and 399 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sites/all/themes/gui/jee/js/jee.js
+196 -17
View File
@@ -35,6 +35,9 @@ jQuery(document).ready(function($) {
_fps = 1000/12,
_dragging = false, _timeout_dragging;
var _$chapter_wrapper = $('<div>').attr('id', 'chapter-wrapper').appendTo(_$container),
_loaded_chapter = false;
var _bubbles = new Array(),
_stars = new Array();
@@ -46,17 +49,17 @@ jQuery(document).ready(function($) {
initChapters();
launchNav();
// FULL SCREEN
var $fullscreenBtn = $('<div>enter</div>').attr('id','fullscreen-btn').appendTo("#root");
// Launch fullscreen for browsers that support it!
$fullscreenBtn.on('click', function(e){
// launchIntoFullscreen(document.documentElement); // the whole page
launchIntoFullscreen(document.getElementById("root")); // any individual element
});
$fullscreenBtn.on('click', onFullScreen);
// create bubbles
for (var i = 2; i > 0; i--) {
_bubbles.push($('<div>').addClass('bubble bubble-'+i).prependTo(_$container));
};
// create stars
for (var i = 20; i > 0; i--) {
_stars.push(
$('<div>')
@@ -116,15 +119,19 @@ jQuery(document).ready(function($) {
|____/|_____|_____|__|__| |_| |_____|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.bind('mousedown', function(e){
console.log('mousedown');
console.log('document mousedown');
clearTimeout(_timeout_dragging);
if(_loaded_chapter)
return false;
// set initial cursor pos
_mouse_down_pos.x = e.clientX;
_mouse_down_pos.y = e.clientY;
updateNavPos(e.clientX, e.clientY, true);
$(this).bind('mousemove', function(e){
console.log('mousemove');
console.log('document mousemove');
updateNavPos(e.clientX, e.clientY, false);
});
@@ -135,9 +142,14 @@ jQuery(document).ready(function($) {
}
})
.bind('mouseup', function(e){
console.log('mouseup');
console.log('document mouseup');
if(_loaded_chapter)
return false;
stopMoveNav();
$(this).unbind('mousemove');
// close all preview
if(Math.abs(e.clientX - _mouse_down_pos.x) < 2
&& Math.abs(e.clientY - _mouse_down_pos.y) < 2)
@@ -150,7 +162,7 @@ jQuery(document).ready(function($) {
| | | | | | | --| | | __| | | __| | | | | | |__ |
|_| |_____|_____|_____|__|__| |_____|\___/|_____|_|___| |_| |_____|
*/
.bind('touchstart', function(e){
.bind('document touchstart', function(e){
console.log('touchstart');
clearTimeout(_timeout_dragging);
// set initial pos
@@ -163,11 +175,11 @@ jQuery(document).ready(function($) {
}
})
.bind('touchmove', function(e){
console.log('touchmove');
console.log('document touchmove');
updateNavPos(e.originalEvent.touches[0].clientX, e.originalEvent.touches[0].clientY, false);
})
.bind('touchend', function(e){
console.log("touchend");
console.log("document touchend");
stopMoveNav();
});
};
@@ -256,6 +268,11 @@ jQuery(document).ready(function($) {
stopMoveNav();
};
function onFullScreen(e){
launchIntoFullscreen(document.getElementById("root"));
if(_loaded_chapter)
setTimeout(_loaded_chapter.buildVideos(), 100);
};
/*
________ __
/ ____/ /_ ____ _____ / /____ _____
@@ -295,6 +312,13 @@ jQuery(document).ready(function($) {
this.linesAnimeStartTime = 0,
this.linesAnimeDuration = 2000; // milli sec
// chapter
this.$n = false;
this.$blocks = false;
this.$vids = false;
this.texts_pos = shuffleArray([1,2,3]);
this.dimvideo = {w:0, h:0};
// prototypes
if (typeof Chapter.initialized == "undefined") {
@@ -376,8 +400,8 @@ jQuery(document).ready(function($) {
// )
// ));
if(this.i === 0)
console.log(this.i+" this.trans.z", this.trans.z);
// if(this.i === 0)
// console.log(this.i+" this.trans.z", this.trans.z);
this.$e.css({
transform:'translate3d('+this.trans.x+'px,'+this.trans.y+'px,0)'
@@ -526,16 +550,119 @@ jQuery(document).ready(function($) {
$.getJSON(
'/jee/chapter/'+this.nid,
{},
this.displayNode
this.nodeLoaded.bind(this)
);
_$body.addClass('chapter-displayed');
};
Chapter.prototype.displayNode = function(json, textstatus){
console.log('Chapter :: displayNode : json', json);
Chapter.prototype.nodeLoaded = function(json, textstatus){
console.log('Chapter :: nodeLoaded '+this.nid+' : json', json);
// insert ajax loaded into dom
_$chapter_wrapper.html(json.node);
// record some usefull data
this.$n = $('.node-chapitre', _$chapter_wrapper);
this.$blocks = $('.field-type-text-long', this.$n);
this.$vids = $('.field-name-field-partie', this.$n);
// record the current loaded chapter
// this will stop first interface to run
_loaded_chapter = this;
// wait to build correct display of chapter
setTimeout(this.displayNode.bind(this), 100);
};
Chapter.prototype.displayNode = function(){
console.log('Chapter :: displayNode '+this.nid);
// place text blocks
this.texts_pos = shuffleArray([1,2,3]);
this.$blocks
.each(this.placeText.bind(this))
.pep({
allowDragEventPropagation:false,
disableSelect:true,
velocityMultiplier:1
});
// build video player
this.buildVideos();
$('.node-title', this.$n).pep();
// show the whole thing
_$chapter_wrapper.addClass('visible');
};
Chapter.prototype.placeText = function(i, e){
// console.log("Chapter :: placeText", e);
switch(this.texts_pos[i]){
case 1: // top right
$(e)
.css({
top:randB(_container.h*0.05-$(e).height(),_container.h*0.15-$(e).height()),
left:randB(_container.w*0.8-$(e).width(),_container.w*0.9-$(e).width())
})
// .pep({debug:true, startPos:{bottom:randB(80,90),right:randB(80,90)}})
.find('.field-label')
.appendTo(e);
break;
case 2: // bottom left
$(e).css({
top:randB(_container.h*0.8,_container.h*0.9),
left:randB(_container.w*0.1,_container.w*0.2)
});
// $(e).pep({debug:true, startPos:{top:randB(80,90),left:randB(10,30)}});
break;
case 3: // bottom right
$(e).css({
top:randB(_container.h*0.8,_container.h*0.9),
left:randB(_container.w*0.7,_container.w*0.9-$(e).width())
});
// $(e).pep({debug:true, startPos:{top:randB(80,90),right:randB(10,30)}});
break;
}
};
Chapter.prototype.buildVideos = function(){
console.log('Chapter :: buildVideos');
this.dimvideo.h = this.$vids.height();
// redim each iframe to fit
// add a mask on top of each iframe to avoid bad interaction with vimeo
$('iframe', this.$vids)
.each(this.redimVideo.bind(this))
.after('<div class="mask"></div>');
this.$vids.css({
width:this.dimvideo.w*1.3,
height:this.dimvideo.h,
marginLeft:(_container.w-this.dimvideo.w*1.3)/2
});
// create the slider with peppermint
$('.field-items', this.$vids).Peppermint();
};
Chapter.prototype.redimVideo = function(i,e){
// compute proportional video width ragarding the parent height
this.dimvideo.w = (this.dimvideo.h * parseInt($(e).attr("width")))/parseInt($(e).attr("height"));
// apply thees sizes
$(e)
.css({ width:this.dimvideo.w, height:this.dimvideo.h })
.attr({ width:this.dimvideo.w, height:this.dimvideo.h })
// add some paading to parent for slider display
.parent().css({
paddingLeft:this.dimvideo.w*0.15,
paddingright:this.dimvideo.w*0.15
});
};
Node.initialized = true;
}
};
this.init();
};//Chapter
@@ -566,6 +693,10 @@ jQuery(document).ready(function($) {
};
}
function translate3d(x, y, z){
// return
};
/*
_ _ __
(_)___ (_) /_
@@ -577,7 +708,55 @@ jQuery(document).ready(function($) {
init();
});
/*
____ __ __ _____________ _______
/ __ \/ / / / / / ____/ _/ | / / ___/
/ /_/ / / / / / / / __ / // |/ /\__ \
/ ____/ /___/ /_/ / /_/ // // /| /___/ /
/_/ /_____/\____/\____/___/_/ |_//____/
*/
// https://css-tricks.com/snippets/jquery/draggable-without-jquery-ui/
// (function($) {
// $.fn.drags = function(opt) {
// opt = $.extend({handle:"",cursor:"move"}, opt);
// if(opt.handle === "") {
// var $el = this;
// } else {
// var $el = this.find(opt.handle);
// }
// return $el.css('cursor', opt.cursor).on("mousedown", function(e) {
// if(opt.handle === "") {
// var $drag = $(this).addClass('draggable');
// } else {
// var $drag = $(this).addClass('active-handle').parent().addClass('draggable');
// }
// var z_idx = $drag.css('z-index'),
// drg_h = $drag.outerHeight(),
// drg_w = $drag.outerWidth(),
// pos_y = $drag.offset().top + drg_h - e.pageY,
// pos_x = $drag.offset().left + drg_w - e.pageX;
// $drag.css('z-index', 1000).parents().on("mousemove", function(e) {
// $('.draggable').offset({
// top:e.pageY + pos_y - drg_h,
// left:e.pageX + pos_x - drg_w
// }).on("mouseup", function() {
// $(this).removeClass('draggable').css('z-index', z_idx);
// });
// });
// e.preventDefault(); // disable selection
// }).on("mouseup", function() {
// if(opt.handle === "") {
// $(this).removeClass('draggable');
// } else {
// $(this).removeClass('active-handle').parent().removeClass('draggable');
// }
// });
// }
// })(jQuery);
/*
____ __________ __ ___________________ ___ _ ________ ______ ______________ _ __ __________ ___ __ _________