Contrôler un élément embedded depuis la page contenante
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:
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:
<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:
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:
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:
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 ..
