feat(WIP): bootstrap 5 tooltip 적용

- bootstrap4 용의 popper.js 제거
- jquery기반 bootstrap tooltip 제거
This commit is contained in:
2021-12-10 02:26:08 +09:00
parent 7d8fa7f1c4
commit 703e2f51be
22 changed files with 53 additions and 744 deletions
+1 -1
View File
@@ -9,7 +9,7 @@ $input-color: #303030;
@import "./variables.scss";
@import "./bootswatch_custom_variables.scss";
@import "../../node_modules/bootstrap5/scss/bootstrap.scss";
@import "../../node_modules/bootstrap/scss/bootstrap.scss";
@import "./bootswatch_custom.scss";
@import "./bootstrap_sammo.scss";
@import "./vue-multiselect.scss";
-663
View File
@@ -1,663 +0,0 @@
// Type definitions for Bootstrap 4.6
// Project: https://github.com/twbs/bootstrap/, https://getbootstrap.com
// Definitions by: denisname <https://github.com/denisname>
// Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.3
/// <reference types="jquery"/>
import * as Popper from "popper.js";
export as namespace Bootstrap;
// --------------------------------------------------------------------------
// Some Types and Interfaces
// --------------------------------------------------------------------------
export type Placement = "auto" | "top" | "bottom" | "left" | "right";
export type Trigger = "click" | "hover" | "focus" | "manual" |
"click hover" | "click focus" | "hover focus" |
"click hover focus";
export interface Delay {
show: number;
hide: number;
}
export interface TooltipInstance<T extends TooltipOption> {
config: T;
element: Element;
tip: HTMLElement;
}
export interface OffsetsExtend {
popper?: Partial<Popper.Offset> | undefined;
reference?: Partial<Popper.Offset> | undefined;
}
// --------------------------------------------------------------------------------------
// Options Interfaces
// --------------------------------------------------------------------------------------
export interface CarouselOption {
/**
* The amount of time to delay between automatically cycling an item. If false, carousel will not automatically cycle.
*
* @default 5000
*/
interval?: false | number | undefined;
/**
* Whether the carousel should react to keyboard events.
*
* @default true
*/
keyboard?: boolean | undefined;
/**
* Use to easily control the position of the carousel. It accepts the keywords prev or next, which alters the slide position
* relative to its current position. Alternatively, use `data-slide-to` to pass a raw slide index to the carousel.
*
* @default false
*/
slide?: "next" | "prev" | false | undefined;
/**
* If set to "hover", pauses the cycling of the carousel on `mouseenter` and resumes the cycling of the carousel on `mouseleave`.
* If set to false, hovering over the carousel won't pause it.
*
* On touch-enabled devices, when set to "hover", cycling will pause on `touchend` (once the user finished interacting with the carousel)
* for two intervals, before automatically resuming. Note that this is in addition to the above mouse behavior.
*
* @default "hover"
*/
pause?: "hover" | false | undefined;
/**
* Autoplays the carousel after the user manually cycles the first item.
* If `carousel`, autoplays the carousel on load.
* @default false
*/
ride?: 'carousel' | boolean | undefined;
/**
* Whether the carousel should cycle continuously or have hard stops.
*
* @default true
*/
wrap?: boolean | undefined;
/**
* Whether the carousel should support left/right swipe interactions on touchscreen devices.
*
* @default true
*/
touch?: boolean | undefined;
}
export interface CollapseOption {
/**
* If parent is provided, then all collapsible elements under the specified parent will be closed when
* this collapsible item is shown. (similar to traditional accordion behavior - this is dependent on the card class).
* The attribute has to be set on the target collapsible area.
*
* @default ""
*/
parent?: string | JQuery | Element | undefined;
/**
* Toggles the collapsible element on invocation.
*
* @default true
*/
toggle?: boolean | undefined;
}
export interface DropdownOption {
/**
* Offset of the dropdown relative to its target.
* For more information refer to Popper.js's offset docs.
*
* @default 0
*/
offset?: number | string | ((this: DropdownOption, offset: OffsetsExtend) => OffsetsExtend) | undefined;
/**
* Allow Dropdown to flip in case of an overlapping on the reference element.
* For more information refer to Popper.js's flip docs.
*
* @default true
*/
flip?: boolean | undefined;
/**
* Overflow constraint boundary of the dropdown menu.
* Accepts the values of 'viewport', 'window', 'scrollParent', or an HTMLElement reference (JavaScript only).
* For more information refer to Popper.js's preventOverflow docs.
*
* @default "scrollParent"
*/
boundary?: Popper.Boundary | HTMLElement | undefined;
/**
* Reference element of the dropdown menu. Accepts the values of 'toggle', 'parent', or an HTMLElement reference.
* For more information refer to Popper.js's referenceObject docs.
*
* @default "toggle"
*/
reference?: "toggle" | "parent" | HTMLElement | undefined;
/**
* By default, we use Popper.js for dynamic positioning. Disable this with 'static'.
*
* @default "dynamic"
*/
display?: "dynamic" | "static" | undefined;
}
export interface ModalOption {
/**
* Includes a modal-backdrop element.
* Alternatively, specify `static` for a backdrop which doesn't close the modal on click.
*
* @default true
*/
backdrop?: boolean | "static" | undefined;
/**
* Closes the modal when escape key is pressed.
*
* @default true
*/
keyboard?: boolean | undefined;
/**
* Puts the focus on the modal when initialized.
*
* @default true
*/
focus?: boolean | undefined;
/**
* Shows the modal when initialized.
*
* @default true
*/
show?: boolean | undefined;
}
export interface PopoverOption extends TooltipOption {
/**
* Default content value if `data-content` attribute isn't present.
* If a function is given, it will be called with its `this` reference
* set to the element that the popover is attached to.
*
* @default ""
*/
content?: string | Element | ((this: Element) => string | Element) | undefined;
}
export interface ScrollspyOption {
/**
* Finds which section the spied element is in:
* * `auto` will choose the best method get scroll coordinates.
* * `offset` will use jQuery offset method to get scroll coordinates.
* * `position` will use jQuery position method to get scroll coordinates.
*
* @default "auto"
*/
method?: "auto" | "offset" | "position" | undefined;
/**
* Pixels to offset from top when calculating position of scroll.
*
* @default 10
*/
offset?: number | undefined;
/**
* A selector of the parent element or the parent element itself
* of any Bootstrap `.nav` or `.list-group` component.
*
* @default ""
*/
target?: string | JQuery<Element> | Element | undefined;
}
export interface ToastOption {
/**
* Apply a CSS fade transition to the toast.
*
* @default true
*/
animation?: boolean | undefined;
/**
* Auto hide the toast.
*
* @default true
*/
autohide?: boolean | undefined;
/**
* Delay hiding the toast in millisecond.
*
* @default 500
*/
delay?: number | undefined;
}
export interface TooltipOption {
/**
* Apply a CSS fade transition to the tooltip or popover.
*
* @default true
*/
animation?: boolean | undefined;
/**
* Appends the tooltip or popover to a specific element. Example: `container: 'body'`.
* This option is particularly useful in that it allows you to position the tooltip or popover
* in the flow of the document near the triggering element - which will prevent
* it from floating away from the triggering element during a window resize.
*
* @default false
*/
container?: string | Element | false | undefined;
/**
* Delay showing and hiding the tooltip or popover (ms) - does not apply to manual trigger type.
* If a number is supplied, delay is applied to both hide/show.
* Object structure is: `delay: { "show": 500, "hide": 100 }`.
*
* @default 0
*/
delay?: number | Delay | undefined;
/**
* Allow HTML in the tooltip or popover.
* If true, HTML tags will be rendered in the tooltip or popover.
* If false, jQuery's text method will be used to insert content into the DOM.
* Use text if you're worried about XSS attacks.
*
* @default false
*/
html?: boolean | undefined;
/**
* How to position the tooltip or popover - auto | top | bottom | left | right.
* When "auto" is specified, it will dynamically reorient the tooltip or popover.
*
* When a function is used to determine the placement, it is called with
* the tooltip or popover DOM node as its first argument and the triggering element DOM node as its second.
* The `this` context is set to the tooltip or popover instance.
*
* @default tooltip: "top", popover: "right"
*/
placement?: Placement | ((this: TooltipInstance<this>, node: HTMLElement, trigger: Element) => Placement) | undefined;
/**
* If a selector is provided, tooltip or popover objects will be delegated to the specified targets.
* In practice, this is used to enable dynamic HTML content to have popovers added.
*
* @default false
*/
selector?: string | false | undefined;
/**
* Base HTML to use when creating the tooltip or popover.
* The tooltip's (resp., popover's) title will be injected into the `.tooltip-inner` (resp., `.popover-header`).
* The `.arrow` will become the tooltip's (resp., popover's) arrow.
* The outermost wrapper element should have the `.tooltip` (resp., .popover) class and `role="tooltip"`.
*
* @default '<div class="tooltip" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>'
* @default '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'
*/
template?: string | undefined;
/**
* Default title value if title attribute isn't present.
* If a function is given, it will be called with its `this` reference set to the element
* that the tooltip or popover is attached to.
*
* @default ""
*/
title?: string | Element | ((this: Element) => string | Element) | undefined;
/**
* How tooltip or popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.
* 'manual' indicates that the tooltip will be triggered programmatically; this value cannot be combined with any other trigger.
* 'hover' should only be used if alternative methods for conveying the same information for keyboard users is present.
*
* @default tooltip: "hover focus", popover: "click"
*/
trigger?: Trigger | undefined;
/**
* Offset of the tooltip or popover relative to its target.
* For more information refer to Popper.js's offset docs.
*
* @default 0
*/
offset?: number | string | undefined;
/**
* Allow to specify which position Popper will use on fallback.
* For more information refer to Popper.js's behavior docs.
*
* @default "flip"
*/
fallbackPlacement?: Popper.Behavior | ReadonlyArray<Popper.Behavior> | undefined;
/**
* Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template.
* To add multiple classes, separate them with spaces: 'a b'.
* You can also pass a function that should return a single string containing additional class names.
* @default ''
*/
customClass?: string | (() => string) | undefined;
/**
* Overflow constraint boundary of the tooltip or popover.
* Accepts the values of 'viewport', 'window', 'scrollParent',
* or an HTMLElement reference (JavaScript only).
* For more information refer to Popper.js's preventOverflow docs.
*
* @default "scrollParent"
*/
boundary?: Popper.Boundary | HTMLElement | undefined;
/**
* Enable or disable the sanitization. If activated 'template', 'content' and 'title' options will be sanitized.
*
* @default true
*/
sanitize?: boolean | undefined;
/**
* Object which contains allowed attributes and tags.
*/
whiteList?: {[key: string]: string[]} | undefined;
/**
* Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
*
* @default null
*/
sanitizeFn?: null | ((input: string) => string) | undefined;
/**
* To change Bootstrap's default Popper.js config,
* see {@link https://popper.js.org/docs/v1/ Popper.js's configuration}
*/
// eslint-disable-next-line @typescript-eslint/ban-types
popperConfig?: null | object | undefined;
}
// --------------------------------------------------------------------------------------
// Events
// --------------------------------------------------------------------------------------
export interface CarouselEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
/**
* The carousel dom element.
*/
target: HTMLElement; // overridden only for better JsDoc
/**
* The direction in which the carousel is sliding.
*/
direction: "left" | "right";
/**
* The DOM element that is being slid into place as the active item.
*/
relatedTarget: HTMLElement;
/**
* The index of the current item.
*/
from: number;
/**
* The index of the next item.
*/
to: number;
}
export interface DropdownsEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
/**
* The the dropdown's toggle and the dropdown menu container (the `.dropdown` element).
*/
target: HTMLElement; // overridden only for better JsDoc
/**
* The toggling anchor element.
*/
relatedTarget: HTMLElement;
}
export interface ModalEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
/**
* The modal dom element.
*/
target: HTMLElement; // overridden only for better JsDoc
/**
* For `show.bs.modal` and `shown.bs.modal` is the clicked element, when caused by a _click_.
* Otherwise is undefined.
*/
relatedTarget: HTMLElement | undefined;
}
export interface TapEventHandler<TElement> extends JQuery.TriggeredEvent<TElement, undefined, HTMLElement, HTMLElement> {
/**
* * For `show.bs.tab` and `shown.bs.tab`, is the newly activated tab.
* * For `hide.bs.tab`, is the current active tab.
* * For `hidden.bs.tab`, is the previous active tab.
*/
target: HTMLElement; // overridden only for better JsDoc
/**
* * For `show.bs.tab` and `shown.bs.tab`, is the previous active tab.
* * For `hide.bs.tab`, is the new soon-to-be-active tab.
* * For `hidden.bs.tab`, is the new active tab.
*/
relatedTarget: HTMLElement;
}
export type AlertEvent = "close.bs.alert" | "closed.bs.alert";
export type CarouselEvent = "slide.bs.carousel" | "slid.bs.carousel";
export type CollapseEvent = "show.bs.collapse" | "shown.bs.collapse" | "hide.bs.collapse" | "hidden.bs.collapse";
export type DropdownEvent = "show.bs.dropdown" | "shown.bs.dropdown" | "hide.bs.dropdown" | "hidden.bs.dropdown";
export type ModalEvent = "show.bs.modal" | "shown.bs.modal" | "hide.bs.modal" | "hidden.bs.modal" | "hidePrevented.bs.modal";
export type PopoverEvent = "show.bs.popover" | "shown.bs.popover" | "hide.bs.popover" | "hidden.bs.popover" | "inserted.bs.popover";
export type ScrollspyEvent = "activate.bs.scrollspy";
export type TapEvent = "show.bs.tab" | "shown.bs.tab" | "hide.bs.tab" | "hidden.bs.tab";
export type ToastEvent = "show.bs.toast" | "shown.bs.toast" | "hide.bs.toast" | "hidden.bs.toast";
export type TooltipEvent = "show.bs.tooltip" | "shown.bs.tooltip" | "hide.bs.tooltip" | "hidden.bs.tooltip" | "inserted.bs.tooltip";
// --------------------------------------------------------------------------------------
// jQuery
// --------------------------------------------------------------------------------------
declare global {
interface JQuery<TElement = HTMLElement> {
/**
* If no _method_ is specified, makes an alert listen for click events on descendant elements which have the `data-dismiss="alert"` attribute.
* (Not necessary when using the data-api's auto-initialization.)
* Otherwise, call the method on the alert element:
* * `close` Closes an alert by removing it from the DOM. If the `.fade` and `.show` classes are present on the element, the alert will fade out before it is removed.
* * `dispose` Destroys an element's alert.
*/
alert(action?: "close" | "dispose"): this;
/**
* Call a method on the button element:
* * `toggle` Toggles push state. Gives the button the appearance that it has been activated.
* * `dispose` Destroys an element's button.
*/
button(action: "toggle" | "dispose"): this;
/**
* Call a method on the carousel element:
* * `cycle` Cycles through the carousel items from left to right.
* * `pause` Stops the carousel from cycling through items.
* * _number_ Cycles the carousel to a particular frame (0 based, similar to an array).
* * `prev` Cycles to the previous item.
* * `next` Cycles to the next item.
* * `dispose` Destroys an element's carousel.
*
* Returns to the caller before the target item has been shown (i.e. before the `slid.bs.carousel` event occurs).
*/
carousel(action: "cycle" | "pause" | number | "prev" | "next" | "dispose"): this;
/**
* Initializes the carousel and starts cycling through items.
*/
carousel(options?: CarouselOption): this;
/**
* Call a method on the collapsible element:
* * `toggle` Toggles a collapsible element to shown or hidden.
* * `show` Shows a collapsible element.
* * `hide` Hides a collapsible element.
* * `dispose` Destroys an element's collapse.
*
* Returns to the caller before the collapsible element has actually been shown or hidden (i.e. before the `shown.bs.collapse` or `hidden.bs.collapse` event occurs).
*/
collapse(action: "toggle" | "show" | "hide" | "dispose"): this;
/**
* Activates a content as a collapsible element.
*/
collapse(options?: CollapseOption): this;
/**
* Call a method on the dropdown element:
* * `toggle` Toggles the dropdown menu of a given navbar or tabbed navigation.
* * `show` Shows the dropdown menu of a given navbar or tabbed navigation.
* * `hide` Hides the dropdown menu of a given navbar or tabbed navigation.
* * `update` Updates the position of an element's dropdown.
* * `dispose` Destroys an element's dropdown.
*/
dropdown(action: "toggle" | "show" | "hide" | "update" | "dispose"): this;
/**
* Toggle contextual overlays for displaying lists of links.
*
* The data-api, `data-toggle="dropdown"` is always required to be present on the dropdown's trigger element.
*/
dropdown(options?: DropdownOption): this;
/**
* Call a method on the modal element:
* * `toggle` Manually toggles a modal.
* * `show` Manually opens a modal.
* * `hide` Manually hides a modal.
* * `handleUpdate` Manually readjust the modal's position if the height of a modal changes while it is open (i.e. in case a scrollbar appears).
* * `dispose` Destroys an element's modal.
*
* Returns to the caller before the modal has actually been shown or hidden (i.e. before the `shown.bs.modal` or `hidden.bs.modal` event occurs).
*/
modal(action: "toggle" | "show" | "hide" | "handleUpdate" | "dispose"): this;
/**
* Activates a content as a modal.
*/
modal(options?: ModalOption): this;
/**
* Call a method on the popover element:
* * `show` Reveals an element's popover. Popovers whose both title and content are zero-length are never displayed.
* * `hide` Hides an element's popover.
* * `toggle` Toggles an element's popover.
* * `dispose` Hides and destroys an element's popover.
* Popovers that use delegation (which are created using the `selector` option) cannot be individually destroyed on descendant trigger elements.
* * `enable` Gives an element's popover the ability to be shown. Popovers are enabled by default.
* * `disable` Removes the ability for an element's popover to be shown. The popover will only be able to be shown if it is re-enabled.
* * `toggleEnabled` Toggles the ability for an element's popover to be shown or hidden.
* * `update` Updates the position of an element's popover.
*
* Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.bs.popover` or `hidden.bs.popover` event occurs).
* This is considered a "manual" triggering of the popover.
*/
popover(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
/**
* Initializes popovers for an element collection.
*/
popover(options?: PopoverOption): this;
// tslint:disable:jsdoc-format
/**
* Call a method on the scrollspy element:
* * `refresh` When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh, see example.
* * `dispose` Destroys an element's scrollspy.
*
* @example
```javascript
$('[data-spy="scroll"]').each(function () {
var $spy = $(this).scrollspy('refresh')
})
```
*/
// tslint:enable:jsdoc-format
scrollspy(action: "refresh" | "dispose"): this;
/**
* Add scrollspy behavior to a topbar navigation.
*/
scrollspy(options?: ScrollspyOption): this;
/**
* Call a method on the list item or tab element:
* * `show` Selects the given list item or tab and shows its associated pane.
* Any other list item or tab that was previously selected becomes unselected and its associated pane is hidden.
* * `dispose` Destroys an element's tab.
*
* Returns to the caller before the tab pane has actually been shown (i.e. before the `shown.bs.tab` event occurs).
*/
tab(action: "show" | "dispose"): this;
/**
* Call a method on the toast element:
* * `show` Reveals an element's toast. You have to manually call this method, instead your toast won't show.
* * `hide` Hides an element's toast. You have to manually call this method if you made `autohide` to false.
* * `dispose` Hides an element's toast. Your toast will remain on the DOM but won't show anymore.
*
* Returns to the caller before the toast has actually been shown or hidden (i.e. before the `shown.bs.toast` or `hidden.bs.toast` event occurs).
*/
toast(action: "show" | "hide" | "dispose"): this;
/**
* Attaches a toast handler to an element collection.
*/
toast(options?: ToastOption): this;
/**
* Call a method on the tooltip element:
* * `show` Reveals an element's tooltip. Tooltips with zero-length titles are never displayed.
* * `hide` Hides an element's tooltip.
* * `toggle` Toggles an element's tooltip.
* * `dispose` Hides and destroys an element's tooltip.
* Tooltips that use delegation (which are created using `selector` option) cannot be individually destroyed on descendant trigger elements.
* * `enable` Gives an element's tooltip the ability to be shown. Tooltips are enabled by default.
* * `disable` Removes the ability for an element's tooltip to be shown. The tooltip will only be able to be shown if it is re-enabled.
* * `toggleEnabled` Toggles the ability for an element's tooltip to be shown or hidden.
* * `update` Updates the position of an element's tooltip.
*
* Returns to the caller before the tooltip has actually been shown or hidden (i.e. before the `shown.bs.tooltip` or `hidden.bs.tooltip` event occurs).
* This is considered a "manual" triggering of the tooltip.
*/
tooltip(action: "show" | "hide" | "toggle" | "dispose" | "enable" | "disable" | "toggleEnabled" | "update"): this;
/**
* Attaches a tooltip handler to an element collection.
*/
tooltip(options?: TooltipOption): this;
on(events: CarouselEvent, handler: JQuery.EventHandlerBase<TElement, CarouselEventHandler<TElement>>): this;
on(events: DropdownEvent, handler: JQuery.EventHandlerBase<TElement, DropdownsEventHandler<TElement>>): this;
on(events: ModalEvent, handler: JQuery.EventHandlerBase<TElement, ModalEventHandler<TElement>>): this;
on(events: TapEvent, handler: JQuery.EventHandlerBase<TElement, TapEventHandler<TElement>>): this;
on(
events: AlertEvent | CollapseEvent | PopoverEvent | ScrollspyEvent | ToastEvent | TooltipEvent,
handler: JQuery.EventHandler<TElement>
): this;
}
}
+1 -1
View File
@@ -550,7 +550,7 @@ export default defineComponent({
@import "../scss/break_500px.scss";
@import "../scss/variables.scss";
@import "../scss/bootswatch_custom_variables.scss";
@import "../../node_modules/bootstrap5/scss/bootstrap-utilities.scss";
@import "../../node_modules/bootstrap/scss/bootstrap-utilities.scss";
.commandPad {
background-color: $gray-900;
-3
View File
@@ -1,7 +1,4 @@
import { exportWindow } from './util/exportWindow';
import $ from 'jquery';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import download from 'downloadjs';
import { unwrap } from "./util/unwrap";
-3
View File
@@ -1,12 +1,9 @@
import { exportWindow } from './util/exportWindow';
import $ from 'jquery';
import axios from 'axios';
import { convertFormData } from './util/convertFormData';
import { InvalidResponse } from './defs';
import { unwrap_any } from './util/unwrap_any';
import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');
import 'bootstrap';
import 'select2/dist/js/select2.full.js'
-2
View File
@@ -7,8 +7,6 @@ import { TemplateEngine } from "./util/TemplateEngine";
import { escapeHtml } from "./legacy/escapeHtml";
import { nl2br } from "./util/nl2br";
import jQuery from "jquery";
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import "../scss/common_legacy.scss";
+6 -4
View File
@@ -1,5 +1,6 @@
import $ from "jquery";
import axios from "axios";
import { Tooltip } from "bootstrap";
/**
* object의 array를 id를 key로 삼는 object로 재 변환
@@ -185,15 +186,16 @@ export function initTooltip($obj?: JQuery<HTMLElement>): void {
if (!tooltipClassText) {
tooltipClassText = '';
}
const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="arrow"></div><div class="tooltip-inner"></div></div>`;
const template = `<div class="tooltip ${tooltipClassText}" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>`;
$objTooltip.tooltip({
title: function () {
const oTooltip = new Tooltip(this, {
title: function(){
return $.trim($(this).find('.tooltiptext').html());
},
template: template,
html: true
}).tooltip('show');
});
oTooltip.show();
$objTooltip.data('setObjTooltip', true);
});
-3
View File
@@ -1,7 +1,4 @@
import $ from 'jquery';
import { exportWindow } from './util/exportWindow';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');
import 'bootstrap';
import 'select2/dist/js/select2.full.js'
-3
View File
@@ -1,6 +1,4 @@
import $ from 'jquery';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import 'summernote/dist/summernote-bs4';
import 'summernote/dist/summernote-bs4.css';
@@ -8,7 +6,6 @@ import './summernote-image-flip';
import './summernote-ko-KR';
import { activateFlip } from './common_legacy';
import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
import { exportWindow } from './util/exportWindow';
declare const editable: boolean;
-3
View File
@@ -9,9 +9,6 @@ import { InvalidResponse, NationStaticItem } from './defs';
import { escapeHtml } from './legacy/escapeHtml';
import { nl2br } from './util/nl2br';
import { unwrap } from './util/unwrap';
import { exportWindow } from './util/exportWindow';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');
import 'bootstrap';
import 'select2/dist/js/select2.full.js'
import { LoadingData } from 'select2';
-2
View File
@@ -1,7 +1,5 @@
import axios from 'axios';
import $ from 'jquery';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import { isNumber } from 'lodash';
import { TemplateEngine } from '../util/TemplateEngine';
import { InvalidResponse } from '../defs';
-2
View File
@@ -1,8 +1,6 @@
import { exportWindow } from '../util/exportWindow';
import $ from 'jquery';
exportWindow($, '$');
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import axios from 'axios';
import 'bootstrap';
import { initTooltip } from '../common_legacy';
-4
View File
@@ -1,7 +1,4 @@
import $ from 'jquery';
import 'popper.js';
import Popper from 'popper.js';
(window as unknown as { Popper: unknown }).Popper = Popper;
import 'bootstrap';
import { JQValidateForm, NamedRules } from '../util/jqValidateForm';
import axios from 'axios';
@@ -11,7 +8,6 @@ import { unwrap_any } from '../util/unwrap_any';
import { sha512 } from 'js-sha512';
import { unwrap } from '../util/unwrap';
import { InvalidResponse } from '../defs';
import internal from 'stream';
import { delay } from '../util/delay';
type LoginResponse = {
-3
View File
@@ -1,7 +1,5 @@
import { setAxiosXMLHttpRequest } from "../util/setAxiosXMLHttpRequest";
import $ from 'jquery';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import axios from 'axios';
import { subDays } from 'date-fns';
@@ -12,7 +10,6 @@ import { InvalidResponse } from "../defs";
import { unwrap } from "../util/unwrap";
import { parseTime } from "../util/parseTime";
import { formatTime } from "../util/formatTime";
import { exportWindow } from "../util/exportWindow";
type ResultUserInfo = {
result: true,
-3
View File
@@ -1,10 +1,7 @@
import $ from 'jquery';
import { stringifyUrl } from 'query-string';
import { initTooltip } from './common_legacy';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');
import 'bootstrap';
import { exportWindow } from './util/exportWindow';
$(function ($) {
$('#by_scenario').on('change', function (e) {
-2
View File
@@ -1,6 +1,4 @@
import $ from "jquery";
import Popper from 'popper.js';
(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import { setAxiosXMLHttpRequest } from "./util/setAxiosXMLHttpRequest";
import axios from "axios";
-2
View File
@@ -1,6 +1,4 @@
import $ from 'jquery';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import { activateFlip, initTooltip } from './common_legacy';
import './msg.ts';
-2
View File
@@ -2,8 +2,6 @@ import $ from 'jquery';
exportWindow($, '$');
import { exportWindow } from './util/exportWindow';
import axios from 'axios';
import Popper from 'popper.js';
exportWindow(Popper, 'Popper');
import 'bootstrap';
import 'select2/dist/js/select2.full.js'
import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
-2
View File
@@ -1,6 +1,4 @@
import $ from 'jquery';
import Popper from 'popper.js';
(window as unknown as {Popper:unknown}).Popper = Popper;//XXX: 왜 popper를 이렇게 불러야 하는가?
import 'bootstrap';
import { reloadWorldMap } from './map';
+10 -6
View File
@@ -8,7 +8,8 @@ import { convertFormData } from './util/convertFormData';
import { unwrap_any } from './util/unwrap_any';
import { unwrap } from './util/unwrap';
import { TemplateEngine } from './util/TemplateEngine';
import { Tooltip } from 'bootstrap';
import { trim } from 'lodash';
type CardItem = {
uniqueName: string,
@@ -233,11 +234,14 @@ function printGenerals(value: GeneralPoolResponse) {
$('.card_holder').append($card);
$card.find('.select_btn').on('click', pickGeneral);
$card.find('.obj_tooltip').tooltip({
title: function () {
return $.trim($(this).find('.tooltiptext').html());
},
html: true
$card.find('.obj_tooltip').each(function(){
new Tooltip(this, {
title: function () {
return trim(this.querySelector('.tooltiptext')?.innerHTML);
},
html: true
})
});
}
+16 -10
View File
@@ -6,6 +6,8 @@ import { GeneralListResponse, InvalidResponse } from './defs';
import { convertFormData } from './util/convertFormData';
import { unwrap_any } from './util/unwrap_any';
import { setAxiosXMLHttpRequest } from './util/setAxiosXMLHttpRequest';
import { Tooltip } from 'bootstrap';
import { trim } from 'lodash';
setAxiosXMLHttpRequest();
@@ -250,11 +252,13 @@ function printGenerals(value: NPCToken) {
$('.card_holder').append($card);
$card.find('.select_btn').on('click', pickGeneral);
$card.find('.obj_tooltip').tooltip({
title: function () {
return $.trim($(this).find('.tooltiptext').html());
},
html: true
$card.find('.obj_tooltip').each(function(){
new Tooltip(this, {
title: function () {
return trim(this.querySelector('.tooltiptext')?.innerHTML);
},
html: true
});
});
});
@@ -388,11 +392,13 @@ function _printGeneralList(clear?:boolean) {
$('#row_print_more').hide();
}
$generalTable.find('.obj_tooltip').tooltip({
title: function () {
return $.trim($(this).find('.tooltiptext').html());
},
html: true
$generalTable.find('.obj_tooltip').each(function(){
new Tooltip(this, {
title: function () {
return trim(this.querySelector('.tooltiptext')?.innerHTML);
},
html: true
})
});
$('#tb_general_list').show();
}
+19 -20
View File
@@ -24,11 +24,10 @@
"@types/select2": "^4.0.54",
"@types/summernote": "^0.8.6",
"async-validator": "^4.0.3",
"axios": "^0.21.4",
"bootstrap": "^4.6.0",
"bootstrap5": "npm:bootstrap@^5.1.3",
"core-js": "^3.17.3",
"date-fns": "^2.24.0",
"axios": "^0.24.0",
"bootstrap": "^5.1.3",
"core-js": "^3.19.3",
"date-fns": "^2.27.0",
"downloadjs": "^1.4.7",
"jquery": "^3.6.0",
"js-sha512": "^0.8.0",
@@ -36,20 +35,20 @@
"lodash": "^4.17.21",
"query-string": "^7.0.1",
"select2": "^4.0",
"summernote": "^0.8.18",
"summernote": "^0.8.20",
"vue": "^3.2.2",
"vue-multiselect": "^3.0.0-alpha.2",
"vue-types": "^4.1.0",
"vue-types": "^4.1.1",
"vuedraggable": "^4.1.0"
},
"devDependencies": {
"@babel/cli": "^7.15.4",
"@babel/core": "^7.15.5",
"@babel/preset-env": "^7.15.6",
"@babel/preset-typescript": "^7.15.0",
"@coreui/vue": "^4.0.0-beta.2",
"@types/bootstrap": "^5.1.4",
"@types/jquery": "^3.5.6",
"@babel/cli": "^7.16.0",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-typescript": "^7.16.0",
"@coreui/vue": "^4.1.1",
"@types/bootstrap": "^5.1.6",
"@types/jquery": "^3.5.10",
"@types/lodash": "^4.14.173",
"@types/node": "^16.9.2",
"@typescript-eslint/eslint-plugin": "^4.31.1",
@@ -58,7 +57,7 @@
"@vue/eslint-config-typescript": "^7.0.0",
"babel-plugin-lodash": "^3.3.4",
"babel-preset-modern-browsers": "^15.0.2",
"bootstrap-vue-3": "^0.0.5",
"bootstrap-vue-3": "^0.1.0",
"bootswatch": "^5.1.3",
"clean-terminal-webpack-plugin": "^3.0.0",
"css-loader": "^6.2.0",
@@ -67,12 +66,12 @@
"file-loader": "^6.2.0",
"mini-css-extract-plugin": "^2.3.0",
"pre-commit": "^1.2.2",
"sass": "^1.41.1",
"sass-loader": "^12.1.0",
"style-loader": "^3.2.1",
"typescript": "^4.4.3",
"sass": "^1.44.0",
"sass-loader": "^12.4.0",
"style-loader": "^3.3.1",
"typescript": "^4.5.2",
"url-loader": "^4.1.1",
"vue-eslint-parser": "^7.11.0",
"vue-eslint-parser": "^8.0.1",
"vue-loader": "^16.5.0",
"vue-style-loader": "^4.1.3",
"webpack": "^5.53.0",