Skip to content

Commit

Permalink
Make a template factory helper to handle all template cases
Browse files Browse the repository at this point in the history
  • Loading branch information
XhmikosR committed Oct 11, 2021
1 parent 5b124f6 commit d3d5e71
Show file tree
Hide file tree
Showing 7 changed files with 558 additions and 118 deletions.
12 changes: 7 additions & 5 deletions js/src/popover.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,15 @@ class Popover extends Tooltip {
return this.getTitle() || this._getContent()
}

setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TITLE)
this._sanitizeAndSetContent(tip, this._getContent(), SELECTOR_CONTENT)
}

// Private

_getContentForTemplate() {
return {
[SELECTOR_TITLE]: this.getTitle(),
[SELECTOR_CONTENT]: this._getContent()
}
}

_getContent() {
return this._resolvePossibleFunction(this._config.content)
}
Expand Down
115 changes: 39 additions & 76 deletions js/src/tooltip.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,17 +12,16 @@ import {
findShadowRoot,
getElement,
getUID,
isElement,
isRTL,
noop,
typeCheckConfig
} from './util/index'
import { DefaultAllowlist, sanitizeHtml } from './util/sanitizer'
import { DefaultAllowlist } from './util/sanitizer'
import Data from './dom/data'
import EventHandler from './dom/event-handler'
import Manipulator from './dom/manipulator'
import SelectorEngine from './dom/selector-engine'
import BaseComponent from './base-component'
import TemplateFactory from './util/template-factory'

/**
* ------------------------------------------------------------------------
Expand Down Expand Up @@ -108,6 +107,7 @@ const HOVER_STATE_SHOW = 'show'
const HOVER_STATE_OUT = 'out'

const SELECTOR_TOOLTIP_INNER = '.tooltip-inner'
const SELECTOR_TOOLTIP_ARROW = '.tooltip-arrow'
const SELECTOR_MODAL = `.${CLASS_NAME_MODAL}`

const EVENT_MODAL_HIDE = 'hide.bs.modal'
Expand Down Expand Up @@ -137,6 +137,7 @@ class Tooltip extends BaseComponent {
this._hoverState = ''
this._activeTrigger = {}
this._popper = null
this._templateFactory = null

// Protected
this._config = this._getConfig(config)
Expand Down Expand Up @@ -234,14 +235,6 @@ class Tooltip extends BaseComponent {
return
}

// A trick to recreate a tooltip in case a new title is given by using the NOT documented `data-bs-original-title`
// This will be removed later in favor of a `setContent` method
if (this.constructor.NAME === 'tooltip' && this.tip && this.getTitle() !== this.tip.querySelector(SELECTOR_TOOLTIP_INNER).innerHTML) {
this._disposePopper()
this.tip.remove()
this.tip = null
}

const tip = this.getTipElement()
const tipId = getUID(this.constructor.NAME)

Expand Down Expand Up @@ -275,11 +268,6 @@ class Tooltip extends BaseComponent {

tip.classList.add(CLASS_NAME_SHOW)

const customClass = this._resolvePossibleFunction(this._config.customClass)
if (customClass) {
tip.classList.add(...customClass.split(' '))
}

// If this is a touch-enabled device we add extra
// empty mouseover listeners to the body's immediate children;
// only needed because of broken event delegation on iOS
Expand Down Expand Up @@ -368,69 +356,55 @@ class Tooltip extends BaseComponent {
return this.tip
}

const element = document.createElement('div')
element.innerHTML = this._config.template
const templateFactory = this._getTemplateFactory(this._getContentForTemplate())

const tip = element.children[0]
this.setContent(tip)
const tip = templateFactory.toHtml()
tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW)

this.tip = tip
return this.tip
}

setContent(tip) {
this._sanitizeAndSetContent(tip, this.getTitle(), SELECTOR_TOOLTIP_INNER)
}

_sanitizeAndSetContent(template, content, selector) {
const templateElement = SelectorEngine.findOne(selector, template)

if (!content && templateElement) {
templateElement.remove()
return
setContent(content) {
let isShown = false
if (this.tip) {
isShown = this.tip.classList.contains(CLASS_NAME_SHOW)
this.tip.remove()
}

// we use append for html objects to maintain js events
this.setElementContent(templateElement, content)
}

setElementContent(element, content) {
if (element === null) {
return
}
this._disposePopper()

if (isElement(content)) {
content = getElement(content)
this.tip = this._getTemplateFactory(content).toHtml()

// content is a DOM node or a jQuery
if (this._config.html) {
if (content.parentNode !== element) {
element.innerHTML = ''
element.append(content)
}
} else {
element.textContent = content.textContent
}
if (isShown) {
this.show()
}
}

return
_getTemplateFactory(content) {
if (this._templateFactory) {
this._templateFactory.changeContent(content)
} else {
this._templateFactory = new TemplateFactory({
...this._config,
// the `content` var has to be after `this._config`
// to override config.content in case of popover
content,
extraClass: this._resolvePossibleFunction(this._config.customClass)
})
}

if (this._config.html) {
if (this._config.sanitize) {
content = sanitizeHtml(content, this._config.allowList, this._config.sanitizeFn)
}
return this._templateFactory
}

element.innerHTML = content // lgtm [js/xss-through-dom]
} else {
element.textContent = content
_getContentForTemplate() {
return {
[SELECTOR_TOOLTIP_INNER]: this.getTitle()
}
}

getTitle() {
const title = this._element.getAttribute('data-bs-original-title') || this._config.title

return this._resolvePossibleFunction(title)
return this._resolvePossibleFunction(this._config.title) || this._element.getAttribute('title')
}

updateAttachment(attachment) {
Expand Down Expand Up @@ -465,8 +439,8 @@ class Tooltip extends BaseComponent {
return offset
}

_resolvePossibleFunction(content) {
return typeof content === 'function' ? content.call(this._element) : content
_resolvePossibleFunction(arg) {
return typeof arg === 'function' ? arg.call(this._element) : arg
}

_getPopperConfig(attachment) {
Expand Down Expand Up @@ -494,7 +468,7 @@ class Tooltip extends BaseComponent {
{
name: 'arrow',
options: {
element: `.${this.constructor.NAME}-arrow`
element: SELECTOR_TOOLTIP_ARROW
}
},
{
Expand Down Expand Up @@ -565,15 +539,9 @@ class Tooltip extends BaseComponent {

_fixTitle() {
const title = this._element.getAttribute('title')
const originalTitleType = typeof this._element.getAttribute('data-bs-original-title')

if (title || originalTitleType !== 'string') {
this._element.setAttribute('data-bs-original-title', title || '')
if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
this._element.setAttribute('aria-label', title)
}

this._element.setAttribute('title', '')
if (title && !this._element.getAttribute('aria-label') && !this._element.textContent) {
this._element.setAttribute('aria-label', title)
}
}

Expand Down Expand Up @@ -679,11 +647,6 @@ class Tooltip extends BaseComponent {
}

typeCheckConfig(NAME, config, this.constructor.DefaultType)

if (config.sanitize) {
config.template = sanitizeHtml(config.template, config.allowList, config.sanitizeFn)
}

return config
}

Expand Down
156 changes: 156 additions & 0 deletions js/src/util/template-factory.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,156 @@
/**
* --------------------------------------------------------------------------
* Bootstrap (v5.1.3): util/template-factory.js
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
* --------------------------------------------------------------------------
*/

