Remove Lucuma. Write Webcomponent code manually.

* Remove `shadowRoot` * Reason: React does not bind events to the correct container inside a webcomponent, so events would not bubble * See: facebook/react#1877 * Note: Lucuma 0.5.0 will remove support for shadowRoot!
200ok-ch · Jun 21, 2015 · e0afcd6 · e0afcd6
1 parent dc3af47
commit e0afcd6
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 24 deletions.
diff --git a/project.clj b/project.clj
@@ -6,7 +6,6 @@
 
   :dependencies [[org.clojure/clojure "1.6.0"]
                  [org.clojure/clojurescript "0.0-3211"]
-                 [lucuma "0.3.0"]
                  ;[cljsjs/document-register-element "0.2.1-0"]
                  [org.omcljs/om "0.8.8"]
                  [org.clojure/core.async "0.1.346.0-17112a-alpha"]]

diff --git a/resources/public/index.html b/resources/public/index.html
@@ -3,16 +3,17 @@
   <head>
     <link href="css/style.css" rel="stylesheet" type="text/css">
 
-    <script src="polymer/components/bower_components/webcomponentsjs/ShadowDOM.min.js"></script>
     <script src="polymer/components/bower_components/webcomponentsjs/webcomponents.min.js"></script>
 
   </head>
   <body>
     <div id="app">
 
-      <pdf-js src="fixtures/presentation.pdf" height="480" width="640"></pdf-js>
+      <x-pdf-component src="fixtures/presentation.pdf" height="480" width="640"></x-pdf-component>
 
-      <div id="om-testing"></div>
+      <div id="om-testing">
+        <div></div>
+      </div>
 
       <canvas id="the-canvas"></canvas>
 

diff --git a/src/pdfjs_component/core.cljs b/src/pdfjs_component/core.cljs
@@ -1,7 +1,6 @@
 (ns ^:figwheel-always pdfjs_component.core
   (:require-macros [cljs.core.async.macros :refer [go]])
-  (:require [lucuma :as l :refer-macros [defwebcomponent]]
-            [om.core :as om]
+  (:require [om.core :as om]
             [om.dom :as dom]
             [cljs.core.async :refer [put! chan <! timeout]]
             [pdfjs]))
@@ -10,27 +9,30 @@
 
 (defonce app-state (atom {:pdf_url nil
                           :navigation {
-                                       :pdf_page_count [0]}
+                                       :pdf_page_count [0]
+                                       :click_count [0]}
                           }))
 
 (def canvas-chan (chan))
 
 ;; Webcomponent
-(defwebcomponent pdf-js
-  :document "<div>initial</div>"
-  :on-created (fn[elem]
-                (swap! app-state update-in [:pdf_url] (fn[] (.getAttribute elem "src")))
-                (swap! app-state update-in [:pdf_height] (fn[] (.getAttribute elem "height")))
-                (swap! app-state update-in [:pdf_width] (fn[] (.getAttribute elem "width")))))
-(l/register pdf-js)
+(defonce PDFComponent (.registerElement js/document "x-pdf-component"))
+(let [component (PDFComponent.)]
+  (.appendChild (.-body js/document) component))
 
 ;; OM Component
 (defn pdf-navigation-view [cursor owner]
   (reify
     om/IRender
     (render [this]
-      (dom/span #js {:className "pageCount"}
-                (str "pages: " (get-in cursor [:pdf_page_count 0]))))))
+      (dom/div nil
+               (dom/span nil
+                         (str "Click count: " (get-in cursor [:click_count 0])))
+               (dom/button #js {:onClick (fn[e]
+                                           (om/transact! cursor [:click_count 0] inc))}
+                           "click me!")
+               (dom/span #js {:className "pageCount"}
+                         (str "pages: " (get-in cursor [:pdf_page_count 0])))))))
 
 (defn pdf-component-view [cursor owner]
   (reify
@@ -50,15 +52,23 @@
 
 (defn attach-om-root []
   (om/root pdf-component-view app-state
-           {:target (.. js/document (querySelector "pdf-js") -shadowRoot (querySelector "div"))}))
+           {:target (.. js/document (querySelector "x-pdf-component"))}))
 
-;(defn is-available? [elem]
-;  (when (nil? (.querySelector js/document elem))
-;    (js/setTimeout (fn[] (is-available? elem)) 10)
-;  true))
+(defn get-attr[attr]
+  (.. (.querySelector js/document "x-pdf-component") (getAttribute attr)))
 
-; TODO: This works, but should be improved with something like is-available?
-(js/setTimeout (fn[] (attach-om-root)) 250)
+
+; TODO: This works, but there is a callback from Polymer that tells when the
+; component is ready!
+(js/setTimeout
+  (fn[]
+    ; TODO: This could be done in the .createdCallback handler when registering
+    ; the web-component
+    (swap! app-state update-in [:pdf_height] (fn[] (get-attr "height")))
+    (swap! app-state update-in [:pdf_width] (fn[] (get-attr "width")))
+    (swap! app-state update-in [:pdf_url] (fn[] (get-attr "src")))
+    (attach-om-root)
+    ) 250)
 
 ;; PDFjs
 (defn render-page [pdf num]
@@ -68,7 +78,7 @@
                  viewport (.getViewport page 1)
                  scale (/ desiredWidth (.-width viewport))
                  scaledViewport (.getViewport page scale)
-                 canvas (.. js/document (querySelector "pdf-js") -shadowRoot (querySelector "canvas"))
+                 canvas (.. js/document (querySelector "x-pdf-component") (querySelector "canvas"))
                  context (.getContext canvas "2d")
                  height (.-height viewport)
                  width (.-width viewport)