diff options
Diffstat (limited to 'src/dumbyUtils.mjs')
-rw-r--r-- | src/dumbyUtils.mjs | 130 |
1 files changed, 65 insertions, 65 deletions
diff --git a/src/dumbyUtils.mjs b/src/dumbyUtils.mjs index 2a9b787..7bf26c8 100644 --- a/src/dumbyUtils.mjs +++ b/src/dumbyUtils.mjs | |||
@@ -1,62 +1,62 @@ | |||
1 | import LeaderLine from 'leader-line'; | 1 | import LeaderLine from 'leader-line' |
2 | 2 | ||
3 | export function focusNextMap(reverse = false) { | 3 | export function focusNextMap (reverse = false) { |
4 | const renderedList = this.utils.renderedMaps(); | 4 | const renderedList = this.utils.renderedMaps() |
5 | const index = renderedList.findIndex(e => e.classList.contains('focus')); | 5 | const index = renderedList.findIndex(e => e.classList.contains('focus')) |
6 | const nextIndex = | 6 | const nextIndex = |
7 | index === -1 ? 0 : (index + (reverse ? -1 : 1)) % renderedList.length; | 7 | index === -1 ? 0 : (index + (reverse ? -1 : 1)) % renderedList.length |
8 | 8 | ||
9 | const nextMap = renderedList.at(nextIndex); | 9 | const nextMap = renderedList.at(nextIndex) |
10 | nextMap.classList.add('focus'); | 10 | nextMap.classList.add('focus') |
11 | } | 11 | } |
12 | 12 | ||
13 | export function focusNextBlock(reverse = false) { | 13 | export function focusNextBlock (reverse = false) { |
14 | const blocks = this.blocks.filter(b => | 14 | const blocks = this.blocks.filter(b => |
15 | b.checkVisibility({ | 15 | b.checkVisibility({ |
16 | contentVisibilityAuto: true, | 16 | contentVisibilityAuto: true, |
17 | opacityProperty: true, | 17 | opacityProperty: true, |
18 | visibilityProperty: true, | 18 | visibilityProperty: true |
19 | }), | 19 | }) |
20 | ); | 20 | ) |
21 | const index = blocks.findIndex(e => e.classList.contains('focus')); | 21 | const index = blocks.findIndex(e => e.classList.contains('focus')) |
22 | const nextIndex = | 22 | const nextIndex = |
23 | index === -1 ? 0 : (index + (reverse ? -1 : 1)) % blocks.length; | 23 | index === -1 ? 0 : (index + (reverse ? -1 : 1)) % blocks.length |
24 | 24 | ||
25 | blocks.forEach(b => b.classList.remove('focus')); | 25 | blocks.forEach(b => b.classList.remove('focus')) |
26 | const nextBlock = blocks.at(nextIndex); | 26 | const nextBlock = blocks.at(nextIndex) |
27 | nextBlock?.classList?.add('focus'); | 27 | nextBlock?.classList?.add('focus') |
28 | scrollToBlock(nextBlock); | 28 | scrollToBlock(nextBlock) |
29 | } | 29 | } |
30 | 30 | ||
31 | // Consider block is bigger then viewport height | 31 | // Consider block is bigger then viewport height |
32 | export const scrollToBlock = block => { | 32 | export const scrollToBlock = block => { |
33 | const parentRect = block.parentElement.getBoundingClientRect(); | 33 | const parentRect = block.parentElement.getBoundingClientRect() |
34 | const scrollBlock = | 34 | const scrollBlock = |
35 | block.getBoundingClientRect().height > parentRect.height * 0.8 | 35 | block.getBoundingClientRect().height > parentRect.height * 0.8 |
36 | ? 'nearest' | 36 | ? 'nearest' |
37 | : 'center'; | 37 | : 'center' |
38 | block.scrollIntoView({ behavior: 'smooth', block: scrollBlock }); | 38 | block.scrollIntoView({ behavior: 'smooth', block: scrollBlock }) |
39 | }; | 39 | } |
40 | 40 | ||
41 | export function focusDelay() { | 41 | export function focusDelay () { |
42 | return window.getComputedStyle(this.showcase).display === 'none' ? 50 : 300; | 42 | return window.window.getComputedStyle(this.showcase).display === 'none' ? 50 : 300 |
43 | } | 43 | } |
44 | 44 | ||
45 | export function switchToNextLayout(reverse = false) { | 45 | export function switchToNextLayout (reverse = false) { |
46 | const layouts = this.layouts; | 46 | const layouts = this.layouts |
47 | const currentLayoutName = this.container.getAttribute('data-layout'); | 47 | const currentLayoutName = this.container.getAttribute('data-layout') |
48 | const currentIndex = layouts.map(l => l.name).indexOf(currentLayoutName); | 48 | const currentIndex = layouts.map(l => l.name).indexOf(currentLayoutName) |
49 | const padding = reverse ? -1 : 1; | 49 | const padding = reverse ? -1 : 1 |
50 | const nextIndex = | 50 | const nextIndex = |
51 | currentIndex === -1 | 51 | currentIndex === -1 |
52 | ? 0 | 52 | ? 0 |
53 | : (currentIndex + padding + layouts.length) % layouts.length; | 53 | : (currentIndex + padding + layouts.length) % layouts.length |
54 | const nextLayout = layouts[nextIndex]; | 54 | const nextLayout = layouts[nextIndex] |
55 | this.container.setAttribute('data-layout', nextLayout.name); | 55 | this.container.setAttribute('data-layout', nextLayout.name) |
56 | } | 56 | } |
57 | 57 | ||
58 | export function removeBlockFocus() { | 58 | export function removeBlockFocus () { |
59 | this.blocks.forEach(b => b.classList.remove('focus')); | 59 | this.blocks.forEach(b => b.classList.remove('focus')) |
60 | } | 60 | } |
61 | 61 | ||
62 | /** | 62 | /** |
@@ -66,31 +66,31 @@ export function removeBlockFocus() { | |||
66 | * @returns {Boolean} ture is link is created, false if coordinates are invalid | 66 | * @returns {Boolean} ture is link is created, false if coordinates are invalid |
67 | */ | 67 | */ |
68 | export const createGeoLink = (link, callback = null) => { | 68 | export const createGeoLink = (link, callback = null) => { |
69 | const url = new URL(link.href); | 69 | const url = new URL(link.href) |
70 | const xyInParams = url.searchParams.get('xy'); | 70 | const xyInParams = url.searchParams.get('xy') |
71 | const xy = xyInParams | 71 | const xy = xyInParams |
72 | ? xyInParams.split(',')?.map(Number) | 72 | ? xyInParams.split(',')?.map(Number) |
73 | : url?.href | 73 | : url?.href |
74 | ?.match(/^geo:([0-9.,]+)/) | 74 | ?.match(/^geo:([0-9.,]+)/) |
75 | ?.at(1) | 75 | ?.at(1) |
76 | ?.split(',') | 76 | ?.split(',') |
77 | ?.reverse() | 77 | ?.reverse() |
78 | ?.map(Number); | 78 | ?.map(Number) |
79 | 79 | ||
80 | if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false; | 80 | if (!xy || isNaN(xy[0]) || isNaN(xy[1])) return false |
81 | 81 | ||
82 | // Geo information in link | 82 | // Geo information in link |
83 | link.url = url; | 83 | link.url = url |
84 | link.xy = xy; | 84 | link.xy = xy |
85 | link.classList.add('with-leader-line', 'geolink'); | 85 | link.classList.add('with-leader-line', 'geolink') |
86 | link.targets = link.url.searchParams.get('id')?.split(',') ?? null; | 86 | link.targets = link.url.searchParams.get('id')?.split(',') ?? null |
87 | 87 | ||
88 | // LeaderLine | 88 | // LeaderLine |
89 | link.lines = []; | 89 | link.lines = [] |
90 | callback?.call(this, link); | 90 | callback?.call(this, link) |
91 | 91 | ||
92 | return true; | 92 | return true |
93 | }; | 93 | } |
94 | 94 | ||
95 | /** | 95 | /** |
96 | * CreateDocLink. | 96 | * CreateDocLink. |
@@ -98,30 +98,30 @@ export const createGeoLink = (link, callback = null) => { | |||
98 | * @param {HTMLElement} Elements contains anchor elements for doclinks | 98 | * @param {HTMLElement} Elements contains anchor elements for doclinks |
99 | */ | 99 | */ |
100 | export const createDocLink = link => { | 100 | export const createDocLink = link => { |
101 | link.classList.add('with-leader-line', 'doclink'); | 101 | link.classList.add('with-leader-line', 'doclink') |
102 | link.lines = []; | 102 | link.lines = [] |
103 | 103 | ||
104 | link.onmouseover = () => { | 104 | link.onmouseover = () => { |
105 | const label = decodeURIComponent(link.href.split('#')[1]); | 105 | const label = decodeURIComponent(link.href.split('#')[1]) |
106 | const selector = link.title.split('=>')[1] ?? '#' + label; | 106 | const selector = link.title.split('=>')[1] ?? '#' + label |
107 | const target = document.querySelector(selector); | 107 | const target = document.querySelector(selector) |
108 | if (!target?.checkVisibility()) return; | 108 | if (!target?.checkVisibility()) return |
109 | 109 | ||
110 | const line = new LeaderLine({ | 110 | const line = new LeaderLine({ |
111 | start: link, | 111 | start: link, |
112 | end: target, | 112 | end: target, |
113 | middleLabel: LeaderLine.pathLabel({ | 113 | middleLabel: LeaderLine.pathLabel({ |
114 | text: label, | 114 | text: label, |
115 | fontWeight: 'bold', | 115 | fontWeight: 'bold' |
116 | }), | 116 | }), |
117 | hide: true, | 117 | hide: true, |
118 | path: 'magnet', | 118 | path: 'magnet' |
119 | }); | 119 | }) |
120 | link.lines.push(line); | 120 | link.lines.push(line) |
121 | line.show('draw', { duration: 300 }); | 121 | line.show('draw', { duration: 300 }) |
122 | }; | 122 | } |
123 | link.onmouseout = () => { | 123 | link.onmouseout = () => { |
124 | link.lines.forEach(line => line.remove()); | 124 | link.lines.forEach(line => line.remove()) |
125 | link.lines.length = 0; | 125 | link.lines.length = 0 |
126 | }; | 126 | } |
127 | }; | 127 | } |