Mettre en plein écran lors d'un clic sur un bouton

Version imprimable

Voir 40 message(s) de cette discussion en une page

23/07/2016, 18h34
ColChope

J'ai rajouté l'appel de la fonction (après donc), et pareil, ça ne change pas :/

J'ai d'ailleurs ce code d'erreur :
Uncaught SyntaxError: Unexpected identifier
23/07/2016, 19h46
NoSmoking

Ta façon de procéder « casse » le pluggin.

Citation:

Tu crées/déclares ta fonction, de façon standard...

• Ta fonction doit soit être intégrée comme méthode du pluggin soit déclarée en dehors de celui ci, par exemple après la ligne }; return _; })(jQuery); main.init();.

Citation:

...tu ajoutes l'événement proprement dans le script

• L'insertion de l'événement doit se faire dans celui initialement déclaré, voir ligne 339.

Avis personnel : passer en mode plein écran par appui sur une « croix » me parait déroutant, généralement on ferme/masque un élément après une telle action !
23/07/2016, 20h20
ColChope

Bon donc j'ai placé la fonction toggleFullScreen() après la dernière ligne (}; return _; })(jQuery); main.init();), mais je n'ai pas bien compris où je devais placer l'appel..
A la ligne 339, l'appel est fait juste après. Je suppose que c'est bien après qu'il faut le faire, non ?

J'essaye donc ça, et là on me dit que "_" n'est pas défini...

Je ne comprend vraiment rien. Autant avec d'autres langages que je ne connais pas je reconnais la structure du code, autant en JS j'ai vraiment du mal.

Citation:

Avis personnel : passer en mode plein écran par appui sur une « croix » me parait déroutant, généralement on ferme/masque un élément après une telle action !

En fait, lorsqu'on clique sur cette croix on passe en mode viewer, qui comme son nom l'indique permet de visualiser des images sans être gêné par le menu. Mais, en enlevant le menu, la taille de la fenêtre ne permet pas de mettre une image en FullHD par exemple sans qu'elle soit rognée. En revanche, en passant en plein écran, ça fonctionne bien mieux !

Citation:

J'essaye donc ça, et là on me dit que "_" n'est pas défini...

Normal ton appel est mal placé, la variable/objet _ (tiret bas) n'est visible que dans la « closure »

Code:

1
2
3
var main = (function($) { var _ = {
// le code
}; return _; })(jQuery); main.init();

:zen: reprenons calmement...

• seul le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function toggleFullScreen() {
    if ((document.fullScreenElement && document.fullScreenElement !== null) || (!document.mozFullScreen && !document.webkitIsFullScreen)) {
        if (document.documentElement.requestFullScreen) {
            document.documentElement.requestFullScreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullScreen) {
            document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
        }
    } else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
    }
}

doit se retrouver en dessous de la ligne }; return _; })(jQuery); main.init();.

• cette partie de code ~~peut~~doit disparaitre

Code:

1
2
3
4
document.querySelector('.toggle').addEventListener('click', function (oEvent) {
    oEvent.preventDefault(); // empêche le comportement par défaut du lien
    toggleFullScreen();
});

• il te reste à placer

Code:

1
2
3
4
5
6
// Toggle.
_.$toggle.on('click', function () {
    _.toggle();
    // appel de ta fonction
    toggleFullScreen();
});

dans le corps de la fonction là où l'on trouve l'affectation de l'événement initial soit au niveau de la ligne 339, tu devrais trouver ce code

Code:

1
2
3
4
		// Toggle.
			_.$toggle.on('click', function() {
				_.toggle();
			});

il est donc à remplacer par

Code:

1
2
3
4
5
6
// Toggle.
_.$toggle.on('click', function () {
    _.toggle();
    // appel de ta fonction
    toggleFullScreen();
});

24/07/2016, 15h22
ColChope

Oh mon dieu ça marche !

Merci infiniment pour ta patience, j'imagine que ça a pas été facile, je m'en excuse :/

Maintenant, saurais-tu si il existe des transitions pour passer en mode plein écran, par exemple d'une manière un peu plus "douce" ?

Merci encore en tout cas !
24/07/2016, 16h07
NoSmoking

Citation:

... saurais-tu si il existe des transitions pour passer en mode plein écran

pas à ma connaissance on est en face d'un état on/off.
24/07/2016, 21h54
ColChope

D'accord !

Merci pour tout !

Voir 40 message(s) de cette discussion en une page