Bonjour à tous

Je cherche à intégrer un super plug qui contrôle l'affichage du svg avec du javascript 'embarqué'.
Pour le moment ce qui m'intéresse c'est juste la fenêtre principale (on va dire que j'enlève le navigateur en bas à droite et bien sûr le sélecteur), et de pouvoir contrôler :
- la taille de la fenêtre
- le fichier svg chargé dans le container (actuellement géré par l'interactivité svg).

Le svg principal se présente comme ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
  <title>SVG Map and Image Viewer</title>
  <script	xlink:href="DOM.js" type="text/javascript"/>
  <script	xlink:href="Timer.js" type="text/javascript"/>
  <script	xlink:href="config.js" type="text/javascript"/>
  <script	xlink:href="zoom-and-pan.js" type="text/javascript"/>
</svg>
Le but est de pouvoir combiner ça avec du jquery et de contrôler les 2 paramètres de l'extérieur, depuis ma page principale.

Pour ça (arrêtez moi si je me goure) j'insère le svg général dans un objet (ou iframe) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<object id="object" width="900px" height="400px" type="image/svg+xml" data="autozoom1.4.6/autozoom.svg"></object
Mais ensuite, comment appeler le js embarqué ?
Il ne suffit pas d'ajouter les déclaration dans ma page principale ... D'ailleurs dans ce cas ça me rajoute un module tronqué et qui marche mal, à cause du "config.js". Ces scripts sont fait pour être déclarés dans le document svg.


Dans le javascript voilà comment ça se passe :

1- config.js (pour la fenêtre initiale)
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
var svgRoot,
    files,
    layout;
    svgRoot = document.documentElement;
/*
 * Define here the layout of the viewer and the navigator
*/
layout = {
  container : svgRoot,             // set this according to your implementation
  map : {
    x : 20,
    y : 20,
    width : 640,
    height : 480,
// This feature prevents mouse interactivity implemented in documents
    scrollOnMap : true,
  },
    etc ...
> Donc layout.map.width/height est le paramètre que je veux subordonner à mon object contenant (pour la taille)

2- zoom-and-pan.js (pour le sélecteur) :
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
function FileSelector (file) {
	var g = SVG({element : "g", transform : "translate(700 "+ (48 + 21 * FileSelector.inc++) +")", appendTo : viewer.container}),
	    s = SVG({element : "rect", width : 160, height : 20, fill : "#f1f1ef", opacity : .5, appendTo : g});
 
	g.addEventListener("mouseup", function (evt) {FileSelector.load_svg(evt, evt.target.url);}, false);
	etc ...
 
Viewer.extend (FileSelector, {
  inc : 0,
  load_svg : function (evt, url) {
    var doc;
  	if (window.getURL) {
  		getURL(url, getURLCallback);
  		function getURLCallback(data) {
  			if(data.success) {
  			var node = parseXML(data.content, document);
  			FileSelector.addDoc(evt, node.firstChild);
  			}
  		}
  	}
  	else if (window.XMLHttpRequest) {
  		function callback() {
  			if (xmlRequest.readyState == 4) {
  				if (xmlRequest.status == 200 || xmlRequest.status == 0)
	etc ...
> Donc FileSelector.load_svg est la fonction qui permet de zapper le contenu, et que je veux appeler avec quelque chose comme ça :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<script>
$(function()
		{
			$('#select a').click(function(){
				FileSelector.load_svg(false, $(this).attr('url'))
			});
		});
</script>
<ul id="select">
	<li><a href="#" url="autozoom1.4.6/svgDocs/IPBP.svg">IPBP.svg</a></li>
	<li><a href="#" url="autozoom1.4.6/svgDocs/Torino.svg">Torino.svg</a></li>
</ul>

Bref, j'ai bien les bases du javascript, mais c'est pas assez pour maîtriser les prototypes et comprendre comment faire marcher cette structure ... déjà perdu l'après-midi ..