diff --git a/projects/core/plumbing/no-jquery.ts b/projects/core/plumbing/no-jquery.ts index 9d6226420..ede3c8ff1 100644 --- a/projects/core/plumbing/no-jquery.ts +++ b/projects/core/plumbing/no-jquery.ts @@ -79,11 +79,6 @@ export class NoJQ { return height; } - /** https://api.jquery.com/outerWidth/ */ - static outerWidth(element: HTMLElement): number { - const outerWidth = element.offsetWidth; - return outerWidth; - } /** https://api.jquery.com/empty/ */ static empty(element: HTMLElement): void { diff --git a/projects/inpage/src/bootstrap/bootstrap.ts b/projects/inpage/src/bootstrap/bootstrap.ts index c2a10ad21..77e46e26d 100644 --- a/projects/inpage/src/bootstrap/bootstrap.ts +++ b/projects/inpage/src/bootstrap/bootstrap.ts @@ -111,7 +111,7 @@ export class BootstrapInPage extends HasLog { }); // Clean up orphan tags if nodes have been added - if (processed) TagToolbarManager.CleanupOrphanedToolbars(); + if (processed) TagToolbarManager.cleanupOrphanedToolbars(); }); observer.observe(document.body, { diff --git a/projects/inpage/src/toolbar/config/toolbar-settings.ts b/projects/inpage/src/toolbar/config/toolbar-settings.ts index 8f2ad0218..5c5b9f9ed 100644 --- a/projects/inpage/src/toolbar/config/toolbar-settings.ts +++ b/projects/inpage/src/toolbar/config/toolbar-settings.ts @@ -2,6 +2,11 @@ import { RuleManager } from '../rules/rule-manager'; import { ToolbarTemplate } from '../templates'; +/** @internal */ +export const TlbHoverPrefix = 'sc-tb-hover-'; +/** @internal */ +export const TlbShowPrefix = 'sc-tb-show-'; + /** @internal */ export const TLB_MORE_END = 'end'; /** @internal */ @@ -22,7 +27,15 @@ export const TLB_HOV_LEFT = 'left'; /** @internal */ export const TLB_HOV_NONE = 'none'; // unclear if this is ever used? /** @internal */ -type TypeHover = typeof TLB_HOV_LEFT | typeof TLB_HOV_RIGHT | 'none'; +type TypeHoverH = typeof TLB_HOV_LEFT | typeof TLB_HOV_RIGHT | 'none'; + +/** @internal */ +export const TLB_HOV_TOP = 'top'; // not in use ATM / default +/** @internal */ +export const TLB_HOV_MID = 'middle'; +/** @internal */ +export const TLB_HOV_BOT = 'bottom'; // not in use ATM / not implemented +type TypeHoverV = typeof TLB_HOV_MID | typeof TLB_HOV_TOP | typeof TLB_HOV_BOT | 'none'; /** @internal */ export const TLB_SHOW_ALWAYS = 'always'; @@ -51,8 +64,12 @@ export class ToolbarSettings { /** Automatically add the '...' more button to the toolbar */ autoAddMore: TypeAutoAddMore = TLB_MORE_AUTO; - /** Hover placement of the toolbar */ - hover: TypeHover = TLB_HOV_RIGHT; + /** + * Hover placement of the toolbar + * Note: originally it was just left | right | default etc. + * In v15 we augmented this to allow right-middle, left-middle etc. for image toolbars + */ + hover: TypeHoverH = TLB_HOV_RIGHT; /** Show behavior (always, hover, ...) */ show: TypeShow = TLB_SHOW_HOVER; @@ -132,7 +149,7 @@ export class ToolbarSettings { // On Auto try to detect based on hover position if (result === TLB_MORE_AUTO) - return settings?.hover === TLB_HOV_LEFT ? TLB_MORE_START : TLB_MORE_END; + return settings?.hover?.startsWith(TLB_HOV_LEFT) /* === TLB_HOV_LEFT */ ? TLB_MORE_START : TLB_MORE_END; // Standard values today, just return them if (result === TLB_MORE_END || result === TLB_MORE_START || result === TLB_MORE_NEVER) diff --git a/projects/inpage/src/toolbar/render/toolbar-renderer.ts b/projects/inpage/src/toolbar/render/toolbar-renderer.ts index 4959d1252..03834913b 100644 --- a/projects/inpage/src/toolbar/render/toolbar-renderer.ts +++ b/projects/inpage/src/toolbar/render/toolbar-renderer.ts @@ -1,8 +1,10 @@ +import { TlbShowPrefix } from './../config/toolbar-settings'; import { CmdParHlp } from '../../commands/cmd-par-hlp'; import { IDs } from '../../constants/ids'; import { ContextBundleToolbar } from '../../context/bundles/context-bundle-toolbar'; import { HasLog, Insights } from '../../core'; import { HtmlTools } from '../../html/dom-tools'; +import { TlbHoverPrefix } from '../config'; import { RenderButton } from './render-button'; import { RenderButtonGroups } from './render-groups'; @@ -27,7 +29,7 @@ export class ToolbarRenderer extends HasLog { * AFAIK it's only used in external scripts through older APIs, and never called directly. */ render(): string { - const cl = this.log.call('generate'); + const cl = this.log.call('render'); return cl.return(this.generate().outerHTML); } @@ -49,8 +51,9 @@ export class ToolbarRenderer extends HasLog { // add behaviour classes const settings = context.toolbar.settings; - tlbTag.classList.add(`sc-tb-hover-${settings.hover}`); - tlbTag.classList.add(`sc-tb-show-${settings.show}`); + const hover = settings.hover?.split('-'); // in case it has two values, like right-middle + hover?.forEach(h => tlbTag.classList.add(`${TlbHoverPrefix}${h}`)); + tlbTag.classList.add(`${TlbShowPrefix}${settings.show}`); if (CmdParHlp.getIndex(context.toolbar.params) === -1) tlbTag.classList.add('listContent'); if (context.toolbar.params.fields) diff --git a/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar-manager.ts b/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar-manager.ts index d1aae3295..caa150aa3 100644 --- a/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar-manager.ts +++ b/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar-manager.ts @@ -51,7 +51,7 @@ export class TagToolbarManager { * This can be necessary if the module was replaced by ajax, * leaving behind un-attached TagToolbars. */ - static CleanupOrphanedToolbars() { + static cleanupOrphanedToolbars() { const tagToolbars = document.querySelectorAll(`[${TagToolbarManager.TagToolbarForAttr}]`); tagToolbars.forEach((e) => { const id = e.getAttribute(TagToolbarManager.TagToolbarForAttr); diff --git a/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar.ts b/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar.ts index f440df42c..d653289ea 100644 --- a/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar.ts +++ b/projects/inpage/src/toolbar/tag-toolbars/tag-toolbar.ts @@ -2,9 +2,13 @@ import { ContextComplete } from '../../context/bundles/context-bundle-button'; import { Translator } from '../../i18n'; import { NoJQ } from '../../plumbing'; -import { TLB_FOLLOW_ALWAYS, TLB_FOLLOW_INITIAL, TLB_FOLLOW_SCROLL, TLB_SHOW_ALWAYS, TypeFollow } from '../config/toolbar-settings'; +import { TLB_FOLLOW_ALWAYS, TLB_FOLLOW_INITIAL, TLB_FOLLOW_SCROLL, TLB_SHOW_ALWAYS, TypeFollow, TLB_HOV_RIGHT, TLB_HOV_MID, TlbHoverPrefix } from '../config/toolbar-settings'; import { ToolbarLifecycle } from '../toolbar-lifecycle'; +const TagToolbarPadding = 4; +const TagToolbarPaddingRight = 0; +const ToolbarHeight = 20; + /** * This is the modern toolbar which is attached to a tag from whic it hovers. * Internally the toolbar Dom-Elements are hidden at the bottom of the page. @@ -96,13 +100,15 @@ export class TagToolbar { bodyOffset: TagToolbarManager.getBodyScrollOffset(), tagScrollOffset: 0, tagOffset: NoJQ.offset(this.hoverTag), - tagWidth: NoJQ.outerWidth(this.hoverTag), + tagWidth: this.hoverTag.offsetWidth, + tagHeight: this.hoverTag.offsetHeight, mousePos: TagToolbarManager.mousePosition, win: { scrollY: window.scrollY, width: document.documentElement.clientWidth, }, - padding: tagToolbarPadding, + padding: TagToolbarPadding, + // tag: this.hoverTag, // just for debugging }; // If we scrolled down, the toolbar might not be visible - calculate offset @@ -111,22 +117,30 @@ export class TagToolbar { // Update top coordinates // new: only do this on initial=true && follow != 'none' or not-initial // start by setting default-top - position.top = position.tagOffset.top + tagToolbarPadding - position.bodyOffset.top; + position.top = position.tagOffset.top + TagToolbarPadding - position.bodyOffset.top; const trackMouse = (this.follow === TLB_FOLLOW_ALWAYS) - || (this.follow === TLB_FOLLOW_INITIAL && initial) - || (this.follow === TLB_FOLLOW_SCROLL && position.tagScrollOffset !== 0); + || (this.follow === TLB_FOLLOW_INITIAL && initial) + || (this.follow === TLB_FOLLOW_SCROLL && position.tagScrollOffset !== 0); + + const tagClasses = this.toolbarElement.classList; if (trackMouse) - position.top = position.mousePos.y + position.win.scrollY - position.bodyOffset.top - toolbarHeight / 2; + position.top = position.mousePos.y + position.win.scrollY - position.bodyOffset.top - (ToolbarHeight / 2); + else + if (tagClasses.contains(TlbHoverPrefix + TLB_HOV_MID)) + position.top = position.top + (position.tagHeight / 2) - ToolbarHeight; // Update left / right coordinates - if (this.toolbarElement.classList.contains('sc-tb-hover-right')) - position.right = position.win.width - position.tagOffset.left - position.tagWidth + tagToolbarPaddingRight - position.bodyOffset.left; + if (tagClasses.contains(TlbHoverPrefix + TLB_HOV_RIGHT)) + position.right = position.win.width - position.tagOffset.left - position.tagWidth + TagToolbarPaddingRight - position.bodyOffset.left; else - position.left = position.tagOffset.left + tagToolbarPadding + position.bodyOffset.left; + position.left = position.tagOffset.left + TagToolbarPadding + position.bodyOffset.left; + + - this.toolbarElement.style.top = typeof position.top === 'number' ? `${position.top}px` : position.top; - this.toolbarElement.style.left = typeof position.left === 'number' ? `${position.left}px` : position.left; - this.toolbarElement.style.right = typeof position.right === 'number' ? `${position.right}px` : position.right; + const tlbStyle = this.toolbarElement.style; + tlbStyle.top = typeof position.top === 'number' ? `${position.top}px` : position.top; + tlbStyle.left = typeof position.left === 'number' ? `${position.left}px` : position.left; + tlbStyle.right = typeof position.right === 'number' ? `${position.right}px` : position.right; } @@ -189,6 +203,3 @@ export class TagToolbar { } -const tagToolbarPadding = 4; -const tagToolbarPaddingRight = 0; -const toolbarHeight = 20; diff --git a/projects/inpage/src/toolbar/toolbar-global-enable-shake.ts b/projects/inpage/src/toolbar/toolbar-global-enable-shake.ts index ff357d646..badcc01a7 100644 --- a/projects/inpage/src/toolbar/toolbar-global-enable-shake.ts +++ b/projects/inpage/src/toolbar/toolbar-global-enable-shake.ts @@ -1,4 +1,5 @@ import { NoJQ } from '../plumbing'; +import { TlbShowPrefix } from './config'; // tslint:disable-next-line: no-var-requires const Shake = require('shake.js'); @@ -7,7 +8,7 @@ const Shake = require('shake.js'); NoJQ.ready(() => { // this will add a css-class to auto-show all toolbars (or remove it again) function toggleAllToolbars() { - document.body.classList.toggle('sc-tb-show-all'); + document.body.classList.toggle(`${TlbShowPrefix}all`); } // debugger; // shake is not working, neither on ios nor android. Might be because of http and might work with https diff --git a/projects/inpage/src/toolbar/toolbar-global-stop-click-propagation.ts b/projects/inpage/src/toolbar/toolbar-global-stop-click-propagation.ts deleted file mode 100644 index a67575b52..000000000 --- a/projects/inpage/src/toolbar/toolbar-global-stop-click-propagation.ts +++ /dev/null @@ -1,8 +0,0 @@ -// import { C } from '../constants'; - -// prevent propagation of the click (if menu was clicked) -// 2021-09-17 spm this was used to fix click propagation to parent module, and now edit buttons -// are in a separate layer where parent is document.body so this should not be necessary anymore -// document.querySelectorAll(C.IDs.sel.scMenu).forEach((el) => { -// el.addEventListener('click', (e) => e.stopPropagation()); -// });