--- a/front_idill/src/mosaic/js/mosaic.js Fri Apr 27 14:38:23 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js Fri May 11 11:04:06 2012 +0200
@@ -143,7 +143,9 @@
mosaic.prototype.preZoom = function(snapshot)
{
if(this.fullscreen)
+ {
return;
+ }
//Mosaïque.
var mosaic = this;
//Dimensions de la mosaïque.
@@ -160,10 +162,16 @@
//Si un zoom est déjà en cours, on ne zoom sur rien d'autre en attendant que ce snapshot ai dézoomé en cas de mouseleave.
if(this.zoomed)
+ {
if($('#preZoomContainer-' + currentId) != $(this) && this.previousZoomedSN != '' && this.previousId != '')
+ {
this.preUnzoom();
+ }
else
+ {
return;
+ }
+ }
//On indique qu'on a zoomé et on spécifie le snapshot sur lequel on a zoomé.
this.zoomed = true;
@@ -195,13 +203,21 @@
//CAS PARTICULIER pour la position du snapshot zoomé : les bordures.
if(finalDivTop < 0)
+ {
finalDivTop = -margin;
+ }
if(finalDivTop + finalDivHeight > h)
+ {
finalDivTop = h - finalDivHeight;
+ }
if(finalDivLeft < 0)
+ {
finalDivLeft = 0;
+ }
if(finalDivLeft + finalDivWidth + margin*2 > w)
+ {
finalDivLeft = w - finalDivWidth - margin*2;
+ }
////Code de debug.
////CAUTION////
@@ -234,7 +250,9 @@
$('#prezoomContainer-' + currentId).click(function ()
{
if(this.previousZoomedSN != '')
+ {
mosaic.zoom();
+ }
});
}
@@ -245,7 +263,9 @@
{
//Si on n'a pas zoomé, on quitte la fonction.
if(!this.zoomed)
+ {
return;
+ }
//On spécifie la marge afin de centrer le prédézoom.
var margin = this.marginWidth;
@@ -280,7 +300,9 @@
//Si la mosaïque est en pleine écran, pas la peine de zoomer.
if(this.fullscreen)
+ {
return;
+ }
//On prend les attributs nécessaires au calculs.
var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;
@@ -293,7 +315,7 @@
var initialDivTop = this.previousZoomedSN.position().top, initialDivLeft = this.previousZoomedSN.position().left;
//Dimensions et coordonnées finales du div.
var finalDivWidth = initialDivWidth * (this.zoomPercentage+1), finalDivHeight = initialDivHeight * (this.zoomPercentage+1);
- var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2 + 'px', newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2 + 'px';
+ var newZoomTop = -this.previousZoomedSN.position().top*(newPreMPHeight/initMPHeight) - this.zoomedMargin/2 + (initMPHeight - initMPHeight * this.zoomPercentage)/2, newZoomLeft = -this.previousZoomedSN.position().left*(newPreMPWidth/initMPWidth) - this.zoomedMargin/2 + (initMPWidth - initMPWidth * this.zoomPercentage)/2;
var newSnWidth = initMPWidth * this.zoomPercentage, newSnHeight = initMPHeight * this.zoomPercentage;
this.preUnzoom(this);
@@ -336,29 +358,94 @@
mos.centerId = zoomedImgId;
mos.listenToNeighbours();
mos.currentMode = 'VIDEO';
+
+ console.log('h : ' + -newZoomLeft + " " + zoomedImg.position().left);
+
+ mos.loadPlayer((zoomedImg.position().top + newZoomTop + mos.MPTop_margin), (zoomedImg.position().left + newZoomLeft), newSnWidth + 1, newSnHeight + 1);
+
/*mos.unload();
mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/
});
}
/*
+ * Chargement du player basé sur le metadataplayer.
+*/
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight)
+{
+ //On configure les options de lancement.
+ IriSP.libFiles.defaultDir = "../lib/";
+ IriSP.widgetsDir = "./player/metadataplayer/"
+
+ console.log(newZoomTop + " " + newZoomLeft);
+
+ var _metadata = {
+ url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/7c912bce-66b8-11e1-80f6-00145ea4a2be?callback=?',
+ format: 'ldt'
+ };
+ var _config = {
+ gui: {
+ width: newSnWidth,
+ height: newSnHeight,
+ container: 'LdtPlayer',
+ default_options: {
+ metadata: _metadata
+ },
+ css:'./player/metadataplayer/LdtPlayer-core.css',
+ widgets: [
+ {
+ type: "Timeline"
+ }
+ ]
+ },
+ player:{
+ type: 'html5', // player type
+ video: 'http://media.iri.centrepompidou.fr/video/ldtplatform/body_trail_cctv.mp4',
+ live: true,
+ height: newSnHeight,
+ width: newSnWidth,
+ autostart: true
+ }
+ };
+
+ //On positionne le player.
+ $('.LdtPlayer').css(
+ {
+ //display: 'none',
+ position: 'absolute',
+ 'background-color': '#000000',
+ top: newZoomTop,
+ left: newZoomLeft
+ });
+
+ //On démarre le player.
+ var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+ console.log(_myPlayer);
+}
+
+/*
* Retour à la taille normale de la mosaïque.
*/
mosaic.prototype.unzoom = function()
{
//Si on n'est pas en plein écran, on quitte.
if(!this.fullscreen)
+ {
return;
+ }
//On charge les attributs nécessaires aux calculs.
var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
var mpWidth = this.width, mpHeight = this.height;
var mos = this;
- //On passe le snapshot sur lequel on a zoomé en LD.
+ //On passe le snapshot sur lequel on a zoomé en SD.
var zoomedImg = $('img', this.previousZoomedSN);
var src = zoomedImg.attr('src');
zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
+
+ $('div').remove('.LdtPlayer');
+ $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
//On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
$('.snapshotDivs').animate(
@@ -383,7 +470,7 @@
//On revient en mode MOSAIC.
mos.currentMode = 'MOSAIC';
//On ne permet plus le déplacement vers les voisins.
- $('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+ $('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
});
}
@@ -409,12 +496,17 @@
//Si le voisin du bas est sur la même colonne, on n'est pas sur la bordure du bas.
this.neighboursIds[3] = (currentLine < (this.imagesToShow / this.length)) ? (+this.centerId + this.length) : -1;
+ //ID du cadre voisin.
+ var preId;
+
for(var i = 0 ; i < this.neighboursIds.length ; i++)
{
if(this.neighboursIds[i] != -1)
- {
+ {
+ preId = '#neighbourFrameBorder-' + this.neighboursIds[i];
//On permet le déplacement vers les voisins.
- $('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.changeNeighbourColor);
+ // $('#snapshotDiv-' + this.neighboursIds[i] + ', ' + preId + '-left,' + preId + '-right,' + preId + '-up,' + preId + '-down').mouseenter(mos.selectNeighbour);
+ $('#snapshotDiv-' + this.neighboursIds[i]).mouseenter(mos.selectNeighbour);
}
}
}
@@ -422,7 +514,7 @@
/*
* Change la coloration d'une bordure où on se positionne lors d'une vue en plein écran.
*/
-mosaic.prototype.changeNeighbourColor = function()
+mosaic.prototype.selectNeighbour = function()
{
////TEST
//$('.test').append(mos.currentMode + " " + $(this).attr('id') + " " + 'snapshotDiv-' + mos.centerId + ',');
@@ -430,47 +522,89 @@
//Si on est en mode VIDEO (plein écran) ET si le snapshot pointé est un voisin.
if((mos.currentMode == 'VIDEO') && ($(this).attr('id') != 'snapshotDiv-' + mos.centerId))
{
- //On crée le div cyan qui va être superposé au voisin.
- var cyanDiv = '<div class="cyan" id="cyan-' + $(this).attr('id') + '"></div>';
+ //On crée le cadre qui va être superposé au voisin.
//On le colle au voisin.
- $('#mainPanel').append(cyanDiv);
- $('#cyan-' + $(this).attr('id')).css('top', $(this).position().top).css('left', $(this).position().left).css('width', $(this).width()).css('height', $(this).height()).css('margin', $(this).css('margin')).animate(
+ var tab = $(this).attr('id').split('-');
+ var snapshotId = tab[1];
+ var neighbourFrame = '';
+ var marginValue = parseFloat($(this).css('margin'));
+
+ neighbourFrame += '<div class="neighbourFrame" id="neighbourFrame-' + snapshotId + '"><div class="neighbourImgBg" id="neighbourImgBg-' + snapshotId + '"><div class="neighbourImg" id="neighbourImg-' + snapshotId + '"></div></div></div>';
+
+ $('#mainPanel').append(neighbourFrame);
+
+ //On positionne le div de background juste au niveau du voisin.
+ $('#neighbourFrame-' + snapshotId).css(
+ {
+ 'top': (+$(this).position().top + marginValue),
+ 'left': (+$(this).position().left + marginValue),
+ 'width': $(this).width(),
+ 'height': $(this).height()
+ });
+ //On positionne le div de background noir juste au niveau de l'image du voisin.
+ $('#neighbourImgBg-' + snapshotId).css(
+ {
+ 'top': marginValue,
+ 'left': marginValue,
+ 'width': $(this).width() - marginValue*2,
+ 'height': $(this).height() - marginValue*2,
+ });
+ //On met par dessus le div de l'image clonée du voisin.
+ $('#neighbourImg-' + snapshotId).css(
+ {
+ 'top': 0,
+ 'left': 0,
+ 'width': $(this).width() - marginValue*2,
+ 'height': $(this).height() - marginValue*2,
+ 'background-image': 'url(' + $('img', $(this)).attr('src') + ')',
+ 'background-size': $(this).width() + 'px ' + $(this).height() + 'px',
+ 'background-position': -marginValue + 'px ' + -marginValue + 'px',
+ 'opacity': '0.4'
+ });
+
+ var fId = '#neighbourFrame-' + snapshotId;
+
+ $(fId).animate(
{
//On le fait apparaître.
- opacity: '0.4'
- }, timeNeighbourUnglowing, function()
+ opacity: '1'
+ }, timeNeighbourGlowing, function()
{
//On peut désormais se déplacer vers ce voisin.
mos.canMoveToNeighbour = true;
- }).mouseleave(mos.unchangeNeighbourColor).click(mos.moveToNeighbour);
+ });
+ //Lorsqu'on quitte un des snapshots (bien entendu le voisin en question), on retire le cadre.
+ $(fId).mouseleave(mos.deselectNeighbour)
+ //Si on clique sur le voisin ou son cadre, on passe au voisin suivant.
+ $(fId).click(mos.moveToNeighbour);
}
}
/*
* Change la coloration d'une bordure quittée lors d'une vue en plein écran.
*/
-mosaic.prototype.unchangeNeighbourColor = function()
+mosaic.prototype.deselectNeighbour = function()
{
////TEST
//$('.test').append('un,');
-
+
//On ne peut plus se déplacer vers les voisins.
mos.canMoveToNeighbour = false;
-
+
+ //On récupère le voisin.
+ var neighbourFrame = $(this);
+
//Si on est en mode VIDEO.
if(mos.currentMode == 'VIDEO')
{
- //On obtient le div de coloration superposé au voisin.
- var cyanDiv = $(this);
-
//On le fait disparaître progressivement.
- $(this).animate(
+ neighbourFrame.animate(
{
opacity: '0'
- }, timeNeighbourGlowing, function()
+ }, timeNeighbourUnglowing, function()
{
//Une fois invisible, on le supprime.
- cyanDiv.remove();
+ neighbourFrame.remove();
});
}
}
@@ -482,45 +616,50 @@
{
//Si on ne peut pas se déplacer vers les voisins, on quitte.
if(!mos.canMoveToNeighbour)
+ {
return;
+ }
//On obtient l'ID de destination.
var tab = $(this).attr('id').split('-');
- var destinationId = tab[2];
+ var destinationId = tab[1];
//On charge les attributs nécessaires aux calculs.
var MPCurrentTop = $('#mainPanel').position().top, MPCurrentLeft = $('#mainPanel').position().left;
var divideCoeffTop = Math.floor(destinationId / mos.length) == 0 ? 1 : Math.floor(destinationId / mos.length);
var divideCoeffLeft = destinationId % mos.length == 0 ? 1 : destinationId % mos.length;
- var cyanTop = $(this).position().top, cyanLeft = $(this).position().left;
+ var neighbourFrameTop = $('#snapshotDiv-' + destinationId).position().top, neighbourFrameLeft = $('#snapshotDiv-' + destinationId).position().left;
//On définit pour le déplacement vertical s'il est nécessaire de se déplacer en haut ou en bas.
- if(mos.previousZoomedSN.position().top > cyanTop)
- MPCurrentTop += Math.abs(cyanTop - mos.previousZoomedSN.position().top);
- else if(mos.previousZoomedSN.position().top < cyanTop)
- MPCurrentTop -= Math.abs(cyanTop - mos.previousZoomedSN.position().top);
+ if(mos.previousZoomedSN.position().top > neighbourFrameTop)
+ MPCurrentTop += Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
+ else if(mos.previousZoomedSN.position().top < neighbourFrameTop)
+ MPCurrentTop -= Math.abs(neighbourFrameTop - mos.previousZoomedSN.position().top);
//On définit pour le déplacement horizontal s'il est nécessaire de se déplacer à gauche ou à droite.
- if(mos.previousZoomedSN.position().left > cyanLeft)
- MPCurrentLeft += Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
- else if(mos.previousZoomedSN.position().left < cyanLeft)
- MPCurrentLeft -= Math.abs(cyanLeft - mos.previousZoomedSN.position().left);
+ if(mos.previousZoomedSN.position().left > neighbourFrameLeft)
+ MPCurrentLeft += Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
+ else if(mos.previousZoomedSN.position().left < neighbourFrameLeft)
+ MPCurrentLeft -= Math.abs(neighbourFrameLeft - mos.previousZoomedSN.position().left);
//On passe le snapshot de destination en HD.
var destinationImg = $('#snapshot-' + destinationId);
var destinationImgSrc = destinationImg.attr('src');
destinationImg.attr('src', destinationImgSrc.replace('snapshots-little/', 'snapshots/'));
- //On passe l'ancien snapshot en LD.
+ //On passe l'ancien snapshot en SD.
var currentImgSrc = $('img', mos.previousZoomedSN).attr('src');
$('img', mos.previousZoomedSN).attr('src', currentImgSrc.replace('snapshots/', 'snapshots-little/'));
//On obtient l'ID du div de coloration du snapshot vers lequel on se déplace afin de le supprimer.
- var cyan = $(this);
- var tab = cyan.attr('id').split('-');
- mos.centerId = tab[2];
+ var neighbourFrame = $(this);
+ var tab = neighbourFrame.attr('id').split('-');
+ mos.centerId = tab[1];
$(this).css('opacity', '0');
- cyan.remove();
-
+ neighbourFrame.remove();
+
+ $('div').remove('.LdtPlayer');
+ $('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
+
//On grise le snapshot qu'on vient de quitter.
mos.previousZoomedSN.animate(
{
@@ -541,9 +680,11 @@
}, mos.zoomTime, function()
{
//On recharge les voisins.
- $('.snapshotDivs').unbind('mouseenter', mos.changeNeighbourColor);
+ $('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
mos.previousZoomedSN = $('#snapshotDiv-' + mos.centerId);
mos.listenToNeighbours();
+
+ mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height());
});
});
}