status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Revert "Switch re-frame-trace to render into Shadow DOM" 

Because it doesn't actually work yet.

This reverts commit bab881ee75.

Relates to https://github.com/Day8/re-frame-trace/issues/44
This commit is contained in:
Daniel Compton 2017-10-20 14:04:59 +13:00
parent bab881ee75
commit 05656af0b9
2 changed files with 23 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/day8/re_frame/trace.cljs
View File

@ -393,49 +393,34 @@
:subvis [subvis/render-subvis traces
[:div.panel-content-scrollable]])]]]))})))
(defn panel-shadow
"Attaches the panel to the dom and returns the shadow root for rendering.
Creates a re-frame-trace div on the body of the document
and attaches a shadow root, returning the root.
Returns an existing shadow root if one exists."
[]
(let [id "--re-frame-trace--root"]
(if-let [panel (.getElementById js/document id)]
(.-shadowRoot panel)
(let [new-panel (.createElement js/document "div")
_ (.setAttribute new-panel "id" id)
_ (.appendChild (.-body js/document) new-panel)
shadow (.attachShadow new-panel (clj->js {:mode "open"}))]
(defn panel-div []
(let [id "--re-frame-trace--"
panel (.getElementById js/document id)]
(if panel
panel
(let [new-panel (.createElement js/document "div")]
(.setAttribute new-panel "id" id)
(.appendChild (.-body js/document) new-panel)
(js/window.focus new-panel)
shadow))))
new-panel))))
(defn tracing-div
"Returns a div inside the shadow-root that can be used for rendering into with React/Reagent.
Creates it if it does not exist."
[shadow-root]
(let [id "--re-frame-trace--"]
(if-let [div (.querySelector shadow-root (str "#" id))]
div
(let [new-div (.createElement js/document "div")]
(.setAttribute new-div "id" id)
(.appendChild shadow-root new-div)
new-div))))
(defn inject-styles [shadow-root]
(let [id "--re-frame-trace-styles--"
styles-el (.querySelector shadow-root (str "#" id))
(defn inject-styles []
(let [id "--re-frame-trace-styles--"
styles-el (.getElementById js/document id)
new-styles-el (.createElement js/document "style")
new-styles styles/panel-styles]
(.setAttribute new-styles-el "id" id)
(set! (.-innerHTML new-styles-el) new-styles)
(-> new-styles-el
(.-innerHTML)
(set! new-styles))
(if styles-el
(.replaceChild (.-parentNode styles-el) new-styles-el styles-el)
(.appendChild shadow-root new-styles-el))
styles-el))
(-> styles-el
(.-parentNode)
(.replaceChild new-styles-el styles-el))
(let []
(.appendChild (.-head js/document) new-styles-el)
new-styles-el))))
(defn inject-devtools! []
(let [shadow-root (panel-shadow)
div (tracing-div shadow-root)]
(inject-styles shadow-root)
(r/render [devtools] div)))
(inject-styles)
(r/render [devtools] (panel-div)))

34
test/day8/re_frame/trace/shadow.html
View File

@ -1,34 +0,0 @@
<html>
<head></head>
<body>
<style>
html, body {
font-family: Segoe UI, Roboto, sans-serif;
font-size: 14px;
font-weight: 400;
color: rgba(68, 68, 68, 1.0);
letter-spacing: 0.002em;
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<!--<div style="all: unset" id="hostElement"></div>-->
<script>
// Create shadow DOM
var host = document.createElement("div");
host.setAttribute("id", "hostElement");
host.setAttribute("style", "all: initial");
document.body.appendChild(host);
var shadow = document.querySelector('#hostElement')
.attachShadow({mode: 'open'});
// Add some text to shadow DOM
shadow.innerHTML = '<span>Here is some new text</span>';
// Add some CSS to make the text red
shadow.innerHTML += '<style>span { color: red; }</style>';
</script>
</body>
</html>