Skip to content

Commit 7e8103d

Browse files
alex40724alex40724
committed
47457: Link areas no longer highlighted
1 parent ff41db6 commit 7e8103d

13 files changed

Lines changed: 702 additions & 18 deletions

File tree

‎components/ILIAS/COPage/PC/MediaObject/class.ilPCMediaObject.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -495,7 +495,8 @@ public function modifyPageContentPostXsl(
495495
} else {
496496
$html = $this->ui->renderer()->render($modal);
497497
}
498-
return $a_output . "<div class='il-copg-mob-fullscreen-modal'>" . $html . "</div>";
498+
return $a_output . "<div class='il-copg-mob-fullscreen-modal'>" . $html . "</div>" .
499+
'<script type="module" src="./components/ILIAS/MediaObjects/js/src/presentation/presentation.js"></script>';
499500
}
500501

501502
public function getOnloadCode(string $a_mode): array

‎components/ILIAS/COPage/xsl/page.xsl‎

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -234,26 +234,11 @@
234234
<!-- output image map areas -->
235235
<xsl:template name="outputImageMapAreas">
236236
<xsl:for-each select="../MapArea">
237-
238-
<!-- highlight mode -->
239-
<xsl:variable name="hl_class">
240-
<xsl:choose>
241-
<xsl:when test="@HighlightClass = 'Dark'">"fillColor":"202020","strokeColor":"202020"</xsl:when>
242-
<xsl:when test="@HighlightClass = 'Light'">"fillColor":"F0F0F0","strokeColor":"F0F0F0"</xsl:when>
243-
<xsl:otherwise>"fillColor":"FF6633","strokeColor":"FF6633"</xsl:otherwise>
244-
</xsl:choose>
245-
</xsl:variable>
246-
<xsl:variable name="hl_mode">
247-
<xsl:choose>
248-
<xsl:when test="@HighlightMode = 'Hover'">,"fade":true</xsl:when>
249-
<xsl:otherwise>,"alwaysOn":true,"fade":false</xsl:otherwise>
250-
</xsl:choose>
251-
</xsl:variable>
252-
253237
<xsl:if test="@Shape != 'WholePicture' and $map_edit_mode = ''">
254238
<area>
255239
<xsl:if test="@HighlightMode != '' and $map_edit_mode = ''">
256-
<xsl:attribute name="data-maphilight">{"neverOn":false, "fillOpacity":0, "strokeWidth":2,<xsl:value-of select = "$hl_class"/><xsl:value-of select = "$hl_mode"/>}</xsl:attribute>
240+
<xsl:attribute name="data-hl-class"><xsl:value-of select = "@HighlightClass"/></xsl:attribute>
241+
<xsl:attribute name="data-hl-mode"><xsl:value-of select = "@HighlightMode"/></xsl:attribute>
257242
</xsl:if>
258243
<xsl:attribute name="shape"><xsl:value-of select="@Shape"/></xsl:attribute>
259244
<xsl:attribute name="coords"><xsl:value-of select="@Coords"/></xsl:attribute>

