6 Commits

Author SHA1 Message Date
Jérémy J
42c0d499ad Fix polygon creation 2023-08-28 10:33:47 +02:00
Jérémy
b672a5d131 Fix scrolling 2023-01-10 10:17:03 +01:00
Jérémy
da9c27f7d5 Fix error when using solr search 2022-12-19 11:59:36 +01:00
Jérémy
c4a97c8b62 Added z-index on popin 2022-12-14 11:58:22 +01:00
jeremycr
60e2f7d930 Merge pull request #1 from onisep/feat_better_handling_of_areas_with_same_target
Better handling when multiple areas have the same target
2022-12-08 11:05:14 +01:00
Jérémy
aa11afe52d Better handling when multiple areas have the same target 2022-12-08 10:11:16 +01:00
7 changed files with 24 additions and 9 deletions

View File

@@ -10,6 +10,7 @@
display: flex;
align-items: center;
justify-content: center;
z-index: 100;
&-open {
visibility: visible;

View File

@@ -23,20 +23,26 @@ document.addEventListener('DOMContentLoaded', () => {
const scrollToEmbed = function (imageMap, e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (!target.hidden) {
const alreadyOpened = !target.hidden;
if (alreadyOpened && this.dataset.active === 'true') {
this.dataset.active = 'false';
target.hidden = true;
target.dispatchEvent(new Event('imagemap-embed-closed'));
return;
}
imageMap.querySelectorAll('area[data-active="true"]').forEach((item) => item.dataset.active = 'false');
this.dataset.active = 'true';
imageMap.querySelectorAll('.imagemap__embeds__item:not([hidden])').forEach((item) => item.hidden = true);
target.hidden = false;
scroll({
top: target.offsetTop,
target.scrollIntoView({
behavior: 'smooth',
});
target.dispatchEvent(new Event('imagemap-embed-opened'));
if (!alreadyOpened) {
target.dispatchEvent(new Event('imagemap-embed-opened'));
}
}
const openPopin = function (e) {

View File

@@ -37,20 +37,23 @@ const finishDraw = function (imageMap, draw) {
switch (drawing.node.tagName) {
case 'rect':
coords.value = `${drawing.x()},${drawing.y()},${drawing.width() + drawing.x() - 1},${drawing.height() + drawing.y() - 1}`;
coords.value = coords.value.split(',').map((value) => parseInt(value)).join(',');
select.value = 'rect';
break;
case 'circle':
coords.value = `${drawing.cx()},${drawing.cy()},${drawing.radius()}`;
coords.value = coords.value.split(',').map((value) => parseInt(value)).join(',');
select.value = 'circle';
break;
case 'polygon':
coords.value = drawing.node.getAttribute('points');
coords.value = coords.value.split(' ').map(
(pair) => pair.split(',').map((value) => parseInt(value)).join(',')
).join(' ');
select.value = 'poly';
break;
}
coords.value = coords.value.split(',').map((value) => parseInt(value)).join(',');
drawing.remove();
drawing = null;
recreateShape(area, draw);

View File

@@ -70,3 +70,8 @@ services:
arguments:
$connection: '@ezpublish.persistence.connection'
tags: ['console.command']
onisep.imagemap.unindexed:
class: eZ\Publish\Core\FieldType\Unindexed
tags:
- { name: ezplatform.field_type.indexable, alias: imagemap }

View File

@@ -1,2 +1,2 @@
/*! For license information please see imagemap.js.LICENSE.txt */
(()=>{var e={486:(e,t)=>{var n,r,a;!function(){"use strict";function o(){function e(){var e={width:o.width/o.naturalWidth,height:o.height/o.naturalHeight},t={width:parseInt(window.getComputedStyle(o,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(o,null).getPropertyValue("padding-top"),10)};a.forEach((function(n,a){var o=0;r[a].coords=n.split(",").map((function(n){var r=1==(o=1-o)?"width":"height";return t[r]+Math.floor(Number(n)*e[r])})).join(",")}))}function t(e){return document.querySelector('img[usemap="'+e+'"]')}var n=this,r=null,a=null,o=null,i=null;"function"!=typeof n._resize?(r=n.getElementsByTagName("area"),a=Array.prototype.map.call(r,(function(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")})),o=t("#"+n.name)||t(n.name),n._resize=e,o.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",(function(){clearTimeout(i),i=setTimeout(e,250)}),!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),o.width===o.naturalWidth&&o.height===o.naturalHeight||e()):n._resize()}r=[],n=function(){function e(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 <MAP> tag, found <"+e.tagName+">.")}(e),o.call(e),t.push(e))}var t;return function(n){switch(t=[],typeof n){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(n||"map"),e);break;case"object":e(n);break;default:throw new TypeError("Unexpected data type ("+typeof n+").")}return t}},void 0!==(a="function"==typeof n?n.apply(t,r):n)&&(e.exports=a),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(o).end()})}()}},t={};function n(r){var a=t[r];if(void 0!==a)return a.exports;var o=t[r]={exports:{}};return e[r](o,o.exports,n),o.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(486),t=n.n(e);document.addEventListener("DOMContentLoaded",(function(){var e=function(e,t){t.preventDefault();var n=document.querySelector(this.getAttribute("href"));if(!n.hidden)return n.hidden=!0,void n.dispatchEvent(new Event("imagemap-embed-closed"));e.querySelectorAll(".imagemap__embeds__item:not([hidden])").forEach((function(e){return e.hidden=!0})),n.hidden=!1,scroll({top:n.offsetTop,behavior:"smooth"}),n.dispatchEvent(new Event("imagemap-embed-opened"))},n=function(e){e.preventDefault();var t=document.querySelector(this.getAttribute("href"));t.classList.add("imagemap__popins__item-open"),t.dispatchEvent(new Event("imagemap-popin-opened"))};t()(".imagemap map"),document.querySelectorAll(".imagemap").forEach((function(t){t.querySelectorAll('area[data-mode="embed"]').forEach((function(n){return n.addEventListener("click",e.bind(n,t))})),t.querySelectorAll('area[data-mode="popin"]').forEach((function(e){e.addEventListener("click",n);var t=document.querySelector(e.getAttribute("href"));t.querySelectorAll(".imagemap__popins__item__exit").forEach((function(e){e.addEventListener("click",(function(e){e.preventDefault(),t.classList.remove("imagemap__popins__item-open"),t.dispatchEvent(new Event("imagemap-popin-closed"))}))}))}))})),location.hash&&document.querySelector(location.hash+".imagemap__embeds__item")&&(document.querySelector(location.hash+".imagemap__embeds__item").hidden=!1)}))})()})();
(()=>{var e={486:(e,t)=>{var n,a,r;!function(){"use strict";function i(){function e(){var e={width:i.width/i.naturalWidth,height:i.height/i.naturalHeight},t={width:parseInt(window.getComputedStyle(i,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(i,null).getPropertyValue("padding-top"),10)};r.forEach((function(n,r){var i=0;a[r].coords=n.split(",").map((function(n){var a=1==(i=1-i)?"width":"height";return t[a]+Math.floor(Number(n)*e[a])})).join(",")}))}function t(e){return document.querySelector('img[usemap="'+e+'"]')}var n=this,a=null,r=null,i=null,o=null;"function"!=typeof n._resize?(a=n.getElementsByTagName("area"),r=Array.prototype.map.call(a,(function(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")})),i=t("#"+n.name)||t(n.name),n._resize=e,i.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",(function(){clearTimeout(o),o=setTimeout(e,250)}),!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),i.width===i.naturalWidth&&i.height===i.naturalHeight||e()):n._resize()}a=[],n=function(){function e(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 <MAP> tag, found <"+e.tagName+">.")}(e),i.call(e),t.push(e))}var t;return function(n){switch(t=[],typeof n){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(n||"map"),e);break;case"object":e(n);break;default:throw new TypeError("Unexpected data type ("+typeof n+").")}return t}},void 0!==(r="function"==typeof n?n.apply(t,a):n)&&(e.exports=r),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(i).end()})}()}},t={};function n(a){var r=t[a];if(void 0!==r)return r.exports;var i=t[a]={exports:{}};return e[a](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var a in t)n.o(t,a)&&!n.o(e,a)&&Object.defineProperty(e,a,{enumerable:!0,get:t[a]})},n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(486),t=n.n(e);document.addEventListener("DOMContentLoaded",(function(){var e=function(e,t){t.preventDefault();var n=document.querySelector(this.getAttribute("href")),a=!n.hidden;if(a&&"true"===this.dataset.active)return this.dataset.active="false",n.hidden=!0,void n.dispatchEvent(new Event("imagemap-embed-closed"));e.querySelectorAll('area[data-active="true"]').forEach((function(e){return e.dataset.active="false"})),this.dataset.active="true",e.querySelectorAll(".imagemap__embeds__item:not([hidden])").forEach((function(e){return e.hidden=!0})),n.hidden=!1,n.scrollIntoView({behavior:"smooth"}),a||n.dispatchEvent(new Event("imagemap-embed-opened"))},n=function(e){e.preventDefault();var t=document.querySelector(this.getAttribute("href"));t.classList.add("imagemap__popins__item-open"),t.dispatchEvent(new Event("imagemap-popin-opened"))};t()(".imagemap map"),document.querySelectorAll(".imagemap").forEach((function(t){t.querySelectorAll('area[data-mode="embed"]').forEach((function(n){return n.addEventListener("click",e.bind(n,t))})),t.querySelectorAll('area[data-mode="popin"]').forEach((function(e){e.addEventListener("click",n);var t=document.querySelector(e.getAttribute("href"));t.querySelectorAll(".imagemap__popins__item__exit").forEach((function(e){e.addEventListener("click",(function(e){e.preventDefault(),t.classList.remove("imagemap__popins__item-open"),t.dispatchEvent(new Event("imagemap-popin-closed"))}))}))}))})),location.hash&&document.querySelector(location.hash+".imagemap__embeds__item")&&(document.querySelector(location.hash+".imagemap__embeds__item").hidden=!1)}))})()})();

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
.imagemap__popins__item{align-items:center;display:flex;height:100vh;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:all .3s ease;visibility:hidden;width:100vw}.imagemap__popins__item-open{opacity:1;transition-delay:0s;visibility:visible}.imagemap__popins__item__bg{background-color:rgba(0,0,0,.5);height:100%;position:absolute;width:100%}.imagemap__popins__item__container{background:#fff;border-radius:10px;padding:30px;position:relative;width:50%}.imagemap__popins__item__close{appearance:none;background:none;border:0;color:red;cursor:pointer;font-weight:700;outline:none;position:absolute;right:15px;top:15px}
.imagemap__popins__item{align-items:center;display:flex;height:100vh;justify-content:center;left:0;opacity:0;position:fixed;top:0;transition:all .3s ease;visibility:hidden;width:100vw;z-index:100}.imagemap__popins__item-open{opacity:1;transition-delay:0s;visibility:visible}.imagemap__popins__item__bg{background-color:rgba(0,0,0,.5);height:100%;position:absolute;width:100%}.imagemap__popins__item__container{background:#fff;border-radius:10px;padding:30px;position:relative;width:50%}.imagemap__popins__item__close{appearance:none;background:none;border:0;color:red;cursor:pointer;font-weight:700;outline:none;position:absolute;right:15px;top:15px}