mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/MultimediaViewer
synced 2024-11-28 01:50:09 +00:00
Fix z-index bug in Firefox that would make navigation buttons appear on top of the metadata panel
Also fixes other issues: - Some code in mmv.lightboxinterface.js wasn't doing anything - Canvas buttons were being added to the wrong element - Several CSS rules were being declared twice, a remnant of the multilightbox days Change-Id: I6ffa1f6a989964d3863aa9dbeb332c0e59dff2e6 Mingle: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/409
This commit is contained in:
Gilles Dubuc
Mark Holmquist
parent
a7778cb799
commit
0fd2007923
|
|
@ -647,7 +647,6 @@ $wgResourceModules += array(
|
|||
),
|
||||
|
||||
'styles' => array(
|
||||
'mmv/mmv.less',
|
||||
// Always make this one the last of the list (Bug 61852)
|
||||
'mmv/mmv.loaded.css',
|
||||
),
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
@import "mmv.globals";
|
||||
@import "mmv.mixins";
|
||||
|
||||
/**
|
||||
* Override multilightbox styles that don't apply to us
|
||||
*/
|
||||
.mw-mmv-wrapper {
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.mw-mmv-main {
|
||||
height: auto;
|
||||
|
||||
.jq-fullscreened {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Some variables
|
||||
*/
|
||||
@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
|
||||
@metadata-background: rgb(251, 251, 251);
|
||||
|
||||
.mw-mmv-image-wrapper,
|
||||
.mw-mmv-controls {
|
||||
top: 0px;
|
||||
bottom: @bottom-height;
|
||||
}
|
||||
|
||||
.jq-fullscreened {
|
||||
.mw-mmv-image-wrapper,
|
||||
.mw-mmv-post-image,
|
||||
.mw-mmv-controls {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mw-mmv-drag-affordance {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-mmv-post-image,
|
||||
.mw-mmv-controls {
|
||||
@fullscreen-padding: 10px;
|
||||
padding: (@fullscreen-padding / 2) 0;
|
||||
height: (@metadatabar-top-content-height + @fullscreen-padding);
|
||||
background-color: rgba(251, 251, 251, 0);
|
||||
transition: background-color 0.25s;
|
||||
min-height: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: @metadata-background;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-post-image {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mw-mmv-controls {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-hidden {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.mw-mmv-image-wrapper {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mw-mmv-post-image {
|
||||
bottom: auto;
|
||||
height: auto;
|
||||
color: #333333;
|
||||
background-color: @metadata-background;
|
||||
position: absolute;
|
||||
min-height: (@bottom-height + 1);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.mw-mmv-controls {
|
||||
height: auto;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
|
@ -49,9 +49,6 @@
|
|||
* Initialize the entire interface - helper method.
|
||||
*/
|
||||
LIP.init = function () {
|
||||
var addToPre = [],
|
||||
addToPost = [];
|
||||
|
||||
// SVG filter, needed to achieve blur in Firefox
|
||||
this.$filter = $( '<svg><filter id="gaussian-blur"><fegaussianblur stdDeviation="3"></filter></svg>' );
|
||||
|
||||
|
|
@ -71,11 +68,12 @@
|
|||
|
||||
this.$preDiv = $( '<div>' )
|
||||
.addClass( 'mw-mmv-pre-image' );
|
||||
this.setupPreDiv( addToPre );
|
||||
|
||||
this.$postDiv = $( '<div>' )
|
||||
.addClass( 'mw-mmv-post-image' );
|
||||
this.setupPostDiv( addToPost );
|
||||
|
||||
this.$controlBar = $( '<div>' )
|
||||
.addClass( 'mw-mmv-controls' );
|
||||
|
||||
this.$main.append(
|
||||
this.$preDiv,
|
||||
|
|
@ -88,8 +86,10 @@
|
|||
this.$main
|
||||
);
|
||||
|
||||
this.setupCanvasButtons();
|
||||
|
||||
this.panel = new mw.mmv.ui.MetadataPanel( this.$postDiv, this.$controlBar );
|
||||
this.buttons = new mw.mmv.ui.CanvasButtons( this.$imageWrapper, this.$closeButton, this.$fullscreenButton );
|
||||
this.buttons = new mw.mmv.ui.CanvasButtons( this.$preDiv, this.$closeButton, this.$fullscreenButton );
|
||||
this.canvas = new mw.mmv.ui.Canvas( this.$innerWrapper, this.$imageWrapper, this.$wrapper );
|
||||
};
|
||||
|
||||
|
|
@ -234,15 +234,11 @@
|
|||
};
|
||||
|
||||
/**
|
||||
* Setup for DOM elements which come before the main image
|
||||
* @param {Array.<HTMLElement|jQuery>} toAdd
|
||||
* Setup for canvas navigation buttons
|
||||
*/
|
||||
LIP.setupPreDiv = function ( toAdd ) {
|
||||
LIP.setupCanvasButtons = function () {
|
||||
var ui = this;
|
||||
|
||||
this.$controlBar = $( '<div>' )
|
||||
.addClass( 'mw-mmv-controls' );
|
||||
|
||||
this.$closeButton = $( '<div>' )
|
||||
.text( ' ' )
|
||||
.addClass( 'mw-mmv-close' )
|
||||
|
|
@ -261,22 +257,6 @@
|
|||
}
|
||||
} );
|
||||
|
||||
this.setupFullscreenButton();
|
||||
|
||||
this.$controlBar.append(
|
||||
this.$closeButton,
|
||||
this.$fullscreenButton
|
||||
);
|
||||
|
||||
this.$preDiv.append( this.$controlBar );
|
||||
|
||||
this.addElementsToDiv( this.$preDiv, toAdd );
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets up the fullscreen button
|
||||
*/
|
||||
LIP.setupFullscreenButton = function () {
|
||||
// If the browser doesn't support fullscreen mode, hide the fullscreen button
|
||||
if ( $.support.fullscreen ) {
|
||||
this.$fullscreenButton.show();
|
||||
|
|
@ -285,22 +265,6 @@
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Setup for DOM elements which come before the main image
|
||||
* @param {Array.<HTMLElement|jQuery>} toAdd
|
||||
*/
|
||||
LIP.setupPostDiv = function ( toAdd ) {
|
||||
this.addElementsToDiv( this.$postDiv, toAdd );
|
||||
};
|
||||
|
||||
LIP.addElementsToDiv = function ( $div, toAdd ) {
|
||||
var i;
|
||||
|
||||
for ( i = 0; i < toAdd.length; i++ ) {
|
||||
$div.append( toAdd[i] );
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Handle a fullscreen change event.
|
||||
* @param {jQuery.Event} e The fullscreen change event.
|
||||
|
|
|
|||
|
|
@ -1,26 +1,38 @@
|
|||
@import "mmv.globals";
|
||||
@import "mmv.mixins";
|
||||
|
||||
@bottom-height: (@metadatabar-top-content-height + @metadatabar-drag-height);
|
||||
@metadata-background: rgb(251, 251, 251);
|
||||
|
||||
.mw-mmv-wrapper {
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
z-index: 1001;
|
||||
position: absolute;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
.mw-mmv-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
.jq-fullscreened {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-image-wrapper,
|
||||
.mw-mmv-controls {
|
||||
top: 0px;
|
||||
bottom: @bottom-height;
|
||||
}
|
||||
|
||||
.mw-mmv-image-wrapper {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
position: fixed;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mw-mmv-image-inner-wrapper {
|
||||
|
|
@ -34,21 +46,72 @@
|
|||
top: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.mw-mmv-post-image {
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
bottom: auto;
|
||||
height: auto;
|
||||
color: #333333;
|
||||
background-color: @metadata-background;
|
||||
min-height: (@bottom-height + 1);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.mw-mmv-controls {
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #7d7c81;
|
||||
height: auto;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
}
|
||||
|
||||
/* Fullscreen styles */
|
||||
|
||||
.cursor-hidden {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
.mw-mmv-main.jq-fullscreened {
|
||||
background-color: black;
|
||||
}
|
||||
|
||||
.jq-fullscreened {
|
||||
.mw-mmv-image-wrapper,
|
||||
.mw-mmv-post-image,
|
||||
.mw-mmv-controls {
|
||||
bottom: 0px;
|
||||
}
|
||||
|
||||
.mw-mmv-drag-affordance {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mw-mmv-post-image,
|
||||
.mw-mmv-controls {
|
||||
@fullscreen-padding: 10px;
|
||||
padding: (@fullscreen-padding / 2) 0;
|
||||
height: (@metadatabar-top-content-height + @fullscreen-padding);
|
||||
background-color: rgba(251, 251, 251, 0);
|
||||
transition: background-color 0.25s;
|
||||
min-height: 0;
|
||||
|
||||
&:hover {
|
||||
background-color: @metadata-background;
|
||||
}
|
||||
}
|
||||
|
||||
.mw-mmv-post-image {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.mw-mmv-controls {
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -85,15 +85,15 @@
|
|||
lightbox.attach( '#qunit-fixture' );
|
||||
|
||||
$.support.fullscreen = false;
|
||||
lightbox.setupFullscreenButton();
|
||||
lightbox.setupCanvasButtons();
|
||||
|
||||
assert.ok( !lightbox.$fullscreenButton.is(':visible'),
|
||||
assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'none',
|
||||
'Fullscreen button is hidden when fullscreen mode is unavailable' );
|
||||
|
||||
$.support.fullscreen = true;
|
||||
lightbox.setupFullscreenButton();
|
||||
lightbox.setupCanvasButtons();
|
||||
|
||||
assert.ok( lightbox.$fullscreenButton.is(':visible'),
|
||||
assert.strictEqual( lightbox.$fullscreenButton.css( 'display' ), 'block',
|
||||
'Fullscreen button is visible when fullscreen mode is available' );
|
||||
|
||||
// Entering fullscreen
|
||||
|
|
|
|||
Loading…
Reference in a new issue