--- a/src/widgets/Annotation.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Annotation.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,239 +1,316 @@
// TODO: Migrate Timeupdate functions to Extract
+import annotationStyles from "./Annotation.module.css";
-IriSP.Widgets.Annotation = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
- this.lastAnnotation = false;
- this.minimized = this.start_minimized || false;
- this.bounds = [ 0, 0 ];
-};
+// Annotation class
+const Annotation = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ this.lastAnnotation = false;
+ this.minimized = this.start_minimized || false;
+ this.bounds = [0, 0];
+ }
-IriSP.Widgets.Annotation.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.Annotation.prototype.messages = {
- fr: {
+ static messages = {
+ fr: {
watching: "Je regarde ",
on_site: " sur ",
tags_: "Mots-clés\u00a0:",
description_: "Description\u00a0:",
creator_: "Créé par\u00a0:",
excerpt_from: "Extrait de\u00a0:",
- untitled: "Segment sans titre"
- },
- en: {
+ untitled: "Segment sans titre",
+ },
+ en: {
watching: "I'm watching ",
on_site: " on ",
tags_: "Keywords:",
description_: "Description:",
creator_: "Created by\u00a0:",
excerpt_from: "Excerpt from:",
- untitled: "Untitled segment"
- }
-};
+ untitled: "Untitled segment",
+ },
+ };
-IriSP.Widgets.Annotation.prototype.template =
- '{{#show_arrow}}<div class="Ldt-Annotation-Arrow"></div>{{/show_arrow}}'
- + '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">'
- + '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">'
- + '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>'
- + '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}'
- + '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<a class="Ldt-Annotation-Title" href="#"></a> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
- + '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>'
- + '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">'
- + '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>'
- + '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Creator-Block"><div class="Ldt-Annotation-Label">{{l10n.creator_}}</div>'
- + '{{#show_creator}}<p class="Ldt-Annotation-Labelled Ldt-Annotation-Creator"></p></div>{{/show_creator}}'
- + '{{#show_description}}<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>'
- + '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>{{/show_description}}'
- + '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">'
- + '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>'
- + '</div></div></div></div>';
+ static template =
+ '{{#show_arrow}}<div class="Ldt-Annotation-Arrow"></div>{{/show_arrow}}' +
+ '<div class="Ldt-Annotation-Widget {{^show_arrow}}Ldt-Annotation-ShowTop{{/show_arrow}}">' +
+ '<div class="Ldt-Annotation-Inner Ldt-Annotation-Empty{{#start_minimized}} Ldt-Annotation-Minimized{{/start_minimized}}">' +
+ '<div class="Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-MaxMinButton"></div>' +
+ '{{#show_social}}<div class="Ldt-Annotation-Social Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty"></div>{{/show_social}}' +
+ '<h3 class="Ldt-Annotation-HiddenWhenEmpty">{{#show_annotation_type}}<span class="Ldt-Annotation-Type"></span> » {{/show_annotation_type}}<a class="Ldt-Annotation-Title" href="#"></a> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">' +
+ '(<span class="Ldt-Annotation-Begin"></span> - <span class="Ldt-Annotation-End"></span>)</span></h3>' +
+ '<h3 class="Ldt-Annotation-MashupOrigin Ldt-Annotation-HiddenWhenEmpty">{{l10n.excerpt_from}} <span class="Ldt-Annotation-MashupMedia"></span> <span class="Ldt-Annotation-Time Ldt-Annotation-HiddenWhenMinimized">' +
+ '(<span class="Ldt-Annotation-MashupBegin"></span> - <span class="Ldt-Annotation-MashupEnd"></span>)</span></h3>' +
+ '<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Creator-Block"><div class="Ldt-Annotation-Label">{{l10n.creator_}}</div>' +
+ '{{#show_creator}}<p class="Ldt-Annotation-Labelled Ldt-Annotation-Creator"></p></div>{{/show_creator}}' +
+ '{{#show_description}}<div class="Ldt-Annotation-Cleared Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Description-Block"><div class="Ldt-Annotation-Label">{{l10n.description_}}</div>' +
+ '<p class="Ldt-Annotation-Labelled Ldt-Annotation-Description"></p></div>{{/show_description}}' +
+ '<div class="Ldt-Annotation-Tags-Block Ldt-Annotation-HiddenWhenMinimized Ldt-Annotation-HiddenWhenEmpty Ldt-Annotation-Cleared">' +
+ '<div class="Ldt-Annotation-Label">{{l10n.tags_}}</div><ul class="Ldt-Annotation-Labelled Ldt-Annotation-Tags"></ul>' +
+ "</div></div></div></div>";
-IriSP.Widgets.Annotation.prototype.defaults = {
- annotation_type : "chap",
- start_minimized: false,
- show_arrow : true,
- show_creator: true,
- show_description: true,
- arrow_position: .5,
- site_name : "Lignes de Temps",
- search_on_tag_click: true,
- show_social: true,
- show_annotation_type: false
-};
+ static defaults = {
+ annotation_type: "chap",
+ start_minimized: false,
+ show_arrow: true,
+ show_creator: true,
+ show_description: true,
+ arrow_position: 0.5,
+ site_name: "Lignes de Temps",
+ search_on_tag_click: true,
+ show_social: true,
+ show_annotation_type: false,
+ };
-IriSP.Widgets.Annotation.prototype.draw = function() {
-
- var _this = this,
+ draw() {
+ var _this = this,
currentAnnotation;
-
- function timeupdate(_time) {
+
+ function timeupdate(_time) {
var _list = _this.getWidgetAnnotationsAtTime();
if (!_list.length) {
- _this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Empty");
- if (_this.arrow) {
- _this.arrow.moveToTime(_time);
- }
- _this.bounds = [ _time, _time ];
- _this.sendBounds();
+ _this.$.find(".Ldt-Annotation-Inner").addClass(
+ "Ldt-Annotation-Empty"
+ );
+ if (_this.arrow) {
+ _this.arrow.moveToTime(_time);
+ }
+ _this.bounds = [_time, _time];
+ _this.sendBounds();
}
- }
-
- function highlightTitleAndDescription() {
+ }
+
+ function highlightTitleAndDescription() {
if (!currentAnnotation) {
- return;
+ return;
}
var title = currentAnnotation.title,
- description = currentAnnotation.description.replace(/(^\s+|\s+$)/g,''),
- rx = (currentAnnotation.found ? (_this.source.getAnnotations().regexp || false) : false);
- _this.$.find(".Ldt-Annotation-Title").html(IriSP.textFieldHtml(title,rx) || "(" + _this.l10n.untitled + ")");
+ description = currentAnnotation.description.replace(
+ /(^\s+|\s+$)/g,
+ ""
+ ),
+ rx = currentAnnotation.found
+ ? _this.source.getAnnotations().regexp || false
+ : false;
+ _this.$.find(".Ldt-Annotation-Title").html(
+ IriSP.textFieldHtml(title, rx) || "(" + _this.l10n.untitled + ")"
+ );
if (description) {
- _this.$.find(".Ldt-Annotation-Description-Block").removeClass("Ldt-Annotation-EmptyBlock");
- _this.$.find(".Ldt-Annotation-Description").html(IriSP.textFieldHtml(description,rx));
+ _this.$.find(".Ldt-Annotation-Description-Block").removeClass(
+ "Ldt-Annotation-EmptyBlock"
+ );
+ _this.$.find(".Ldt-Annotation-Description").html(
+ IriSP.textFieldHtml(description, rx)
+ );
} else {
- _this.$.find(".Ldt-Annotation-Description-Block").addClass("Ldt-Annotation-EmptyBlock");
+ _this.$.find(".Ldt-Annotation-Description-Block").addClass(
+ "Ldt-Annotation-EmptyBlock"
+ );
}
- }
-
- function drawAnnotation(_annotation) {
+ }
+
+ function drawAnnotation(_annotation) {
currentAnnotation = _annotation;
- var _url = (typeof _annotation.url !== "undefined"
- ? _annotation.url
- : (document.location.href.replace(/#.*$/,'') + '#id=' + _annotation.id)),
- _text = _this.l10n.watching + _annotation.title + (_this.site_name ? _this.l10n.on_site + _this.site_name : ''),
- _tags = _annotation.getTags(),
- _tagblock = _this.$.find(".Ldt-Annotation-Tags");
+ var _url =
+ typeof _annotation.url !== "undefined"
+ ? _annotation.url
+ : document.location.href.replace(/#.*$/, "") +
+ "#id=" +
+ _annotation.id,
+ _text =
+ _this.l10n.watching +
+ _annotation.title +
+ (_this.site_name ? _this.l10n.on_site + _this.site_name : ""),
+ _tags = _annotation.getTags(),
+ _tagblock = _this.$.find(".Ldt-Annotation-Tags");
_tagblock.empty();
if (_tags.length) {
- _this.$.find(".Ldt-Annotation-Tags-Block").removeClass("Ldt-Annotation-EmptyBlock");
- _tags.forEach(function(_tag) {
- var _trimmedTitle = _tag.title.replace(/(^\s+|\s+$)/g,'');
- if (_trimmedTitle) {
- var _el = IriSP.jQuery('<li class="Ldt-Annotation-TagLabel"></li>').append(IriSP.jQuery('<span>').text(_trimmedTitle));
- _el.click(function() {
- if (_this.search_on_tag_click) {
- _this.source.getAnnotations().search(_trimmedTitle);
- }
- _tag.trigger("click");
- });
- _tagblock.append(_el);
+ _this.$.find(".Ldt-Annotation-Tags-Block").removeClass(
+ "Ldt-Annotation-EmptyBlock"
+ );
+ _tags.forEach(function (_tag) {
+ var _trimmedTitle = _tag.title.replace(/(^\s+|\s+$)/g, "");
+ if (_trimmedTitle) {
+ var _el = IriSP.jQuery(
+ '<li class="Ldt-Annotation-TagLabel"></li>'
+ ).append(IriSP.jQuery("<span>").text(_trimmedTitle));
+ _el.click(function () {
+ if (_this.search_on_tag_click) {
+ _this.source.getAnnotations().search(_trimmedTitle);
}
- });
+ _tag.trigger("click");
+ });
+ _tagblock.append(_el);
+ }
+ });
} else {
- _this.$.find(".Ldt-Annotation-Tags-Block").addClass("Ldt-Annotation-EmptyBlock");
+ _this.$.find(".Ldt-Annotation-Tags-Block").addClass(
+ "Ldt-Annotation-EmptyBlock"
+ );
}
highlightTitleAndDescription();
if (_this.show_creator) {
- _this.$.find(".Ldt-Annotation-Creator").text(_annotation.creator);
+ _this.$.find(".Ldt-Annotation-Creator").text(_annotation.creator);
}
if (_this.show_annotation_type) {
- _this.$.find(".Ldt-Annotation-Type").text(_annotation.getAnnotationType().title);
- _this.$.find(".Ldt-Annotation-Type").attr("title", _annotation.getAnnotationType().description);
+ _this.$.find(".Ldt-Annotation-Type").text(
+ _annotation.getAnnotationType().title
+ );
+ _this.$.find(".Ldt-Annotation-Type").attr(
+ "title",
+ _annotation.getAnnotationType().description
+ );
}
- _this.$.find(".Ldt-Annotation-Begin").text(_annotation.begin.toString());
+ _this.$.find(".Ldt-Annotation-Begin").text(
+ _annotation.begin.toString()
+ );
_this.$.find(".Ldt-Annotation-End").text(_annotation.end.toString());
if (_annotation.elementType === "mashedAnnotation") {
- _this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-isMashup");
- _this.$.find(".Ldt-Annotation-MashupMedia").text(_annotation.getMedia().title);
- _this.$.find(".Ldt-Annotation-MashupBegin").text(_annotation.annotation.begin.toString());
- _this.$.find(".Ldt-Annotation-MashupEnd").text(_annotation.annotation.end.toString());
+ _this.$.find(".Ldt-Annotation-Inner").addClass(
+ "Ldt-Annotation-isMashup"
+ );
+ _this.$.find(".Ldt-Annotation-MashupMedia").text(
+ _annotation.getMedia().title
+ );
+ _this.$.find(".Ldt-Annotation-MashupBegin").text(
+ _annotation.annotation.begin.toString()
+ );
+ _this.$.find(".Ldt-Annotation-MashupEnd").text(
+ _annotation.annotation.end.toString()
+ );
} else {
- _this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-isMashup");
+ _this.$.find(".Ldt-Annotation-Inner").removeClass(
+ "Ldt-Annotation-isMashup"
+ );
}
if (typeof _this.socialWidget !== "undefined") {
- _this.socialWidget.updateUrls(_url, _text);
+ _this.socialWidget.updateUrls(_url, _text);
} else {
- setTimeout(function() {
- if (typeof _this.socialWidget !== "undefined") {
- _this.socialWidget.updateUrls(_url, _text);
- }
- },800);
+ setTimeout(function () {
+ if (typeof _this.socialWidget !== "undefined") {
+ _this.socialWidget.updateUrls(_url, _text);
+ }
+ }, 800);
}
- _this.$.find(".Ldt-Annotation-Inner").removeClass("Ldt-Annotation-Empty");
- _this.bounds = [ _annotation.begin, _annotation.end ];
+ _this.$.find(".Ldt-Annotation-Inner").removeClass(
+ "Ldt-Annotation-Empty"
+ );
+ _this.bounds = [_annotation.begin, _annotation.end];
if (_this.arrow) {
- _this.arrow.moveToTime((1 - _this.arrow_position) * _annotation.begin + _this.arrow_position * _annotation.end);
+ _this.arrow.moveToTime(
+ (1 - _this.arrow_position) * _annotation.begin +
+ _this.arrow_position * _annotation.end
+ );
}
_this.sendBounds();
- }
-
- this.renderTemplate();
-
- this.$.find(".Ldt-Annotation-Title").click(function() {
+ }
+
+ this.renderTemplate();
+
+ this.$.find(".Ldt-Annotation-Title").click(function () {
if (currentAnnotation) {
- _this.media.setCurrentTime(currentAnnotation.begin);
+ _this.media.setCurrentTime(currentAnnotation.begin);
}
return false;
- });
-
- if (this.show_social) {
- this.insertSubwidget(this.$.find(".Ldt-Annotation-Social"), { type: "Social" }, "socialWidget");
- }
-
- if (this.show_arrow) {
- this.insertSubwidget(this.$.find(".Ldt-Annotation-Arrow"), { type: "Arrow", width: this.width }, "arrow");
- }
- this.onMediaEvent("timeupdate",timeupdate);
- this.onMdpEvent("Annotation.hide","hide");
- this.onMdpEvent("Annotation.show","show");
- this.onMdpEvent("Annotation.minimize","minimize");
- this.onMdpEvent("Annotation.maximize","maximize");
- this.onMdpEvent("Annotation.getBounds","sendBounds");
- this.$.find(".Ldt-Annotation-MaxMinButton").click(this.functionWrapper("toggleSize"));
- this.$.on("resize", function () { _this.width = _this.$.parent().width();
- _this.$.css({ width: _this.width });
- });
- this.getWidgetAnnotations().forEach(function(_a) {
- _a.on("enter", function() {
- drawAnnotation(_a);
+ });
+
+ if (this.show_social) {
+ this.insertSubwidget(
+ this.$.find(".Ldt-Annotation-Social"),
+ { type: "Social" },
+ "socialWidget"
+ );
+ }
+
+ if (this.show_arrow) {
+ this.insertSubwidget(
+ this.$.find(".Ldt-Annotation-Arrow"),
+ { type: "Arrow", width: this.width },
+ "arrow"
+ );
+ }
+ this.onMediaEvent("timeupdate", timeupdate);
+ this.onMdpEvent("Annotation.hide", "hide");
+ this.onMdpEvent("Annotation.show", "show");
+ this.onMdpEvent("Annotation.minimize", "minimize");
+ this.onMdpEvent("Annotation.maximize", "maximize");
+ this.onMdpEvent("Annotation.getBounds", "sendBounds");
+ this.$.find(".Ldt-Annotation-MaxMinButton").click(
+ this.functionWrapper("toggleSize")
+ );
+ this.$.on("resize", function () {
+ _this.width = _this.$.parent().width();
+ _this.$.css({ width: _this.width });
+ });
+ this.getWidgetAnnotations().forEach(function (_a) {
+ _a.on("enter", function () {
+ drawAnnotation(_a);
});
- });
- this.source.getAnnotations().on("found", highlightTitleAndDescription);
- this.source.getAnnotations().on("not-found", highlightTitleAndDescription);
- this.source.getAnnotations().on("search-cleared", highlightTitleAndDescription);
- IriSP.attachDndData(this.$.find("h3"), function() {
- return {
- title: currentAnnotation.title,
- description: currentAnnotation.description,
- image: currentAnnotation.thumbnail,
- uri: (typeof currentAnnotation.url !== "undefined"
- ? currentAnnotation.url
- : (document.location.href.replace(/#.*$/,'') + '#id=' + currentAnnotation.id)),
- text: '[' + currentAnnotation.begin.toString() + '] ' + currentAnnotation.title
- };
- });
-};
+ });
+ this.source.getAnnotations().on("found", highlightTitleAndDescription);
+ this.source
+ .getAnnotations()
+ .on("not-found", highlightTitleAndDescription);
+ this.source
+ .getAnnotations()
+ .on("search-cleared", highlightTitleAndDescription);
+ IriSP.attachDndData(this.$.find("h3"), function () {
+ return {
+ title: currentAnnotation.title,
+ description: currentAnnotation.description,
+ image: currentAnnotation.thumbnail,
+ uri:
+ typeof currentAnnotation.url !== "undefined"
+ ? currentAnnotation.url
+ : document.location.href.replace(/#.*$/, "") +
+ "#id=" +
+ currentAnnotation.id,
+ text:
+ "[" +
+ currentAnnotation.begin.toString() +
+ "] " +
+ currentAnnotation.title,
+ };
+ });
+ }
-IriSP.Widgets.Annotation.prototype.sendBounds = function() {
- this.player.trigger("Annotation.boundsChanged",this.bounds);
-};
-
-IriSP.Widgets.Annotation.prototype.drawAnnotation = function(_annotation) {
- this.lastAnnotation = _annotation.id;
-
-};
+ sendBounds() {
+ this.player.trigger("Annotation.boundsChanged", this.bounds);
+ }
-IriSP.Widgets.Annotation.prototype.hide = function() {
- this.$.slideUp();
-};
+ drawAnnotation(_annotation) {
+ this.lastAnnotation = _annotation.id;
+ }
+
+ hide() {
+ this.$.slideUp();
+ }
-IriSP.Widgets.Annotation.prototype.show = function() {
- this.$.slideDown();
-};
+ show() {
+ this.$.slideDown();
+ }
-IriSP.Widgets.Annotation.prototype.toggleSize = function() {
- if (this.minimized) {
+ toggleSize() {
+ if (this.minimized) {
this.maximize();
- } else {
+ } else {
this.minimize();
+ }
}
-};
+
+ minimize() {
+ this.minimized = true;
+ this.$.find(".Ldt-Annotation-Inner").addClass("Ldt-Annotation-Minimized");
+ }
-IriSP.Widgets.Annotation.prototype.minimize = function() {
- this.minimized = true;
- this.$.find('.Ldt-Annotation-Inner').addClass("Ldt-Annotation-Minimized");
-};
+ maximize() {
+ this.minimized = false;
+ this.$.find(".Ldt-Annotation-Inner").removeClass(
+ "Ldt-Annotation-Minimized"
+ );
+ }
+ };
+}
-IriSP.Widgets.Annotation.prototype.maximize = function() {
- this.minimized = false;
- this.$.find('.Ldt-Annotation-Inner').removeClass("Ldt-Annotation-Minimized");
-};
+export { Annotation , annotationStyles };
\ No newline at end of file