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

Touch navigation does not work #85

Open
@kg3

Description

@kg3

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 :)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions