rytm-webflow 1.1.4 → 2.0.1

package/README.md

@@ -11,7 +11,6 @@ $ npm install rytm-webflow --save
 ## Dependencies
 - gsap
 - imagesloaded
-- jquery
 - scrollmagic
 - scrollmagic-plugin-gsap
 
@@ -154,6 +153,7 @@ RytmWebflow.aswap.init({
 | ```refreshOnSameUrl``` | ```true``` | When ```true``` each request on same URL will refresh browser's window |
 | ```routes``` | ```{}``` | The routes object where you can define controllers and views |
 | ```swapSelector``` | ```'#stage'``` | ASwap wrapper selector |
+| ```defaultDocumentScrollBehavior``` | ```'smooth'``` | Default document scroll behaviour |
 | ```trace``` | ```(message) => {}``` | A function to log stuff, eg in console |
 
 ### Controller class

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rytm-webflow",
-  "version": "1.1.4",
+  "version": "2.0.1",
   "description": "rytm webflow pack - ASwap, ShowUp",
   "main": "scripts/index.js",
   "scripts": {
@@ -18,7 +18,6 @@
   "dependencies": {
     "gsap": "^3.5.1",
     "imagesloaded": "^4.1.4",
-    "jquery": "^3.1.1",
     "scrollmagic": "^2.0.7",
     "scrollmagic-plugin-gsap": "^1.0.4"
   }

package/scripts/aswap/ASwap.js

@@ -1,4 +1,3 @@
-import $ from "jquery"
 
 import ASwapDispatcher from "./ASwapDispatcher";
 import Events from "./Events";
@@ -25,6 +24,7 @@ class ASwap {
       refreshOnSameUrl: true, // refresh window if same URL is requested
       routes: {},
       swapSelector: '#stage', // swap wrapper selector
+      defaultDocumentScrollBehavior: 'smooth',
       trace: () => {}, // a function to trace progress in console
     }
     // public events
@@ -102,7 +102,7 @@ class ASwap {
     this.events.onRequestLoad()
   }
   onRequestLoaded(e) {
-    this.getControllersFromContainer(e.target.$freshContent).forEach( (c, index)=> {
+    this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onRequestLoaded(e);
     });
     document.documentElement.classList.remove("as-request-loading");
@@ -112,7 +112,7 @@ class ASwap {
     document.documentElement.classList.add('as-hide');
     this.getActiveControlles().forEach( (c, index)=> {
       // if view is not present in fresh content then call controller hide
-      if (!c.getViewContainer(e.target.$freshContent).length) {
+      if (!c.getViewContainer(e.target.freshContent)) {
         c.onViewHide(e);
       }
     });
@@ -122,34 +122,34 @@ class ASwap {
     document.documentElement.classList.remove('as-hide');
     this.getActiveControlles().forEach( (c, index)=> {
       // if view is not present in fresh content then call controller hidden
-      if (!c.getViewContainer(e.target.$freshContent).length) {
+      if (!c.getViewContainer(e.target.freshContent)) {
         c.onViewHidden(e);
       }
     });
     this.events.onViewHidden()
   }
   onViewSwapStart(e) {
-    this.getControllersFromContainer(e.target.$freshContent).forEach( (c, index)=> {
+    this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewSwapStart(e);
     });
     this.events.onViewSwapStart()
   }
   onViewSwapComplete(e) {
-    this.getControllersFromContainer(e.target.$freshContent).forEach( (c, index)=> {
+    this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewSwapComplete(e);
     });
     this.events.onViewSwapComplete()
   }
   onViewShow(e) {
     document.documentElement.classList.add('as-show');
-    this.getControllersFromContainer(e.target.$freshContent).forEach( (c, index)=> {
+    this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewShow(e);
     });
     this.events.onViewShow()
   }
   onViewShown(e) {
     document.documentElement.classList.add('as-show');
-    this.getControllersFromContainer(e.target.$freshContent).forEach( (c, index)=> {
+    this.getControllersFromContainer(e.target.freshContent).forEach( (c, index)=> {
       c.onViewShown(e);
     });
     document.documentElement.classList.remove('as-in-progress');
@@ -172,22 +172,20 @@ class ASwap {
   }
   /**
   * get controllers from container based on view's included in the container
-  * @param {jQuery} $container
+  * @param  container
   * @returns {Array}
   **/
-  getControllersFromContainer($container) {
+  getControllersFromContainer(container) {
     let arr = [];
-    $container.find("*[data-as-view]").each( (index, el)=> {
-      let name = $(el).data("as-view");
-      let id = $(el).data("as-id");
-      if (!id) {
-        id = name;
-      }
-      let c = this.getController(name, id);
+    const list = [...container.querySelectorAll("*[data-as-view]")]
+    list.forEach((el, index) => {
+      const name = el.dataset.asView
+      const id = el.dataset.asId ? el.dataset.asId : name
+      const c = this.getController(name, id)
       if (c) {
-        arr.push(c);
+        arr.push(c)
       }
-    });
+    })
     return arr;
   }
   /**

package/scripts/aswap/ASwapDispatcher.js

@@ -1,4 +1,3 @@
-import $ from "jquery"
 import Events from "./Events"
 import EventDispatcher from "./EventDispatcher"
 
@@ -24,7 +23,7 @@ class ASwapDispatcher extends EventDispatcher {
     this.prevUrl = null;
     this.ajaxStore = [];
     this.asHistory = [];
-    this.$freshContent = $(this.swapSelector);
+    this.freshContent = document.querySelector(this.swapSelector);
 
   }
   
@@ -65,48 +64,61 @@ class ASwapDispatcher extends EventDispatcher {
   * @param tag {String} the tag name, eg. body
   * @returns {String|Boolean} 
   **/
-  getTagFromResult(result, tag) {
+  getTagFromResult(result, tag, index = 0) {
     let regex = new RegExp('<' + tag + '[^>]*>((.|[\n\r])*)<\/' + tag + '>');
     let body = regex.exec(result);
-    if (body) {
-      return body[0];
+    if (body && body[index]) {
+      return body[index];
     } else {
-      this.warning("AS problem - " + tag + " could not be extracted");
+      this.warning("AS problem - " + tag + " could not be extracted, index:", idnex);
       return false;
     }
   }
+  /**
+   * ###
+   */
+  getElementFromResult(result, tagName) {
+    let htmlStr = this.getTagFromResult(result, tagName, 1)
+    let el = document.createElement(tagName)
+    el.innerHTML = htmlStr.trim()
+    return el
+  }
 
   /**
   * swap the meta and title tags in document's <head>
   * @param result {String} the ajax request result
   **/
   swapHeadMeta(result) {
-    let head = this.getTagFromResult(result, "head");
-    if (!head) {
+    const freshHead = this.getElementFromResult(result, "head")
+    if (!freshHead) {
       this.warning("AS problem - head was not found in result");
       return false;
     }
-    let $head = $(head); 
-    $head.each( (index, el)=>{
-      // swap only meta and title
-      if ($(el).is('title')) {
-        document.title = $(el).html();
-      }
-      if ($(el).is('meta')) {
-        let name = $(el).attr("name");
-        if (name) {
-          $("html head meta[name='" + name + "']").attr("content", $(el).attr("content"));
-        }
-        let itemprop = $(el).attr("name");
-        if (itemprop) {
-          $("html head meta[itemprop='" + itemprop + "']").attr("content", $(el).attr("content"));
-        }
-        let property = $(el).attr("property");
-        if (property) {          
-          $("html head meta[property='" + property + "']").attr("content", $(el).attr("content"));
-        }
+    const list = [...freshHead.querySelectorAll("*")]
+    list.forEach((el, index) => {
+      // swap if TITLE or META
+      switch (el.nodeName.toLowerCase()) {
+        case "title":
+          document.title = el.innerHTML
+          break;
+        case "meta":
+          const name = el.getAttribute("name")
+          const property = el.getAttribute("property")
+          const itemprop = el.getAttribute("itemprop")
+          const content = el.getAttribute("content")
+          // get the meta query string
+          let query = 'html head meta'
+          query += (name ? '[name="' + name + '"' : '')
+          query += (property ? '[property="' + property + '"' : '')
+          query += (itemprop ? '[itemprop="' + itemprop + '"' : '')
+          let metaEl = document.querySelector(query)
+          if (metaEl && content) {
+            metaEl.setAttribute("content", content)
+          }
+          break;
       }
-    });
+    })
+    
   }
   /**
   * swap the HTML class names
@@ -134,8 +146,7 @@ class ASwapDispatcher extends EventDispatcher {
     }    
     let html = document.createElement('html');
     html.innerHTML = body;
-    let $resultBody = $(html).find('body'); 
-    return $resultBody.find(this.swapSelector);
+    return html.querySelector(this.swapSelector)
   }
 
   /**
@@ -144,8 +155,8 @@ class ASwapDispatcher extends EventDispatcher {
   **/
   handleResult(result) {
     // store fresh content in public variable
-    this.$freshContent = this.getFreshContentFromResult(result);
-    let $swap = $(this.swapSelector);
+    this.freshContent = this.getFreshContentFromResult(result);
+    const swap = document.querySelector(this.swapSelector)
     // dispatch event
     this.dispatch(Events.NAV_REQUEST_LOADED);
     this.dispatch(Events.NAV_VIEW_HIDE);
@@ -155,17 +166,17 @@ class ASwapDispatcher extends EventDispatcher {
     this.asAnimTimeout1 = setTimeout(()=> {
       this.dispatch(Events.NAV_VIEW_HIDDEN);
       this.dispatch(Events.NAV_SWAP_START);
-      if (this.$freshContent.length) {
-        $swap.attr("class", this.$freshContent.attr("class")); // stage class
-        $swap.html(this.$freshContent.html());
+      if (this.freshContent) {
+        // swap stage classes
+        swap.setAttribute("class", this.freshContent.getAttribute("class"))
+        // swap content
+        swap.innerHTML = this.freshContent.innerHTML
       }
       // swap head (meta)
       this.swapHeadMeta(result);
       setTimeout(() => {
         this.swapBodyToHtmlClasses(result);
       }, 10)
-      
-
       // scroll up
       if (!this.currentTrigger || !this.currentTrigger.classList.contains(this.noScrollClassName)) {
         this.resetScrollPosition();
@@ -179,6 +190,7 @@ class ASwapDispatcher extends EventDispatcher {
         this.dispatch(Events.NAV_VIEW_SHOWN);
       }, this.animationTimeShow);        
     }, this.animationTimeHide);
+    
   }
   /**
   * get current URL
@@ -231,9 +243,18 @@ class ASwapDispatcher extends EventDispatcher {
   * scroll back up
   **/
   resetScrollPosition() {
-    // $("html, body").animate({ scrollTop: "0" }, 300);
-    $("html, body").scrollTop(0);
+    // set scrollBehavior to auto
+    document.documentElement.style.scrollBehavior = 'auto';
+    // scroll without animation
+    setTimeout(() => {
+      window.scrollTo(0, 0)
+    }, 5)
+    // set scrollBehavior to it's default value
+    setTimeout(() => {
+      document.documentElement.style.scrollBehavior = this.defaultDocumentScrollBehavior ? this.defaultDocumentScrollBehavior : 'smooth';
+    }, 5)
   }
+
   /**
    * Preload URL
    * @param url {String}
@@ -246,12 +267,15 @@ class ASwapDispatcher extends EventDispatcher {
     if (result) {
       return false
     }
-    $.get(url, {}, (result)=> {
-      if (result) {
-        this.trace('URL was preloaded', url)
-        this.storeResult(url, result);
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        // this.trace('URL was preloaded', url, xhr.responseText)
+        this.storeResult(url, xhr.responseText);
       }
-    });
+    };
+    xhr.open('GET', url);
+    xhr.send();
     
   }
   /**
@@ -301,22 +325,19 @@ class ASwapDispatcher extends EventDispatcher {
   loadURL(url, data = {}, method = 'get', useCache = true) {
     // dispatch event
     this.dispatch(Events.NAV_REQUEST_LOAD);
-    this.trace("ASwap load: ", url);    
-    $.ajax({
-      type: method,
-      url,
-      data,
-      success: (result) => {
-        if (result) {  
-          if (useCache) {
-            this.storeResult(url, result);
-          }
-          this.handleResult(result);
-        } else {
-          this.warning("AS problem - GET", url, "returned no result");
-        }  
+    this.trace("ASwap load: ", url); 
+
+    let xhr = new XMLHttpRequest();
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState === 4) {
+        if (useCache) {
+          this.storeResult(url, xhr.responseText);
+        }
+        this.handleResult(xhr.responseText);
       }
-    });
+    };
+    xhr.open(method, url);
+    xhr.send(data);
   }
   /**
   * history pushState (URL)
@@ -337,7 +358,9 @@ class ASwapDispatcher extends EventDispatcher {
   * @param e {Event}
   **/
   onHistoryBack(e) {
+    e.preventDefault();
     let url = window.location.pathname + window.location.search;
+    console.log("HISTORY BACK", url)
     this.openURL(url, true);
   }
   /**
@@ -349,76 +372,94 @@ class ASwapDispatcher extends EventDispatcher {
     this.storeResult(url, result);
     this.currentUrl = url;
   }
-  isLinkElementValid($a) {
+  isLinkElementValid(a) {
     let result = false
-    if ($a.length) {
-      if (!$a.hasClass(this.noSwapClassName) && $a.attr("target") != "_blank") { 
+    if (a) {
+      if (!a.classList.contains(this.noSwapClassName) && a.getAttribute("target") != "_blank") {
         result = true
       }
     }
     return result
   }
-  isFormElementValid($f) {
+  isFormElementValid(f) {
     let result = false
-    if ($f.length) {
-      if (!$f.hasClass(this.noSwapClassName)) { 
+    if (f) {
+      if (!f.classList.contains(this.noSwapClassName)) { 
         result = true
       }
     }
     return result
   }
+  
+  /**
+   * ### Event handlers ###
+   */
+  onDocumentClick(e) {
+    if (e.target.tagName !== 'A') {
+      return;
+    }
+    const a = e.target
+    if (this.isLinkElementValid(a) && !e.metaKey & !e.ctrlKey) {
+      const useCache = !a.classList.contains(this.noCacheClassName);
+      const url = a.getAttribute("href");
+      if (url.indexOf('://') < 0) {
+        e.preventDefault()
+        this.currentTrigger = a
+        this.openURL(url, false, useCache);
+      }
+    }
+  }
+
+  onDocumentMouseover(e) {
+    if (e.target.tagName !== 'A') {
+      return;
+    }
+    const a = e.target
+    if (this.isLinkElementValid(a)) {
+      const useCache = !a.classList.contains(this.noCacheClassName);
+      if (useCache) {
+        const url = a.getAttribute("href");
+        this.preloadURL(url)
+      }
+    }
+  }
+  onDocumentSubmit(e) {
+    e.preventDefault();
+    if (e.target.tagName !== 'FORM') {
+      return;
+    }
+    const f = e.target
+    if (this.isFormElementValid(f)) {
+      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)
+      }
+
+    }
+
+  }
   /**
   * add event listeners
   **/
   addEventListeners() {    
     // catch all a click events
-    $("body").on("click", "a", (e)=> {
-      let $a = $(e.currentTarget);
-      // check black list, target _blank and if ctrl or cmd is not pressed
-      if (this.isLinkElementValid($a) && !e.metaKey & !e.ctrlKey) {
-        let useCache = !$a.hasClass(this.noCacheClassName);        
-        let url = $a.attr("href");
-        if (url.indexOf('://') < 0) {
-          e.preventDefault();
-          this.currentTrigger = e.currentTarget
-          this.openURL(url, false, useCache);
-        }
-      }
-    });
+    document.addEventListener('click', this.onDocumentClick.bind(this), false)
     // preload on hover
     if (this.preloadOnHover) {
-      $("body").on("mouseover", "a", (e)=> {
-        let $a = $(e.currentTarget);
-        if (this.isLinkElementValid($a)) {
-          let useCache = !$a.hasClass(this.noCacheClassName);
-          let url = $a.attr("href");
-          if (useCache) {
-            this.preloadURL(url)
-          }
-        }
-      })
+      document.addEventListener('mouseover', this.onDocumentMouseover.bind(this), false)
     }
     // forms?
     if (this.formsEnabled) {
-      $("body").on("submit", this.formsSelector, (e) => {
-        let $f = $(e.currentTarget)
-        if (this.isFormElementValid($f)) {
-          let useCache = !$f.hasClass(this.noCacheClassName)
-          let url = $f.attr('action')
-          if (url.indexOf('://') < 0) {
-            e.preventDefault()
-            this.currentTrigger = e.currentTarget
-            const data = $f.serialize()
-            const method = $f.attr('method') ? $f.attr('method') : 'get'
-            const requestUrl = method == 'get' ? (url + '?' + data) : url
-            this.submit(requestUrl, data, method, false, useCache)
-          }
-        }
-
-      })
+      document.addEventListener('submit', this.onDocumentSubmit.bind(this), false)
     }
-    // window back button support
-    $(window).on("popstate", this.onHistoryBack.bind(this));
+    // browser back button
+    window.addEventListener('popstate', this.onHistoryBack.bind(this), false)
   }
 
   initialDispatch() {    
@@ -479,8 +520,8 @@ class ASwapDispatcher extends EventDispatcher {
   * init
   **/
   init() {    
-    let $swap = $(this.swapSelector);
-    if (!$swap.length) {
+    const swap = document.querySelector(this.swapSelector)
+    if (!swap) {
       this.warning("AS problem - swap container not found!", this.swapSelector);
       return false;
     }

package/scripts/aswap/Controller.js

@@ -29,12 +29,10 @@ class Controller {
     return this.active;
   }
   /**
-  * find my $view container in wrapper
-  * @param {jQuery} $wrapper - search within this element
-  * @retunrs {jQuery|Boolean} $view | false
+  * find my view container in wrapper
   **/
-  getViewContainer($wrapper) {    
-    return $wrapper.find('*[data-as-id="' + this.id + '"]');
+  getViewContainer(wrapper) {    
+    return wrapper.querySelector('*[data-as-id="' + this.id + '"]');
   }
 
   getContainerSelector() {
@@ -72,13 +70,13 @@ class Controller {
   **/
   onRequestLoaded(e) {
     if (!this.active && this.view) {      
-      this.view.prepare(e.target.$freshContent.get(0));
+      this.view.prepare(e.target.freshContent.get(0));
     }
   }
   /**
   * on view hide - animation out / hide start
   * request is loaded and fresh content is ready to init 
-  * loaded content available <code>e.target.$freshContent</code>
+  * loaded content available <code>e.target.freshContent</code>
   * @param {Event} e
   **/  
   onViewHide(e) {

package/scripts/aswap/ControllerImgLoad.js

@@ -24,7 +24,7 @@ class ControllerImgLoad extends Controller {
       container.classList.add("as-images-loading")
       this.view.loadImagesStart(container);
     }
-    imagesLoaded(this.getContainerSelector(), $.proxy(this.loadImagesComplete, this));
+    imagesLoaded(this.getContainerSelector(), this.loadImagesComplete.bind(this));
   }
   /**
    * load images complete
@@ -44,7 +44,7 @@ class ControllerImgLoad extends Controller {
   /**
   * on view hide - animation out / hide start
   * request is loaded and fresh content is ready to init 
-  * loaded content available <code>e.target.$freshContent</code>
+  * loaded content available <code>e.target.freshContent</code>
   * @param {Event} e
   **/  
   onViewHide(e) {

package/scripts/aswap/View.js

@@ -20,7 +20,6 @@ class View {
   }
   /**
   * prepare (before show)
-  * @param {jQuery} $container
   **/
   prepare(container) {
   }

package/scripts/showup/ShowUp.js

@@ -24,21 +24,35 @@ class ShowUp {
     this.buildParallaxScenes()
     this.addEventListeners()
   }
+  /**
+   * Class event handlers
+   */
+  handleEvent(e) {
+    switch (e.type) {
+      case 'resize':
+        this.onWindowUpdate(e)
+        break;
+      case 'DOMContentLoaded':
+        this.onWindowUpdate(e)
+        break;
+    }
+  }
   /**
    * Add event listeners
    */
   addEventListeners() {
-    $(document).on('DOMContentLoaded load', $.proxy(this.onWindowUpdate, this))
-    $(window).on('resize', $.proxy(this.onWindowUpdate, this))
+    window.addEventListener('resize', this)
+    document.addEventListener('DOMContentLoaded', this)
   }
   /**
    * Remove event listeners
    */
   removeEventListeners() {
-    $(document).off('DOMContentLoaded load', $.proxy(this.onWindowUpdate, this));
-    $(window).off('resize', $.proxy(this.onWindowUpdate, this));
+    window.removeEventListener('resize', this)
+    document.removeEventListener('DOMContentLoaded', this)
   }
   onWindowUpdate(e) {
+    console.log("show up WINDOW UPDATE,", this)
     if (this.scenes.length > 0) {
       scrollController.refresh()
     }