--- a/src/widgets/Markers.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/Markers.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,632 +1,789 @@
+import Mustache from "mustache";
+import jQuery from "jquery";
-IriSP.Widgets.Markers = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-};
+import markersStyles from "./Markers.module.css";
-IriSP.Widgets.Markers.prototype = new IriSP.Widgets.Widget();
+const Markers = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
+ }
-IriSP.Widgets.Markers.prototype.defaults = {
- pre_draw_callback: function(){
+ static defaults = {
+ pre_draw_callback: function () {
return this.importUsers();
- },
- annotation_type: "markers",
- line_height: 8,
- background: "#e0e0e0",
- marker_color: "#ff80fc",
- placeholder_color: "#ffffff",
- hover_color: "#e15581",
- selected_color: "#74d600",
- ball_radius: 4,
- pause_on_write: true,
- play_on_submit: true,
- api_serializer: "ldt_annotate",
- api_endpoint_template_create: "",
- api_endpoint_template_edit: "",
- api_endpoint_template_delete: "",
- api_method_create: "POST",
- api_method_edit: "PUT",
- api_method_delete: "DELETE",
- project_id: "",
- creator_name: "",
- after_send_timeout: 0,
- markers_gap: 2000,
- allow_empty_markers: false,
- close_after_send: false,
- custom_send_button: false,
- custom_cancel_button: false,
- preview_mode: false,
- filter_per_user: false,
- api_users_endpoint: "",
- make_username_string_function: function(params){
+ },
+ annotation_type: "markers",
+ line_height: 8,
+ background: "#e0e0e0",
+ marker_color: "#ff80fc",
+ placeholder_color: "#ffffff",
+ hover_color: "#e15581",
+ selected_color: "#74d600",
+ ball_radius: 4,
+ pause_on_write: true,
+ play_on_submit: true,
+ api_serializer: "ldt_annotate",
+ api_endpoint_template_create: "",
+ api_endpoint_template_edit: "",
+ api_endpoint_template_delete: "",
+ api_method_create: "POST",
+ api_method_edit: "PUT",
+ api_method_delete: "DELETE",
+ project_id: "",
+ creator_name: "",
+ after_send_timeout: 0,
+ markers_gap: 2000,
+ allow_empty_markers: false,
+ close_after_send: false,
+ custom_send_button: false,
+ custom_cancel_button: false,
+ preview_mode: false,
+ filter_per_user: false,
+ api_users_endpoint: "",
+ make_username_string_function: function (params) {
return params.username ? params.username : "Anonymous";
- },
- hide_if_empty: false,
-};
+ },
+ hide_if_empty: false,
+ };
-IriSP.Widgets.Markers.prototype.template =
- '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">'
- + '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>'
- + '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>'
- + '</div>'
- + '<div class="Ldt-Markers-Inputs">'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">'
- + '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>'
- + '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>'
- + '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">✖</div>{{/preview_mode}}'
- + '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">✖</div>{{/preview_mode}}'
- + '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}'
- + '<div class="Ldt-Markers-Info"></div>'
- + '</div>'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">'
- + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>'
- + '</div>'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">'
- + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
- + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>'
- + '</div>'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">'
- + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
- + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>'
- + '</div>'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">'
- + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
- + '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>'
- + '</div>'
- + '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">'
- + '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>'
- + '<div class="Ldt-Markers-Screen-InnerBox">'
- + '{{l10n.delete_text}} '
- + '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> '
- + '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>'
- + '</div>'
- + '</div>'
- + '</div>';
+ static template =
+ '<div class="Ldt-Markers-Display" style="height:{{line_height}}px;">' +
+ '<div class="Ldt-Markers-List" style="height:{{line_height}}px; position: relative;"></div>' +
+ '<div class="Ldt-Markers-Position" style="height: {{line_height}}px; top: -{{line_height}};"></div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Inputs">' +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenMain">' +
+ '<div class="Ldt-Markers-RoundButton Ldt-Markers-CannotCreate" title="{{#preview_mode}}{{l10n.preview_mode_submit}}{{/preview_mode}}{{^preview_mode}}{{l10n.cannot_create}}{{/preview_mode}}">+</div>' +
+ '<div class="Ldt-Markers-RoundButton Ldt-Markers-Create">+</div>' +
+ '{{^preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-Delete">✖</div>{{/preview_mode}}' +
+ '{{#preview_mode}}<div class="Ldt-Markers-RoundButton Ldt-Markers-PreviewDelete" title="{{l10n.preview_mode_delete}}">✖</div>{{/preview_mode}}' +
+ '{{#filter_per_user}}{{#preview_mode}}<select class="Ldt-Markers-userFilter-dropdown" id="Ldt-Markers-userFilter"></select>{{/preview_mode}}{{/filter_per_user}}' +
+ '<div class="Ldt-Markers-Info"></div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSending">' +
+ '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.wait_while_processing}}</div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenSuccess">' +
+ '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' +
+ '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.annotation_saved}}</div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenDeleteSuccess">' +
+ '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' +
+ '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.delete_saved}}</div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenFailure">' +
+ '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' +
+ '<div class="Ldt-Markers-Screen-InnerBox">{{l10n.error_while_contacting}}</div>' +
+ "</div>" +
+ '<div class="Ldt-Markers-Screen Ldt-Markers-ScreenConfirmDelete">' +
+ '<a title="{{l10n.close_widget}}" class="Ldt-Markers-Close" href="#"></a>' +
+ '<div class="Ldt-Markers-Screen-InnerBox">' +
+ "{{l10n.delete_text}} " +
+ '<a class="Ldt-Markers-Screen-SubmitDelete">{{l10n.submit_delete}}</a> ' +
+ '<a class="Ldt-Markers-Screen-CancelDelete">{{l10n.cancel}}</a>' +
+ "</div>" +
+ "</div>" +
+ "</div>";
+ static markerTemplate =
+ '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
+ '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
+ "</div>";
-IriSP.Widgets.Markers.prototype.markerTemplate =
- '<div class="Ldt-Markers-Marker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
- '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
- '</div>';
-
-IriSP.Widgets.Markers.prototype.markerPlaceholderTemplate =
- '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
- '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
- '</div>';
+ static markerPlaceholderTemplate =
+ '<div class="Ldt-Markers-Marker Ldt-Markers-PlaceholderMarker" style="height:{{height}}px; left:{{left}}px; width: 2px; background-color: black;">' +
+ '<div class="Ldt-Markers-MarkerBall" style="background-color: {{marker_color}}; position: relative; width: {{ball_diameter}}px; height: {{ball_diameter}}px; left: {{ball_left}}px; top: {{ball_top}}px; border: 1px solid; border-radius: {{ball_radius}}px"></div>' +
+ "</div>";
-IriSP.Widgets.Markers.prototype.infoTemplate =
- '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +
- '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' +
- '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +
- '<div class="Ldt-Markers-Buttons">' +
- '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' +
- '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' +
- '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +
- '</div>' +
- '</div>{{/edit}}'
+ static infoTemplate =
+ '{{^edit}}<div class="Ldt-Markers-MarkerDescription">{{marker_info}}</div>{{/edit}}' +
+ '{{#edit}}<div class="Ldt-Markers-MarkerEdit">' +
+ '<textarea class="Ldt-Markers-MarkerTextArea" cols="60" rows="4">{{marker_info}}</textarea>' +
+ '<div class="Ldt-Markers-Buttons">' +
+ '{{^preview_mode}}<div class="Ldt-Markers-MarkerSend">{{send}}</div>{{/preview_mode}}' +
+ '{{#preview_mode}}<div class="Ldt-Markers-MarkerPreviewSend" title="{{preview_mode_text}}">{{send}}</div>{{/preview_mode}}' +
+ '<div class="Ldt-Markers-MarkerCancel">{{cancel}}</div>' +
+ "</div>" +
+ "</div>{{/edit}}";
-IriSP.Widgets.Markers.prototype.messages = {
- en : {
- send : "Send",
+ static messages = {
+ en: {
+ send: "Send",
submit_delete: "Delete",
- cancel : "Cancel",
+ cancel: "Cancel",
preview_mode_submit: "You cannot submit a marker in preview mode.",
preview_mode_delete: "You cannot delete a marker in preview mode",
- wait_while_processing: "Please wait while your annotation is being processed...",
+ wait_while_processing:
+ "Please wait while your annotation is being processed...",
delete_text: "The selected marker will be deleted. Continue?",
- error_while_contacting: "An error happened while contacting the server. Your annotation has not been saved.",
+ error_while_contacting:
+ "An error happened while contacting the server. Your annotation has not been saved.",
annotation_saved: "Thank you, your annotation has been saved.",
delete_saved: "Thank you, your annotation has been deleted",
close_widget: "Close",
- cannot_create: "Cannot create marker on this timecode"
- },
- fr : {
- send : "Envoyer",
+ cannot_create: "Cannot create marker on this timecode",
+ },
+ fr: {
+ send: "Envoyer",
submit_delete: "Supprimer",
- cancel : "Annuler",
- preview_mode_submit: "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu",
- preview_mode_delete: "Vous ne pouvez pas supprimer de marqueur en mode aperçu",
- wait_while_processing: "Veuillez patienter pendant le traitement de votre annotation...",
+ cancel: "Annuler",
+ preview_mode_submit:
+ "Vous ne pouvez pas créer ou éditer de marqueur en mode aperçu",
+ preview_mode_delete:
+ "Vous ne pouvez pas supprimer de marqueur en mode aperçu",
+ wait_while_processing:
+ "Veuillez patienter pendant le traitement de votre annotation...",
delete_text: "Le marqueur sélectionné sera supprimé. Continuer?",
- error_while_contacting: "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
+ error_while_contacting:
+ "Une erreur s'est produite en contactant le serveur. Votre annotation n'a pas été enregistrée.",
annotation_saved: "Merci, votre annotation a été enregistrée.",
delete_saved: "Merci, votre annotation a été supprimée",
close_widget: "Fermer",
- cannot_create: "Impossible de créer un marqueur sur ce timecode"
- }
-}
+ cannot_create: "Impossible de créer un marqueur sur ce timecode",
+ },
+ };
-IriSP.Widgets.Markers.prototype.importUsers = function(){
- if (this.filter_per_user && this.preview_mode){
+ importUsers() {
+ if (this.filter_per_user && this.preview_mode) {
this.usernames = Array();
- if (!this.source.users_data && this.api_users_endpoint){
- var _this = this,
- _list = this.getWidgetAnnotations(),
- usernames_list_string = "";
+ if (!this.source.users_data && this.api_users_endpoint) {
+ var _this = this,
+ _list = this.getWidgetAnnotations(),
+ usernames_list_string = "";
- _list.forEach(function(_annotation){
- if(_this.usernames.indexOf(_annotation.creator) == -1){
- _this.usernames.push(_annotation.creator);
- }
- });
- this.usernames.forEach(function(_username){
- usernames_list_string+=_username+","
- })
- usernames_list_string = usernames_list_string.substring(0, usernames_list_string.length - 1);
- _url = Mustache.to_html(this.api_users_endpoint, {usernames_list_string: encodeURIComponent(usernames_list_string), usernames_list_length: this.usernames.length});
- return IriSP.jQuery.ajax({
- async: false,
- url: _url,
- type: "GET",
- success: function(_data) {
- _this.source.users_data = _data.objects
- },
- error: function(_xhr, _error, _thrown) {
- console.log(_xhr)
- console.log(_error)
- console.log(_thrown)
- }
- })
+ _list.forEach(function (_annotation) {
+ if (_this.usernames.indexOf(_annotation.creator) == -1) {
+ _this.usernames.push(_annotation.creator);
+ }
+ });
+ this.usernames.forEach(function (_username) {
+ usernames_list_string += _username + ",";
+ });
+ usernames_list_string = usernames_list_string.substring(
+ 0,
+ usernames_list_string.length - 1
+ );
+ _url = Mustache.render(this.api_users_endpoint, {
+ usernames_list_string: encodeURIComponent(usernames_list_string),
+ usernames_list_length: this.usernames.length,
+ });
+ return jQuery.ajax({
+ async: false,
+ url: _url,
+ type: "GET",
+ success: function (_data) {
+ _this.source.users_data = _data.objects;
+ },
+ error: function (_xhr, _error, _thrown) {
+ console.log(_xhr);
+ console.log(_error);
+ console.log(_thrown);
+ },
+ });
}
+ }
}
-}
-IriSP.Widgets.Markers.prototype.draw = function(){
- var _this = this;
- this.renderTemplate();
- if ((!this.filter_per_user) || (!this.preview_mode) || (this.usernames.length <= 1)){
+ draw() {
+ var _this = this;
+ this.renderTemplate();
+ if (
+ !this.filter_per_user ||
+ !this.preview_mode ||
+ this.usernames.length <= 1
+ ) {
this.$.find(".Ldt-Markers-userFilter-dropdown").hide();
- }
- else {
- this.usernames.forEach(function(_user){
- var _users = _this.source.users_data.filter(function(_user_data){
- return _user_data.username == _user;
+ } else {
+ this.usernames.forEach(function (_user) {
+ var _users = _this.source.users_data.filter(function (_user_data) {
+ return _user_data.username == _user;
}),
- _user_data = {};
- if (_users.length == 0){
- _user_data.username = _user;
- }
- else{
- _user_data = _users[0];
- }
- _this.$.find(".Ldt-Markers-userFilter-dropdown").append("<option value='"+_user+"'>"+_this.make_name_string_function(_user_data)+"</option>")
- });
- this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("drawMarkers"))
- this.$.find(".Ldt-Markers-userFilter-dropdown").change(this.functionWrapper("clearSelectedMarker"))
-
- }
-
- this.markers = this.getWidgetAnnotations().filter(function(_ann) {
- return ((_ann.getDuration() == 0) || (_ann.begin == _ann.end));
- });
- if (this.hide_if_empty && this.markers.length <= 0){
+ _user_data = {};
+ if (_users.length == 0) {
+ _user_data.username = _user;
+ } else {
+ _user_data = _users[0];
+ }
+ _this.$.find(".Ldt-Markers-userFilter-dropdown").append(
+ "<option value='" +
+ _user +
+ "'>" +
+ _this.make_name_string_function(_user_data) +
+ "</option>"
+ );
+ });
+ this.$.find(".Ldt-Markers-userFilter-dropdown").change(
+ this.functionWrapper("drawMarkers")
+ );
+ this.$.find(".Ldt-Markers-userFilter-dropdown").change(
+ this.functionWrapper("clearSelectedMarker")
+ );
+ }
+
+ this.markers = this.getWidgetAnnotations().filter(function (_ann) {
+ return _ann.getDuration() == 0 || _ann.begin == _ann.end;
+ });
+ if (this.hide_if_empty && this.markers.length <= 0) {
this.$.hide();
- }
- else {
+ } else {
this.drawMarkers();
-
- this.$.find(".Ldt-Markers-Create").click(this.functionWrapper("onCreateClick"));
- this.$.find(".Ldt-Markers-Delete").click(this.functionWrapper("onDeleteClick"));
- this.$.find(".Ldt-Markers-RoundButton").hide()
- this.updateCreateButtonState(this.media.getCurrentTime())
- this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(this.functionWrapper("sendDelete"));
- this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function(){
- _this.showScreen("Main");
- _this.cancelEdit();
- })
+
+ this.$.find(".Ldt-Markers-Create").click(
+ this.functionWrapper("onCreateClick")
+ );
+ this.$.find(".Ldt-Markers-Delete").click(
+ this.functionWrapper("onDeleteClick")
+ );
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.updateCreateButtonState(this.media.getCurrentTime());
+ this.$.find(".Ldt-Markers-Screen-SubmitDelete").click(
+ this.functionWrapper("sendDelete")
+ );
+ this.$.find(".Ldt-Markers-Screen-CancelDelete").click(function () {
+ _this.showScreen("Main");
+ _this.cancelEdit();
+ });
this.showScreen("Main");
this.$.css({
- margin: "1px 0",
- background: this.background
+ margin: "1px 0",
+ background: this.background,
});
-
- this.$.find(".Ldt-Markers-Close").click(this.functionWrapper("revertToMainScreen"));
-
+
+ this.$.find(".Ldt-Markers-Close").click(
+ this.functionWrapper("revertToMainScreen")
+ );
+
this.onMediaEvent("timeupdate", this.functionWrapper("updatePosition"));
- this.onMediaEvent("timeupdate", this.functionWrapper("updateCreateButtonState"));
+ this.onMediaEvent(
+ "timeupdate",
+ this.functionWrapper("updateCreateButtonState")
+ );
this.onMediaEvent("play", this.functionWrapper("clearSelectedMarker"));
this.onMdpEvent("Markers.refresh", this.functionWrapper("drawMarkers"));
-
+
this.newMarkerTimeCode = 0;
this.selectedMarker = false;
+ }
}
-}
-
-IriSP.Widgets.Markers.prototype.updatePosition = function(_time) {
- var _x = Math.floor( this.width * _time / this.media.duration);
- this.$.find('.Ldt-Markers-Position').css({
- left: _x + "px"
- });
-}
+ updatePosition(_time) {
+ var _x = Math.floor((this.width * _time) / this.media.duration);
+ this.$.find(".Ldt-Markers-Position").css({
+ left: _x + "px",
+ });
+ }
-IriSP.Widgets.Markers.prototype.updateCreateButtonState = function(_time){
- _this = this
- var can_create = this.preview_mode? false : this.markers.every(function(_marker){
- return ((_time < (_marker.begin-_this.markers_gap))||(_time > (_marker.begin+_this.markers_gap)))
- });
- if (can_create){
- if ((this.$.find(".Ldt-Markers-Create").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){
- this.$.find(".Ldt-Markers-RoundButton").hide();
- this.$.find(".Ldt-Markers-Create").show();
+ updateCreateButtonState(_time) {
+ _this = this;
+ var can_create = this.preview_mode
+ ? false
+ : this.markers.every(function (_marker) {
+ return (
+ _time < _marker.begin - _this.markers_gap ||
+ _time > _marker.begin + _this.markers_gap
+ );
+ });
+ if (can_create) {
+ if (
+ this.$.find(".Ldt-Markers-Create").is(":hidden") &&
+ (this.$.find(".Ldt-Markers-Delete").is(":hidden") ||
+ this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))
+ ) {
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-Create").show();
}
+ } else {
+ if (
+ this.$.find(".Ldt-Markers-CannotCreate").is(":hidden") &&
+ (this.$.find(".Ldt-Markers-Delete").is(":hidden") ||
+ this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))
+ ) {
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-CannotCreate").show();
+ }
+ }
}
- else {
- if ((this.$.find(".Ldt-Markers-CannotCreate").is(":hidden"))&&(this.$.find(".Ldt-Markers-Delete").is(":hidden")||this.$.find(".Ldt-Markers-PreviewDelete").is(":hidden"))){
- this.$.find(".Ldt-Markers-RoundButton").hide();
- this.$.find(".Ldt-Markers-CannotCreate").show();
- }
- }
-}
-IriSP.Widgets.Markers.prototype.onCreateClick = function(){
- this.pauseOnWrite();
- if (!this.selectedMarker){
+ onCreateClick() {
+ this.pauseOnWrite();
+ if (!this.selectedMarker) {
this.newMarkerCurrentTime = this.media.getCurrentTime();
this.showPlaceholder(this.media.getCurrentTime());
this.startEdit();
+ }
}
-}
-IriSP.Widgets.Markers.prototype.onDeleteClick = function(){
- _this = this;
- this.pauseOnWrite();
- if(this.selectedMarker){
+ onDeleteClick() {
+ _this = this;
+ this.pauseOnWrite();
+ if (this.selectedMarker) {
this.showScreen("ConfirmDelete");
- }
- else {
+ } else {
// Click on "x" without a selected marker: back to initial state
this.cancelEdit();
- }
-}
-
-IriSP.Widgets.Markers.prototype.startEdit = function(){
- if (this.selectedMarker){
- _divHtml = Mustache.to_html(this.infoTemplate, {
- edit: true,
- preview_mode: this.preview_mode,
- preview_mode_text: this.l10n.preview_mode_submit,
- marker_info: this.selectedMarker.description,
- send: this.custom_send_button? this.custom_send_button : this.l10n.send,
- cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
- })
- }
- else {
- _divHtml = Mustache.to_html(this.infoTemplate, {
- edit: true,
- marker_info: "",
- preview_mode: this.preview_mode,
- preview_mode_text: this.l10n.preview_mode_submit,
- send: this.custom_send_button? this.custom_send_button : this.l10n.send,
- cancel: this.custom_cancel_button? this.custom_cancel_button :this.l10n.cancel
- })
+ }
}
- this.$.find(".Ldt-Markers-Info").html(_divHtml);
- this.$.find(".Ldt-Markers-MarkerSend").click(this.functionWrapper("onSubmit"));
- this.$.find(".Ldt-Markers-MarkerCancel").click(this.functionWrapper("cancelEdit"));
- this.$.find(".Ldt-Markers-MarkerTextArea").bind("change keyup input paste", this.functionWrapper("onDescriptionChange"));
- this.$.find(".Ldt-Markers-RoundButton").hide();
- if (this.preview_mode){
- this.$.find(".Ldt-Markers-PreviewDelete").show();
- }
- else {
- this.$.find(".Ldt-Markers-Delete").show();
- }
- this.editing = true;
-}
-IriSP.Widgets.Markers.prototype.cancelEdit = function(){
- if (this.selectedMarker){
+ startEdit() {
+ if (this.selectedMarker) {
+ _divHtml = Mustache.render(this.infoTemplate, {
+ edit: true,
+ preview_mode: this.preview_mode,
+ preview_mode_text: this.l10n.preview_mode_submit,
+ marker_info: this.selectedMarker.description,
+ send: this.custom_send_button
+ ? this.custom_send_button
+ : this.l10n.send,
+ cancel: this.custom_cancel_button
+ ? this.custom_cancel_button
+ : this.l10n.cancel,
+ });
+ } else {
+ _divHtml = Mustache.render(this.infoTemplate, {
+ edit: true,
+ marker_info: "",
+ preview_mode: this.preview_mode,
+ preview_mode_text: this.l10n.preview_mode_submit,
+ send: this.custom_send_button
+ ? this.custom_send_button
+ : this.l10n.send,
+ cancel: this.custom_cancel_button
+ ? this.custom_cancel_button
+ : this.l10n.cancel,
+ });
+ }
+ this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ this.$.find(".Ldt-Markers-MarkerSend").click(
+ this.functionWrapper("onSubmit")
+ );
+ this.$.find(".Ldt-Markers-MarkerCancel").click(
+ this.functionWrapper("cancelEdit")
+ );
+ this.$.find(".Ldt-Markers-MarkerTextArea").bind(
+ "change keyup input paste",
+ this.functionWrapper("onDescriptionChange")
+ );
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ if (this.preview_mode) {
+ this.$.find(".Ldt-Markers-PreviewDelete").show();
+ } else {
+ this.$.find(".Ldt-Markers-Delete").show();
+ }
+ this.editing = true;
+ }
+
+ cancelEdit() {
+ if (this.selectedMarker) {
// Click on "cancel" while editing a marker: back to visualization state
- _divHtml = Mustache.to_html(this.infoTemplate, {
- edit: false,
- marker_info: this.selectedMarker.description,
- })
+ _divHtml = Mustache.render(this.infoTemplate, {
+ edit: false,
+ marker_info: this.selectedMarker.description,
+ });
this.$.find(".Ldt-Markers-Info").html(_divHtml);
- if (!this.preview_mode){
- this.$.find(".Ldt-Markers-MarkerDescription").click(this.functionWrapper("startEdit"));
+ if (!this.preview_mode) {
+ this.$.find(".Ldt-Markers-MarkerDescription").click(
+ this.functionWrapper("startEdit")
+ );
}
- }
- else {
+ } else {
// Click on "cancel" while editing a marker: back to initial state
this.hidePlaceholder();
this.$.find(".Ldt-Markers-Info").html("");
- this.$.find(".Ldt-Markers-RoundButton").hide()
- this.$.find(".Ldt-Markers-Create").show()
- this.updateCreateButtonState(this.media.getCurrentTime())
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-Create").show();
+ this.updateCreateButtonState(this.media.getCurrentTime());
+ }
+ this.editing = false;
}
- this.editing = false;
-}
-IriSP.Widgets.Markers.prototype.onDescriptionChange = function(){
- // Returns false if the textarea is empty, true if there is text in it
- if(!this.allow_empty_markers){
+ onDescriptionChange() {
+ // Returns false if the textarea is empty, true if there is text in it
+ if (!this.allow_empty_markers) {
var _field = this.$.find(".Ldt-Markers-MarkerTextArea"),
- _contents = _field.val();
+ _contents = _field.val();
_field.css("border-color", !!_contents ? "#e87d9f" : "#ff0000");
if (!!_contents) {
- _field.removeClass("empty");
+ _field.removeClass("empty");
} else {
- _field.addClass("empty");
+ _field.addClass("empty");
}
this.pauseOnWrite();
return !!_contents;
- }
- else {
+ } else {
// If the widget is configured to allow to post empty markers, it returns true
- return true
+ return true;
+ }
}
-};
-IriSP.Widgets.Markers.prototype.pauseOnWrite = function(){
- if (this.pause_on_write && !this.media.getPaused()) {
+ pauseOnWrite() {
+ if (this.pause_on_write && !this.media.getPaused()) {
this.media.pause();
+ }
}
-};
-IriSP.Widgets.Markers.prototype.showScreen = function(_screenName) {
- this.$.find('.Ldt-Markers-Screen' + _screenName).show()
- .siblings().hide();
-}
+ showScreen(_screenName) {
+ this.$.find(".Ldt-Markers-Screen" + _screenName)
+ .show()
+ .siblings()
+ .hide();
+ }
-IriSP.Widgets.Markers.prototype.revertToMainScreen = function(){
- if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")){
+ revertToMainScreen() {
+ if (this.$.find(".Ldt-Markers-ScreenMain").is(":hidden")) {
this.showScreen("Main");
this.cancelEdit();
- if (this.selectedMarker){
- this.$.find(".Ldt-Markers-RoundButton").hide();
- if (this.preview_mode){
- this.$.find(".Ldt-Markers-PreviewDelete").show();
- }
- else {
- this.$.find(".Ldt-Markers-Delete").show();
- }
+ if (this.selectedMarker) {
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ if (this.preview_mode) {
+ this.$.find(".Ldt-Markers-PreviewDelete").show();
+ } else {
+ this.$.find(".Ldt-Markers-Delete").show();
+ }
+ } else {
+ this.$.find(".Ldt-Markers-RoundButton").hide();
+ this.$.find(".Ldt-Markers-Create").show();
+ this.updateCreateButtonState();
}
- else {
- this.$.find(".Ldt-Markers-RoundButton").hide();
- this.$.find(".Ldt-Markers-Create").show();
- this.updateCreateButtonState();
- }
+ }
}
-}
-IriSP.Widgets.Markers.prototype.hidePlaceholder = function(){
- this.$.find(".Ldt-Markers-PlaceholderMarker").remove();
-}
+ hidePlaceholder() {
+ this.$.find(".Ldt-Markers-PlaceholderMarker").remove();
+ }
-IriSP.Widgets.Markers.prototype.showPlaceholder = function(_time){
- var _scale = this.width / this.source.getDuration(),
- _left = _time * _scale -1,
+ showPlaceholder(_time) {
+ var _scale = this.width / this.source.getDuration(),
+ _left = _time * _scale - 1,
_data = {
- left: _left,
- height: this.line_height-1,
- ball_top: (this.ball_radius*2 > this.line_height) ? 0 : ((this.line_height - this.ball_radius*2)/2)-1,
- ball_radius: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius,
- ball_diameter: (this.ball_radius*2 > this.line_height) ? this.line_height/2 : this.ball_radius*2,
- ball_left: -this.ball_radius,
- marker_color: this.placeholder_color
+ left: _left,
+ height: this.line_height - 1,
+ ball_top:
+ this.ball_radius * 2 > this.line_height
+ ? 0
+ : (this.line_height - this.ball_radius * 2) / 2 - 1,
+ ball_radius:
+ this.ball_radius * 2 > this.line_height
+ ? this.line_height / 2
+ : this.ball_radius,
+ ball_diameter:
+ this.ball_radius * 2 > this.line_height
+ ? this.line_height / 2
+ : this.ball_radius * 2,
+ ball_left: -this.ball_radius,
+ marker_color: this.placeholder_color,
},
- _html = Mustache.to_html(this.markerPlaceholderTemplate, _data),
- _el = IriSP.jQuery(_html);
-
- list_$ = this.$.find(".Ldt-Markers-List");
- _el.appendTo(list_$);
-}
+ _html = Mustache.render(this.markerPlaceholderTemplate, _data),
+ _el = jQuery(_html);
-IriSP.Widgets.Markers.prototype.clearSelectedMarker = function(){
- if (this.selectedMarker){
+ list_$ = this.$.find(".Ldt-Markers-List");
+ _el.appendTo(list_$);
+ }
+
+ clearSelectedMarker() {
+ if (this.selectedMarker) {
var _divHtml = "";
-
+
this.selectedMarker = false;
this.$.find(".Ldt-Markers-Info").html(_divHtml);
this.$.find(".Ldt-Markers-RoundButton").hide();
this.$.find(".Ldt-Markers-Create").show();
this.$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
- this.updateCreateButtonState(this.media.getCurrentTime())
+ this.updateCreateButtonState(this.media.getCurrentTime());
+ }
}
-}
-IriSP.Widgets.Markers.prototype.drawMarkers = function(){
- var _this = this,
+ drawMarkers() {
+ var _this = this,
_scale = this.width / this.source.getDuration(),
- list_$ = this.$.find('.Ldt-Markers-List'),
+ list_$ = this.$.find(".Ldt-Markers-List"),
_displayed_markers = this.markers;
- this.$.remove("Ldt-Markers-Marker");
- list_$.html("");
-
- if (this.filter_per_user && this.usernames.length > 1){
- var _username = this.$.find(".Ldt-Markers-userFilter-dropdown")[0].options[this.$.find(".Ldt-Markers-userFilter-dropdown")[0].selectedIndex].value;
- _displayed_markers = _displayed_markers.filter(function(_marker){
- return _marker.creator == _username;
- })
- }
-
- _displayed_markers.forEach(function(_marker){
- var _left = _marker.begin * _scale -1,
- _data = {
- left: _left,
- height: _this.line_height-1,
- ball_top: (_this.ball_radius*2 > _this.line_height) ? 0 : ((_this.line_height - _this.ball_radius*2)/2)-1,
- ball_radius: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius,
- ball_diameter: (_this.ball_radius*2 > _this.line_height) ? _this.line_height/2 : _this.ball_radius*2,
- ball_left: -_this.ball_radius,
- marker_color: ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))? _this.selected_color : _this.marker_color
- },
- _html = Mustache.to_html(_this.markerTemplate, _data),
- _el = IriSP.jQuery(_html);
-
- if ((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id)){
- _el.children().toggleClass("selected", true);
+ this.$.remove("Ldt-Markers-Marker");
+ list_$.html("");
+
+ if (this.filter_per_user && this.usernames.length > 1) {
+ var _username = this.$.find(".Ldt-Markers-userFilter-dropdown")[0]
+ .options[
+ this.$.find(".Ldt-Markers-userFilter-dropdown")[0].selectedIndex
+ ].value;
+ _displayed_markers = _displayed_markers.filter(function (_marker) {
+ return _marker.creator == _username;
+ });
+ }
+
+ _displayed_markers.forEach(function (_marker) {
+ var _left = _marker.begin * _scale - 1,
+ _data = {
+ left: _left,
+ height: _this.line_height - 1,
+ ball_top:
+ _this.ball_radius * 2 > _this.line_height
+ ? 0
+ : (_this.line_height - _this.ball_radius * 2) / 2 - 1,
+ ball_radius:
+ _this.ball_radius * 2 > _this.line_height
+ ? _this.line_height / 2
+ : _this.ball_radius,
+ ball_diameter:
+ _this.ball_radius * 2 > _this.line_height
+ ? _this.line_height / 2
+ : _this.ball_radius * 2,
+ ball_left: -_this.ball_radius,
+ marker_color:
+ _this.selectedMarker && _this.selectedMarker.id == _marker.id
+ ? _this.selected_color
+ : _this.marker_color,
+ },
+ _html = Mustache.render(_this.markerTemplate, _data),
+ _el = jQuery(_html);
+
+ if (_this.selectedMarker && _this.selectedMarker.id == _marker.id) {
+ _el.children().toggleClass("selected", true);
}
-
- _el.mouseover(function(){
- if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
- _el.children().css("background-color", _this.hover_color);
- };
- })
- .mouseout(function(){
- if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
- _el.children().css("background-color", _this.marker_color);
- };
- })
- .click(function(){
- _this.showScreen("Main");
- _this.cancelEdit();
- _this.hidePlaceholder();
- if (!((_this.selectedMarker)&&(_this.selectedMarker.id == _marker.id))){
- // if there either is no marker selected or we click a different marker
- list_$.find(".Ldt-Markers-MarkerBall").css("background-color", _this.marker_color)
- list_$.find(".Ldt-Markers-MarkerBall").toggleClass("selected", false);
- _el.children().toggleClass("selected", true);
- _el.children().css("background-color", _this.selected_color)
- _this.selectedMarker = _marker;
-
- _divHtml = Mustache.to_html(_this.infoTemplate, {
- edit: false,
- marker_info: _marker.description,
- })
-
- _this.$.find(".Ldt-Markers-Info").html(_divHtml);
- if (!_this.preview_mode){
- _this.$.find(".Ldt-Markers-MarkerDescription").click(_this.functionWrapper("startEdit"));
- }
- _this.$.find(".Ldt-Markers-RoundButton").hide();
- if (_this.preview_mode){
- _this.$.find(".Ldt-Markers-PreviewDelete").show();
- }
- else {
- _this.$.find(".Ldt-Markers-Delete").show();
- }
+
+ _el
+ .mouseover(function () {
+ if (
+ !(_this.selectedMarker && _this.selectedMarker.id == _marker.id)
+ ) {
+ _el.children().css("background-color", _this.hover_color);
+ }
+ })
+ .mouseout(function () {
+ if (
+ !(_this.selectedMarker && _this.selectedMarker.id == _marker.id)
+ ) {
+ _el.children().css("background-color", _this.marker_color);
+ }
+ })
+ .click(function () {
+ _this.showScreen("Main");
+ _this.cancelEdit();
+ _this.hidePlaceholder();
+ if (
+ !(_this.selectedMarker && _this.selectedMarker.id == _marker.id)
+ ) {
+ // if there either is no marker selected or we click a different marker
+ list_$
+ .find(".Ldt-Markers-MarkerBall")
+ .css("background-color", _this.marker_color);
+ list_$
+ .find(".Ldt-Markers-MarkerBall")
+ .toggleClass("selected", false);
+ _el.children().toggleClass("selected", true);
+ _el.children().css("background-color", _this.selected_color);
+ _this.selectedMarker = _marker;
+
+ _divHtml = Mustache.render(_this.infoTemplate, {
+ edit: false,
+ marker_info: _marker.description,
+ });
- }
- else {
- // if we click the currently selected marker, we unselect it
- _el.children().css("background-color", _this.hover_color);
- _this.clearSelectedMarker();
- }
-
- if (_this.selectedMarker) {
- // Only if we select a new marker do we pause video and time jump
- _this.media.pause();
- _marker.trigger("click");
- }
- })
- .appendTo(list_$);
- })
-}
+ _this.$.find(".Ldt-Markers-Info").html(_divHtml);
+ if (!_this.preview_mode) {
+ _this.$.find(".Ldt-Markers-MarkerDescription").click(
+ _this.functionWrapper("startEdit")
+ );
+ }
+ _this.$.find(".Ldt-Markers-RoundButton").hide();
+ if (_this.preview_mode) {
+ _this.$.find(".Ldt-Markers-PreviewDelete").show();
+ } else {
+ _this.$.find(".Ldt-Markers-Delete").show();
+ }
+ } else {
+ // if we click the currently selected marker, we unselect it
+ _el.children().css("background-color", _this.hover_color);
+ _this.clearSelectedMarker();
+ }
+ if (_this.selectedMarker) {
+ // Only if we select a new marker do we pause video and time jump
+ _this.media.pause();
+ _marker.trigger("click");
+ }
+ })
+ .appendTo(list_$);
+ });
+ }
-IriSP.Widgets.Markers.prototype.onSubmit = function(){
-
- /* If mandatory fields are empty, we cancel the sending */
- if (!this.allow_empty_markers && !this.onDescriptionChange()){
+ onSubmit() {
+ /* If mandatory fields are empty, we cancel the sending */
+ if (!this.allow_empty_markers && !this.onDescriptionChange()) {
return false;
- }
-
- /* We pause the video if it's still playing */
- if (!this.media.getPaused()){
+ }
+
+ /* We pause the video if it's still playing */
+ if (!this.media.getPaused()) {
this.media.pause();
- }
-
- var _this = this,
- _exportedAnnotations = new IriSP.Model.List(this.player.sourceManager), /* We create a List to send to the server that will contains the annotation */
- _export = this.player.sourceManager.newLocalSource({serializer: IriSP.serializers[this.api_serializer]}), /* We create a source object using a specific serializer for export */
- _annotationTypes = this.source.getAnnotationTypes().searchByTitle(this.annotation_type, true), /* We get the AnnotationType in which the annotation will be added */
- _annotationType = (_annotationTypes.length ? _annotationTypes[0] : new IriSP.Model.AnnotationType(false, _export)); /* If it doesn't already exists, we create it */
- if (this.selectedMarker){
+ }
+
+ var _this = this,
+ _exportedAnnotations = new ns.Model.List(
+ this.player.sourceManager
+ ) /* We create a List to send to the server that will contains the annotation */,
+ _export = this.player.sourceManager.newLocalSource({
+ serializer: ns.serializers[this.api_serializer],
+ }) /* We create a source object using a specific serializer for export */,
+ _annotationTypes = this.source
+ .getAnnotationTypes()
+ .searchByTitle(
+ this.annotation_type,
+ true
+ ) /* We get the AnnotationType in which the annotation will be added */,
+ _annotationType = _annotationTypes.length
+ ? _annotationTypes[0]
+ : new ns.Model.AnnotationType(
+ false,
+ _export
+ ); /* If it doesn't already exists, we create it */
+ if (this.selectedMarker) {
var _annotation = this.selectedMarker,
- _url = Mustache.to_html(this.api_endpoint_template_edit, {annotation_id: this.selectedMarker ? this.selectedMarker.id : ""});
- _annotation.source = _export
- _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(); /* Description field */
- }
- else {
- var _annotation = new IriSP.Model.Annotation(false, _export),
- _url = Mustache.to_html(this.api_endpoint_template_create);
-
+ _url = Mustache.render(this.api_endpoint_template_edit, {
+ annotation_id: this.selectedMarker ? this.selectedMarker.id : "",
+ });
+ _annotation.source = _export;
+ _annotation.description = this.$.find(
+ ".Ldt-Markers-MarkerTextArea"
+ ).val(); /* Description field */
+ } else {
+ var _annotation = new ns.Model.Annotation(false, _export),
+ _url = Mustache.render(this.api_endpoint_template_create);
+
/* If we created an AnnotationType on the spot ... */
if (!_annotationTypes.length) {
- /* ... We must not send its id to the server ... */
- _annotationType.dont_send_id = true;
- /* ... And we must include its title. */
- _annotationType.title = this.annotation_type;
+ /* ... We must not send its id to the server ... */
+ _annotationType.dont_send_id = true;
+ /* ... And we must include its title. */
+ _annotationType.title = this.annotation_type;
}
-
- _annotation.setMedia(this.source.currentMedia.id); /* Annotated media ID */
- if (!this.selectedMarker){
- _annotation.setBegin(this.newMarkerCurrentTime);
- _annotation.setEnd(this.newMarkerCurrentTime);
+
+ _annotation.setMedia(
+ this.source.currentMedia.id
+ ); /* Annotated media ID */
+ if (!this.selectedMarker) {
+ _annotation.setBegin(this.newMarkerCurrentTime);
+ _annotation.setEnd(this.newMarkerCurrentTime);
}
- _annotation.setAnnotationType(_annotationType.id); /* AnnotationType ID */
- if (this.project_id != ""){
- /* Project id, only if it's been specifiec in the config */
- _annotation.project_id = this.project_id;
+ _annotation.setAnnotationType(
+ _annotationType.id
+ ); /* AnnotationType ID */
+ if (this.project_id != "") {
+ /* Project id, only if it's been specifiec in the config */
+ _annotation.project_id = this.project_id;
}
_annotation.created = new Date(); /* Creation date */
- _annotation.description = this.$.find(".Ldt-Markers-MarkerTextArea").val(); /* Description field */
+ _annotation.description = this.$.find(
+ ".Ldt-Markers-MarkerTextArea"
+ ).val(); /* Description field */
_annotation.creator = this.creator_name;
- }
- _annotation.project_id = this.project_id;
-
- _exportedAnnotations.push(_annotation); /* We add the annotation in the list to export */
- _export.addList("annotation",_exportedAnnotations); /* We add the list to the source object */
-
- /* We send the AJAX request to the server ! */
- IriSP.jQuery.ajax({
+ }
+ _annotation.project_id = this.project_id;
+
+ _exportedAnnotations.push(
+ _annotation
+ ); /* We add the annotation in the list to export */
+ _export.addList(
+ "annotation",
+ _exportedAnnotations
+ ); /* We add the list to the source object */
+
+ /* We send the AJAX request to the server ! */
+ jQuery.ajax({
url: _url,
- type: this.selectedMarker ? this.api_method_edit : this.api_method_create,
- contentType: 'application/json',
+ type: this.selectedMarker
+ ? this.api_method_edit
+ : this.api_method_create,
+ contentType: "application/json",
data: _export.serialize(),
- success: function(_data) {
- _this.showScreen('Success');
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- _export.getAnnotations().removeElement(_annotation, true); /* We delete the sent annotation to avoid redundancy */
- _export.deSerialize(_data); /* Data deserialization */
- _annotation.id = _data.id;
- _this.source.merge(_export); /* We merge the deserialized data with the current source data */
- if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) {
- _this.media.play();
- }
- _this.markers.push(_annotation);
- _this.selectedMarker = _annotation;
- _this.drawMarkers();
- _this.player.trigger("AnnotationsList.refresh");
- _this.player.trigger("Markers.refresh");
+ success: function (_data) {
+ _this.showScreen("Success");
+ window.setTimeout(
+ _this.functionWrapper("revertToMainScreen"),
+ _this.after_send_timeout || 5000
+ );
+ _export
+ .getAnnotations()
+ .removeElement(
+ _annotation,
+ true
+ ); /* We delete the sent annotation to avoid redundancy */
+ _export.deSerialize(_data); /* Data deserialization */
+ _annotation.id = _data.id;
+ _this.source.merge(
+ _export
+ ); /* We merge the deserialized data with the current source data */
+ if (
+ _this.pause_on_write &&
+ _this.media.getPaused() &&
+ _this.play_on_submit
+ ) {
+ _this.media.play();
+ }
+ _this.markers.push(_annotation);
+ _this.selectedMarker = _annotation;
+ _this.drawMarkers();
+ _this.player.trigger("AnnotationsList.refresh");
+ _this.player.trigger("Markers.refresh");
+ },
+ error: function (_xhr, _error, _thrown) {
+ ns.log("Error when sending annotation", _thrown);
+ _export.getAnnotations().removeElement(_annotation, true);
+ _this.showScreen("Failure");
+ window.setTimeout(
+ _this.functionWrapper("revertToMainScreen"),
+ _this.after_send_timeout || 5000
+ );
},
- error: function(_xhr, _error, _thrown) {
- IriSP.log("Error when sending annotation", _thrown);
- _export.getAnnotations().removeElement(_annotation, true);
- _this.showScreen('Failure');
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- }
- });
- this.showScreen('Sending');
-
- return false;
+ });
+ this.showScreen("Sending");
+
+ return false;
+ }
+
+ sendDelete() {
+ _this = this;
+ _url = Mustache.render(this.api_endpoint_template_delete, {
+ annotation_id: this.selectedMarker ? this.selectedMarker.id : "",
+ project_id: this.selectedMarker.project_id
+ ? this.selectedMarker.project_id
+ : this.project_id,
+ });
+ jQuery.ajax({
+ url: _url,
+ type: this.api_method_delete,
+ contentType: "application/json",
+ success: function (_data) {
+ _this.showScreen("DeleteSuccess");
+ window.setTimeout(
+ _this.functionWrapper("revertToMainScreen"),
+ _this.after_send_timeout || 5000
+ );
+ if (
+ _this.pause_on_write &&
+ _this.media.getPaused() &&
+ _this.play_on_submit
+ ) {
+ _this.media.play();
+ }
+ _this.markers.removeElement(_this.selectedMarker);
+ _this.selectedMarker = false;
+ _this.player.trigger("AnnotationsList.refresh");
+ _this.player.trigger("Markers.refresh");
+ },
+ error: function (_xhr, _error, _thrown) {
+ ns.log("Error when sending annotation", _thrown);
+ _this.showScreen("Failure");
+ window.setTimeout(
+ _this.functionWrapper("revertToMainScreen"),
+ _this.after_send_timeout || 5000
+ );
+ },
+ });
+ this.showScreen("Sending");
+ }
+ };
};
-IriSP.Widgets.Markers.prototype.sendDelete = function(){
- _this = this;
- _url = Mustache.to_html(this.api_endpoint_template_delete, {annotation_id: this.selectedMarker ? this.selectedMarker.id : "", project_id: this.selectedMarker.project_id? this.selectedMarker.project_id : this.project_id});
- IriSP.jQuery.ajax({
- url: _url,
- type: this.api_method_delete,
- contentType: 'application/json',
- success: function(_data) {
- _this.showScreen('DeleteSuccess');
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- if (_this.pause_on_write && _this.media.getPaused() && _this.play_on_submit) {
- _this.media.play();
- }
- _this.markers.removeElement(_this.selectedMarker);
- _this.selectedMarker = false
- _this.player.trigger("AnnotationsList.refresh");
- _this.player.trigger("Markers.refresh");
- },
- error: function(_xhr, _error, _thrown) {
- IriSP.log("Error when sending annotation", _thrown);
- _this.showScreen('Failure');
- window.setTimeout(_this.functionWrapper("revertToMainScreen"),(_this.after_send_timeout || 5000));
- }
- });
- this.showScreen("Sending")
-}
\ No newline at end of file
+export { Markers, markersStyles };