How to use the @pluginjs/dom.insertAfter 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 / strength / src / main.js View on Github external
this.$toggle = query(`.${this.classes.CHECK}`)
      }

      this.$toggle = children(this.$addon)[0]

      addClass(this.classes.TOGGLE, this.$toggle)
      insertAfter(this.$addon, this.element)
    } else if (this.options.toggle) {
      addClass(`${this.classes.HASICON}`, this.$wrap)
      this.$icon = parseHTML(
        template.render(this.options.templates.icon(), {
          classes: this.classes
        })
      )

      insertAfter(this.$icon, this.element)
    }
  }
github pluginjs / pluginjs / modules / breadcrumb / src / main.js View on Github external
return
    }

    this.$ellipsis = addClass(
      this.classes.HIDDEN,
      parseHTML(
        templateEngine.render(this.options.templates.ellipsis.call(this), {
          classes: this.classes,
          lable: this.options.ellipsisText
        })
      )
    )
    if (this.options.overflow === 'right') {
      insertBefore(this.$ellipsis, this.$dropdown)
    } else {
      insertAfter(this.$ellipsis, this.$dropdown)
    }
  }
github pluginjs / pluginjs / modules / strength / src / main.js View on Github external
generateToggle() {
    if (isElement(this.options.toggle)) {
      this.$addon = this.options.toggle
      addClass(this.classes.ADDON, this.$addon)

      if (query(`.${this.classes.CHECK}`)) {
        this.$toggle = query(`.${this.classes.CHECK}`)
      }

      this.$toggle = children(this.$addon)[0]

      addClass(this.classes.TOGGLE, this.$toggle)
      insertAfter(this.$addon, this.element)
    } else if (this.options.toggle) {
      addClass(`${this.classes.HASICON}`, this.$wrap)
      this.$icon = parseHTML(
        template.render(this.options.templates.icon(), {
          classes: this.classes
        })
      )

      insertAfter(this.$icon, this.element)
    }
  }
github pluginjs / pluginjs / modules / cascader / src / main.js View on Github external
this.$selected = false
      this.selected = []
    }

    this.placeholder = this.element.getAttribute('placeholder')
    if (!this.placeholder && this.options.placeholder) {
      if (this.options.placeholder === true) {
        this.placeholder = this.translate('placeholderText')
      } else {
        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,
github pluginjs / pluginjs / modules / nav-to-select / src / main.js View on Github external
build(items) {
    this.wrap = parseHTML(`<div class="${this.classes.WRAP}">`)
    this.select = parseHTML(
      `<select class="${this.classes.SELECT}">`
    )
    this.select.innerHTML = this.buildOptions(items, 1)

    wrap(this.wrap, this.select)

    if (this.options.prependTo === null) {
      insertAfter(this.wrap, this.element)
    } else {
      const prependTo =
        typeof this.options.prependTo === 'string'
          ? this.options.prependTo
          : query(this.options.prependTo)

      insertBefore(this.wrap, prependTo)
    }
    this.enter('builded')
  }
</select></div>
github pluginjs / pluginjs / modules / list / src / main.js View on Github external
sort(oldIndex, newIndex = -1, dom = true) {
    if (oldIndex !== newIndex) {
      const item = this.data[oldIndex]

      if (newIndex &lt;= -1) {
        newIndex = this.data.length - 1
      }

      if (dom) {
        const $item = this.getItem(oldIndex)
        const $new = this.getItem(newIndex)

        if (oldIndex &gt; newIndex) {
          insertBefore($item, $new)
        } else {
          insertAfter($item, $new)
        }
      }

      if (oldIndex &gt; newIndex) {
        this.data.splice(newIndex, 0, item)
        this.data.splice(oldIndex + 1, 1)
      } else {
        this.data.splice(newIndex + 1, 0, item)
        this.data.splice(oldIndex, 1)
      }

      this.trigger(EVENTS.SORT, oldIndex, newIndex, item)
    }
  }
github pluginjs / pluginjs / modules / bg-picker / src / main.js View on Github external
createHtml() {
    this.$wrap = parseHTML(
      template.compile(this.options.template())({
        classes: this.classes,
        placeholder: this.translate('placeholder'),
        cancel: this.translate('cancel'),
        save: this.translate('save')
      })
    )
    insertAfter(this.$wrap, this.element)

    this.TRIGGER = new Trigger(this)

    this.$dropdown = query(`.${this.classes.DROPDOWN}`, this.$wrap)
    this.$control = query(`.${this.classes.CONTROL}`, this.$dropdown)
    this.$cancel = query(`.${this.classes.CANCEL}`, this.$control)
    this.$save = query(`.${this.classes.SAVE}`, this.$control)
  }
github pluginjs / pluginjs / modules / image-selector / src / main.js View on Github external
setupDropdown(options) {
    if (!this.options.inline) {
      this.$dropdown = appendTo(
        `<div class="${this.classes.DROPDOWN}"></div>`,
        this.$wrap
      )
      this.$content = appendTo(
        templateEngine.render(this.options.templates.content(), {
          classes: this.classes
        }),
        this.$dropdown
      )
    } else {
      this.$content = insertAfter(
        templateEngine.render(this.options.templates.inline(), {
          classes: this.classes
        }),
        this.element
      )
    }

    if (this.options.inline) {
      this.buildDropdown()
    }

    if (!this.options.inline) {
      this.DROPDOWN = Dropdown.of(this.$trigger, {
        ...options,
        target: this.$dropdown,
        keyboard: this.options.keyboard,
github pluginjs / pluginjs / modules / font-editor / src / main.js View on Github external
createHtml() {
    this.$wrap = parseHTML(
      template.compile(this.options.template())({
        classes: this.classes,
        addTypography: this.translate('addTypography'),
        fontFamily: this.translate('fontFamily')
      })
    )

    insertAfter(this.$wrap, this.element)

    this.$Panel = query(`.${this.classes.DROPDOWN}`, this.$wrap)
    this.$Control = query(`.${this.classes.CONTROL}`, this.$Panel)
    this.$Cancel = query(`.${this.classes.CANCEL}`, this.$Panel)
    this.$Save = query(`.${this.classes.SAVE}`, this.$Panel)
  }