How to use the @pluginjs/styled.getStyle function in @pluginjs/styled

To help you get started, we’ve selected a few @pluginjs/styled 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 / components / alpha.js View on Github external
e => {
        if (e.which === 2 || e.which === 3) {
          return false
        }
        if (!hasClass(this.instance.classes.POINTER, e.target)) {
          this.move(e.offsetY)
        }

        this.offset = e.pageY - this.size
        const pointerY = parseInt(getStyle('top', this.$pointer), 10)

        bindEvent(
          this.instance.eventNameWithId('mousemove'),
          // identity: this.$pointer,
          e => {
            const size = e.pageY - this.offset + pointerY
            this.move(size)
          },
          window.document
        )

        bindEvent(
          this.instance.eventNameWithId('mouseup'),
          () => {
            removeEvent(
              this.instance.eventNameWithId('mousemove'),
github pluginjs / pluginjs / modules / grids / src / components / item.js View on Github external
append(child, this.chunkInner)
    })

    this.index = this.options.index

    // aspectRatio => [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
    this.height =
      aspectRatio[1] || parseFloat(getStyle('height', this.element), 10) || 1

    this.aspectRatio = this.width / this.height

    this.col = parseInt(this.options.col, 10) || 1
    this.row = parseInt(this.options.row, 10) || 1

    this.img = this.instance.options.imgSelector
      ? query(this.instance.options.imgSelector, this.element)
      : query('img', this.element)

    if (this.img) {
      let loader = ''

      if (this.instance.options.loader) {
        loader = Loader.of(this.chunkInner, this.instance.options.loader)
        loader.show()
github pluginjs / pluginjs / modules / auto-complete / src / main.js View on Github external
template.compile(this.options.templates.panel())({
        classes: this.classes
      })
    )
    // close button
    this.$close = parseHTML(
      template.compile(this.options.templates.icon())({
        classes: this.classes,
        icon: 'pj-icon pj-icon-char pj-icon-remove-small'
      })
    )

    this.$wrapper.append(this.$panel, this.$close)
    const panelWidth = this.options.panelWidth
      ? this.options.panelWidth
      : getStyle('width', this.$element)
    setStyle('width', panelWidth, this.$panel)

    if (this.options.keyboard) {
      this.$element.setAttribute('tabindex', 1)
    }

    if (isFunction(this.options.source)) {
      this.options.source.call(this, this.resolveData.bind(this))
    } else {
      this.resolveData(this.source)
    }
  }
github pluginjs / pluginjs / modules / color-selector / src / components / marker.js View on Github external
constructor(instance, el, options) {
    this.$el = el
    this.instance = instance
    this.options = options

    this.color = this.options.color
    this.percent = this.options.percent
    this.index = this.options.index
    this.$wrap = query(
      `.${this.instance.classes.GRADIENTBAR}`,
      this.instance.$gradient
    )

    this.$wrap.append(this.$el)

    this.wrapSize = parseInt(getStyle('width', this.$wrap), 10)
    this.elSize = parseInt(getStyle('width', this.$el), 10)
    this.maxLenght = this.wrapSize - this.elSize
    this.init()
  }
github pluginjs / pluginjs / modules / gradient-picker / src / components / marker.js View on Github external
constructor(instance, el, options) {
    this.$el = el
    this.instance = instance
    this.options = options
    this.color = this.options.color
    this.percent = this.options.percent
    this.index = this.options.index
    this.$wrap = query(`.${this.instance.classes.BAR}`, this.instance.$panel)
    this.$wrap.append(this.$el)

    this.wrapSize = parseInt(getStyle('width', this.$wrap), 10)
    this.elSize = parseInt(getStyle('width', this.$el), 10)
    this.maxLenght = this.wrapSize - this.elSize
    this.init()
  }
github pluginjs / pluginjs / modules / gradient-picker / src / components / wheel.js View on Github external
init() {
    this.$handle = query(`.${this.instance.classes.WHEELHANDLE}`, this.$el)
    this.r = parseInt(getStyle('width', this.$el), 10) / 2

    this.bind()
    this.set(90)
  }
github pluginjs / pluginjs / modules / scrollable / src / main.js View on Github external
initialize() {
    const position = getStyle('position', this.element)
    if (this.options.containerSelector) {
      if (this.options.containerSelector === '>') {
        this.$container = children(this.element)[0]
      } else {
        this.$container = query(this.options.containerSelector, this.element)
      }
      this.$wrap = this.element

      if (position === 'static') {
        setStyle('position', 'relative', this.$wrap)
      }
    } else {
      this.$wrap = wrap('<div></div>', this.element)
      this.$container = this.element
      this.$wrap.style.height =
        getHeight(this.element) &gt;= 0 ? `${getHeight(this.element)}px` : '0px'
github pluginjs / pluginjs / modules / grids / src / main.js View on Github external
setContainerWidth(width) {
    setStyle('width', width, this.$container)

    this.containerWidth = parseFloat(getStyle('width', this.$container), 10)
  }
github pluginjs / pluginjs / modules / filters / src / main.js View on Github external
getWidth() {
    return parseFloat(getStyle('width', this.element), 10)
  }