Skip to content

Commit 1735d71

Browse files
scriptypescriptype
committed
Abstract out explorePanel from main app.js
and make it collapsible. To be removed altogether in some future. But may be useful to keep around for now. Just clean up the place a little for some actual ui development
1 parent d98bbd7 commit 1735d71

26 files changed

+204
-165
lines changed

‎src/cms/server/public/app.js‎

Lines changed: 1 addition & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,5 @@
1-
import ssgBuild from './app/ssgBuild.js'
2-
import ssgWatch from './app/ssgWatch.js'
3-
import ssgStopWatcher from './app/ssgStopWatcher.js'
4-
import getSSGOptions from './app/getSSGOptions.js'
5-
import getSettings from './app/getSettings.js'
6-
import updateSettings from './app/updateSettings.js'
7-
import getFileSystemTree from './app/getFileSystemTree.js'
8-
import getContentModel from './app/getContentModel.js'
9-
import getCollections from './app/getCollections.js'
10-
import getCategories from './app/getCategories.js'
11-
import getCategory from './app/getCategory.js'
12-
import createCategory from './app/createCategory.js'
13-
import getPosts from './app/getPosts.js'
14-
import getPost from './app/getPost.js'
15-
import createPost from './app/createPost.js'
16-
import getSubpages from './app/getSubpages.js'
17-
import getSubpage from './app/getSubpage.js'
18-
import createSubpage from './app/createSubpage.js'
19-
import getHomepage from './app/getHomepage.js'
20-
import createHomepage from './app/createHomepage.js'
21-
import getTags from './app/getTags.js'
22-
import getTag from './app/getTag.js'
23-
24-
const query = document.querySelector.bind(document)
25-
26-
const makeButtonsWork = () => {
27-
query('#ssg-build-btn').addEventListener('click', async () => {
28-
await ssgBuild()
29-
setIframeSrc()
30-
})
31-
query('#ssg-watch-btn').addEventListener('click', async () => {
32-
await ssgWatch()
33-
setIframeSrc()
34-
})
35-
query('#ssg-stop-watcher-btn').addEventListener('click', async () => {
36-
await ssgStopWatcher()
37-
setIframeSrc()
38-
})
39-
query('#get-ssg-options-btn').addEventListener('click', getSSGOptions)
40-
query('#get-settings-btn').addEventListener('click', getSettings)
41-
query('#update-settings-btn').addEventListener('click', updateSettings)
42-
query('#get-file-system-tree-btn').addEventListener('click', getFileSystemTree)
43-
query('#get-content-model-btn').addEventListener('click', getContentModel)
44-
query('#get-collections-btn').addEventListener('click', getCollections)
45-
query('#get-categories-btn').addEventListener('click', getCategories)
46-
query('#get-category-btn').addEventListener('click', getCategory)
47-
query('#create-category-btn').addEventListener('click', createCategory)
48-
query('#get-posts-btn').addEventListener('click', getPosts)
49-
query('#get-post-btn').addEventListener('click', getPost)
50-
query('#create-post-btn').addEventListener('click', createPost)
51-
query('#get-subpages-btn').addEventListener('click', getSubpages)
52-
query('#get-subpage-btn').addEventListener('click', getSubpage)
53-
query('#create-subpage-btn').addEventListener('click', createSubpage)
54-
query('#get-homepage-btn').addEventListener('click', getHomepage)
55-
query('#create-homepage-btn').addEventListener('click', createHomepage)
56-
query('#get-tags-btn').addEventListener('click', getTags)
57-
query('#get-tag-btn').addEventListener('click', getTag)
58-
}
59-
60-
const setIframeSrc = () => {
61-
const { hostname } = window.location
62-
query('#preview').src = `http://${hostname}:3000`
63-
}
64-
65-
const makeDraggable = (element) => {
66-
let offsetX = 0
67-
let offsetY = 0
68-
69-
element.addEventListener('mousedown', (e) => {
70-
offsetX = e.clientX - element.offsetLeft
71-
offsetY = e.clientY - element.offsetTop
72-
73-
const move = (e) => {
74-
element.style.left = (e.clientX - offsetX) + 'px'
75-
element.style.top = (e.clientY - offsetY) + 'px'
76-
}
77-
78-
const stop = () => {
79-
document.removeEventListener('mousemove', move)
80-
document.removeEventListener('mouseup', stop)
81-
}
82-
83-
document.addEventListener('mousemove', move)
84-
document.addEventListener('mouseup', stop)
85-
})
86-
}
1+
import { query, setIframeSrc } from './common.js'
872

