Commit graph

18 commits

Author SHA1 Message Date
Leszek Manicki 08afa590de Fix position of pointers in RTL mode
Apparently after some recent changes, pointers in RTL UI were a bit off

Change-Id: Idae3b043d1d596c36b59b784b0a24fd0b9da76d3
2016-09-06 18:03:11 +02:00
Ed Sanders f6a44f43fe Convert the few instances of IDs to classes
Makes for more modular code.

Change-Id: Ic71d7421aea548e5b4a9c4841cd4af49a3d385a5
2016-08-10 15:32:12 -07:00
Ed Sanders a5f36af0f3 Prefix all classes and IDs with mw-revslider
Bug: T139105
Change-Id: Ia92396ec4f8acea39398173c81842d66257dc519
2016-07-01 11:27:23 +01:00
Jakob Warkotsch 11ceffab2f Enhance code documentation.
Bug: T137965
Change-Id: Ice393838545f1545ee085ecdcddfa35f60b32ecd
2016-06-21 13:25:50 +02:00
Moriel Schottlender abfcd2c01b RTLize RevisionSlider's behavior
Allow RevisionSlider to work properly in both LTR and RTL contexts
by making sure that when the interface language is RTL, the entire
interface flips. "Backwards" and "Forwards" are reversed in RTL
context, and the code and behavior should respond to that.

Changes made:
* Make sure the container has a direction set
* Change the placement of the revision divs from absolute
  positioning (that requires re-calculations when the page
  is flipped to RTL) to divs that are display: inline-block
  and have no right/left setting. This means that the DOM
  will automatically flip its own visual order when the
  container is set to RTL.
* Flip the calculation of positioning and the calculation
  of which element the pointer is on when it is dragged
  if the document is RTL.
* Mirror all scroll animations when the page is in RTL.
* Rename the scroll buttons to 'backwards' and 'forwards'
  for clarity, as they are flipped when the interface is
  RTL.
* Rename pointers to 'older' and 'newer' instead of
  trusting their order in the DOM.

Bug: T136277
Change-Id: I7c903c2e9d8ee2a0ef2eeb7b99f2251f230a794e
2016-06-08 13:26:43 +00:00
WMDE-Fisch 1a7fe36941 Add resize cursor to pointers
Also prevent cursor flickering when dragging.

Bug: T136099
Bug: T136833
Change-Id: Ie04c5ad9669c1e839b34bc8f649cc9264f70b666
2016-06-03 11:12:49 +02:00
Leszek Manicki a2774984c4 Make JavaScript code and CSS follow the style guide.
Changes include:
 - not passing in HTML attributes when creating tag elements,
 - creating HTML elements instead of appending hand-crafted HTML,
 - single append() calls instead of multiple consecutie appends,
 - not using raw HTML messages when not needed,
 - prefixing all CSS classes and IDs with "mw-" to avoid potential
   name conflicts.

Change-Id: I164538bbaf44d46a4c66659f56e07ec7225d7fa9
2016-05-31 14:57:14 +02:00
Leszek Manicki b0466a9615 Fix pointer pointer dragging to edge revisions
This fixes a problem with not being able to drag a pointer to the newest revision,
and an extension allowing to drag pointers to revision further than there
are revisions visible in the plot.

This stops snapping a pointer to the "stopper" element, and introduces a grid
for a pointers to be moved in. Size of the grid reflects a size of the current
revision plot which prevents moving a pointer out of the plot.
Custom "containment" is added for the "newer" edge as jquery ui's "containment"
does not work for this particular case.

Bug: T135837
Change-Id: Ifc6ae29c6d64d2baf44ef2b8ff96a45ae86b4f5f
2016-05-27 15:37:05 +02:00
Jakob Warkotsch f5d9347d93 Make pointer offset depend on whether pointer is the upper pointer.
Bug: T135837
Change-Id: I0ccc34751765f1f98dd29426d4efb3f3419f3932
2016-05-26 12:30:12 +02:00
Jakob Warkotsch e3c9502686 Enable moving of the pointers by clicking on the revisions.
Bug: T134993
Change-Id: I6b467d8b89bdccc2d6e01fbd94ac5890a07d20b4
2016-05-24 13:45:30 +02:00
Jakob Warkotsch 9ae092c4fe Fix pointer alignment.
The pointer weren't pointing exactly at the middle of a revision. It
appears to be off by 4px.

Bug: T135837
Change-Id: I750debb4ed82025dfb5b4ef9f988ff9bbeb36acb
2016-05-20 15:44:28 +02:00
WMDE-Fisch 43b3c36336 Add navigation arrow bars
Also adjusted margins and slider to side calculation to prevent
sliders from moving into the arrow bars.

Change-Id: I90078ff86ba8346baa6c9ab01474da871c046033
2016-05-20 09:44:36 +02:00
addshore ec80c4fa6f Get rid of left and right pointers.
As the pointers can switch side the idea
of having a left and right one will just lead
to confusion, so lets kill that idea now! :D

Change-Id: I9d56314ea4cf46402df56e0a038bfb9655218960
2016-05-13 11:23:11 +00:00
addshore f894286873 Map pointer colors to diff colours
The need for left-pointer and right-pointer should be cleaned up at
some stage.

Infact It may be wise to loose the distinction between left and right
pointer and simply have 2 pointers.

Bug: T134994
Change-Id: I68a2159bde6fff969ca54a79587cfe03ed783454
2016-05-13 11:23:05 +00:00
Jakob Warkotsch 0e227c8be3 Clean up awkward slider.slider dependency.
Change-Id: Idd673c19de30954aac46bd0e050d7b8cdf677abe
2016-05-12 17:19:14 +02:00
addshore 78bf501d58 Load pointers on correct revisions
Bug: T133273
Change-Id: I2223defbb80bc44ec7508c71ac9270a1230e45bc
2016-05-10 18:34:05 +01:00
Jakob Warkotsch 980f2ca917 Create Slider module.
* threw out most of the things from init.js
* turned Slider + View into respective modules
* pointers should remember position (except on page load) and correctly
  slide back to their position/to the side

Some things still need testing and refactoring.

Addshore: - CS fixes and comment out current failing tests

Bug: T134395
Change-Id: I78a7095e1d9902314163b1443448f47ef0484d4e
2016-05-10 17:38:46 +01:00
Jakob Warkotsch 54720944a0 Create Pointer module.
This creates a module for the draggable pointers for the RevisionSlider
mainly to encapsulate both the pointers' state and their HTML code.

Some animation methods such as slideToSide and slideToPosition
that are still flying around in init.js weren't added to the
module since I thought they should be part of the not yet existing
Slider module.

Change-Id: I1292bfb0bbd68f8d2de04b3b5e5f3133ec6363b8
2016-05-06 12:37:01 +00:00