Discussion :

[DiverSIG]

Bonjour,

J'essaie d'écrire un composant de type toolbar, avec une méthode addControl pour ajouter un contôle.

Mon composant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
function Toolbar(options) {
	const map = new Object(options.target);
 
	const element = document.createElement('div');
	element.className = "ol-toolbar";
 
	return element
}
 
Toolbar.prototype.addControl = function(control) {
	console.log('ici le control');
}

Mon contrôle à ajouter :

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
function myControl(options) {
	const map = new Object(options.target);
 
	const button = document.createElement('button');
	button.className = "myControl";
	button.innerHTML = 'myControl';
 
	const onClick = function() {
		console.log('clic sur le bouton');
	}
	button.addEventListener('click', onClick, false);
 
	var element = document.createElement('div');
	element.appendChild(button);
 
	return element
}

Mon appel du composant:

Code :

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

1
2
3
4
5
6
var toolbar = new Toolbar({
	target: map
});
var myControl = new myControl({target: map});
 
toolbar.addControl(myControl);

Mais j'ai un message d'erreur :

Uncaught TypeError: toolbar.addControl is not a function

Qu'est ce qui cloche?

Merci,
Nico

[mathieu]

quand vous faites return element ça remplace l'objet toolbar par la balise, d'où le message d'erreur.

si votre application est prévue pour les navigateurs récents, vous pouvez utiliser la syntaxe avec class :
https://developer.mozilla.org/fr/doc...erence/Classes

[DiverSIG]

Si j'essaie avec la syntaxe class :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Toolbar extends HTMLDivElement {
	constructor(options) {
		options = options ? options : {};
 
		super({
			target: options.target,
		});
	}
 
	addControl(control) {
		console.log('ici le control');
		return true
	}
}

J'ai un message d'erreur sur le mot super:

Uncaught TypeError: Illegal constructor.

Nico

[DiverSIG]

une version qui a l'aire de marcher:

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
class Toolbar extends HTMLElement {
	constructor(options) {
		super({
			target: options.target,
		});
 
		this.className = "ol-toolbar";
	}
 
	addControl(control) {
		var cc = document.createElement('div');
		cc.appendChild(control);
		this.appendChild(cc);
	}
}
 
// Le nom doit contenir un trait d'union !!!!!!!!!
// http://udn.realityripple.com/docs/Web/API/CustomElementRegistry/define
window.customElements.define('ol-toolbar', Toolbar);