883
window.addEventListener('DOMContentLoaded', () => {
894
setIframeSrc()
90-
makeButtonsWork()
91-
makeDraggable(document.querySelector('.explore-panel'))
925
})

‎src/cms/server/public/app/explorePanel.js‎

Lines changed: 122 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,122 @@
1+
import { query, createDOMNodeFromHTML, setIframeSrc } from '../common.js'
2+
import ssgBuild from './explorePanel/ssgBuild.js'
3+
import ssgWatch from './explorePanel/ssgWatch.js'
4+
import ssgStopWatcher from './explorePanel/ssgStopWatcher.js'
5+
import getSSGOptions from './explorePanel/getSSGOptions.js'
6+
import getSettings from './explorePanel/getSettings.js'
7+
import updateSettings from './explorePanel/updateSettings.js'
8+
import getFileSystemTree from './explorePanel/getFileSystemTree.js'
9+
import getContentModel from './explorePanel/getContentModel.js'
10+
import getCollections from './explorePanel/getCollections.js'
11+
import getSubpages from './explorePanel/getSubpages.js'
12+
import getSubpage from './explorePanel/getSubpage.js'
13+
import createSubpage from './explorePanel/createSubpage.js'
14+
import getHomepage from './explorePanel/getHomepage.js'
15+
import createHomepage from './explorePanel/createHomepage.js'
16+
17+
const template = () => {
18+
return `
19+
<div class="panel explore-panel">
20+
<p>ssg</p>
21+
<button type="button" id="ssg-build-btn">ssg.build()</button>
22+
<button type="button" id="ssg-watch-btn">ssg.watch()</button>
23+
<button type="button" id="ssg-stop-watcher-btn">ssg.stopWatcher()</button>
24+
<button type="button" id="get-ssg-options-btn">get ssg options</button>
25+
26+
<p>settings</p>
27+
<button type="button" id="get-settings-btn">get settings</button>
28+
<button type="button" id="update-settings-btn">update settings</button>
29+
30+
<p>fileSystemTree</p>
31+
<button type="button" id="get-file-system-tree-btn">get fileSystemTree</button>
32+
33+
<p>contentModel</p>
34+
<button type="button" id="get-content-model-btn">get contentModel</button>
35+
36+
<p>collections</p>
37+
<button type="button" id="get-collections-btn">get all collections</button>
38+
39+
<p>homepage</p>
40+
<button type="button" id="get-homepage-btn">get homepage</button>
41+
<button type="button" id="create-homepage-btn">create homepage</button>
42+
43+
<p>subpages</p>
44+
<button type="button" id="get-subpages-btn">get all subpages</button>
45+
<button type="button" id="get-subpage-btn">get subpage</button>
46+
<button type="button" id="create-subpage-btn">create subpage</button>
47+
</div>
48+
`
49+
}
50+
51+
const makeButtonsWork = (panel) => {
52+
panel.querySelector('#ssg-build-btn').addEventListener('click', async () => {
53+
await ssgBuild()
54+
setIframeSrc()
55+
})
56+
panel.querySelector('#ssg-watch-btn').addEventListener('click', async () => {
57+
await ssgWatch()
58+
setIframeSrc()
59+
})
60+
panel.querySelector('#ssg-stop-watcher-btn').addEventListener('click', async () => {
61+
await ssgStopWatcher()
62+
setIframeSrc()
63+
})
64+
panel.querySelector('#get-ssg-options-btn').addEventListener('click', getSSGOptions)
65+
panel.querySelector('#get-settings-btn').addEventListener('click', getSettings)
66+
panel.querySelector('#update-settings-btn').addEventListener('click', updateSettings)
67+
panel.querySelector('#get-file-system-tree-btn').addEventListener('click', getFileSystemTree)
68+
panel.querySelector('#get-content-model-btn').addEventListener('click', getContentModel)
69+
panel.querySelector('#get-collections-btn').addEventListener('click', getCollections)
70+
panel.querySelector('#get-subpages-btn').addEventListener('click', getSubpages)
71+
panel.querySelector('#get-subpage-btn').addEventListener('click', getSubpage)
72+
panel.querySelector('#create-subpage-btn').addEventListener('click', createSubpage)
73+
panel.querySelector('#get-homepage-btn').addEventListener('click', getHomepage)
74+
panel.querySelector('#create-homepage-btn').addEventListener('click', createHomepage)
75+
}
76+
77+
const makeDraggable = (element) => {
78+
let offsetX = 0
79+
let offsetY = 0
80+
81+
element.addEventListener('mousedown', (e) => {
82+
offsetX = e.clientX - element.offsetLeft
83+
offsetY = e.clientY - element.offsetTop
84+
85+
const move = (e) => {
86+
element.style.left = (e.clientX - offsetX) + 'px'
87+
element.style.top = (e.clientY - offsetY) + 'px'
88+
}
89+
90+
const stop = () => {
91+
document.removeEventListener('mousemove', move)
92+
document.removeEventListener('mouseup', stop)
93+
}
94+
95+
document.addEventListener('mousemove', move)
96+
document.addEventListener('mouseup', stop)
97+
})
98+
}
99+
100+
const makeCollapsible = (element) => {
101+
element.classList.toggle(
102+
'collapsed',
103+
JSON.parse((localStorage.getItem('ui') || '{}')).explorePanelCollapsed
104+
)
105+
element.addEventListener('dblclick', () => {
106+
element.classList.toggle('collapsed')
107+
localStorage.setItem('ui', JSON.stringify({
108+
...JSON.parse(localStorage.getItem('ui') || '{}'),
109+
explorePanelCollapsed: element.classList.contains('collapsed')
110+
}))
111+
})
112+
}
113+
114+
window.addEventListener('DOMContentLoaded', () => {
115+
const explorePanel = createDOMNodeFromHTML(template())
116+
makeButtonsWork(explorePanel)
117+
makeDraggable(explorePanel)
118+
makeCollapsible(explorePanel)
119+
120+
const container = query('#panels-container')
121+
container.appendChild(explorePanel)
122+
})

