mirror of https://github.com/Requarks/wiki.git
NGPixel
5 years ago
10 changed files with 224 additions and 30 deletions
Split View
Diff Options
-
1client/client-app.js
-
6client/themes/default/components/page.vue
-
151client/themes/default/components/tabset.vue
-
6client/themes/default/scss/app.scss
-
6package.json
-
2server/modules/rendering/html-security/renderer.js
-
8server/modules/rendering/html-tabset/definition.yml
-
28server/modules/rendering/html-tabset/renderer.js
-
2server/views/page.pug
-
44yarn.lock
@ -0,0 +1,151 @@ |
|||
<template lang="pug"> |
|||
.tabset.elevation-2 |
|||
ul.tabset-tabs(ref='tabs') |
|||
slot(name='tabs') |
|||
.tabset-content(ref='content') |
|||
slot(name='content') |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
currentTab: 0 |
|||
} |
|||
}, |
|||
watch: { |
|||
currentTab (newValue, oldValue) { |
|||
this.setActiveTab() |
|||
} |
|||
}, |
|||
methods: { |
|||
setActiveTab () { |
|||
this.$refs.tabs.childNodes.forEach((node, idx) => { |
|||
if (idx === this.currentTab) { |
|||
node.className = 'is-active' |
|||
} else { |
|||
node.className = '' |
|||
} |
|||
}) |
|||
this.$refs.content.childNodes.forEach((node, idx) => { |
|||
if (idx === this.currentTab) { |
|||
node.className = 'tabset-panel is-active' |
|||
} else { |
|||
node.className = 'tabset-panel' |
|||
} |
|||
}) |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.setActiveTab() |
|||
this.$refs.tabs.childNodes.forEach((node, idx) => { |
|||
node.addEventListener('click', ev => { |
|||
this.currentTab = [].indexOf.call(ev.target.parentNode.children, ev.target) |
|||
}) |
|||
}) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
.tabset { |
|||
border-radius: 5px; |
|||
margin-top: 10px; |
|||
|
|||
@at-root .theme--dark & { |
|||
background-color: #292929; |
|||
} |
|||
|
|||
> .tabset-tabs { |
|||
padding-left: 0; |
|||
margin: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
background: linear-gradient(to bottom, #FFF, #FAFAFA); |
|||
box-shadow: inset 0 -1px 0 0 #DDD; |
|||
border-radius: 5px 5px 0 0; |
|||
overflow: hidden; |
|||
|
|||
@at-root .theme--dark & { |
|||
background: linear-gradient(to bottom, #424242, #333); |
|||
box-shadow: inset 0 -1px 0 0 #555; |
|||
} |
|||
|
|||
> li { |
|||
display: block; |
|||
padding: 16px; |
|||
margin-top: 0; |
|||
cursor: pointer; |
|||
transition: color 1s ease; |
|||
border-right: 1px solid #FFF; |
|||
font-size: 14px; |
|||
font-weight: 500; |
|||
margin-bottom: 1px; |
|||
user-select: none; |
|||
|
|||
@at-root .theme--dark & { |
|||
border-right-color: #555; |
|||
} |
|||
|
|||
&.is-active { |
|||
background-color: #FFF; |
|||
margin-bottom: 0; |
|||
padding-bottom: 17px; |
|||
color: mc('blue', '700'); |
|||
|
|||
@at-root .theme--dark & { |
|||
background-color: #292929; |
|||
color: mc('blue', '300'); |
|||
} |
|||
} |
|||
|
|||
&:last-child { |
|||
border-right: none; |
|||
|
|||
&.is-active { |
|||
border-right: 1px solid #EEE; |
|||
|
|||
@at-root .theme--dark & { |
|||
border-right-color: #555; |
|||
} |
|||
} |
|||
} |
|||
|
|||
&:hover { |
|||
background-color: rgba(#CCC, .1); |
|||
|
|||
@at-root .theme--dark & { |
|||
background-color: rgba(#222, .25); |
|||
} |
|||
|
|||
&.is-active { |
|||
background-color: #FFF; |
|||
|
|||
@at-root .theme--dark & { |
|||
background-color: #292929; |
|||
} |
|||
} |
|||
} |
|||
|
|||
& + li { |
|||
border-left: 1px solid #EEE; |
|||
|
|||
@at-root .theme--dark & { |
|||
border-left-color: #222; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
> .tabset-content { |
|||
.tabset-panel { |
|||
padding: 2px 16px 16px; |
|||
display: none; |
|||
|
|||
&.is-active { |
|||
display: block; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,8 @@ |
|||
key: htmlTabset |
|||
title: Tabsets |
|||
description: Transform headers into tabs |
|||
author: requarks.io |
|||
icon: mdi-tab |
|||
enabledDefault: true |
|||
dependsOn: htmlCore |
|||
props: {} |
|||
@ -0,0 +1,28 @@ |
|||
const _ = require('lodash') |
|||
|
|||
module.exports = { |
|||
async init($, config) { |
|||
for (let i = 1; i < 6; i++) { |
|||
$(`h${i}.tabset`).each((idx, elm) => { |
|||
let content = `<tabset>` |
|||
let tabs = [] |
|||
let tabContents = [] |
|||
$(elm).nextUntil(_.times(i, t => `h${t + 1}`).join(', '), `h${i + 1}`).each((hidx, hd) => { |
|||
tabs.push(`<li @click="switchTab(${hidx})">${$(hd).html()}</li>`) |
|||
let tabContent = '' |
|||
$(hd).nextUntil(_.times(i + 1, t => `h${t + 1}`).join(', ')).each((cidx, celm) => { |
|||
tabContent += $.html(celm) |
|||
$(celm).remove() |
|||
}) |
|||
console.info(tabContent) |
|||
tabContents.push(`<div class="tabset-panel">${tabContent}</div>`) |
|||
$(hd).remove() |
|||
}) |
|||
content += `<template v-slot:tabs>${tabs.join('')}</template>` |
|||
content += `<template v-slot:content>${tabContents.join('')}</template>` |
|||
content += `</tabset>` |
|||
$(elm).replaceWith($(content)) |
|||
}) |
|||
} |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save