--- a/src/widgets/AnnotationsController.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/AnnotationsController.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,219 +1,220 @@
-/*
+/*
* Widget that ties AnnotationList and CreateAnnotation together
* using buttons to hide/show AnnotationList and CreateAnnotation widgets.
- *
+ *
*/
+import annotationsControllerStyles from "./AnnotationsController.module.css";
+
+const AnnotationsController = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
-IriSP.Widgets.AnnotationsController = function(player, config){
- IriSP.Widgets.Widget.call(this, player, config);
-};
-
-IriSP.Widgets.AnnotationsController.prototype = new IriSP.Widgets.Widget();
+ static defaults = {
+ // If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
+ display_or_write: false,
+ toggle_widgets: false,
+ starts_hidden: false,
+ hide_without_segment: false,
+ hide_when_writing: true,
+ starting_widget: false,
+ always_show_widget: false,
+ segments_annotation_type: "chap",
+ custom_write_text: false,
+ custom_display_text: false,
+ };
-IriSP.Widgets.AnnotationsController.prototype.defaults = {
- // If true, displaying AnnotationList will hide CreateAnnotation and vice versa.
- display_or_write: false,
- toggle_widgets: false,
- starts_hidden: false,
- hide_without_segment: false,
- hide_when_writing: true,
- starting_widget: false,
- always_show_widget: false,
- segments_annotation_type: "chap",
- custom_write_text: false,
- custom_display_text: false,
-};
+ static template =
+ "<div class='Ldt-AnnotationsController'>" +
+ "<div class='Ldt-AnnotationsController-ButtonsContainer'>" +
+ " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{#custom_write_text}}{{/custom_write_text}}{{custom_write_text}}{{^custom_write_text}}{{l10n.write}}{{/custom_write_text}}</div>" +
+ " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{#custom_display_text}}{{/custom_display_text}}{{custom_display_text}}{{^custom_display_text}}{{l10n.display}}{{/custom_display_text}}</div>" +
+ "</div>" +
+ "</div>";
-IriSP.Widgets.AnnotationsController.prototype.template =
- "<div class='Ldt-AnnotationsController'>"
- + "<div class='Ldt-AnnotationsController-ButtonsContainer'>"
- + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowCreateAnnotationButton'>{{#custom_write_text}}{{/custom_write_text}}{{custom_write_text}}{{^custom_write_text}}{{l10n.write}}{{/custom_write_text}}</div>"
- + " <div class='Ldt-AnnotationsController-Button Ldt-AnnotationsController-ShowAnnotationsListButton'>{{#custom_display_text}}{{/custom_display_text}}{{custom_display_text}}{{^custom_display_text}}{{l10n.display}}{{/custom_display_text}}</div>"
- + "</div>"
- + "</div>"
+ static messages = {
+ en: {
+ write: "Write",
+ display: "Display",
+ },
+ fr: {
+ write: "Ecrire",
+ display: "Voir",
+ },
+ };
-IriSP.Widgets.AnnotationsController.prototype.messages = {
- en : {
- write : "Write",
- display : "Display",
- },
- fr : {
- write : "Ecrire",
- display : "Voir"
- }
-};
+ draw() {
+ this.renderTemplate();
+ var _this = this;
+ this.element_$ = this.$.find(".Ldt-AnnotationsController");
-IriSP.Widgets.AnnotationsController.prototype.draw = function() {
- this.renderTemplate();
- var _this = this;
- this.element_$ = this.$.find(".Ldt-AnnotationsController")
-
- this.displayButton_$ = this.$.find(".Ldt-AnnotationsController-ShowAnnotationsListButton");
- this.writeButton_$ = this.$.find(".Ldt-AnnotationsController-ShowCreateAnnotationButton");
-
- this.writeButton_$.click(function(){
- if (!_this.writeButton_$.hasClass("selected")){
- _this.player.trigger("CreateAnnotation.show")
- if (_this.display_or_write){
- _this.player.trigger("AnnotationsList.hide");
- }
- }
- else {
- _this.player.trigger("CreateAnnotation.hide")
- if (_this.toggle_widgets){
- _this.player.trigger("AnnotationsList.show")
- }
- else if (_this.display_or_write){
- _this.player.trigger("AnnotationsList.hide");
- }
+ this.displayButton_$ = this.$.find(
+ ".Ldt-AnnotationsController-ShowAnnotationsListButton"
+ );
+ this.writeButton_$ = this.$.find(
+ ".Ldt-AnnotationsController-ShowCreateAnnotationButton"
+ );
+
+ this.writeButton_$.click(function () {
+ if (!_this.writeButton_$.hasClass("selected")) {
+ _this.player.trigger("CreateAnnotation.show");
+ if (_this.display_or_write) {
+ _this.player.trigger("AnnotationsList.hide");
+ }
+ } else {
+ _this.player.trigger("CreateAnnotation.hide");
+ if (_this.toggle_widgets) {
+ _this.player.trigger("AnnotationsList.show");
+ } else if (_this.display_or_write) {
+ _this.player.trigger("AnnotationsList.hide");
+ }
}
- });
- this.displayButton_$.click(function(){
- if (!_this.displayButton_$.hasClass("selected")){
- _this.player.trigger("AnnotationsList.show")
- if (_this.display_or_write){
- _this.player.trigger("CreateAnnotation.hide");
- }
- }
- else {
- _this.player.trigger("AnnotationsList.hide")
- if (_this.toggle_widgets){
- _this.player.trigger("CreateAnnotation.show")
- }
- else if (_this.display_or_write){
- _this.player.trigger("CreateAnnotation.hide");
- }
+ });
+ this.displayButton_$.click(function () {
+ if (!_this.displayButton_$.hasClass("selected")) {
+ _this.player.trigger("AnnotationsList.show");
+ if (_this.display_or_write) {
+ _this.player.trigger("CreateAnnotation.hide");
+ }
+ } else {
+ _this.player.trigger("AnnotationsList.hide");
+ if (_this.toggle_widgets) {
+ _this.player.trigger("CreateAnnotation.show");
+ } else if (_this.display_or_write) {
+ _this.player.trigger("CreateAnnotation.hide");
+ }
}
-
- })
-
- if(this.hide_without_segment){
- this.onMediaEvent("timeupdate", function(){
- _this.refresh();
- })
- this.onMediaEvent("settimerange", function(_timeRange){
- _this.refresh(_timeRange);
- })
- this.segments = this.source.getAnnotationsByTypeTitle(this.segments_annotation_type)
- this.currentSegment = false
- }
-
+ });
- this.createAnnotationEnabled = false;
- this.onMdpEvent("CreateAnnotation.hide", function(){
- if (_this.hide_when_writing){
- _this.show()
+ if (this.hide_without_segment) {
+ this.onMediaEvent("timeupdate", function () {
+ _this.refresh();
+ });
+ this.onMediaEvent("settimerange", function (_timeRange) {
+ _this.refresh(_timeRange);
+ });
+ this.segments = this.source.getAnnotationsByTypeTitle(
+ this.segments_annotation_type
+ );
+ this.currentSegment = false;
+ }
+
+ this.createAnnotationEnabled = false;
+ this.onMdpEvent("CreateAnnotation.hide", function () {
+ if (_this.hide_when_writing) {
+ _this.show();
}
_this.createAnnotationEnabled = false;
_this.writeButton_$.toggleClass("selected", false);
- })
- this.onMdpEvent("CreateAnnotation.show", function(){
- if (_this.hide_when_writing){
- _this.hide()
+ });
+ this.onMdpEvent("CreateAnnotation.show", function () {
+ if (_this.hide_when_writing) {
+ _this.hide();
}
_this.createAnnotationEnabled = true;
_this.writeButton_$.toggleClass("selected", true);
- })
- this.onMdpEvent("AnnotationsList.hide", function(){
+ });
+ this.onMdpEvent("AnnotationsList.hide", function () {
_this.displayButton_$.toggleClass("selected", false);
- })
- this.onMdpEvent("AnnotationsList.show", function(){
+ });
+ this.onMdpEvent("AnnotationsList.show", function () {
_this.displayButton_$.toggleClass("selected", true);
- })
-
- if (this.starts_hidden) {
- this.visible = true
+ });
+
+ if (this.starts_hidden) {
+ this.visible = true;
this.hide();
+ } else {
+ this.visible = false;
+ this.show();
+ }
+
+ if (this.starting_widget && this.visible) {
+ if (this.starting_widget == "AnnotationsList") {
+ this.player.trigger("AnnotationsList.show");
+ } else if (this.starting_widget == "CreateAnnotation") {
+ this.player.trigger("CreateAnnotation.show");
+ }
+ }
}
- else{
- this.visible = false
- this.show();
+
+ refresh(_timeRange) {
+ _timeRange = typeof _timeRange !== "undefined" ? _timeRange : false;
+
+ if (!_timeRange) {
+ if (this.media.getTimeRange()) {
+ _timeRange = this.media.getTimeRange();
+ }
+ }
+
+ if (this.hide_without_segment) {
+ if (!_timeRange && !this.media.getTimeRange()) {
+ _currentTime = this.media.getCurrentTime();
+ _currentSegments = this.segments.filter(function (_segment) {
+ return (
+ _currentTime >= _segment.begin && _currentTime <= _segment.end
+ );
+ });
+ if (_currentSegments.length > 0) {
+ currentSegment = true;
+ } else {
+ currentSegment = false;
+ }
+ } else {
+ var _timeRangeBegin = _timeRange[0],
+ _timeRangeEnd = _timeRange[1];
+ _currentSegments = this.segments.filter(function (_segment) {
+ return (
+ _timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end
+ );
+ });
+ if (_currentSegments.length > 0) {
+ currentSegment = true;
+ } else {
+ currentSegment = false;
+ }
+ }
+ if (!currentSegment && _currentSegments.length == 0) {
+ if (this.visible || this.hide_when_writing) {
+ this.writeButton_$.toggleClass("selected", false);
+ this.displayButton_$.toggleClass("selected", false);
+ this.player.trigger("CreateAnnotation.hide");
+ this.player.trigger("AnnotationsList.hide");
+ this.hide();
+ }
+ } else {
+ if (!this.visible) {
+ if (!this.createAnnotationEnabled) {
+ this.show();
+ }
+ this.writeButton_$.toggleClass("selected", false);
+ this.displayButton_$.toggleClass("selected", false);
+ if (this.starting_widget == "AnnotationsList") {
+ this.player.trigger("AnnotationsList.show");
+ }
+ if (this.starting_widget == "CreateAnnotation") {
+ this.player.trigger("CreateAnnotation.show");
+ }
+ }
+ }
+ }
}
-
- if (this.starting_widget && this.visible){
- if (this.starting_widget == "AnnotationsList"){
- this.player.trigger("AnnotationsList.show")
- }
- else if (this.starting_widget == "CreateAnnotation"){
- this.player.trigger("CreateAnnotation.show")
- }
+
+ hide() {
+ if (this.visible) {
+ this.visible = false;
+ this.element_$.hide();
+ }
}
-
+
+ show() {
+ if (!this.visible) {
+ this.visible = true;
+ this.element_$.show();
+ }
+ }
+ };
};
-IriSP.Widgets.AnnotationsController.prototype.refresh = function(_timeRange){
- _timeRange = typeof _timeRange !== 'undefined' ? _timeRange : false ;
-
- if(!_timeRange){
- if (this.media.getTimeRange()){
- _timeRange = this.media.getTimeRange();
- }
- }
-
- if (this.hide_without_segment){
- if (!_timeRange && !this.media.getTimeRange()){
- _currentTime = this.media.getCurrentTime()
- _currentSegments = this.segments.filter(function(_segment){
- return (_currentTime >= _segment.begin && _currentTime <= _segment.end)
- });
- if(_currentSegments.length > 0){
- currentSegment = true;
- }
- else {
- currentSegment = false;
- }
- }
- else {
- var _timeRangeBegin = _timeRange[0],
- _timeRangeEnd = _timeRange[1];
- _currentSegments = this.segments.filter(function(_segment){
- return (_timeRangeBegin == _segment.begin && _timeRangeEnd == _segment.end)
- });
- if(_currentSegments.length > 0){
- currentSegment = true;
- }
- else {
- currentSegment = false;
- }
- }
- if (!currentSegment && _currentSegments.length == 0){
- if (this.visible || this.hide_when_writing){
- this.writeButton_$.toggleClass("selected", false);
- this.displayButton_$.toggleClass("selected", false);
- this.player.trigger("CreateAnnotation.hide");
- this.player.trigger("AnnotationsList.hide");
- this.hide();
- }
- }
- else {
- if (!this.visible){
- if (!this.createAnnotationEnabled){
- this.show();
- }
- this.writeButton_$.toggleClass("selected", false);
- this.displayButton_$.toggleClass("selected", false);
- if (this.starting_widget == "AnnotationsList"){
- this.player.trigger("AnnotationsList.show")
- }
- if (this.starting_widget == "CreateAnnotation"){
- this.player.trigger("CreateAnnotation.show")
- }
- }
-
- }
- }
-}
-
-IriSP.Widgets.AnnotationsController.prototype.hide = function() {
- if (this.visible){
- this.visible = false;
- this.element_$.hide();
- }
-}
-
-IriSP.Widgets.AnnotationsController.prototype.show = function() {
- if(!this.visible){
- this.visible = true;
- this.element_$.show();
- }
-}
+export { AnnotationsController, annotationsControllerStyles };