‎components/ILIAS/MediaObjects/MediaObjects.php‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,18 @@ public function init(
4545
new Component\Resource\ComponentJS($this, "MediaObjectsCompletion.js");
4646
$contribute[Component\Resource\PublicAsset::class] = fn() =>
4747
new Component\Resource\ComponentJS($this, "ServiceMediaObjectPropWidthHeight.js");
48+
49+
$contribute[Component\Resource\PublicAsset::class] = static fn() => new class () implements Component\Resource\PublicAsset {
50+
public function getSource(): string
51+
{
52+
return "components/ILIAS/MediaObjects/js";
53+
}
54+
public function getTarget(): string
55+
{
56+
return "components/ILIAS/MediaObjects/js";
57+
}
58+
};
59+
4860
/* This library was missing after discussing dependencies for ILIAS 10
4961
$contribute[Component\Resource\PublicAsset::class] = static fn() =>
5062
new Component\Resource\NodeModule("mediaelement/build/mediaelement-and-player.min.js");

‎components/ILIAS/MediaObjects/js/src/area/area-factory.js‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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+
17+
import Area from './area.js';
18+
19+
/**
20+
* Shape
21+
*/
22+
export default class AreaFactory {
23+
constructor() {
24+
}
25+
26+
area(
27+
shape,
28+
coords,
29+
hClass = '',
30+
hMode = '',
31+
id = 0,
32+
link = null,
33+
) {
34+
return new Area(
35+
shape,
36+
coords,
37+
hClass,
38+
hMode,
39+
id,
40+
link,
41+
);
42+
}
43+
44+
/**
45+
*/
46+
fromPropertiesObject(o, link = null) {
47+
return new Area(
48+
o.Shape,
49+
o.Coords,
50+
o.HighlightClass,
51+
o.HighlightMode,
52+
o.Id,
53+
link,
54+
);
55+
}
56+
57+
fromModelForId(id, model) {
58+
let area = null;
59+
model.media_item.areas.forEach((a) => {
60+
if (a.Id == id) {
61+
area = this.fromPropertiesObject(a, null);
62+
}
63+
});
64+
return area;
65+
}
66+
}

‎components/ILIAS/MediaObjects/js/src/area/area.js‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
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+
17+
import ShapeFactory from '../shape/shape-factory.js';
18+
19+
/**
20+
* Area
21+
*/
22+
export default class Area {
23+
/**
24+
*/
25+
constructor(
26+
shapeType,
27+
coords,
28+
hClass,
29+
hMode,
30+
id = 0,
31+
link = null,
32+
) {
33+
this.shapeType = shapeType;
34+
this.coords = coords;
35+
this.hClass = hClass;
36+
this.hMode = hMode;
37+
this.overlayY = '';
38+
this.id = id;
39+
this.link = link;
40+
this.shapeFactory = new ShapeFactory();
41+
this.shape = {};
42+
}
43+
44+
toPropertiesObject(nr) {
45+
const link = (this.link === null)
46+
? null
47+
: this.link.toPropertiesObject();
48+
return {
49+
Coords: this.coords,
50+
HighlightClass: this.hClass,
51+
HighlightMode: this.hMode,
52+
Id: this.id,
53+
Link: link,
54+
Nr: nr,
55+
Shape: this.shapeType,
56+
};
57+
}
58+
59+
getShape(triggerNr = null) {
60+
const coords = this.coords.split(',');
61+
let shape = null;
62+
if (triggerNr && this.shape[triggerNr]) {
63+
return this.shape[triggerNr];
64+
}
65+
switch (this.shapeType) {
66+
case 'Rect':
67+
shape = this.shapeFactory.rect(
68+
parseInt(coords[0]),
69+
parseInt(coords[1]),
70+
parseInt(coords[2]),
71+
parseInt(coords[3]),
72+
{ triggerNr, copgEdType: 'shape' },
73+
);
74+
break;
75+
case 'Circle':
76+
shape = this.shapeFactory.circle(
77+
parseInt(coords[0]),
78+
parseInt(coords[1]),
79+
parseInt(coords[0]) + parseInt(coords[2]),
80+
parseInt(coords[1]),
81+
{ triggerNr, copgEdType: 'shape' },
82+
);
83+
break;
84+
case 'Poly':
85+
const co = [];
86+
let i;
87+
coords.forEach((c) => {
88+
i = parseInt(c);
89+
if (!isNaN(i)) {
90+
co.push(parseInt(c));
91+
}
92+
});
93+
shape = this.shapeFactory.poly(
94+
co,
95+
{
96+
triggerNr,
97+
copgEdType: 'shape',
98+
},
99+
);
100+
break;
101+
}
102+
if (triggerNr) {
103+
this.shape[triggerNr] = shape;
104+
}
105+
return shape;
106+
}
107+
}

‎components/ILIAS/MediaObjects/js/src/common/util.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
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+
17+
export default class Util {
18+
constructor() {
19+
}
20+
21+
getOverlaySvg(mobElement) {
22+
let svg = mobElement.querySelector("[data-mob-type='svg-overlay']");
23+
if (!svg) {
24+
svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
25+
svg.setAttribute('data-copg-iim-type', 'svg-overlay');
26+
svg.style.position = 'absolute';
27+
svg.style.left = '0px';
28+
svg.style.top = '0px';
29+
svg.style.width = '100%';
30+
svg.style.height = '100%';
31+
mobElement.appendChild(svg);
32+
svg.addEventListener('click', (e) => {
33+
// Prevent SVG from handling the click normally
34+
e.preventDefault();
35+
e.stopPropagation();
36+
37+
// Temporarily disable pointer events to find what's underneath
38+
svg.style.pointerEvents = 'none';
39+
40+
const underlying = document.elementFromPoint(e.clientX, e.clientY);
41+
42+
// Restore pointer events
43+
svg.style.pointerEvents = '';
44+
45+
if (underlying) {
46+
underlying.click(); // trigger click on img/area
47+
}
48+
});
49+
}
50+
return svg;
51+
}
52+
}

‎components/ILIAS/MediaObjects/js/src/presentation/presentation.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
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+
17+
import Util from '../common/util.js';
18+
import AreaFactory from '../area/area-factory.js';
19+
20+
const 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 area = areaFactory.area(
39+
shapeAtt,
40+
coordsAtt,
41+
hlClass,
42+
hlMode,
43+
);
44+
const shape = area.getShape();
45+
const shapeEl = shape.addToSvg(svg);
46+
shapeEl.classList.add(`copg-iim-hl-mode-${hlMode}`);
47+
shapeEl.classList.add(`copg-iim-hl-class-${hlClass}`);
48+
});
49+
}
50+
});
51+
}
52+
53+
return {
54+
init,
55+
};
56+
}());
57+
window.addEventListener('load', () => {
58+
presentation.init(document);
59+
}, false);

0 commit comments

Comments
 (0)