var Drift = require('drift-zoom');

new Drift(…);

import Drift from 'drift-zoom';

new Drift(…);

new Drift(document.querySelector("img"), {
  paneContainer: document.querySelector("p")
});

var options = {
	// Prefix for generated element class names (e.g. `my-ns` will
	// result in classes such as `my-ns-pane`. Default `drift-`
	// prefixed classes will always be added as well.
	namespace: null,
	// Whether the ZoomPane should show whitespace when near the edges.
	showWhitespaceAtEdges: false,
	// Whether the inline ZoomPane should stay inside
	// the bounds of its image.
	containInline: false,
	// How much to offset the ZoomPane from the
	// interaction point when inline.
	inlineOffsetX: 0,
	inlineOffsetY: 0,
	// A DOM element to append the inline ZoomPane to.
	inlineContainer: document.body,
	// Which trigger attribute to pull the ZoomPane image source from.
	sourceAttribute: 'data-zoom',
	// How much to magnify the trigger by in the ZoomPane.
	// (e.g., `zoomFactor: 3` will result in a 900 px wide ZoomPane image
	// if the trigger is displayed at 300 px wide)
	zoomFactor: 3,
	// A DOM element to append the non-inline ZoomPane to.
	// Required if `inlinePane !== true`.
	paneContainer: document.body,
	// When to switch to an inline ZoomPane. This can be a boolean or
	// an integer. If `true`, the ZoomPane will always be inline,
	// if `false`, it will switch to inline when `windowWidth <= inlinePane`
	inlinePane: 375,
	// If `true`, touch events will trigger the zoom, like mouse events.
	handleTouch: true,
	// If present (and a function), this will be called
	// whenever the ZoomPane is shown.
	onShow: null,
	// If present (and a function), this will be called
	// whenever the ZoomPane is hidden.
	onHide: null,
	// Add base styles to the page. See the "Theming"
	// section of README.md for more information.
	injectBaseStyles: true,
	// An optional number that determines how long to wait before
	// showing the ZoomPane because of a `mouseenter` event.
	hoverDelay: 0,
	// An optional number that determines how long to wait before
	// showing the ZoomPane because of a `touchstart` event.
	// Setting this to a reasonable amount will allow users to execute
	// scroll-gestures events on touch-enabled devices with the image as
	// a starting point
	touchDelay: 0,
	// If true, a bounding box will show the area currently being previewed
	// during mouse hover
	hoverBoundingBox: false,
	// If true, a bounding box will show the area currently being previewed
	// during touch events
	touchBoundingBox: false,
	// A DOM element to append the bounding box to.
	boundingBoxContainer: document.body,
	// If true, the events related to handleTouch use passive listeners in
	// order to improve performance for touch devices.
	passive: false,
};

new Drift(document.querySelector('img'), options);

var drift = new Drift(document.querySelector("img"), {
  paneContainer: document.querySelector("p")
});

document.querySelector(".disable-button").addEventListener("click", function() {
  drift.disable();
});

var drift = new Drift(document.querySelector("img"), {
  paneContainer: document.querySelector("p")
});

document.querySelector(".enable-button").addEventListener("click", function() {
  drift.enable();
});

var triggerEl = document.querySelector("img");
var drift = new Drift(triggerEl, {
  paneContainer: document.querySelector("p")
});

var frames = ["https://mysite.com/frame1.jpg", "https://mysite.com/frame2.jpg", "https://mysite.com/frame3.jpg"];

var currentFrame = 0;

setInterval(function() {
  currentFrame++;

  if (currentFrame > frames.length - 1) {
    currentFrame = 0;
  }

  drift.setZoomImageURL(frames[currentFrame]);
  triggerEl.setAttribute("data-zoom", frames[currentFrame]);
}, 1200);

const driftOptions = {
	paneContainer: paneContainer,
	inlinePane: false,
	handleTouch: false
};

const handleChange = () => {
	requestAnimationFrame(() => {
		if (Responsive.is('mobile') && !!window.productZoom) {
			window.productZoom.destroy();
		} else {
			window.productZoom = new Drift(img, driftOptions);
		}
	})
}

window.addEventListener('resize', handleChange);
window.addEventListener('load', handleChange);

const driftImgs = document.querySelectorAll('.drift-img');
const pane = document.querySelector('.drift-pane');
driftImgs.map(img => {
	new Drift(img, {
		paneContainer: pane,
		inlinePane: false
	});
});