From b770e02d482db6e7baa7a4bf2cb1700b7a81e40b Mon Sep 17 00:00:00 2001 From: theopolisme Date: Thu, 2 Jan 2014 15:24:42 -0700 Subject: [PATCH] Enable fullscreening with jquery.fullscreen Depends on I58138afa05c43f5a24e74fa3a30a658428c39ce0 (core patch) Change-Id: Ib972d453bdf8172439bf6195985fcf7e248b2b8a --- MultimediaViewer.php | 1 + resources/mmv/mmv.css | 40 ++++++----- resources/mmv/mmv.js | 16 ++--- resources/mmv/mmv.lightboxinterface.js | 7 +- resources/multilightbox/hooks.txt | 10 +-- resources/multilightbox/lightboxinterface.js | 72 +++++--------------- resources/multilightbox/multilightbox.css | 4 +- 7 files changed, 57 insertions(+), 93 deletions(-) diff --git a/MultimediaViewer.php b/MultimediaViewer.php index d1e4b9b98..d325f1fc3 100644 --- a/MultimediaViewer.php +++ b/MultimediaViewer.php @@ -191,6 +191,7 @@ $wgResourceModules['mmv'] = array_merge( array( 'momentjs', 'jquery.scrollTo', 'mmv.lightboximage', + 'jquery.fullscreen', 'mediawiki.Title', 'jquery.ui.dialog', 'jquery.hidpi', diff --git a/resources/mmv/mmv.css b/resources/mmv/mmv.css index d20b5b6e8..5093ff1ac 100644 --- a/resources/mmv/mmv.css +++ b/resources/mmv/mmv.css @@ -1,8 +1,8 @@ /** * Override multilightbox styles that don't apply to us */ -.mlb-main.mlb-fullscreened { - background-color: white; +.mlb-main .jq-fullscreened { + background-color: black; } .mlb-wrapper { @@ -88,18 +88,33 @@ body.mobile .mw-mlb-controls, background-color: rgb(0,0,0); } -.mlb-close { - position: absolute; - top: 5px; +.mlb-close, +.mlb-fullscreen { right: 5px; left: auto; - /* @embed */ - background-image: url(img/mw-close.svg); transition: opacity 0.25s; background-position: center; } +.mlb-close { + top: 5px; + /* @embed */ + background-image: url(img/mw-close.svg); +} + +.mlb-fullscreen { + top: 42px; + /* @embed */ + background-image: url(img/mw-fullscreen-ltr.svg); +} + +.jq-fullscreened .mlb-fullscreen { + /* @embed */ + background-image: url(img/mw-defullscreen-ltr.svg); +} + .mlb-close, +.mlb-fullscreen, .mw-mlb-next-image, .mw-mlb-prev-image { position: fixed; @@ -114,22 +129,13 @@ body.mobile .mw-mlb-controls, } .mlb-close, +.mlb-fullscreen, .mw-mlb-next-image, .mw-mlb-prev-image { border: none; z-index: 1003; } -.mlb-fullscreen-div .mlb-fullscreen { - /* @embed */ - background-image: url(img/mw-defullscreen-ltr.svg); -} - -.mlb-fullscreen { - /* @embed */ - background-image: url(img/mw-fullscreen-ltr.svg); -} - .mw-mlb-license, .mw-mlb-title-contain { vertical-align: middle; diff --git a/resources/mmv/mmv.js b/resources/mmv/mmv.js index 261117033..55658b477 100755 --- a/resources/mmv/mmv.js +++ b/resources/mmv/mmv.js @@ -193,15 +193,15 @@ return false; } ); - lightboxHooks.register( 'fullscreen', function () { - if ( this.$imageMetadata ) { - this.$imageMetadata.hide(); - } - } ); + lightboxHooks.register( 'fullscreen', function ( fullscreen ) { + viewer.ui.isFullscreen = fullscreen; - lightboxHooks.register( 'defullscreen', function () { if ( this.$imageMetadata ) { - this.$imageMetadata.show(); + if ( fullscreen ) { + this.$imageMetadata.hide(); + } else { + this.$imageMetadata.show(); + } } } ); } @@ -395,7 +395,7 @@ } ); this.ui.$fullscreenButton.click( function () { - if ( viewer.ui.isFullScreen ) { + if ( viewer.ui.isFullscreen ) { viewer.log( 'fullscreen-link-click' ); } else { viewer.log( 'defullscreen-link-click' ); diff --git a/resources/mmv/mmv.lightboxinterface.js b/resources/mmv/mmv.lightboxinterface.js index bf358beea..3aeb10447 100644 --- a/resources/mmv/mmv.lightboxinterface.js +++ b/resources/mmv/mmv.lightboxinterface.js @@ -154,8 +154,6 @@ LIP.initializeHeader = function () { var ui = this; - this.$fullscreenButton.detach(); - this.$dragBar = $( '
' ) .addClass( 'mw-mlb-drag-affordance' ) .appendTo( this.$controlBar ) @@ -228,7 +226,10 @@ // and we aren't sure why, but it's not really necessary // with the new interface anyway - it's basically fullscreen // already! - this.$closeButton.add( this.$nextButton ).add( this.$prevButton ) + this.$closeButton + .add( this.$fullscreenButton ) + .add( this.$nextButton ) + .add( this.$prevButton ) .appendTo( this.$imageWrapper ); }; diff --git a/resources/multilightbox/hooks.txt b/resources/multilightbox/hooks.txt index e91aa762a..479e950ed 100644 --- a/resources/multilightbox/hooks.txt +++ b/resources/multilightbox/hooks.txt @@ -64,14 +64,10 @@ noPrevImage Called: From MultiLightbox prev method when user tries to reach negative index fullscreen - Arguments: None + Arguments: + * fullscreen - Boolean - Represents the current fullscreen state ThisArg: LightboxInterface - Called: From LightboxInterface fullscreen method when user is going to fullscreen interface. - -defullscreen - Arguments: None - ThisArg: LightboxInterface - Called: From LightboxInterface fullscreen method when user is leaving fullscreen interface. + Called: From LightboxInterface fullscreen method when user is going to fullscreen interface or leaving it. clearInterface Arguments: None diff --git a/resources/multilightbox/lightboxinterface.js b/resources/multilightbox/lightboxinterface.js index 29aa8670a..524e73452 100644 --- a/resources/multilightbox/lightboxinterface.js +++ b/resources/multilightbox/lightboxinterface.js @@ -8,20 +8,6 @@ function LightboxInterface() { lightboxHooks = window.lightboxHooks; - function handleFullscreenChange() { - // If we're no longer in fullscreen mode, make sure - if ( !lbinterface.fullscreenButtonJustPressed && - !document.fullscreenElement && - !document.mozFullScreenElement && - !document.webkitFullScreenElement && - !document.msFullScreenElement) { - lightboxHooks.callAll( 'defullscreen' ); - lbinterface.$main.removeClass( 'mlb-fullscreened' ); - } else if ( lbinterface.fullscreenButtonJustPressed ) { - lbinterface.fullscreenButtonJustPressed = false; - } - } - var result, addToPre = [], addToPost = [], @@ -82,10 +68,16 @@ } } ); - window.addEventListener( 'fullscreenchange', handleFullscreenChange ); - window.addEventListener( 'mozfullscreenchange', handleFullscreenChange ); - window.addEventListener( 'webkitfullscreenchange', handleFullscreenChange ); - window.addEventListener( 'msfullscreenchange', handleFullscreenChange ); + $( document ).on( 'jq-fullscreen-change', function ( e ) { + lightboxHooks.callAll( 'fullscreen', this, e.fullscreen ); + + if ( !lbinterface.fullscreenButtonJustPressed && !e.fullscreen ) { + // Close the interface all the way if the user pressed 'esc' + lbinterface.unattach(); + } else if ( lbinterface.fullscreenButtonJustPressed ) { + lbinterface.fullscreenButtonJustPressed = false; + } + } ); } LIP = LightboxInterface.prototype; @@ -135,42 +127,6 @@ this.currentlyAttached = false; }; - LIP.fullscreen = function () { - var fullscreen; - - if ( document.fullscreenElement || - document.mozFullScreenElement || - document.webkitFullScreenElement || - document.msFullScreenElement ) { - if ( document.cancelFullScreen ) { - document.cancelFullScreen(); - } else if ( document.mozCancelFullScreen ) { - document.mozCancelFullScreen(); - } else if ( document.webkitCancelFullScreen ) { - document.webkitCancelFullScreen(); - } else if ( document.msCancelFullScreen ) { - document.msCancelFullScreen(); - } - - this.$main.removeClass( 'mlb-fullscreened' ); - lightboxHooks.callAll( 'defullscreen', this ); - } else { - fullscreen = this.$main.get( 0 ); - if ( fullscreen.requestFullScreen ) { - fullscreen.requestFullScreen(); - } else if ( fullscreen.mozRequestFullScreen ) { - fullscreen.mozRequestFullScreen(); - } else if ( fullscreen.webkitRequestFullScreen ) { - fullscreen.webkitRequestFullScreen(); - } else if ( fullscreen.msRequestFullscreen ) { - fullscreen.msRequestFullscreen(); - } - - this.$main.addClass( 'mlb-fullscreened' ); - lightboxHooks.callAll( 'fullscreen', this ); - } - }; - /** * @protected */ @@ -258,8 +214,12 @@ .text( ' ' ) .addClass( 'mlb-fullscreen' ) .click( function () { - lbinterface.fullscreenButtonJustPressed = true; - lbinterface.fullscreen(); + if ( lbinterface.isFullscreen ) { + lbinterface.fullscreenButtonJustPressed = true; + lbinterface.$main.exitFullscreen(); + } else { + lbinterface.$main.enterFullscreen(); + } } ); this.$controlBar.append( diff --git a/resources/multilightbox/multilightbox.css b/resources/multilightbox/multilightbox.css index f7304f763..8b4251cbf 100644 --- a/resources/multilightbox/multilightbox.css +++ b/resources/multilightbox/multilightbox.css @@ -103,10 +103,10 @@ height: 29px; } -.mlb-main.mlb-fullscreened { +.mlb-main.fullscreened { background-color: black; } -.mlb-fullscreen-div .mlb-fullscreen { +.fullscreened .mlb-fullscreen { background-image: url("../img/defullscreen.svg"); }