Discussion :

[Toiine]

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 ?

[01001111]

Si le bouton suivant reste désactivé, sans avoir tout ton code sous les yeux, j'ai le pressentiment que cela vient d'un excès de pushState.
quand tu fais précédent, le navigateur fait sans doute un pushState qui du coup crée une nouvelle entrée dans l'historique, ce qui désactive aussitôt le bouton suivant. Essaie de ne déclencher le pushState que pour une nouvelle image svg parcourue.

[Toiine]

Non le problème reste le même, par contre j'ajoute une autre information au problème :

Lorsque j'arrive sur la première page affichée via le bouton précédent, celui-ci reste activé une dernière fois, et cette fois-ci (lors du 2ème clic qui ne change pas de page), il réactive le bouton suivant.