--- a/src/widgets/NoteTaking.js Sun Nov 12 22:07:33 2017 +0100
+++ b/src/widgets/NoteTaking.js Wed Sep 04 17:32:50 2024 +0200
@@ -1,91 +1,105 @@
/* This widget displays a note-taking view, that can be saved to localStorage */
-
-IriSP.Widgets.NoteTaking = function(player, config) {
- IriSP.Widgets.Widget.call(this, player, config);
-}
-
-IriSP.Widgets.NoteTaking.prototype = new IriSP.Widgets.Widget();
-
-IriSP.Widgets.NoteTaking.prototype.defaults = {
- // Id that will be used as localStorage key
- editable_storage: ""
-}
+import noteTakingStyles from "./NoteTaking.module.css";
+import jQuery from "jquery";
-IriSP.Widgets.NoteTaking.prototype.template = '<textarea class="Ldt-NoteTaking-Text"></textarea>';
-
-IriSP.Widgets.NoteTaking.prototype.draw = function() {
- var widget = this;
- var content;
- var $ = IriSP.jQuery;
-
- widget.renderTemplate();
- content = widget.$.find('.Ldt-NoteTaking-Text');
-
- function load_content() {
- $(content).val(window.localStorage[widget.editable_storage]);
- }
- function save_content() {
- window.localStorage[widget.editable_storage] = $(content).val();
+const NoteTaking = function (ns) {
+ return class extends ns.Widgets.Widget {
+ constructor(player, config) {
+ super(player, config);
}
- // Load current transcript
- if (window.localStorage[widget.editable_storage]) {
- load_content();
- }
-
- // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea
- $.fn.insertAtCaret = function(text) {
- return this.each(function() {
- if (this.selectionStart !== undefined) {
- // mozilla/netscape support
- var startPos = this.selectionStart,
- endPos = this.selectionEnd,
- scrollTop = this.scrollTop;
- this.value = this.value.substring(0, startPos) + text + this.value.substring(endPos, this.value.length);
- this.focus();
- this.selectionStart = startPos + text.length;
- this.selectionEnd = startPos + text.length;
- this.scrollTop = scrollTop;
- } else {
- // IE input[type=text] and other browsers
- this.value += text;
- this.focus();
- this.value = this.value; // forces cursor to end
- }
- });
+ static defaults = {
+ // Id that will be used as localStorage key
+ editable_storage: "",
};
- function getAroundCaret(el, length) {
+ static template = '<textarea class="Ldt-NoteTaking-Text"></textarea>';
+
+ draw() {
+ var widget = this;
+ var content;
+ var $ = jQuery;
+
+ widget.renderTemplate();
+ content = widget.$.find(".Ldt-NoteTaking-Text");
+
+ function load_content() {
+ $(content).val(window.localStorage[widget.editable_storage]);
+ }
+ function save_content() {
+ window.localStorage[widget.editable_storage] = $(content).val();
+ }
+
+ // Load current transcript
+ if (window.localStorage[widget.editable_storage]) {
+ load_content();
+ }
+
+ // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea
+ $.fn.insertAtCaret = function (text) {
+ return this.each(function () {
+ if (this.selectionStart !== undefined) {
+ // mozilla/netscape support
+ var startPos = this.selectionStart,
+ endPos = this.selectionEnd,
+ scrollTop = this.scrollTop;
+ this.value =
+ this.value.substring(0, startPos) +
+ text +
+ this.value.substring(endPos, this.value.length);
+ this.focus();
+ this.selectionStart = startPos + text.length;
+ this.selectionEnd = startPos + text.length;
+ this.scrollTop = scrollTop;
+ } else {
+ // IE input[type=text] and other browsers
+ this.value += text;
+ this.focus();
+ this.value = this.value; // forces cursor to end
+ }
+ });
+ };
+
+ function getAroundCaret(el, length) {
// Return a selection of 2 * length characters around the caret
var startPos = el.selectionStart;
return el.value.substring(startPos - length, startPos + length);
- };
-
+ }
- $(content).keydown(function (_event) {
- if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) {
+ $(content)
+ .keydown(function (_event) {
+ if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) {
// Insert current timestamp
_event.preventDefault();
// Get current value
var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));
if (match) {
- // Found a timecode. Go to position.
- widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));
+ // Found a timecode. Go to position.
+ widget.media.setCurrentTime(ns.timestamp2ms(match[1]));
} else {
- $(content).insertAtCaret("[" + (new IriSP.Model.Time(widget.media.getCurrentTime())).toString() + "]");
- save_content();
+ $(content).insertAtCaret(
+ "[" +
+ new ns.Model.Time(widget.media.getCurrentTime()).toString() +
+ "]"
+ );
+ save_content();
}
- }
- }).on("input", function (_event) {
- console.log("Change");
- // Store updated value
- save_content();
- }).on("dblclick", function (_event) {
- var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));
- if (match) {
- // Found a timecode. Go to position.
- _event.preventDefault();
- widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));
- };
- });
+ }
+ })
+ .on("input", function (_event) {
+ // Store updated value
+ save_content();
+ })
+ .on("dblclick", function (_event) {
+ var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));
+ if (match) {
+ // Found a timecode. Go to position.
+ _event.preventDefault();
+ widget.media.setCurrentTime(ns.timestamp2ms(match[1]));
+ }
+ });
+ }
+ };
};
+
+export { NoteTaking, noteTakingStyles };