How to use the @pluginjs/styled.setStyle 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 / bg-picker / src / attachment.js View on Github external
onChange(value) {  /* eslint-disable-line */
          if (that.instance.is('disabled')) {
            return
          }
          that.instance.value.attachment = value
          setStyle(
            'background-attachment',
            that.instance.value.attachment,
            that.instance.$image
          )
          setStyle(
            'background-attachment',
            that.instance.value.attachment,
            that.instance.TRIGGER.$fillImage
          )
        }
      }),
github pluginjs / pluginjs / modules / lightbox / src / components / slide / slide.js View on Github external
this.hammer.on('panend', event => {
      const drapDistance = event.deltaX
      if (Math.abs(drapDistance) < 800) {
        if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
          addClass(this.classes.SLIDETRANSITION, this.slide)
        }
        const p =
          this.translate * -1 * window.document.documentElement.clientWidth
        setStyle('transform', `translate3d(${p}px, 0px, 0px)`, this.slide)
      } else {
        const direction = drapDistance > 0 ? 'pre' : 'next'
        if (direction === 'pre') {
          this.instance.pre()
        } else {
          this.instance.next()
        }
      }

      setTimeout(() => {
        this.instance.drap = false
      }, 100)
    })
  }
github pluginjs / pluginjs / modules / lightbox / src / components / slide / slide.js View on Github external
resetPosition() {
    this.translate = 0
    setStyle('transform', 'translate3d(0px, 0px, 0px)', this.slide)

    if (!hasClass(this.classes.SLIDETRANSITION, this.slide)) {
      addClass(this.classes.SLIDETRANSITION, this.slide)
    }
  }
github pluginjs / pluginjs / modules / parallax / src / main.js View on Github external
scaleHandle() {
    if (Math.abs(this.speed) > 1) {
      this.speed = 0.6
    }

    this.updateVars()

    const offset =
      1.2 - this.containerBottom / (this.windowHeight + this.containerHeight)

    this.transform = `scale(${1 + offset * Math.abs(this.speed)})`

    setStyle(
      {
        transform: this.transform,
        height: '100%',
        top: '0',
        left: '0'
      },
      this.element
    )
  }
github pluginjs / pluginjs / modules / gradient-picker / src / main.js View on Github external
move(el, size) {
    const position = Math.max(0, Math.min(size, this.actionBarSize))
    setStyle('left', `${position}px`, el)
  }
github pluginjs / pluginjs / modules / masonry / src / components / item.js View on Github external
() => {
        setStyle(
          {
            left: `${position.x}px`,
            top: `${position.y}px`
          },
          this.element
        )

        this.element.style.removeProperty('transition')
        this.element.style.removeProperty('transform')
      },
      this.element
github pluginjs / pluginjs / modules / gradient-picker / src / components / marker.js View on Github external
update(color) {
    if (!hasClass(this.instance.classes.MARKERACTIVE, this.$el)) {
      return false
    }
    this.color = color.toRGBA()
    setStyle('background', this.color, this.instance.$marker)
    return null
  }
github pluginjs / pluginjs / modules / adapt-text / src / main.js View on Github external
initialize() {
    const lineHeight = getStyle('lineHeight', this.element)
    if (lineHeight.includes('px')) {
      setStyle(
        {
          lineHeight:
            parseInt(lineHeight, 10) /
            parseInt(getStyle('fontSize', this.element), 10)
        },
        this.element
      )
    }

    this.resize()

    if (this.options.scrollable) {
      this.scrollOnHover()
    }

    this.enter('initialized')
github pluginjs / pluginjs / modules / zoom / src / mode / window.js View on Github external
}
    if (this.onleft) {
      this.windowLeftPos = 0
    }
    if (this.onbom) {
      this.windowTopPos = (this.largeHeight - this.window.clientHeight) * -1
    }
    if (this.onright) {
      this.windowLeftPos = (this.largeWidth - this.window.clientWidth) * -1
    }

    if (transform) {
      const backgroundPosition = `${this.windowLeftPos}px, ${
        this.windowTopPos
      }px`
      setStyle(
        'transform',
        `translate(${backgroundPosition})`,
        this.windowImage
      )
    } else {
      setStyle(
        {
          top: this.windowTopPos,
          left: this.windowLeftPos
        },
        this.windowImage
      )
    }
  }
github pluginjs / pluginjs / modules / font-editor / src / trigger.js View on Github external
Object.entries(this.instance.value).forEach(([i, v]) => {
      if (this.instance.defaultVal[i] === v) {
        return
      }
      if (i === 'fontSize' || i === 'lineHeight') {
        return
      }
      if (i === 'fontFamily' && v !== 'inherit') {
        this.$fillContentName.textContent = v.font
      }
      if (i === 'textAlign') {
        i = 'align-self'
        setStyle('alignSelf', v, this.$fillContentSub)
      }

      i = i.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)

      const attr = {}
      attr[i] = v
      setStyle(attr, this.$fillContentName)
    })