diff --git a/netbox/project-static/package.json b/netbox/project-static/package.json index 5ea71e143..580b7f560 100644 --- a/netbox/project-static/package.json +++ b/netbox/project-static/package.json @@ -36,6 +36,7 @@ "@babel/preset-env": "^7.13.9", "@babel/preset-typescript": "^7.13.0", "@types/bootstrap": "^5.0.8", + "@types/clipboard": "^2.0.1", "@types/cookie": "^0.4.0", "@types/masonry-layout": "^4.2.2", "@typescript-eslint/eslint-plugin": "^4.17.0", diff --git a/netbox/project-static/src/index.ts b/netbox/project-static/src/index.ts index a46f47efd..3f44693bd 100644 --- a/netbox/project-static/src/index.ts +++ b/netbox/project-static/src/index.ts @@ -1,13 +1,5 @@ -// const jquery = require("jquery"); -/* // @ts-expect-error */ -// window.$ = window.jQuery = jquery; -// require("jquery-ui"); -// require("select2"); -// require("./js/forms"); - -require('babel-polyfill'); -require('@popperjs/core'); -require('bootstrap'); -require('clipboard'); -require('flatpickr'); -require('./netbox'); +import 'babel-polyfill'; +import '@popperjs/core'; +import 'bootstrap'; +import 'clipboard'; +import './netbox'; diff --git a/netbox/project-static/src/netbox.ts b/netbox/project-static/src/netbox.ts index 2e9c086cd..7c5eca403 100644 --- a/netbox/project-static/src/netbox.ts +++ b/netbox/project-static/src/netbox.ts @@ -5,6 +5,7 @@ import { initDateSelector } from './dateSelector'; import { initMessageToasts } from './toast'; import { initSpeedSelector, initForms } from './forms'; import { initSearchBar } from './search'; +import { getElements } from './util'; const INITIALIZERS = [ initSearchBar, @@ -18,13 +19,13 @@ const INITIALIZERS = [ ] as (() => void)[]; /** - * Enable Tooltips everywhere - * @see https://getbootstrap.com/docs/5.0/components/tooltips/ + * Enable any defined Bootstrap Tooltips. + * + * @see https://getbootstrap.com/docs/5.0/components/tooltips */ function initBootstrap(): void { if (document !== null) { - const tooltips = Array.from(document.querySelectorAll('[data-bs-toggle="tooltip"]')); - for (const tooltip of tooltips) { + for (const tooltip of getElements('[data-bs-toggle="tooltip"]')) { new Tooltip(tooltip, { container: 'body', boundary: 'window' }); } initMessageToasts(); @@ -32,10 +33,12 @@ function initBootstrap(): void { } } -function initMasonry() { +/** + * Initialize masonry-layout for homepage (or any other masonry layout cards). + */ +function initMasonry(): void { if (document !== null) { - const grids = document.querySelectorAll('.masonry'); - for (const grid of grids) { + for (const grid of getElements('.masonry')) { new Masonry(grid, { itemSelector: '.masonry-item', percentPosition: true, @@ -46,6 +49,7 @@ function initMasonry() { /** * Create a slug from any input string. + * * @param slug Original string. * @param chars Maximum number of characters. * @returns Slugified string. diff --git a/netbox/project-static/yarn.lock b/netbox/project-static/yarn.lock index 3b2455852..4f1915e91 100644 --- a/netbox/project-static/yarn.lock +++ b/netbox/project-static/yarn.lock @@ -1158,6 +1158,11 @@ "@popperjs/core" "^2.6.0" "@types/jquery" "*" +"@types/clipboard@^2.0.1": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@types/clipboard/-/clipboard-2.0.1.tgz#75a74086c293d75b12bc93ff13bc7797fef05a40" + integrity sha512-gJJX9Jjdt3bIAePQRRjYWG20dIhAgEqonguyHxXuqALxsoDsDLimihqrSg8fXgVTJ4KZCzkfglKtwsh/8dLfbA== + "@types/cookie@^0.4.0": version "0.4.0" resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.0.tgz#14f854c0f93d326e39da6e3b6f34f7d37513d108"