Add with-view

Author: LeifAndersen

CHANGELOG.md

@@ -1,3 +1,7 @@
+# 0.2.5
+
+* Add `with-view`, to open up a run-time html view
+
 # 0.2.4
 
 * Update to react 18

package.json

@@ -1,6 +1,6 @@
 {
   "name": "interactive-syntax",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/LeifAndersen/interactive-syntax-clojure.git"

src/injectable/core.inject

@@ -5,6 +5,7 @@
 (def println private/println)
 (def css private/css)
 (def render-visr private/render-visr)
+(def with-view private/with-view)
 (defmacro defvisr [name & props]
   (let [{:keys [render
                 elaborate

src/interactive_syntax/core.cljs

@@ -1047,7 +1047,8 @@
                           runner
                           running?
                           insert-visr!
-                          fs]
+                          fs
+                          app-pane]
                    :as db}]
   (let [new-file (if @file-changed
                    #(swap! menu conj [:confirm-save :new])
@@ -1077,7 +1078,12 @@
         print-buffer #(swap! menu conj :print)
         run+pause (fn []
                     (reset! output #queue [])
-                    (env/eval-buffer db))]
+                    (env/eval-buffer db))
+        stop (fn []
+               (reset! app-pane false))
+        fullscreen (fn []
+                     (-> js/document (.getElementById "internalAppContainer")
+                         (.requestFullscreen)))]
     [:div
      [:div {:class-name "d-block d-md-none"}
       [:> Row {:class-name "align-items-center flex-nowrap"
@@ -1118,12 +1124,16 @@
                 :style {:padding-right 0}}
         [:> Dropdown {:as ButtonGroup
                       :size "sm"}
+         (when @app-pane
+           [:> Button {:on-click fullscreen
+                       :variant "warning"}
+            strings/FULLSCREEN])
          [:> Button {:variant (if @running? "warning" "success")
                      :on-click run+pause}
           (if @running? strings/PAUSE strings/RUN)]
          [:> (oget Dropdown :Toggle) {:split true}]
          [:> (oget Dropdown :Menu)
-          [:> (oget Dropdown :Item) strings/STOP]
+          [:> (oget Dropdown :Item) {:on-click stop} strings/STOP]
           [:> (oget Dropdown :Item) {:on-click do-insert-visr}
            strings/INSERT-VISR]]]]]]
      [:div {:className "d-none d-md-block"}
@@ -1160,13 +1170,18 @@
        [:> Col {:xs "auto"
                 :style {:paddingRight 0}}
         [:> ButtonGroup
+         (when @app-pane
+           [:> Button {:on-click fullscreen
+                       :variant "warning"}
+            strings/FULLSCREEN])
          [:> Button {:on-click do-insert-visr
                      :variant "info"}
           strings/INSERT-VISR]
          [:> Button {:on-click run+pause
                      :variant (if @running? "warning" "success")}
           (if @running? strings/PAUSE strings/RUN)]
-         [:> Button {:variant "danger"} strings/STOP]]]]]]))
+         [:> Button {:on-click stop
+                     :variant "danger"} strings/STOP]]]]]]))
 
 (def exclude-autocomplete-keys
   {8 "backspace", 9 "tab", 13 "enter", 16 "shift", 17 "ctrl",
@@ -1443,7 +1458,7 @@
 ;; Views
 
 (defn home-page [{{:keys [orientation]} :options
-                  :keys [fs buffers output version menu split]
+                  :keys [fs buffers output version menu split app-pane]
                   :as db}
                  & [{editor-ref :editor
                      editor-reset-ref :editor-reset
@@ -1516,11 +1531,21 @@
         [:> SplitPane {:split @orientation
                        :on-change #(reset! split (aget % 0))}
          [:> Pane {:initialSize @split
-                   :style [:height "100%"]}
+                   :style {:height "100%"}}
           [editor-view db {:editor-reset editor-reset-ref
                            :editor editor-ref
                            :visr-run visr-run-ref}]]
-         [result-view db repl-ref]]]
+         (if @app-pane
+           [:> SplitPane {:split (utils/swap-orientation @orientation)}
+            [:> Pane {:initialSize 1}
+             [result-view db repl-ref]]
+            [:div {:id "internalAppContainer"
+                   :style {:height "100%"
+                           :width "100%"
+                           :background-color "white"}}
+             [:div {:id "internalApp"}
+              "Open Your Heart!"]]]
+           [result-view db repl-ref])]]
        [:div {:style {:flex "1 1 auto"
                       :overflow "auto"
                       :height "100%"

src/interactive_syntax/db.cljs

@@ -179,7 +179,8 @@
                                  ::split
                                  ::ns
                                  ::mode
-                                 ::repl]))
+                                 ::repl
+                                 ::app-pane]))
 
 (s/def ::buffers (s/+ ::buffer))
 (s/def ::current nat-int?)
