Update to use DocumentFragment and eval of scripts

parent b949d328
Pipeline #65025572 passed with stages
in 10 minutes and 40 seconds
......@@ -20,8 +20,12 @@ export class RailsUJSController extends Controller {
* @param {Event} e - a Rails UJS response event
*/
error (e) {
const [, , xhr] = e.detail
e.currentTarget.outerHTML = xhr.response
const [data] = e.detail
let fragment = this._createFragment(data)
for (const script of fragment.querySelectorAll('script')) {
eval(script.innerHTML) // eslint-disable-line no-eval
}
e.currentTarget.replaceWith(fragment)
}
/**
......@@ -39,18 +43,40 @@ export class RailsUJSController extends Controller {
success (e) {
const el = e.currentTarget
const [data] = e.detail
if (!data.body) return null
if (el.dataset.placement) {
const df = this._documentFragment(data)
if (el.dataset.placement === 'append') this._append(el, df)
else if (el.dataset.placement === 'prepend') this._prepend(el, df)
else if (el.dataset.placement === 'replace') this._replace(el, df)
else if (el.dataset.placement === 'replace_inner') this._replaceInner(el, e)
if (!data.body || !el.dataset.placement) return
const df = this._documentFragment(data)
for (const script of df.querySelectorAll('script')) {
eval(script.innerHTML) // eslint-disable-line no-eval
}
this._handleContent(el, df, el.dataset.placement)
}
// Private methods
/**
* @private
* @param {DOMElement} el
* @param {DocumentFragment} fragment
* @param {String} placement
*/
_handleContent (el, fragment, placement) {
switch (placement) {
case 'append':
this._append(el, fragment)
break
case 'prepend':
this._prepend(el, fragment)
break
case 'replace':
this._replace(el, fragment)
break
case 'replace_inner':
this._replaceInner(el, fragment)
break
}
}
/**
* @private
* @param {DOMElement} element
......@@ -70,7 +96,7 @@ export class RailsUJSController extends Controller {
}
/**
* @private
* @prvate
* @param {DOMElement} element
* @param {DocumentFragment} fragment
*/
......@@ -83,10 +109,10 @@ export class RailsUJSController extends Controller {
* @param {DOMElement} el
* @param {Event} e - Rails UJS event
*/
_replaceInner (el, e) {
const element = this._target(el)
const [, , xhr] = e.detail
element.innerHTML = xhr.responseText
_replaceInner (el, fragment) {
let target = this._target(el)
target.innerHTML = ''
target.appendChild(fragment)
}
/**
......@@ -95,9 +121,18 @@ export class RailsUJSController extends Controller {
* @returns DocumentFragment
*/
_documentFragment (data) {
const df = document.createDocumentFragment()
while (data.body.firstChild) df.appendChild(data.body.firstChild)
return df
var container
if (typeof data === 'string') {
container = document.createElement('div')
container.innerHTML = data
} else {
container = data
}
const fragment = document.createDocumentFragment()
while (container.firstChild) { fragment.appendChild(container.firstChild) }
return fragment
}
/**
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment