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é :
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++;
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
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();
    }
})
};
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.

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 ?