1 /* This widget displays a note-taking view, that can be saved to localStorage */ |
1 /* This widget displays a note-taking view, that can be saved to localStorage */ |
|
2 import noteTakingStyles from "./NoteTaking.module.css"; |
|
3 import jQuery from "jquery"; |
2 |
4 |
3 IriSP.Widgets.NoteTaking = function(player, config) { |
5 const NoteTaking = function (ns) { |
4 IriSP.Widgets.Widget.call(this, player, config); |
6 return class extends ns.Widgets.Widget { |
5 } |
7 constructor(player, config) { |
6 |
8 super(player, config); |
7 IriSP.Widgets.NoteTaking.prototype = new IriSP.Widgets.Widget(); |
|
8 |
|
9 IriSP.Widgets.NoteTaking.prototype.defaults = { |
|
10 // Id that will be used as localStorage key |
|
11 editable_storage: "" |
|
12 } |
|
13 |
|
14 IriSP.Widgets.NoteTaking.prototype.template = '<textarea class="Ldt-NoteTaking-Text"></textarea>'; |
|
15 |
|
16 IriSP.Widgets.NoteTaking.prototype.draw = function() { |
|
17 var widget = this; |
|
18 var content; |
|
19 var $ = IriSP.jQuery; |
|
20 |
|
21 widget.renderTemplate(); |
|
22 content = widget.$.find('.Ldt-NoteTaking-Text'); |
|
23 |
|
24 function load_content() { |
|
25 $(content).val(window.localStorage[widget.editable_storage]); |
|
26 } |
|
27 function save_content() { |
|
28 window.localStorage[widget.editable_storage] = $(content).val(); |
|
29 } |
9 } |
30 |
10 |
31 // Load current transcript |
11 static defaults = { |
32 if (window.localStorage[widget.editable_storage]) { |
12 // Id that will be used as localStorage key |
33 load_content(); |
13 editable_storage: "", |
34 } |
|
35 |
|
36 // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea |
|
37 $.fn.insertAtCaret = function(text) { |
|
38 return this.each(function() { |
|
39 if (this.selectionStart !== undefined) { |
|
40 // mozilla/netscape support |
|
41 var startPos = this.selectionStart, |
|
42 endPos = this.selectionEnd, |
|
43 scrollTop = this.scrollTop; |
|
44 this.value = this.value.substring(0, startPos) + text + this.value.substring(endPos, this.value.length); |
|
45 this.focus(); |
|
46 this.selectionStart = startPos + text.length; |
|
47 this.selectionEnd = startPos + text.length; |
|
48 this.scrollTop = scrollTop; |
|
49 } else { |
|
50 // IE input[type=text] and other browsers |
|
51 this.value += text; |
|
52 this.focus(); |
|
53 this.value = this.value; // forces cursor to end |
|
54 } |
|
55 }); |
|
56 }; |
14 }; |
57 |
15 |
58 function getAroundCaret(el, length) { |
16 static template = '<textarea class="Ldt-NoteTaking-Text"></textarea>'; |
|
17 |
|
18 draw() { |
|
19 var widget = this; |
|
20 var content; |
|
21 var $ = jQuery; |
|
22 |
|
23 widget.renderTemplate(); |
|
24 content = widget.$.find(".Ldt-NoteTaking-Text"); |
|
25 |
|
26 function load_content() { |
|
27 $(content).val(window.localStorage[widget.editable_storage]); |
|
28 } |
|
29 function save_content() { |
|
30 window.localStorage[widget.editable_storage] = $(content).val(); |
|
31 } |
|
32 |
|
33 // Load current transcript |
|
34 if (window.localStorage[widget.editable_storage]) { |
|
35 load_content(); |
|
36 } |
|
37 |
|
38 // Thanks to http://stackoverflow.com/questions/4456545/how-to-insert-text-at-the-current-caret-position-in-a-textarea |
|
39 $.fn.insertAtCaret = function (text) { |
|
40 return this.each(function () { |
|
41 if (this.selectionStart !== undefined) { |
|
42 // mozilla/netscape support |
|
43 var startPos = this.selectionStart, |
|
44 endPos = this.selectionEnd, |
|
45 scrollTop = this.scrollTop; |
|
46 this.value = |
|
47 this.value.substring(0, startPos) + |
|
48 text + |
|
49 this.value.substring(endPos, this.value.length); |
|
50 this.focus(); |
|
51 this.selectionStart = startPos + text.length; |
|
52 this.selectionEnd = startPos + text.length; |
|
53 this.scrollTop = scrollTop; |
|
54 } else { |
|
55 // IE input[type=text] and other browsers |
|
56 this.value += text; |
|
57 this.focus(); |
|
58 this.value = this.value; // forces cursor to end |
|
59 } |
|
60 }); |
|
61 }; |
|
62 |
|
63 function getAroundCaret(el, length) { |
59 // Return a selection of 2 * length characters around the caret |
64 // Return a selection of 2 * length characters around the caret |
60 var startPos = el.selectionStart; |
65 var startPos = el.selectionStart; |
61 return el.value.substring(startPos - length, startPos + length); |
66 return el.value.substring(startPos - length, startPos + length); |
62 }; |
67 } |
63 |
68 |
64 |
69 $(content) |
65 $(content).keydown(function (_event) { |
70 .keydown(function (_event) { |
66 if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) { |
71 if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) { |
67 // Insert current timestamp |
72 // Insert current timestamp |
68 _event.preventDefault(); |
73 _event.preventDefault(); |
69 // Get current value |
74 // Get current value |
70 var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8)); |
75 var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8)); |
71 if (match) { |
76 if (match) { |
72 // Found a timecode. Go to position. |
77 // Found a timecode. Go to position. |
73 widget.media.setCurrentTime(IriSP.timestamp2ms(match[1])); |
78 widget.media.setCurrentTime(ns.timestamp2ms(match[1])); |
74 } else { |
79 } else { |
75 $(content).insertAtCaret("[" + (new IriSP.Model.Time(widget.media.getCurrentTime())).toString() + "]"); |
80 $(content).insertAtCaret( |
76 save_content(); |
81 "[" + |
|
82 new ns.Model.Time(widget.media.getCurrentTime()).toString() + |
|
83 "]" |
|
84 ); |
|
85 save_content(); |
77 } |
86 } |
78 } |
87 } |
79 }).on("input", function (_event) { |
88 }) |
80 console.log("Change"); |
89 .on("input", function (_event) { |
81 // Store updated value |
90 // Store updated value |
82 save_content(); |
91 save_content(); |
83 }).on("dblclick", function (_event) { |
92 }) |
84 var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8)); |
93 .on("dblclick", function (_event) { |
85 if (match) { |
94 var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8)); |
86 // Found a timecode. Go to position. |
95 if (match) { |
87 _event.preventDefault(); |
96 // Found a timecode. Go to position. |
88 widget.media.setCurrentTime(IriSP.timestamp2ms(match[1])); |
97 _event.preventDefault(); |
89 }; |
98 widget.media.setCurrentTime(ns.timestamp2ms(match[1])); |
90 }); |
99 } |
|
100 }); |
|
101 } |
|
102 }; |
91 }; |
103 }; |
|
104 |
|
105 export { NoteTaking, noteTakingStyles }; |