Scrapboxのプレゼンモードの表示切り替えのしくみ

プレゼンモードは実は通常のエディタの見た目をCSSで切り替えているだけ

同じDOM・Reactコンポーネントを使いまわしている

navbarやテロメアが無いのはCSSで非表示にしているだけ

2段階の表示切り替え

1. 通常のエディタと、プレゼンモードの切り替え

2. OS毎のプレゼンモードのスタイル切り替え

キーボードのあるデバイスでは、左右キーでページ移動

touch deviceではページを連結して縦長スクロール

プレゼンモードをページめくりではなく縦スクロールにする

通常のエディタからプレゼンモードへの切り替え

ユーザーがStart presentationを押すと

Reactの<App>に.presentationclassが付く

https://gyazo.com/ee25e48b4f806e77e99446d01f9a2177

これはchrome devtoolで見れる

これを判別してプレゼンモード用のCSSでエディタを上書きしている

code:scss

.app.presentation {

.navbar,

.quick-launch,

.related-page-list,

.telomere,

.status-bar {

display: none;

}

見た目を上書きしているだけ

navbar等を消したり

OS毎のプレゼンスタイル切り替え

client jsでUserAgentを判別し、htmlのdata-osattributeにOS名をセットする

素朴にdocument.documentElement.setAttribute('data-os', os)を実行

すると<html data-os="mac">や<html data-os="ios">が付く

https://gyazo.com/86169a504cbf35210342cdf3f8bf6914

これをCSSで判別する

https://sass-lang.com/documentation/at-rules/mixin を使う

sassにmixinを定義して

code:css/mixins/os.scss

@mixin when-os-is($oses: mac) {

@each $os in $oses {

htmldata-os*='#{$os}' &,

&data-os*='#{$os}' {

@content;

}

@mixin when-touch-device {

@include when-os-is(android, ios) {

@content;

}

styleを切り替える

@include when-os-is(mac) { Mac用style }

@include when-touch-device { AndroidやiOS用style }

when-os-isとwhen-touch-deviceという名前

同様の表示切り替え機能がreact-display-switchを使ってclient jsにも実装されている

<When touch_device>など

data-display-style="presentation"も付いているが、プレゼンモードでは使われていない

上の<App>やめてこっちに統一したい。そのうち。shokai.icon

中黒の表示切り替えではdata-display-style="hide-dots"が使われている

この方式の良さ

cssの!importantが不要になった

Sassのmixinで、rootに近い位置からスコープを切るとそっちのstyleが優先されるので