import { DefaultAllowlist, sanitizeHtml } from './sanitizer'
import { getElement, isElement, typeCheckConfig } from '../util/index'
import SelectorEngine from '../dom/selector-engine'

const NAME = 'TemplateFactory'

const Default = {
extraClass: '',
template: '<div></div>',
content: {}, // { selector : text , selector2 : text2 , }
html: false,
sanitize: true,
sanitizeFn: null,
allowList: DefaultAllowlist
}

const DefaultType = {
extraClass: '(string|function)',
template: 'string',
content: 'object',
html: 'boolean',
sanitize: 'boolean',
sanitizeFn: '(null|function)',
allowList: 'object'
}
const DefaultContentType = {
selector: '(string|element)',
entry: '(string|element|function|null)'
}

class TemplateFactory {
constructor(config) {
this._config = this._getConfig(config)
}

// Getters

static get NAME() {
return NAME
}

static get Default() {
return Default
}

// Public

getContent() {
return Object.values(this._config.content).map(this._resolvePossibleFunction).filter(Boolean)
}

hasContent() {
return this.getContent().length > 0
}

changeContent(content) {
this._checkContent(content)
this._config.content = { ...this._config.content, ...content }
return this
}

toHtml() {
const templateWrapper = document.createElement('div')
templateWrapper.innerHTML = this._maybeSanitize(this._config.template)

for (const [selector, text] of Object.entries(this._config.content)) {
this._setContent(templateWrapper, text, selector)
}

const template = templateWrapper.children[0]
const extraClass = this._resolvePossibleFunction(this._config.extraClass)
if (extraClass) {
template.classList.add(...extraClass.split(' '))
}

return template
}

// Private
_getConfig(config) {
config = {
...Default,
...(typeof config === 'object' ? config : {})
}

typeCheckConfig(NAME, config, DefaultType)

this._checkContent(config.content)

return config
}

_checkContent(arg) {
for (const [selector, content] of Object.entries(arg)) {
typeCheckConfig(NAME, { selector, entry: content }, DefaultContentType)
}
}

_setContent(template, content, selector) {
const templateElement = SelectorEngine.findOne(selector, template)

if (templateElement === null) {
return
}

content = this._resolvePossibleFunction(content)

if (!content) {
templateElement.remove()
return
}

if (isElement(content)) {
this._putElementInTemplate(getElement(content), templateElement)
return
}

if (this._config.html) {
templateElement.innerHTML = this._maybeSanitize(content)
return
}

templateElement.textContent = content
}

_maybeSanitize(arg) {
return this._config.sanitize ? sanitizeHtml(arg, this._config.allowList, this._config.sanitizeFn) : arg
}

_resolvePossibleFunction(arg) {
return typeof arg === 'function' ? arg(this) : arg
}

_putElementInTemplate(element, templateElement) {
if (!this._config.html) {
templateElement.textContent = element.textContent
return
}

if (templateElement.outerHTML === element.outerHTML) { // is the same
return
}

templateElement.innerHTML = ''
templateElement.append(element)
}
}

export default TemplateFactory
Loading

0 comments on commit d3d5e71

Please sign in to comment.