wikimedia/mediawiki-extensions-RevisionSlider
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/RevisionSlider synced 2024-11-15 03:33:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mark selected and intermediate revisions with colours

Browse source 
Change-Id: If8e2268540a9e5f8110256e779cbee92c6a413ca
This commit is contained in:
Leszek Manicki 2016-05-19 18:39:58 +02:00
parent b2c1de07b8
commit f2f29832e5
3 changed files with 56 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
modules/ext.RevisionSlider.DiffPage.js
View file

@ -64,6 +64,9 @@
sliderView.slider.setFirstVisibleRevisionIndex( event.state.sliderPos );
sliderView.slide( 0 );
sliderView.resetPointerStylesBasedOnPosition();
sliderView.resetRevisionStylesBasedOnPointerPosition(
sliderView.$element.find( 'div.revisions' )
);
self.refresh( event.state.revid1, event.state.revid2 );
} );
}

19
modules/ext.RevisionSlider.SliderView.js
View file

@ -77,6 +77,7 @@
mw.track( 'counter.MediaWiki.RevisionSlider.event.pointerMove' );
pointer.setPosition( self.slider.getFirstVisibleRevisionIndex() + relativeIndex );
self.resetPointerStylesBasedOnPosition();
self.resetRevisionStylesBasedOnPointerPosition( $revisions );
revId1 = $revisions
.find( 'div.revision[data-pos=\'' + self.pointerOne.getPosition() + '\']' )
@ -96,6 +97,7 @@
this.slider.setRevisionsPerWindow( $slider.find( '.revisions-container' ).width() / this.revisionWidth );
this.initializePointers( $revisions );
this.resetRevisionStylesBasedOnPointerPosition( $revisions );
this.$element = $slider;
$container.html( $slider );
@ -144,6 +146,23 @@
}
},
resetRevisionStylesBasedOnPointerPosition: function ( $revisions ) {
var pointerOnePosition = this.pointerOne.getPosition(),
pointerTwoPosition = this.pointerTwo.getPosition(),
olderRevPosition = Math.min( pointerOnePosition, pointerTwoPosition ),
newerRevPosition = Math.max( pointerOnePosition, pointerTwoPosition ),
positionIndex = olderRevPosition + 1;
$revisions.find( 'div.revision' ).each( function () {
$( this ).removeClass( 'revision-intermediate' ).removeClass( 'revision-old' ).removeClass( 'revision-new' );
} );
$revisions.find( 'div.revision[data-pos=\'' + olderRevPosition + '\']' ).addClass( 'revision-old' );
$revisions.find( 'div.revision[data-pos=\'' + newerRevPosition + '\']' ).addClass( 'revision-new' );
while ( positionIndex < newerRevPosition ) {
$revisions.find( 'div.revision[data-pos=\'' + positionIndex + '\']' ).addClass( 'revision-intermediate' );
positionIndex++;
}
},
calculateRevisionsPerWindow: function () {
return Math.floor( ( $( '#mw-content-text' ).width() - this.containerMargin ) / this.revisionWidth );
},

40
modules/ext.RevisionSlider.css
View file

@ -1,21 +1,49 @@
.revision {
position: absolute;
margin-top: 70px;
background-color: #bcbcbc;
background-color: #e3e3e3;
border-color: #e3e3e3;
}
.revision:hover {
background-color: #a6a6a6;
border-color: #a6a6a6;
background-color: #cccccc;
border-color: #cccccc;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;
-o-transition: all ease 0.2s;
}
.revision-up {
border-bottom: 2px solid #bcbcbc;
border-bottom-width: 2px;
border-bottom-style: solid;
}
.revision-down {
border-top: 2px solid #bcbcbc;
border-top-width: 2px;
border-top-style: solid;
}
.revision-old {
background-color: #fee6a8;
border-color: #e8bd4f;
}
.revision-old:hover {
background-color: #fdc44b;
border-color: #dda000;
}
.revision-new {
background-color: #c3e2ff;
border-color: #1e6db8;
}
.revision-new:hover {
background-color: #45a6ff;
border-color: #065cad;
}
.revision-intermediate {
background-color: #bcbcbc;
border-color: #989898;
}
.revision-intermediate:hover {
background-color: #a6a6a6;
border-color: #828282;
}
.revision-wrapper {
@ -24,7 +52,7 @@
height: 140px;
}
.revision-wrapper:hover {
background-color: #e3e3e3;
background-color: #f2f2f2;
transition: all ease 0.2s;
-webkit-transition: all ease 0.2s;
-moz-transition: all ease 0.2s;