vanilla-js-wheel-zoom/src/default-options.js

Image resizing using mouse wheel (pinch to zoom) + drag scrollable image (as well as any HTML content)

/** @type {WZoomOptions} */
export const wZoomDefaultOptions = {
    // type content: `image` - only one image, `html` - any HTML content
    type: 'image',
    // for type `image` computed auto (if width set null), for type `html` need set real html content width, else computed auto
    width: null,
    // for type `image` computed auto (if height set null), for type `html` need set real html content height, else computed auto
    height: null,
    // minimum allowed proportion of scale (computed auto if null)
    minScale: null,
    // maximum allowed proportion of scale (1 = 100% content size)
    maxScale: 1,
    // content resizing speed
    speed: 1.1,
    // zoom to maximum (minimum) size on click
    zoomOnClick: true,
    // zoom to maximum (minimum) size on double click
    zoomOnDblClick: false,
    // smooth extinction
    smoothTime: .25,
    // align content `center`, `left`, `top`, `right`, `bottom`
    alignContent: 'center',
    // ******************** //
    disableWheelZoom: false,
    // option to reverse wheel direction
    reverseWheelDirection: false,
    // ******************** //
    // drag scrollable content
    dragScrollable: true,
};

/**
 * @typedef WZoomOptions
 * @type {Object}
 * @property {string} type
 * @property {?number} width
 * @property {?number} height
 * @property {?number} minScale
 * @property {number} maxScale
 * @property {number} speed
 * @property {boolean} zoomOnClick
 * @property {boolean} zoomOnDblClick
 * @property {number} smoothTime
 * @property {string} alignContent
 * @property {boolean} disableWheelZoom
 * @property {boolean} reverseWheelDirection
 * @property {boolean} dragScrollable
 * @property {number} smoothTimeDrag
 * @property {?Function} onGrab
 * @property {?Function} onMove
 * @property {?Function} onDrop
 */