src/cms/server/public/app/createCategory.js renamed to src/cms/server/public/app/explorePanel/createCategory.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import api from '../api.js'
1+
import api from '../../api.js'
22

33
const createCategory = () => {
44
return api.category.create({

src/cms/server/public/app/createHomepage.js renamed to src/cms/server/public/app/explorePanel/createHomepage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import api from '../api.js'
1+
import api from '../../api.js'
22

33
const createHomepage = () => {
44
return api.homepage.create({

src/cms/server/public/app/createPost.js renamed to src/cms/server/public/app/explorePanel/createPost.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import api from '../api.js'
1+
import api from '../../api.js'
22

33
const createPost = () => {
44
return api.post.create({

src/cms/server/public/app/createSubpage.js renamed to src/cms/server/public/app/explorePanel/createSubpage.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import api from '../api.js'
1+
import api from '../../api.js'
22

33
const createSubpage = () => {
44
return api.subpage.create({

src/cms/server/public/app/getCategories.js renamed to src/cms/server/public/app/explorePanel/getCategories.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import api from '../api.js'
2-
import dialog from './components/dialog.js'
1+
import api from '../../api.js'
2+
import dialog from '../components/dialog.js'
33

44
export default async () => {
55
dialog.textContent('Loading').show()

src/cms/server/public/app/getCategory.js renamed to src/cms/server/public/app/explorePanel/getCategory.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import api from '../api.js'
2-
import dialog from './components/dialog.js'
1+
import api from '../../api.js'
2+
import dialog from '../components/dialog.js'
33

44
export default async () => {
55
dialog.textContent('Loading').show()

src/cms/server/public/app/getCollections.js renamed to src/cms/server/public/app/explorePanel/getCollections.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import api from '../api.js'
2-
import dialog from './components/dialog.js'
1+
import api from '../../api.js'
2+
import dialog from '../components/dialog.js'
33

44
export default async () => {
55
dialog.textContent('Loading').show()

src/cms/server/public/app/getContentModel.js renamed to src/cms/server/public/app/explorePanel/getContentModel.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import api from '../api.js'
2-
import dialog from './components/dialog.js'
1+
import api from '../../api.js'
2+
import dialog from '../components/dialog.js'
33

44
export default async () => {
55
dialog.textContent('Loading').show()

0 commit comments

Comments
 (0)