How to use the @pluginjs/dom.wrap 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 / color-picker / src / main2.js View on Github external
initFrame() {
    // create wrap
    const $wrap = this.createEl('wrap', { class: this.classes.WRAP })
    wrap($wrap, this.element)
    wrap(`<div class="${this.classes.TRIGGER}"></div>`, this.element)
    this.$wrap = parentWith(hasClass(this.classes.WRAP), this.element)

    // init remove button
    this.initRemove()
    // init preview
    this.initPreview()

    // create panel
    this.initPanel()

    // create mask
    this.$mask = parseHTML(`<div class="${this.classes.MASK}"></div>`)
    append(this.$mask, this.$body)
  }
github pluginjs / pluginjs / modules / masonry / src / components / item.js View on Github external
init() {
    addClass(this.instance.classes.CHUNK, this.element)

    this.index = this.options.index
    this.width = parseFloat(getStyle('width', this.element), 10)

    this.img = query('img', this.element)

    if (this.img) {
      const width = this.img.getAttribute('width')
      const height = this.img.getAttribute('height')

      const ratio = Math.round((height / width) * 100)

      const wrapper = wrap(
        `<div class="${this.instance.classes.IMGWRAPPER}"></div>`,
        this.img
      )

      setStyle({ paddingTop: `${ratio}%` }, wrapper)

      this.initLoader(wrapper, this.img)
    }

    this.info = {
      x: this.getPosition().x,
      y: this.getPosition().y,
      width: this.width
    }

    this.movePosition = {
github pluginjs / pluginjs / modules / toggle / src / main.js View on Github external
initialize() {
    this.initContent()
    this.$wrap = wrap(`<div class="${this.classes.WRAP}"></div>`, this.element)
    if (this.options.theme) {
      addClass(this.getThemeClass(), this.$wrap)
    }

    this.$inner = parseHTML(`<div class="${this.classes.INNER}"></div>`)
    this.$on = parseHTML(`<div class="${this.classes.ON}">${this.onText}</div>`)
    this.$off = parseHTML(
      `<div class="${this.classes.OFF}">${this.offText}</div>`
    )
    this.$handle = parseHTML(`<div class="${this.classes.HANDLE}"></div>`)

    this.$inner.append(this.$on, this.$handle, this.$off)

    this.$wrap.append(this.$inner)

    this.initIcon()
github pluginjs / pluginjs / modules / time-picker / src / main.js View on Github external
initialize() {
    this.$group = wrap(
      `<div class="${this.classes.INPUTWRAP}"></div>`,
      this.element
    )

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

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

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

    if (this.options.theme) {
github pluginjs / pluginjs / modules / list / src / main.js View on Github external
build() {
    addClass(this.classes.ELEMENT, this.element)

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

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

    this.$list = appendTo(
      template.compile(this.options.templates.container())({
        classes: this.classes
      }),
      this.$wrapper
    )

    this.buildItems()
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
initialize() {
    if (this.element.tagName !== 'IMG' || this.element.tagName !== 'PICTURE') {
      this.$wrap = this.element
      addClass(this.classes.WRAP, this.$wrap)
      this.$image = query('img, picture', this.$wrap)
    } else {
      this.$image = this.element
      this.$wrap = wrap(`<div class="${this.classes.WRAP}"></div>`, this.$image)
    }

    this.loaded = false
    this.large = this.options.image
    this.zoom = this.options.zoom
    this.width = innerWidth(this.$wrap)
    this.height = innerHeight(this.$wrap)
    this.ratio = this.width / this.height
    this.mode = this.options.mode
    this.limit =
      this.mode === 'inside' &amp;&amp; this.options.lens ? false : this.options.limit

    addClass(this.classes.IMAGE, this.$image)

    addClass(this.getClass(this.classes.MODE, 'mode', this.mode), this.$wrap)
    addClass(
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 / auto-complete / src / main.js View on Github external
)

    if (this.options.placeholder) {
      this.element.placeholder = this.options.placeholder
    }

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

    this.$trigger = wrap(
      templateEngine.render(this.options.templates.trigger.call(this), {
        classes: this.classes
      }),
      this.element
    )

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

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

    if (this.element.value !== '') {
      this.set(this.element.value, false)
    }

    this.initData()

    this.bind()

    this.setupDropdown()

    if (this.options.clearable) {
github pluginjs / pluginjs / modules / video-picker / src / main.js View on Github external
build() {
    addClass(this.classes.INPUT, this.element)
    this.$wrap = wrap(
      `<div class="${this.classes.NAMESPACE} ${this.classes.WRAP}"></div>`,
      this.element
    )

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

    this.TRIGGER = new Trigger(this)

    this.$dropdown = parseHTML(
      template.compile(this.options.templates.dropdown())({
        classes: this.classes
      })
    )
    this.$action = parseHTML(
github pluginjs / pluginjs / modules / auto-complete / src / main.js View on Github external
attr(
      {
        autocomplete: 'off',
        spellcheck: 'false'
      },
      this.element
    )

    if (this.options.placeholder) {
      this.element.placeholder = this.options.placeholder
    }

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

    this.$trigger = wrap(
      templateEngine.render(this.options.templates.trigger.call(this), {
        classes: this.classes
      }),
      this.element
    )

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

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

    if (this.element.value !== '') {
      this.set(this.element.value, false)
    }