Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dragdealer does not take into account scale() css3 transform when calculating handle positions #118

Open
TheGuardianWolf opened this issue Oct 26, 2016 · 0 comments

Comments

@TheGuardianWolf
Copy link

TheGuardianWolf commented Oct 26, 2016

So I have a project I am working on that uses reveal.js. Reveal automatically applies a scaling transform to the whole slide for responsiveness.

Using dragdealer inside a slide results in an ever increasing deviation in the handle away from your mouse location when dragging from the start position.

I don't have too much js experience but I've put together a quick hack for my particular issue, which may help explain this if my explanation above isn't as clear as I thought it was.

renderHandlePosition: function() {

    var transform = '';
    if (this.options.css3 && StylePrefix.transform) {
      if (this.options.horizontal) {
          console.log(typeof this.offset.current[0]);
        transform += 'translateX(' + (this.offset.current[0] / 0.817006) + 'px)'; // Divide by scaling value to get correct offset.
      }
      if (this.options.vertical) {
        transform += ' translateY(' + this.offset.current[1] + 'px)';
      }
      this.handle.style[StylePrefix.transform] = transform;
      return;
    }

    if (this.options.horizontal) {
      this.handle.style.left = this.offset.current[0] + 'px';
    }
    if (this.options.vertical) {
      this.handle.style.top = this.offset.current[1] + 'px';
    }
  }

UPDATE Apparently this messes up the bounds and makes the handle able to extend out from the right boundary. Back to square one.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant