scroll-to-github-top/options.html at master · oiahoon/scroll-to-github-top · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Smart TOC & Scroll 设置</title>
    <link rel="stylesheet" href="options.css" />
  </head>
  <body>
    <main class="page">
      <section class="settings-panel" aria-labelledby="settings-title">
        <header class="page-header">
          <div>
            <h1 id="settings-title">Smart TOC &amp; Scroll</h1>
            <p class="page-subtitle">低干扰阅读导航设置</p>
          </div>
        </header>

        <div class="settings-list">
          <section class="setting-row" aria-labelledby="themePreset-label">
            <div class="setting-copy">
              <h2 id="themePreset-label">阅读导航样式</h2>
              <p id="themePresetHint">完整目录，适合文档站和技术长文。</p>
            </div>
            <div class="setting-control">
              <select id="themePreset" class="native-select" tabindex="-1" aria-hidden="true">
                <option value="default">标准目录面板</option>
                <option value="sspai">阅读进度目录</option>
              </select>
              <div class="segmented-control" data-control-for="themePreset" role="group" aria-labelledby="themePreset-label">
                <button class="is-active" type="button" data-value="default" aria-pressed="true">标准目录面板</button>
                <button type="button" data-value="sspai" aria-pressed="false">阅读进度目录</button>
              </div>
            </div>
          </section>

          <section class="setting-row" aria-labelledby="expandMode-label">
            <div class="setting-copy">
              <h2 id="expandMode-label">交互方式</h2>
              <p id="expandModeHint">悬停预览目录，点击浮标可固定展开。</p>
            </div>
            <div class="setting-control">
              <select id="expandMode" class="native-select" tabindex="-1" aria-hidden="true">
                <option value="hover">悬停预览</option>
                <option value="click">点击开关</option>
                <option value="press">短按回顶 / 长按展开</option>
              </select>
              <div class="segmented-control segmented-control--wide" data-control-for="expandMode" role="group" aria-labelledby="expandMode-label">
                <button class="is-active" type="button" data-value="hover" aria-pressed="true">悬停预览</button>
                <button type="button" data-value="click" aria-pressed="false">点击开关</button>
                <button type="button" data-value="press" aria-pressed="false">短按 / 长按</button>
              </div>
            </div>
          </section>

          <section class="setting-row" aria-labelledby="display-label">
            <div class="setting-copy">
              <h2 id="display-label">显示条件</h2>
              <p>避免短页面或首屏阅读被打扰。</p>
            </div>
            <div class="setting-control compact-grid">
              <label class="compact-field">
                <span>滚动屏数</span>
                <input
                  id="showAfterScrollScreens"
                  type="number"
                  min="0"
                  step="0.5"
                  aria-label="滚动屏数"
                  aria-describedby="display-label"
                  value="1"
                />
              </label>
              <label class="compact-field">
                <span>最少标题</span>
                <input id="minHeaders" type="number" min="0" step="1" aria-label="最少标题" value="3" />
              </label>
            </div>
          </section>

          <section class="setting-row" aria-labelledby="position-label">
            <div class="setting-copy">
              <h2 id="position-label">位置</h2>
              <p>让浮层贴近阅读边缘，避开正文主体。</p>
            </div>
            <div class="setting-control">
              <select id="position" class="native-select" tabindex="-1" aria-hidden="true">
                <option value="right">右侧</option>
                <option value="left">左侧</option>
              </select>
              <div class="segmented-control" data-control-for="position" role="group" aria-labelledby="position-label">
                <button class="is-active" type="button" data-value="right" aria-pressed="true">右侧</button>
                <button type="button" data-value="left" aria-pressed="false">左侧</button>
              </div>
            </div>
          </section>

          <section class="setting-row" aria-labelledby="compatibility-label">
            <div class="setting-copy">
              <h2 id="compatibility-label">兼容策略</h2>
              <p>页面已有导航控件时，减少重复打扰。</p>
            </div>
            <div class="setting-control toggle-stack">
              <label class="toggle-pill">
                <input id="avoidExistingWidgets" type="checkbox" checked />
                <span>自动避让已有控件</span>
              </label>
              <label class="toggle-pill">
                <input id="forceShow" type="checkbox" />
                <span>始终显示</span>
              </label>
            </div>
          </section>

          <section class="setting-row setting-row--textarea" aria-labelledby="disabledDomains-label">
            <div class="setting-copy">
              <h2 id="disabledDomains-label">禁用域名</h2>
              <p>逗号分隔多个域名，适合自带完整导航的网站。</p>
            </div>
            <div class="setting-control">
              <textarea id="disabledDomains" rows="3" placeholder="example.com, docs.example.org"></textarea>
            </div>
          </section>
        </div>

        <footer class="settings-footer">
          <p>本地分析页面结构，偏好只保存在浏览器中。</p>
          <div class="actions">
            <span id="status" role="status" aria-live="polite" aria-atomic="true"></span>
            <button id="save" type="button" disabled>已保存</button>
          </div>
        </footer>
      </section>
    </main>

    <script src="options.js"></script>
  </body>
</html>