swcs/mixtape
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rte: add bubble/overlay commands

Browse Source
This commit is contained in:
Tobias Klika
2021-02-04 14:18:01 +01:00
parent 84c00ba1c7
commit 7d91cc1e56
2 changed files with 48 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
zero.Web.UI/App/components/forms/rte.vue
+40 -31
View File
@@ -1,36 +1,37 @@
<template>
<div class="ui-rte" :disabled="disabled">
<div :id="id">
<!--<editor-menu-bubble :editor="editor" :keep-in-bounds="true" v-slot="{ commands, isActive, menu }">
<div class="ui-rte-overlay-controls theme-dark" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
<button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.bold() }" @click="commands.bold"><ui-icon symbol="fth-bold" /></button>
<button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.italic() }" @click="commands.italic"><ui-icon symbol="fth-italic" /></button>
<button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.underline() }" @click="commands.underline"><ui-icon symbol="fth-underline" /></button>
<button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.link() }" @click="commands.link"><ui-icon symbol="fth-link" /></button>
<button type="button" class="ui-rte-overlay-control" :class="{ 'is-active': isActive.code() }" @click="commands.code"><ui-icon symbol="fth-code" /></button>
<div class="ui-rte" :id="id" :disabled="disabled">
<editor-menu-bubble v-if="hasBubble" :editor="editor" :keep-in-bounds="true" v-slot="{ commands, isActive, menu }">
<div class="ui-rte-overlay-controls theme-dark" :class="{ 'is-active': menu.isActive }" :style="`left: ${menu.left}px; bottom: ${menu.bottom}px;`">
<div class="ui-rte-overlay-control-outer" v-for="cmd in cmds" v-if="cmd.bubble && !cmd.isParent" :key="cmd.id">
<button type="button" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-overlay-control" :class="{ 'is-active': cmd.isActive(isActive) }" @click="cmd.onClick($event, commands)">
<ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
</button>
</div>
</editor-menu-bubble>-->
<editor-menu-bar v-if="cmds.length > 0 && editor" :editor="editor" v-slot="{ commands, isActive }">
<div class="ui-rte-controls">
<div class="ui-rte-control-outer" v-for="cmd in cmds" :key="cmd.id">
<button type="button" v-if="!cmd.isParent" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }"
@click="cmd.onClick($event, commands)">
<!--// TODO :disabled="cmd.disabled(commands)" | this triggers a recursive loop error when used in multiple properties per editor-->
<ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
</button>
<ui-dropdown v-if="cmd.isParent" align="right">
<template v-slot:button>
<button :data-alias="cmd.alias" type="button" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }">
<ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
</button>
</template>
<ui-dropdown-button v-for="child in cmd.children" :label="child.title" @click="child.onClick($event, commands)" />
</ui-dropdown>
</div>
</div>
</editor-menu-bubble>
<editor-menu-bar v-if="cmds.length > 0 && editor" :editor="editor" v-slot="{ commands, isActive }">
<div class="ui-rte-controls">
<div class="ui-rte-control-outer" v-for="cmd in cmds" :key="cmd.id">
<button type="button" v-if="!cmd.isParent" :data-alias="cmd.alias" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }" @click="cmd.onClick($event, commands)">
<!--// TODO :disabled="cmd.disabled(commands)" | this triggers a recursive loop error when used in multiple properties per editor-->
<ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
</button>
<ui-dropdown v-if="cmd.isParent" align="right">
<template v-slot:button>
<button :data-alias="cmd.alias" type="button" v-localize:title="cmd.title" class="ui-rte-control" :class="{ 'is-active': cmd.isActive(isActive) }">
<ui-icon :symbol="cmd.symbol" :size="cmd.symbolSize" />
</button>
</template>
<ui-dropdown-button v-for="child in cmd.children" :label="child.title" @click="child.onClick($event, commands)" />
</ui-dropdown>
</div>
</editor-menu-bar>
<editor-content class="ui-rte-input" :editor="editor" />
</div>
</div>
</editor-menu-bar>
<editor-content class="ui-rte-input" :editor="editor" />
</div>
</template>
@@ -92,6 +93,13 @@
},
},
computed: {
hasBubble()
{
return this.cmds.find(x => x.bubble) != null;
}
},
created()
{
this.onDebouncedChange = _debounce(this.onChange, 350);
@@ -163,7 +171,8 @@
symbolSize: cmd.symbolSize || 17,
isActive: typeof cmd.isActive === 'function' ? cmd.isActive : () => false,
disabled: typeof cmd.disabled === 'function' ? cmd.disabled : () => false,
onClick: typeof cmd.onClick === 'function' ? cmd.onClick : () => { }
onClick: typeof cmd.onClick === 'function' ? cmd.onClick : () => { },
bubble: cmd.bubble || false
};
}
},
zero.Web.UI/App/config/rte.config.js
+8 -4
View File
@@ -57,7 +57,8 @@ export default function ()
symbol: 'fth-bold',
symbolSize: 14,
isActive: active => active.bold(),
onClick: (ev, cmd) => cmd.bold(ev)
onClick: (ev, cmd) => cmd.bold(ev),
bubble: true
},
{
alias: 'italic',
@@ -65,7 +66,8 @@ export default function ()
symbol: 'fth-italic',
symbolSize: 14,
isActive: active => active.italic(),
onClick: (ev, cmd) => cmd.italic(ev)
onClick: (ev, cmd) => cmd.italic(ev),
bubble: true
},
{
alias: 'underline',
@@ -73,7 +75,8 @@ export default function ()
symbol: 'fth-underline',
symbolSize: 14,
isActive: active => active.underline(),
onClick: (ev, cmd) => cmd.underline(ev)
onClick: (ev, cmd) => cmd.underline(ev),
bubble: true
},
//{
// alias: 'strikethrough',
@@ -89,7 +92,8 @@ export default function ()
symbol: 'fth-code',
symbolSize: 14,
isActive: active => active.code(),
onClick: (ev, cmd) => cmd.code(ev)
onClick: (ev, cmd) => cmd.code(ev),
bubble: true
},
{
alias: 'line',