Bonjour,
J'ai une application où je dois gérer mon historique moi même, dans le but de pouvoir partager des pages avec des paramètres spécifiques en faisant un simple copier/coller de l'URL (à la google Maps un peu).
Dans ma vue, l'utilisateur peut naviguer et visualiser différents SVG. Ils sont en fait dans un `<embed>` (Je ne trouve plus la balise inline code) construit en Javascript.
Pour changer le SVG affiché, j'appelle cette fonction :
Code javascript : 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 $scope.changeSVG = function (svgName, fromPrevious) { if (!fromPrevious) $scope.previousHistory.unshift(svgName); $scope.currentCartography = svgName; if (window.panZoom) removeEmbed(); var svgPath = "SVG/" + $scope.currentLanguage + "/" + svgName + ".svg"; for (var i = 0; i < $scope.cartoList.length; i++) { if (svgName === $scope.cartoList[i].fileName) { $scope.currentIndex = i; var defaultZoom = $scope.cartoList[i].defaultZoom; break; } } lastEmbed = createNewEmbed(svgPath, defaultZoom); };
Quand le SVG est affiché et quand l'utilisateur zoome ou drag celui-ci, ce code est appelé :
Pour gérer l'historique des SVG affichés, j'ai donc :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6 var scope = angular.element(document.getElementById('container')).scope(); var sharingURL = window.location.href.split("?")[0] + "?shared=" + scope.currentCartography + "&sZoom=" + (this.getZoom() / this.originalState.zoom) + "&sPanX=" + this.getPan().x + "&sPanY=" + this.getPan().y; window.history.pushState(scope.stateId, "CartoViewer", sharingURL); scope.stateId++;
Donc mon bouton précédent fonctionne, lorsque je clique dessus, le SVG précédent est affiché jusqu'à éventuellement me rendre sur ma page d'accueil.
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 window.onpopstate = function(event) { var scope = angular.element(document.getElementById('container')).scope(); scope.$apply(function () { if (scope.stateId) scope.lastId = scope.stateId; scope.stateId = event.state; if (scope.stateId < scope.lastId) console.log("Previous button pressed"); else console.log("Forward button pressed"); if(scope.previousHistory[1]) { var toGo = scope.previousHistory[1]; scope.nextHistory.unshift(scope.previousHistory[0]); if (scope.previousHistory[1] === scope.historyStart) scope.previousHistory.splice(0, 2); else scope.previousHistory.splice(1, 1); if (toGo != 'INDEX') scope.changeSVG(toGo, true); else scope.setHomeView(); } }) };
Mais le bouton suivant reste grisé.
Je comptais construire de la même manière une variable `nextHistory` mais je ne sais pas pourquoi ce bouton suivant reste désactivé, même après avoir cliqué sur le bouton précédent.
Une idée de pourquoi celui-ci reste grisé et comment fixer ça ?
Ou est-ce qu'il est possible de forcer l'activation de celui-ci ?
Partager