1 /* This widget displays the image associated to the annotation in the given container */ |
1 /* This widget displays the image associated to the annotation in the given container */ |
|
2 // ImageDisplay |
|
3 import imageDisplayStyles from "./ImageDisplay.module.css"; |
2 |
4 |
3 IriSP.Widgets.ImageDisplay = function(player, config) { |
5 const ImageDisplay = function (ns) { |
4 IriSP.Widgets.Widget.call(this, player, config); |
6 return class extends ns.Widgets.Widget { |
5 } |
7 constructor(player, config) { |
|
8 super(player, config); |
|
9 } |
6 |
10 |
7 IriSP.Widgets.ImageDisplay.prototype = new IriSP.Widgets.Widget(); |
11 static defaults = { |
|
12 annotation_type: "Slides", |
|
13 // container: "imageContainer" |
|
14 }; |
8 |
15 |
9 IriSP.Widgets.ImageDisplay.prototype.defaults = { |
16 static template = |
10 annotation_type: "Slides" |
17 '<div class="Ldt-ImageDisplay-Container"><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>'; |
11 // container: "imageContainer" |
|
12 } |
|
13 |
18 |
14 IriSP.Widgets.ImageDisplay.prototype.template = '<div class="Ldt-ImageDisplay-Container"><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Left"></div><div class="Ldt-ImageDisplay-Overlay Ldt-ImageDisplay-Overlay-Right"></div></div>'; |
19 annotationTemplate = ""; |
15 |
20 |
16 IriSP.Widgets.ImageDisplay.prototype.annotationTemplate = ''; |
21 update(annotation) { |
|
22 // Update the widget with data corresponding to the annotation |
|
23 this.image.css("background-image", "url(" + annotation.thumbnail + ")"); |
|
24 this.image.attr( |
|
25 "title", |
|
26 ns.textFieldHtml(annotation.title) + " - " + annotation.begin.toString() |
|
27 ); |
|
28 } |
17 |
29 |
18 IriSP.Widgets.ImageDisplay.prototype.update = function(annotation) { |
30 draw() { |
19 // Update the widget with data corresponding to the annotation |
31 var _annotations = this.getWidgetAnnotations().sortBy(function ( |
20 this.image.css("background-image", "url(" + annotation.thumbnail + ")"); |
32 _annotation |
21 this.image.attr("title", IriSP.textFieldHtml(annotation.title) + " - " + annotation.begin.toString()); |
33 ) { |
|
34 return _annotation.begin; |
|
35 }); |
|
36 var _this = this; |
|
37 _this.renderTemplate(); |
|
38 _this.image = _this.$.find(".Ldt-ImageDisplay-Container"); |
|
39 |
|
40 _this.$.find(".Ldt-ImageDisplay-Overlay-Left").on("click", function () { |
|
41 _this.navigate(-1); |
|
42 }); |
|
43 _this.$.find(".Ldt-ImageDisplay-Overlay-Right").on("click", function () { |
|
44 _this.navigate(+1); |
|
45 }); |
|
46 |
|
47 _annotations.forEach(function (_a) { |
|
48 _a.on("enter", function () { |
|
49 _this.update(_a); |
|
50 }); |
|
51 }); |
|
52 if (_annotations.length) _this.update(_annotations[0]); |
|
53 } |
|
54 }; |
22 }; |
55 }; |
23 |
56 |
24 IriSP.Widgets.ImageDisplay.prototype.draw = function() { |
57 export { ImageDisplay, imageDisplayStyles }; |
25 var _annotations = this.getWidgetAnnotations().sortBy(function(_annotation) { |
|
26 return _annotation.begin; |
|
27 }); |
|
28 var _this = this; |
|
29 _this.renderTemplate(); |
|
30 _this.image = _this.$.find(".Ldt-ImageDisplay-Container"); |
|
31 |
|
32 _this.$.find(".Ldt-ImageDisplay-Overlay-Left").on("click", function () { _this.navigate(-1); }); |
|
33 _this.$.find(".Ldt-ImageDisplay-Overlay-Right").on("click", function () { _this.navigate(+1); }); |
|
34 |
|
35 _annotations.forEach(function(_a) { |
|
36 _a.on("enter", function() { |
|
37 _this.update(_a); |
|
38 }); |
|
39 }); |
|
40 if (_annotations.length) |
|
41 _this.update(_annotations[0]); |
|
42 } |
|