Add append, prepend and replaceWith operations

stimulusreflex · Dec 27, 2020 · 0e4e2b6 · 0e4e2b6
1 parent 126dcb1
commit 0e4e2b6
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/javascript/cable_ready.js b/javascript/cable_ready.js
@@ -177,6 +177,39 @@ const DOMOperations = {
     dispatch(element, 'cable-ready:after-insert-adjacent-text', detail)
   },
 
+  append: detail => {
+    activeElement = document.activeElement
+    const { element, html, focusSelector } = detail
+    dispatch(element, 'cable-ready:before-append', detail)
+    const temp = document.createElement('div')
+    temp.innerHTML = html
+    element.append(temp.firstChild)
+    assignFocus(focusSelector)
+    dispatch(element, 'cable-ready:after-append', detail)
+  },
+
+  prepend: detail => {
+    activeElement = document.activeElement
+    const { element, html, focusSelector } = detail
+    dispatch(element, 'cable-ready:before-prepend', detail)
+    const temp = document.createElement('div')
+    temp.innerHTML = html
+    element.prepend(temp.firstChild)
+    assignFocus(focusSelector)
+    dispatch(element, 'cable-ready:after-prepend', detail)
+  },
+
+  replaceWith: detail => {
+    activeElement = document.activeElement
+    const { element, html, focusSelector } = detail
+    dispatch(element, 'cable-ready:before-replace-with', detail)
+    const temp = document.createElement('div')
+    temp.innerHTML = html
+    element.replaceWith(temp.firstChild)
+    assignFocus(focusSelector)
+    dispatch(element, 'cable-ready:after-replace-with', detail)
+  },
+
   remove: detail => {
     activeElement = document.activeElement
     const { element, focusSelector } = detail

diff --git a/lib/cable_ready/channels.rb b/lib/cable_ready/channels.rb
@@ -15,6 +15,7 @@ def initialize
       @channels = {}
       @operations = {}
       %i[
+        append
         add_css_class
         clear_storage
         console_log
@@ -25,11 +26,13 @@ def initialize
         morph
         notification
         outer_html
+        prepend
         push_state
         remove
         remove_attribute
         remove_css_class
         remove_storage_item
+        replace_with
         set_attribute
         set_cookie
         set_dataset_property