aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/dumbyUtils.mjs
diff options
context:
space:
mode:
Diffstat (limited to 'src/dumbyUtils.mjs')
-rw-r--r--src/dumbyUtils.mjs130
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 @@
1import LeaderLine from 'leader-line'; 1import LeaderLine from 'leader-line'
2 2
3export function focusNextMap(reverse = false) { 3export 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
13export function focusNextBlock(reverse = false) { 13export 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
32export const scrollToBlock = block => { 32export 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
41export function focusDelay() { 41export 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
45export function switchToNextLayout(reverse = false) { 45export 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
58export function removeBlockFocus() { 58export 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 */
68export const createGeoLink = (link, callback = null) => { 68export 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 */
100export const createDocLink = link => { 100export 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}