Skip to content

Commit 33e9ce7

Browse files
iJungleboyiJungleboy
committed
fix Bootstrap3 image toolbar
2sic/2sxc#2964
1 parent 58f09c5 commit 33e9ce7

File tree

8 files changed

+58
-39
lines changed

8 files changed

+58
-39
lines changed

‎projects/core/plumbing/no-jquery.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -79,11 +79,6 @@ export class NoJQ {
7979
return height;
8080
}
8181

82-
/** https://api.jquery.com/outerWidth/ */
83-
static outerWidth(element: HTMLElement): number {
84-
const outerWidth = element.offsetWidth;
85-
return outerWidth;
86-
}
8782

8883
/** https://api.jquery.com/empty/ */
8984
static empty(element: HTMLElement): void {

‎projects/inpage/src/bootstrap/bootstrap.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -111,7 +111,7 @@ export class BootstrapInPage extends HasLog {
111111
});
112112

113113
// Clean up orphan tags if nodes have been added
114-
if (processed) TagToolbarManager.CleanupOrphanedToolbars();
114+
if (processed) TagToolbarManager.cleanupOrphanedToolbars();
115115
});
116116

117117
observer.observe(document.body, {

‎projects/inpage/src/toolbar/config/toolbar-settings.ts‎

Lines changed: 21 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
import { RuleManager } from '../rules/rule-manager';
33
import { ToolbarTemplate } from '../templates';
44

5+
/** @internal */
6+
export const TlbHoverPrefix = 'sc-tb-hover-';
7+
/** @internal */
8+
export const TlbShowPrefix = 'sc-tb-show-';
9+
510
/** @internal */
611
export const TLB_MORE_END = 'end';
712
/** @internal */
@@ -22,7 +27,15 @@ export const TLB_HOV_LEFT = 'left';
2227
/** @internal */
2328
export const TLB_HOV_NONE = 'none'; // unclear if this is ever used?
2429
/** @internal */
25-
type TypeHover = typeof TLB_HOV_LEFT | typeof TLB_HOV_RIGHT | 'none';
30+
type TypeHoverH = typeof TLB_HOV_LEFT | typeof TLB_HOV_RIGHT | 'none';
31+
32+
/** @internal */
33+
export const TLB_HOV_TOP = 'top'; // not in use ATM / default
34+
/** @internal */
35+
export const TLB_HOV_MID = 'middle';
36+
/** @internal */
37+
export const TLB_HOV_BOT = 'bottom'; // not in use ATM / not implemented
38+
type TypeHoverV = typeof TLB_HOV_MID | typeof TLB_HOV_TOP | typeof TLB_HOV_BOT | 'none';
2639

2740
/** @internal */
2841
export const TLB_SHOW_ALWAYS = 'always';
@@ -51,8 +64,12 @@ export class ToolbarSettings {
5164
/** Automatically add the '...' more button to the toolbar */
5265
autoAddMore: TypeAutoAddMore = TLB_MORE_AUTO;
5366

54-
/** Hover placement of the toolbar */
55-
hover: TypeHover = TLB_HOV_RIGHT;
67+
/**
68+
* Hover placement of the toolbar
69+
* Note: originally it was just left | right | default etc.
70+
* In v15 we augmented this to allow right-middle, left-middle etc. for image toolbars
71+
*/
72+
hover: TypeHoverH = TLB_HOV_RIGHT;
5673

5774
/** Show behavior (always, hover, ...) */
5875
show: TypeShow = TLB_SHOW_HOVER;
@@ -132,7 +149,7 @@ export class ToolbarSettings {
132149

133150
// On Auto try to detect based on hover position
134151
if (result === TLB_MORE_AUTO)
135-
return settings?.hover === TLB_HOV_LEFT ? TLB_MORE_START : TLB_MORE_END;
152+
return settings?.hover?.startsWith(TLB_HOV_LEFT) /* === TLB_HOV_LEFT */ ? TLB_MORE_START : TLB_MORE_END;
136153

137154
// Standard values today, just return them
138155
if (result === TLB_MORE_END || result === TLB_MORE_START || result === TLB_MORE_NEVER)

‎projects/inpage/src/toolbar/render/toolbar-renderer.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
1+
import { TlbShowPrefix } from './../config/toolbar-settings';
12
import { CmdParHlp } from '../../commands/cmd-par-hlp';
23
import { IDs } from '../../constants/ids';
34
import { ContextBundleToolbar } from '../../context/bundles/context-bundle-toolbar';
45
import { HasLog, Insights } from '../../core';
56
import { HtmlTools } from '../../html/dom-tools';
7+
import { TlbHoverPrefix } from '../config';
68
import { RenderButton } from './render-button';
79
import { RenderButtonGroups } from './render-groups';
810

@@ -27,7 +29,7 @@ export class ToolbarRenderer extends HasLog {
2729
* AFAIK it's only used in external scripts through older APIs, and never called directly.
2830
*/
2931
render(): string {
30-
const cl = this.log.call('generate');
32+
const cl = this.log.call('render');
3133
return cl.return(this.generate().outerHTML);
3234
}
3335

@@ -49,8 +51,9 @@ export class ToolbarRenderer extends HasLog {
4951

5052
// add behaviour classes
5153
const settings = context.toolbar.settings;
52-
tlbTag.classList.add(`sc-tb-hover-${settings.hover}`);
53-
tlbTag.classList.add(`sc-tb-show-${settings.show}`);
54+
const hover = settings.hover?.split('-'); // in case it has two values, like right-middle
55+
hover?.forEach(h => tlbTag.classList.add(`${TlbHoverPrefix}${h}`));
56+
tlbTag.classList.add(`${TlbShowPrefix}${settings.show}`);
5457
if (CmdParHlp.getIndex(context.toolbar.params) === -1)
5558
tlbTag.classList.add('listContent');
5659
if (context.toolbar.params.fields)

‎projects/inpage/src/toolbar/tag-toolbars/tag-toolbar-manager.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export class TagToolbarManager {
5151
* This can be necessary if the module was replaced by ajax,
5252
* leaving behind un-attached TagToolbars.
5353
*/
54-
static CleanupOrphanedToolbars() {
54+
static cleanupOrphanedToolbars() {
5555
const tagToolbars = document.querySelectorAll<HTMLElement>(`[${TagToolbarManager.TagToolbarForAttr}]`);
5656
tagToolbars.forEach((e) => {
5757
const id = e.getAttribute(TagToolbarManager.TagToolbarForAttr);

‎projects/inpage/src/toolbar/tag-toolbars/tag-toolbar.ts‎

Lines changed: 27 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,13 @@
22
import { ContextComplete } from '../../context/bundles/context-bundle-button';
33
import { Translator } from '../../i18n';
44
import { NoJQ } from '../../plumbing';
5-
import { TLB_FOLLOW_ALWAYS, TLB_FOLLOW_INITIAL, TLB_FOLLOW_SCROLL, TLB_SHOW_ALWAYS, TypeFollow } from '../config/toolbar-settings';
5+
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';
66
import { ToolbarLifecycle } from '../toolbar-lifecycle';
77

8+
const TagToolbarPadding = 4;
9+
const TagToolbarPaddingRight = 0;
10+
const ToolbarHeight = 20;
11+
812
/**
913
* This is the modern toolbar which is attached to a tag from whic it hovers.
1014
* Internally the toolbar Dom-Elements are hidden at the bottom of the page.
@@ -96,13 +100,15 @@ export class TagToolbar {
96100
bodyOffset: TagToolbarManager.getBodyScrollOffset(),
97101
tagScrollOffset: 0,
98102
tagOffset: NoJQ.offset(this.hoverTag),
99-
tagWidth: NoJQ.outerWidth(this.hoverTag),
103+
tagWidth: this.hoverTag.offsetWidth,
104+
tagHeight: this.hoverTag.offsetHeight,
100105
mousePos: TagToolbarManager.mousePosition,
101106
win: {
102107
scrollY: window.scrollY,
103108
width: document.documentElement.clientWidth,
104109
},
105-
padding: tagToolbarPadding,
110+
padding: TagToolbarPadding,
111+
// tag: this.hoverTag, // just for debugging
106112
};
107113

108114
// If we scrolled down, the toolbar might not be visible - calculate offset
@@ -111,22 +117,30 @@ export class TagToolbar {
111117
// Update top coordinates
112118
// new: only do this on initial=true && follow != 'none' or not-initial
113119
// start by setting default-top
114-
position.top = position.tagOffset.top + tagToolbarPadding - position.bodyOffset.top;
120+
position.top = position.tagOffset.top + TagToolbarPadding - position.bodyOffset.top;
115121
const trackMouse = (this.follow === TLB_FOLLOW_ALWAYS)
116-
|| (this.follow === TLB_FOLLOW_INITIAL && initial)
117-
|| (this.follow === TLB_FOLLOW_SCROLL && position.tagScrollOffset !== 0);
122+
|| (this.follow === TLB_FOLLOW_INITIAL && initial)
123+
|| (this.follow === TLB_FOLLOW_SCROLL && position.tagScrollOffset !== 0);
124+
125+
const tagClasses = this.toolbarElement.classList;
118126
if (trackMouse)
119-
position.top = position.mousePos.y + position.win.scrollY - position.bodyOffset.top - toolbarHeight / 2;
127+
position.top = position.mousePos.y + position.win.scrollY - position.bodyOffset.top - (ToolbarHeight / 2);
128+
else
129+
if (tagClasses.contains(TlbHoverPrefix + TLB_HOV_MID))
130+
position.top = position.top + (position.tagHeight / 2) - ToolbarHeight;
120131

121132
// Update left / right coordinates
122-
if (this.toolbarElement.classList.contains('sc-tb-hover-right'))
123-
position.right = position.win.width - position.tagOffset.left - position.tagWidth + tagToolbarPaddingRight - position.bodyOffset.left;
133+
if (tagClasses.contains(TlbHoverPrefix + TLB_HOV_RIGHT))
134+
position.right = position.win.width - position.tagOffset.left - position.tagWidth + TagToolbarPaddingRight - position.bodyOffset.left;
124135
else
125-
position.left = position.tagOffset.left + tagToolbarPadding + position.bodyOffset.left;
136+
position.left = position.tagOffset.left + TagToolbarPadding + position.bodyOffset.left;
137+
138+
126139

127-
this.toolbarElement.style.top = typeof position.top === 'number' ? `${position.top}px` : position.top;
128-
this.toolbarElement.style.left = typeof position.left === 'number' ? `${position.left}px` : position.left;
129-
this.toolbarElement.style.right = typeof position.right === 'number' ? `${position.right}px` : position.right;
140+
const tlbStyle = this.toolbarElement.style;
141+
tlbStyle.top = typeof position.top === 'number' ? `${position.top}px` : position.top;
142+
tlbStyle.left = typeof position.left === 'number' ? `${position.left}px` : position.left;
143+
tlbStyle.right = typeof position.right === 'number' ? `${position.right}px` : position.right;
130144
}
131145

132146

@@ -189,6 +203,3 @@ export class TagToolbar {
189203

190204
}
191205

192-
const tagToolbarPadding = 4;
193-
const tagToolbarPaddingRight = 0;
194-
const toolbarHeight = 20;

‎projects/inpage/src/toolbar/toolbar-global-enable-shake.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { NoJQ } from '../plumbing';
2+
import { TlbShowPrefix } from './config';
23

34
// tslint:disable-next-line: no-var-requires
45
const Shake = require('shake.js');
@@ -7,7 +8,7 @@ const Shake = require('shake.js');
78
NoJQ.ready(() => {
89
// this will add a css-class to auto-show all toolbars (or remove it again)
910
function toggleAllToolbars() {
10-
document.body.classList.toggle('sc-tb-show-all');
11+
document.body.classList.toggle(`${TlbShowPrefix}all`);
1112
}
1213

1314
// debugger; // shake is not working, neither on ios nor android. Might be because of http and might work with https

‎projects/inpage/src/toolbar/toolbar-global-stop-click-propagation.ts‎

Lines changed: 0 additions & 8 deletions
This file was deleted.

0 commit comments

Comments
 (0)