Merge pull request #1 from jeroenvandijk/bookmarklet

Add Bookmarklet example
2021-05-26 16:29:17 +02:00 · 2021-05-26 16:29:17 +02:00 · 8e1224cf07
parent 53a91f5fac 2ef2a8f7a3
commit 8e1224cf07
2 changed files with 104 additions and 0 deletions
--- a/resources/public/bookmarklet.html
+++ b/resources/public/bookmarklet.html
@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="https://borkdude.github.io/scittle/js/scittle.js" type="application/javascript"></script>
+
+    <script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
+    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
+    <script src="https://borkdude.github.io/scittle/js/scittle.reagent.js" type="application/javascript"></script>
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js" type="text/javascript"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/clojure.min.js" type="text/javascript"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/zenburn.min.css" integrity="sha512-JPxjD2t82edI35nXydY/erE9jVPpqxEJ++6nYEoZEpX2TRsmp2FpZuQqZa+wBCen5U16QZOkMadGXHCfp+tUdg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+  </head>
+  <body>
+    <h1>Scittle Bookmarklet creator</h1>
+    <h2>What is Scittle?</h2>
+    <p>Read <a href="index.html">the main page</a> for more details.</p>
+    <h2>The bookmarklet editor</h2>
+    <div id="app"></div>
+    <p>The following source was loaded and interpreted
+ from <a href="cljs/bookmarklet.cljs"><tt>cljs/bookmarklet.cljs</tt></a> using the
+ script tag:
+      <pre><code class="html">
+&lt;script type=&quot;application/x-scittle&quot; src=&quot;cljs/bookmarklet.cljs&quot;&gt;&lt;/script&gt;
+
+</code></pre>
+    </p>
+    <pre><code class="language-clojure" id="cljs"></code></pre>
+    <script type="application/x-scittle">
+      (defn set-text [progress-event]
+        (let [elt (.getElementById js/document "cljs")]
+          (set! (.-innerHTML elt) (.. progress-event -srcElement -responseText))
+          (.highlightAll js/hljs)))
+      (def oreq (js/XMLHttpRequest.))
+      (.addEventListener oreq "load" set-text)
+      (.open oreq "GET" "cljs/bookmarklet.cljs")
+      (.send oreq)
+    </script>
+    
+    <script type="application/x-scittle" src="cljs/bookmarklet.cljs"></script>
+    
+  </body>
+</html>
--- a/resources/public/cljs/bookmarklet.cljs
+++ b/resources/public/cljs/bookmarklet.cljs
@ -0,0 +1,59 @@
+(ns bookmarklet
+  (:require [reagent.core :as r]
+            [reagent.dom :as rdom]))
+
+(defn append-tag [tag {:keys [body onload onerror] :as attributes}]
+  (str "var s=document.createElement('" (name tag) "');"
+       (clojure.string/join ";" (map (fn [[k v]] (str "s.setAttribute('" (name k) "','" (name v) "')")) (dissoc attributes :body :onload :onerror)))
+       (when body
+         (str ";s.innerText=" body))
+       (when onload
+         (str ";s.onload=" onload))
+       (when onerror
+         (str ";s.onerror=" onerror))
+       ";document.body.appendChild(s);"))
+
+(defn append-script-tag [url]
+  (append-tag :script {:type "application/javascript" :src url}))
+
+(defn bookmarklet-href [code]
+  (str "javascript:(function(){"
+       (append-tag :script {:src "https://borkdude.github.io/scittle/js/scittle.js"
+                            :onerror "function(){alert('Error loading ' + this.src)}"
+                            :onload (str "function(){scittle.core.eval_string('" code "')}")
+                            })
+       "})();"))
+
+(defn workspace []
+  (let [value (str "; This is the code of your bookmarklet\n"
+                   (pr-str '(js/alert "Hello")))
+        *code (r/atom value)
+        bookmark-name "Bookmark"
+        *bookmark-name (r/atom bookmark-name)]
+        
+   [:div  
+     [:input {:type "text" 
+              :placeholder bookmark-name 
+              :on-change (fn [e] 
+                           (let [v (.. e -target -value)]
+                             (reset! *bookmark-name 
+                                     (if (clojure.string/blank? v)
+                                         bookmark-name
+                                         v))))}]
+     [:br]       
+     [:textarea {:rows 10 :cols 80
+                 :on-change (fn [e] (reset! *code (.. e -target -value)))}
+                value]
+     [:br]
+     [:br]
+     "Click the link below"[:br]
+     "or"[:br]
+     "Drag the link to the bookmarks bar" [:br]
+     [(fn []
+        (let [sanitized (->> (clojure.string/split-lines @*code) (remove #(re-find #"\s*;"%)) (clojure.string/join "\n"))]
+          (js/console.log "Loaded", sanitized)
+          [(fn [] [:a {:href (bookmarklet-href sanitized)} @*bookmark-name])]              
+          
+          )) *code]]))
+
+(rdom/render [workspace] (.getElementById js/document "app"))