How to use the @pluginjs/styled.innerWidth 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 / magnify / src / main.js View on Github external
initTargetDimension() {
    if (this.$target) {
      this.targetWidth = innerWidth(this.$target)
      this.targetHeight = innerHeight(this.$target)
    } else {
      this.targetWidth = null
      this.targetHeight = null
    }
  }
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
}

    if (this.options.lens && this.$lens) {
      if (this.mode === 'outside') {
        this.lensWidth = this.width / zoom
        this.lensHeight = this.height / zoom

        setStyle(
          {
            width: `${this.lensWidth}px`,
            height: `${this.lensHeight}px`
          },
          this.$lens
        )
      } else {
        this.lensWidth = innerWidth(this.$lens)
        this.lensHeight = innerHeight(this.$lens)
        this.targetWidth = this.lensWidth
        this.targetHeight = this.lensHeight
      }
    }

    if (this.$targetImage && this.position) {
      this.positionTarget(this.position.x, this.position.y)
    }

    if (this.$lens && this.position) {
      this.positionLens(this.position.x, this.position.y)
    }

    if (trigger) {
      this.trigger(EVENTS.ZOOM, zoom)
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(
      this.getClass(this.classes.TRIGGER, 'trigger', this.options.trigger),
      this.$wrap
    )

    if (this.options.lens) {
      addClass(this.classes.HASLENS, this.$wrap)
github pluginjs / pluginjs / modules / magnify / src / main.js View on Github external
const _initDimension = () => {
      this.width = innerWidth(this.$wrap)
      this.height = innerHeight(this.$wrap)
      this.ratio = this.width / this.height
    }
    if (this.$image.complete && this.$image.naturalWidth) {