amadan
Ship transition.js, for the pages without a shell
A page transition the browser skips rejects its promises, and on a column, stage or topbar page, which has no shell.js, nothing handled them, so the console showed an uncaught AbortError. transition.js is Rastrillo's observer (023740c5, e5e35a3e, 6b1c5478), byte for byte: it swallows exactly a skipped transition's rejection and loads before the stylesheets, since the browser can reject one before pagereveal. The three layouts without a shell load it, ScriptNames lists it beside shell.js, Getting started gives it a row (its translations carry Rastrillo's and are drafts for the sentence on loading it), the scripts paragraph and the README name it, and node/transition_node.mjs drives it as it does shell.js. TestTransitionContract holds it string-free, small and listening for pageswap and pagereveal only.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
27 files changed,
+175
−50
README.md+1 −0check/scripts_test.go+34 −2check/shell_test.go+8 −0examples/examples.json+4 −1examples/layout-column/default.html+1 −0examples/layout-stage/default.html+1 −0examples/layout-topbar/default.html+1 −0fiesta.go+6 −3fiesta_test.go+1 −1internal/gallery/copy.go+18 −17internal/gallery/i18n/ar.json+2 −1internal/gallery/i18n/bn.json+2 −1internal/gallery/i18n/drafts.json+17 −1internal/gallery/i18n/es.json+2 −1internal/gallery/i18n/ga.json+2 −1internal/gallery/i18n/hi.json+2 −1internal/gallery/i18n/ja.json+2 −1internal/gallery/i18n/pt-PT.json+2 −1internal/gallery/i18n/ru.json+2 −1internal/gallery/i18n/vi.json+2 −1internal/gallery/i18n/yue.json+2 −1internal/gallery/i18n/zh-Hans.json+2 −1internal/gallery/started.go+14 −13internal/gallery/started_test.go+1 −1js/transition.js+23 −0releases/1.2.0/SHA256SUMS+1 −0releases/1.2.0/transition.js+22 −0
diff --git a/README.md b/README.md| index a6b6d4b..74044f1 100644 |
| --- a/README.md |
| +++ b/README.md |
| @@ -28,6 +28,7 @@ Everything works with scripts off. The scripts are enhancements, each its own fi |
| - `light.js` lights the page from where the sun is at this hour and puts the pointer's position on the button under it. Delete it and the page is the still design. |
| - `anchor.js` keeps a dropdown's menu on the screen in a browser without CSS anchor positioning. |
| - `shell.js` is phone navigation for the sidebar and console shells. |
| +- `transition.js` stops a page transition the browser skips from logging an error on a column, stage or topbar page. It is the one exception to the order: load it before the stylesheets, without `defer`. Sidebar and console pages don't need it, because `shell.js` does the same. |
| - `copy.js` makes a snippet's Copy button copy its code, and keeps the button hidden where the browser has no clipboard. |
| - `select.js` makes a `<select data-rst-select>` searchable. |
| - `datetime.js` is the natural-language date field: "tomorrow", "next fri 9am", "in 2 weeks". |
diff --git a/check/scripts_test.go b/check/scripts_test.go| index dc08e34..187bef5 100644 |
| --- a/check/scripts_test.go |
| +++ b/check/scripts_test.go |
| @@ -4,6 +4,7 @@ import ( |
| "bytes" |
| "encoding/json" |
| "fmt" |
| + "regexp" |
| "slices" |
| "strings" |
| "testing" |
| @@ -578,13 +579,44 @@ func TestSelectContract(t *testing.T) { |
| } |
| } |
| +// transition.js is the one script a page loads before its stylesheets, |
| +// so it holds to the others' shape and stays small, and it puts nothing |
| +// on screen: no words to look up, no attribute or text written. It |
| +// listens for the two events a view transition arrives on and nothing |
| +// else. |
| +func TestTransitionContract(t *testing.T) { |
| + js := string(shippedScript(t, "transition.js")) |
| + if !strings.HasPrefix(strings.TrimSpace(js), "/*") || !strings.Contains(js, "(function () {") || !strings.HasSuffix(strings.TrimSpace(js), "})();") { |
| + t.Error("transition.js should be its contract comment and a single IIFE") |
| + } |
| + if strings.Contains(js, "eval(") || strings.Contains(js, "new Function") || strings.Contains(js, "\t") { |
| + t.Error("transition.js must stay CSP-clean and use two-space indentation") |
| + } |
| + for _, screen := range []string{"fiestaWord", "fiestaStrings", "data-rst-", "textContent", "setAttribute", "innerHTML"} { |
| + if strings.Contains(js, screen) { |
| + t.Errorf("transition.js mentions %s; it puts nothing on screen", screen) |
| + } |
| + } |
| + listens := regexp.MustCompile(`addEventListener\("([a-z]+)"`).FindAllStringSubmatch(js, -1) |
| + var events []string |
| + for _, m := range listens { |
| + events = append(events, m[1]) |
| + } |
| + if !slices.Equal(events, []string{"pageswap", "pagereveal"}) { |
| + t.Errorf("transition.js listens for %v, want pageswap and pagereveal only", events) |
| + } |
| + if n := len(js); n > 1024 { |
| + t.Errorf("transition.js is %d bytes; it blocks the first render, so keep it under 1 KiB", n) |
| + } |
| +} |
| + |
| // No shipped script may reach off-origin: every one fiesta.ScriptNames |
| // lists is vendored, first-party and dependency-free. The count is |
| // pinned so a list that lost its names could not pass by naming none. |
| func TestScriptsAreSelfContained(t *testing.T) { |
| names := fiesta.ScriptNames() |
| - if len(names) != 9 { |
| - t.Fatalf("fiesta.ScriptNames() lists %d scripts, want 9: %v", len(names), names) |
| + if len(names) != 10 { |
| + t.Fatalf("fiesta.ScriptNames() lists %d scripts, want 10: %v", len(names), names) |
| } |
| for _, name := range names { |
| js := string(shippedScript(t, name)) |
diff --git a/check/shell_test.go b/check/shell_test.go| index c34b1e2..af28071 100644 |
| --- a/check/shell_test.go |
| +++ b/check/shell_test.go |
| @@ -52,3 +52,11 @@ func skippedTransitionsAreSwallowed(t *testing.T, script string) { |
| t.Errorf("node/transition_node.mjs checked %d rejections against %s, want %d", got.Checked, script, want) |
| } |
| } |
| + |
| +// transition.js is shell.js's transition handling alone, for a column, |
| +// stage or topbar page, which has no shell.js. It loads before the |
| +// stylesheets, because the browser can reject a skipped incoming |
| +// transition before pagereveal and a deferred script would miss it. |
| +func TestTransitionJSSwallowsOnlyASkippedTransition(t *testing.T) { |
| + skippedTransitionsAreSwallowed(t, "transition.js") |
| +} |
diff --git a/examples/examples.json b/examples/examples.json| index bacba41..067fa49 100644 |
| --- a/examples/examples.json |
| +++ b/examples/examples.json |
| @@ -1620,6 +1620,7 @@ |
| "busy.js", |
| "light.js", |
| "anchor.js", |
| + "transition.js", |
| "select.js", |
| "calendar.js", |
| "datetime.js" |
| @@ -1660,6 +1661,7 @@ |
| "busy.js", |
| "light.js", |
| "anchor.js", |
| + "transition.js", |
| "select.js", |
| "calendar.js", |
| "datetime.js" |
| @@ -1865,7 +1867,8 @@ |
| "fiesta.js", |
| "busy.js", |
| "light.js", |
| - "anchor.js" |
| + "anchor.js", |
| + "transition.js" |
| ], |
| "default": "default", |
| "states": [ |
diff --git a/examples/layout-column/default.html b/examples/layout-column/default.html| index 94a5ce1..2771983 100644 |
| --- a/examples/layout-column/default.html |
| +++ b/examples/layout-column/default.html |
| @@ -3,6 +3,7 @@ |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| +<script src="../../js/transition.js"></script> |
| <title>The column shell: default</title> |
| <link rel="stylesheet" href="../../css/tokens.css"> |
| <link rel="stylesheet" href="../../css/themes/day.css"> |
diff --git a/examples/layout-stage/default.html b/examples/layout-stage/default.html| index 054bea6..e2f591c 100644 |
| --- a/examples/layout-stage/default.html |
| +++ b/examples/layout-stage/default.html |
| @@ -3,6 +3,7 @@ |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| +<script src="../../js/transition.js"></script> |
| <title>The stage shell: default</title> |
| <link rel="stylesheet" href="../../css/tokens.css"> |
| <link rel="stylesheet" href="../../css/themes/day.css"> |
diff --git a/examples/layout-topbar/default.html b/examples/layout-topbar/default.html| index 45e3f87..0a6149b 100644 |
| --- a/examples/layout-topbar/default.html |
| +++ b/examples/layout-topbar/default.html |
| @@ -3,6 +3,7 @@ |
| <head> |
| <meta charset="utf-8"> |
| <meta name="viewport" content="width=device-width"> |
| +<script src="../../js/transition.js"></script> |
| <title>The topbar shell: default</title> |
| <link rel="stylesheet" href="../../css/tokens.css"> |
| <link rel="stylesheet" href="../../css/themes/day.css"> |
diff --git a/fiesta.go b/fiesta.go| index d02fbb5..22b24cc 100644 |
| --- a/fiesta.go |
| +++ b/fiesta.go |
| @@ -77,9 +77,12 @@ func ThemeCSS(name string) ([]byte, bool) { |
| // remembered colour scheme and owns the menus every page has, busy and |
| // light next, since they touch every button, the shells' navigation |
| // after that, then the snippet's Copy button and the controls, and |
| -// calendar.js last because it is the grid datetime.js asks it for. The |
| -// slice matches the files in js/ exactly. |
| -var scriptNames = []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| +// calendar.js last because it is the grid datetime.js asks it for. |
| +// transition.js sits beside shell.js because it does shell.js's |
| +// transition work on a page without a shell, though such a page loads |
| +// it before its stylesheets rather than deferred. The slice matches the |
| +// files in js/ exactly. |
| +var scriptNames = []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "transition.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| // ScriptNames returns the optional scripts' file names, in load order. |
| // The returned slice is a copy. |
diff --git a/fiesta_test.go b/fiesta_test.go| index 1dcbb95..a12511a 100644 |
| --- a/fiesta_test.go |
| +++ b/fiesta_test.go |
| @@ -103,7 +103,7 @@ func TestEveryThemeIsEmbedded(t *testing.T) { |
| } |
| func TestEveryScriptIsEmbedded(t *testing.T) { |
| - want := []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| + want := []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "transition.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| if got := ScriptNames(); !slices.Equal(got, want) { |
| t.Fatalf("ScriptNames() = %q, want %q", got, want) |
| } |
diff --git a/internal/gallery/copy.go b/internal/gallery/copy.go| index ffe1ddb..c3e85e3 100644 |
| --- a/internal/gallery/copy.go |
| +++ b/internal/gallery/copy.go |
| @@ -121,26 +121,27 @@ var text = map[string]string{ |
| // Getting started: its headings, the weights table's note and line, |
| // and the per-file blurbs Rastrillo wrote for the files Fiesta |
| // ships too. |
| - "gallery.started.stylesheets": "The stylesheets", |
| - "gallery.started.scripts": "The scripts", |
| - "gallery.started.weights": "What each file weighs", |
| - "gallery.started.weights.note": "Sizes in KiB. Gzipped is what a visitor downloads.", |
| - "gallery.started.weight": "{raw} as written · {gzip} gzipped · {stripped} gzipped without comments", |
| - "gallery.started.upgrading": "Upgrading", |
| - "gallery.started.file.tokens": "Structure: every component class, every scale, and no colour literal anywhere. The same file under every theme.", |
| - "gallery.started.file.theme": "Colour, type family and shape for the {theme} theme: one :root block where every colour is declared once as a light-dark() pair.", |
| - "gallery.started.file.shell-css": "The slide between pages on a phone, for the sidebar and console shells. Deletable with shell.js.", |
| - "gallery.started.file.light-js": "The light the depth styles read: shadows lit by the hour, and a sheen on the button under the pointer. Delete it for the still design.", |
| - "gallery.started.file.anchor-js": "Keeps a dropdown's menu on the screen in browsers without CSS anchor positioning. It does nothing where they have it: delete it once every browser you support does.", |
| - "gallery.started.file.shell-js": "Phone navigation for the sidebar and console shells: the slide between pages, Back that reuses history, and focus returned to the section you left. Deletable on its own.", |
| - "gallery.started.file.copy-js": "The snippet's Copy button: it copies the code, says Copied, and stays hidden where the browser has no clipboard. Deletable on its own.", |
| - "gallery.started.file.select-js": "field-select's searchable combobox. Inert until a select opts in with data-rst-select, and deletable on its own.", |
| - "gallery.started.file.datetime-js": "The date fields' natural-language input. Inert until a field opts in with data-rst-date or data-rst-time, and deletable on its own.", |
| - "gallery.started.file.calendar-js": "The month grid that field's calendar button opens. Inert until datetime.js asks it for a panel, and deletable on its own: without it the button falls back to the browser's own picker.", |
| + "gallery.started.stylesheets": "The stylesheets", |
| + "gallery.started.scripts": "The scripts", |
| + "gallery.started.weights": "What each file weighs", |
| + "gallery.started.weights.note": "Sizes in KiB. Gzipped is what a visitor downloads.", |
| + "gallery.started.weight": "{raw} as written · {gzip} gzipped · {stripped} gzipped without comments", |
| + "gallery.started.upgrading": "Upgrading", |
| + "gallery.started.file.tokens": "Structure: every component class, every scale, and no colour literal anywhere. The same file under every theme.", |
| + "gallery.started.file.theme": "Colour, type family and shape for the {theme} theme: one :root block where every colour is declared once as a light-dark() pair.", |
| + "gallery.started.file.shell-css": "The slide between pages on a phone, for the sidebar and console shells. Deletable with shell.js.", |
| + "gallery.started.file.light-js": "The light the depth styles read: shadows lit by the hour, and a sheen on the button under the pointer. Delete it for the still design.", |
| + "gallery.started.file.anchor-js": "Keeps a dropdown's menu on the screen in browsers without CSS anchor positioning. It does nothing where they have it: delete it once every browser you support does.", |
| + "gallery.started.file.shell-js": "Phone navigation for the sidebar and console shells: the slide between pages, Back that reuses history, and focus returned to the section you left. Deletable on its own.", |
| + "gallery.started.file.transition-js": "Stops a skipped page transition logging an error on column, stage and topbar pages. Load it before the stylesheets, without defer. Sidebar and console pages don't need it.", |
| + "gallery.started.file.copy-js": "The snippet's Copy button: it copies the code, says Copied, and stays hidden where the browser has no clipboard. Deletable on its own.", |
| + "gallery.started.file.select-js": "field-select's searchable combobox. Inert until a select opts in with data-rst-select, and deletable on its own.", |
| + "gallery.started.file.datetime-js": "The date fields' natural-language input. Inert until a field opts in with data-rst-date or data-rst-time, and deletable on its own.", |
| + "gallery.started.file.calendar-js": "The month grid that field's calendar button opens. Inert until datetime.js asks it for a panel, and deletable on its own: without it the button falls back to the browser's own picker.", |
| // Getting started: its lead, its sections' bodies and headings, the blurbs for Fiesta's own files, and the total. |
| "gallery.started.lead": "Fiesta is one stylesheet and a handful of optional scripts. Everything works with scripts off; the scripts are enhancements, each its own file, so you load the ones your page uses and nothing else.", |
| "gallery.started.stylesheets.body": "fiesta.css is tokens.css and the Day theme joined, comments stripped, under 25 KiB gzipped. The tokens hold every component's layout and behaviour; the theme paints them. fiesta-plain.css and fiesta-signal.css are the same tokens with the Plain and Signal themes. A page that uses the sidebar or console shell links shell.css as well; nothing else needs it.", |
| - "gallery.started.scripts.body": "fiesta.js closes menus, lets a switch's knob be dragged, gives iOS its pressed state and runs the colour-scheme menu; load it first. busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js and calendar.js are each inert until a page uses what they enhance, and each deletable on its own. Load calendar.js last.", |
| + "gallery.started.scripts.body": "fiesta.js closes menus, lets a switch's knob be dragged, gives iOS its pressed state and runs the colour-scheme menu; load it first. busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js and calendar.js are each inert until a page uses what they enhance, and each deletable on its own. Load calendar.js last.", |
| "gallery.started.file.bundle": "Tokens and the {theme} theme in one file: every component class, every scale, and the colours, each declared once as a light-dark() pair.", |
| "gallery.started.file.fiesta-js": "The enhancements most pages want: menus that close on an outside click and on Escape, the switch's drag, iOS's pressed state, and the colour-scheme menu. Load it first.", |
| "gallery.started.file.busy-js": "The busy rule: while a form sends, its button shows a spinner for at least 650ms and refuses a second submit, and Back hands it back.", |
diff --git a/internal/gallery/i18n/ar.json b/internal/gallery/i18n/ar.json| index 213199e..a138903 100644 |
| --- a/internal/gallery/i18n/ar.json |
| +++ b/internal/gallery/i18n/ar.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "الكلمات التي يعرضها select.js وdatetime.js وcopy.js على الشاشة، بـ{language}. حمّل الملف الذي يطابق lang صفحتك.", |
| "gallery.started.file.theme": "اللون وعائلة الخط والشكل لسمة {theme}: كتلة :root واحدة يُعلَن فيها كل لون مرة واحدة كزوج light-dark().", |
| "gallery.started.file.tokens": "البنية: كل أصناف المكوّنات وكل السلالم، ولا قيمة لون صريحة في أي موضع. الملف نفسه تحت كل سمة.", |
| + "gallery.started.file.transition-js": "يمنع تسجيل خطأ عند تخطّي انتقال الصفحة في صفحات column وstage وtopbar. حمّله قبل أوراق الأنماط، دون defer. لا تحتاجه صفحات sidebar وconsole.", |
| "gallery.started.lead": "Fiesta ورقة أنماط واحدة وحفنة من السكربتات الاختيارية. كل شيء يعمل مع إيقاف السكربتات؛ فالسكربتات تحسينات، كل واحد في ملفه، فتحمّل ما تستخدمه صفحتك ولا شيء غيره.", |
| "gallery.started.link.body": "اربط fiesta.css من شبكة CDN فيصبح ترميزك منسّقًا. /1/ هو أحدث إصدار 1.x؛ والتغيير الذي قد يكسر ترميزًا قائمًا إصدار رئيسي جديد. ثبّت الإصدار بدقة حين تحتاج بايتات لا تتغير أبدًا.", |
| "gallery.started.link.heading": "الرابط الواحد", |
| "gallery.started.own.body": "خذ tokens.css وسمة واحدة، أو الملف المدموج، من إصدار وقدّمها مع موقعك؛ والملفات تحت releases/<version>/ في المستودع تحمل SHA256SUMS. اربط tokens.css أولًا.", |
| "gallery.started.own.heading": "تقديم نسختك الخاصة", |
| "gallery.started.scripts": "النصوص البرمجية", |
| - "gallery.started.scripts.body": "يغلق fiesta.js القوائم، ويتيح سحب مقبض المفتاح، ويمنح iOS حالة الضغط، ويشغّل قائمة نظام الألوان؛ حمّله أولًا. أما busy.js وlight.js وanchor.js وshell.js وcopy.js وselect.js وdatetime.js وcalendar.js فكل منها خامل حتى تستخدم الصفحة ما يحسّنه، ويمكن حذف كل منها وحده. حمّل calendar.js أخيرًا.", |
| + "gallery.started.scripts.body": "يغلق fiesta.js القوائم، ويتيح سحب مقبض المفتاح، ويمنح iOS حالة الضغط، ويشغّل قائمة نظام الألوان؛ حمّله أولًا. أما busy.js وlight.js وanchor.js وshell.js وtransition.js وcopy.js وselect.js وdatetime.js وcalendar.js فكل منها خامل حتى تستخدم الصفحة ما يحسّنه، ويمكن حذف كل منها وحده. حمّل calendar.js أخيرًا.", |
| "gallery.started.stylesheets": "أوراق الأنماط", |
| "gallery.started.stylesheets.body": "fiesta.css هو tokens.css وسمة Day مدموجتين، بلا تعليقات، أقل من 25 KiB مضغوطًا بـ gzip. الرموز تحمل تخطيط كل مكوّن وسلوكه؛ والسمة تلوّنها. وfiesta-plain.css وfiesta-signal.css هما الرموز نفسها مع سمتي Plain وSignal. والصفحة التي تستخدم الهيكل sidebar أو console تربط shell.css أيضًا؛ ولا شيء غيرها يحتاجه.", |
| "gallery.started.total": "الصفحة التي تربط fiesta.css وكل السكربتات تحصل على {raw} من CSS وJavaScript كما كُتبت، و{gzip} مضغوطة بـ gzip.", |
diff --git a/internal/gallery/i18n/bn.json b/internal/gallery/i18n/bn.json| index 292ba41..b808cdc 100644 |
| --- a/internal/gallery/i18n/bn.json |
| +++ b/internal/gallery/i18n/bn.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "select.js, datetime.js আর copy.js স্ক্রিনে যে শব্দগুলো দেখায়, {language}-এ। আপনার পাতার lang-এর সঙ্গে যেটি মেলে, সেটি লোড করুন।", |
| "gallery.started.file.theme": "{theme} থিমের রঙ, টাইপ ফ্যামিলি আর আকার: একটিমাত্র :root ব্লক, যেখানে প্রতিটি রঙ একবার light-dark() জোড়া হিসেবে ঘোষিত।", |
| "gallery.started.file.tokens": "কাঠামো: প্রতিটি কম্পোনেন্ট ক্লাস, প্রতিটি স্কেল, আর কোথাও কোনও রঙের লিটারাল নেই। প্রতিটি থিমে একই ফাইল।", |
| + "gallery.started.file.transition-js": "column, stage ও topbar পাতায় পাতার ট্রানজিশন বাদ পড়লে ত্রুটি লগ হওয়া আটকায়। এটি স্টাইলশিটের আগে লোড করুন, defer ছাড়া। sidebar ও console পাতায় এটি লাগে না।", |
| "gallery.started.lead": "Fiesta হলো একটি স্টাইলশিট আর হাতেগোনা কয়েকটি ঐচ্ছিক স্ক্রিপ্ট। স্ক্রিপ্ট বন্ধ থাকলেও সব কাজ করে; স্ক্রিপ্টগুলো উন্নতি, প্রতিটি আলাদা ফাইলে, তাই আপনার পাতা যেগুলো ব্যবহার করে কেবল সেগুলোই লোড করুন, আর কিছু নয়।", |
| "gallery.started.link.body": "CDN থেকে fiesta.css লিঙ্ক করুন, আপনার মার্কআপ সেজে যাবে। /1/ হলো সবচেয়ে নতুন 1.x; যে পরিবর্তন পুরোনো মার্কআপ ভেঙে দেবে, সেটি নতুন মেজর সংস্করণ। এমন বাইট দরকার হলে যা কখনো বদলায় না, নির্দিষ্ট সংস্করণটি বেঁধে দিন।", |
| "gallery.started.link.heading": "একটি লিঙ্ক", |
| "gallery.started.own.body": "একটি রিলিজ থেকে tokens.css আর একটি থিম, বা জোড়া ফাইলটি নিন, আর আপনার সাইটের সঙ্গে পরিবেশন করুন; রিপোজিটরির releases/<version>/-এর ফাইলগুলোর সঙ্গে একটি SHA256SUMS থাকে। tokens.css আগে লিঙ্ক করুন।", |
| "gallery.started.own.heading": "নিজের কপি পরিবেশন করা", |
| "gallery.started.scripts": "স্ক্রিপ্ট", |
| - "gallery.started.scripts.body": "fiesta.js মেনু বন্ধ করে, সুইচের নব টেনে সরাতে দেয়, iOS-কে তার চাপা অবস্থা দেয় আর রঙের ধরনের মেনু চালায়; এটি আগে লোড করুন। busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js আর calendar.js প্রতিটিই নিষ্ক্রিয় থাকে যতক্ষণ না পাতা সেগুলোর উন্নত করা জিনিস ব্যবহার করে, আর প্রতিটি আলাদাভাবে মুছে ফেলা যায়। calendar.js সবার শেষে লোড করুন।", |
| + "gallery.started.scripts.body": "fiesta.js মেনু বন্ধ করে, সুইচের নব টেনে সরাতে দেয়, iOS-কে তার চাপা অবস্থা দেয় আর রঙের ধরনের মেনু চালায়; এটি আগে লোড করুন। busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js আর calendar.js প্রতিটিই নিষ্ক্রিয় থাকে যতক্ষণ না পাতা সেগুলোর উন্নত করা জিনিস ব্যবহার করে, আর প্রতিটি আলাদাভাবে মুছে ফেলা যায়। calendar.js সবার শেষে লোড করুন।", |
| "gallery.started.stylesheets": "স্টাইলশিট", |
| "gallery.started.stylesheets.body": "fiesta.css হলো tokens.css আর Day থিম জোড়া দেওয়া, মন্তব্য বাদ দিয়ে, gzip-এ 25 KiB-এর কম। টোকেনে থাকে প্রতিটি উপাদানের বিন্যাস আর আচরণ; থিম সেগুলো রাঙায়। fiesta-plain.css আর fiesta-signal.css হলো একই টোকেন, Plain আর Signal থিমের সঙ্গে। যে পাতা sidebar বা console শেল ব্যবহার করে, সেটি shell.css-ও লিঙ্ক করে; আর কিছুর এটি লাগে না।", |
| "gallery.started.total": "যে পাতা fiesta.css আর সব স্ক্রিপ্ট লিঙ্ক করে, সে লেখা অবস্থায় {raw} CSS আর JavaScript পায়, gzip-এ {gzip}।", |
diff --git a/internal/gallery/i18n/drafts.json b/internal/gallery/i18n/drafts.json| index 4d3a6c3..e600b28 100644 |
| --- a/internal/gallery/i18n/drafts.json |
| +++ b/internal/gallery/i18n/drafts.json |
| @@ -1279,6 +1279,22 @@ |
| "zh-Hans" |
| ] |
| }, |
| + "gallery.started.file.transition-js": { |
| + "english": "Stops a skipped page transition logging an error on column, stage and topbar pages. Load it before the stylesheets, without defer. Sidebar and console pages don't need it.", |
| + "locales": [ |
| + "ar", |
| + "bn", |
| + "es", |
| + "ga", |
| + "hi", |
| + "ja", |
| + "pt-PT", |
| + "ru", |
| + "vi", |
| + "yue", |
| + "zh-Hans" |
| + ] |
| + }, |
| "gallery.started.lead": { |
| "english": "Fiesta is one stylesheet and a handful of optional scripts. Everything works with scripts off; the scripts are enhancements, each its own file, so you load the ones your page uses and nothing else.", |
| "locales": [ |
| @@ -1360,7 +1376,7 @@ |
| ] |
| }, |
| "gallery.started.scripts.body": { |
| - "english": "fiesta.js closes menus, lets a switch's knob be dragged, gives iOS its pressed state and runs the colour-scheme menu; load it first. busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js and calendar.js are each inert until a page uses what they enhance, and each deletable on its own. Load calendar.js last.", |
| + "english": "fiesta.js closes menus, lets a switch's knob be dragged, gives iOS its pressed state and runs the colour-scheme menu; load it first. busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js and calendar.js are each inert until a page uses what they enhance, and each deletable on its own. Load calendar.js last.", |
| "locales": [ |
| "ar", |
| "bn", |
diff --git a/internal/gallery/i18n/es.json b/internal/gallery/i18n/es.json| index 25d805d..c65af99 100644 |
| --- a/internal/gallery/i18n/es.json |
| +++ b/internal/gallery/i18n/es.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "Las palabras que select.js, datetime.js y copy.js ponen en pantalla, en {language}. Carga el que coincida con el lang de tu página.", |
| "gallery.started.file.theme": "Color, familia tipográfica y forma del tema {theme}: un único bloque :root donde cada color se declara una vez como par light-dark().", |
| "gallery.started.file.tokens": "Estructura: todas las clases de componentes, todas las escalas y ningún literal de color. El mismo archivo bajo cualquier tema.", |
| + "gallery.started.file.transition-js": "Evita que una transición de página omitida registre un error en las páginas column, stage y topbar. Cárgalo antes de las hojas de estilo, sin defer. Las páginas sidebar y console no lo necesitan.", |
| "gallery.started.lead": "Fiesta es una hoja de estilos y un puñado de scripts opcionales. Todo funciona sin scripts; los scripts son mejoras, cada uno en su propio archivo, así que cargas los que usa tu página y nada más.", |
| "gallery.started.link.body": "Enlaza fiesta.css desde la CDN y tu marcado queda con estilo. /1/ es la 1.x más reciente; un cambio que rompería el marcado existente es una versión mayor nueva. Fija la versión exacta cuando necesites bytes que no cambien nunca.", |
| "gallery.started.link.heading": "El único enlace", |
| "gallery.started.own.body": "Toma tokens.css y un tema, o el archivo unido, de una versión publicada y sírvelos con tu sitio; los archivos de releases/<version>/ en el repositorio traen un SHA256SUMS. Enlaza tokens.css primero.", |
| "gallery.started.own.heading": "Servir tu propia copia", |
| "gallery.started.scripts": "Los scripts", |
| - "gallery.started.scripts.body": "fiesta.js cierra los menús, permite arrastrar el mando de un interruptor, da a iOS su estado pulsado y hace funcionar el menú de esquema de color; cárgalo primero. busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js y calendar.js están inactivos hasta que una página usa lo que mejoran, y cada uno se puede borrar por separado. Carga calendar.js al final.", |
| + "gallery.started.scripts.body": "fiesta.js cierra los menús, permite arrastrar el mando de un interruptor, da a iOS su estado pulsado y hace funcionar el menú de esquema de color; cárgalo primero. busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js y calendar.js están inactivos hasta que una página usa lo que mejoran, y cada uno se puede borrar por separado. Carga calendar.js al final.", |
| "gallery.started.stylesheets": "Las hojas de estilo", |
| "gallery.started.stylesheets.body": "fiesta.css es tokens.css y el tema Day unidos, sin comentarios, por debajo de 25 KiB con gzip. Los tokens contienen la disposición y el comportamiento de cada componente; el tema los pinta. fiesta-plain.css y fiesta-signal.css son los mismos tokens con los temas Plain y Signal. Una página que usa el armazón sidebar o console enlaza también shell.css; nada más lo necesita.", |
| "gallery.started.total": "Una página que enlaza fiesta.css y todos los scripts recibe {raw} de CSS y JavaScript tal como está escrito, {gzip} con gzip.", |
diff --git a/internal/gallery/i18n/ga.json b/internal/gallery/i18n/ga.json| index bc5ea9d..c6fa42a 100644 |
| --- a/internal/gallery/i18n/ga.json |
| +++ b/internal/gallery/i18n/ga.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "Na focail a chuireann select.js, datetime.js agus copy.js ar an scáileán, i {language}. Lódáil an ceann a mheaitseálann lang do leathanaigh.", |
| "gallery.started.file.theme": "Dath, teaghlach cló agus cruth don téama {theme}: bloc :root amháin ina bhfógraítear gach dath uair amháin mar phéire light-dark().", |
| "gallery.started.file.tokens": "Struchtúr: gach aicme comhpháirte, gach scála, agus gan dath litriúil ar bith. An comhad céanna faoi gach téama.", |
| + "gallery.started.file.transition-js": "Cuireann sé cosc ar earráid a logáil nuair a scipeáiltear trasdul leathanaigh ar leathanaigh column, stage agus topbar. Lódáil é roimh na stílbhileoga, gan defer. Níl sé de dhíth ar leathanaigh sidebar ná console.", |
| "gallery.started.lead": "Is stílbhileog amháin agus dornán scripteanna roghnacha é Fiesta. Oibríonn gach rud le scripteanna múchta; is feabhsuithe iad na scripteanna, gach ceann ina chomhad féin, mar sin lódálann tú na cinn a úsáideann do leathanach agus faic eile.", |
| "gallery.started.link.body": "Nasc fiesta.css ón CDN agus tá stíl ar do mharcáil. Is é /1/ an 1.x is nuaí; is mórleagan nua é athrú a bhrisfeadh marcáil atá ann cheana. Greamaigh an leagan beacht nuair a theastaíonn bearta uait nach mbogann choíche.", |
| "gallery.started.link.heading": "An t-aon nasc", |
| "gallery.started.own.body": "Tóg tokens.css agus téama amháin, nó an comhad comhcheangailte, ó scaoileadh agus freastail iad le do shuíomh; tá SHA256SUMS ag na comhaid faoi releases/<version>/ sa stór. Nasc tokens.css ar dtús.", |
| "gallery.started.own.heading": "Do chóip féin a fhreastal", |
| "gallery.started.scripts": "Na scripteanna", |
| - "gallery.started.scripts.body": "Dúnann fiesta.js roghchláir, ligeann sé cnapán laisc a tharraingt, tugann sé a staid bhrúite do iOS agus ritheann sé roghchlár na scéime dathanna; lódáil ar dtús é. Tá busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js agus calendar.js díomhaoin go dtí go n-úsáideann leathanach an rud a fheabhsaíonn siad, agus is féidir gach ceann a scriosadh leis féin. Lódáil calendar.js ar deireadh.", |
| + "gallery.started.scripts.body": "Dúnann fiesta.js roghchláir, ligeann sé cnapán laisc a tharraingt, tugann sé a staid bhrúite do iOS agus ritheann sé roghchlár na scéime dathanna; lódáil ar dtús é. Tá busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js agus calendar.js díomhaoin go dtí go n-úsáideann leathanach an rud a fheabhsaíonn siad, agus is féidir gach ceann a scriosadh leis féin. Lódáil calendar.js ar deireadh.", |
| "gallery.started.stylesheets": "Na stílbhileoga", |
| "gallery.started.stylesheets.body": "Is é fiesta.css tokens.css agus an téama Day ceangailte, nótaí bainte, faoi 25 KiB gzipáilte. Coinníonn na comharthaí leagan amach agus iompar gach comhpháirte; péinteálann an téama iad. Is iad fiesta-plain.css agus fiesta-signal.css na comharthaí céanna leis na téamaí Plain agus Signal. Nascann leathanach a úsáideann an blaosc sidebar nó console shell.css freisin; níl sé ag teastáil ó aon rud eile.", |
| "gallery.started.total": "Faigheann leathanach a nascann fiesta.css agus gach script {raw} de CSS agus JavaScript mar atá sé scríofa, {gzip} gzipáilte.", |
diff --git a/internal/gallery/i18n/hi.json b/internal/gallery/i18n/hi.json| index f64aaff..80783c4 100644 |
| --- a/internal/gallery/i18n/hi.json |
| +++ b/internal/gallery/i18n/hi.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "वे शब्द जो select.js, datetime.js और copy.js स्क्रीन पर दिखाते हैं, {language} में। वह फ़ाइल लोड करें जो आपके पेज के lang से मेल खाती है।", |
| "gallery.started.file.theme": "{theme} थीम के लिए रंग, टाइप फ़ैमिली और आकार: एक :root ब्लॉक, जिसमें हर रंग एक बार light-dark() जोड़े के रूप में घोषित है।", |
| "gallery.started.file.tokens": "संरचना: हर कंपोनेंट क्लास, हर स्केल, और कहीं कोई रंग लिटरल नहीं। हर थीम में वही फ़ाइल।", |
| + "gallery.started.file.transition-js": "column, stage और topbar पन्नों पर पन्ने का ट्रांज़िशन छोड़ दिए जाने पर त्रुटि लॉग होने से रोकता है। इसे स्टाइलशीट से पहले लोड करें, defer के बिना। sidebar और console पन्नों को इसकी ज़रूरत नहीं है।", |
| "gallery.started.lead": "Fiesta एक स्टाइलशीट और मुट्ठी भर वैकल्पिक स्क्रिप्टें है। स्क्रिप्ट बंद होने पर भी सब कुछ काम करता है; स्क्रिप्टें सुधार हैं, हर एक अपनी फ़ाइल में, इसलिए आप वही लोड करते हैं जो आपका पेज इस्तेमाल करता है, और कुछ नहीं।", |
| "gallery.started.link.body": "CDN से fiesta.css लिंक करें और आपका मार्कअप स्टाइल हो जाता है। /1/ सबसे नया 1.x है; जो बदलाव मौजूदा मार्कअप तोड़ दे, वह नया मेजर संस्करण है। जब ऐसे बाइट चाहिए जो कभी न बदलें, तो सटीक संस्करण तय कर दें।", |
| "gallery.started.link.heading": "एक ही लिंक", |
| "gallery.started.own.body": "किसी रिलीज़ से tokens.css और एक थीम, या जुड़ी हुई फ़ाइल, लें और उन्हें अपनी साइट के साथ परोसें; रिपॉज़िटरी में releases/<version>/ के नीचे की फ़ाइलों के साथ एक SHA256SUMS होता है। tokens.css पहले लिंक करें।", |
| "gallery.started.own.heading": "अपनी प्रति परोसना", |
| "gallery.started.scripts": "स्क्रिप्ट", |
| - "gallery.started.scripts.body": "fiesta.js मेन्यू बंद करता है, स्विच के नॉब को खींचने देता है, iOS को उसकी दबी हुई स्थिति देता है और रंग योजना का मेन्यू चलाता है; इसे सबसे पहले लोड करें। busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js और calendar.js तब तक निष्क्रिय रहती हैं जब तक पेज वह इस्तेमाल न करे जिसे वे सुधारती हैं, और हर एक अलग से हटाई जा सकती है। calendar.js सबसे आख़िर में लोड करें।", |
| + "gallery.started.scripts.body": "fiesta.js मेन्यू बंद करता है, स्विच के नॉब को खींचने देता है, iOS को उसकी दबी हुई स्थिति देता है और रंग योजना का मेन्यू चलाता है; इसे सबसे पहले लोड करें। busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js और calendar.js तब तक निष्क्रिय रहती हैं जब तक पेज वह इस्तेमाल न करे जिसे वे सुधारती हैं, और हर एक अलग से हटाई जा सकती है। calendar.js सबसे आख़िर में लोड करें।", |
| "gallery.started.stylesheets": "स्टाइलशीट", |
| "gallery.started.stylesheets.body": "fiesta.css, tokens.css और Day थीम को जोड़कर बनी है, टिप्पणियाँ हटाकर, gzip में 25 KiB से कम। टोकन में हर घटक का लेआउट और व्यवहार होता है; थीम उन्हें रंगती है। fiesta-plain.css और fiesta-signal.css वही टोकन हैं, Plain और Signal थीम के साथ। जो पेज sidebar या console शेल इस्तेमाल करता है, वह shell.css भी लिंक करता है; और किसी को इसकी ज़रूरत नहीं।", |
| "gallery.started.total": "जो पेज fiesta.css और हर स्क्रिप्ट लिंक करता है, उसे लिखे रूप में {raw} CSS और JavaScript मिलता है, gzip में {gzip}।", |
diff --git a/internal/gallery/i18n/ja.json b/internal/gallery/i18n/ja.json| index d16db9d..a5eea6b 100644 |
| --- a/internal/gallery/i18n/ja.json |
| +++ b/internal/gallery/i18n/ja.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "select.js、datetime.js、copy.js が画面に出す言葉の {language} 版です。ページの lang に合うものを読み込んでください。", |
| "gallery.started.file.theme": "{theme} テーマの色、書体、形。:root ブロック一つのなかで、すべての色が light-dark() の対として一度だけ宣言されています。", |
| "gallery.started.file.tokens": "構造。すべてのコンポーネントのクラス、すべてのスケール、そして色のリテラルはひとつもなし。どのテーマでも同じファイルです。", |
| + "gallery.started.file.transition-js": "column、stage、topbar のページで、ページ遷移がスキップされた際にエラーが記録されるのを防ぎます。スタイルシートより前に、defer を付けずに読み込んでください。sidebar と console のページには不要です。", |
| "gallery.started.lead": "Fiesta はスタイルシートひとつと、いくつかの任意のスクリプトです。スクリプトを切ってもすべて動きます。スクリプトは拡張で、それぞれ別のファイルなので、ページが使うものだけを読み込み、ほかは読み込みません。", |
| "gallery.started.link.body": "CDN から fiesta.css をリンクすれば、マークアップにスタイルが付きます。/1/ は最新の 1.x で、既存のマークアップを壊す変更は新しいメジャーバージョンになります。決して変わらないバイト列が必要なら、正確なバージョンに固定してください。", |
| "gallery.started.link.heading": "リンクひとつ", |
| "gallery.started.own.body": "リリースから tokens.css とテーマひとつ、または結合済みのファイルを取り、サイトと一緒に配信してください。リポジトリの releases/<version>/ にあるファイルには SHA256SUMS が付いています。tokens.css を先にリンクします。", |
| "gallery.started.own.heading": "自前のコピーを配信する", |
| "gallery.started.scripts": "スクリプト", |
| - "gallery.started.scripts.body": "fiesta.js はメニューを閉じ、スイッチのつまみをドラッグできるようにし、iOS に押下状態を与え、配色メニューを動かします。最初に読み込んでください。busy.js、light.js、anchor.js、shell.js、copy.js、select.js、datetime.js、calendar.js は、ページがそれぞれの拡張対象を使うまで何もせず、どれも単独で削除できます。calendar.js は最後に読み込みます。", |
| + "gallery.started.scripts.body": "fiesta.js はメニューを閉じ、スイッチのつまみをドラッグできるようにし、iOS に押下状態を与え、配色メニューを動かします。最初に読み込んでください。busy.js、light.js、anchor.js、shell.js、transition.js、copy.js、select.js、datetime.js、calendar.js は、ページがそれぞれの拡張対象を使うまで何もせず、どれも単独で削除できます。calendar.js は最後に読み込みます。", |
| "gallery.started.stylesheets": "スタイルシート", |
| "gallery.started.stylesheets.body": "fiesta.css は tokens.css と Day テーマを結合し、コメントを取り除いたもので、gzip 圧縮で 25 KiB 未満です。トークンがすべてのコンポーネントのレイアウトと振る舞いを持ち、テーマがそれに色を付けます。fiesta-plain.css と fiesta-signal.css は同じトークンに Plain と Signal のテーマを合わせたもの。sidebar か console のシェルを使うページは shell.css もリンクします。それ以外には要りません。", |
| "gallery.started.total": "fiesta.css とすべてのスクリプトをリンクしたページが受け取る CSS と JavaScript は、そのままで {raw}、gzip 圧縮で {gzip} です。", |
diff --git a/internal/gallery/i18n/pt-PT.json b/internal/gallery/i18n/pt-PT.json| index 21fd973..6800bf8 100644 |
| --- a/internal/gallery/i18n/pt-PT.json |
| +++ b/internal/gallery/i18n/pt-PT.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "As palavras que o select.js, o datetime.js e o copy.js põem no ecrã, em {language}. Carregue o que corresponde ao lang da sua página.", |
| "gallery.started.file.theme": "Cor, família tipográfica e forma do tema {theme}: um único bloco :root onde cada cor é declarada uma vez como par light-dark().", |
| "gallery.started.file.tokens": "Estrutura: todas as classes de componentes, todas as escalas e nenhum literal de cor. O mesmo ficheiro em qualquer tema.", |
| + "gallery.started.file.transition-js": "Impede o registo de um erro quando uma transição de página é ignorada nas páginas column, stage e topbar. Carregue-o antes das folhas de estilo, sem defer. As páginas sidebar e console não precisam dele.", |
| "gallery.started.lead": "O Fiesta é uma folha de estilos e um punhado de scripts opcionais. Tudo funciona sem scripts; os scripts são melhorias, cada um no seu ficheiro, por isso carrega os que a sua página usa e mais nada.", |
| "gallery.started.link.body": "Ligue o fiesta.css a partir da CDN e a sua marcação fica com estilo. /1/ é a 1.x mais recente; uma alteração que partiria marcação existente é uma nova versão maior. Fixe a versão exata quando precisar de bytes que nunca mudam.", |
| "gallery.started.link.heading": "A única ligação", |
| "gallery.started.own.body": "Pegue no tokens.css e num tema, ou no ficheiro unido, de uma versão e sirva-os com o seu site; os ficheiros em releases/<version>/ no repositório trazem um SHA256SUMS. Ligue o tokens.css primeiro.", |
| "gallery.started.own.heading": "Servir a sua própria cópia", |
| "gallery.started.scripts": "Os scripts", |
| - "gallery.started.scripts.body": "O fiesta.js fecha os menus, deixa arrastar o botão de um interruptor, dá ao iOS o seu estado premido e faz funcionar o menu de esquema de cores; carregue-o primeiro. O busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js e calendar.js ficam inativos até uma página usar o que melhoram, e cada um pode ser apagado à parte. Carregue o calendar.js em último lugar.", |
| + "gallery.started.scripts.body": "O fiesta.js fecha os menus, deixa arrastar o botão de um interruptor, dá ao iOS o seu estado premido e faz funcionar o menu de esquema de cores; carregue-o primeiro. O busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js e calendar.js ficam inativos até uma página usar o que melhoram, e cada um pode ser apagado à parte. Carregue o calendar.js em último lugar.", |
| "gallery.started.stylesheets": "As folhas de estilo", |
| "gallery.started.stylesheets.body": "O fiesta.css é o tokens.css e o tema Day unidos, sem comentários, abaixo de 25 KiB com gzip. Os tokens guardam a disposição e o comportamento de cada componente; o tema pinta-os. O fiesta-plain.css e o fiesta-signal.css são os mesmos tokens com os temas Plain e Signal. Uma página que usa o invólucro sidebar ou console liga também o shell.css; mais nada precisa dele.", |
| "gallery.started.total": "Uma página que liga o fiesta.css e todos os scripts recebe {raw} de CSS e JavaScript tal como escritos, {gzip} com gzip.", |
diff --git a/internal/gallery/i18n/ru.json b/internal/gallery/i18n/ru.json| index c546fca..c28ab86 100644 |
| --- a/internal/gallery/i18n/ru.json |
| +++ b/internal/gallery/i18n/ru.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "Слова, которые select.js, datetime.js и copy.js выводят на экран, на языке {language}. Загружайте тот файл, что совпадает с lang вашей страницы.", |
| "gallery.started.file.theme": "Цвет, гарнитура и форма для темы {theme}: один блок :root, где каждый цвет объявлен один раз парой light-dark().", |
| "gallery.started.file.tokens": "Структура: все классы компонентов, все шкалы и ни одного цветового литерала. Один и тот же файл при любой теме.", |
| + "gallery.started.file.transition-js": "Не даёт записать ошибку при пропуске перехода на страницах column, stage и topbar. Загружайте его до таблиц стилей, без defer. Страницам sidebar и console он не нужен.", |
| "gallery.started.lead": "Fiesta — это одна таблица стилей и горстка необязательных скриптов. Всё работает с выключенными скриптами; скрипты — улучшения, каждый в своём файле, так что вы загружаете те, что использует страница, и ничего больше.", |
| "gallery.started.link.body": "Подключите fiesta.css с CDN, и ваша разметка получит стили. /1/ — самая новая 1.x; изменение, которое сломало бы существующую разметку, — это новая мажорная версия. Закрепите точную версию, когда нужны байты, которые никогда не меняются.", |
| "gallery.started.link.heading": "Одна ссылка", |
| "gallery.started.own.body": "Возьмите из выпуска tokens.css и одну тему или объединённый файл и отдавайте их со своим сайтом; у файлов в releases/<version>/ в репозитории есть SHA256SUMS. Подключайте tokens.css первым.", |
| "gallery.started.own.heading": "Своя копия на своём сервере", |
| "gallery.started.scripts": "Скрипты", |
| - "gallery.started.scripts.body": "fiesta.js закрывает меню, позволяет перетаскивать ручку переключателя, даёт iOS нажатое состояние и управляет меню цветовой схемы; загружайте его первым. busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js и calendar.js бездействуют, пока страница не использует то, что они улучшают, и каждый можно удалить отдельно. calendar.js загружайте последним.", |
| + "gallery.started.scripts.body": "fiesta.js закрывает меню, позволяет перетаскивать ручку переключателя, даёт iOS нажатое состояние и управляет меню цветовой схемы; загружайте его первым. busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js и calendar.js бездействуют, пока страница не использует то, что они улучшают, и каждый можно удалить отдельно. calendar.js загружайте последним.", |
| "gallery.started.stylesheets": "Таблицы стилей", |
| "gallery.started.stylesheets.body": "fiesta.css — это tokens.css и тема Day вместе, без комментариев, меньше 25 KiB после gzip. Токены задают раскладку и поведение каждого компонента; тема их раскрашивает. fiesta-plain.css и fiesta-signal.css — те же токены с темами Plain и Signal. Страница с оболочкой sidebar или console подключает ещё и shell.css; больше он никому не нужен.", |
| "gallery.started.total": "Страница, подключающая fiesta.css и все скрипты, получает {raw} CSS и JavaScript в исходном виде, {gzip} после gzip.", |
diff --git a/internal/gallery/i18n/vi.json b/internal/gallery/i18n/vi.json| index eb2a220..b14cc59 100644 |
| --- a/internal/gallery/i18n/vi.json |
| +++ b/internal/gallery/i18n/vi.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "Những từ mà select.js, datetime.js và copy.js hiển thị trên màn hình, bằng {language}. Hãy tải tệp khớp với lang của trang bạn.", |
| "gallery.started.file.theme": "Màu sắc, họ chữ và hình khối cho chủ đề {theme}: một khối :root duy nhất, mỗi màu khai báo một lần dưới dạng cặp light-dark().", |
| "gallery.started.file.tokens": "Cấu trúc: mọi lớp component, mọi thang đo, và không một giá trị màu nào. Cùng một tệp dưới mọi chủ đề.", |
| + "gallery.started.file.transition-js": "Ngăn ghi lỗi khi hiệu ứng chuyển trang bị bỏ qua trên các trang column, stage và topbar. Hãy tải nó trước các stylesheet, không dùng defer. Các trang sidebar và console không cần tệp này.", |
| "gallery.started.lead": "Fiesta là một tệp định kiểu và một ít script tuỳ chọn. Mọi thứ đều chạy khi tắt script; các script là phần nâng cấp, mỗi cái một tệp riêng, nên bạn chỉ tải những cái trang của bạn dùng và không gì khác.", |
| "gallery.started.link.body": "Liên kết fiesta.css từ CDN là mã đánh dấu của bạn có kiểu ngay. /1/ là bản 1.x mới nhất; thay đổi nào làm hỏng mã đánh dấu sẵn có sẽ là một phiên bản chính mới. Hãy ghim đúng phiên bản khi bạn cần những byte không bao giờ đổi.", |
| "gallery.started.link.heading": "Một liên kết duy nhất", |
| "gallery.started.own.body": "Lấy tokens.css và một chủ đề, hoặc tệp đã gộp, từ một bản phát hành và phục vụ chúng cùng trang của bạn; các tệp dưới releases/<version>/ trong kho mã có kèm SHA256SUMS. Liên kết tokens.css trước.", |
| "gallery.started.own.heading": "Tự phục vụ bản sao của bạn", |
| "gallery.started.scripts": "Các tệp script", |
| - "gallery.started.scripts.body": "fiesta.js đóng menu, cho phép kéo núm công tắc, cho iOS trạng thái nhấn và chạy menu bảng màu; hãy tải nó trước tiên. busy.js, light.js, anchor.js, shell.js, copy.js, select.js, datetime.js và calendar.js đều không làm gì cho đến khi trang dùng thứ chúng nâng cấp, và mỗi cái xoá riêng được. Tải calendar.js sau cùng.", |
| + "gallery.started.scripts.body": "fiesta.js đóng menu, cho phép kéo núm công tắc, cho iOS trạng thái nhấn và chạy menu bảng màu; hãy tải nó trước tiên. busy.js, light.js, anchor.js, shell.js, transition.js, copy.js, select.js, datetime.js và calendar.js đều không làm gì cho đến khi trang dùng thứ chúng nâng cấp, và mỗi cái xoá riêng được. Tải calendar.js sau cùng.", |
| "gallery.started.stylesheets": "Các tệp stylesheet", |
| "gallery.started.stylesheets.body": "fiesta.css là tokens.css và chủ đề Day gộp lại, đã bỏ chú thích, dưới 25 KiB khi nén gzip. Token chứa bố cục và hành vi của mọi thành phần; chủ đề tô màu cho chúng. fiesta-plain.css và fiesta-signal.css là cùng những token đó với chủ đề Plain và Signal. Trang nào dùng shell sidebar hoặc console thì liên kết thêm shell.css; ngoài ra không gì cần nó.", |
| "gallery.started.total": "Một trang liên kết fiesta.css và mọi script nhận {raw} CSS và JavaScript ở dạng gốc, {gzip} khi nén gzip.", |
diff --git a/internal/gallery/i18n/yue.json b/internal/gallery/i18n/yue.json| index 1ec9cc9..ae4213d 100644 |
| --- a/internal/gallery/i18n/yue.json |
| +++ b/internal/gallery/i18n/yue.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "select.js、datetime.js 同 copy.js 喺畫面上顯示嘅字，{language} 版。載入同你頁面 lang 吻合嗰個。", |
| "gallery.started.file.theme": "{theme} 主題嘅顏色、字體同形狀：一個 :root 區塊，每隻色以 light-dark() 成對聲明一次。", |
| "gallery.started.file.tokens": "結構：所有組件嘅類、所有比例，冇任何顏色字面值。喺每個主題之下都係同一個檔案。", |
| + "gallery.started.file.transition-js": "防止 column、stage 同 topbar 頁面喺略過頁面轉場時記錄錯誤。要喺樣式表之前載入佢，唔好加 defer。sidebar 同 console 頁面唔需要佢。", |
| "gallery.started.lead": "Fiesta 係一個樣式表加幾個可選嘅腳本。熄咗腳本樣樣都照用得；腳本係增強，每個都係獨立檔案，所以你淨係載入頁面用到嗰啲，其他唔使。", |
| "gallery.started.link.body": "由 CDN 連結 fiesta.css，你嘅標記就有樣式。/1/ 係最新嘅 1.x；會整壞現有標記嘅改動就係新嘅主版本。如果你要永遠唔變嘅位元組，就鎖定準確版本。", |
| "gallery.started.link.heading": "一條連結", |
| "gallery.started.own.body": "由一個發佈版攞 tokens.css 同一個主題，或者合併咗嘅檔案，同你個網站一齊提供；儲存庫入面 releases/<version>/ 下面嘅檔案附有 SHA256SUMS。先連結 tokens.css。", |
| "gallery.started.own.heading": "自己提供一份副本", |
| "gallery.started.scripts": "腳本", |
| - "gallery.started.scripts.body": "fiesta.js 會閂選單、畀人拖開關個掣、畀 iOS 有撳住狀態，同埋運行配色選單；最先載入佢。busy.js、light.js、anchor.js、shell.js、copy.js、select.js、datetime.js 同 calendar.js 喺頁面用到佢哋增強嘅嘢之前都唔會做嘢，每個都可以獨立刪除。calendar.js 最後先載入。", |
| + "gallery.started.scripts.body": "fiesta.js 會閂選單、畀人拖開關個掣、畀 iOS 有撳住狀態，同埋運行配色選單；最先載入佢。busy.js、light.js、anchor.js、shell.js、transition.js、copy.js、select.js、datetime.js 同 calendar.js 喺頁面用到佢哋增強嘅嘢之前都唔會做嘢，每個都可以獨立刪除。calendar.js 最後先載入。", |
| "gallery.started.stylesheets": "樣式表", |
| "gallery.started.stylesheets.body": "fiesta.css 係 tokens.css 同 Day 主題合埋，刪咗註解，gzip 之後少過 25 KiB。設計變數負責每個組件嘅版面同行為；主題幫佢哋上色。fiesta-plain.css 同 fiesta-signal.css 係同一套設計變數，配上 Plain 同 Signal 主題。用 sidebar 或者 console 外殼嘅頁面要另外連結 shell.css；其他都唔使。", |
| "gallery.started.total": "一版連結咗 fiesta.css 同所有腳本嘅頁面，會收到原樣 {raw} 嘅 CSS 同 JavaScript，gzip 之後 {gzip}。", |
diff --git a/internal/gallery/i18n/zh-Hans.json b/internal/gallery/i18n/zh-Hans.json| index a23558a..1f6eee3 100644 |
| --- a/internal/gallery/i18n/zh-Hans.json |
| +++ b/internal/gallery/i18n/zh-Hans.json |
| @@ -226,13 +226,14 @@ |
| "gallery.started.file.strings": "select.js、datetime.js 和 copy.js 显示在屏幕上的文字，{language} 版。加载与你页面的 lang 相符的那个。", |
| "gallery.started.file.theme": "{theme} 主题的颜色、字体族和形状：一个 :root 块，每个颜色以 light-dark() 成对声明一次。", |
| "gallery.started.file.tokens": "结构：所有组件类、所有比例，没有任何颜色字面量。在每个主题下都是同一个文件。", |
| + "gallery.started.file.transition-js": "防止 column、stage 和 topbar 页面在跳过页面过渡时记录错误。请在样式表之前加载它，不要加 defer。sidebar 和 console 页面不需要它。", |
| "gallery.started.lead": "Fiesta 是一个样式表加几个可选的脚本。关掉脚本一切照常工作；脚本是增强，每个都是单独的文件，所以你只加载页面用到的那些，别的不用。", |
| "gallery.started.link.body": "从 CDN 链接 fiesta.css，你的标记就有了样式。/1/ 是最新的 1.x；会破坏现有标记的改动是新的主版本。需要永远不变的字节时，就锁定确切的版本。", |
| "gallery.started.link.heading": "一条链接", |
| "gallery.started.own.body": "从某个发布版取 tokens.css 和一个主题，或者合并后的文件，和你的站点一起提供；仓库里 releases/<version>/ 下的文件附有 SHA256SUMS。先链接 tokens.css。", |
| "gallery.started.own.heading": "自己托管一份副本", |
| "gallery.started.scripts": "脚本", |
| - "gallery.started.scripts.body": "fiesta.js 负责关闭菜单、让开关的旋钮可以拖动、给 iOS 按下状态，并运行配色菜单；最先加载它。busy.js、light.js、anchor.js、shell.js、copy.js、select.js、datetime.js 和 calendar.js 在页面用到它们增强的东西之前都不做任何事，每个都可以单独删除。最后加载 calendar.js。", |
| + "gallery.started.scripts.body": "fiesta.js 负责关闭菜单、让开关的旋钮可以拖动、给 iOS 按下状态，并运行配色菜单；最先加载它。busy.js、light.js、anchor.js、shell.js、transition.js、copy.js、select.js、datetime.js 和 calendar.js 在页面用到它们增强的东西之前都不做任何事，每个都可以单独删除。最后加载 calendar.js。", |
| "gallery.started.stylesheets": "样式表", |
| "gallery.started.stylesheets.body": "fiesta.css 是 tokens.css 和 Day 主题合并而成，去掉了注释，gzip 后不到 25 KiB。设计变量承载每个组件的布局和行为；主题给它们上色。fiesta-plain.css 和 fiesta-signal.css 是同一套设计变量配上 Plain 和 Signal 主题。使用 sidebar 或 console 外壳的页面还要链接 shell.css；别的都不需要。", |
| "gallery.started.total": "一个链接了 fiesta.css 和所有脚本的页面，会收到原样 {raw} 的 CSS 和 JavaScript，gzip 后 {gzip}。", |
diff --git a/internal/gallery/started.go b/internal/gallery/started.go| index 7ebdce1..49c0aea 100644 |
| --- a/internal/gallery/started.go |
| +++ b/internal/gallery/started.go |
| @@ -43,24 +43,25 @@ type assetsView struct { |
| // and calendar.js last, as the page says to load them, the rest as the |
| // scripts paragraph names them. A script in the release and not here |
| // fails the render by name, so a new script cannot ship off this page. |
| -var scriptOrder = []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| +var scriptOrder = []string{"fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "transition.js", "copy.js", "select.js", "datetime.js", "calendar.js"} |
| // blurbs is the copy id of each shipped file whose sentence has no |
| // placeholder. The one-file themes, the themes and the strings take |
| // theirs with a theme or a language written in; see buildAssets. |
| var blurbs = map[string]string{ |
| - "tokens.css": "gallery.started.file.tokens", |
| - "shell.css": "gallery.started.file.shell-css", |
| - "fiesta.js": "gallery.started.file.fiesta-js", |
| - "busy.js": "gallery.started.file.busy-js", |
| - "light.js": "gallery.started.file.light-js", |
| - "anchor.js": "gallery.started.file.anchor-js", |
| - "shell.js": "gallery.started.file.shell-js", |
| - "copy.js": "gallery.started.file.copy-js", |
| - "select.js": "gallery.started.file.select-js", |
| - "datetime.js": "gallery.started.file.datetime-js", |
| - "calendar.js": "gallery.started.file.calendar-js", |
| - "icons.svg": "gallery.started.file.sprite", |
| + "tokens.css": "gallery.started.file.tokens", |
| + "shell.css": "gallery.started.file.shell-css", |
| + "fiesta.js": "gallery.started.file.fiesta-js", |
| + "busy.js": "gallery.started.file.busy-js", |
| + "light.js": "gallery.started.file.light-js", |
| + "anchor.js": "gallery.started.file.anchor-js", |
| + "shell.js": "gallery.started.file.shell-js", |
| + "transition.js": "gallery.started.file.transition-js", |
| + "copy.js": "gallery.started.file.copy-js", |
| + "select.js": "gallery.started.file.select-js", |
| + "datetime.js": "gallery.started.file.datetime-js", |
| + "calendar.js": "gallery.started.file.calendar-js", |
| + "icons.svg": "gallery.started.file.sprite", |
| } |
| // release is the release build of one site's source, reduced to what |
diff --git a/internal/gallery/started_test.go b/internal/gallery/started_test.go| index 2ce49a8..cb635ae 100644 |
| --- a/internal/gallery/started_test.go |
| +++ b/internal/gallery/started_test.go |
| @@ -32,7 +32,7 @@ func shippedRows(t *testing.T) []string { |
| rows := []string{ |
| "fiesta.css", "fiesta-plain.css", "fiesta-signal.css", |
| "tokens.css", "day.css", "plain.css", "signal.css", "shell.css", |
| - "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "copy.js", "select.js", "datetime.js", "calendar.js", |
| + "fiesta.js", "busy.js", "light.js", "anchor.js", "shell.js", "transition.js", "copy.js", "select.js", "datetime.js", "calendar.js", |
| "icons.svg", |
| } |
| entries, err := fs.ReadDir(fiesta.FS(), "i18n") |
diff --git a/js/transition.js b/js/transition.js| new file mode 100644 |
| index 0000000..8fc0810 |
| --- /dev/null |
| +++ b/js/transition.js |
| @@ -0,0 +1,23 @@ |
| +/* An incoming transition can reject before pagereveal when the destination |
| + does not opt in. Load before styles, and observe each transition once. */ |
| +(function () { |
| + "use strict"; |
| + var observed = new WeakSet(); |
| + function observe(transition) { |
| + if (!transition || observed.has(transition)) return; |
| + observed.add(transition); |
| + ["ready", "finished", "updateCallbackDone"].forEach(function (key) { |
| + if (transition[key]) transition[key].catch(function (err) { |
| + if (!(err instanceof DOMException) || |
| + ["AbortError", "InvalidStateError", "TimeoutError"].indexOf(err.name) < 0) throw err; |
| + }); |
| + }); |
| + } |
| + observe(document.activeViewTransition); |
| + window.addEventListener("pageswap", function (event) { |
| + observe(event.viewTransition); |
| + }); |
| + window.addEventListener("pagereveal", function (event) { |
| + observe(event.viewTransition); |
| + }); |
| +})(); |
diff --git a/releases/1.2.0/SHA256SUMS b/releases/1.2.0/SHA256SUMS| index ef40fa9..2c1e354 100644 |
| --- a/releases/1.2.0/SHA256SUMS |
| +++ b/releases/1.2.0/SHA256SUMS |
| @@ -54,3 +54,4 @@ f9da2afe8f29dd30217e209e850487123906dc73190584587c7d28dc08652545 select.js |
| 0c379643d755c59cf1655c169342ab26af27c31a63c8d7c91aa77e199a30c178 shell.js |
| f75da06dfc8fff7d59eeed29050506e1e2fd5ecf60e99c25ab45260abe31076d signal.css |
| 064412f4dc68300359d122eef587bab1be650edcccf158892e170867407c7214 tokens.css |
| +f3c280da0015d6e1ea40667a0d5ce37b62cc9e184991ddffca0b17f9f232a00c transition.js |
diff --git a/releases/1.2.0/transition.js b/releases/1.2.0/transition.js| new file mode 100644 |
| index 0000000..304d51f |
| --- /dev/null |
| +++ b/releases/1.2.0/transition.js |
| @@ -0,0 +1,22 @@ |
| +/*! Fiesta 1.2.0 | MPL-2.0 | https://fiesta.rastrillo.org */ |
| +(function () { |
| + "use strict"; |
| + var observed = new WeakSet(); |
| + function observe(transition) { |
| + if (!transition || observed.has(transition)) return; |
| + observed.add(transition); |
| + ["ready", "finished", "updateCallbackDone"].forEach(function (key) { |
| + if (transition[key]) transition[key].catch(function (err) { |
| + if (!(err instanceof DOMException) || |
| + ["AbortError", "InvalidStateError", "TimeoutError"].indexOf(err.name) < 0) throw err; |
| + }); |
| + }); |
| + } |
| + observe(document.activeViewTransition); |
| + window.addEventListener("pageswap", function (event) { |
| + observe(event.viewTransition); |
| + }); |
| + window.addEventListener("pagereveal", function (event) { |
| + observe(event.viewTransition); |
| + }); |
| +})(); |