joplin-plugin-minimap 1.2.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +23 -0
- package/package.json +2 -2
- package/publish/index.js +45 -0
- package/publish/manifest.json +8 -3
- package/publish/minimap-view.js +66 -4
- package/publish/plugin.jpl +0 -0
package/README.md
CHANGED
|
@@ -7,6 +7,7 @@ A hover-to-expand table of contents minimap for the [Joplin](https://joplinapp.o
|
|
|
7
7
|
## Features
|
|
8
8
|
|
|
9
9
|
- **Tick Bar Minimap** — Each heading is shown as a small horizontal bar on the right edge of the note viewer; bar length reflects the heading level (H1 longest)
|
|
10
|
+
- **Desktop and Mobile** — Hover on desktop, tap on touch devices: the collapsed strip is a single tap target, rows and buttons grow to finger size when open, and tapping outside or picking a heading closes it again
|
|
10
11
|
- **Hover to Expand** — Move the mouse over the bars and they expand into a full table of contents overlay, indented by level, with long titles ellipsized
|
|
11
12
|
- **Depth Stepper** — `+` / `-` buttons at the top of the expanded panel raise or lower how deep the outline goes, so a long nested note collapses to its top-level structure in one click
|
|
12
13
|
- **Heading Tiers** — Top-level headings render larger and heavier than nested ones, so the shape of the document is readable at a glance
|
|
@@ -56,9 +57,31 @@ Configurable in **Tools → Options → Joplin Minimap**:
|
|
|
56
57
|
- **Minimap side** — which edge of the viewer the minimap docks to, right or left (default right)
|
|
57
58
|
- **Default depth** — deepest heading level shown when a note opens; the `+`/`-` buttons change it on the fly (default 6, every level)
|
|
58
59
|
- **Edge distance (px)** — gap between the minimap and the viewer edge it sits on (default 6)
|
|
60
|
+
- **Text size (%)** — scales the text in the expanded panel; raise it on high-DPI screens (default 100, under *Advanced*)
|
|
61
|
+
- **High contrast panel** — brighter text and a more solid panel background, using no fixed colours so it still follows your theme (default off, under *Advanced*)
|
|
59
62
|
|
|
60
63
|
Changed settings apply on the next render (switch notes or edit the note).
|
|
61
64
|
|
|
65
|
+
### Styling it yourself
|
|
66
|
+
|
|
67
|
+
Every colour and size the panel uses reads from a CSS variable, so you can restyle it from `userstyle.css` in your Joplin profile directory (it applies to the rendered note viewer, which is where the minimap lives). Set them on `:root` — no `!important` needed:
|
|
68
|
+
|
|
69
|
+
```css
|
|
70
|
+
:root {
|
|
71
|
+
--jp-mm-font: 15px; /* base text size */
|
|
72
|
+
--jp-mm-color: #e8e8e8; /* outline text */
|
|
73
|
+
--jp-mm-bg: rgba(30, 30, 30, 0.92); /* expanded panel background */
|
|
74
|
+
--jp-mm-dim: 0.85; /* opacity of inactive rows */
|
|
75
|
+
--jp-mm-dot: #cd6155; /* open-to-do dot */
|
|
76
|
+
--jp-mm-width: 320px; /* expanded panel max width */
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Joplin creates and opens the file for you: **Tools → Options → Appearance → Show Advanced Settings → Custom stylesheet for rendered Markdown**. It is `userstyle.css` in your profile directory (`%USERPROFILE%\.config\joplin-desktop\` on Windows, `~/.config/joplin-desktop/` elsewhere) if you would rather edit it directly. Restart Joplin afterwards.
|
|
81
|
+
|
|
82
|
+
Try **High contrast panel** first — it fixes most legibility complaints without picking any colours, so it keeps working when you switch themes.
|
|
83
|
+
|
|
84
|
+
|
|
62
85
|
## Development
|
|
63
86
|
|
|
64
87
|
Zero dependencies — no `npm install` needed:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "joplin-plugin-minimap",
|
|
3
|
-
"version": "1.
|
|
4
|
-
"description": "A
|
|
3
|
+
"version": "1.4.0",
|
|
4
|
+
"description": "A table of contents minimap for the Joplin note viewer, on desktop and mobile",
|
|
5
5
|
"author": "lim0513",
|
|
6
6
|
"homepage": "https://github.com/lim0513/joplin-minimap",
|
|
7
7
|
"repository": {
|
package/publish/index.js
CHANGED
|
@@ -23,6 +23,10 @@ const SETTINGS_I18N = {
|
|
|
23
23
|
sideDesc: 'Which edge of the viewer the minimap sits on. Default: right.',
|
|
24
24
|
sideRight: 'Right',
|
|
25
25
|
sideLeft: 'Left',
|
|
26
|
+
fontScale: 'Text size (%)',
|
|
27
|
+
fontScaleDesc: 'Scales the text in the expanded panel. 100 keeps the current size; raise it on high-DPI screens or if the outline is hard to read. Default: 100.',
|
|
28
|
+
highContrast: 'High contrast panel',
|
|
29
|
+
highContrastDesc: 'Makes the outline text brighter and the panel background more solid, so it separates from the note. Uses no fixed colours, so it still follows your theme. Turn this on before reaching for custom colours. Default: off.',
|
|
26
30
|
maxLevel: 'Default depth',
|
|
27
31
|
maxLevelDesc: 'Deepest heading level shown when a note opens. The +/- buttons at the top of the expanded panel change it on the fly. Default: 6 (every level).',
|
|
28
32
|
showTodos: 'Show to-do markers',
|
|
@@ -39,6 +43,10 @@ const SETTINGS_I18N = {
|
|
|
39
43
|
sideDesc: '小地图停靠在阅读器的哪一侧边缘。默认靠右。',
|
|
40
44
|
sideRight: '右侧',
|
|
41
45
|
sideLeft: '左侧',
|
|
46
|
+
fontScale: '文字大小（%）',
|
|
47
|
+
fontScaleDesc: '缩放展开面板里的文字。100 为当前大小；高分屏或看不清时调大。默认 100。',
|
|
48
|
+
highContrast: '高对比度面板',
|
|
49
|
+
highContrastDesc: '提高目录文字的亮度、加实面板背景，使其与正文分开。不使用固定颜色，仍然跟随主题。想自定义颜色前先试这个。默认关闭。',
|
|
42
50
|
maxLevel: '默认层级深度',
|
|
43
51
|
maxLevelDesc: '打开笔记时显示到第几级标题。展开面板顶部的 +/- 按钮可随时调整。默认 6（全部层级）。',
|
|
44
52
|
showTodos: '显示待办标记',
|
|
@@ -55,6 +63,10 @@ const SETTINGS_I18N = {
|
|
|
55
63
|
sideDesc: '小地圖停靠在檢視器的哪一側邊緣。預設靠右。',
|
|
56
64
|
sideRight: '右側',
|
|
57
65
|
sideLeft: '左側',
|
|
66
|
+
fontScale: '文字大小（%）',
|
|
67
|
+
fontScaleDesc: '縮放展開面板裡的文字。100 為目前大小；高解析度螢幕或看不清時調大。預設 100。',
|
|
68
|
+
highContrast: '高對比面板',
|
|
69
|
+
highContrastDesc: '提高目錄文字亮度、加實面板背景，使其與內文分開。不使用固定顏色，仍然跟隨主題。想自訂顏色前先試這個。預設關閉。',
|
|
58
70
|
maxLevel: '預設層級深度',
|
|
59
71
|
maxLevelDesc: '開啟筆記時顯示到第幾級標題。展開面板頂部的 +/- 按鈕可隨時調整。預設 6（全部層級）。',
|
|
60
72
|
showTodos: '顯示待辦標記',
|
|
@@ -71,6 +83,10 @@ const SETTINGS_I18N = {
|
|
|
71
83
|
sideDesc: 'У какого края области просмотра располагается миникарта. По умолчанию: справа.',
|
|
72
84
|
sideRight: 'Справа',
|
|
73
85
|
sideLeft: 'Слева',
|
|
86
|
+
fontScale: 'Размер текста (%)',
|
|
87
|
+
fontScaleDesc: 'Масштаб текста в развёрнутой панели. 100 - текущий размер. По умолчанию: 100.',
|
|
88
|
+
highContrast: 'Контрастная панель',
|
|
89
|
+
highContrastDesc: 'Делает текст ярче, а фон панели плотнее, чтобы она отделялась от заметки. Без фиксированных цветов - тема сохраняется. По умолчанию: выкл.',
|
|
74
90
|
maxLevel: 'Глубина по умолчанию',
|
|
75
91
|
maxLevelDesc: 'До какого уровня заголовков показывать при открытии заметки. Кнопки +/- вверху развёрнутой панели меняют её на лету. По умолчанию: 6 (все уровни).',
|
|
76
92
|
showTodos: 'Показывать метки задач',
|
|
@@ -87,6 +103,10 @@ const SETTINGS_I18N = {
|
|
|
87
103
|
sideDesc: 'ミニマップをビューアーのどちら側の端に表示するか。既定値：右。',
|
|
88
104
|
sideRight: '右',
|
|
89
105
|
sideLeft: '左',
|
|
106
|
+
fontScale: '文字サイズ（%）',
|
|
107
|
+
fontScaleDesc: '展開パネル内の文字を拡大縮小します。100 が現在のサイズです。既定値：100。',
|
|
108
|
+
highContrast: '高コントラスト表示',
|
|
109
|
+
highContrastDesc: '見出しの文字を明るくし、パネル背景を濃くして本文と区別しやすくします。固定色は使わず、テーマに追従します。既定値：オフ。',
|
|
90
110
|
maxLevel: '既定の階層の深さ',
|
|
91
111
|
maxLevelDesc: 'ノートを開いたときに表示する見出しの深さ。展開パネル上部の +/- ボタンでいつでも変更できます。既定値：6（すべての階層）。',
|
|
92
112
|
showTodos: 'ToDoマーカーを表示',
|
|
@@ -170,6 +190,29 @@ joplin.plugins.register({
|
|
|
170
190
|
label: t.maxLevel,
|
|
171
191
|
description: t.maxLevelDesc,
|
|
172
192
|
},
|
|
193
|
+
// A percentage, not a px value: the base is 12.5px and Joplin's Int
|
|
194
|
+
// setting cannot hold that, so 100 maps to exactly today's size and
|
|
195
|
+
// nobody's panel changes on upgrade.
|
|
196
|
+
'minimapFontScale': {
|
|
197
|
+
value: 100,
|
|
198
|
+
minimum: 50,
|
|
199
|
+
maximum: 250,
|
|
200
|
+
type: TYPE_INT,
|
|
201
|
+
section: 'minimap',
|
|
202
|
+
public: true,
|
|
203
|
+
advanced: true,
|
|
204
|
+
label: t.fontScale,
|
|
205
|
+
description: t.fontScaleDesc,
|
|
206
|
+
},
|
|
207
|
+
'minimapHighContrast': {
|
|
208
|
+
value: false,
|
|
209
|
+
type: TYPE_BOOL,
|
|
210
|
+
section: 'minimap',
|
|
211
|
+
public: true,
|
|
212
|
+
advanced: true,
|
|
213
|
+
label: t.highContrast,
|
|
214
|
+
description: t.highContrastDesc,
|
|
215
|
+
},
|
|
173
216
|
'minimapShowTodos': {
|
|
174
217
|
value: true,
|
|
175
218
|
type: TYPE_BOOL,
|
|
@@ -197,6 +240,8 @@ joplin.plugins.register({
|
|
|
197
240
|
rightOffset: await joplin.settings.value('minimapRightOffset'),
|
|
198
241
|
side: await joplin.settings.value('minimapSide'),
|
|
199
242
|
maxLevel: await joplin.settings.value('minimapMaxLevel'),
|
|
243
|
+
fontScale: await joplin.settings.value('minimapFontScale'),
|
|
244
|
+
highContrast: await joplin.settings.value('minimapHighContrast'),
|
|
200
245
|
showTodos: await joplin.settings.value('minimapShowTodos'),
|
|
201
246
|
};
|
|
202
247
|
}
|
package/publish/manifest.json
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"manifest_version": 1,
|
|
3
3
|
"id": "com.github.joplin-minimap",
|
|
4
|
-
"app_min_version": "2.8",
|
|
5
|
-
"
|
|
4
|
+
"app_min_version": "2.8",
|
|
5
|
+
"app_min_version_mobile": "3.2",
|
|
6
|
+
"platforms": [
|
|
7
|
+
"desktop",
|
|
8
|
+
"mobile"
|
|
9
|
+
],
|
|
10
|
+
"version": "1.4.0",
|
|
6
11
|
"name": "Joplin Minimap",
|
|
7
|
-
"description": "A
|
|
12
|
+
"description": "A table of contents minimap for the note viewer. Shows heading tick marks along one edge; hover (or tap on mobile) to expand into a full outline, click to jump.",
|
|
8
13
|
"author": "lim0513",
|
|
9
14
|
"homepage_url": "https://github.com/lim0513/joplin-minimap",
|
|
10
15
|
"repository_url": "https://github.com/lim0513/joplin-minimap",
|
package/publish/minimap-view.js
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
// Defaults; overridden from Joplin's plugin settings (Tools > Options > Minimap)
|
|
10
10
|
// when webviewApi is available in this webview.
|
|
11
|
-
var settings = { minHeadings: 2, panelWidth: 240, rightOffset: 6, side: 'right', maxLevel: 6, showTodos: true };
|
|
11
|
+
var settings = { minHeadings: 2, panelWidth: 240, rightOffset: 6, side: 'right', maxLevel: 6, fontScale: 100, highContrast: false, showTodos: true };
|
|
12
12
|
|
|
13
13
|
function loadSettings() {
|
|
14
14
|
if (typeof webviewApi === 'undefined' || !webviewApi.postMessage) {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
// then renders UNSTYLED as flow content below the note (looks like a
|
|
48
48
|
// duplicated outline under the document). Keeping the CSS inline and
|
|
49
49
|
// re-injecting guarantees the nav and its styling live and die together.
|
|
50
|
-
var MINIMAP_CSS = "/* Joplin Minimap \u2014 collapsed tick bars, hover-expanded ToC panel.\n * Colors use currentColor / rgba so it follows both light and dark themes.\n */\n\n#jp-minimap {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tcaret-color: transparent;\n\tcursor: default;\n\tposition: fixed;\n\ttop: 50%;\n\tright: 6px;\n\ttransform: translateY(-50%);\n\tz-index: 9999;\n\tfont-size: 12.5px;\n\tline-height: 1.35;\n\tcolor: inherit;\n\t/* Collapsed geometry is direction-independent: the tick bars always\n\t * hug the docked edge, whichever side that is, even in an RTL note. Per-item direction applies\n\t * to the expanded panel only (see the dir=rtl rule below). */\n\tdirection: ltr;\n}\n\n.jp-mm-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tpadding: 8px 6px;\n\tmax-height: 84vh;\n\toverflow: hidden;\n\tborder-radius: 10px;\n\ttransition: background 0.15s ease, box-shadow 0.15s ease;\n}\n\n.jp-mm-item {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tpadding: 3px 4px;\n\tborder-radius: 6px;\n\ttext-decoration: none;\n\tcolor: inherit;\n\topacity: 0.5;\n\tcursor: pointer;\n\toutline: none;\n\tdirection: ltr;\n}\n\n/* ---- collapsed state: tick bars, width by heading level ---- */\n\n.jp-mm-bar {\n\tdisplay: block;\n\theight: 2px;\n\tborder-radius: 1px;\n\tbackground: currentColor;\n}\n\n.jp-mm-l1 .jp-mm-bar { width: 18px; }\n.jp-mm-l2 .jp-mm-bar { width: 13px; }\n.jp-mm-l3 .jp-mm-bar { width: 9px; }\n.jp-mm-l4 .jp-mm-bar { width: 7px; }\n.jp-mm-l5 .jp-mm-bar { width: 5px; }\n.jp-mm-l6 .jp-mm-bar { width: 5px; }\n\n.jp-mm-label { display: none; }\n\n/* ---- depth stepper (issue #2) ---- */\n\n/* Rows deeper than the current depth are HIDDEN, not removed: keeping the\n * nav element alive is what lets the panel stay open across a depth change,\n * since the whole expansion rides on :hover over #jp-minimap. */\n#jp-minimap[data-depth=\"1\"] .jp-mm-l2,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l3,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l3,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"4\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"4\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"5\"] .jp-mm-l6 { display: none; }\n\n/* The stepper is part of the expanded panel only - collapsed, the minimap\n * stays the same narrow strip of tick marks it has always been. */\n.jp-mm-head { display: none; }\n\n\n/* ---- docked on the left edge ---- */\n\n/* Mirror the collapsed alignment so the tick bars hug the left border.\n * direction is pinned to ltr above, so flex-start is unambiguously the left\n * side whatever language the note is in. Placed BEFORE the :hover rules on\n * purpose: they carry the same specificity, so source order decides. */\n#jp-minimap.jp-mm-left .jp-mm-list { align-items: flex-start; }\n#jp-minimap.jp-mm-left .jp-mm-item { justify-content: flex-start; }\n\n/* The to-do dot mirrors too: docked right it hangs left of the tick bar,\n * docked left it must hang RIGHT of it - otherwise a dotted row pushes its\n * bar 9px inward (4px dot + 5px gap) and the flush bar column goes ragged.\n * order= reorders the flex row without touching the DOM, so the expanded\n * panel can put the dot back in front of the label. */\n#jp-minimap.jp-mm-left .jp-mm-dot {\n\torder: 1;\n\tmargin-inline-start: 5px;\n\tmargin-inline-end: 0;\n}\n\n/* ---- expanded state (hover) ---- */\n\n#jp-minimap
|
|
50
|
+
var MINIMAP_CSS = "/* Joplin Minimap \u2014 collapsed tick bars, hover-expanded ToC panel.\n * Colors use currentColor / rgba so it follows both light and dark themes.\n */\n\n#jp-minimap {\n\tuser-select: none;\n\t-webkit-user-select: none;\n\tcaret-color: transparent;\n\tcursor: default;\n\tposition: fixed;\n\ttop: 50%;\n\tright: 6px;\n\ttransform: translateY(-50%);\n\tz-index: 9999;\n\tfont-size: var(--jp-mm-font, 12.5px);\n\tline-height: 1.35;\n\tcolor: var(--jp-mm-color, inherit);\n\t/* Collapsed geometry is direction-independent: the tick bars always\n\t * hug the docked edge, whichever side that is, even in an RTL note. Per-item direction applies\n\t * to the expanded panel only (see the dir=rtl rule below). */\n\tdirection: ltr;\n}\n\n.jp-mm-list {\n\tdisplay: flex;\n\tflex-direction: column;\n\talign-items: flex-end;\n\tpadding: 8px 6px;\n\tmax-height: 84vh;\n\toverflow: hidden;\n\tborder-radius: 10px;\n\ttransition: background 0.15s ease, box-shadow 0.15s ease;\n}\n\n.jp-mm-item {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n\tpadding: 3px 4px;\n\tborder-radius: 6px;\n\ttext-decoration: none;\n\tcolor: inherit;\n\topacity: var(--jp-mm-dim, 0.5);\n\tcursor: pointer;\n\toutline: none;\n\tdirection: ltr;\n}\n\n/* ---- collapsed state: tick bars, width by heading level ---- */\n\n.jp-mm-bar {\n\tdisplay: block;\n\theight: 2px;\n\tborder-radius: 1px;\n\tbackground: currentColor;\n}\n\n.jp-mm-l1 .jp-mm-bar { width: 18px; }\n.jp-mm-l2 .jp-mm-bar { width: 13px; }\n.jp-mm-l3 .jp-mm-bar { width: 9px; }\n.jp-mm-l4 .jp-mm-bar { width: 7px; }\n.jp-mm-l5 .jp-mm-bar { width: 5px; }\n.jp-mm-l6 .jp-mm-bar { width: 5px; }\n\n.jp-mm-label { display: none; }\n\n/* ---- depth stepper (issue #2) ---- */\n\n/* Rows deeper than the current depth are HIDDEN, not removed: keeping the\n * nav element alive is what lets the panel stay open across a depth change,\n * since the whole expansion rides on :hover over #jp-minimap. */\n#jp-minimap[data-depth=\"1\"] .jp-mm-l2,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l3,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"1\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l3,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"2\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l4,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"3\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"4\"] .jp-mm-l5,\n#jp-minimap[data-depth=\"4\"] .jp-mm-l6,\n#jp-minimap[data-depth=\"5\"] .jp-mm-l6 { display: none; }\n\n/* The stepper is part of the expanded panel only - collapsed, the minimap\n * stays the same narrow strip of tick marks it has always been. */\n.jp-mm-head { display: none; }\n\n\n/* ---- docked on the left edge ---- */\n\n/* Mirror the collapsed alignment so the tick bars hug the left border.\n * direction is pinned to ltr above, so flex-start is unambiguously the left\n * side whatever language the note is in. Placed BEFORE the :hover rules on\n * purpose: they carry the same specificity, so source order decides. */\n#jp-minimap.jp-mm-left .jp-mm-list { align-items: flex-start; }\n#jp-minimap.jp-mm-left .jp-mm-item { justify-content: flex-start; }\n\n/* The to-do dot mirrors too: docked right it hangs left of the tick bar,\n * docked left it must hang RIGHT of it - otherwise a dotted row pushes its\n * bar 9px inward (4px dot + 5px gap) and the flush bar column goes ragged.\n * order= reorders the flex row without touching the DOM, so the expanded\n * panel can put the dot back in front of the label. */\n#jp-minimap.jp-mm-left .jp-mm-dot {\n\torder: 1;\n\tmargin-inline-start: 5px;\n\tmargin-inline-end: 0;\n}\n\n/* ---- expanded state (hover) ---- */\n\n#jp-minimap.jp-mm-open .jp-mm-list {\n\talign-items: stretch;\n\toverflow-y: auto;\n\toverscroll-behavior: contain;\n\tbackground: var(--jp-mm-bg, rgba(127, 127, 127, 0.16));\n\tbackdrop-filter: blur(10px);\n\t-webkit-backdrop-filter: blur(10px);\n\tbox-shadow: 0 6px 28px rgba(0, 0, 0, 0.28);\n}\n\n#jp-minimap.jp-mm-open .jp-mm-bar { display: none; }\n\n#jp-minimap.jp-mm-open .jp-mm-item { justify-content: flex-start; }\n\n#jp-minimap.jp-mm-open .jp-mm-label {\n\tdisplay: block;\n\tmax-width: var(--jp-mm-width, 240px);\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\ttext-align: start;\n}\n\n/* RTL headings (Persian/Arabic/Hebrew) read right-to-left in the expanded\n * panel: justify-content, padding-inline-start and text-align:start all flip\n * with the row direction, so the label hugs the right edge and nested levels\n * indent inward from the right. build() sets dir per row (first strong char). */\n#jp-minimap.jp-mm-open .jp-mm-item[dir=\"rtl\"] { direction: rtl; }\n\n/* indent by heading level when expanded (logical: left in LTR, right in RTL) */\n#jp-minimap.jp-mm-open .jp-mm-l2 { padding-inline-start: 16px; }\n#jp-minimap.jp-mm-open .jp-mm-l3 { padding-inline-start: 28px; }\n#jp-minimap.jp-mm-open .jp-mm-l4 { padding-inline-start: 40px; }\n#jp-minimap.jp-mm-open .jp-mm-l5 { padding-inline-start: 52px; }\n#jp-minimap.jp-mm-open .jp-mm-l6 { padding-inline-start: 52px; }\n\n#jp-minimap.jp-mm-open .jp-mm-head {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tgap: 7px;\n\tpadding: 0 4px 5px;\n\tmargin-bottom: 4px;\n\tborder-bottom: 1px solid rgba(127, 127, 127, 0.3);\n\tfont-size: 0.88em;\n\topacity: 0.8;\n\t/* The control reads the same either way round, and the panel is pinned\n\t * to ltr anyway - keep it out of the per-row bidi logic entirely. */\n\tdirection: ltr;\n}\n\n.jp-mm-step {\n\tmin-width: 15px;\n\ttext-align: center;\n\tborder-radius: 4px;\n\tfont-weight: 700;\n\tcursor: pointer;\n\tbackground: rgba(127, 127, 127, 0.22);\n}\n\n#jp-minimap.jp-mm-open .jp-mm-step:hover { background: rgba(127, 127, 127, 0.45); }\n\n/* Already at the shallowest / deepest level this note has. */\n.jp-mm-step-off { opacity: 0.3; cursor: default; }\n#jp-minimap.jp-mm-open .jp-mm-step-off:hover { background: rgba(127, 127, 127, 0.22); }\n\n.jp-mm-depth { font-variant-numeric: tabular-nums; }\n\n/* ---- heading tiers (issue #2): indentation alone is a weak cue when\n * scanning a long outline. Size and weight only - NEVER a colour. The\n * panel has to stay legible on every Joplin theme, so the palette is\n * limited to currentColor and neutral rgba (see CLAUDE.md). ---- */\n#jp-minimap.jp-mm-open .jp-mm-r0 .jp-mm-label { font-size: 1.08em; font-weight: 600; }\n#jp-minimap.jp-mm-open .jp-mm-r1 .jp-mm-label { font-weight: 500; }\n#jp-minimap.jp-mm-open .jp-mm-r2 .jp-mm-label { font-size: 0.92em; opacity: 0.8; }\n\n\n/* Expanded, the dot reads as a marker BEFORE the title on either edge. */\n#jp-minimap.jp-mm-open.jp-mm-left .jp-mm-dot {\n\torder: 0;\n\tmargin-inline-start: 0;\n\tmargin-inline-end: 5px;\n}\n\n/* ---- high contrast (issue #5) ---- */\n\n/* Still routed through the same variables, so a userstyle.css override wins\n * over the mode rather than fighting it. */\n#jp-minimap.jp-mm-hc .jp-mm-item { opacity: var(--jp-mm-dim, 0.82); }\n#jp-minimap.jp-mm-hc.jp-mm-open .jp-mm-r2 .jp-mm-label { opacity: 0.95; }\n\n#jp-minimap.jp-mm-hc.jp-mm-open .jp-mm-list {\n\tbackground: var(--jp-mm-bg, rgba(127, 127, 127, 0.38));\n\tbox-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);\n}\n\n#jp-minimap.jp-mm-hc.jp-mm-open .jp-mm-head { opacity: 1; }\n#jp-minimap.jp-mm-hc .jp-mm-step { background: rgba(127, 127, 127, 0.4); }\n\n/* ---- shared states ---- */\n\n.jp-mm-item:hover {\n\topacity: 1;\n\tbackground: rgba(127, 127, 127, 0.22);\n}\n\n.jp-mm-active { opacity: 1; }\n\n#jp-minimap.jp-mm-open .jp-mm-active {\n\tbackground: rgba(127, 127, 127, 0.18);\n}\n\n/* No scrollbar in the expanded panel: the wheel handler owns scrolling,\n * and a visible scrollbar at the panel edge invites overlay-scrollbar\n * style hover/click interference. */\n.jp-mm-list::-webkit-scrollbar { display: none; }\n.jp-mm-list { scrollbar-width: none; }\n\n/* ---- open-to-do section dot: one muted red dot before the tick bar of\n * any section that contains at least one unchecked checkbox ---- */\n.jp-mm-dot {\n\tdisplay: none;\n\twidth: 4px;\n\theight: 4px;\n\tborder-radius: 50%;\n\tbackground: var(--jp-mm-dot, rgba(205, 97, 85, 0.85));\n\tmargin-inline-end: 5px;\n\tflex: none;\n}\n\n.jp-mm-dot.jp-mm-on { display: block; }\n\n/* don't show over printed/exported output */\n/* ---- touch devices ---- */\n\n/* (hover: none) is the device capability, not a screen width: a tablet with\n * a mouse keeps the desktop sizes, a touchscreen laptop gets these. */\n@media (hover: none) {\n\t/* Collapsed, the whole strip is the tap target - give it room. */\n\t.jp-mm-list { padding: 12px 14px; }\n\t.jp-mm-bar { height: 3px; }\n\n\t/* Expanded, each row has to be hittable on its own. */\n\t#jp-minimap.jp-mm-open .jp-mm-item { padding-top: 12px; padding-bottom: 12px; }\n\t#jp-minimap.jp-mm-open .jp-mm-label { font-size: 1.12em; }\n\t#jp-minimap.jp-mm-open .jp-mm-r0 .jp-mm-label { font-size: 1.2em; }\n\t#jp-minimap.jp-mm-open .jp-mm-r2 .jp-mm-label { font-size: 1.04em; }\n\n\t#jp-minimap.jp-mm-open .jp-mm-head { font-size: 1.04em; gap: 10px; padding-bottom: 8px; }\n\t.jp-mm-step { min-width: 32px; padding: 5px 0; }\n}\n@media print {\n\t#jp-minimap { display: none; }\n}\n";
|
|
51
51
|
|
|
52
52
|
function ensureStyle() {
|
|
53
53
|
if (document.getElementById('jp-minimap-style')) return;
|
|
@@ -95,6 +95,12 @@
|
|
|
95
95
|
// note render, so anything held there is gone on the next keystroke.
|
|
96
96
|
var userDepth = null;
|
|
97
97
|
|
|
98
|
+
// Touch or mouse. This is a device CAPABILITY question, not a screen-size
|
|
99
|
+
// one - a tablet with a mouse should behave like the desktop. The expanded
|
|
100
|
+
// panel is driven by a class rather than :hover precisely because of this:
|
|
101
|
+
// on touch, :hover latches after a tap and the panel gets stuck open.
|
|
102
|
+
var isTouch = !(window.matchMedia && window.matchMedia('(hover: hover)').matches);
|
|
103
|
+
|
|
98
104
|
// Snap a wanted depth onto a level this note actually has (notes routinely
|
|
99
105
|
// start at H2 or skip a level).
|
|
100
106
|
function clampDepth(levels, want) {
|
|
@@ -194,15 +200,29 @@
|
|
|
194
200
|
// left and right set stretches between them instead of hugging one edge.
|
|
195
201
|
// The scrollbar gap is a right-edge concern only - the viewer's scrollbar
|
|
196
202
|
// never sits on the left, so no gap is added there.
|
|
203
|
+
var navClasses = [];
|
|
204
|
+
if (settings.highContrast === true) navClasses.push('jp-mm-hc');
|
|
197
205
|
if (settings.side === 'left') {
|
|
198
|
-
|
|
206
|
+
navClasses.push('jp-mm-left');
|
|
199
207
|
nav.style.left = settings.rightOffset + 'px';
|
|
200
208
|
nav.style.right = 'auto';
|
|
201
209
|
} else {
|
|
202
|
-
|
|
210
|
+
// No scrollbar zone to dodge on touch: scrollbarGap() falls back to a
|
|
211
|
+
// 14px safety margin when it cannot measure one, which on a phone is
|
|
212
|
+
// just 14px of wasted inset.
|
|
213
|
+
nav.style.right = (settings.rightOffset + (isTouch ? 0 : scrollbarGap(root))) + 'px';
|
|
203
214
|
nav.style.left = 'auto';
|
|
204
215
|
}
|
|
216
|
+
nav.className = navClasses.join(' ');
|
|
205
217
|
nav.style.setProperty('--jp-mm-width', settings.panelWidth + 'px');
|
|
218
|
+
// Only set when it differs from the default. An inline custom property
|
|
219
|
+
// beats any stylesheet rule, so writing it unconditionally would make
|
|
220
|
+
// --jp-mm-font impossible to override from userstyle.css without
|
|
221
|
+
// !important - and 100% is exactly the stylesheet's own fallback anyway.
|
|
222
|
+
var scale = Number(settings.fontScale) || 100;
|
|
223
|
+
if (scale !== 100) {
|
|
224
|
+
nav.style.setProperty('--jp-mm-font', (12.5 * scale / 100).toFixed(2) + 'px');
|
|
225
|
+
}
|
|
206
226
|
// The viewer DOM can be editable in some contexts; make sure the
|
|
207
227
|
// minimap never shows a caret or accepts keyboard input.
|
|
208
228
|
// NOTE: no preventDefault on mousedown! Blocking the default mouse-focus
|
|
@@ -219,6 +239,44 @@
|
|
|
219
239
|
list.scrollTop += e.deltaY;
|
|
220
240
|
}, { passive: false });
|
|
221
241
|
|
|
242
|
+
function setOpen(open) {
|
|
243
|
+
nav.classList.toggle('jp-mm-open', open);
|
|
244
|
+
// Drop the stepper's anchoring so the collapsed strip re-centres.
|
|
245
|
+
if (!open) { nav.style.top = ''; nav.style.transform = ''; }
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
var closeOnOutside = null;
|
|
249
|
+
if (isTouch) {
|
|
250
|
+
// Collapsed, the whole strip is one tap target: an individual tick bar
|
|
251
|
+
// is 18x2px, which no finger can hit. Once open, the rows take over.
|
|
252
|
+
var touchAt = null;
|
|
253
|
+
nav.addEventListener('touchstart', function (e) {
|
|
254
|
+
var t = e.touches[0];
|
|
255
|
+
touchAt = t ? { x: t.clientX, y: t.clientY, at: Date.now() } : null;
|
|
256
|
+
}, { passive: true });
|
|
257
|
+
nav.addEventListener('touchend', function (e) {
|
|
258
|
+
if (nav.classList.contains('jp-mm-open')) return;
|
|
259
|
+
var t = e.changedTouches[0];
|
|
260
|
+
// A drag is the reader scrolling the note, not tapping the minimap.
|
|
261
|
+
if (!touchAt || !t) return;
|
|
262
|
+
if (Date.now() - touchAt.at > 700) return;
|
|
263
|
+
if (Math.abs(t.clientX - touchAt.x) > 10 || Math.abs(t.clientY - touchAt.y) > 10) return;
|
|
264
|
+
// Also suppresses the synthetic mousedown, so the tap that OPENS the
|
|
265
|
+
// panel cannot fall through to whatever row lands under the finger.
|
|
266
|
+
e.preventDefault();
|
|
267
|
+
setOpen(true);
|
|
268
|
+
});
|
|
269
|
+
// touchstart, not click: it beats the browser's synthetic-click delay,
|
|
270
|
+
// so the panel is already shut by the time the tap lands on the note.
|
|
271
|
+
closeOnOutside = function (e) {
|
|
272
|
+
if (!nav.contains(e.target)) setOpen(false);
|
|
273
|
+
};
|
|
274
|
+
document.addEventListener('touchstart', closeOnOutside, { passive: true });
|
|
275
|
+
} else {
|
|
276
|
+
nav.addEventListener('mouseenter', function () { setOpen(true); });
|
|
277
|
+
nav.addEventListener('mouseleave', function () { setOpen(false); });
|
|
278
|
+
}
|
|
279
|
+
|
|
222
280
|
var list = document.createElement('div');
|
|
223
281
|
list.className = 'jp-mm-list';
|
|
224
282
|
|
|
@@ -342,6 +400,9 @@
|
|
|
342
400
|
// re-apply this jump against the fresh DOM.
|
|
343
401
|
pendingJump = { index: index, text: text, until: Date.now() + 1200 };
|
|
344
402
|
jumpTo(index, text);
|
|
403
|
+
// On touch there is no cursor to move away, so the panel would sit
|
|
404
|
+
// over the heading the reader just asked to see.
|
|
405
|
+
if (isTouch) setOpen(false);
|
|
345
406
|
});
|
|
346
407
|
|
|
347
408
|
list.appendChild(item);
|
|
@@ -398,6 +459,7 @@
|
|
|
398
459
|
|
|
399
460
|
cleanup = function () {
|
|
400
461
|
document.removeEventListener('scroll', updateActive, { capture: true });
|
|
462
|
+
if (closeOnOutside) document.removeEventListener('touchstart', closeOnOutside);
|
|
401
463
|
};
|
|
402
464
|
}
|
|
403
465
|
|
package/publish/plugin.jpl
CHANGED
|
Binary file
|