wani 0.1.9 → 0.1.11

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ff93e8caf99520439378ec599dea98fe0cb16c6704fbd7180fdedbd62b3ec2f
-  data.tar.gz: 0e10b33b011d5a227236da73dcb0ba8d576abb0f421010f832d0ba2e8372b582
+  metadata.gz: 85ec1823b674eea078278bc07b3516fc1cca469f3b00a42a7d53d677cf76306d
+  data.tar.gz: 2c6fe20e5c8749718b51cb2cadc40706cc610b75002c2ff061f9650733cdcc40
 SHA512:
-  metadata.gz: 9fd07de540a9a83d403e4dd5b38bd71306e19287605a0c56819e43b1addfb683c1528f95732dc4273a33c20d7dee57b95b41b55562b2712b4d67591a662faee0
-  data.tar.gz: b01f44dc7f6250766599fccbe388e816efd06b83d1ea098df3713049ba9db3cc6d55c8864150fe10ad4417778e5e029f341cf66d2bd7dab00989ada94bbdff73
+  metadata.gz: 0fe3730449dc7263365ea27e2fb84447c382896bec358ae4926aead67af4eb5fbf96cc1e13d0a2f055174948dd69ad6babd6af49f13331eb7d9f3a3ed3cb2804
+  data.tar.gz: 128750706c4ad65b2945348703d19d09606e30a4c24c1738bf3fe2974ed84622872469e4e1061079fb9d073e818e094e5586c1c415d82ed7237fa3cfdcd1afb9

data/README.md

@@ -25,7 +25,7 @@ npm ci
 bundle exec rake build:wasm
 
 gem build wani.gemspec
-gem install ./wani-0.1.9.gem
+gem install ./wani-0.1.11.gem
 
 wani new my-talk
 cd my-talk
@@ -111,6 +111,8 @@ notes:
 
 スライドは1920×1080、16:9、白背景です。タイトル・本文・脚注を分け、画面に合わせて全体を拡大縮小します。
 画像とフォントを読み込み、幅と高さに合わせて文字サイズを自動調整します。
+タイトルは1行に収めます。本文の段落・見出し・箇条書きは、使用フォントの全角20文字（「あ」20個）相当の幅以下なら折り返さず、それを超える場合は自然に折り返します。
+明示的な改行は維持し、改行ごとに幅を判定します。文字サイズは本文全体で共通です。
 画像は比率を維持して縦に配置し、画像だけの場合は本文領域を広く使います。
 収まらない内容は分割・スクロールせず、番号と内容を含む警告を表示します。
 画像の読み込みを最大15秒待ち、失敗やタイムアウトを通知します。
@@ -128,7 +130,10 @@ Ctrl+P でも印刷できます。
 
 ## 発表タイマー
 
-スライドの読み込み完了から計測し、既定では5分で時間切れ画面を表示します。
+hashなしのURLで開くと、最初のスライドに半透明の黒いベールと「スタート」ボタンを表示します。
+待機中はページ移動と計測を止め、ボタンを押すとベールが消えてタイマーが始まります。Fキーで全画面にして待機できます。
+`#slide=1` などのhash付きURLでは、読み込み完了から計測します。
+既定では5分で時間切れ画面を表示します。
 Front Matter の `time_limit` に分数を指定して変更できます（小数も可）。
 `time_limit: 0` でタイマーを無効にします。
 
@@ -136,12 +141,13 @@ Front Matter の `time_limit` に分数を指定して変更できます（小
 残り5秒は中央に数字を表示し、画面の短辺に対して20％・40％・60％・80％・100％と強調サイズを増やします。
 各数字は0.8秒で通常サイズに戻ります。動きを減らす設定では拡大アニメーションを省略します。
 時間切れになると、兎柄フードをくわえたワニ（さめ）の画像を表示します。
+画像は軽量なWebP形式で配布し、発表開始前に読み込みとデコードを済ませて、時間切れの文字と同時に表示します。
 左右キーまたは「スライドに戻る」ボタンで、時間切れ直前のスライドに戻れます。
 戻った後は通常通りページを移動でき、時間切れ画面は再表示しません。
 最終スライドの表示中はタイマーを一時停止し、カウントダウンも時間切れ画面も表示しません。
 前のスライドに戻ると、停止前の残り時間から再開します。1ページだけの場合も停止します。
 ページを再読み込みするとタイマーも最初から始まります。
-タイマーと時間切れ画面はPDFには含めません。
+開始待ち画面、タイマー、時間切れ画面はPDFには含めません。
 
 ## 同梱フォント
 

data/assets/build.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.1.9",
-  "source_sha256": "45e449c831f3ae3092ad05f56b8694ae73c2c5ffcc1a5fa1469351eb2e108b52",
+  "version": "0.1.11",
+  "source_sha256": "7fd82f57dedeab0d552457b69e4a32432bfce7316ce41c8618808d34c001e82e",
   "loader_commit": "dc6b0ffd5800ed9bfc49268ed8021d456f10ddf8",
