fix Bootstrap3 image toolbar

2sic/2sxc#2964

Author: iJungleboy

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 {

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, {

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)

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)

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<HTMLElement>(`[${TagToolbarManager.TagToolbarForAttr}]`);
         tagToolbars.forEach((e) => {
             const id = e.getAttribute(TagToolbarManager.TagToolbarForAttr);

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;

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