diff options
author | Julius Härtl <jus@bitgrid.net> | 2019-06-16 23:02:11 +0300 |
---|---|---|
committer | Julius Härtl <jus@bitgrid.net> | 2019-06-16 23:02:11 +0300 |
commit | de26dde98d3bfe501574d7deb19614e42dc95af8 (patch) | |
tree | a47f4d456b91fcde21d9d66e0a58b13a838203b4 | |
parent | 31bb4603c8e37931b94e01a54c8e4d77fde7b04b (diff) |
Avoid duplicate callback on DOMContentLoaded
Signed-off-by: Julius Härtl <jus@bitgrid.net>
-rw-r--r-- | css/style.scss | 12 | ||||
-rw-r--r-- | src/components/EditorWrapper.vue | 14 | ||||
-rw-r--r-- | src/components/FilesEditor.vue | 2 | ||||
-rw-r--r-- | src/components/MenuBar.vue | 135 | ||||
-rw-r--r-- | src/helpers.js | 2 | ||||
-rw-r--r-- | src/mixins/menubar.js | 129 |
6 files changed, 139 insertions, 155 deletions
diff --git a/css/style.scss b/css/style.scss index 9df279e6a..cccc9be51 100644 --- a/css/style.scss +++ b/css/style.scss @@ -53,18 +53,6 @@ li.ProseMirror-selectednode:after { } } -#editor, .editor { - background: var(--color-main-background); - color: var(--color-main-text); - background-clip: padding-box; - border-radius: var(--border-radius); - padding: 0; - position: relative; - overflow-y: scroll; - overflow-x: hidden; - width: 100%; -} - div[contenteditable=true], div[contenteditable=false] { border: none !important; diff --git a/src/components/EditorWrapper.vue b/src/components/EditorWrapper.vue index 4e6c38108..7208be644 100644 --- a/src/components/EditorWrapper.vue +++ b/src/components/EditorWrapper.vue @@ -88,7 +88,7 @@ export default { default: null }, fileId: { - type: String, + type: Number, default: null }, active: { @@ -371,6 +371,18 @@ export default { } } + #editor, .editor { + background: var(--color-main-background); + color: var(--color-main-text); + background-clip: padding-box; + border-radius: var(--border-radius); + padding: 0; + position: relative; + overflow-y: scroll; + overflow-x: hidden; + width: 100%; + } + .msg.icon-error { padding: 12px; border-bottom:1px solid var(--color-error); diff --git a/src/components/FilesEditor.vue b/src/components/FilesEditor.vue index e80fa82e2..79a3830b3 100644 --- a/src/components/FilesEditor.vue +++ b/src/components/FilesEditor.vue @@ -37,7 +37,7 @@ export default { default: null }, fileId: { - type: String, + type: Number, default: null }, active: { diff --git a/src/components/MenuBar.vue b/src/components/MenuBar.vue index 1bfd866eb..6bcd90f10 100644 --- a/src/components/MenuBar.vue +++ b/src/components/MenuBar.vue @@ -24,12 +24,13 @@ <editor-menu-bar v-slot="{ commands, isActive }" :editor="editor"> <div class="menubar"> <div ref="menubar" class="menubar-icons"> - <template v-for="icon in iconsToShow"> - <button v-if="icon.class" :key="icon.label" + <template v-for="(icon, $index) in allIcons"> + <button v-if="icon.class" v-show="$index < iconCount" :key="icon.label" :class="getIconClasses(isActive, icon)" @click="clickIcon(commands, icon)" /> <template v-else> - <div :key="icon.label" class="submenu"> - <button :class="childIconClass(isActive, icon.children, )" @click.prevent.stop="toggleChildMenu(icon)" /> + <div v-show="$index < iconCount" :key="icon.label" v-click-outside="() => hideChildMenu(icon)" + class="submenu"> + <button :class="childIconClass(isActive, icon.children, )" @click.prevent="toggleChildMenu(icon)" /> <div :class="{open: isChildMenuVisible(icon)}" class="popovermenu menu-center"> <popover-menu :menu="childPopoverMenu(isActive, commands, icon.children, icon)" /> </div> @@ -37,13 +38,14 @@ </template> </template> <actions> - <template v-for="icon in iconsToShowInMenu"> - <action-button v-if="icon.class" :key="icon.class" + <template v-for="(icon, $index) in allIcons"> + <action-button v-if="icon.class && isHiddenInMenu($index)" :key="icon.class" :icon="icon.class" @click="clickIcon(commands, icon)"> {{ icon.label }} </action-button> - <template v-else> - <action-button v-for="childIcon in icon.children" :key="childIcon.class" :icon="childIcon.class" + <template v-else-if="!icon.class && isHiddenInMenu($index)"> + <action-button v-for="childIcon in icon.children" :key="childIcon.class" + :icon="childIcon.class" @click="clickIcon(commands, childIcon)"> {{ childIcon.label }} </action-button> @@ -61,7 +63,7 @@ <script> import { EditorMenuBar } from 'tiptap' import Tooltip from 'nextcloud-vue/dist/Directives/Tooltip' -import { iconBar } from './../mixins/menubar' +import menuBarIcons from './../mixins/menubar' import { fetchFileInfo } from './../helpers' import Actions from 'nextcloud-vue/dist/Components/Actions' @@ -81,9 +83,6 @@ export default { Tooltip, ClickOutside }, - mixins: [ - iconBar - ], props: { editor: { type: Object, @@ -91,12 +90,118 @@ export default { default: null } }, + data: () => { + return { + windowWidth: 0, + windowHeight: 0, + forceRecompute: 0, + submenuVisibility: {}, + icons: [...menuBarIcons] + } + }, computed: { isPublic() { return document.getElementById('isPublic') && document.getElementById('isPublic').value === '1' + }, + isHiddenInMenu() { + return ($index) => $index - this.iconCount >= 0 + }, + getIconClasses() { + return (isActive, icon) => { + let classes = { + 'is-active': icon.isActive(isActive) + } + classes[icon.class] = true + return classes + } + }, + isChildMenuVisible() { + return (icon) => { + return this.submenuVisibility.hasOwnProperty(icon.label) ? this.submenuVisibility[icon.label] : false + } + }, + allIcons() { + if (this.isPublic) { + return this.icons + } + return [...this.icons, { + label: 'Insert image', + class: 'icon-image', + isActive: () => { + }, + action: (commands) => { + this.showImagePrompt(commands.image) + } + }] + }, + childPopoverMenu() { + return (isActive, commands, icons, parent) => { + let popoverMenuItems = [] + for (const index in icons) { + popoverMenuItems.push({ + text: icons[index].label, + icon: icons[index].class, + action: () => { + icons[index].action(commands) + this.hideChildMenu(parent) + }, + active: icons[index].isActive(isActive) + }) + } + return popoverMenuItems + } + }, + childIconClass() { + return (isActive, icons) => { + for (const index in icons) { + var icon = icons[index] + if (icon.isActive(isActive)) { + return icon.class + } + } + return 'icon-h1' + } + }, + iconCount() { + this.forceRecompute // eslint-disable-line + this.windowWidth // eslint-disable-line + const menuBarWidth = this.$refs.menubar ? this.$refs.menubar.clientWidth : this.windowWidth - 200 + const iconCount = Math.max((Math.floor(menuBarWidth / 44) - 2), 0) + return iconCount } }, + beforeMount() { + this.redrawMenuBar() + }, + mounted() { + window.addEventListener('resize', this.getWindowWidth) + }, + beforeDestroy() { + window.removeEventListener('resize', this.getWindowWidth) + }, methods: { + redrawMenuBar() { + this.$nextTick(() => { + this.getWindowWidth() + this.forceRecompute++ + }) + }, + clickIcon(commands, icon) { + return icon.action(commands) + }, + getWindowWidth(event) { + this.windowWidth = document.documentElement.clientWidth + }, + getWindowHeight(event) { + this.windowHeight = document.documentElement.clientHeight + }, + hideChildMenu(icon) { + this.$set(this.submenuVisibility, icon.label, false) + }, + toggleChildMenu(icon) { + const lastValue = this.submenuVisibility.hasOwnProperty(icon.label) ? this.submenuVisibility[icon.label] : false + this.$set(this.submenuVisibility, icon.label, !lastValue) + }, showImagePrompt(command) { const currentUser = OC.getCurrentUser() if (!currentUser) { @@ -142,6 +247,12 @@ export default { height: 44px; .menubar-icons { flex-grow: 1; + margin-left: calc((100vw - 660px) / 2); + } + @media (max-width: 660px) { + .menubar-icons { + margin-left: 0; + } } } diff --git a/src/helpers.js b/src/helpers.js index 60619f662..ba17150fa 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -32,7 +32,7 @@ const documentReady = function(callback) { if (document.attachEvent ? document.readyState === 'complete' : document.readyState !== 'loading') { fn() } else { - document.addEventListener('DOMContentLoaded', fn) + document.addEventListener('DOMContentLoaded', callback) } } diff --git a/src/mixins/menubar.js b/src/mixins/menubar.js index 1bb61e61a..855e61de7 100644 --- a/src/mixins/menubar.js +++ b/src/mixins/menubar.js @@ -20,9 +20,7 @@ * */ -import Vue from 'vue' - -const icons = [ +export default [ { label: t('text', 'Undo'), class: 'icon-undo', @@ -154,128 +152,3 @@ const icons = [ } } ] - -const iconBar = { - beforeMount() { - this.redrawMenuBar() - }, - mounted() { - window.addEventListener('resize', this.getWindowWidth) - }, - beforeDestroy() { - window.removeEventListener('resize', this.getWindowWidth) - }, - data: () => { - return { - windowWidth: 0, - windowHeight: 0, - forceRecompute: 0, - submenuVisibility: {}, - icons: [...icons] - } - }, - methods: { - redrawMenuBar() { - this.$nextTick(() => { - this.getWindowWidth() - this.forceRecompute++ - }) - }, - clickIcon(commands, icon) { - return icon.action(commands) - }, - getWindowWidth(event) { - this.windowWidth = document.documentElement.clientWidth - }, - getWindowHeight(event) { - this.windowHeight = document.documentElement.clientHeight - }, - showChildMenu(icon) { - Vue.set(this.submenuVisibility, icon.label, true) - this.redrawMenuBar() - }, - hideChildMenu(icon) { - Vue.set(this.submenuVisibility, icon.label, false) - this.redrawMenuBar() - }, - toggleChildMenu(icon) { - const lastValue = this.submenuVisibility.hasOwnProperty(icon.label) ? this.submenuVisibility[icon.label] : false - Vue.set(this.submenuVisibility, icon.label, !lastValue) - // TODO properly fix this - // setting the submenuVisibility doesn't trigger updating for some reason - this.redrawMenuBar() - } - }, - computed: { - getIconClasses() { - return (isActive, icon) => { - let classes = { - 'is-active': icon.isActive(isActive) - } - classes[icon.class] = true - return classes - } - }, - isChildMenuVisible() { - return (icon) => { - return this.submenuVisibility.hasOwnProperty(icon.label) ? this.submenuVisibility[icon.label] : false - } - }, - allIcons() { - if (this.isPublic) { - return this.icons - } - return [...this.icons, { - label: 'Insert image', - class: 'icon-image', - isActive: () => { - }, - action: (commands) => { - this.showImagePrompt(commands.image) - } - }] - }, - iconsToShow() { - return this.allIcons.slice(0, (this.iconCount - 1 > 0) ? this.iconCount - 1 : 0) - }, - iconsToShowInMenu() { - return this.allIcons.slice((this.iconCount - 1 > 0) ? this.iconCount - 1 : 0, this.allIcons.length) - }, - childPopoverMenu() { - return (isActive, commands, icons, parent) => { - let popoverMenuItems = [] - for (const index in icons) { - popoverMenuItems.push({ - text: icons[index].label, - icon: icons[index].class, - action: () => { - icons[index].action(commands) - this.hideChildMenu(parent) - }, - active: icons[index].isActive(isActive) - }) - } - return popoverMenuItems - } - }, - childIconClass() { - return (isActive, icons) => { - for (const index in icons) { - var icon = icons[index] - if (icon.isActive(isActive)) { - return icon.class - } - } - return 'icon-h1' - } - }, - iconCount() { - this.forceRecompute // eslint-disable-line - this.windowWidth // eslint-disable-line - const menuBarWidth = this.$refs.menubar ? this.$refs.menubar.clientWidth : this.windowWidth - 200 - const iconCount = Math.max((Math.floor(menuBarWidth / 44) - 1), 0) - return iconCount - } - } -} -export { icons, iconBar } |