-  "wasm_sha256": "64559bd712ffbafbea133c20cbd2a44ad2ad87410465c93766817ed858e0caee"
+  "wasm_sha256": "777e59a959570126bfe466047c60b3e49ae72bb9a4b645c6564321cf9580ae08"
 }

data/assets/index.html

@@ -24,10 +24,13 @@
 <p id="status" role="status">Ruby を読み込んでいます…</p>
 <aside id="warnings" role="status" hidden></aside>
 <div id="viewport"><main id="stage" aria-label="スライド"></main></div>
+<section id="start-overlay" role="dialog" aria-modal="true" aria-label="発表の開始" hidden>
+  <button id="start-presentation">スタート</button>
+</section>
 <output id="countdown" aria-live="off" aria-label="発表の残り時間" hidden></output>
 <section id="time-expired" role="dialog" aria-modal="true" aria-labelledby="time-expired-title" hidden>
   <h1 id="time-expired-title">時間切れです！</h1>
-  <div class="time-expired-image" role="img" aria-label="兎柄フードをくわえるワニ（さめ）"></div>
+  <img id="time-expired-image" class="time-expired-image" src="/assets/time-expired.webp" width="1086" height="724" alt="兎柄フードをくわえるワニ（さめ）">
   <p>← または → キーで元のスライドに戻れます</p>
   <button id="resume-slides">スライドに戻る</button>
 </section>

data/assets/style.css

@@ -34,6 +34,10 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .title { margin: 0 0 36px; white-space: nowrap; flex: 0 0 160px; font-weight: 700; line-height: 1.12; overflow: hidden; letter-spacing: -.025em; }
 .body { flex: 1 1 0; min-height: 0; overflow: hidden; line-height: 1.3; }
 .body p { margin: 0 0 .35em; }
