From 19f0f8d0117e0c44614eb50a7e69d6836851c0d3 Mon Sep 17 00:00:00 2001 From: Mitchdev Date: Sun, 3 Dec 2023 23:29:40 +1300 Subject: [PATCH] Add bootstrap tooltip --- .eslintrc.js | 1 + assets/chat/css/style.scss | 1 + assets/chat/js/chat.js | 4 ++++ assets/demo.js | 1 + assets/views/embed.html | 4 +++- package-lock.json | 48 ++++++++++++++++++++++++++++++++++++-- package.json | 3 ++- 7 files changed, 58 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index ae7cb4af..aff794c0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,6 +11,7 @@ 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 1733d3b0..1ddbba67 100644 --- a/assets/chat/css/style.scss +++ b/assets/chat/css/style.scss @@ -1,6 +1,7 @@ @import '../../common'; @import '../../icons/icons'; @import '~normalize.css'; +@import '~bootstrap'; @import url('https://fonts.googleapis.com/css?family=Roboto:400,500,600,700'); *, diff --git a/assets/chat/js/chat.js b/assets/chat/js/chat.js index ad75ede3..14db10ae 100644 --- a/assets/chat/js/chat.js +++ b/assets/chat/js/chat.js @@ -2,6 +2,7 @@ import { fetch } from 'whatwg-fetch'; import $ from 'jquery'; import { debounce } from 'throttle-debounce'; import moment from 'moment'; +import { Tooltip } from 'bootstrap'; import { KEYCODES, DATE_FORMATS, @@ -266,6 +267,9 @@ class Chat { return link.sheet; })(); + const tooltipList = document.querySelectorAll('[data-bs-toggle="tooltip"]'); + tooltipList.forEach((el) => new Tooltip(el)); + this.ishidden = (document.visibilityState || 'visible') !== 'visible'; this.output = this.ui.find('#chat-output-frame'); this.input = this.ui.find('#chat-input-control'); diff --git a/assets/demo.js b/assets/demo.js index 7eba5cdb..48e36d67 100644 --- a/assets/demo.js +++ b/assets/demo.js @@ -49,6 +49,7 @@ 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 9abd3ff6..959e96b1 100644 --- a/assets/views/embed.html +++ b/assets/views/embed.html @@ -54,7 +54,9 @@ diff --git a/package-lock.json b/package-lock.json index 55f7f638..8cd920b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6,10 +6,9 @@ "packages": { "": { "name": "dgg-chat-gui", - "version": "2.37.0", + "version": "2.38.1", "license": "SEE LICENSE IN ", "dependencies": { - "bufferutil": "^4.0.3", "dotenv": "^16.0.3", "jquery": "^3.6.0", "moment": "~2.29.1", @@ -25,6 +24,7 @@ "@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", @@ -2748,6 +2748,17 @@ "node": ">= 8" } }, + "node_modules/@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, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -4186,6 +4197,25 @@ "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", @@ -16167,6 +16197,13 @@ "fastq": "^1.6.0" } }, + "@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 + }, "@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -17324,6 +17361,13 @@ "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", diff --git a/package.json b/package.json index ccac2e2b..05f85f3b 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "@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", @@ -87,4 +88,4 @@ "prettier -cwu --loglevel silent ." ] } -} +} \ No newline at end of file