How to use the @pluginjs/styled.offset 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 / gradient-picker / src / components / wheel.js View on Github external
update(e) {
    this.origin = {
      x: offset(this.$el).left + this.r,
      y: offset(this.$el).top + this.r
    }

    const _coord = { x: e.pageX, y: e.pageY }

    const coord = this.getVector(_coord)
    const deg = this.getAngle(coord)
    // set wheel default val
    this.set(deg)

    this.instance.trigger('wheelChange', deg)
  }
github pluginjs / pluginjs / modules / gradient-picker / src / components / wheel.js View on Github external
update(e) {
    this.origin = {
      x: offset(this.$el).left + this.r,
      y: offset(this.$el).top + this.r
    }

    const _coord = { x: e.pageX, y: e.pageY }

    const coord = this.getVector(_coord)
    const deg = this.getAngle(coord)
    // set wheel default val
    this.set(deg)

    this.instance.trigger('wheelChange', deg)
  }
github pluginjs / pluginjs / modules / sticky / src / stickyType / stickyBottom.js View on Github external
scrollHandle() {
    this.scroll = this.scrollTop() + document.body.clientHeight
    // let Botton = this.$wrap.offset().top + this.$wrap.height()
    this.isSticky =
      offset(this.$wrap).top + this.$wrap.clientHeight + this.options.spacing
    this.isStuck =
      offset(this.$parent).top + this.$wrap.clientHeight + this.options.spacing

    if (this.scroll <= this.isSticky && this.scroll > this.isStuck) {
      this.stickyEle()
    } else if (
      this.scroll <= this.isStuck &&
      this.scroll > offset(this.$parent).top
    ) {
      this.stuckEle()
    } else {
      this.defaultEle()
    }
  }
}
github pluginjs / pluginjs / modules / sticky / src / main.js View on Github external
scrollHandle() {
    this.scroll = this.scrollTop()
    const parentBottom = offset(this.$parent).top + this.$parent.clientHeight
    this.isSticky = offset(this.$wrap).top - this.options.spacing
    this.isStuck = parentBottom - this.$wrap.clientHeight - this.options.spacing
    if (this.scroll > this.isSticky && this.scroll < this.isStuck) {
      this.stickyEle()
    } else if (this.scroll > this.isStuck && this.scroll < parentBottom) {
      this.stuckEle()
    } else {
      this.defaultEle()
    }
  }
github pluginjs / pluginjs / modules / scroll-to / src / main.js View on Github external
let easing
    let duration

    if (this.isMobile()) {
      duration = this.options.mobile.duration
      easing = this.options.mobile.easing
    } else {
      duration = this.options.duration
      easing = this.options.easing
    }

    if ($href) {
      addClass(this.classes.ANIMATING, window.document)

      const top = getOffset($href).top

      this.trigger(EVENTS.JUMP, top)

      Scroll.to({
        y: top,
        duration,
        easing,
        complete: () => {
          removeClass(this.classes.ANIMATING, window.document)
          this.trigger(EVENTS.READY)
        }
      })
    }
  }
github pluginjs / pluginjs / modules / color-selector / src / components / wheel.js View on Github external
(e, el, module) => {
        if (module === 'gradient') {
          this.origin = {
            x: offset(this.$el).left + this.r,
            y: offset(this.$el).top + this.r
          }
        }
      },
      this.instance.element
github pluginjs / pluginjs / modules / range / src / main.js View on Github external
event => {
        if (this.is('disabled')) {
          return
        }
        const rightclick = event.which ? event.which === 3 : event.button === 2
        if (rightclick) {
          return
        }

        const offset = getOffset(this.$control)
        const start =
          event[this.direction.axis] - offset[this.direction.position]
        const pointer = this.getAdjacentPointer(start)

        pointer.mousedown(event)
      },
      this.$control
github pluginjs / pluginjs / modules / sticky / src / main.js View on Github external
scrollHandle() {
    this.scroll = this.scrollTop()
    const parentBottom = offset(this.$parent).top + this.$parent.clientHeight
    this.isSticky = offset(this.$wrap).top - this.options.spacing
    this.isStuck = parentBottom - this.$wrap.clientHeight - this.options.spacing
    if (this.scroll > this.isSticky && this.scroll < this.isStuck) {
      this.stickyEle()
    } else if (this.scroll > this.isStuck && this.scroll < parentBottom) {
      this.stuckEle()
    } else {
      this.defaultEle()
    }
  }
github pluginjs / pluginjs / modules / lightbox / src / zoom.js View on Github external
getOffset(el) {
    const offsetValue = offset(el)
    const paddingTop = parseInt(
      getStyle('padding-top', el).replace('px', ''),
      10
    )
    const paddingBottom = parseInt(
      getStyle('padding-bottom', el).replace('px', ''),
      10
    )
    offsetValue.top -= this.scrollTop() - paddingTop
    return {
      width: el.clientWidth,
      height: el.clientHeight,
      ...offsetValue
    }
  }