diff --git a/frontend/gulpfile.js b/frontend/gulpfile.js index 968fe37179..41fd60fd04 100644 --- a/frontend/gulpfile.js +++ b/frontend/gulpfile.js @@ -211,7 +211,10 @@ gulp.task("watch:main", function() { gulp.watch([paths.resources + "templates/*.mustache", paths.resources + "locales.json", 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( diff --git a/frontend/resources/templates/index.mustache b/frontend/resources/templates/index.mustache index 88c30382e6..b98fb14a90 100644 --- a/frontend/resources/templates/index.mustache +++ b/frontend/resources/templates/index.mustache @@ -18,7 +18,6 @@ window.uxboxConfig = JSON.parse({{& config }}); window.uxboxTranslations = JSON.parse({{& translations }}); - diff --git a/frontend/resources/templates/view.mustache b/frontend/resources/templates/view.mustache deleted file mode 100644 index ef12f25a50..0000000000 --- a/frontend/resources/templates/view.mustache +++ /dev/null @@ -1,22 +0,0 @@ - - - - - - - UXBOX-view - The Open-Source prototyping tool - - - - -
- - -
- - - - - - - diff --git a/frontend/src/uxbox/view.cljs b/frontend/src/uxbox/view.cljs deleted file mode 100644 index e91cff9231..0000000000 --- a/frontend/src/uxbox/view.cljs +++ /dev/null @@ -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 - -(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))) - - diff --git a/frontend/src/uxbox/view/data/lightbox.cljs b/frontend/src/uxbox/view/data/lightbox.cljs deleted file mode 100644 index 5288cc9eed..0000000000 --- a/frontend/src/uxbox/view/data/lightbox.cljs +++ /dev/null @@ -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 - -(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))) diff --git a/frontend/src/uxbox/view/data/viewer.cljs b/frontend/src/uxbox/view/data/viewer.cljs deleted file mode 100644 index 4d564c9b75..0000000000 --- a/frontend/src/uxbox/view/data/viewer.cljs +++ /dev/null @@ -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 - -(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)) diff --git a/frontend/src/uxbox/view/locales/en.cljs b/frontend/src/uxbox/view/locales/en.cljs deleted file mode 100644 index bb47c3b555..0000000000 --- a/frontend/src/uxbox/view/locales/en.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2015-2016 Juan de la Cruz - -(ns uxbox.view.locales.en) - -(defonce locales - {"viewer.sitemap" "sitemap" - "viewer.interactions" "view interactions" - "viewer.share" "share" - "viewer.save" "save SVG"}) diff --git a/frontend/src/uxbox/view/locales/fr.cljs b/frontend/src/uxbox/view/locales/fr.cljs deleted file mode 100644 index f381b4d300..0000000000 --- a/frontend/src/uxbox/view/locales/fr.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2015-2016 Juan de la Cruz - -(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"}) diff --git a/frontend/src/uxbox/view/store.cljs b/frontend/src/uxbox/view/store.cljs deleted file mode 100644 index a639f537f0..0000000000 --- a/frontend/src/uxbox/view/store.cljs +++ /dev/null @@ -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 - -(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)) diff --git a/frontend/src/uxbox/view/ui.cljs b/frontend/src/uxbox/view/ui.cljs deleted file mode 100644 index 261903f5c8..0000000000 --- a/frontend/src/uxbox/view/ui.cljs +++ /dev/null @@ -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 - -(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))) - diff --git a/frontend/src/uxbox/view/ui/keyboard.cljs b/frontend/src/uxbox/view/ui/keyboard.cljs deleted file mode 100644 index 00a3b33aa2..0000000000 --- a/frontend/src/uxbox/view/ui/keyboard.cljs +++ /dev/null @@ -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 - -(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)) diff --git a/frontend/src/uxbox/view/ui/lightbox.cljs b/frontend/src/uxbox/view/ui/lightbox.cljs deleted file mode 100644 index f13a4fb783..0000000000 --- a/frontend/src/uxbox/view/ui/lightbox.cljs +++ /dev/null @@ -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 - -(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)])) diff --git a/frontend/src/uxbox/view/ui/loader.cljs b/frontend/src/uxbox/view/ui/loader.cljs deleted file mode 100644 index 92b582bbaa..0000000000 --- a/frontend/src/uxbox/view/ui/loader.cljs +++ /dev/null @@ -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 - -(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])) - diff --git a/frontend/src/uxbox/view/ui/notfound.cljs b/frontend/src/uxbox/view/ui/notfound.cljs deleted file mode 100644 index ca85cef62c..0000000000 --- a/frontend/src/uxbox/view/ui/notfound.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2016-2017 Juan de la Cruz - -(ns uxbox.view.ui.notfound - (:require [rumext.core :as mx :include-macros true])) - -(mx/defc notfound-page - [] - [:div - [:strong "Not Found"]]) diff --git a/frontend/src/uxbox/view/ui/viewer.cljs b/frontend/src/uxbox/view/ui/viewer.cljs deleted file mode 100644 index 970c2367f5..0000000000 --- a/frontend/src/uxbox/view/ui/viewer.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2016-2017 Juan de la Cruz - -(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)}]]))) diff --git a/frontend/src/uxbox/view/ui/viewer/frame.cljs b/frontend/src/uxbox/view/ui/viewer/frame.cljs deleted file mode 100644 index f08985734d..0000000000 --- a/frontend/src/uxbox/view/ui/viewer/frame.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2016-2017 Juan de la Cruz - -(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))))]])) - diff --git a/frontend/src/uxbox/view/ui/viewer/interactions.cljs b/frontend/src/uxbox/view/ui/viewer/interactions.cljs deleted file mode 100644 index a85453651c..0000000000 --- a/frontend/src/uxbox/view/ui/viewer/interactions.cljs +++ /dev/null @@ -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 - -(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)))) diff --git a/frontend/src/uxbox/view/ui/viewer/nav.cljs b/frontend/src/uxbox/view/ui/viewer/nav.cljs deleted file mode 100644 index 3e2b6974fc..0000000000 --- a/frontend/src/uxbox/view/ui/viewer/nav.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2016-2017 Juan de la Cruz - -(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]]])) diff --git a/frontend/src/uxbox/view/ui/viewer/shapes.cljs b/frontend/src/uxbox/view/ui/viewer/shapes.cljs deleted file mode 100644 index 9d8d1b1fbd..0000000000 --- a/frontend/src/uxbox/view/ui/viewer/shapes.cljs +++ /dev/null @@ -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 - -(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*))) diff --git a/frontend/src/uxbox/view/ui/viewer/sitemap.cljs b/frontend/src/uxbox/view/ui/viewer/sitemap.cljs deleted file mode 100644 index 235854ed24..0000000000 --- a/frontend/src/uxbox/view/ui/viewer/sitemap.cljs +++ /dev/null @@ -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 -;; Copyright (c) 2016-2019 Andrey Antukh - -(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)]]))]])) diff --git a/frontend/tools.clj b/frontend/tools.clj index 0926483d3c..24d49b9fea 100644 --- a/frontend/tools.clj +++ b/frontend/tools.clj @@ -52,13 +52,10 @@ ;; --- Specific Build Options (def main-build-options - {:output-dir "resources/public/js" - :asset-path "/js" - :modules {:main {:entries #{"uxbox.main"} - :output-to "resources/public/js/main.js"} - ;; :view {:entries #{"uxbox.view"} - ;; :output-to "resources/public/js/view.js"} - }}) + {:output-dir "resources/public/js/main/" + :output-to "resources/public/js/main.js" + :main 'uxbox.main + :asset-path "/js/main"}) ;; (def worker-build-options ;; {:main 'uxbox.worker @@ -71,18 +68,18 @@ (-> (merge default-build-options main-build-options dist-build-options) - (assoc :output-dir "target/dist/js/") - (assoc-in [:modules :main :output-to] "target/dist/js/main.js") - #_(assoc-in [:modules :view :output-to] "target/dist/js/view.js"))) + (assoc :output-dir "target/dist/js/main/" + :source-map "target/dist/js/main.js.map" + :output-to "target/dist/js/main.js"))) (def main-dist-dbg-build-options - (-> (merge main-dist-build-options - {:optimizations :advanced - :pseudo-names true - :pretty-print true}) - (assoc :output-dir "target/dist/dbg/js/") - (assoc-in [:modules :main :output-to] "target/dist/dbg/js/main.js") - #_(assoc-in [:modules :view :output-to] "target/dist/dbg/js/view.js"))) + (assoc main-dist-build-options + :optimizations :advanced + :pseudo-names true + :pretty-print true + :output-dir "target/dist/dbg/js/main/" + :source-map "target/dist/dbg/js/main.js.map" + :output-to "target/dist/dbg/js/main.js")) ;; (def worker-dist-build-options ;; (merge default-build-options