0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-15 09:11:21 -05:00

🎉 Add fullscreen handling to viewer.

This commit is contained in:
Andrey Antukh 2020-04-03 12:06:22 +02:00
parent d589f19be4
commit 242eef8427
7 changed files with 49 additions and 5 deletions

View file

@ -5,7 +5,10 @@
&.fullscreen {
.viewer-header {
display: none;
opacity: 0;
&:hover {
opacity: 1;
}
}
.viewer-content {

View file

@ -131,6 +131,7 @@
(update [_ state]
(update-in state [:viewer-local :show-thumbnails] not))))
;; --- Shortcuts
(def shortcuts
{"+" #(st/emit! increase-zoom)

View file

@ -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]))

View file

@ -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

View file

@ -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]]]))

View file

@ -156,3 +156,7 @@
[event]
(let [data-string (-> event .-dataTransfer (.getData "text"))]
(ts/decode data-string)))
(defn fullscreen?
[]
(boolean (.-fullscreenElement js/document)))

View file

@ -82,4 +82,10 @@
(catch :default e
nil)))))))
(defn request-fullscreen
[el]
(.requestFullscreen el))
(defn exit-fullscreen
[]
(.exitFullscreen js/document))