diff --git a/frontend/resources/styles/main/layouts/viewer.scss b/frontend/resources/styles/main/layouts/viewer.scss index eafd9911fc..1b7c73abfb 100644 --- a/frontend/resources/styles/main/layouts/viewer.scss +++ b/frontend/resources/styles/main/layouts/viewer.scss @@ -5,7 +5,10 @@ &.fullscreen { .viewer-header { - display: none; + opacity: 0; + &:hover { + opacity: 1; + } } .viewer-content { diff --git a/frontend/src/uxbox/main/data/viewer.cljs b/frontend/src/uxbox/main/data/viewer.cljs index 978424869b..aba8ed40e5 100644 --- a/frontend/src/uxbox/main/data/viewer.cljs +++ b/frontend/src/uxbox/main/data/viewer.cljs @@ -131,6 +131,7 @@ (update [_ state] (update-in state [:viewer-local :show-thumbnails] not)))) +;; --- Shortcuts (def shortcuts {"+" #(st/emit! increase-zoom) diff --git a/frontend/src/uxbox/main/ui/react_hooks.cljs b/frontend/src/uxbox/main/ui/react_hooks.cljs index 9fcbdcfaab..62ec7632ba 100644 --- a/frontend/src/uxbox/main/ui/react_hooks.cljs +++ b/frontend/src/uxbox/main/ui/react_hooks.cljs @@ -15,6 +15,8 @@ [beicon.core :as rx] [goog.events :as events] [rumext.alpha :as mf] + [uxbox.util.dom :as dom] + [uxbox.util.webapi :as wapi] ["mousetrap" :as mousetrap]) (:import goog.events.EventType)) @@ -46,3 +48,20 @@ (fn [] (mousetrap/reset)))) nil) +(defn use-fullscreen + [ref] + (let [state (mf/use-state (dom/fullscreen?)) + change (mf/use-callback #(reset! state (dom/fullscreen?))) + toggle (mf/use-callback (mf/deps @state) + #(let [el (mf/ref-val ref)] + (swap! state not) + (if @state + (wapi/exit-fullscreen) + (wapi/request-fullscreen el))))] + (mf/use-effect + (fn [] + (.addEventListener js/document "fullscreenchange" change) + #(.removeEventListener js/document "fullscreenchange" change))) + + [toggle @state])) + diff --git a/frontend/src/uxbox/main/ui/viewer.cljs b/frontend/src/uxbox/main/ui/viewer.cljs index aeb11d50a7..a0cbf47519 100644 --- a/frontend/src/uxbox/main/ui/viewer.cljs +++ b/frontend/src/uxbox/main/ui/viewer.cljs @@ -46,7 +46,11 @@ (mf/defc viewer-content [{:keys [data local index] :as props}] - (let [on-mouse-wheel + (let [container (mf/use-ref) + + [toggle-fullscreen fullscreen?] (hooks/use-fullscreen container) + + on-mouse-wheel (fn [event] (when (kbd/ctrl? event) ;; Disable browser zoom with ctrl+mouse wheel @@ -64,8 +68,12 @@ (mf/use-effect on-mount) (hooks/use-shortcuts dv/shortcuts) - [:div.viewer-layout + [:div.viewer-layout {:class (classnames :fullscreen fullscreen?) + :ref container} + [:& header {:data data + :toggle-fullscreen toggle-fullscreen + :fullscreen? fullscreen? :local local :index index}] [:div.viewer-content diff --git a/frontend/src/uxbox/main/ui/viewer/header.cljs b/frontend/src/uxbox/main/ui/viewer/header.cljs index ac9793c11e..9cd273cb8c 100644 --- a/frontend/src/uxbox/main/ui/viewer/header.cljs +++ b/frontend/src/uxbox/main/ui/viewer/header.cljs @@ -56,7 +56,7 @@ [:span.remove-zoom {:on-click increase} "+"]])) (mf/defc header - [{:keys [data index local] :as props}] + [{:keys [data index local fullscreen? toggle-fullscreen] :as props}] (let [{:keys [project file page frames]} data total (count frames) on-click #(st/emit! dv/toggle-thumbnails-panel) @@ -81,5 +81,8 @@ [:div.options-zone [:span.btn-primary {:on-click on-edit} "Edit page"] [:& zoom-widget {:zoom (:zoom local)}] - [:span.btn-fullscreen.tooltip.tooltip-bottom {:alt "Full screen"} i/full-screen]]])) + [:span.btn-fullscreen.tooltip.tooltip-bottom + {:alt "Full screen" + :on-click toggle-fullscreen} + i/full-screen]]])) diff --git a/frontend/src/uxbox/util/dom.cljs b/frontend/src/uxbox/util/dom.cljs index 75cf593639..50b71a48e1 100644 --- a/frontend/src/uxbox/util/dom.cljs +++ b/frontend/src/uxbox/util/dom.cljs @@ -156,3 +156,7 @@ [event] (let [data-string (-> event .-dataTransfer (.getData "text"))] (ts/decode data-string))) + +(defn fullscreen? + [] + (boolean (.-fullscreenElement js/document))) diff --git a/frontend/src/uxbox/util/webapi.cljs b/frontend/src/uxbox/util/webapi.cljs index 29f605e527..30a82264a0 100644 --- a/frontend/src/uxbox/util/webapi.cljs +++ b/frontend/src/uxbox/util/webapi.cljs @@ -82,4 +82,10 @@ (catch :default e nil))))))) +(defn request-fullscreen + [el] + (.requestFullscreen el)) +(defn exit-fullscreen + [] + (.exitFullscreen js/document))