MooFlow pb Reflect + ToolMan, désactiver le drop ?

Bonjour à tous,

voilà l'histoire, je suis en stage en ce moment même, j'ai à développer une interface intuitive pour la visualisation de schémas, patin couffin...

Avant toute chose je tiens à préciser que je suis un newb en Ajax, moi mon truc à la base c'est plutôt le dev Java, mais passons.

J'ai donc tâté un peu le MooFlow de MooTools (pour ceux qui ne connaissent pas, un CoverFlow à la sauce Apple), je l'intègre très facilement dans ma page, seul soucis, j'ai été obligé de désactiver une partie du code du mooflow.js car sans celà, le cover flow ne s'affichait pas. Il s'agit de la partie du code relative à l'effet "Reflect", si vous voyez de quoi je veux parler.

J'ai commenté ça :

/*Element.implement({
	reflect: function(arg){
		i = arg.img.clone();
		if(Browser.Engine.trident){
			i.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(opacity=20, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy='+100*arg.ref+')';
			i.setStyles({'width':'100%', 'height':'100%'});
			return new Element('div').adopt(i);
		} else {
			var can = new Element('canvas').setProperties({'width':arg.width, 'height':arg.height});
			if(can.getContext){
				var ctx = can.getContext("2d");
				ctx.save();
				ctx.translate(0,arg.height-1);
				ctx.scale(1,-1);
l'erreur venait d'ici -->	ctx.drawImage(i, 0, 0, arg.width, arg.height);
				ctx.restore();
				ctx.globalCompositeOperation = "destination-out";
				ctx.fillStyle = arg.color;
				ctx.fillRect(0, arg.height*0.5, arg.width, arg.height);
				var gra = ctx.createLinearGradient(0, 0, 0, arg.height*arg.ref);					
				gra.addColorStop(1, "rgba(255, 255, 255, 1.0)");
				gra.addColorStop(0, "rgba(255, 255, 255, "+(1-arg.ref)+")");
				ctx.fillStyle = gra;
				ctx.rect(0, 0, arg.width, arg.height);
				ctx.fill();
				delete ctx, gra;
			}
			return can;
		}
	}
});*/

et aussi ça :

	createMooFlowElement: function(counter, i){
		var obj = this.getCurrent(i);
		var img = this.loadedImages[i];
		obj['width'] = img.width;
		obj['height'] = img.height;
		img.removeProperties('width','height');

		obj['div'] = new Element('div').setStyles({
			'position':'absolute',
			'display':'none',
			'height': this.MooFlow.getSize().y
		}).inject(this.MooFlow);
		obj['con'] = new Element('div').inject(obj['div']);
		img.setStyles({'vertical-align':'bottom', 'width':'100%', 'height':'70%'});
		img.addEvents({'click': this.clickTo.bind(this, i), 'dblclick': this.viewCallBack.bind(this, i)});
		img.inject(obj['con']);
		/*
		new Element('div').reflect({ 'img': img,
			'ref': this.options.reflection,
			'height': obj.height,
			'width': obj.width,
			'color': this.options.bgColor
		}).setStyles({'width':'100%','height':'50%','background-color': this.options.bgColor}).inject(obj['con']);*/
		
		this.loader.set('text', (counter+1) + ' / ' + this.loadedImages.length);
	},

La seconde partie appelant la première, ça paraît plutot logique, ce qui l'est moins en revanche, c'est que la démo sur le site fonctionne à merveille (http://www.outcut.de/MooFlow/) alors que moi ça me donne le super message d'erreur suivant :

Erreur : uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  location: "JS frame :: file:///home/a_bos/Desktop/TestCoverFlow/js/MooFlow.js :: anonymous :: line 410"  data: no]

J'ai cherché vite fait sur mon ami google mais il apparaît qu'il s'agit d'une erreur de Firefox, et effectivement, sous IE ou Safari ça roule comme sur des roulettes, bizarre tout de même car sur la page de démo que j'ai visitée (je suis sur Firefox), ça s'affichait niquel.

Si quelqu'un à une solution à ce problème déjà je lui en serait très reconnaissant, mais ce n'est pas ce qui m'intéresse le plus.

Mon second problème s'articule plutôt autour du Drag'n'Drop que j'ai intégré avec ToolMan (http://tool-man.org/examples/dragging.html).
Pour ma part j'ai un menu à droite et un menu à gauche qui sont tous les deux "Drag'n'Drop-abbles" sans aucun soucis (Merci ToolMan c'était fastoche ! ) en revanche lorsque je m'amuse à déplacer mes menus, ils passent "derrière" le MooFlow, le MooFlow étant "transparent", je vois où je les déplace et il n'y a pas de problème, mais si j'ai le malheur de "lâcher" mon menu au niveau du MooFlow (derrière donc), le MooFlow m'empêche de les récupérer, il sont figés derrière. Je les vois par transparence, mais je ne peux plus les bouger, ni même les attraper ou encore cliquer sur un des liens de mon menu...

Le fait que mes menus passent derrière le MooFlow tant que je les ai "en main" ne me dérrange pas outre mesure, mais je voudrais savoir s'il est possible d'empêcher le Drop à l'emplacement du MooFlow. Genre on peut les déplacer où on veut, normal, mais si on les Drop au niveau du MooFlow, ils reviennent gentillement à leur place ^^.

Si quelqu'un à la solution ou une idée, je suis prenneur !
Merci beaucoup.[/i]
Modifié par arnaud.tlse (23 Apr 2009 - 10:31)

Re bonjour à tous,

le problème de Drag'N'Drop est résolu à l'instant.

Un petit

position:relative; z-index:100;

dans mon fichier default.css et le tour est joué, les menus sont toujours déplaçables comme bon me semble, seulement maintenant ils ont le "dessus" sur mon Cover Flow, et donc je peux les lâcher où je veux sans qu'ils perdent le "focus".

En revanche je n'ai toujours pas résolu le problème de Reflect du MooFlow, je laisse donc le topic non résolu en attendant que l'on trouve la solution .

je relance le sujet, mis c'est juste parce que je viens de découvrir une solution au problème de l'erreur javascript dans Firefox, à cette adresse :
http://www.mooforum.net/scripts12/mooflow-t226.html#p3679.
En souhaitant que ça rendre service aux utilisateurs de Mooflow.