diff --git a/.eslintrc.js b/.eslintrc.js index aff794c0..ae7cb4af 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,7 +11,6 @@ module.exports = { }, rules: { 'class-methods-use-this': 'off', - 'import/no-extraneous-dependencies': ['error', { devDependencies: true }], 'no-plusplus': ['error', { allowForLoopAfterthoughts: true }], 'no-param-reassign': ['error', { props: false }], 'prefer-destructuring': ['error', { object: true, array: false }], diff --git a/assets/chat/css/style.scss b/assets/chat/css/style.scss index 1ddbba67..6cc58035 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -1,7 +1,8 @@ @import '../../common'; @import '../../icons/icons'; @import '~normalize.css'; -@import '~bootstrap'; +@import '~tippy.js/dist/tippy.css'; +@import '~tippy.js/dist/svg-arrow.css'; @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); *, @@ -2180,3 +2181,13 @@ body.pref-fontscale[data-fontscale='10'] { font-family: 'Among Us'; src: url('../../../fonts/AmongUs-Regular.ttf') format('truetype'); } + +.tippy-box[data-theme~='dgg'] { + text-align: center; + background-color: white; + color: #000; +} + +.tippy-box[data-theme~='dgg'] > .tippy-svg-arrow { + fill: white; +} diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index 14db10ae..81a40d04 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -2,7 +2,7 @@ import { fetch } from 'whatwg-fetch'; import $ from 'jquery'; import { debounce } from 'throttle-debounce'; import moment from 'moment'; -import { Tooltip } from 'bootstrap'; +import tippy, { roundArrow } from 'tippy.js'; import { KEYCODES, DATE_FORMATS, @@ -267,8 +267,15 @@ class Chat { return link.sheet; })(); - const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); - tooltipList.forEach((el) => new Tooltip(el)); + // Tooltips + tippy('[data-tippy-content]', { + arrow: roundArrow, + delay: 0, + duration: 0, + maxWidth: 250, + hideOnClick: false, + theme: 'dgg', + }); this.ishidden = (document.visibilityState || 'visible') !== 'visible'; this.output = this.ui.find('#chat-output-frame'); diff --git a/assets/demo.js b/assets/demo.js index 48e36d67..7eba5cdb 100644 --- a/assets/demo.js +++ b/assets/demo.js @@ -49,7 +49,6 @@ switch ((Chat.reqParam('t') || 'embed').toUpperCase()) { case 'EMBED': default: - html.attr('data-bs-theme', 'dark'); chat .withGui(embedHtml) .then(() => chat.loadEmotesAndFlairs()) diff --git a/assets/views/embed.html b/assets/views/embed.html index 959e96b1..20f96e01 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -54,9 +54,7 @@ diff --git a/package-lock.json b/package-lock.json index 8cd920b5..5805adc8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "overlayscrollbars": "^2.0.3", "sass-loader": "^13.2.0", "throttle-debounce": "~5.0.0", + "tippy.js": "^6.3.7", "whatwg-fetch": "^3.6.2" }, "devDependencies": { @@ -24,7 +25,6 @@ "@babel/preset-env": "^7.14.2", "autoprefixer": "^10.2.5", "babel-loader": "^9.1.2", - "bootstrap": "^5.3.2", "css-loader": "^6.7.3", "eslint": "^8.27.0", "eslint-config-airbnb-base": "^15.0.0", @@ -2752,8 +2752,6 @@ "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "dev": true, - "peer": true, "funding": { "type": "opencollective", "url": "https://opencollective.com/popperjs" @@ -4197,25 +4195,6 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, - "node_modules/bootstrap": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", - "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", - "dev": true, - "funding": [ - { - "type": "github", - "url": "https://github.com/sponsors/twbs" - }, - { - "type": "opencollective", - "url": "https://opencollective.com/bootstrap" - } - ], - "peerDependencies": { - "@popperjs/core": "^2.11.8" - } - }, "node_modules/brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -13170,6 +13149,14 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, + "node_modules/tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "dependencies": { + "@popperjs/core": "^2.9.0" + } + }, "node_modules/tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", @@ -16200,9 +16187,7 @@ "@popperjs/core": { "version": "2.11.8", "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", - "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", - "dev": true, - "peer": true + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, "@sinclair/typebox": { "version": "0.27.8", @@ -17361,13 +17346,6 @@ "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==", "dev": true }, - "bootstrap": { - "version": "5.3.2", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz", - "integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==", - "dev": true, - "requires": {} - }, "brace-expansion": { "version": "1.1.11", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", @@ -23950,6 +23928,14 @@ "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==", "dev": true }, + "tippy.js": { + "version": "6.3.7", + "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz", + "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==", + "requires": { + "@popperjs/core": "^2.9.0" + } + }, "tmpl": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz", diff --git a/package.json b/package.json index 05f85f3b..e96cc93a 100644 --- a/package.json +++ b/package.json @@ -40,6 +40,7 @@ "overlayscrollbars": "^2.0.3", "sass-loader": "^13.2.0", "throttle-debounce": "~5.0.0", + "tippy.js": "^6.3.7", "whatwg-fetch": "^3.6.2" }, "devDependencies": { @@ -48,7 +49,6 @@ "@babel/preset-env": "^7.14.2", "autoprefixer": "^10.2.5", "babel-loader": "^9.1.2", - "bootstrap": "^5.3.2", "css-loader": "^6.7.3", "eslint": "^8.27.0", "eslint-config-airbnb-base": "^15.0.0",