+.titleless .body { display: flex; flex-direction: column; justify-content: safe center; text-align: center; }
+.titleless .body > * { flex-shrink: 0; }
+.titleless .body > :last-child { margin-bottom: 0; }
+.titleless .body img { margin-inline: auto; }
 .body ul, .body ol { margin: .2em 0 .4em; padding-left: 1.35em; }
 .body pre { margin: .3em 0; padding: .4em .55em; background: #f3f6f2; white-space: pre-wrap; tab-size: 2; }
 .body code { font-family: ui-monospace, "IBM Plex Sans JP", monospace; font-size: .8em; }
@@ -52,6 +56,7 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .bridge-wani { display: block; width: 100%; height: 44px; object-fit: contain; }
 .rabbit-position { position: absolute; bottom: 30px; width: 84px; height: 40px; left: calc((100% - 84px) * var(--rabbit-progress)); }
 .rabbit-image { display: block; width: 84px; height: 40px; }
+.decorations[data-direction="left"] .rabbit-image { scale: -1 1; }
 .slide.active .bridge-segment[data-appearing="true"] { animation: wani-arrive .35s ease-out; }
 .slide.active .decorations[data-moving="true"] .rabbit-position { animation: rabbit-advance .45s ease-in-out; }
 .slide.active .decorations[data-moving="true"] .rabbit-image { animation: rabbit-hop .45s ease-in-out; }
@@ -88,7 +93,7 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 #time-expired { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: white; color: #20352e; padding: 16px; overflow: auto; }
 #time-expired[hidden], #countdown[hidden] { display: none; }
 #time-expired h1 { margin: 0; font-size: clamp(24px, 4vw, 56px); }
-.time-expired-image { width: min(90vw, calc(65vh * 1024 / 683)); aspect-ratio: 1024 / 683; flex-shrink: 0; background: url('/assets/time-expired.png') right center / 200% 100% no-repeat; }
+.time-expired-image { width: min(90vw, calc(65vh * 1086 / 724)); aspect-ratio: 1086 / 724; height: auto; flex-shrink: 0; }
 #time-expired p { margin: 8px 0; text-align: center; }
 @media print { #countdown, #time-expired { display: none !important; } }
 
@@ -101,3 +106,8 @@ button:focus-visible, a:focus-visible { outline: 2px solid #557e64; outline-offs
 .island-left { left: 0; }
 .island-right { right: 0; }
 .rabbit-position { z-index: 2; }
+
+#start-overlay { position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center; background: rgb(0 0 0 / 60%); }
+#start-overlay[hidden] { display: none; }
+#start-presentation { padding: 18px 48px; font-size: clamp(24px, 4vw, 40px); font-weight: 700; border-radius: 12px; }
+@media print { #start-overlay { display: none !important; } }

data/assets/wani.wasm

@@ -1,4 +1,4 @@
 [diffend] Oversized file quarantined before diffing.
 name: data/assets/wani.wasm
-size: 35166009 bytes
-sha256: 64559bd712ffbafbea133c20cbd2a44ad2ad87410465c93766817ed858e0caee
+size: 35169057 bytes
+sha256: 777e59a959570126bfe466047c60b3e49ae72bb9a4b645c6564321cf9580ae08

data/lib/wani/browser/application.rb

@@ -26,11 +26,19 @@ module Wani
         @layout.wait_assets(element("stage"))
         @sections.each_with_index { |section, index| @layout.fit_slide(section, index + 1) }
         prepare_pages(false)
+        prepare_timer_image
         bind_events
+        @waiting_to_start = JS.global[:location][:hash].to_s.empty?
         go(hash_index)
         %w[previous next fullscreen speaker print print-notes].each { |id| element(id)[:disabled] = false }
         update_buttons
-        start_timer
+        if @waiting_to_start
+          element("start-overlay")[:hidden] = false
+          element("viewport")[:inert] = true
+          element("start-presentation").focus
+        else
+          start_timer
+        end
         element("status")[:textContent] = "準備できました"
       end
 
@@ -55,6 +63,15 @@ module Wani
       end
 
       def bind_events
+        element("start-presentation").addEventListener("click") do
+          next unless @waiting_to_start
+          @waiting_to_start = false
+          element("start-overlay")[:hidden] = true
+          element("viewport")[:inert] = false
+          element("start-presentation").blur
+          go(0)
+          start_timer
+        end
         element("previous").addEventListener("click") { go(@index - 1) }
         element("next").addEventListener("click") { go(@index + 1) }
         element("fullscreen").addEventListener("click") { fullscreen }
@@ -65,6 +82,7 @@ module Wani
           target = event[:target]
           next if event[:ctrlKey] == JS::True || event[:altKey] == JS::True || event[:metaKey] == JS::True
           next if %w[INPUT TEXTAREA SELECT].include?(target[:tagName].to_s) || target[:isContentEditable] == JS::True
+          next if @waiting_to_start && !%w[f F Escape n N].include?(event[:key].to_s)
           handled = true
           case event[:key].to_s
           when "ArrowRight", " ", "PageDown" then go(@index + 1)
@@ -89,6 +107,8 @@ module Wani
       end
 
       def go(index)
+        return if @waiting_to_start && @active_number
+
         if @time_expired
           @time_expired = false
           element("time-expired")[:hidden] = true
@@ -102,7 +122,7 @@ module Wani
         @active_number = @index + 1
         element("position")[:textContent] = "#{@index + 1} / #{@sections.length}"
         desired = "#slide=#{@index + 1}"
-        JS.global[:history].replaceState(JS::Null, "", desired) unless JS.global[:location][:hash].to_s == desired
+        JS.global[:history].replaceState(JS::Null, "", desired) unless @waiting_to_start || JS.global[:location][:hash].to_s == desired
         update_buttons
         @layout.scale
         sync_speaker

data/lib/wani/browser/layout.rb

@@ -7,6 +7,7 @@ module Wani
       BODY_MAX = 160
       TITLE_MIN = 24
       TITLE_MAX = 220
+      NO_WRAP_EMS = 20
 
       def initialize(document, &warn)
         @document, @warn = document, warn
@@ -55,6 +56,7 @@ module Wani
           @warn.call("スライド #{number}: タイトルが収まりません: #{title[:textContent]}") unless fits?(title)
         end
         body = section.querySelector(".body")
+        prepare_wrapping(body)
         fit_images(body)
         fit_font(body, BODY_MIN, BODY_MAX)
         @warn.call("スライド #{number}: 本文が収まりません: #{body[:textContent].to_s[0, 120]}") unless fits?(body)
@@ -72,6 +74,41 @@ module Wani
 
       private
 
+      def prepare_wrapping(body)
+        # Rebuild the wrappers when a slide is fitted again (for example after
+        # editing). Ranges preserve links, emphasis and explicit line breaks.
+        body.querySelectorAll("[data-wani-line]").to_a.each do |line|
+          line.replaceWith(*line[:childNodes].to_a)
+        end
+        body[:style][:fontSize] = "#{BODY_MIN}px"
+        body.querySelectorAll("p, h1, h2, h3, h4, h5, h6, li").to_a.each do |block|
+          next unless block.querySelector("p, ul, ol") == JS::Null
+          breaks = block.querySelectorAll("br").to_a
+          # Work backwards so extracting a range does not invalidate the next.
+          (0..breaks.length).to_a.reverse_each do |index|
+            range = @document.createRange
+            range.selectNodeContents(block)
+            range.setStartAfter(breaks[index - 1]) if index.positive?
+            range.setEndBefore(breaks[index]) if index < breaks.length
+            line = @document.createElement("span")
+            line.setAttribute("data-wani-line", "")
+            line[:style][:whiteSpace] = "nowrap"
+            line.appendChild(range.extractContents)
+            range.insertNode(line)
+
+            reference = @document.createElement("span")
+            reference[:textContent] = "あ" * NO_WRAP_EMS
+            reference[:style][:position] = "absolute"
+            reference[:style][:whiteSpace] = "nowrap"
+            block.appendChild(reference)
+            if line.getBoundingClientRect[:width].to_f > reference.getBoundingClientRect[:width].to_f + 0.01
+              line[:style][:whiteSpace] = "normal"
+            end
+            reference.remove
+          end
+        end
+      end
+
       def fits?(node)
         node[:scrollWidth].to_i <= node[:clientWidth].to_i + 1 && node[:scrollHeight].to_i <= node[:clientHeight].to_i + 1
       end

data/lib/wani/browser/presentation_timer.rb

@@ -3,6 +3,15 @@ module Wani
     class Application
       private
 
+      # Decode the actual displayed image before enabling presentation controls.
+      def prepare_timer_image
+        return if @presentation.time_limit.zero?
+
+        element("time-expired-image").decode.await
+      rescue JS::Error
+        warn("時間切れの画像を読み込めませんでした")
+      end
+
       def start_timer
         return if @presentation.time_limit.zero?
 

data/lib/wani/browser/renderer.rb

@@ -13,7 +13,10 @@ module Wani
         section.setAttribute("aria-label", "スライド #{slide.number}")
         title = child(section, "h1", "title")
         title[:textContent] = notes ? "ノート #{slide.number}" : slide.title
-        title[:style][:display] = "none" if title[:textContent].to_s.empty?
+        if title[:textContent].to_s.empty?
+          title[:style][:display] = "none"
+          section[:className] = "slide titleless"
+        end
         body = child(section, "div", "body")
         body[:innerHTML] = notes ? slide.notes_html : slide.html
         resolve_links(body)
@@ -53,6 +56,7 @@ module Wani
         current = BridgeProgress.new(scene.getAttribute("data-slide").to_s.to_i, @presentation.slides.length)
         scene[:style].setProperty("--rabbit-from", previous.rabbit_fraction.to_s)
         scene.setAttribute("data-moving", (previous.rabbit_fraction != current.rabbit_fraction).to_s)
+        scene.setAttribute("data-direction", current.rabbit_fraction < previous.rabbit_fraction ? "left" : "right")
         scene.querySelectorAll(".bridge-segment").to_a.each_with_index do |segment, index|
           appearing = index >= BridgeProgress::SEGMENTS - current.sharks && index < BridgeProgress::SEGMENTS - previous.sharks
           segment.setAttribute("data-appearing", appearing.to_s)

data/lib/wani/server/application.rb

@@ -7,7 +7,7 @@ module Wani
   module Server
     # Only the selected Markdown, images below its directory and fixed gem assets are public.
     class Application
-      ASSETS = %w[index.html style.css highlight.css rouge.LICENSE bootstrap.rb speaker.html rabbit.svg shark.svg time-expired.png runtime.pr672.js wani.wasm runtime.LICENSE runtime.NOTICE build.json
+      ASSETS = %w[index.html style.css highlight.css rouge.LICENSE bootstrap.rb speaker.html rabbit.svg shark.svg time-expired.webp runtime.pr672.js wani.wasm runtime.LICENSE runtime.NOTICE build.json
                   fonts/IBMPlexSansJP-Regular.woff2 fonts/IBMPlexSansJP-Bold.woff2].freeze
       TYPES = { ".html" => "text/html; charset=utf-8", ".css" => "text/css; charset=utf-8", ".rb" => "text/plain; charset=utf-8", ".js" => "text/javascript", ".wasm" => "application/wasm", ".md" => "text/plain; charset=utf-8", ".svg" => "image/svg+xml", ".png" => "image/png", ".jpg" => "image/jpeg", ".jpeg" => "image/jpeg", ".webp" => "image/webp", ".json" => "application/json", ".woff2" => "font/woff2" }.freeze
       IMAGES = %w[.png .jpg .jpeg .webp .svg].freeze

data/lib/wani/version.rb

@@ -1,3 +1,3 @@
 module Wani
-  VERSION = "0.1.9"
+  VERSION = "0.1.11"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: wani
 version: !ruby/object:Gem::Version
-  version: 0.1.9
+  version: 0.1.11
 platform: ruby
 authors:
 - ledsun
@@ -100,7 +100,7 @@ files:
 - assets/shark.svg
 - assets/speaker.html
 - assets/style.css
-- assets/time-expired.png
+- assets/time-expired.webp
 - assets/wani.wasm
 - exe/wani
 - lib/wani.rb