mirror of
https://github.com/penpot/penpot.git
synced 2025-03-15 17:21:17 -05:00
🎉 Add fullscreen handling to viewer.
This commit is contained in:
parent
d589f19be4
commit
242eef8427
7 changed files with 49 additions and 5 deletions
|
@ -5,7 +5,10 @@
|
|||
|
||||
&.fullscreen {
|
||||
.viewer-header {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.viewer-content {
|
||||
|
|
|
@ -131,6 +131,7 @@
|
|||
(update [_ state]
|
||||
(update-in state [:viewer-local :show-thumbnails] not))))
|
||||
|
||||
;; --- Shortcuts
|
||||
|
||||
(def shortcuts
|
||||
{"+" #(st/emit! increase-zoom)
|
||||
|
|
|
@ -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]))
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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]]]))
|
||||
|
||||
|
|
|
@ -156,3 +156,7 @@
|
|||
[event]
|
||||
(let [data-string (-> event .-dataTransfer (.getData "text"))]
|
||||
(ts/decode data-string)))
|
||||
|
||||
(defn fullscreen?
|
||||
[]
|
||||
(boolean (.-fullscreenElement js/document)))
|
||||
|
|
|
@ -82,4 +82,10 @@
|
|||
(catch :default e
|
||||
nil)))))))
|
||||
|
||||
(defn request-fullscreen
|
||||
[el]
|
||||
(.requestFullscreen el))
|
||||
|
||||
(defn exit-fullscreen
|
||||
[]
|
||||
(.exitFullscreen js/document))
|
||||
|
|
Loading…
Add table
Reference in a new issue