rytm-webflow 2.1.12 → 2.2.0

package/README.md

@@ -142,7 +142,9 @@ RytmWebflow.aswap.init({
 | ```animationTimeHide```  | ```800``` | Time (ms) for view's *hide* transition|
 | ```animationTimeShow```  | ```800``` | Time (ms) for view's *show* transition|
 | ```formsEnabled```  | ```true``` | Use *ASwap* on forms|
-| ```formsSelector```  | ```'form[method="get"]'``` | *ASwap* forms selector - as default uses forms with *GET* method only|
+| ```formsSelector```  | ```'form'``` | *ASwap* forms selector|
+| ```swipeEnabled```  | ```true``` | Use *ASwap* [swipe](#swipe)|
+| ```swipeMinDistance```  | ```5``` | Minimum swipe move distance (px) for [swipe](#swipe) to fire|
 | ```historyEnabled``` | ```true``` | Use history push state |
 | ```historyFallback``` | ```true``` | Fallback if browser dosn't support history push state |
 | ```cacheOn``` | ```true``` | By default all requests are being cached. Set to ```false``` to turn cache off |
@@ -218,6 +220,17 @@ RytmWebflow.aswap.init(params, {
   },
 })
 ```
+## <a name="swipe">Swipe</a> ##
+Add urls to `as-swipe-{direction}` data attributes, eg:
+```html
+<div
+	data-as-swipe-left="/path/to-next"
+	data-as-swipe-right="/path/to-prev"
+	data-as-swipe-up="/path/to-back">
+	...
+</div>
+```
+
 ## <a name="webflowview">WebflowView</a> ##
 WebflowView is an universal ASwap View which can be used with the **Webflow syntax** - a minified way to describe an animation, it's duration (time), easing, delay or the trigger. Eg. `y:100,o:0` will animate an element from: `y:100px` and `opacity: 0` to it's current state. Go to [Webflow syntax](#webflowsyntax) for more.
 ### Basic usage example  

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "2.1.12",
+  "version": "2.2.0",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "scripts": {

package/scripts/aswap/ASwap.js

@@ -12,7 +12,9 @@ class ASwap {
       animationTimeHide: 800, // hide animation time
       animationTimeShow: 800, // show animation time
       formsEnabled: true, // use aswap on forms
-      formsSelector: 'form[method="get"]', // aswap forms selector
+      formsSelector: 'form', // aswap forms selector
+      swipeEnabled: true, // use aswap `swipe`
+      swipeMinDistance: 5, // min swipe move distance
       historyEnabled: true, // use history push state
       historyFallback: true, // fallback of browser dosn't support history push state
       cacheOn: true, // use Aswap Cache?
@@ -96,6 +98,14 @@ class ASwap {
       this.dispatcher.clearCache(url);
     }
   }
+  /**
+   * submit form
+   */
+  formSubmit(form) {
+    if (this.dispatcher) {
+      this.dispatcher.formSubmit(form);
+    }
+  }
   onRequestUrl(e) {
     document.documentElement.classList.add('as-in-progress')
     this.getActiveControlles().forEach( (c, index)=> {

package/scripts/aswap/ASwapDispatcher.js

@@ -297,6 +297,22 @@ class ASwapDispatcher extends EventDispatcher {
     xhr.send();
     
   }
+  /**
+   * Form submit
+   */
+  formSubmit(form) {
+    const useCache = !form.classList.contains(this.noCacheClassName);
+    const url = form.getAttribute("action");
+    if (url.indexOf('://') < 0) {
+      this.currentTrigger = form
+      const method = form.getAttribute('method') ? form.getAttribute('method') : 'get'
+      const formData = new FormData(form);
+      this.submit(url, formData, method, false, useCache);
+      // const dataStr = new URLSearchParams(formData).toString();
+      // const requestUrl = method == 'get' ? (url + '?' + dataStr) : url;
+      // this.submit(requestUrl, formData, method, false, useCache);
+    }
+  }
   /**
    * 
    * @param {string} url 
@@ -305,7 +321,7 @@ class ASwapDispatcher extends EventDispatcher {
    * @param {boolean} noHistory
    * @param {boolean} useCache
    */
-  submit(url, data, method, noHistory = false, useCache = true) {
+  submit(url, formData, method, noHistory = false, useCache = true) {
     // dispatch event
     this.dispatch(Events.NAV_REQUEST_URL);
     this.prevUrl = this.currentUrl;
@@ -313,11 +329,22 @@ class ASwapDispatcher extends EventDispatcher {
     if (!noHistory) {
       this.pushState(url);
     }
-    let result = this.getStoredResult(url);
-    if (result) {
-      this.handleResult(result);
-    } else {
-      this.loadURL(url, data, method, useCache);
+    switch (method) {
+      case 'post':
+        // POST
+        this.loadURL(url, formData, method, false);
+        break;
+      default:
+        // GET
+        const dataStr = new URLSearchParams(formData).toString();
+        url = method == 'get' ? (url + '?' + dataStr) : url;
+        let result = useCache ? this.getStoredResult(url) : null;
+        if (result) {
+          this.handleResult(result);
+        } else {
+          this.loadURL(url, formData, method, useCache);
+        }
+        break;
     }
   }
   /**
@@ -346,7 +373,6 @@ class ASwapDispatcher extends EventDispatcher {
     // dispatch event
     this.dispatch(Events.NAV_REQUEST_LOAD);
     this.trace("ASwap load: ", url); 
-
     let xhr = new XMLHttpRequest();
     xhr.onreadystatechange = () => {
       if (xhr.readyState === 4) {
@@ -443,22 +469,56 @@ class ASwapDispatcher extends EventDispatcher {
       }
     }
   }
+  // SUBMIT
   onDocumentSubmit(e) {
     if (e.target.tagName == 'FORM') {
-      const f = e.target
-      if (this.isFormElementValid(f)) {
+      if (this.isFormElementValid(e.target)) {
         e.preventDefault();
-        const useCache = !f.classList.contains(this.noCacheClassName);
-        const url = f.getAttribute("action");
-        if (url.indexOf('://') < 0) {
-          e.preventDefault()
-          this.currentTrigger = f
-          const method = f.getAttribute('method') ? f.getAttribute('method') : 'get'
-          const dataStr = new URLSearchParams(new FormData(f)).toString()
-          const requestUrl = method == 'get' ? (url + '?' + dataStr) : url
-          this.submit(requestUrl, dataStr, method, false, useCache)
+        this.formSubmit(e.target);
+      }
+    }
+  }
+  // Swipe touch start event
+  handleTouchStart = (e) => {
+    const firstTouch = e.touches[0];
+    this.xDown = firstTouch.clientX;
+    this.yDown = firstTouch.clientY;
+  }
+  // Swipe touch move event
+  handleTouchMove = (e) => {
+    if ( !this.xDown || !this.yDown ) {
+      return;
+    }
+    const xUp = e.touches[0].clientX;
+    const yUp = e.touches[0].clientY;
+    const xDiff = this.xDown - xUp;
+    const yDiff = this.yDown - yUp;
+    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
+      if (Math.abs(xDiff) > this.swipeMinDistance) {
+        if ( xDiff > 0 ) {
+          this.handleSwipe(e, 'left');
+        } else {
+          this.handleSwipe(e, 'right');
         }
-
+      }
+    } else if (Math.abs(yDiff) > this.swipeMinDistance) {
+      if ( yDiff > 0 ) {
+        this.handleSwipe(e, 'up');
+      } else { 
+        this.handleSwipe(e, 'down');
+      }
+    }
+    /* reset values */
+    this.xDown = null;
+    this.yDown = null;
+  }
+  // handle SWIPE direction
+  handleSwipe = (e, direction) => {
+    const d = e.target.closest('[data-as-swipe-' + direction + ']')
+    if (d) {
+      const path = d.getAttribute('data-as-swipe-' + direction);
+      if (path) {
+        this.openURL(path);
       }
     }
   }
@@ -476,6 +536,11 @@ class ASwapDispatcher extends EventDispatcher {
     if (this.formsEnabled) {
       document.addEventListener('submit', this.onDocumentSubmit.bind(this), false)
     }
+    // swipe?
+    if (this.swipeEnabled) {
+      document.addEventListener('touchstart', this.handleTouchStart, false);
+      document.addEventListener('touchmove', this.handleTouchMove, false);
+    }
     // browser back button
     window.addEventListener('popstate', this.onHistoryBack.bind(this), false)
   }