From 2ef2a8f7a3eb0bde53f82542765e71541c1785a5 Mon Sep 17 00:00:00 2001 From: Jeroen van Dijk Date: Wed, 26 May 2021 17:26:03 +0300 Subject: [PATCH] Add Bookmarklet example --- resources/public/bookmarklet.html | 45 ++++++++++++++++++++ resources/public/cljs/bookmarklet.cljs | 59 ++++++++++++++++++++++++++ 2 files changed, 104 insertions(+) create mode 100644 resources/public/bookmarklet.html create mode 100644 resources/public/cljs/bookmarklet.cljs diff --git a/resources/public/bookmarklet.html b/resources/public/bookmarklet.html new file mode 100644 index 0000000..b637cc1 --- /dev/null +++ b/resources/public/bookmarklet.html @@ -0,0 +1,45 @@ + + + + + + + + + + + + + + + + +

Scittle Bookmarklet creator

+

What is Scittle?

+

Read the main page for more details.

+

The bookmarklet editor

+
+

The following source was loaded and interpreted + from cljs/bookmarklet.cljs using the + script tag: + 


+<script type="application/x-scittle" src="cljs/bookmarklet.cljs"></script>
+
+
+

+
+ + + + + + diff --git a/resources/public/cljs/bookmarklet.cljs b/resources/public/cljs/bookmarklet.cljs new file mode 100644 index 0000000..cf5d168 --- /dev/null +++ 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")) \ No newline at end of file