How to use the @pluginjs/dom.appendTo function in @pluginjs/dom

To help you get started, we’ve selected a few @pluginjs/dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github pluginjs / pluginjs / modules / arrows / src / main.js View on Github external
buildPrev(prev) {
    const template = templateEngine.compile(
      this.options.templates.prev.call(this)
    )
    this.$prev = appendTo(
      parseHTML(template({ classes: this.classes, ...prev })),
      this.element
    )
  }
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
prepareTargetImage() {
    if (!this.$target) {
      this.$target = appendTo(
        `<div class="${this.classes.TARGET}"></div>`,
        this.$wrap
      )
    }

    if (!this.$targetImage) {
      let $image
      if (isElement(this.large)) {
        $image = this.large
      } else {
        $image = new Image()
        if (isString(this.large)) {
          $image.src = this.large
        } else if (isPlainObject(this.large)) {
          Object.assign($image, this.large)
        }
github pluginjs / pluginjs / modules / icon-picker / src / main.js View on Github external
setupDropdown(options) {
    this.$dropdown = appendTo(
      templateEngine.render(this.options.templates.dropdown.call(this), {
        classes: this.classes
      }),
      this.$wrap
    )

    this.$main = query(`.${this.classes.MAIN}`, this.$dropdown)

    this.DROPDOWN = Dropdown.of(this.$trigger, {
      ...options,
      target: this.$dropdown,
      keyboard: this.options.keyboard ? this.$wrap : false,
      classes: {
        PLACEMENT: `${this.classes.NAMESPACE}-on-{placement}`
      },
      onShow: () => {
github pluginjs / pluginjs / modules / spinner / src / main.js View on Github external
initialize() {
    this.$wrap = wrap(
      `<div class="${this.classes.WRAP}" tabindex="0"></div>`,
      this.element
    )

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }
    addClass(
      this.getClass(this.classes.LAYOUT, 'layout', this.options.layout),
      this.$wrap
    )

    this.$control = appendTo(
      template.compile(this.options.templates.control.call(this))({
        classes: this.classes
      }),
      this.$wrap
    )

    this.$down = query(`.${this.classes.DOWN}`, this.$control)
    this.$up = query(`.${this.classes.UP}`, this.$control)

    this.set(this.element.value, false)

    this.bind()

    if (this.element.disabled || this.options.disabled) {
      this.disable()
    }
github pluginjs / pluginjs / modules / offset / src / main.js View on Github external
reverse: 'RIGHT'
    })
    const bottom = this.createEl('size', {
      classes: this.classes,
      field: this.classes.BOTTOM,
      reverse: 'BOTTOM'
    })
    const left = this.createEl('size', {
      classes: this.classes,
      field: this.classes.LEFT,
      reverse: 'LEFT'
    })

    appendTo(top, this.$allsize)
    appendTo(right, this.$allsize)
    appendTo(bottom, this.$allsize)
    appendTo(left, this.$allsize)
    insertAfter(this.$wrap, this.element)
    appendTo(this.$allsize, this.$wrap)

    this.$top = query(`.${this.classes.TOP}`, this.$wrap)
    this.$right = query(`.${this.classes.RIGHT}`, this.$wrap)
    this.$bottom = query(`.${this.classes.BOTTOM}`, this.$wrap)
    this.$left = query(`.${this.classes.LEFT}`, this.$wrap)
  }
github pluginjs / pluginjs / modules / font-picker / src / main.js View on Github external
this.$wrap = insertAfter(
      `<div class="${this.classes.WRAP}"></div>`,
      this.element
    )

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    this.$trigger = appendTo(
      `<div class="${this.classes.TRIGGER}"></div>`,
      this.$wrap
    )

    this.$label = appendTo(
      templateEngine.render(this.options.templates.label(), {
        classes: this.classes,
        placeholder: this.placeholder
      }),
      this.$trigger
    )

    this.bind()

    this.setupDropdown(this.options.dropdown)

    this.initData()

    if (this.options.clearable) {
      this.CLEARABLE = new Clearable(this)
    }
github pluginjs / pluginjs / modules / offset / src / main.js View on Github external
field: this.classes.RIGHT,
      reverse: 'RIGHT'
    })
    const bottom = this.createEl('size', {
      classes: this.classes,
      field: this.classes.BOTTOM,
      reverse: 'BOTTOM'
    })
    const left = this.createEl('size', {
      classes: this.classes,
      field: this.classes.LEFT,
      reverse: 'LEFT'
    })

    appendTo(top, this.$allsize)
    appendTo(right, this.$allsize)
    appendTo(bottom, this.$allsize)
    appendTo(left, this.$allsize)
    insertAfter(this.$wrap, this.element)
    appendTo(this.$allsize, this.$wrap)

    this.$top = query(`.${this.classes.TOP}`, this.$wrap)
    this.$right = query(`.${this.classes.RIGHT}`, this.$wrap)
    this.$bottom = query(`.${this.classes.BOTTOM}`, this.$wrap)
    this.$left = query(`.${this.classes.LEFT}`, this.$wrap)
  }
github pluginjs / pluginjs / modules / select / src / main.js View on Github external
this.placeholder = this.options.placeholder
      }
    }

    addClass(this.classes.ELEMENT, this.element)

    this.$wrap = insertAfter(
      `<div class="${this.classes.WRAP}"></div>`,
      this.element
    )

    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    this.$trigger = appendTo(
      `<div class="${this.classes.TRIGGER}"></div>`,
      this.$wrap
    )

    this.$label = appendTo(
      templateEngine.render(this.options.templates.label(), {
        classes: this.classes,
        placeholder: this.placeholder
      }),
      this.$trigger
    )

    if (this.options.filterable) {
      this.FILTERABLE = new Filterable(this)
    }
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
prepareLens() {
    if (!this.$lens) {
      if (this.options.lensOverlay) {
        const $overlay = appendTo(
          `<div class="${this.classes.OVERLAY}"></div>`,
          this.$wrap
        )
        if (isString(this.options.lensOverlay)) {
          setStyle('background', this.options.lensOverlay, $overlay)
        }
      }
      if (this.mode === 'outside') {
        this.$lens = appendTo(
          `<div class="${this.classes.LENS}"></div>`,
          this.$wrap
        )
      } else {
        this.$lens = this.$target
        addClass(this.classes.LENS, this.$lens)
      }