Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add append, prepend and replace operations #90

Merged
merged 9 commits into from
Jan 17, 2021
Merged

Add append, prepend and replace operations #90

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
0e4e2b6
Add `append`, `prepend` and `replaceWith` operations
marcoroth Dec 27, 2020
2aa7bc9
use `<template>`'s rather than `<div>`'s
marcoroth Dec 27, 2020
2319db1
reimplement append/prepend and replace
marcoroth Jan 1, 2021
8faab6e
rename replace_with to replace
marcoroth Jan 1, 2021
1e8fb5b
Add `append`, `prepend` and `replaceWith` operations
marcoroth Dec 27, 2020
e11ca84
Merge branch 'append-prepend-replace-operations' into marcoroth/appen…
marcoroth Jan 17, 2021
22e5cbe
prettier-standard
marcoroth Jan 17, 2021
c8be167
prettier-standard
marcoroth Jan 17, 2021
aa91268
Merge pull request #1 from leastbad/marcoroth/append-prepend-replace-…
marcoroth Jan 17, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions javascript/cable_ready.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,6 +177,35 @@ 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)
element.insertAdjacentHTML('beforeend', html)
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)
element.insertAdjacentHTML('afterbegin', html)
assignFocus(focusSelector)
dispatch(element, 'cable-ready:after-prepend', detail)
},

replace: detail => {
activeElement = document.activeElement
const { element, html, focusSelector } = detail
dispatch(element, 'cable-ready:before-replace', detail)
const parent = element.parentElement
const ordinal = Array.from(parent.children).indexOf(element)
element.outerHTML = html
assignFocus(focusSelector)
dispatch(parent.children[ordinal], 'cable-ready:after-replace', detail)
},

remove: detail => {
activeElement = document.activeElement
const { element, focusSelector } = detail
Expand Down
3 changes: 3 additions & 0 deletions lib/cable_ready/channels.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ def initialize
@channels = {}
@operations = {}
%i[
append
add_css_class
clear_storage
console_log
Expand All @@ -25,11 +26,13 @@ def initialize
morph
notification
outer_html
prepend
push_state
remove
remove_attribute
remove_css_class
remove_storage_item
replace
set_attribute
set_cookie
set_dataset_property
Expand Down