WMDE-Fisch has uploaded a new change for review.
https://gerrit.wikimedia.org/r/319559
Change subject: [WIP] Draw lines between pointer and column
......................................................................
[WIP] Draw lines between pointer and column
Introducing a new class that draws lines between the pointer
and the related diff column.
ToDo:
- refresh lines on click
Bug: T149175
Change-Id: Iadf779368c58da7779c769bda8e9bd3fc5afcffa
---
M extension.json
M modules/ext.RevisionSlider.Pointer.js
A modules/ext.RevisionSlider.PointerLine.js
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
5 files changed, 201 insertions(+), 2 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/59/319559/1
diff --git a/extension.json b/extension.json
index 280545b..ed1e8af 100644
--- a/extension.json
+++ b/extension.json
@@ -88,7 +88,8 @@
"modules/ext.RevisionSlider.Pointer.js"
],
"dependencies": [
- "ext.RevisionSlider.PointerView"
+ "ext.RevisionSlider.PointerView",
+ "ext.RevisionSlider.PointerLine"
]
},
"ext.RevisionSlider.PointerView": {
@@ -96,6 +97,11 @@
"modules/ext.RevisionSlider.PointerView.js"
]
},
+ "ext.RevisionSlider.PointerLine": {
+ "scripts": [
+ "modules/ext.RevisionSlider.PointerLine.js"
+ ]
+ },
"ext.RevisionSlider.Slider": {
"scripts": [
"modules/ext.RevisionSlider.Slider.js"
diff --git a/modules/ext.RevisionSlider.Pointer.js
b/modules/ext.RevisionSlider.Pointer.js
index 6010857..3f53e88 100644
--- a/modules/ext.RevisionSlider.Pointer.js
+++ b/modules/ext.RevisionSlider.Pointer.js
@@ -7,6 +7,7 @@
*/
var Pointer = function ( name ) {
this.view = new mw.libs.revisionSlider.PointerView( this, name
);
+ this.line = new mw.libs.revisionSlider.PointerLine( this, name
);
};
$.extend( Pointer.prototype, {
@@ -19,6 +20,11 @@
* @type {PointerView}
*/
view: null,
+
+ /**
+ * @type {PointerLine}
+ */
+ line: null,
/**
* @param {number} p
@@ -39,6 +45,13 @@
*/
getView: function () {
return this.view;
+ },
+
+ /**
+ * @return {PointerLine}
+ */
+ getLine: function () {
+ return this.line;
}
} );
diff --git a/modules/ext.RevisionSlider.PointerLine.js
b/modules/ext.RevisionSlider.PointerLine.js
new file mode 100644
index 0000000..d09575b
--- /dev/null
+++ b/modules/ext.RevisionSlider.PointerLine.js
@@ -0,0 +1,109 @@
+( function ( mw, $ ) {
+ /**
+ * Module containing presentation logic for the revision pointer lines
+ *
+ * @param {Pointer} pointer
+ * @param {string} name
+ * @constructor
+ */
+ var PointerLine = function ( pointer, name ) {
+ this.pointer = pointer;
+ this.name = name;
+ };
+
+ $.extend( PointerLine.prototype, {
+ /**
+ * @type {string}
+ */
+ name: '',
+
+ /**
+ * @type {Pointer}
+ */
+ pointer: null,
+
+ /**
+ * @type {jQuery}
+ */
+ $html: null,
+
+ calculateLineSettings: function ( $source, $target ) {
+ var offsetDiff, targetRightFromSource, widthToSet,
leftToSet;
+ offsetDiff = ( $target.offset().left + $target.width()
/ 2 ) -
+ ( $source.offset().left + ( $source.width() + 4
) / 2 ); // +4 left-margin messes with calculation
+
+ targetRightFromSource = offsetDiff > 0;
+
+ widthToSet = Math.abs( offsetDiff );
+ leftToSet = ( $target.offset().left + $target.width() /
2 ) -
+ $( '.mw-revslider-revision-slider'
).offset().left;
+
+ if ( targetRightFromSource ) {
+ leftToSet -= widthToSet;
+ }
+
+ return {
+ rightFromSource: targetRightFromSource,
+ widthToSet: widthToSet,
+ leftToSet: leftToSet
+ };
+ },
+
+ drawLine: function () {
+ var $upperLineDiv = this.$html.find(
'.mw-revslider-pointer-line-upper' ),
+ $lowerLineDiv = this.$html.find(
'.mw-revslider-pointer-line-lower' ),
+ settings;
+
+ if ( !this.pointer.getView().isUpperPointer() ) {
+ $lowerLineDiv.removeClass(
'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
+ $upperLineDiv.removeClass(
'mw-revslider-upper-color' ).addClass( 'mw-revslider-lower-color' );
+ settings = this.calculateLineSettings(
this.pointer.getView().getElement(), $( '.diff-otitle' ) );
+ } else {
+ $lowerLineDiv.removeClass(
'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
+ $upperLineDiv.removeClass(
'mw-revslider-lower-color' ).addClass( 'mw-revslider-upper-color' );
+ settings = this.calculateLineSettings(
this.pointer.getView().getElement(), $( '.diff-ntitle' ) );
+ }
+
+ this.$html.css( { left: settings.leftToSet + 'px',
width: settings.widthToSet + 'px' } );
+
+ $upperLineDiv.addClass( 'mw-revslider-bottom-line' );
+ if ( settings.rightFromSource ) {
+ $upperLineDiv.addClass(
'mw-revslider-left-line' );
+ $lowerLineDiv.addClass(
'mw-revslider-right-line' );
+ } else {
+ $upperLineDiv.addClass(
'mw-revslider-right-line' );
+ $lowerLineDiv.addClass(
'mw-revslider-left-line' );
+ }
+ },
+
+ /**
+ * Initializes the DOM element
+ */
+ initialize: function () {
+ this.$html = $( '<div>' )
+ .addClass( 'mw-revslider-pointer-line ' +
this.name )
+ .append(
+ $( '<div>' ).addClass(
'mw-revslider-pointer-line-upper ' + this.name ),
+ $( '<div>' ).addClass(
'mw-revslider-pointer-line-lower ' + this.name )
+ );
+ },
+
+ /**
+ * @return {jQuery}
+ */
+ render: function () {
+ this.initialize();
+ return this.getElement();
+ },
+
+ /**
+ * @return {jQuery}
+ */
+ getElement: function () {
+ return this.$html;
+ }
+ } );
+
+ mw.libs.revisionSlider = mw.libs.revisionSlider || {};
+ mw.libs.revisionSlider.PointerLine = PointerLine;
+}( mediaWiki, jQuery ) );
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index fdeb42f..ba3d883 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -194,7 +194,8 @@
$( '<div>' )
.addClass(
'mw-revslider-pointer-container' )
.css( pointerContainerStyle )
- .append(
this.pointerOlder.getView().render(), this.pointerNewer.getView().render() )
+ .append(
this.pointerOlder.getView().render(), this.pointerNewer.getView().render() ),
+ this.pointerOlder.getLine().render(),
this.pointerNewer.getLine().render()
);
$slider.find( '.mw-revslider-pointer' ).draggable( {
@@ -221,6 +222,8 @@
revId1 = self.getRevElementAtPosition(
$revisions, self.pointerOlder.getPosition() ).data( 'revid' );
revId2 = self.getRevElementAtPosition(
$revisions, self.pointerNewer.getPosition() ).data( 'revid' );
+
+ self.redrawPointerLines();
self.refreshRevisions( revId1, revId2 );
@@ -262,6 +265,8 @@
this.slide( Math.floor( (
this.pointerNewer.getPosition() - 1 ) / this.slider.getRevisionsPerWindow() ),
0 );
this.diffPage.replaceState(
mw.config.values.extRevisionSliderOldRev,
mw.config.values.extRevisionSliderNewRev, this );
this.diffPage.initOnPopState( this );
+
+ this.redrawPointerLines();
},
showPopup: function ( e ) {
@@ -336,6 +341,7 @@
view.resetPointerColorsBasedOnValues(
view.pointerOlder.getPosition(), view.pointerNewer.getPosition() );
view.resetRevisionStylesBasedOnPointerPosition(
$revisions );
view.alignPointers();
+ view.redrawPointerLines();
},
/**
@@ -486,6 +492,16 @@
},
/**
+ * Redraws the lines for the pointers
+ */
+ redrawPointerLines: function () {
+ $( '.mw-revslider-pointer-line-upper,
.mw-revslider-pointer-line-lower' )
+ .removeClass( 'mw-revslider-bottom-line
mw-revslider-left-line mw-revslider-right-line' );
+ this.pointerOlder.getLine().drawLine();
+ this.pointerNewer.getLine().drawLine();
+ },
+
+ /**
* @return {number}
*/
calculateSliderContainerWidth: function () {
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index cfa724a..89e22c5 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -305,3 +305,58 @@
bottom: 0;
margin-right: 0;
}
+
+.mw-revslider-pointer-line {
+ position: absolute;
+ top: 73px;
+ z-index: -5;
+}
+
+.mw-revslider-pointer-line-upper,
+.mw-revslider-pointer-line-lower {
+ border: 0 solid transparent;
+}
+
+.mw-revslider-pointer-line .mw-revslider-left-line {
+ border-left-width: 1px;
+}
+
+.mw-revslider-pointer-line .mw-revslider-right-line {
+ border-right-width: 1px;
+}
+
+.mw-revslider-pointer-line .mw-revslider-bottom-line {
+ border-bottom-width: 1px;
+}
+
+.mw-revslider-pointer-line .mw-revslider-lower-color {
+ border-color: #e8bd4f;
+}
+
+.mw-revslider-pointer-line .mw-revslider-upper-color {
+ border-color: #1e6db8;
+}
+
+.mw-revslider-pointer-older .mw-revslider-pointer-line-upper {
+ height: 83px;
+}
+
+.mw-revslider-pointer-older .mw-revslider-pointer-line-lower {
+ height: 7px;
+}
+
+.mw-revslider-pointer-newer .mw-revslider-pointer-line-upper {
+ height: 73px;
+}
+
+.mw-revslider-pointer-newer .mw-revslider-pointer-line-lower {
+ height: 17px;
+}
+
+#mw-diff-otitle1 {
+ border-top: 2px solid #e8bd4f;
+}
+
+#mw-diff-ntitle1 {
+ border-top: 2px solid #1e6db8;
+}
--
To view, visit https://gerrit.wikimedia.org/r/319559
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Iadf779368c58da7779c769bda8e9bd3fc5afcffa
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-Fisch <christoph.jau...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
