diff --git a/package.json b/package.json index 3efd6d34..d60bc165 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.67", + "version": "4.20.68", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/modules/chat/badges.jsx b/src/modules/chat/badges.jsx index 9b91426c..84394174 100644 --- a/src/modules/chat/badges.jsx +++ b/src/modules/chat/badges.jsx @@ -152,10 +152,14 @@ export function generateBadgeCSS(badge, version, data, style, is_dark, badge_ver fore = fg_fixer.process(fore) || fore; } - if ( ! base_image && style > 3 ) - style = 1; + if ( ! base_image ) { + if ( style > 4 ) + style = 1; + else if ( style > 3 ) + style = 2; + } - return `${clickable && (data.click_url || data.click_action) ? 'cursor:pointer;' : ''}${invert ? 'filter:invert(100%);' : ''}${CSS_TEMPLATES[style]({ + return `${clickable && (data.click_handler || data.click_url || data.click_action) ? 'cursor:pointer;' : ''}${invert ? 'filter:invert(100%);' : ''}${CSS_TEMPLATES[style]({ scale: 1, color, fore, diff --git a/src/modules/tooltips.js b/src/modules/tooltips.js index 485db13c..bf2cfd14 100644 --- a/src/modules/tooltips.js +++ b/src/modules/tooltips.js @@ -5,7 +5,7 @@ // ============================================================================ import {createElement, sanitize} from 'utilities/dom'; -import {has, maybe_call} from 'utilities/object'; +import {has, maybe_call, once} from 'utilities/object'; import Tooltip from 'utilities/tooltip'; import Module from 'utilities/module'; @@ -31,7 +31,7 @@ export default class TooltipProvider extends Module { } }, target.dataset.data) ] - } + }; this.types.child = target => { const child = target.querySelector(':scope > .ffz-tooltip-child'); @@ -55,14 +55,62 @@ export default class TooltipProvider extends Module { target.appendChild(child); } } - } + }; + + this.types.markdown = (target, tip) => { + tip.add_class = 'ffz-tooltip--markdown'; + + const md = this.getMarkdown(); + if ( ! md ) + return this.loadMarkdown().then(md => md.render(target.dataset.title)); + + return md.render(target.dataset.title); + }; this.types.text = target => sanitize(target.dataset.title); this.types.html = target => target.dataset.title; this.onFSChange = this.onFSChange.bind(this); + + this.loadMarkdown = once(this.loadMarkdown); + } + getMarkdown(callback) { + if ( this._md ) + return this._md; + + if ( callback ) + this.loadMarkdown().then(md => callback(md)); + } + + async loadMarkdown() { // eslint-disable-line class-methods-use-this + if ( this._md ) + return this._md; + + const [MD, MILA] = await Promise.all([ + import(/* webpackChunkName: 'markdown' */ 'markdown-it'), + import(/* webpackChunkName: 'markdown' */ 'markdown-it-link-attributes') + ]); + + const md = this._md = new MD.default({ + html: false, + linkify: true + }); + + md.use(MILA.default, { + attrs: { + class: 'ffz-tooltip', + target: '_blank', + rel: 'noopener', + 'data-tooltip-type': 'link' + } + }); + + return md; + } + + onEnable() { const container = document.querySelector('.sunlight-root') || document.querySelector('#root>div') || document.querySelector('#root') || document.querySelector('.clips-root') || document.body; @@ -77,7 +125,7 @@ export default class TooltipProvider extends Module { this.on(':cleanup', this.cleanup); } - _createInstance(container, klass = 'ffz-tooltip', default_type) { + _createInstance(container, klass = 'ffz-tooltip', default_type = 'text') { return new Tooltip(container, klass, { html: true, i18n: this.i18n, @@ -136,6 +184,9 @@ export default class TooltipProvider extends Module { const type = target.dataset.tooltipType || default_type, handler = this.types[type]; + if ( target.dataset.tooltipSide ) + pop_opts.placement = target.dataset.tooltipSide; + if ( handler && handler.popperConfig ) return handler.popperConfig(target, tip, pop_opts); @@ -200,8 +251,12 @@ export default class TooltipProvider extends Module { process(default_type, target, tip) { const type = target.dataset.tooltipType || default_type || 'text', + align = target.dataset.tooltipAlign, handler = this.types[type]; + if ( align ) + tip.align = align; + if ( ! handler ) return [ createElement('strong', null, 'Unhandled Tooltip Type'), diff --git a/src/sites/twitch-twilight/index.js b/src/sites/twitch-twilight/index.js index f6a221c8..02dff046 100644 --- a/src/sites/twitch-twilight/index.js +++ b/src/sites/twitch-twilight/index.js @@ -326,6 +326,7 @@ Twilight.ROUTES = { 'product': '/products/:productName', 'prime': '/prime', 'turbo': '/turbo', + 'search': '/search', //'user': '/:userName', 'squad': '/:userName/squad', 'command-center': '/:userName/commandcenter', @@ -335,5 +336,5 @@ Twilight.ROUTES = { Twilight.DIALOG_EXCLUSIVE = '.moderation-root,.sunlight-root,.twilight-main,.twilight-minimal-root>div,#root>div>.tw-full-height,.clips-root'; -Twilight.DIALOG_MAXIMIZED = '.moderation-view-page > div[data-highlight-selector="main-grid"],.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; +Twilight.DIALOG_MAXIMIZED = '.moderation-view-page > div[data-highlight-selector="main-grid"],.sunlight-page,.twilight-main,.twilight-minimal-root,#root .dashboard-side-nav+.tw-full-height,.clips-root>.tw-full-height .scrollable-area,.teams-page-body__outer-container .scrollable-area'; Twilight.DIALOG_SELECTOR = '.moderation-root,.sunlight-root,#root>div,.twilight-minimal-root>.tw-full-height,.clips-root>.tw-full-height .scrollable-area'; \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index 2b3c5f48..2d7c2a16 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/src/sites/twitch-twilight/modules/theme/index.js @@ -485,7 +485,7 @@ The CSS loaded by this setting is far too heavy and can cause performance issues this.toggleNormalizer(chat_bits.length || bits.length); if ( bits.length ) - this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region{${accent_bits.join('\n')}}`); + this.css_tweaks.set('colors', `body {${bits.join('\n')}}.channel-info-content .tw-accent-region,.channel-info-content .gocjHQ{${accent_bits.join('\n')}}`); else this.css_tweaks.delete('colors'); } diff --git a/src/utilities/tooltip.js b/src/utilities/tooltip.js index 6f05a568..77e3f0a2 100644 --- a/src/utilities/tooltip.js +++ b/src/utilities/tooltip.js @@ -269,8 +269,8 @@ export class Tooltip { tip.hide = () => this.hide(tip); tip.rerender = () => { if ( tip.visible ) { - this.hide(tip); - this.show(tip); + tip.hide(); + tip.show(); } } @@ -295,6 +295,9 @@ export class Tooltip { if ( opts.arrowInner ) arrow.appendChild(createElement('div', opts.arrowInner)); + if ( tip.align ) + inner.classList.add(`${opts.innerClass}--align-${tip.align}`); + if ( tip.add_class ) { inner.classList.add(tip.add_class); tip.add_class = undefined; diff --git a/styles/tooltips.scss b/styles/tooltips.scss index 1f345836..19dbbb4a 100644 --- a/styles/tooltips.scss +++ b/styles/tooltips.scss @@ -19,6 +19,19 @@ body { display: none !important; } +.ffz-tooltip--markdown { + white-space: normal; + + p { + font-size: unset; + line-height: unset; + } + + p + p { + margin-top: 0.5rem; + } +} + .ffz-balloon { &[x-placement^="bottom"] > .ffz-balloon__tail { @@ -95,7 +108,6 @@ body { &.html { white-space: normal } - .ffz__tooltip--arrow { position: absolute; width: 6px; height: 6px; @@ -141,6 +153,18 @@ body { padding: .3rem .6rem; text-align: center; + &--align-left { + text-align: left; + } + + &--align-justify { + text-align: justify; + } + + &--align-right { + text-align: right; + } + .preview-image { &.ffz-badge { height: 7.2rem; diff --git a/styles/widgets/main-menu.scss b/styles/widgets/main-menu.scss index 922b5a7a..7a3691c4 100644 --- a/styles/widgets/main-menu.scss +++ b/styles/widgets/main-menu.scss @@ -1,4 +1,6 @@ .ffz-main-menu { + z-index: 100000; + .scrollable-area { overflow-anchor: none; }