expo cartel is moving
This commit is contained in:
@@ -7,7 +7,7 @@ this.debug=d;this.mass=Math.max(1,this.entrees.length);this.velocity_threshold=0
|
||||
this.d=this.r*2;this.e_color='e_col_'+this.entrees[Math.floor(Math.random(this.entrees.length))];this.canvas=document.createElement('canvas');this.canvas_ctx=this.canvas.getContext('2d');this.line_width=1;this.w=this.r*2+this.line_width*2;this.w_2=this.w/2;this.canvas.width=this.w;this.canvas.height=this.w;this.canvas_ctx.fillStyle='rgb(255,255,255)';this.canvas_ctx.lineWidth=this.line_width;this.wall_bouncing_elasticity=0.75;this.hover=false;this.opened=false;this.faded=false;this.center=false;this.aside=false;this.scrambling=false;if(typeof Node.initialized=="undefined"){Node.prototype.init=function(){this.calcWallLimits();this.x=this.wall_limits.left+Math.random()*(this.wall_limits.right-this.wall_limits.left);this.y=this.wall_limits.top+Math.random()*(this.wall_limits.bottom-this.wall_limits.top);this.ori_pos={x:this.x,y:this.y};this.initPhysics();};Node.prototype.initPhysics=function(){this.p=_physics.makeParticle(this.mass,this.x,this.y);this.p.velocity=new Physics.Vector((Math.random()-0.5)*_p_velocity_factor,(Math.random()-0.5)*_p_velocity_factor);this.ori_p=_physics.makeParticle(1000,this.ori_pos.x,this.ori_pos.y);this.ori_p.fixed=true;this.ori_p_attract=_physics.makeAttraction(this.ori_p,this.p,1000,_scene_props.width*2);this.ori_p_attract.on=false;this.attract=_physics.makeAttraction(_attracter,this.p,1000,_scene_props.width*2);this.attract.on=false;};Node.prototype.calcWallLimits=function(){this.wall_limits={top:_scene_props.margin_top+this.r,right:_scene_props.width-_scene_props.margin_right-this.r,bottom:_scene_props.height-_scene_props.margin_bottom-this.r,left:_scene_props.margin_left+this.r}};Node.prototype.onResizeCanvas=function(){this.calcWallLimits();this.shuffleOriP();};Node.prototype.shuffleOriP=function(){this.ori_pos.x=this.wall_limits.left+Math.random()*(this.wall_limits.right-this.wall_limits.left);this.ori_pos.y=this.wall_limits.top+Math.random()*(this.wall_limits.bottom-this.wall_limits.top);this.scramble();};Node.prototype.onUpdate=function(){if(this.hover||this.opened){this.p.fixed=true;}else{this.p.fixed=false;if(this.center)
|
||||
this.limitEvolutionZone();this.checkWallBouncing();this.updatePos();if(this.scrambling){this.checkOriPDist();}}
|
||||
if(_mouse_in&&!this.aside&&!this.faded)
|
||||
this.checkMouse();this.redraw();};Node.prototype.checkVelocityThreshold=function(){if(!this.centered||!this.aside){if(Math.abs(this.p.velocity.x)<this.velocity_threshold&&Math.abs(this.p.velocity.y)<this.velocity_threshold){this.p.velocity.multiplyScalar(0);}}};Node.prototype.checkWallBouncing=function(){switch(true){case this.x<this.wall_limits.left&&this.p.velocity.x<0:this.p.position.x=this.wall_limits.left;this.p.velocity.multiplyScalarXY(-1,1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.x>this.wall_limits.right&&this.p.velocity.x>0:this.p.position.x=this.wall_limits.right;this.p.velocity.multiplyScalarXY(-1,1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.y<this.wall_limits.top&&this.p.velocity.y<0:this.p.position.y=this.wall_limits.top;this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.y>this.wall_limits.bottom&&this.p.velocity.y>0:this.p.position.y=this.wall_limits.bottom;this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(this.wall_bouncing_elasticity);break;}};Node.prototype.updatePos=function(){this.x=this.p.position.x;this.y=this.p.position.y;};Node.prototype.checkMouse=function(){if(_m_pos.x>this.x-this.r&&_m_pos.x<this.x+this.r&&_m_pos.y>this.y-this.r&&_m_pos.y<this.y+this.r){if(_node_hover_id==-1||_node_hover_id!==this.id){this.setHover();}}else{this.unsetHover();}};Node.prototype.setHover=function(){this.hover=true;_node_hover_id=this.id;_node_pop_up.setNode(this);};Node.prototype.unsetHover=function(){this.hover=false;if(_node_hover_id==this.id){_node_hover_id=-1;_node_pop_up.removeNode();}};Node.prototype.open=function(){this.opened=true;_node_opened_id=this.id;};Node.prototype.close=function(){this.opened=false;};Node.prototype.fade=function(){this.faded=true;};Node.prototype.unFade=function(){this.faded=false;};Node.prototype.setCenteredOnEntree=function(tid){this.e_color='e_col_'+tid;this.setCentered();};Node.prototype.setCentered=function(){this.center=true;this.stopScrambling();this.unsetAside();this.attract.on=true;}
|
||||
this.checkMouse();this.redraw();};Node.prototype.checkVelocityThreshold=function(){if(!this.centered||!this.aside){if(Math.abs(this.p.velocity.x)<this.velocity_threshold&&Math.abs(this.p.velocity.y)<this.velocity_threshold){this.p.velocity.multiplyScalar(0);}}};Node.prototype.checkWallBouncing=function(){switch(true){case this.x<this.wall_limits.left&&this.p.velocity.x<0:this.p.position.x=this.wall_limits.left;this.p.velocity.multiplyScalarXY(-1,1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.x>this.wall_limits.right&&this.p.velocity.x>0:this.p.position.x=this.wall_limits.right;this.p.velocity.multiplyScalarXY(-1,1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.y<this.wall_limits.top&&this.p.velocity.y<0:this.p.position.y=this.wall_limits.top;this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(this.wall_bouncing_elasticity);break;case this.y>this.wall_limits.bottom&&this.p.velocity.y>0:this.p.position.y=this.wall_limits.bottom;this.p.velocity.multiplyScalarXY(1,-1).multiplyScalar(this.wall_bouncing_elasticity);break;}};Node.prototype.updatePos=function(){this.x=this.p.position.x;this.y=this.p.position.y;};Node.prototype.checkMouse=function(){if(_m_pos.x>this.x-this.r&&_m_pos.x<this.x+this.r&&_m_pos.y>this.y-this.r&&_m_pos.y<this.y+this.r){if(_node_hover_id==-1||_node_hover_id!==this.id){this.setHover();}}else{this.unsetHover();}};Node.prototype.setHover=function(){this.hover=true;_node_hover_id=this.id;_node_pop_up.setNode(this);};Node.prototype.unsetHover=function(){this.hover=false;if(_node_hover_id==this.id){_node_hover_id=-1;_node_pop_up.removeNode();}};Node.prototype.open=function(){this.opened=true;_node_opened_id=this.id;_$body.trigger({'type':'map-node-opened','node':this});};Node.prototype.close=function(){this.opened=false;};Node.prototype.fade=function(){this.faded=true;};Node.prototype.unFade=function(){this.faded=false;};Node.prototype.setCenteredOnEntree=function(tid){this.e_color='e_col_'+tid;this.setCentered();};Node.prototype.setCentered=function(){this.center=true;this.stopScrambling();this.unsetAside();this.attract.on=true;}
|
||||
Node.prototype.unsetCentered=function(){this.center=false;this.attract.on=false;}
|
||||
Node.prototype.limitEvolutionZone=function(){this.dist_to_attracter=this.p.distanceTo(_attracter);if(this.dist_to_attracter<_scene_props.width/4){if(this.p.velocity.length()>0.4){this.p.velocity.multiplyScalar(0.99);}}
|
||||
if(this.x<_evolution_zone.left||this.x>_evolution_zone.right||Math.abs(_attracter.position.y-this.y)>_scene_props.height/4){this.attract.on=true;}else{this.attract.on=false;}}
|
||||
|
||||
@@ -451,6 +451,10 @@
|
||||
this.opened = true;
|
||||
_node_opened_id = this.id;
|
||||
//this.drawSprite();
|
||||
_$body.trigger({
|
||||
'type':'map-node-opened',
|
||||
'node':this
|
||||
});
|
||||
};
|
||||
Node.prototype.close = function(){
|
||||
this.opened = false;
|
||||
|
||||
@@ -85,7 +85,9 @@ if(this.$playpause){if(this.playlist.length>0){this.$playpause.addClass('is-acti
|
||||
if(this.$next){if(this.playing&&this.playlist.length>1&&this.current_index<this.playlist.length-1){this.$next.addClass('is-active');}else{this.$next.removeClass('is-active');}}
|
||||
if(this.$previous){if(this.playing&&this.playlist.length>1&&this.current_index>0){this.$previous.addClass('is-active');}else{this.$previous.removeClass('is-active');}}
|
||||
return this;},deactivate(){this.stop();this.active=false;},onAudioOpenDocument(args){void 0;if(args.caller!==this){this.reset();}},onAudioPlayerPlay(){if(this.playing&&this.paused){this.paused=false;this.showHideControls();}},onAudioPlayerPause(){if(this.playing&&!this.paused){this.paused=true;this.showHideControls();}},onAudioPlayerEnded(){void 0;if(this.playing){this.paused=false;this.next();}},};function initExpo(){void 0;if(window.location.hash=='#black'){$('body').addClass('expo-black');}
|
||||
_randomPlayer.start();}
|
||||
_$body.on('map-node-opened',checkExpoPlayerPositionning);_randomPlayer.start();}
|
||||
function checkExpoPlayerPositionning(e){void 0;switch(true){case e.node.x>window.innerWidth-800&&e.node.y<200:_audioPlayer.$container.attr('pos','bottom-left');break;case e.node.x>window.innerWidth-800:_audioPlayer.$container.attr('pos','top-left');break;case e.node.y<200:_audioPlayer.$container.attr('pos','bottom-right');break;default:_audioPlayer.$container.attr('pos','top-right');}
|
||||
_audioPlayer.$container.css({'display':"block",'left':e.node.x+"px",'top':e.node.y+"px",});}
|
||||
function initGrid(){void 0;if(!_is_mobile){checkGridBlockHeight();_$row.find('.col').addClass('offfield');}
|
||||
if(false){var $grid=$('.grid',_$row).masonry({itemSelector:'.col',columnWidth:'.col-2',containerStyle:null,resizeContainer:false,transitionDuration:0,});$grid.imagesLoaded().progress(function(){$grid.masonry('layout');});$grid.imagesLoaded(function(){$grid.masonry('layout');});$grid.on('layoutComplete',checkGridBlockVisible);}else{if(!_is_mobile){checkGridBlockVisible();}}};function checkGridBlockHeight(){var $r_h=_$row.height();var $this;$('.grid .col',_$row).each(function(i,e){$this=$(this);if(!$this.is('[init-height]')){$this.attr('init-height',$this.outerHeight())}
|
||||
$this.height(Math.min($this.attr('init-height'),_$row.height()));});};function checkGridBlockVisible(){var $r_h=_$row.height();var $this,pos;$('.grid .col',_$row).each(function(i,e){$this=$(this);pos=$this.position();if(pos.top+$this.height()<=$r_h){$this.removeClass('offfield');}else{$this.addClass('offfield');}});}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -1966,8 +1966,32 @@
|
||||
if(window.location.hash == '#black'){
|
||||
$('body').addClass('expo-black');
|
||||
}
|
||||
_$body.on('map-node-opened', checkExpoPlayerPositionning);
|
||||
_randomPlayer.start();
|
||||
}
|
||||
function checkExpoPlayerPositionning(e){
|
||||
console.log('checkExpoPlayerPositionning', e.node);
|
||||
|
||||
switch(true){
|
||||
case e.node.x > window.innerWidth-800 && e.node.y < 200:
|
||||
_audioPlayer.$container.attr('pos', 'bottom-left');
|
||||
break;
|
||||
case e.node.x > window.innerWidth-800:
|
||||
_audioPlayer.$container.attr('pos', 'top-left');
|
||||
break;
|
||||
case e.node.y < 200:
|
||||
_audioPlayer.$container.attr('pos', 'bottom-right');
|
||||
break;
|
||||
default:
|
||||
_audioPlayer.$container.attr('pos', 'top-right');
|
||||
}
|
||||
|
||||
_audioPlayer.$container.css({
|
||||
'display':"block",
|
||||
'left':e.node.x+"px",
|
||||
'top':e.node.y+"px",
|
||||
});
|
||||
}
|
||||
|
||||
// ___ _ _
|
||||
// / __|_ _(_)__| |
|
||||
|
||||
@@ -1001,7 +1001,9 @@ main[role="main"]{
|
||||
opacity:1;
|
||||
transition: opacity 0.2s ease-in-out;
|
||||
.entrees{
|
||||
@include entree-micro-square;
|
||||
// body:not(.domain-expo-encyclopediedelaparole-org) &{
|
||||
@include entree-micro-square;
|
||||
// }
|
||||
}
|
||||
h2.node-title{
|
||||
margin:0.2em 0 0;
|
||||
@@ -1110,7 +1112,7 @@ main[role="main"]{
|
||||
transform: translate(-50%, -50%);
|
||||
background-color: rgba(255,255,255, 0.8);
|
||||
outline: 1px solid red;
|
||||
padding:2em 1em 2em 2em; margin:0;
|
||||
padding:0.5em 0.5em 0 0.5em; margin:0;
|
||||
.btns,
|
||||
.actions,
|
||||
.favoris{
|
||||
@@ -1120,15 +1122,76 @@ main[role="main"]{
|
||||
margin:0.80em 0 0;
|
||||
}
|
||||
.time{
|
||||
margin:0.75em 0 0;
|
||||
margin:1.055em 0 0;
|
||||
>*{
|
||||
width:50px;
|
||||
}
|
||||
.current-time{
|
||||
font-size: 1em;
|
||||
}
|
||||
.duration{
|
||||
margin-top:0.28em;
|
||||
}
|
||||
}
|
||||
.cartel{
|
||||
margin-top: 0;
|
||||
width:calc(100% - 190px);
|
||||
.entrees{
|
||||
span.entree{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
* {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
$w:60px; // diagonal length
|
||||
$s:($w *1.4)*0.5; // side given the diagonal (1.4 is the square root of 2)
|
||||
&:before{
|
||||
content:"";
|
||||
position: absolute;
|
||||
width: $w; height:0;
|
||||
border-top: 1px solid red;
|
||||
}
|
||||
// pos attributes refers to where the popup appears
|
||||
&[pos="bottom-right"]{
|
||||
transform: translateY($s) translateX($s);
|
||||
&:before{
|
||||
top:-1px;
|
||||
left: -$w - 1px;
|
||||
transform-origin: bottom right;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
}
|
||||
&[pos="bottom-left"]{
|
||||
transform: translateX(-100%) translateY($s) translateX(-$s);
|
||||
&:before{
|
||||
// top:calc(100% + 1px);*
|
||||
top:0;
|
||||
left: 100%;
|
||||
transform-origin: top left;
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
}
|
||||
&[pos="top-left"]{
|
||||
transform: translateY(-100%) translateX(-100%) translateY(-$s) translateX(-$s);
|
||||
&:before{
|
||||
bottom:0;
|
||||
left: 100%;
|
||||
transform-origin: top left;
|
||||
transform: rotateZ(45deg);
|
||||
}
|
||||
}
|
||||
&[pos="top-right"]{
|
||||
transform: translateY(-100%) translateY(-$s) translateX($s);
|
||||
&:before{
|
||||
top:calc(100% + 1px);
|
||||
left: - ($w +1px);
|
||||
transform-origin: top right;
|
||||
transform: rotateZ(-45deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
body.expo-black &{
|
||||
background-color: $expo-black-bg;
|
||||
|
||||
Reference in New Issue
Block a user