How to use the @pluginjs/dom.find 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 / grids / src / components / item.js View on Github external
init() {
    addClass(this.instance.classes.CHUNK, this.element)

    const $children = children(this.element)

    append(
      `<div class="${this.instance.classes.CHUNKINNER}"></div>`,
      this.element
    )
    this.chunkInner = find(`.${this.instance.classes.CHUNKINNER}`, this.element)

    $children.forEach(child =&gt; {
      append(child, this.chunkInner)
    })

    this.index = this.options.index

    // aspectRatio =&gt; [width, height]
    const aspectRatio = this.compileAspectRatio(this.options.aspectRatio)

    // element Attribute First
    // this.width = aspectRatio[0] || this.element.offsetWidth || 1
    // this.height = aspectRatio[1] || this.element.offsetHeight || 1

    this.width =
      aspectRatio[0] || parseFloat(getStyle('width', this.element), 10) || 1
github pluginjs / pluginjs / modules / masonry / src / components / toolbar.js View on Github external
init(update = false) {
    if (update) {
      find(`.${this.classes.TOOLBAR}`, this.instance.element).remove()
    }

    if (this.options.filters) {
      this.filters = templateEngine.render(
        this.instance.options.templates.filters.call(this),
        {
          classes: this.classes
        }
      )
    }

    if (this.options.sort) {
      this.sort = templateEngine.render(
        this.instance.options.templates.sort.call(this),
        {
          classes: this.classes
github pluginjs / pluginjs / modules / wizard / src / main.js View on Github external
getButtons() {
    const className = this.classes.BUTTONS.CONTAINER
    const $buttons = find(`.${className}`, this.element)

    const id = `#${this.id}`

    queryAll('a', $buttons).forEach(a => {
      attr({ href: id }, a)
    })

    return $buttons
  }
github pluginjs / pluginjs / modules / before-after / src / main.js View on Github external
addClass(
      this.getClass(
        this.classes.DIRECTION,
        'direction',
        this.options.direction
      ),
      this.element
    )

    this.$before = compose(
      addClass(this.classes.BEFORE),
      find('img:first-child')
    )(this.element)
    this.$after = compose(
      addClass(this.classes.AFTER),
      find('img:last-child')
    )(this.element)

    this.createHandle()
    if (this.options.labels) {
      this.createLabels()
    }

    this.bind()
    this.adjust(this.position)
    this.animateTo(this.options.initial, false)

    this.enter('initialized')
    this.trigger(EVENTS.READY)
  }
github pluginjs / pluginjs / modules / color-selector / src / modules / gradient.js View on Github external
find(`.${this.classes.MARKER}`)
    )(this.$actionBar)

    removeClass(
      this.classes.MARKERACTIVE,
      query(`.${this.classes.MARKERACTIVE}`, this.$actionBar)
    )
    addClass(this.classes.MARKERACTIVE, marker)

    this.instance.$marker = marker

    compose(
      this.markers.length > 2
        ? addClass(this.classes.GRADIENTREMOVEACTIVE)
        : removeClass(this.classes.GRADIENTREMOVEACTIVE),
      find(`.${this.classes.GRADIENTREMOVE}`)
    )(this.element)

    if (this.instance.is('gradientModule')) {
      this.setGradientColor(
        getData('value', marker).color,
        getData('value', marker).index
      )
    }

    this.instance.leave('noSelectedMarker')
    this.instance.enter('SelectedMarker')
    this.update()
  }
github pluginjs / pluginjs / modules / wizard / samples / src / sections / setValidator / index.js View on Github external
wizard.get('#form2').setValidator(e => {
  if (find('[name="b"]', e.pane).value === 'b') {
    return true
  }
})
wizard.get('#form3').setValidator(e => {
github pluginjs / pluginjs / modules / grids / src / components / toolbar.js View on Github external
responsive: true,
      onChange(tag) {
        that.api.filter(tag !== 'all' ? [tag] : [])
      }
    }

    tags.forEach(tag => {
      items.push({
        text: tag,
        id: tag
      })
    })

    config.items = items

    this.$filters = find(`.${this.classes.FILTERS}`, this.api.element)
    Filters.of(this.$filters, config)
  }
github pluginjs / pluginjs / modules / wizard / samples / src / sections / loader / index.js View on Github external
.setValidator(e => {
    if (
      find('[name="a"]', e.pane).value === 'a' &&
      find('[name="b"]', e.pane).value === 'b'
    ) {
      return true
    }
    return false
  })
github pluginjs / pluginjs / modules / masonry / src / components / toolbar.js View on Github external
for (const key in chunk.sort) {
        if (Object.prototype.hasOwnProperty.call(chunk.sort, key)) {
          sorts.push(key)
        }
      }
    })

    sorts = Array.from(new Set(sorts))
    sorts.forEach((sort, index) => {
      sorts[index] = {
        label: sort,
        value: sort
      }
    })
    config.data = sorts
    this.$sortinner = find(`.${this.classes.SORTINNER}`, this.instance.element)
    this.$sortinner.innerHTML = sorts[0].label
    Dropdown.of(this.$sortinner, config)
  }
github pluginjs / pluginjs / modules / color-selector / src / components / gradient.js View on Github external
selectMarker(marker) {
    compose(
      removeClass(this.classes.MARKERACTIVE),
      find(`.${this.classes.MARKER}`)
    )(this.$actionBar)

    removeClass(
      this.classes.MARKERACTIVE,
      query(`.${this.classes.MARKERACTIVE}`, this.$actionBar)
    )
    addClass(this.classes.MARKERACTIVE, marker)

    this.instance.$marker = marker

    compose(
      this.markers.length > 2
        ? addClass(this.classes.GRADIENTREMOVEACTIVE)
        : removeClass(this.classes.GRADIENTREMOVEACTIVE),
      find(`.${this.classes.GRADIENTREMOVE}`)
    )(this.element)