mirror of
https://github.com/penpot/penpot.git
synced 2025-06-12 03:31:38 +02:00
🔥 Remove view sub application.
This commit is contained in:
Andrey Antukh
parent
648dfdab80
commit
45290441de
21 changed files with 18 additions and 1111 deletions
|
|
@ -211,7 +211,10 @@ gulp.task("watch:main", function() {
|
||||||
gulp.watch([paths.resources + "templates/*.mustache",
|
gulp.watch([paths.resources + "templates/*.mustache",
|
||||||
paths.resources + "locales.json",
|
paths.resources + "locales.json",
|
||||||
paths.resources + "images/**/*"],
|
paths.resources + "images/**/*"],
|
||||||
gulp.series("templates", "dev:copy:images", "dev:copy:icons-sprite"));
|
gulp.series("templates",
|
||||||
|
"dev:copy:images",
|
||||||
|
"dev:copy:templates",
|
||||||
|
"dev:copy:icons-sprite"));
|
||||||
});
|
});
|
||||||
|
|
||||||
gulp.task("watch", gulp.series(
|
gulp.task("watch", gulp.series(
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@
|
||||||
window.uxboxConfig = JSON.parse({{& config }});
|
window.uxboxConfig = JSON.parse({{& config }});
|
||||||
window.uxboxTranslations = JSON.parse({{& translations }});
|
window.uxboxTranslations = JSON.parse({{& translations }});
|
||||||
</script>
|
</script>
|
||||||
<script src="js/cljs_base.js?ts={{& ts}}"></script>
|
|
||||||
<script src="js/main.js?ts={{& ts}}"></script>
|
<script src="js/main.js?ts={{& ts}}"></script>
|
||||||
<script>uxbox.main.init()</script>
|
<script>uxbox.main.init()</script>
|
||||||
</body>
|
</body>
|
||||||
|
|
|
||||||
|
|
@ -1,22 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8" />
|
|
||||||
<meta http-equiv="x-ua-compatible" content="ie=edge" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>UXBOX-view - The Open-Source prototyping tool</title>
|
|
||||||
<link href="/css/view.css?ts={{& ts}}" rel="stylesheet" type="text/css" />
|
|
||||||
<link rel="icon" href="/images/favicon.png" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<section id="app" tabindex="1"></section>
|
|
||||||
<section id="lightbox" tabindex="2"></section>
|
|
||||||
<section id="modal"></section>
|
|
||||||
<section id="loader" tabindex="3"></section>
|
|
||||||
|
|
||||||
<script src="/js/cljs_base.js?ts={{& ts}}"></script>
|
|
||||||
<script src="/js/common.js?ts={{& ts}}"></script>
|
|
||||||
<script src="/js/view.js?ts={{& ts}}"></script>
|
|
||||||
<script>uxbox.view.init()</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns ^:figwheel-hooks uxbox.view
|
|
||||||
(:require
|
|
||||||
[rumext.core :as mx]
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.util.dom :as dom]
|
|
||||||
[uxbox.util.html.history :as html-history]
|
|
||||||
[uxbox.util.i18n :as i18n :refer [tr]]
|
|
||||||
[uxbox.util.router :as rt]
|
|
||||||
[uxbox.view.locales.en :as en]
|
|
||||||
[uxbox.view.locales.fr :as fr]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.ui :as ui]
|
|
||||||
[uxbox.view.ui.lightbox :refer [lightbox]]
|
|
||||||
[uxbox.view.ui.loader :refer [loader]]))
|
|
||||||
|
|
||||||
;; (i18n/update-locales! (fn [locales]
|
|
||||||
;; (-> locales
|
|
||||||
;; (assoc "en" en/locales)
|
|
||||||
;; (assoc "fr" fr/locales))))
|
|
||||||
|
|
||||||
(declare reinit)
|
|
||||||
|
|
||||||
;; (i18n/on-locale-change!
|
|
||||||
;; (fn [new old]
|
|
||||||
;; (println "Locale changed from" old " to " new)
|
|
||||||
;; (reinit)))
|
|
||||||
|
|
||||||
(defn- on-navigate
|
|
||||||
[router path]
|
|
||||||
(let [match (rt/match router path)]
|
|
||||||
(prn "view$on-navigate" path)
|
|
||||||
(cond
|
|
||||||
(nil? match)
|
|
||||||
(prn "TODO 404 view" match)
|
|
||||||
|
|
||||||
:else
|
|
||||||
(st/emit! #(assoc % :route match)))))
|
|
||||||
|
|
||||||
(defn init-ui
|
|
||||||
[]
|
|
||||||
(let [router (rt/init ui/routes)
|
|
||||||
cpath (deref html-history/path)]
|
|
||||||
|
|
||||||
(st/emit! #(assoc % :router router))
|
|
||||||
(add-watch html-history/path ::view #(on-navigate router %4))
|
|
||||||
|
|
||||||
(mf/mount (mf/element ui/app) (dom/get-element "app"))
|
|
||||||
(mf/mount (lightbox) (dom/get-element "lightbox"))
|
|
||||||
(mf/mount (loader) (dom/get-element "loader"))
|
|
||||||
|
|
||||||
(on-navigate router cpath)))
|
|
||||||
|
|
||||||
(def app-sym (.for js/Symbol "uxbox.app"))
|
|
||||||
|
|
||||||
(defn ^:export init
|
|
||||||
[]
|
|
||||||
(unchecked-set js/window app-sym "view")
|
|
||||||
(st/init)
|
|
||||||
(init-ui))
|
|
||||||
|
|
||||||
(defn reinit
|
|
||||||
[]
|
|
||||||
(remove-watch html-history/path ::view)
|
|
||||||
(mf/unmount (dom/get-element "app"))
|
|
||||||
(mf/unmount (dom/get-element "lightbox"))
|
|
||||||
(mf/unmount (dom/get-element "loader"))
|
|
||||||
(init-ui))
|
|
||||||
|
|
||||||
(defn ^:after-load after-load
|
|
||||||
[]
|
|
||||||
(when (= "view" (unchecked-get js/window app-sym))
|
|
||||||
(reinit)))
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,46 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.data.lightbox
|
|
||||||
(:require [beicon.core :as rx]
|
|
||||||
[lentes.core :as l]
|
|
||||||
[potok.core :as ptk]
|
|
||||||
[uxbox.view.store :as st]))
|
|
||||||
|
|
||||||
;; --- Show Lightbox
|
|
||||||
|
|
||||||
(defrecord ShowLightbox [name params]
|
|
||||||
ptk/UpdateEvent
|
|
||||||
(update [_ state]
|
|
||||||
(let [data (merge {:name name} params)]
|
|
||||||
(assoc state :lightbox data))))
|
|
||||||
|
|
||||||
(defn show-lightbox
|
|
||||||
([name]
|
|
||||||
(ShowLightbox. name nil))
|
|
||||||
([name params]
|
|
||||||
(ShowLightbox. name params)))
|
|
||||||
|
|
||||||
;; --- Hide Lightbox
|
|
||||||
|
|
||||||
(defrecord HideLightbox []
|
|
||||||
ptk/UpdateEvent
|
|
||||||
(update [_ state]
|
|
||||||
(dissoc state :lightbox)))
|
|
||||||
|
|
||||||
(defn hide-lightbox
|
|
||||||
[]
|
|
||||||
(HideLightbox.))
|
|
||||||
|
|
||||||
;; --- Direct Call Api
|
|
||||||
|
|
||||||
(defn open!
|
|
||||||
[& args]
|
|
||||||
(st/emit! (apply show-lightbox args)))
|
|
||||||
|
|
||||||
(defn close!
|
|
||||||
[& args]
|
|
||||||
(st/emit! (apply hide-lightbox args)))
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.data.viewer
|
|
||||||
(:require [beicon.core :as rx]
|
|
||||||
[potok.core :as ptk]
|
|
||||||
[uxbox.util.router :as rt]
|
|
||||||
[uxbox.util.data :refer (parse-int)]
|
|
||||||
[uxbox.main.repo :as rp]
|
|
||||||
[uxbox.main.data.projects :as udpj]))
|
|
||||||
|
|
||||||
;; --- Initialize
|
|
||||||
|
|
||||||
(declare load-data)
|
|
||||||
|
|
||||||
(defrecord Initialize [token]
|
|
||||||
ptk/WatchEvent
|
|
||||||
(watch [_ state s]
|
|
||||||
(rx/of (load-data token))))
|
|
||||||
|
|
||||||
(defn initialize
|
|
||||||
"Initialize the viewer state."
|
|
||||||
[token]
|
|
||||||
(Initialize. token))
|
|
||||||
|
|
||||||
;; --- Data Loaded
|
|
||||||
|
|
||||||
(defn- unpack-page
|
|
||||||
"Unpacks packed page object and assocs it to the
|
|
||||||
provided state."
|
|
||||||
[state {:keys [id data] :as page}]
|
|
||||||
(let [shapes (:shapes data)
|
|
||||||
shapes-map (:shapes-map data)
|
|
||||||
page (-> page
|
|
||||||
(dissoc :data)
|
|
||||||
(assoc :shapes shapes))]
|
|
||||||
(-> state
|
|
||||||
(update :shapes merge shapes-map)
|
|
||||||
(update :pages conj page))))
|
|
||||||
|
|
||||||
(defrecord DataLoaded [data]
|
|
||||||
ptk/UpdateEvent
|
|
||||||
(update [_ state]
|
|
||||||
(let [project (dissoc data :pages)
|
|
||||||
get-order #(get-in % [:metadata :order])
|
|
||||||
pages (sort-by get-order (:pages data))]
|
|
||||||
(as-> state $
|
|
||||||
(assoc $ :project project)
|
|
||||||
(assoc $ :pages [])
|
|
||||||
(reduce unpack-page $ pages)))))
|
|
||||||
|
|
||||||
(defn data-loaded
|
|
||||||
[data]
|
|
||||||
(DataLoaded. data))
|
|
||||||
|
|
||||||
;; --- Load Data
|
|
||||||
|
|
||||||
(defrecord LoadData [token]
|
|
||||||
ptk/WatchEvent
|
|
||||||
(watch [_ state stream]
|
|
||||||
#_(->> (rp/req :fetch/project-by-token token)
|
|
||||||
(rx/map :payload)
|
|
||||||
(rx/map data-loaded))))
|
|
||||||
|
|
||||||
(defn load-data
|
|
||||||
[token]
|
|
||||||
(LoadData. token))
|
|
||||||
|
|
||||||
;; --- Select Page
|
|
||||||
|
|
||||||
(defrecord SelectPage [id]
|
|
||||||
ptk/WatchEvent
|
|
||||||
(watch [_ state stream]
|
|
||||||
(let [token (get-in state [:route :params :path :token])]
|
|
||||||
(rx/of (rt/nav :view/viewer {:token token :id id})))))
|
|
||||||
|
|
||||||
(defn select-page
|
|
||||||
[id]
|
|
||||||
(SelectPage. id))
|
|
||||||
|
|
||||||
;; --- Go to Page
|
|
||||||
|
|
||||||
(defrecord GoToPage [id]
|
|
||||||
ptk/WatchEvent
|
|
||||||
(watch [_ state stream]
|
|
||||||
(let [token (get-in state [:route :params :path :token])]
|
|
||||||
(rx/of (rt/nav :view/viewer {:token token :id id})))))
|
|
||||||
|
|
||||||
(defn go-to-page
|
|
||||||
[id]
|
|
||||||
(GoToPage. id))
|
|
||||||
|
|
||||||
;; --- Toggle Flag
|
|
||||||
|
|
||||||
(defrecord ToggleFlag [key]
|
|
||||||
ptk/UpdateEvent
|
|
||||||
(update [_ state]
|
|
||||||
(let [flags (:flags state #{})]
|
|
||||||
(if (contains? flags key)
|
|
||||||
(assoc state :flags (disj flags key))
|
|
||||||
(assoc state :flags (conj flags key))))))
|
|
||||||
|
|
||||||
(defn toggle-flag
|
|
||||||
"Toggle the enabled flag of the specified tool."
|
|
||||||
[key]
|
|
||||||
{:pre [(keyword? key)]}
|
|
||||||
(ToggleFlag. key))
|
|
||||||
|
|
||||||
;; --- Fetch Image
|
|
||||||
|
|
||||||
(declare image-fetched)
|
|
||||||
|
|
||||||
(defrecord FetchImage [id]
|
|
||||||
ptk/WatchEvent
|
|
||||||
(watch [_ state stream]
|
|
||||||
(let [existing (get-in state [:images id])]
|
|
||||||
(if existing
|
|
||||||
(rx/empty)
|
|
||||||
#_(->> (rp/req :fetch/image {:id id})
|
|
||||||
(rx/map :payload)
|
|
||||||
(rx/map image-fetched))))))
|
|
||||||
|
|
||||||
(defn fetch-image
|
|
||||||
"Conditionally fetch image by its id. If image
|
|
||||||
is already loaded, this event is noop."
|
|
||||||
[id]
|
|
||||||
{:pre [(uuid? id)]}
|
|
||||||
(FetchImage. id))
|
|
||||||
|
|
||||||
;; --- Image Fetched
|
|
||||||
|
|
||||||
(defrecord ImageFetched [image]
|
|
||||||
ptk/UpdateEvent
|
|
||||||
(update [_ state]
|
|
||||||
(let [id (:id image)]
|
|
||||||
(update state :images assoc id image))))
|
|
||||||
|
|
||||||
(defn image-fetched
|
|
||||||
[image]
|
|
||||||
{:pre [(map? image)]}
|
|
||||||
(ImageFetched. image))
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.locales.en)
|
|
||||||
|
|
||||||
(defonce locales
|
|
||||||
{"viewer.sitemap" "sitemap"
|
|
||||||
"viewer.interactions" "view interactions"
|
|
||||||
"viewer.share" "share"
|
|
||||||
"viewer.save" "save SVG"})
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2015-2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.locales.fr)
|
|
||||||
|
|
||||||
(defonce locales
|
|
||||||
{"viewer.sitemap" "plan du site"
|
|
||||||
"viewer.interactions" "voir les interactions"
|
|
||||||
"viewer.share" "partager"
|
|
||||||
"viewer.save" "sauvegarder en SVG"})
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2015-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.store
|
|
||||||
(:require [beicon.core :as rx]
|
|
||||||
[lentes.core :as l]
|
|
||||||
[potok.core :as ptk]))
|
|
||||||
|
|
||||||
(def ^:dynamic *on-error* identity)
|
|
||||||
|
|
||||||
(defonce state (atom {}))
|
|
||||||
(defonce loader (atom false))
|
|
||||||
(defonce store (ptk/store {:on-error #(*on-error* %)}))
|
|
||||||
(defonce stream (ptk/input-stream store))
|
|
||||||
|
|
||||||
(def auth-ref
|
|
||||||
(-> (l/key :auth)
|
|
||||||
(l/derive state)))
|
|
||||||
|
|
||||||
(defn emit!
|
|
||||||
([event]
|
|
||||||
(ptk/emit! store event))
|
|
||||||
([event & events]
|
|
||||||
(apply ptk/emit! store (cons event events))))
|
|
||||||
|
|
||||||
(def initial-state
|
|
||||||
{:route nil
|
|
||||||
:project nil
|
|
||||||
:pages nil
|
|
||||||
:page nil
|
|
||||||
:flags #{:sitemap}
|
|
||||||
:shapes {}})
|
|
||||||
|
|
||||||
(defn init
|
|
||||||
"Initialize the state materialization."
|
|
||||||
[]
|
|
||||||
(emit! initial-state)
|
|
||||||
(rx/to-atom store state))
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui
|
|
||||||
(:require
|
|
||||||
[lentes.core :as l]
|
|
||||||
[potok.core :as ptk]
|
|
||||||
[rumext.core :as mx]
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.util.data :refer [parse-int]]
|
|
||||||
[uxbox.util.dom :as dom]
|
|
||||||
[uxbox.util.i18n :refer [tr]]
|
|
||||||
[uxbox.util.messages :as uum]
|
|
||||||
[uxbox.util.router :as rt]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.ui.lightbox :refer [lightbox]]
|
|
||||||
[uxbox.view.ui.loader :refer [loader]]
|
|
||||||
[uxbox.view.ui.notfound :refer [notfound-page]]
|
|
||||||
[uxbox.view.ui.viewer :refer [viewer-page]]))
|
|
||||||
|
|
||||||
;; --- Error Handling
|
|
||||||
|
|
||||||
(defn- on-error
|
|
||||||
"A default error handler."
|
|
||||||
[error]
|
|
||||||
(cond
|
|
||||||
;; Network error
|
|
||||||
(= (:status error) 0)
|
|
||||||
(do
|
|
||||||
(st/emit! (uum/error (tr "errors.network")))
|
|
||||||
(js/console.error "Stack:" (.-stack error)))
|
|
||||||
|
|
||||||
;; Something else
|
|
||||||
:else
|
|
||||||
(do
|
|
||||||
(st/emit! (uum/error (tr "errors.generic")))
|
|
||||||
(js/console.error "Stack:" (.-stack error)))))
|
|
||||||
|
|
||||||
(set! st/*on-error* on-error)
|
|
||||||
|
|
||||||
|
|
||||||
;; --- Routes
|
|
||||||
|
|
||||||
(def routes
|
|
||||||
[["/preview/:token/:id" :view/viewer]
|
|
||||||
["/not-found" :view/notfound]])
|
|
||||||
|
|
||||||
;; --- Main App (Component)
|
|
||||||
|
|
||||||
(def route-ref
|
|
||||||
(-> (l/key :route)
|
|
||||||
(l/derive st/state)))
|
|
||||||
|
|
||||||
(mf/defc app
|
|
||||||
[]
|
|
||||||
(let [route (mf/deref route-ref)]
|
|
||||||
(case (get-in route [:data :name])
|
|
||||||
:view/notfound (notfound-page)
|
|
||||||
:view/viewer (let [{:keys [token id]} (get-in route [:params :path])]
|
|
||||||
(mf/element viewer-page {:token token
|
|
||||||
:id (uuid id)
|
|
||||||
:key [token id]}))
|
|
||||||
nil)))
|
|
||||||
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.keyboard)
|
|
||||||
|
|
||||||
(defn is-keycode?
|
|
||||||
[keycode]
|
|
||||||
(fn [e]
|
|
||||||
(= (.-keyCode e) keycode)))
|
|
||||||
|
|
||||||
(defn ctrl?
|
|
||||||
[event]
|
|
||||||
(.-ctrlKey event))
|
|
||||||
|
|
||||||
(defn shift?
|
|
||||||
[event]
|
|
||||||
(.-shiftKey event))
|
|
||||||
|
|
||||||
(def esc? (is-keycode? 27))
|
|
||||||
(def enter? (is-keycode? 13))
|
|
||||||
(def space? (is-keycode? 32))
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.lightbox
|
|
||||||
(:require [lentes.core :as l]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.data.lightbox :as udl]
|
|
||||||
[rumext.core :as mx :include-macros true]
|
|
||||||
[uxbox.view.ui.keyboard :as k]
|
|
||||||
[uxbox.util.dom :as dom]
|
|
||||||
[uxbox.util.data :refer [classnames]]
|
|
||||||
[goog.events :as events])
|
|
||||||
(:import goog.events.EventType))
|
|
||||||
|
|
||||||
;; --- Lentes
|
|
||||||
|
|
||||||
(def ^:private lightbox-ref
|
|
||||||
(-> (l/key :lightbox)
|
|
||||||
(l/derive st/state)))
|
|
||||||
|
|
||||||
;; --- Lightbox (Component)
|
|
||||||
|
|
||||||
(defmulti render-lightbox :name)
|
|
||||||
(defmethod render-lightbox :default [_] nil)
|
|
||||||
|
|
||||||
(defn- on-esc-clicked
|
|
||||||
[event]
|
|
||||||
(when (k/esc? event)
|
|
||||||
(udl/close!)
|
|
||||||
(dom/stop-propagation event)))
|
|
||||||
|
|
||||||
(defn- on-out-clicked
|
|
||||||
[own event]
|
|
||||||
(let [parent (mx/ref-node own "parent")
|
|
||||||
current (dom/get-target event)]
|
|
||||||
(when (dom/equals? parent current)
|
|
||||||
(udl/close!))))
|
|
||||||
|
|
||||||
(defn- lightbox-init
|
|
||||||
[own]
|
|
||||||
(let [key (events/listen js/document
|
|
||||||
EventType.KEYDOWN
|
|
||||||
on-esc-clicked)]
|
|
||||||
(assoc own ::key key)))
|
|
||||||
|
|
||||||
(defn- lightbox-will-umount
|
|
||||||
[own]
|
|
||||||
(events/unlistenByKey (::key own))
|
|
||||||
(dissoc own ::key))
|
|
||||||
|
|
||||||
(mx/defcs lightbox
|
|
||||||
{:mixins [mx/reactive]
|
|
||||||
:init lightbox-init
|
|
||||||
:will-unmount lightbox-will-umount}
|
|
||||||
[own]
|
|
||||||
(let [data (mx/react lightbox-ref)
|
|
||||||
classes (classnames
|
|
||||||
:hide (nil? data)
|
|
||||||
:transparent (:transparent? data))]
|
|
||||||
[:div.lightbox
|
|
||||||
{:class classes
|
|
||||||
:ref "parent"
|
|
||||||
:on-click (partial on-out-clicked own)}
|
|
||||||
(render-lightbox data)]))
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.loader
|
|
||||||
(:require [uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[rumext.core :as mx :include-macros true]))
|
|
||||||
|
|
||||||
;; --- Component
|
|
||||||
|
|
||||||
(mx/defc loader
|
|
||||||
{:mixins [mx/reactive mx/static]}
|
|
||||||
[]
|
|
||||||
(when (mx/react st/loader)
|
|
||||||
[:div.loader-content i/loader]))
|
|
||||||
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.notfound
|
|
||||||
(:require [rumext.core :as mx :include-macros true]))
|
|
||||||
|
|
||||||
(mx/defc notfound-page
|
|
||||||
[]
|
|
||||||
[:div
|
|
||||||
[:strong "Not Found"]])
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer
|
|
||||||
(:require
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.util.i18n :refer [tr]]
|
|
||||||
[uxbox.util.data :refer [seek]]
|
|
||||||
[uxbox.view.data.viewer :as dv]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.ui.viewer.frame :refer [frame]]
|
|
||||||
[uxbox.view.ui.viewer.nav :refer [nav]]
|
|
||||||
[uxbox.view.ui.viewer.sitemap :refer [sitemap]]
|
|
||||||
[lentes.core :as l]))
|
|
||||||
|
|
||||||
;; --- Refs
|
|
||||||
|
|
||||||
(defn- sort-pages
|
|
||||||
[{:keys [pages] :as state}]
|
|
||||||
(let [get-order #(get-in % [:metadata :order])]
|
|
||||||
(assoc state :pages (->> (sort-by get-order pages)
|
|
||||||
(into [])))))
|
|
||||||
|
|
||||||
(def state-ref
|
|
||||||
(-> (comp (l/select-keys [:flags :pages :project])
|
|
||||||
(l/lens sort-pages))
|
|
||||||
(l/derive st/state)))
|
|
||||||
|
|
||||||
;; --- Component
|
|
||||||
|
|
||||||
(mf/defc viewer-page
|
|
||||||
[{:keys [token id]}]
|
|
||||||
(let [{:keys [project pages flags]} (mf/deref state-ref)]
|
|
||||||
(mf/use-effect
|
|
||||||
{:fn #(st/emit! (dv/initialize token))})
|
|
||||||
(when (seq pages)
|
|
||||||
[:section.view-content
|
|
||||||
(when (contains? flags :sitemap)
|
|
||||||
[:& sitemap {:project project
|
|
||||||
:pages pages
|
|
||||||
:selected id}])
|
|
||||||
[:& nav {:flags flags}]
|
|
||||||
[:& frame {:page (seek #(= id (:id %)) pages)}]])))
|
|
||||||
|
|
@ -1,40 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer.frame
|
|
||||||
(:require
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.view.ui.viewer.shapes :as shapes]))
|
|
||||||
|
|
||||||
;; --- Background (Component)
|
|
||||||
|
|
||||||
(mf/defc background
|
|
||||||
{:wrap [mf/wrap-memo]}
|
|
||||||
[{:keys [background] :as metadata}]
|
|
||||||
#_[:rect
|
|
||||||
{:x 0 :y 0
|
|
||||||
:width "100%"
|
|
||||||
:height "100%"
|
|
||||||
:fill (or background "#ffffff")}])
|
|
||||||
|
|
||||||
;; --- Canvas (Component)
|
|
||||||
|
|
||||||
(declare shape)
|
|
||||||
|
|
||||||
(mf/defc frame
|
|
||||||
{:wrap [mf/wrap-memo]}
|
|
||||||
[{:keys [page] :as props}]
|
|
||||||
#_(let [{:keys [metadata id]} page
|
|
||||||
{:keys [width height]} metadata]
|
|
||||||
[:div.view-frame
|
|
||||||
[:svg.page-layout {:width width
|
|
||||||
:height height}
|
|
||||||
[:& background metadata]
|
|
||||||
(for [id (reverse (:shapes page))]
|
|
||||||
(-> (shapes/shape id)
|
|
||||||
(mf/with-key (str id))))]]))
|
|
||||||
|
|
||||||
|
|
@ -1,259 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer.interactions
|
|
||||||
(:require [uxbox.util.dom :as dom]
|
|
||||||
[potok.core :as ptk]
|
|
||||||
[uxbox.util.geom.matrix :as gmt]
|
|
||||||
[uxbox.util.geom.point :as gpt]
|
|
||||||
[uxbox.util.timers :as ts]
|
|
||||||
[uxbox.main.geom :as geom]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.data.viewer :as dv]
|
|
||||||
[vendor.snapsvg])
|
|
||||||
;; Documentation about available events:
|
|
||||||
;; https://google.github.io/closure-library/api/goog.events.EventType.html
|
|
||||||
(:import goog.events.EventType))
|
|
||||||
|
|
||||||
(defn- translate-trigger
|
|
||||||
"Translates the interaction trigger name (keyword) into
|
|
||||||
approriate dom event name (keyword)."
|
|
||||||
[trigger]
|
|
||||||
{:pre [(keyword? trigger)]}
|
|
||||||
(case trigger
|
|
||||||
:click EventType.CLICK
|
|
||||||
:doubleclick EventType.DBLCLICK
|
|
||||||
:rightclick EventType.CONTEXTMENU
|
|
||||||
:mousein EventType.MOUSEENTER
|
|
||||||
:mouseout EventType.MOUSELEAVE
|
|
||||||
:hover ::hover
|
|
||||||
(throw (ex-info "not supported at this moment" {:trigger trigger}))))
|
|
||||||
|
|
||||||
(defn- translate-ease
|
|
||||||
"Translates the uxbox ease settings to one
|
|
||||||
that are compatible with anime.js library."
|
|
||||||
[ease]
|
|
||||||
{:pre [(keyword? ease)]}
|
|
||||||
(case ease
|
|
||||||
:linear js/mina.linear
|
|
||||||
:easein js/mina.easin
|
|
||||||
:easeout js/mina.easout
|
|
||||||
:easeinout js/mina.easeinout
|
|
||||||
(throw (ex-info "invalid ease value" {:ease ease}))))
|
|
||||||
|
|
||||||
(defn- animate
|
|
||||||
[& opts]
|
|
||||||
(js/anime (clj->js (apply hash-map opts))))
|
|
||||||
|
|
||||||
(defn- animate*
|
|
||||||
[dom {:keys [delay duration easing] :as opts}]
|
|
||||||
(let [props (dissoc opts :delay :duration :easing)
|
|
||||||
snap (js/Snap. dom)]
|
|
||||||
(ts/schedule delay #(.animate snap (clj->js props) duration easing))))
|
|
||||||
|
|
||||||
;; --- Interactions to Animation Compilation
|
|
||||||
|
|
||||||
(defn- run-moveby-interaction
|
|
||||||
[{:keys [element moveby-x moveby-y easing delay duration direction]}]
|
|
||||||
(let [dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(animate* dom {:transform (str "translate(" (- moveby-x)" " (- moveby-y) ")")
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration})
|
|
||||||
(animate* dom {:transform (str "translate(" moveby-x " " moveby-y ")")
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration}))))
|
|
||||||
|
|
||||||
(declare run-hide-interaction)
|
|
||||||
|
|
||||||
(defn- run-show-interaction
|
|
||||||
[{:keys [element easing delay duration
|
|
||||||
animation direction] :as itx}]
|
|
||||||
(let [dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(run-hide-interaction (dissoc itx :direction))
|
|
||||||
(animate* dom {:fillOpacity "1"
|
|
||||||
:strokeOpacity "1"
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration}))))
|
|
||||||
|
|
||||||
(defn- run-hide-interaction
|
|
||||||
[{:keys [element easing delay duration
|
|
||||||
animation direction] :as itx}]
|
|
||||||
(let [dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(run-show-interaction (dissoc itx :direction))
|
|
||||||
(animate* dom {:fillOpacity "0"
|
|
||||||
:strokeOpacity "0"
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration}))))
|
|
||||||
|
|
||||||
(defn- run-toggle-interaction
|
|
||||||
[{:keys [element easing delay duration
|
|
||||||
animation direction] :as itx}]
|
|
||||||
(let [dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(run-show-interaction itx)
|
|
||||||
(run-hide-interaction itx))))
|
|
||||||
|
|
||||||
(defn- run-opacity-interaction
|
|
||||||
[{:keys [element opacity easing delay
|
|
||||||
duration animation direction]}]
|
|
||||||
(let [shape (get-in @st/state [:shapes element])
|
|
||||||
dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(animate* dom {:fillOpacity (:fill-opacity shape "1")
|
|
||||||
:strokeOpacity (:stroke-opacity shape "1")
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration})
|
|
||||||
(animate* dom {:fillOpacity opacity
|
|
||||||
:strokeOpacity opacity
|
|
||||||
:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration}))))
|
|
||||||
|
|
||||||
(defn- run-size-interaction-rect
|
|
||||||
[{:keys [x1 y1 rotation] :as shape}
|
|
||||||
{:keys [resize-width resize-height easing
|
|
||||||
element delay duration direction] :as opts}]
|
|
||||||
(let [{:keys [width height]} (geom/size shape)
|
|
||||||
dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:width width
|
|
||||||
:height height})
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:width resize-width
|
|
||||||
:height resize-height}))))
|
|
||||||
|
|
||||||
(defn- run-size-interaction-circle
|
|
||||||
[{:keys [x1 y1 rotation] :as shape}
|
|
||||||
{:keys [resize-width resize-height easing
|
|
||||||
element delay duration direction] :as opts}]
|
|
||||||
(let [{:keys [width height]} (geom/size shape)
|
|
||||||
dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:rx width
|
|
||||||
:ry height})
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:rx resize-width
|
|
||||||
:ry resize-height}))))
|
|
||||||
|
|
||||||
(defn- run-size-interaction
|
|
||||||
[{:keys [element] :as opts}]
|
|
||||||
(let [shape (get-in @st/state [:shapes element])]
|
|
||||||
(case (:type shape)
|
|
||||||
:icon (run-size-interaction-rect shape opts)
|
|
||||||
:image (run-size-interaction-rect shape opts)
|
|
||||||
:rect (run-size-interaction-rect shape opts)
|
|
||||||
:circle (run-size-interaction-circle shape opts))))
|
|
||||||
|
|
||||||
(defn- run-gotourl-interaction
|
|
||||||
[{:keys [url]}]
|
|
||||||
(js/window.open url "_blank"))
|
|
||||||
|
|
||||||
(defn- run-gotopage-interaction
|
|
||||||
[{:keys [page]}]
|
|
||||||
(st/emit! (dv/go-to-page page)))
|
|
||||||
|
|
||||||
(defn- run-color-interaction
|
|
||||||
[{:keys [element fill-color stroke-color direction easing delay duration]}]
|
|
||||||
(let [shape (get-in @st/state [:shapes element])
|
|
||||||
dom (dom/get-element (str "shape-" element))]
|
|
||||||
(if (= direction :reverse)
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:fill (:fill shape "#000000")
|
|
||||||
:stroke (:stroke shape "#000000")})
|
|
||||||
(animate* dom {:easing (translate-ease easing)
|
|
||||||
:delay delay
|
|
||||||
:duration duration
|
|
||||||
:fill fill-color
|
|
||||||
:stroke stroke-color}))))
|
|
||||||
|
|
||||||
;; (defn- run-rotate-interaction
|
|
||||||
;; [{:keys [element rotation direction easing delay duration] :as opts}]
|
|
||||||
;; (let [shape (get-in @st/state [:shapes element])
|
|
||||||
;; {:keys [x1 y1 width height]} (geom/size shape)
|
|
||||||
;;
|
|
||||||
;; dom (dom/get-element (str "shape-" element))
|
|
||||||
;; mtx1 (geom/transformation-matrix (update shape :rotation + rotation))
|
|
||||||
;; mtx2 (geom/transformation-matrix shape)]
|
|
||||||
;; (if (= direction :reverse)
|
|
||||||
;; (animate* dom {:easing (translate-ease easing)
|
|
||||||
;; :delay delay
|
|
||||||
;; :duration duration
|
|
||||||
;; :transform (str mtx2)})
|
|
||||||
;; (animate* dom {:easing (translate-ease easing)
|
|
||||||
;; :delay delay
|
|
||||||
;; :duration duration
|
|
||||||
;; :transform (str mtx1)}))))
|
|
||||||
|
|
||||||
(defn- run-interaction
|
|
||||||
"Given an interaction data structure return
|
|
||||||
a precompiled animation."
|
|
||||||
[{:keys [action] :as itx}]
|
|
||||||
(case action
|
|
||||||
:moveby (run-moveby-interaction itx)
|
|
||||||
:show (run-show-interaction itx)
|
|
||||||
:hide (run-hide-interaction itx)
|
|
||||||
:toggle (run-toggle-interaction itx)
|
|
||||||
:size (run-size-interaction itx)
|
|
||||||
:opacity (run-opacity-interaction itx)
|
|
||||||
:color (run-color-interaction itx)
|
|
||||||
;; :rotate (run-rotate-interaction itx)
|
|
||||||
:gotourl (run-gotourl-interaction itx)
|
|
||||||
:gotopage (run-gotopage-interaction itx)
|
|
||||||
(throw (ex-info "undefined interaction" {:action action}))))
|
|
||||||
|
|
||||||
;; --- Main Api
|
|
||||||
|
|
||||||
(defn- build-hover-evt
|
|
||||||
"A special case for hover event."
|
|
||||||
[itx]
|
|
||||||
(letfn [(on-mouse-enter [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(run-interaction itx))
|
|
||||||
(on-mouse-leave [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(run-interaction (assoc itx :direction :reverse)))]
|
|
||||||
[[EventType.MOUSEENTER on-mouse-enter]
|
|
||||||
[EventType.MOUSELEAVE on-mouse-leave]]))
|
|
||||||
|
|
||||||
(defn- build-generic-evt
|
|
||||||
"A reducer function that compiles interaction data structures
|
|
||||||
into apropriate event handler attributes."
|
|
||||||
[evt itx]
|
|
||||||
(letfn [(on-event [event]
|
|
||||||
(dom/prevent-default event)
|
|
||||||
(run-interaction itx))]
|
|
||||||
[[evt on-event]]))
|
|
||||||
|
|
||||||
(defn build-events
|
|
||||||
"Compile a sequence of interactions into a hash-map of event-handlers."
|
|
||||||
[shape]
|
|
||||||
(reduce (fn [acc itx]
|
|
||||||
(let [evt (translate-trigger (:trigger itx))]
|
|
||||||
(if (= evt ::hover)
|
|
||||||
(into acc (build-hover-evt itx))
|
|
||||||
(into acc (build-generic-evt evt itx)))))
|
|
||||||
[]
|
|
||||||
(vals (:interactions shape))))
|
|
||||||
|
|
@ -1,43 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016-2017 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
;; Copyright (c) 2016-2017 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer.nav
|
|
||||||
(:require
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.main.data.lightbox :as udl]
|
|
||||||
[uxbox.util.i18n :refer (tr)]
|
|
||||||
[uxbox.view.data.viewer :as dv]
|
|
||||||
[uxbox.view.store :as st]))
|
|
||||||
|
|
||||||
(mf/defc nav
|
|
||||||
[{:keys [flags] :as props}]
|
|
||||||
(let [toggle-sitemap #(st/emit! (dv/toggle-flag :sitemap))
|
|
||||||
toggle-interactions #(st/emit! (dv/toggle-flag :interactions))
|
|
||||||
sitemap? (contains? flags :sitemap)
|
|
||||||
interactions? (contains? flags :interactions)
|
|
||||||
on-download #(udl/open! :download)]
|
|
||||||
[:div.view-nav
|
|
||||||
[:ul.view-options-btn
|
|
||||||
[:li.tooltip.tooltip-right
|
|
||||||
{:alt (tr "viewer.sitemap")
|
|
||||||
:class (when sitemap? "selected")
|
|
||||||
:on-click toggle-sitemap}
|
|
||||||
i/tree]
|
|
||||||
[:li.tooltip.tooltip-right
|
|
||||||
{:alt (tr "viewer.interactions")
|
|
||||||
:class (when interactions? "selected")
|
|
||||||
:on-click toggle-interactions}
|
|
||||||
i/action]
|
|
||||||
[:li.tooltip.tooltip-right
|
|
||||||
{:alt (tr "viewer.share")
|
|
||||||
:class "disabled"
|
|
||||||
:disabled true} i/export]
|
|
||||||
[:li.tooltip.tooltip-right
|
|
||||||
{:alt (tr "viewer.save")
|
|
||||||
:on-click on-download}
|
|
||||||
i/save]]]))
|
|
||||||
|
|
@ -1,118 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer.shapes
|
|
||||||
#_(:require [goog.events :as events]
|
|
||||||
[lentes.core :as l]
|
|
||||||
[uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.view.store :as st]
|
|
||||||
[uxbox.view.data.viewer :as udv]
|
|
||||||
[uxbox.view.ui.viewer.interactions :as itx]
|
|
||||||
[uxbox.main.geom :as geom]
|
|
||||||
[uxbox.main.ui.shapes.rect :refer [rect-shape]]
|
|
||||||
[uxbox.main.ui.shapes.icon :refer [icon-shape]]
|
|
||||||
[uxbox.main.ui.shapes.text :refer [text-shape]]
|
|
||||||
;; [uxbox.main.ui.shapes.group :refer [group-shape]]
|
|
||||||
[uxbox.main.ui.shapes.path :refer [path-shape]]
|
|
||||||
[uxbox.main.ui.shapes.circle :refer [circle-shape]]
|
|
||||||
[uxbox.main.ui.shapes.image :refer [image-shape]]
|
|
||||||
[rumext.core :as mx :include-macros true])
|
|
||||||
#_(:import goog.events.EventType))
|
|
||||||
|
|
||||||
;; (def itx-flag-ref
|
|
||||||
;; (-> (comp (l/key :flags) (l/lens :interactions))
|
|
||||||
;; (l/derive st/state)))
|
|
||||||
|
|
||||||
;; (defn image-ref
|
|
||||||
;; [id]
|
|
||||||
;; (-> (l/in [:images id])
|
|
||||||
;; (l/derive st/state)))
|
|
||||||
|
|
||||||
;; ;; --- Interactions Wrapper
|
|
||||||
|
|
||||||
;; (defn- interactions-wrapper-did-mount
|
|
||||||
;; [own]
|
|
||||||
;; (let [dom (mx/dom-node own)
|
|
||||||
;; shape (first (::mx/args own))
|
|
||||||
;; evnts (itx/build-events shape)
|
|
||||||
;; keys (reduce (fn [acc [evt callback]]
|
|
||||||
;; (conj acc (events/listen dom evt callback)))
|
|
||||||
;; []
|
|
||||||
;; evnts)]
|
|
||||||
;; (assoc own ::keys keys)))
|
|
||||||
|
|
||||||
;; (defn- interactions-wrapper-will-unmount
|
|
||||||
;; [own]
|
|
||||||
;; (let [keys (::keys own)]
|
|
||||||
;; (run! #(events/unlistenByKey %) keys)
|
|
||||||
;; (dissoc own ::keys)))
|
|
||||||
|
|
||||||
;; (mx/defc interactions-wrapper
|
|
||||||
;; {:did-mount interactions-wrapper-did-mount
|
|
||||||
;; :will-unmount interactions-wrapper-will-unmount
|
|
||||||
;; :mixins [mx/reactive mx/static]}
|
|
||||||
;; [shape factory]
|
|
||||||
;; {:pre [(map? shape)]}
|
|
||||||
;; (let [show-itx? (and (mx/react itx-flag-ref)
|
|
||||||
;; (not (empty? (:interactions shape))))
|
|
||||||
;; rect (geom/shape->rect-shape shape)]
|
|
||||||
;; [:g {:id (str "itx-" (:id shape))
|
|
||||||
;; :style {:cursor "pointer"}}
|
|
||||||
;; (factory shape)
|
|
||||||
;; (when show-itx?
|
|
||||||
;; [:circle {:class "interaction-bullet"
|
|
||||||
;; :cx (:x1 rect)
|
|
||||||
;; :cy (:y1 rect)
|
|
||||||
;; :r 5}])]))
|
|
||||||
|
|
||||||
;; ;; [:rect {:class "interaction-hightlight"
|
|
||||||
;; ;; :x (:x1 rect)
|
|
||||||
;; ;; :y (:y1 rect)
|
|
||||||
;; ;; :width (:width rect)
|
|
||||||
;; ;; :height (:height rect)}]
|
|
||||||
|
|
||||||
;; ;; --- Image Shape Wrapper
|
|
||||||
;; ;;
|
|
||||||
;; ;; NOTE: This wrapper is needed for preload the referenced
|
|
||||||
;; ;; image object which is need for properly show the shape.
|
|
||||||
|
|
||||||
;; (mx/defc image-shape-wrapper
|
|
||||||
;; {:mixins [mx/static mx/reactive]
|
|
||||||
;; :init (fn [own]
|
|
||||||
;; (when-let [image-id (-> own ::mx/args first :image)]
|
|
||||||
;; (st/emit! (udv/fetch-image image-id)))
|
|
||||||
;; own)}
|
|
||||||
;; [{:keys [image] :as item}]
|
|
||||||
;; (when-let [image (mx/react (image-ref image))]
|
|
||||||
;; (image-shape (assoc item :image image))))
|
|
||||||
|
|
||||||
;; ;; --- Text Shape Wrapper
|
|
||||||
|
|
||||||
;; (mx/defc text-shape-wrapper
|
|
||||||
;; {:mixins [mx/static]}
|
|
||||||
;; [item]
|
|
||||||
;; (text-shape (assoc item :user-select true)))
|
|
||||||
|
|
||||||
;; ;; --- Shapes
|
|
||||||
|
|
||||||
;; (declare shape)
|
|
||||||
|
|
||||||
;; (mx/defc shape*
|
|
||||||
;; [{:keys [type] :as item}]
|
|
||||||
;; (case type
|
|
||||||
;; ;; :group (group-shape item shape)
|
|
||||||
;; :image (image-shape-wrapper item)
|
|
||||||
;; :text (text-shape-wrapper item)
|
|
||||||
;; :icon (icon-shape item)
|
|
||||||
;; :rect (rect-shape item)
|
|
||||||
;; :path (path-shape item)
|
|
||||||
;; :circle (circle-shape item)))
|
|
||||||
|
|
||||||
;; (mx/defc shape
|
|
||||||
;; [sid]
|
|
||||||
;; {:pre [(uuid? sid)]}
|
|
||||||
;; (let [item (get-in @st/state [:shapes sid])]
|
|
||||||
;; (interactions-wrapper item shape*)))
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
;; This Source Code Form is subject to the terms of the Mozilla Public
|
|
||||||
;; License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
||||||
;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
|
||||||
;;
|
|
||||||
;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
|
|
||||||
;; Copyright (c) 2016-2019 Andrey Antukh <niwi@niwi.nz>
|
|
||||||
|
|
||||||
(ns uxbox.view.ui.viewer.sitemap
|
|
||||||
(:require
|
|
||||||
[lentes.core :as l]
|
|
||||||
[rumext.alpha :as mf]
|
|
||||||
[uxbox.builtins.icons :as i]
|
|
||||||
[uxbox.view.data.viewer :as dv]
|
|
||||||
[uxbox.view.store :as st]))
|
|
||||||
|
|
||||||
(mf/defc sitemap
|
|
||||||
[{:keys [project pages selected] :as props}]
|
|
||||||
(let [project-name (:name project)
|
|
||||||
on-click #(st/emit! (dv/select-page %))]
|
|
||||||
[:div.view-sitemap
|
|
||||||
[:span.sitemap-title project-name]
|
|
||||||
[:ul.sitemap-list
|
|
||||||
(for [page pages]
|
|
||||||
(let [selected? (= (:id page) selected)
|
|
||||||
page-id (:id page)]
|
|
||||||
[:li {:class (when selected? "selected")
|
|
||||||
:on-click (partial on-click page-id)
|
|
||||||
:id (str "page-" page-id)
|
|
||||||
:key page-id}
|
|
||||||
[:div.page-icon i/file-html]
|
|
||||||
[:span (:name page)]]))]]))
|
|
||||||
|
|
@ -52,13 +52,10 @@
|
||||||
;; --- Specific Build Options
|
;; --- Specific Build Options
|
||||||
|
|
||||||
(def main-build-options
|
(def main-build-options
|
||||||
{:output-dir "resources/public/js"
|
{:output-dir "resources/public/js/main/"
|
||||||
:asset-path "/js"
|
:output-to "resources/public/js/main.js"
|
||||||
:modules {:main {:entries #{"uxbox.main"}
|
:main 'uxbox.main
|
||||||
:output-to "resources/public/js/main.js"}
|
:asset-path "/js/main"})
|
||||||
;; :view {:entries #{"uxbox.view"}
|
|
||||||
;; :output-to "resources/public/js/view.js"}
|
|
||||||
}})
|
|
||||||
|
|
||||||
;; (def worker-build-options
|
;; (def worker-build-options
|
||||||
;; {:main 'uxbox.worker
|
;; {:main 'uxbox.worker
|
||||||
|
|
@ -71,18 +68,18 @@
|
||||||
(-> (merge default-build-options
|
(-> (merge default-build-options
|
||||||
main-build-options
|
main-build-options
|
||||||
dist-build-options)
|
dist-build-options)
|
||||||
(assoc :output-dir "target/dist/js/")
|
(assoc :output-dir "target/dist/js/main/"
|
||||||
(assoc-in [:modules :main :output-to] "target/dist/js/main.js")
|
:source-map "target/dist/js/main.js.map"
|
||||||
#_(assoc-in [:modules :view :output-to] "target/dist/js/view.js")))
|
:output-to "target/dist/js/main.js")))
|
||||||
|
|
||||||
(def main-dist-dbg-build-options
|
(def main-dist-dbg-build-options
|
||||||
(-> (merge main-dist-build-options
|
(assoc main-dist-build-options
|
||||||
{:optimizations :advanced
|
:optimizations :advanced
|
||||||
:pseudo-names true
|
:pseudo-names true
|
||||||
:pretty-print true})
|
:pretty-print true
|
||||||
(assoc :output-dir "target/dist/dbg/js/")
|
:output-dir "target/dist/dbg/js/main/"
|
||||||
(assoc-in [:modules :main :output-to] "target/dist/dbg/js/main.js")
|
:source-map "target/dist/dbg/js/main.js.map"
|
||||||
#_(assoc-in [:modules :view :output-to] "target/dist/dbg/js/view.js")))
|
:output-to "target/dist/dbg/js/main.js"))
|
||||||
|
|
||||||
;; (def worker-dist-build-options
|
;; (def worker-dist-build-options
|
||||||
;; (merge default-build-options
|
;; (merge default-build-options
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue