Skip to content

Commit e7091d6

Browse files
shakyShaneshakyShane
committed
history: reset when clicking outside the main container
1 parent 01393da commit e7091d6

File tree

4 files changed

+183
-5
lines changed

4 files changed

+183
-5
lines changed

‎index.html

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
<link rel="stylesheet" href="/reset.css">
2+
<style>
3+
body {
4+
height: 100vh;
5+
}
6+
.layout {
7+
display: grid;
8+
height: 100vh;
9+
width: 100%;
10+
grid-template-rows: max-content 1fr;
11+
grid-template-areas: 'header' 'main';
12+
}
13+
.scroller {
14+
grid-area: main;
15+
overflow: auto;
16+
width: 100%;
17+
z-index: 0;
18+
}
19+
20+
header {
21+
background: lightcyan;
22+
padding: 2rem;
23+
grid-area: header;
24+
view-transition-name: header;
25+
z-index: 1;
26+
}
27+
</style>
28+
<div class="layout">
29+
<header>
30+
<div>
31+
<p>hother</p>
32+
</div>
33+
</header>
34+
<div class="scroller">
35+
<ul>
36+
<li>1</li>
37+
<li>2</li>
38+
<li>3</li>
39+
<li>4</li>
40+
<li>5</li>
41+
<li>6</li>
42+
<li>7</li>
43+
<li>8</li>
44+
<li>9</li>
45+
<li>10</li>
46+
<li>11</li>
47+
<li>12</li>
48+
<li>13</li>
49+
<li>14</li>
50+
<li>15</li>
51+
<li>16</li>
52+
<li>17</li>
53+
<li>18</li>
54+
<li>19</li>
55+
<li>20</li>
56+
<li>21</li>
57+
<li>22</li>
58+
<li>23</li>
59+
<li>24</li>
60+
<li>25</li>
61+
<li>26</li>
62+
<li>27</li>
63+
<li>28</li>
64+
<li>29</li>
65+
<li>30</li>
66+
<li>31</li>
67+
<li>32</li>
68+
<li>33</li>
69+
<li>34</li>
70+
<li>35</li>
71+
<li>36</li>
72+
<li>37</li>
73+
<li>38</li>
74+
<li>39</li>
75+
<li>40</li>
76+
<li>41</li>
77+
<li>42</li>
78+
<li>43</li>
79+
<li>44</li>
80+
<li>45</li>
81+
<li>46</li>
82+
<li>47</li>
83+
<li>48</li>
84+
<li>49</li>
85+
<li>50</li>
86+
<li>51</li>
87+
<li>52</li>
88+
<li>53</li>
89+
<li>54</li>
90+
<li>55</li>
91+
<li>56</li>
92+
<li>57</li>
93+
<li>58</li>
94+
<li>59</li>
95+
<li>60</li>
96+
<li>61</li>
97+
<li>62</li>
98+
<li>63</li>
99+
<li>64</li>
100+
<li>65</li>
101+
<li>66</li>
102+
<li>67</li>
103+
<li>68</li>
104+
<li>69</li>
105+
<li>70</li>
106+
<li>71</li>
107+
<li>72</li>
108+
<li>73</li>
109+
<li>74</li>
110+
<li>75</li>
111+
<li>76</li>
112+
<li>77</li>
113+
<li>78</li>
114+
<li>79</li>
115+
<li>80</li>
116+
<li>81</li>
117+
<li>82</li>
118+
<li>83</li>
119+
<li>84</li>
120+
<li>85</li>
121+
<li>86</li>
122+
<li>87</li>
123+
<li>88</li>
124+
<li>89</li>
125+
<li>90</li>
126+
<li>91</li>
127+
<li>92</li>
128+
<li>93</li>
129+
<li>94</li>
130+
<li>95</li>
131+
<li>96</li>
132+
<li>97</li>
133+
<li>98</li>
134+
<li>99</li>
135+
<li>100</li>
136+
</ul>
137+
</div>
138+
</div>
139+
140+
<script type="module">
141+
const createRemoveButton = (li) => {
142+
const button = document.createElement('button');
143+
button.textContent = 'Remove';
144+
button.addEventListener('click', () => {
145+
document.startViewTransition(() => {
146+
li.remove();
147+
})
148+
});
149+
return button;
150+
};
151+
document.querySelectorAll('li').forEach((item, index) => {
152+
item.style.viewTransitionName = `item-${index}`;
153+
const removeButton = createRemoveButton(item);
154+
item.appendChild(removeButton);
155+
});
156+
</script>

‎special-pages/pages/history/app/components/App.jsx

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import { useSearchCommit } from '../global/hooks/useSearchCommit.js';
1919
import { useRangesData } from '../global/Providers/HistoryServiceProvider.js';
2020
import { usePlatformName } from '../types.js';
2121
import { useLayoutMode } from '../global/hooks/useLayoutMode.js';
22+
import { useClickAnywhereElse } from '../global/hooks/useClickAnywhereElse.jsx';
2223

2324
export function App() {
2425
const platformName = usePlatformName();
@@ -39,6 +40,7 @@ export function App() {
3940
useURLReflection();
4041
useSearchCommit();
4142
useSearchCommitForRange();
43+
const clickAnywhere = useClickAnywhereElse();
4244

4345
/**
4446
* onClick can be passed directly to the main container,
@@ -62,7 +64,13 @@ export function App() {
6264
}, [onKeyDown, query]);
6365

6466
return (
65-
<div class={styles.layout} data-theme={isDarkMode ? 'dark' : 'light'} data-platform={platformName} data-layout-mode={mode}>
67+
<div
68+
class={styles.layout}
69+
data-theme={isDarkMode ? 'dark' : 'light'}
70+
data-platform={platformName}
71+
data-layout-mode={mode}
72+
onClick={clickAnywhere}
73+
>
6674
<aside class={styles.aside}>
6775
<Sidebar ranges={ranges} />
6876
</aside>

‎special-pages/pages/history/app/global/Providers/SelectionProvider.js

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -99,11 +99,7 @@ export function useRowInteractions(mainRef) {
9999
if (handled) {
100100
event.preventDefault();
101101
event.stopImmediatePropagation();
102-
} else {
103-
console.log('did not handle selection');
104102
}
105-
} else {
106-
dispatch({ kind: 'reset', reason: 'click occurred outside of rows' });
107103
}
108104
}
109105

‎special-pages/pages/history/app/global/hooks/useClickAnywhereElse.jsx

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useSelectionDispatch } from '../Providers/SelectionProvider.js';
2+
import { useCallback } from 'preact/hooks';
3+
4+
/**
5+
* Custom hook that creates a callback function to handle click events occurring outside of specified elements.
6+
* The callback dispatches a reset action when the click event target is not a button or an anchor element.
7+
*/
8+
export function useClickAnywhereElse() {
9+
const dispatch = useSelectionDispatch();
10+
return useCallback(
11+
(e) => {
12+
if (e.target?.closest?.('button,a') === null) {
13+
dispatch({ kind: 'reset', reason: 'click occurred outside of rows' });
14+
}
15+
},
16+
[dispatch],
17+
);
18+
}

0 commit comments

Comments
 (0)