From 2783525e25eb2a82273cf513c0651ff174434cad Mon Sep 17 00:00:00 2001 From: Yan Maniez Date: Sat, 4 Jan 2020 18:14:20 +0100 Subject: [PATCH] Tests --- Docs/alariantest.html | 248 ++++++++++++++++++++++++++++++++++++ Docs/imageMapResizer.js | 163 ++++++++++++++++++++++++ Docs/imageMapResizer.min.js | 8 -- Docs/wheelzoom.js | 207 ++++++++++++++++++++++++++++++ 4 files changed, 618 insertions(+), 8 deletions(-) create mode 100644 Docs/alariantest.html create mode 100644 Docs/imageMapResizer.js delete mode 100644 Docs/imageMapResizer.min.js create mode 100644 Docs/wheelzoom.js diff --git a/Docs/alariantest.html b/Docs/alariantest.html new file mode 100644 index 00000000..13471ab9 --- /dev/null +++ b/Docs/alariantest.html @@ -0,0 +1,248 @@ + + + + + Alarian + + + + + + + + Alarian + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Docs/imageMapResizer.js b/Docs/imageMapResizer.js new file mode 100644 index 00000000..1c02bef8 --- /dev/null +++ b/Docs/imageMapResizer.js @@ -0,0 +1,163 @@ +/*! Image Map Resizer + * Desc: Resize HTML imageMap to scaled image. + * Copyright: (c) 2014-15 David J. Bradshaw - dave@bradshaw.net + * License: MIT + */ + +;(function() { + 'use strict' + + function scaleImageMap() { + function resizeMap() { + function resizeAreaTag(cachedAreaCoords, idx) { + function scale(coord) { + var dimension = 1 === (isWidth = 1 - isWidth) ? 'width' : 'height' + return ( + padding[dimension] + + Math.floor(Number(coord) * scalingFactor[dimension]) + ) + } + + var isWidth = 0 + areas[idx].coords = cachedAreaCoords + .split(',') + .map(scale) + .join(',') + } + + var scalingFactor = { + width: image.width / image.naturalWidth, + height: image.height / image.naturalHeight, + } + + var padding = { + width: parseInt( + window.getComputedStyle(image, null).getPropertyValue('padding-left'), + 10 + ), + height: parseInt( + window.getComputedStyle(image, null).getPropertyValue('padding-top'), + 10 + ), + } + + cachedAreaCoordsArray.forEach(resizeAreaTag) + } + + function getCoords(e) { + //Normalize coord-string to csv format without any space chars + return e.coords.replace(/ *, */g, ',').replace(/ +/g, ',') + } + + function debounce() { + clearTimeout(timer) + timer = setTimeout(resizeMap, 250) + } + + function start() { + if ( + image.width !== image.naturalWidth || + image.height !== image.naturalHeight + ) { + resizeMap() + } + } + + function addEventListeners() { + image.addEventListener('load', resizeMap, false) //Detect late image loads in IE11 + window.addEventListener('focus', resizeMap, false) //Cope with window being resized whilst on another tab + window.addEventListener('resize', debounce, false) + window.addEventListener('readystatechange', resizeMap, false) + document.addEventListener('fullscreenchange', resizeMap, false) + } + + function beenHere() { + return 'function' === typeof map._resize + } + + function getImg(name) { + return document.querySelector('img[usemap="' + name + '"]') + } + + function setup() { + areas = map.getElementsByTagName('area') + cachedAreaCoordsArray = Array.prototype.map.call(areas, getCoords) + image = getImg('#' + map.name) || getImg(map.name) + map._resize = resizeMap //Bind resize method to HTML map element + } + + var /*jshint validthis:true */ + map = this, + areas = null, + cachedAreaCoordsArray = null, + image = null, + timer = null + + if (!beenHere()) { + setup() + addEventListeners() + start() + } else { + map._resize() //Already setup, so just resize map + } + } + + function factory() { + function chkMap(element) { + if (!element.tagName) { + throw new TypeError('Object is not a valid DOM element') + } else if ('MAP' !== element.tagName.toUpperCase()) { + throw new TypeError( + 'Expected tag, found <' + element.tagName + '>.' + ) + } + } + + function init(element) { + if (element) { + chkMap(element) + scaleImageMap.call(element) + maps.push(element) + } + } + + var maps + + return function imageMapResizeF(target) { + maps = [] // Only return maps from this call + + switch (typeof target) { + case 'undefined': + case 'string': + Array.prototype.forEach.call( + document.querySelectorAll(target || 'map'), + init + ) + break + case 'object': + init(target) + break + default: + throw new TypeError('Unexpected data type (' + typeof target + ').') + } + + return maps + } + } + + if (typeof define === 'function' && define.amd) { + define([], factory) + } else if (typeof module === 'object' && typeof module.exports === 'object') { + module.exports = factory() //Node for browserfy + } else { + window.imageMapResize = factory() + } + + if ('jQuery' in window) { + window.jQuery.fn.imageMapResize = function $imageMapResizeF() { + return this.filter('map') + .each(scaleImageMap) + .end() + } + } +})() diff --git a/Docs/imageMapResizer.min.js b/Docs/imageMapResizer.min.js deleted file mode 100644 index 09ad956e..00000000 --- a/Docs/imageMapResizer.min.js +++ /dev/null @@ -1,8 +0,0 @@ -/*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10 - * Desc: Resize HTML imageMap to scaled image. - * Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net - * License: MIT - */ - -!function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}(); -//# sourceMappingURL=imageMapResizer.map \ No newline at end of file diff --git a/Docs/wheelzoom.js b/Docs/wheelzoom.js new file mode 100644 index 00000000..b21e9873 --- /dev/null +++ b/Docs/wheelzoom.js @@ -0,0 +1,207 @@ +/*! + Wheelzoom 4.0.1 + license: MIT + http://www.jacklmoore.com/wheelzoom +*/ +window.wheelzoom = (function(){ + var defaults = { + zoom: 0.10, + maxZoom: false, + initialZoom: 1, + initialX: 0.5, + initialY: 0.5, + }; + + var main = function(img, options){ + if (!img || !img.nodeName || img.nodeName !== 'IMG') { return; } + + var settings = {}; + var width; + var height; + var bgWidth; + var bgHeight; + var bgPosX; + var bgPosY; + var previousEvent; + var transparentSpaceFiller; + + function setSrcToBackground(img) { + img.style.backgroundRepeat = 'no-repeat'; + img.style.backgroundImage = 'url("'+img.src+'")'; + transparentSpaceFiller = 'data:image/svg+xml;base64,'+window.btoa(''); + img.src = transparentSpaceFiller; + } + + function updateBgStyle() { + if (bgPosX > 0) { + bgPosX = 0; + } else if (bgPosX < width - bgWidth) { + bgPosX = width - bgWidth; + } + + if (bgPosY > 0) { + bgPosY = 0; + } else if (bgPosY < height - bgHeight) { + bgPosY = height - bgHeight; + } + + img.style.backgroundSize = bgWidth+'px '+bgHeight+'px'; + img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px'; + } + + function reset() { + bgWidth = width; + bgHeight = height; + bgPosX = bgPosY = 0; + updateBgStyle(); + } + + function onwheel(e) { + var deltaY = 0; + + e.preventDefault(); + + if (e.deltaY) { // FireFox 17+ (IE9+, Chrome 31+?) + deltaY = e.deltaY; + } else if (e.wheelDelta) { + deltaY = -e.wheelDelta; + } + + // As far as I know, there is no good cross-browser way to get the cursor position relative to the event target. + // We have to calculate the target element's position relative to the document, and subtrack that from the + // cursor's position relative to the document. + var rect = img.getBoundingClientRect(); + var offsetX = e.pageX - rect.left - window.pageXOffset; + var offsetY = e.pageY - rect.top - window.pageYOffset; + + // Record the offset between the bg edge and cursor: + var bgCursorX = offsetX - bgPosX; + var bgCursorY = offsetY - bgPosY; + + // Use the previous offset to get the percent offset between the bg edge and cursor: + var bgRatioX = bgCursorX/bgWidth; + var bgRatioY = bgCursorY/bgHeight; + + // Update the bg size: + if (deltaY < 0) { + bgWidth += bgWidth*settings.zoom; + bgHeight += bgHeight*settings.zoom; + } else { + bgWidth -= bgWidth*settings.zoom; + bgHeight -= bgHeight*settings.zoom; + } + + if (settings.maxZoom) { + bgWidth = Math.min(width*settings.maxZoom, bgWidth); + bgHeight = Math.min(height*settings.maxZoom, bgHeight); + } + + // Take the percent offset and apply it to the new size: + bgPosX = offsetX - (bgWidth * bgRatioX); + bgPosY = offsetY - (bgHeight * bgRatioY); + + // Prevent zooming out beyond the starting size + if (bgWidth <= width || bgHeight <= height) { + reset(); + } else { + updateBgStyle(); + } + imageMapResize(); + } + + function drag(e) { + e.preventDefault(); + bgPosX += (e.pageX - previousEvent.pageX); + bgPosY += (e.pageY - previousEvent.pageY); + previousEvent = e; + updateBgStyle(); + } + + function removeDrag() { + document.removeEventListener('mouseup', removeDrag); + document.removeEventListener('mousemove', drag); + } + + // Make the background draggable + function draggable(e) { + e.preventDefault(); + previousEvent = e; + document.addEventListener('mousemove', drag); + document.addEventListener('mouseup', removeDrag); + } + + function load() { + var initial = Math.max(settings.initialZoom, 1); + + if (img.src === transparentSpaceFiller) return; + + var computedStyle = window.getComputedStyle(img, null); + + width = parseInt(computedStyle.width, 10); + height = parseInt(computedStyle.height, 10); + bgWidth = width * initial; + bgHeight = height * initial; + bgPosX = -(bgWidth - width) * settings.initialX; + bgPosY = -(bgHeight - height) * settings.initialY; + + setSrcToBackground(img); + + img.style.backgroundSize = bgWidth+'px '+bgHeight+'px'; + img.style.backgroundPosition = bgPosX+'px '+bgPosY+'px'; + img.addEventListener('wheelzoom.reset', reset); + + img.addEventListener('wheel', onwheel); + img.addEventListener('mousedown', draggable); + } + + var destroy = function (originalProperties) { + img.removeEventListener('wheelzoom.destroy', destroy); + img.removeEventListener('wheelzoom.reset', reset); + img.removeEventListener('load', load); + img.removeEventListener('mouseup', removeDrag); + img.removeEventListener('mousemove', drag); + img.removeEventListener('mousedown', draggable); + img.removeEventListener('wheel', onwheel); + + img.style.backgroundImage = originalProperties.backgroundImage; + img.style.backgroundRepeat = originalProperties.backgroundRepeat; + img.src = originalProperties.src; + }.bind(null, { + backgroundImage: img.style.backgroundImage, + backgroundRepeat: img.style.backgroundRepeat, + src: img.src + }); + + img.addEventListener('wheelzoom.destroy', destroy); + + options = options || {}; + + Object.keys(defaults).forEach(function(key){ + settings[key] = options[key] !== undefined ? options[key] : defaults[key]; + }); + + if (img.complete) { + load(); + } + + img.addEventListener('load', load); + }; + + // Do nothing in IE9 or below + if (typeof window.btoa !== 'function') { + return function(elements) { + return elements; + }; + } else { + return function(elements, options) { + if (elements && elements.length) { + Array.prototype.forEach.call(elements, function (node) { + main(node, options); + }); + } else if (elements && elements.nodeName) { + main(elements, options); + } + return elements; + }; + } +}()); \ No newline at end of file