Discussion :

[nuhuruine]

Bonjour,

j'utilise greasemonkey 0.8.20100211.5, mootools 1.2.3, build 4980aa0fb74d2f6eb80bcd9f5b8e1fd6fbb8f607 et mootools-more : 1.2.3.1.
Je désire donc ajouter une barre qui se déplace avec le scroll. J'utilise donc les informations de David Welsh http://davidwalsh.name/scroll-sidebar.

Cela donne donc ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
 
	var newEl;
	newEl=new Element('a', {'name':'pagetop', 'id':'pagetop'});
	newEl.inject($$('body')[0].firstChild,'before');
	newEl=new Element('a', {'name':'pagebottom', 'id':'pagebottom'});
	$$('body')[0].adopt(newEl);
	newEl=new Element('div',{ 'id':'sidebar-menu'});
	$$('body')[0].adopt(newEl);
	newEl=new Element('ul',{ 'id':'sidebar-menu_ul'});
	$('sidebar-menu').adopt(newEl);
	newEl=new Element('li',{ 'id':'sidebar-menu_li_0'});
	$('sidebar-menu_ul').adopt(newEl);
	newEl=new Element('a',{ 'id':'sidebar-menu-top', 'href':'#pagetop', 'title':'Top of Page', 'styles':{'background':'blue'}, 'text':'Top of Page'});
	$('sidebar-menu_li_0').adopt(newEl);
	newEl=new Element('li',{ 'id':'sidebar-menu_li_3'});
	$('sidebar-menu_ul').adopt(newEl);
	newEl=new Element('a',{ 'id':'sidebar-menu-bottom', 'href':'#pagebottom', 'styles':{'background':'yellow'}, 'text':'Bottom of Page', 'title':'Bottom of Page'});
	$('sidebar-menu_li_3').adopt(newEl);
 
	GM_addStyle('#sidebar-menu	{ display:none; width:48px; background:#333; border:1px solid #000; padding:10px; -webkit-border-radius:10px; -moz-border-radius:10px; z-index:9999 }');
	GM_addStyle('#sidebar-menu ul{ padding:0; list-style-type:none; }');
	GM_addStyle('#sidebar-menu a	{ color:#fff; display:block; height:48px; width:48px; text-indent:-3000px; overflow:hidden; }');
 
	var ScrollSidebar = new Class({
 
		Implements: [Options],
 
		options: {
			offsets: { x:0, y:0 },
			mode: 'vertical',
			positionVertical: 'top',
			positionHorizontal: 'right',
			speed: 400
		},
 
		initialize: function(menu,options) {
			this.setOptions(options);
			this.menu = $(menu);
			this.move = this.options.mode == 'vertical' ? 'y' : 'x';
			this.property = this.move == 'y' ? 'positionVertical' : 'positionHorizontal';
			var css = { position: 'absolute', display:'block' };
			css[this.options.positionVertical] = this.options.offsets.y;
			css[this.options.positionHorizontal] = this.options.offsets.x;
			this.menu.setStyles(css).set('tween',{ duration: this.options.speed });
			this.startListeners();
		},
 
		startListeners: function() {
			var action = function() {
				this.setPosition($(document.body).getScroll()[this.move] + this.options.offsets[this.move]);
			}.bind(this);
			window.addEvent('scroll',action);
			window.addEvent('load',action);
		},
 
		setPosition: function(move) {
			this.menu.tween(this.options[this.property],move);
			return this;
		}
	});
 
	window.addEvent('domready',function() {
		$('sidebar-menu').set('opacity',0.8); //opacity effect for fun
		var sidebar = new ScrollSidebar('sidebar-menu',{
			offsets: {
				x: 20,
				y: 20
			}
		});
	});
 
	new SmoothScroll({ duration:300 });
	// vars
	var menu = $('sidebar-menu'), offsetY = 20, offsetX = 20, speed = 450;
	var setPosition = function(top) {
		var scroll = $(document.body).getScroll();
		menu.tween('top',scroll.y + offsetY);
	};
 
	menu.set('tween',{ duration: speed }).setStyles({
		position: 'absolute',
		right: offsetX,
		top: offsetY,
		opacity: 0.8
	});
 
	window.addEvents({
		scroll: setPosition,
		load: setPosition
	});

Lorsque je scroll, j'obtiens le message :
this.getWindow() is undefined (2679 out of range 555), greasemonkey.js (ligne 2679).

C'est là que je me creuse les méninges ... comment débugger la ligne 2679 alors que le fichier greasemonkey.js n'en comporte que 555.
De ce que j'en ai compris, GM utilise une sandbox pour exécuter les scripts. La fonction getWindow() est de mootools, veut remonter comme info l'objet "window" en cours. J'ai trouvé trois occurence qui pourraient être la source du problème.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Document.implement({
	...
	getWindow: function(){
		return this.window;
	},
	...
});

...

Window.implement({
	...
	getWindow: function(){
		return this;
	}

});

...

Element.implement({

	...
	getWindow: function(){
		return this.ownerDocument.window;
	},
	...
});

Je pensais remplacer window par unsafeWindow, seulement j'en suis au même point (même message d'erreur). Du coup je sèche ...

Mon anglais s'améliore depuis quelques jours seulement il est loin d'être assez bon pour comprendre tout ce qui concerne mootools et GM. Je viens donc vers vous, au cas où vous auriez une piste, voir une réponse, à mon problème.

Merci de votre aide,

[nuhuruine]

Bonjour,

je ne comprends pas encore tout mais j'avance.
Lors du scroll, j'ai enfin trouver d'où venez l'erreur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
Element.implement({

...
	getScroll: function(){
		// if (isBody(this)) return this.getWindow().getScroll();
		if (isBody(this)) {
			var win=this.getWindow() || window;
			return win.getScroll();
		}
		return {x: this.scrollLeft, y: this.scrollTop};
	},
...

J'ai donc remplacé ce qui est en vert (commentaire) par ce qui est en rouge. Du coup, j'ai eu un autre message d'erreur "Doc is undefined".

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function getCompatElement(element){
	var doc = element.getDocument();
	// return (!doc.compatMode || doc.compatMode == 'CSS1Compat') ? doc.html : doc.body;
	if(!doc.compatMode || doc.compatMode == 'CSS1Compat') { if(typeof doc.html=='undefined') {return doc.body;}else{ return doc.html;} } else {  return doc.body;}
};

Je ne comprends pas pourquoi doc.html est indéfini ... Je suppose que la ligne var doc=element.getDocument(); va chercher la fonction ci-dessous de l'objet Element.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
Element.implement({
...
getDocument: function(){
		return this.ownerDocument;
	},
...

C'est là que je ne comprends pas ...

Définition MDC : La propriété ownerDocument renvoie l'objet document de niveau supérieur pour ce nœud.

Qui peut m'expliquer pourquoi j'ai l'erreur doc.html is undefined ?

Merci.

[nuhuruine]

Le problème provenait bien de ownerDocument.

Il ne possède que :
AddEventListener
Location

Donc la ligne this.ownerDocument.window ne peut fonctionner ...

Donc problème résolu, seulement si quelqu'un a l'explication, alors je suis preneur.