https://ilias.hu/components/ILIAS/MediaObjects/js/src/presentation/presentation.js

1/**
2 * This file is part of ILIAS, a powerful learning management system
3 * published by ILIAS open source e-Learning e.V.
4 *
5 * ILIAS is licensed with the GPL-3.0,
6 * see https://www.gnu.org/licenses/gpl-3.0.en.html
7 * You should have received a copy of said license along with the
8 * source code, too.
9 *
10 * If this is not the case or you just want to try ILIAS, you'll find
11 * us at:
12 * https://www.ilias.de
13 * https://github.com/ILIAS-eLearning
14 *
15 ******************************************************************** */
16
17import Util from '../common/util.js';
18import AreaFactory from '../area/area-factory.js';
19
20const presentation = (function () {
21  function init(node) {
22    let svg;
23    const util = new Util();
24    const areaFactory = new AreaFactory();
25
26    // all mob images that use a map
27    node.querySelectorAll('img[usemap^="#map_il_"]').forEach((img) => {
28      const mapName = img.getAttribute('usemap').substring(1); // remove "#"
29      const map = document.querySelector(`map[name="${mapName}"]`);
30      if (map) {
31        svg = util.getOverlaySvg(img.parentNode); // this will add the svg to the mob
32        const areas = map.querySelectorAll('area');
33        areas.forEach((areaEl) => {
34          const shapeAtt = areaEl.getAttribute('shape');
35          const coordsAtt = areaEl.getAttribute('coords');
36          const hlMode = areaEl.getAttribute('data-hl-mode');
37          const hlClass = areaEl.getAttribute('data-hl-class');
38          const title = areaEl.getAttribute('title');
39          const area = areaFactory.area(
40            shapeAtt,
41            coordsAtt,
42            hlClass,
43            hlMode,
44          );
45          const shape = area.getShape();
46          const shapeEl = shape.addToSvg(svg);
47          shapeEl.classList.add(`copg-iim-hl-mode-${hlMode}`);
48          shapeEl.classList.add(`copg-iim-hl-class-${hlClass}`);
49          shapeEl.style.pointerEvents = 'auto';
50          shapeEl.style.cursor = 'pointer';
51          if (title) {
52            const titleEl = document.createElementNS('http://www.w3.org/2000/svg', 'title');
53            shapeEl.prepend(titleEl);
54            titleEl.textContent = title;
55          }
56          shapeEl.addEventListener('click', (e) => {
57            e.preventDefault();
58            e.stopPropagation();
59            const href = areaEl.getAttribute('href');
60            const target = areaEl.getAttribute('target') || '_self';
61            if (!href) {
62              return;
63            }
64            if (target === '_self') {
65              window.location.href = href;
66            } else {
67              window.open(href, target);
68            }
69          });
70        });
71      }
72    });
73  }
74
75  return {
76    init,
77  };
78}());
79window.addEventListener('load', () => {
80  presentation.init(document);
81}, false);