Skip to content
This repository has been archived by the owner on Sep 10, 2022. It is now read-only.

Touch navigation does not work #85

Open
kg3 opened this issue Jun 20, 2018 · 1 comment
Open

Touch navigation does not work #85

kg3 opened this issue Jun 20, 2018 · 1 comment

Comments

@kg3
Copy link

kg3 commented Jun 20, 2018

I believe I know the answer why:
This is part the code for nav in the master:

   this.rootElement = document.querySelector('.js-side-nav');
    this.sideNavContent = this.rootElement
      .querySelector('.js-side-nav-content');
    this.sideNavBody = this.rootElement.querySelector('.side-nav__body');
    this.rootElement.addEventListener('click', () => {
      this.close();
    });

    this.sideNavContent.addEventListener('click', (e) => {
      e.stopPropagation();
    });

    this.hasUnprefixedTransform = 'transform' in document.documentElement.style;
    if (this.hasUnprefixedTransform) {
      // Touch slop is a variable that is defined to suggest anything larger
      // than this value was an intended gesture by the user.
      // 8  is a value from Android platform.
      // 3 was added as a factor made up from what felt right.
      var TOUCH_SLOP = 8 * window.devicePixelRatio * 3;

      var touchStartX;
      var sideNavTransform;

      var onSideNavTouchStart = (e) => {
        e.preventDefault();
        touchStartX = e.touches[0].pageX;
      };

      var onSideNavTouchMove = (e) => {
        e.preventDefault();

        var newTouchX = e.touches[0].pageX;
        sideNavTransform = Math.min(0, newTouchX - touchStartX);

        this.sideNavContent.style.transform =
          'translateX(' + sideNavTransform + 'px)';
      };

      var onSideNavTouchEnd = (e) => {
        if (sideNavTransform < -TOUCH_SLOP) {
          this.close();
          return;
        }

        this.open();
      };
      this.sideNavContent.addEventListener('touchstart', onSideNavTouchStart);
      this.sideNavContent.addEventListener('touchmove', onSideNavTouchMove);
      this.sideNavContent.addEventListener('touchend', onSideNavTouchEnd);

However this code from current demo, although obscured slightly, does not look similar but shortened, optimized and fixed the bug in master:

               this.rootElement = document.querySelector(".js-side-nav"),
                this.sideNavContent = this.rootElement.querySelector(".js-side-nav-content");
                var n, r, i = function(e) {
                    n = e.touches[0].pageX
                }, a = function(e) {
                    var o = e.touches[0].pageX;
                    r = Math.min(0, o - n),
                    0 > r && e.preventDefault(),
                    t.sideNavContent.style.transform = "translateX(" + r + "px)"
                }, s = function(e) {
                    -1 > r && t.closeSideNav()
                };
                this.rootElement.addEventListener("click", function() {
                    t.close()
                }),
                this.sideNavContent.addEventListener("click", function(e) {
                    e.stopPropagation()
                }),
                this.sideNavContent.addEventListener("touchstart", i),
                this.sideNavContent.addEventListener("touchmove", a),
                this.sideNavContent.addEventListener("touchend", s)

If I spent the time to decode it and refactor the code and then do a pull request, seems not as efficient as someone who already seems to have a fix to push theirs to master?

For giggles I have the compiled version of the master code that also looks different from what is running on the demo:

              this.rootElement = document.querySelector(".js-side-nav"),
                this.sideNavContent = this.rootElement.querySelector(".js-side-nav-content"),
                this.sideNavBody = this.rootElement.querySelector(".side-nav__body"),
                this.rootElement.addEventListener("click", function() {
                    t.close()
                }),
                this.sideNavContent.addEventListener("click", function(e) {
                    e.stopPropagation()
                }),
                this.hasUnprefixedTransform = "transform"in document.documentElement.style,
                this.hasUnprefixedTransform) {
                    var n, i, r = 8 * window.devicePixelRatio * 3, s = function(e) {
                        e.preventDefault(),
                        n = e.touches[0].pageX
                    }, a = function(e) {
                        e.preventDefault();
                        var o = e.touches[0].pageX;
                        i = Math.min(0, o - n),
                        t.sideNavContent.style.transform = "translateX(" + i + "px)"
                    }, u = function(e) {
                        return i < -r ? void t.close() : void t.open()
                    };
                    this.sideNavContent.addEventListener("touchstart", s),
                    this.sideNavContent.addEventListener("touchmove", a),
                    this.sideNavContent.addEventListener("touchend", u)

Please and thank you for fixing and looking at this :)

@kg3
Copy link
Author

kg3 commented Jun 20, 2018

I apologize for the code formatting. Spaces and tabs are terrible.

Here is a visual side-by-side comparison. The master branch code is on the left (compiled) and the running demo code is on the right (compiled)
https://imgur.com/a/m84OsIc

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

No branches or pull requests

1 participant