akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-25 16:16:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add buttons to move element order in a list

Browse Source
This commit is contained in:
Misode
2021-07-03 01:12:54 +02:00
parent 98d754b6d8
commit b43a151d17
3 changed files with 38 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/schema/Octicon.ts
View File

@@ -1,4 +1,6 @@
export const Octicon = {
chevron_down: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M12.78 6.22a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06 0L3.22 7.28a.75.75 0 011.06-1.06L8 9.94l3.72-3.72a.75.75 0 011.06 0z"></path></svg>',
chevron_up: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M3.22 9.78a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 0l4.25 4.25a.75.75 0 01-1.06 1.06L8 6.06 4.28 9.78a.75.75 0 01-1.06 0z"></path></svg>',
clippy: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M5.75 1a.75.75 0 00-.75.75v3c0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75v-3a.75.75 0 00-.75-.75h-4.5zm.75 3V2.5h3V4h-3zm-2.874-.467a.75.75 0 00-.752-1.298A1.75 1.75 0 002 3.75v9.5c0 .966.784 1.75 1.75 1.75h8.5A1.75 1.75 0 0014 13.25v-9.5a1.75 1.75 0 00-.874-1.515.75.75 0 10-.752 1.298.25.25 0 01.126.217v9.5a.25.25 0 01-.25.25h-8.5a.25.25 0 01-.25-.25v-9.5a.25.25 0 01.126-.217z"></path></svg>',
info: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 100-2 1 1 0 000 2z"></path></svg>',
issue_opened: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z"></path></svg>',

16
src/app/schema/renderHtml.ts
View File

@@ -88,7 +88,15 @@ export const renderHtml: Hook<[any, TreeProps], [string, string, string]> = {
let body = ''
if (Array.isArray(value)) {
body = value.map((childValue, index) => {
const removeId = props.mounter.onClick(() => path.model.set(path.push(index), undefined))
const onRemove = props.mounter.onClick(() => path.model.set(path.push(index), undefined))
const onMoveUp = props.mounter.onClick(() => {
[value[index - 1], value[index]] = [value[index], value[index - 1]]
path.model.set(path, value)
})
const onMoveDown = props.mounter.onClick(() => {
[value[index + 1], value[index]] = [value[index], value[index + 1]]
path.model.set(path, value)
})
const childPath = path.push(index).contextPush('entry')
const category = children.category(childPath)
const [cPrefix, cSuffix, cBody] = children.hook(this, childPath, childValue, props)
@@ -96,7 +104,11 @@ export const renderHtml: Hook<[any, TreeProps], [string, string, string]> = {
<div class="node-header">
${error(props.loc, childPath, props.mounter)}
${help(props.loc, childPath, props.mounter)}
<button class="remove" data-id="${removeId}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
<button class="remove" data-id="${onRemove}" aria-label="${props.loc('button.remove')}">${Octicon.trashcan}</button>
${value.length <= 1 ? '' : `<div class="node-move">
<button class="move" data-id="${onMoveUp}" ${index === 0 ? 'disabled' : ''}>${Octicon.chevron_up}</button>
<button class="move" data-id="${onMoveDown}" ${index === value.length - 1 ? 'disabled' : ''}>${Octicon.chevron_down}</button>
</div>`}
${cPrefix}
<label ${contextMenu(props.loc, childPath, props.mounter)}>
${htmlEncode(pathLocale(props.loc, childPath, `${index}`))}