1 IriSP.createAnnotationWidget = function(Popcorn, config, Serializer) { |
1 IriSP.createAnnotationWidget = function(Popcorn, config, Serializer) { |
2 IriSP.Widget.call(this, Popcorn, config, Serializer); |
2 IriSP.Widget.call(this, Popcorn, config, Serializer); |
3 this._hidden = true; |
3 this._hidden = true; |
4 this.keywords = IriSP.widgetsDefaults["createAnnotationWidget"].keywords; |
4 this.keywords = IriSP.widgetsDefaults["createAnnotationWidget"].keywords; |
|
5 this.ids = {}; /* a dictionnary linking buttons ids to keywords */ |
5 }; |
6 }; |
6 |
7 |
7 |
8 |
8 IriSP.createAnnotationWidget.prototype = new IriSP.Widget(); |
9 IriSP.createAnnotationWidget.prototype = new IriSP.Widget(); |
9 |
10 |
33 var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template); |
34 var annotationMarkup = IriSP.templToHTML(IriSP.createAnnotationWidget_template); |
34 this.selector.append(annotationMarkup); |
35 this.selector.append(annotationMarkup); |
35 |
36 |
36 this.selector.hide(); |
37 this.selector.hide(); |
37 for (var i = 0; i < this.keywords.length; i++) { |
38 for (var i = 0; i < this.keywords.length; i++) { |
38 var templ = IriSP.templToHTML("<span class='Ldt-createAnnotation-absent-keyword'>{{keyword}}</span>", |
39 var keyword = this.keywords[i]; |
39 {keyword: this.keywords[i]}); |
40 var id = IriSP.guid("button_"); |
|
41 var templ = IriSP.templToHTML("<button id={{id}} class='Ldt-createAnnotation-absent-keyword'>{{keyword}}</button>", |
|
42 {keyword: keyword, id: id}); |
40 |
43 |
|
44 this.ids[keyword] = id; // save it for the function that handle textarea changes. |
|
45 |
41 this.selector.find(".Ldt-createAnnotation-keywords").append(templ); |
46 this.selector.find(".Ldt-createAnnotation-keywords").append(templ); |
|
47 this.selector.find("#" + id).click(function(keyword) { return function() { |
|
48 var contents = _this.selector.find(".Ldt-createAnnotation-Description").val(); |
|
49 if (contents.indexOf(keyword) != -1) { |
|
50 var newVal = contents.replace(keyword, ""); |
|
51 } else { |
|
52 var newVal = contents + keyword; |
|
53 } |
|
54 |
|
55 _this.selector.find(".Ldt-createAnnotation-Description").val(newVal); |
|
56 // also call our update function. |
|
57 _this.handleTextChanges(); |
|
58 } |
|
59 }(keyword)); |
42 } |
60 } |
43 |
61 |
|
62 this.selector.find(".Ldt-createAnnotation-Description") |
|
63 .bind("propertychange keyup input paste", IriSP.wrap(this, this.handleTextChanges)); |
44 |
64 |
45 this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", |
65 this._Popcorn.listen("IriSP.PlayerWidget.AnnotateButton.clicked", |
46 IriSP.wrap(this, this.handleAnnotateSignal)); |
66 IriSP.wrap(this, this.handleAnnotateSignal)); |
47 }; |
67 }; |
48 |
68 |
53 } else { |
73 } else { |
54 this.selector.show(); |
74 this.selector.show(); |
55 this._hidden = false; |
75 this._hidden = false; |
56 } |
76 } |
57 }; |
77 }; |
|
78 |
|
79 /** watch for changes in the textfield and change the buttons accordingly */ |
|
80 IriSP.createAnnotationWidget.prototype.handleTextChanges = function(event) { |
|
81 var contents = this.selector.find(".Ldt-createAnnotation-Description").val(); |
|
82 |
|
83 for(var keyword in this.ids) { |
|
84 |
|
85 var id = this.ids[keyword]; |
|
86 |
|
87 if (contents.indexOf(keyword) != -1) { |
|
88 /* the word is present in the textarea but the button is not toggled */ |
|
89 if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-absent-keyword")) |
|
90 this.selector.find("#" + id).removeClass("Ldt-createAnnotation-absent-keyword") |
|
91 .addClass("Ldt-createAnnotation-present-keyword"); |
|
92 } else { |
|
93 /* the word is absent from the textarea but the button is toggled */ |
|
94 if (this.selector.find("#" + id).hasClass("Ldt-createAnnotation-present-keyword")) { |
|
95 this.selector.find("#" + id).removeClass("Ldt-createAnnotation-present-keyword") |
|
96 .addClass("Ldt-createAnnotation-absent-keyword"); |
|
97 } |
|
98 } |
|
99 } |
|
100 }; |