mirror of
https://github.com/penpot/penpot.git
synced 2025-06-11 16:21:37 +02:00
🎉 Add comments to viewer.
This commit is contained in:
parent
e1db6d3a37
commit
64a6ba1949
45 changed files with 1629 additions and 1074 deletions
57
frontend/src/app/main/ui/components/fullscreen.cljs
Normal file
57
frontend/src/app/main/ui/components/fullscreen.cljs
Normal file
|
@ -0,0 +1,57 @@
|
|||
;; 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/.
|
||||
;;
|
||||
;; This Source Code Form is "Incompatible With Secondary Licenses", as
|
||||
;; defined by the Mozilla Public License, v. 2.0.
|
||||
;;
|
||||
;; Copyright (c) 2020 UXBOX Labs SL
|
||||
|
||||
(ns app.main.ui.components.fullscreen
|
||||
(:require
|
||||
[app.util.dom :as dom]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(def fullscreen-context
|
||||
(mf/create-context))
|
||||
|
||||
(mf/defc fullscreen-wrapper
|
||||
[{:keys [children] :as props}]
|
||||
(let [container (mf/use-ref)
|
||||
state (mf/use-state (dom/fullscreen?))
|
||||
|
||||
change
|
||||
(mf/use-callback
|
||||
(fn [event]
|
||||
(let [val (dom/fullscreen?)]
|
||||
(reset! state val))))
|
||||
|
||||
manager
|
||||
(mf/use-memo
|
||||
(mf/deps @state)
|
||||
(fn []
|
||||
(specify! state
|
||||
cljs.core/IFn
|
||||
(-invoke
|
||||
([it val]
|
||||
(if val
|
||||
(wapi/request-fullscreen (mf/ref-val container))
|
||||
(wapi/exit-fullscreen)))))))]
|
||||
|
||||
;; NOTE: the user interaction with F11 keyboard hot-key does not
|
||||
;; emits the `fullscreenchange` event; that event is emmited only
|
||||
;; when API is used. There are no way to detect the F11 behavior
|
||||
;; in a uniform cross browser way.
|
||||
|
||||
(mf/use-effect
|
||||
(fn []
|
||||
(.addEventListener js/document "fullscreenchange" change)
|
||||
(fn []
|
||||
(.removeEventListener js/document "fullscreenchange" change))))
|
||||
|
||||
[:div.fulllscreen-wrapper {:ref container :class (dom/classnames :fullscreen @state)}
|
||||
[:& (mf/provider fullscreen-context) {:value manager}
|
||||
children]]))
|
||||
|
Loading…
Add table
Add a link
Reference in a new issue