How to use the hammerjs function in hammerjs

To help you get started, we’ve selected a few hammerjs 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 shakee93 / vue-toasted / src / js / show.js View on Github external
if (typeof HTMLElement === "object" ? html instanceof HTMLElement : html && typeof html === "object" && html !== null && html.nodeType === 1 && typeof html.nodeName === "string"
	) {
		toast.appendChild(html);
	}
	else {
		// Insert as text;
		toast.innerHTML = html;
	}

	// add material icon if available
	createIcon(options, toast);


	if (options.closeOnSwipe) {
		// Bind hammer
		let hammerHandler = new Hammer(toast, {prevent_default: false});
		hammerHandler.on('pan', function (e) {
			let deltaX = e.deltaX;
			let activationDistance = 80;

			// Change toast state
			if (!toast.classList.contains('panning')) {
				toast.classList.add('panning');
			}

			let opacityPercent = 1 - Math.abs(deltaX / activationDistance);
			if (opacityPercent < 0)
				opacityPercent = 0;

			animations.animatePanning(toast, deltaX, opacityPercent)

		});
github davidmcclure / earthxray / src / javascripts / scene / xray.js View on Github external
listenForZoom() {

    let el = this.$el.get(0);
    let gesture = new Hammer(el);

    // Enable pinch.
    gesture.get('pinch').set({ enable: true });

    let start;

    // Capture initial FOV.
    gesture.on('pinchstart', e => {
      start = this.camera.fov;
    });

    gesture.on('pinch', e => {

      // Break if we're out of bounds.
      let fov = start / e.scale;
      if (fov < 5 || fov > 120) return;
github pluginjs / pluginjs / modules / tabs / src / responsive.js View on Github external
scrollToggle(isOpen) {
    if (isOpen) {
      this.scrollInit()

      if (!this.instance.is('built')) {
        this.navWrap = new Hammer(this.instance.navWrap)
        this.navWrap.on('panleft panright panup pandown panend', e => {
          if (this.instance.is('disabled')) {
            return
          }

          this.scrollEvents(e)
        })
      }
    } else {
      setStyle('transform', 'none', this.instance.$nav)
      this.navWrap.destroy()
    }
  }
github pluginjs / pluginjs / modules / accordion / src / responsive.js View on Github external
bind() {
    this.dropdown = new Hammer(this.$dropdown)
    this.dropdown.on('tap', e => {
      if (this.instance.is('disabled')) {
        return
      }
      const { target } = e
      const aTag = target.tagName === 'A' ? target : closest('A', target)
      const liTag = target.tagName === 'LI' ? target : closest('LI', target)
      if (aTag) {
        this.switch()
      } else if (liTag) {
        this.labelActive(children(parent(liTag)).indexOf(liTag))
      }
    })
  }
github tooleks / photo-blog / app / resources / js / directives / OnSwipeRight.js View on Github external
bind(element, bindings) {
        const onSwipeLeft = () => bindings.value();
        const eventManager = new Hammer(element);
        eventManager.on("swiperight", onSwipeLeft);
        listeners.set(element, () => eventManager.off("swiperight", onSwipeLeft));
    },
    unbind(element) {
github pluginjs / pluginjs / modules / draggable / src / main.js View on Github external
bindHandles(isAdd) {
    if (isAdd) {
      this.$drag = new Hammer(this.element)
      this.$drag.on('panstart panmove panend', e => {
        switch (e.type) {
          case 'panstart':
            this.dragStart(e)
            break
          case 'panmove':
            this.dragMove(e)
            break
          case 'panend':
            this.dragEnd(e)
            break
          default:
            return
        }
      })
    } else {
github encryptic-team / encryptic / src / scripts / behaviors / Content.js View on Github external
listenToHammer() {
        this.hammer = new Hammer(this.view.$el[0]);
        this.hammer.on('swiperight', () => this.showSidebar());
    }
github shopware / platform / src / Storefront / Resources / src / script / plugin / image-zoom / image-zoom.plugin.js View on Github external
_initHammer() {
        this._hammer = new Hammer(this.el);
        this._hammer.get('pinch').set({ enable: true });
        this._hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    }
github znck / vue-slides / packages / @keynote / core / src / core / Controller / Touch.vue View on Github external
mounted() {
    if (!('ontouchstart' in document.documentElement)) return
    this.ref = new Hammer(this.$el)
    Object.entries(this.$listeners).forEach(([name, fn]) =>
      this.ref.on(name, fn)
    )
  },
  beforeDestroy() {
github pluginjs / pluginjs / modules / tabs / src / responsive.js View on Github external
dropToggle(isOpen) {
    if (isOpen) {
      this.instance.navLabel.innerHTML = this.instance.$tabs[
        this.instance.current
      ].innerHTML

      this.navLabel = new Hammer(this.instance.navLabel)
      this.navLabel.on('tap', () => {
        if (this.instance.is('disabled')) {
          return
        }
        if (hasClass(this.instance.classes.DROPOPEN, this.instance.element)) {
          removeClass(this.instance.classes.DROPOPEN, this.instance.element)
        } else {
          addClass(this.instance.classes.DROPOPEN, this.instance.element)
        }
      })
    } else {
      this.navLabel.destroy()
    }
  }