Merge branch 'main' of github.com:borkdude/scittle into main
This commit is contained in:
Michiel Borkent
commit
5db898c9f1
45
resources/public/bookmarklet.html
Normal file
45
resources/public/bookmarklet.html
Normal file
|
|
@ -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">
|
||||||
|
<script type="application/x-scittle" src="cljs/bookmarklet.cljs"></script>
|
||||||
|
|
||||||
|
</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>
|
||||||
70
resources/public/cljs/bookmarklet.cljs
Normal file
70
resources/public/cljs/bookmarklet.cljs
Normal file
|
|
@ -0,0 +1,70 @@
|
||||||
|
(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(){"
|
||||||
|
"var runCode = function() {
|
||||||
|
try {
|
||||||
|
scittle.core.eval_string('" code "')
|
||||||
|
} catch (error) {
|
||||||
|
console.log('Error in code', error);
|
||||||
|
alert('Error running code, see console')
|
||||||
|
}
|
||||||
|
};"
|
||||||
|
"if(typeof scittle === 'undefined'){"
|
||||||
|
(append-tag :script {:src "https://borkdude.github.io/scittle/js/scittle.js"
|
||||||
|
:onerror "function(){alert('Error loading ' + this.src)}"
|
||||||
|
:onload (str "runCode")
|
||||||
|
})
|
||||||
|
"} else {
|
||||||
|
runCode() }"
|
||||||
|
"})();"))
|
||||||
|
|
||||||
|
(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"))
|
||||||
Loading…
Reference in a new issue