1 /* This widget displays a note-taking view, that can be saved to localStorage */

     2 

     3 IriSP.Widgets.NoteTaking = function(player, config) {

     4     IriSP.Widgets.Widget.call(this, player, config);

     5 }

     6 

     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     }

    30 

    31     // Load current transcript

    32     if (window.localStorage[widget.editable_storage]) {

    33         load_content();

    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     };

    57 

    58     function getAroundCaret(el, length) {

    59         // Return a selection of 2 * length characters around the caret

    60         var startPos = el.selectionStart;

    61         return el.value.substring(startPos - length, startPos + length);

    62     };

    63 

    64 

    65     $(content).keydown(function (_event) {

    66         if (_event.keyCode == 13 && (_event.ctrlKey || _event.metaKey)) {

    67             // Insert current timestamp

    68             _event.preventDefault();

    69             // Get current value

    70             var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));

    71             if (match) {

    72                 // Found a timecode. Go to position.

    73                 widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));

    74             } else {

    75                 $(content).insertAtCaret("[" + (new IriSP.Model.Time(widget.media.getCurrentTime())).toString() + "]");

    76                 save_content();

    77             }

    78         }

    79     }).on("input", function (_event) {

    80         console.log("Change");

    81         // Store updated value

    82         save_content();

    83     }).on("dblclick", function (_event) {

    84             var match = /\[([\d:]+)\]/.exec(getAroundCaret(content[0], 8));

    85             if (match) {

    86                 // Found a timecode. Go to position.

    87                 _event.preventDefault();

    88                 widget.media.setCurrentTime(IriSP.timestamp2ms(match[1]));

    89             };

    90     });

    91 };