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

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

@ -393,49 +393,34 @@
:subvis [subvis/render-subvis traces :subvis [subvis/render-subvis traces
[:div.panel-content-scrollable]])]]]))}))) [:div.panel-content-scrollable]])]]]))})))
(defn panel-shadow (defn panel-div []
"Attaches the panel to the dom and returns the shadow root for rendering. (let [id "--re-frame-trace--"
panel (.getElementById js/document id)]
Creates a re-frame-trace div on the body of the document (if panel
and attaches a shadow root, returning the root. panel
Returns an existing shadow root if one exists." (let [new-panel (.createElement js/document "div")]
[] (.setAttribute new-panel "id" id)
(let [id "--re-frame-trace--root"] (.appendChild (.-body js/document) new-panel)
(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"}))]
(js/window.focus new-panel) (js/window.focus new-panel)
shadow)))) new-panel))))
(defn tracing-div (defn inject-styles []
"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--" (let [id "--re-frame-trace-styles--"
styles-el (.querySelector shadow-root (str "#" id)) styles-el (.getElementById js/document id)
new-styles-el (.createElement js/document "style") new-styles-el (.createElement js/document "style")
new-styles styles/panel-styles] new-styles styles/panel-styles]
(.setAttribute new-styles-el "id" id) (.setAttribute new-styles-el "id" id)
(set! (.-innerHTML new-styles-el) new-styles) (-> new-styles-el
(.-innerHTML)
(set! new-styles))
(if styles-el (if styles-el
(.replaceChild (.-parentNode styles-el) new-styles-el styles-el) (-> styles-el
(.appendChild shadow-root new-styles-el)) (.-parentNode)
styles-el)) (.replaceChild new-styles-el styles-el))
(let []
(.appendChild (.-head js/document) new-styles-el)
new-styles-el))))
(defn inject-devtools! [] (defn inject-devtools! []
(let [shadow-root (panel-shadow) (inject-styles)
div (tracing-div shadow-root)] (r/render [devtools] (panel-div)))
(inject-styles shadow-root)
(r/render [devtools] 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>