phoenix_live_view 0.16.3 → 0.17.2

package/assets/js/phoenix_live_view/live_socket.js

@@ -90,8 +90,8 @@ import {
   PHX_ROOT_ID,
   PHX_THROTTLE,
   PHX_TRACK_UPLOADS,
-  RELOAD_JITTER
-
+  PHX_SESSION,
+  RELOAD_JITTER,
 } from "./constants"
 
 import {
@@ -99,6 +99,7 @@ import {
   closestPhxBinding,
   closure,
   debug,
+  isObject,
   maybe
 } from "./utils"
 
@@ -107,7 +108,7 @@ import DOM from "./dom"
 import Hooks from "./hooks"
 import LiveUploader from "./live_uploader"
 import View from "./view"
-import {PHX_SESSION} from "./constants"
+import JS from "./js"
 
 export default class LiveSocket {
   constructor(url, phxSocket, opts = {}){
@@ -144,6 +145,7 @@ export default class LiveSocket {
     this.sessionStorage = opts.sessionStorage || window.sessionStorage
     this.boundTopLevelEvents = false
     this.domCallbacks = Object.assign({onNodeAdded: closure(), onBeforeElUpdated: closure()}, opts.dom || {})
+    this.transitions = new TransitionSet()
     window.addEventListener("pagehide", _e => {
       this.unloaded = true
     })
@@ -200,6 +202,10 @@ export default class LiveSocket {
 
   disconnect(callback){ this.socket.disconnect(callback) }
 
+  execJS(el, encodedJS, eventType = null){
+    this.owner(el, view => JS.exec(eventType, encodedJS, view, el))
+  }
+
   // private
 
   triggerDOM(kind, args){ this.domCallbacks[kind](...args) }
@@ -222,6 +228,14 @@ export default class LiveSocket {
     }
   }
 
+  requestDOMUpdate(callback){
+    this.transitions.after(callback)
+  }
+
+  transition(time, onDone = function(){}){
+    this.transitions.addTransition(time, onDone)
+  }
+
   onChannel(channel, event, cb){
     channel.on(event, data => {
       let latency = this.getLatencySim()
@@ -324,10 +338,24 @@ export default class LiveSocket {
 
     this.main = this.newRootView(newMainEl, flash)
     this.main.setRedirect(href)
-    this.main.join(joinCount => {
+    this.transitionRemoves()
+    this.main.join((joinCount, onDone) => {
       if(joinCount === 1 && this.commitPendingLink(linkRef)){
-        oldMainEl.replaceWith(newMainEl)
-        callback && callback()
+        this.requestDOMUpdate(() => {
+          oldMainEl.replaceWith(newMainEl)
+          callback && callback()
+          onDone()
+        })
+      }
+    })
+  }
+
+  transitionRemoves(elements){
+    let removeAttr = this.binding("remove")
+    elements = elements || DOM.all(document, `[${removeAttr}]`)
+    elements.forEach(el => {
+      if(document.body.contains(el)){ // skip children already removed
+        this.execJS(el, el.getAttribute(removeAttr), "remove")
       }
     })
   }
@@ -346,14 +374,7 @@ export default class LiveSocket {
   }
 
   withinOwners(childEl, callback){
-    this.owner(childEl, view => {
-      let phxTarget = childEl.getAttribute(this.binding("target"))
-      if(phxTarget === null){
-        callback(view, childEl)
-      } else {
-        view.withinTargets(phxTarget, callback)
-      }
-    })
+    this.owner(childEl, view => callback(view, childEl))
   }
 
   getViewByEl(el){
@@ -428,22 +449,25 @@ export default class LiveSocket {
     this.bindNav()
     this.bindClicks()
     this.bindForms()
-    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, target, targetCtx, phxEvent, _phxTarget) => {
-      let matchKey = target.getAttribute(this.binding(PHX_KEY))
+    this.bind({keyup: "keyup", keydown: "keydown"}, (e, type, view, targetEl, phxEvent, eventTarget) => {
+      let matchKey = targetEl.getAttribute(this.binding(PHX_KEY))
       let pressedKey = e.key && e.key.toLowerCase() // chrome clicked autocompletes send a keydown without key
       if(matchKey && matchKey.toLowerCase() !== pressedKey){ return }
 
-      view.pushKey(target, targetCtx, type, phxEvent, {key: e.key, ...this.eventMeta(type, e, target)})
+      let data = {key: e.key, ...this.eventMeta(type, e, targetEl)}
+      JS.exec(type, phxEvent, view, targetEl, ["push", {data}])
     })
-    this.bind({blur: "focusout", focus: "focusin"}, (e, type, view, targetEl, targetCtx, phxEvent, phxTarget) => {
-      if(!phxTarget){
-        view.pushEvent(type, targetEl, targetCtx, phxEvent, this.eventMeta(type, e, targetEl))
+    this.bind({blur: "focusout", focus: "focusin"}, (e, type, view, targetEl, phxEvent, eventTarget) => {
+      if(!eventTarget){
+        let data = {key: e.key, ...this.eventMeta(type, e, targetEl)}
+        JS.exec(type, phxEvent, view, targetEl, ["push", {data}])
       }
     })
     this.bind({blur: "blur", focus: "focus"}, (e, type, view, targetEl, targetCtx, phxEvent, phxTarget) => {
       // blur and focus are triggered on document and window. Discard one to avoid dups
-      if(phxTarget && !phxTarget !== "window"){
-        view.pushEvent(type, targetEl, targetCtx, phxEvent, this.eventMeta(type, e, targetEl))
+      if(phxTarget === "window"){
+        let data = this.eventMeta(type, e, targetEl)
+        JS.exec(type, phxEvent, view, targetEl, ["push", {data}])
       }
     })
     window.addEventListener("dragover", e => e.preventDefault())
@@ -503,16 +527,16 @@ export default class LiveSocket {
         let targetPhxEvent = e.target.getAttribute && e.target.getAttribute(binding)
         if(targetPhxEvent){
           this.debounce(e.target, e, () => {
-            this.withinOwners(e.target, (view, targetCtx) => {
-              callback(e, event, view, e.target, targetCtx, targetPhxEvent, null)
+            this.withinOwners(e.target, view => {
+              callback(e, event, view, e.target, targetPhxEvent, null)
             })
           })
         } else {
           DOM.all(document, `[${windowBinding}]`, el => {
             let phxEvent = el.getAttribute(windowBinding)
             this.debounce(el, e, () => {
-              this.withinOwners(el, (view, targetCtx) => {
-                callback(e, event, view, el, targetCtx, phxEvent, "window")
+              this.withinOwners(el, view => {
+                callback(e, event, view, el, phxEvent, "window")
               })
             })
           })
@@ -535,19 +559,32 @@ export default class LiveSocket {
         target = e.target.matches(`[${click}]`) ? e.target : e.target.querySelector(`[${click}]`)
       } else {
         target = closestPhxBinding(e.target, click)
+        this.dispatchClickAway(e)
       }
       let phxEvent = target && target.getAttribute(click)
       if(!phxEvent){ return }
       if(target.getAttribute("href") === "#"){ e.preventDefault() }
 
       this.debounce(target, e, () => {
-        this.withinOwners(target, (view, targetCtx) => {
-          view.pushEvent("click", target, targetCtx, phxEvent, this.eventMeta("click", e, target))
+        this.withinOwners(target, view => {
+          JS.exec("click", phxEvent, view, target, ["push", {data: this.eventMeta("click", e, target)}])
         })
       })
     }, capture)
   }
 
+  dispatchClickAway(e){
+    let binding = this.binding("click-away")
+    DOM.all(document, `[${binding}]`, el => {
+      if(!(el.isSameNode(e.target) || el.contains(e.target))){
+        this.withinOwners(e.target, view => {
+          let phxEvent = el.getAttribute(binding)
+          JS.exec("click", phxEvent, view, e.target, ["push", {data: this.eventMeta("click", e, e.target)}])
+        })
+      }
+    })
+  }
+
   bindNav(){
     if(!Browser.canPushState()){ return }
     if(history.scrollRestoration){ history.scrollRestoration = "manual" }
@@ -563,18 +600,20 @@ export default class LiveSocket {
       let {type, id, root, scroll} = event.state || {}
       let href = window.location.href
 
-      if(this.main.isConnected() && (type === "patch" && id === this.main.id)){
-        this.main.pushLinkPatch(href, null)
-      } else {
-        this.replaceMain(href, null, () => {
-          if(root){ this.replaceRootHistory() }
-          if(typeof(scroll) === "number"){
-            setTimeout(() => {
-              window.scrollTo(0, scroll)
-            }, 0) // the body needs to render before we scroll.
-          }
-        })
-      }
+      this.requestDOMUpdate(() => {
+        if(this.main.isConnected() && (type === "patch" && id === this.main.id)){
+          this.main.pushLinkPatch(href, null)
+        } else {
+          this.replaceMain(href, null, () => {
+            if(root){ this.replaceRootHistory() }
+            if(typeof(scroll) === "number"){
+              setTimeout(() => {
+                window.scrollTo(0, scroll)
+              }, 0) // the body needs to render before we scroll.
+            }
+          })
+        }
+      })
     }, false)
     window.addEventListener("click", e => {
       let target = closestPhxBinding(e.target, PHX_LIVE_LINK)
@@ -586,16 +625,26 @@ export default class LiveSocket {
       e.preventDefault()
       if(this.pendingLink === href){ return }
 
-      if(type === "patch"){
-        this.pushHistoryPatch(href, linkState, target)
-      } else if(type === "redirect"){
-        this.historyRedirect(href, linkState)
-      } else {
-        throw new Error(`expected ${PHX_LIVE_LINK} to be "patch" or "redirect", got: ${type}`)
-      }
+      this.requestDOMUpdate(() => {
+        if(type === "patch"){
+          this.pushHistoryPatch(href, linkState, target)
+        } else if(type === "redirect"){
+          this.historyRedirect(href, linkState)
+        } else {
+          throw new Error(`expected ${PHX_LIVE_LINK} to be "patch" or "redirect", got: ${type}`)
+        }
+      })
     }, false)
   }
 
+  dispatchEvent(event, payload = {}){
+    DOM.dispatchEvent(window, `phx:${event}`, payload)
+  }
+
+  dispatchEvents(events){
+    events.forEach(([event, payload]) => this.dispatchEvent(event, payload))
+  }
+
   withPageLoading(info, callback){
     DOM.dispatchEvent(window, "phx:page-loading-start", info)
     let done = () => DOM.dispatchEvent(window, "phx:page-loading-stop", info)
@@ -650,7 +699,9 @@ export default class LiveSocket {
       if(!phxEvent){ return }
       e.preventDefault()
       e.target.disabled = true
-      this.withinOwners(e.target, (view, targetCtx) => view.submitForm(e.target, targetCtx, phxEvent))
+      this.withinOwners(e.target, view => {
+        JS.exec("submit", phxEvent, view, e.target, ["push", {}])
+      })
     }, false)
 
     for(let type of ["change", "input"]){
@@ -668,12 +719,12 @@ export default class LiveSocket {
         DOM.putPrivate(input, "prev-iteration", {at: currentIterations, type: type})
 
         this.debounce(input, e, () => {
-          this.withinOwners(input.form, (view, targetCtx) => {
+          this.withinOwners(input.form, view => {
             DOM.putPrivate(input, PHX_HAS_FOCUSED, true)
             if(!DOM.isTextualInput(input)){
               this.setActiveElement(input)
             }
-            view.pushInput(input, targetCtx, null, phxEvent, e.target)
+            JS.exec("change", phxEvent, view, input, ["push", {_target: e.target.name}])
           })
         })
       }, false)
@@ -700,3 +751,45 @@ export default class LiveSocket {
     })
   }
 }
+
+class TransitionSet {
+  constructor(){
+    this.transitions = new Set()
+    this.pendingOps = []
+    this.reset()
+  }
+
+  reset(){
+    this.transitions.forEach(timer => {
+      cancelTimeout(timer)
+      this.transitions.delete(timer)
+    })
+    this.flushPendingOps()
+  }
+
+  after(callback){
+    if(this.size() === 0){
+      callback()
+    } else {
+      this.pushPendingOp(callback)
+    }
+  }
+
+  addTransition(time, onDone){
+    let timer = setTimeout(() => {
+      this.transitions.delete(timer)
+      onDone()
+      if(this.size() === 0){ this.flushPendingOps() }
+    }, time)
+    this.transitions.add(timer)
+  }
+
+  pushPendingOp(op){ this.pendingOps.push(op) }
+
+  size(){ return this.transitions.size }
+
+  flushPendingOps(){
+    this.pendingOps.forEach(op => op())
+    this.pendingOps = []
+  }
+}