@@ -258,6 +259,7 @@
              :persist-test ""
              :temp "")
     :output ""
+    :app-pane false
     :mode false
     :split "50%"
     :cursor nil
@@ -325,6 +327,7 @@
               :auth (->DBAtom backed-db [:auth])
               :input (->DBAtom backed-db [:current :input])
               :output (atom "") ;;(->DBAtom backed-db [:current :output])
+              :app-pane (atom false) ;; (->DBAtom backed-db [:current :app-pane])
               :buffer-mode (->DBAtom backed-db [:current :mode])
               :ns (->DBAtom backed-db [:current :ns])
               :repl (atom [])

src/interactive_syntax/env.cljs

@@ -756,7 +756,7 @@
 (def make-reset-editors-cache editor/make-reset-editors-cache)
 (defn reset-editors! [source set-text editor instances cache
                       codemirror-options
-                      {{:keys [show-editors visr-default sandbox]} :options
+                      {{:keys [show-editors sandbox]} :options
                        :keys [fs deps] :as db}
                       cb & [{visr-run-ref :visr-run
                              :as editor-options}]]

src/interactive_syntax/stdlib.cljs

@@ -90,6 +90,18 @@
                  (reset! main @buff))
                (or timeout-limit 1000))))))
 
+(defn with-view [{:keys [app-pane]
+                  :as db}
+                 cb & extras]
+  (reset! app-pane true)
+  (js/setTimeout (fn []
+                   (when (some (partial = :fullscreen) extras)
+                     (-> js/document
+                         (.getElementById "internalAppContainer")
+                         (.requestFullscreen)))
+                   (cb (.getElementById js/document "internalApp"))) 0)
+  nil)
+
 (defn parse-defvisr [name stx]
   (let [this (gensym 'this)]
     (loop [props {}
@@ -250,6 +262,7 @@
                         :buffer_writes buffer-writes
                         :parse_defvisr parse-defvisr
                         :render_visr (partial render-visr db)
+                        :with_view (partial with-view db)
                         :css css}}
             :reagent {:core reagent.core
                       :dom reagent.dom}
@@ -290,6 +303,7 @@
                               'css 'visr.private/css
                               'render-visr 'visr.private/render-visr
                               'parse-defvisr 'visr.private/parse-defvisr
+                              'with-view 'visr.private/with-view
                               'buffer-writes 'visr.private/buffer-writes})
             (state-injection 'cljs.analyzer (ns-publics 'cljs.analyzer))
             (state-injection 'cljs.analyzer.api (ns-publics 'cljs.analyzer.api))

src/interactive_syntax/strings.cljs

@@ -39,6 +39,7 @@
 (def RUN "Run")
 (def PAUSE "Pause")
 (def STOP "Stop")
+(def FULLSCREEN "Fullscreen")
 
 (def OPTIONS-MENU "Options Menu")
 (def SPLIT "Split")

src/interactive_syntax/utils.cljs

@@ -33,3 +33,6 @@
     (let [node (createRoot node)]
       (.render node (r/as-element element)))
     (d/render element node)))
+
+(defn swap-orientation [orientation]
+  (if (= orientation "horizontal") "vertical" "horizontal"))