|
1 /* TODO |
|
2 - add callbacks |
|
3 */ |
|
4 |
|
5 IriSP.Widgets.EnrichedPlan = function(player, config) { |
|
6 IriSP.Widgets.Widget.call(this, player, config); |
|
7 } |
|
8 |
|
9 IriSP.Widgets.EnrichedPlan.prototype = new IriSP.Widgets.Widget(); |
|
10 |
|
11 IriSP.Widgets.EnrichedPlan.prototype.defaults = { |
|
12 // Main type for slide segmentation |
|
13 annotation_type: "Slides", |
|
14 // If no annotation type list is specified, use all other types |
|
15 annotation_types: [], |
|
16 show_controls: true, |
|
17 show_slides: true, |
|
18 show_teacher_notes: true, |
|
19 show_other_notes: true, |
|
20 show_own_notes: true |
|
21 } |
|
22 |
|
23 IriSP.Widgets.EnrichedPlan.prototype.template = |
|
24 '<div class="Ldt-EnrichedPlan-Container">' |
|
25 + '{{#show_controls}}<form class="Ldt-EnrichedPlan-Controls">' |
|
26 + ' <input id="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Teacher" {{#show_teacher_notes}}checked{{/show_teacher_notes}} type="checkbox">' |
|
27 + ' <label for="{{prefix}}teacher_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Teacher">Notes Enseignant</label>' |
|
28 + ' <input id="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Other" {{#show_other_notes}}checked{{/show_other_notes}} type="checkbox">' |
|
29 + ' <label for="{{prefix}}other_note_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Other">Notes Autres</label>' |
|
30 + ' <input id="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Note-Own" {{#show_own_notes}}checked{{/show_own_notes}} type="checkbox">' |
|
31 + ' <label for="{{prefix}}simplified_plan_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Note-Own">Notes perso.</label>' |
|
32 + ' <input id="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Checkbox Ldt-EnrichedPlan-Slide-Display" {{#show_slides}}checked{{/show_slides}} type="checkbox">' |
|
33 + ' <label for="{{prefix}}slide_display_checkbox" class="Ldt-EnrichedPlan-Control-Label Ldt-EnrichedPlan-Slide-Display">Diapo<br/> </label>' |
|
34 + ' <input class="Ldt-EnrichedPlan-Search-Input" type="search" incremental placeholder="Recherchez"/>' |
|
35 + '</form>{{/show_controls}}' |
|
36 + '<div class="Ldt-EnrichedPlan-Content"></div>' |
|
37 + '</div>'; |
|
38 |
|
39 IriSP.Widgets.EnrichedPlan.prototype.slideTemplate = |
|
40 '<div data-id="{{ id }}" class="Ldt-EnrichedPlan-Slide">' |
|
41 + ' <div class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-SlideTimecode">{{ begin }}</div>' |
|
42 + ' <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem {{^show_slides}}filtered_out{{/show_slides}} Ldt-EnrichedPlan-SlideThumbnail Ldt-EnrichedPlan-Slide-Display"><img title="{{ begin }} - {{ atitle }}" src="{{ thumbnail }}"></div>' |
|
43 + ' <div class="Ldt-EnrichedPlan-SlideContent">' |
|
44 + ' <div data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideTitle Ldt-EnrichedPlan-SlideTitle{{ level }}">{{ atitle }}</div>' |
|
45 + ' <div class="Ldt-EnrichedPlan-SlideNotes">{{{ notes }}}</div>' |
|
46 + ' </div>' |
|
47 + '</div>'; |
|
48 |
|
49 IriSP.Widgets.EnrichedPlan.prototype.annotationTemplate = '<div title="{{ begin }} - {{ atitle }}" data-id="{{ id }}" data-timecode="{{begintc}}" class="Ldt-EnrichedPlan-SlideItem Ldt-EnrichedPlan-Note {{category}} {{filtered}}"><span class="Ldt-EnrichedPlan-Note-Text">{{{ text }}}</span> <span class="Ldt-EnrichedPlan-Note-Author">{{ author }}</span></div>'; |
|
50 |
|
51 IriSP.Widgets.EnrichedPlan.prototype.draw = function() { |
|
52 var _this = this; |
|
53 // Generate a unique prefix, so that ids of input fields |
|
54 // (necessary for label association) are unique too. |
|
55 _this.prefix = "TODO"; |
|
56 // slides content: title, level (for toc) |
|
57 var _slides = this.getWidgetAnnotations().sortBy(function(_annotation) { |
|
58 return _annotation.begin; |
|
59 }); |
|
60 // All other annotations |
|
61 var _annotations = this.media.getAnnotations().filter( function (a) { |
|
62 return a.getAnnotationType().title != _this.annotation_type; |
|
63 }).sortBy(function(_annotation) { |
|
64 return _annotation.begin; |
|
65 }); |
|
66 |
|
67 // Reference annotations in each slide: assume that end time is |
|
68 // correctly set. |
|
69 _slides.forEach( function (slide) { |
|
70 slide.annotations = _annotations.filter( function (a) { |
|
71 return a.begin >= slide.begin && a.begin <= slide.end; |
|
72 }); |
|
73 }); |
|
74 |
|
75 _this.renderTemplate(); |
|
76 var container = _this.$.find('.Ldt-EnrichedPlan-Container'); |
|
77 var content = _this.$.find('.Ldt-EnrichedPlan-Content'); |
|
78 |
|
79 // Returns the note category: Own, Other, Teacher |
|
80 function note_category(a) { |
|
81 return a.title.indexOf('Anonyme') < 0 ? "Own" : "Other"; |
|
82 }; |
|
83 |
|
84 _slides.forEach(function(slide) { |
|
85 var _html = Mustache.to_html(_this.slideTemplate, { |
|
86 id : slide.id, |
|
87 atitle : IriSP.textFieldHtml(slide.title), |
|
88 level: slide.content.level || 1, |
|
89 begin : slide.begin.toString(), |
|
90 begintc: slide.begin.milliseconds, |
|
91 thumbnail: slide.thumbnail, |
|
92 show_slides: _this.show_slides, |
|
93 notes: slide.annotations.map( function (a) { |
|
94 return Mustache.to_html(_this.annotationTemplate, { |
|
95 id: a.id, |
|
96 text: IriSP.textFieldHtml(a.description || a.title), |
|
97 author: a.creator, |
|
98 begin: a.begin.toString(), |
|
99 begintc: a.begin.milliseconds, |
|
100 atitle: a.title.slice(0, 20), |
|
101 // FIXME: Temporary hack waiting for a proper metadata definition |
|
102 category: "Ldt-EnrichedPlan-Note-" + note_category(a), |
|
103 filtered: ( (note_category(a) == 'Own' && ! _this.show_own_notes) |
|
104 || (note_category(a) == 'Other' && ! _this.show_other_notes) |
|
105 || (note_category(a) == 'Teacher' && ! _this.show_teacher_notes) ) ? 'filtered_out' : '' |
|
106 }); |
|
107 }).join("\n") |
|
108 }); |
|
109 var _el = IriSP.jQuery(_html); |
|
110 content.append(_el); |
|
111 }); |
|
112 |
|
113 container.on("click", "[data-timecode]", function () { |
|
114 _this.media.setCurrentTime(Number(this.dataset.timecode)); |
|
115 }); |
|
116 |
|
117 container.on("click", ".Ldt-EnrichedPlan-Control-Checkbox", function () { |
|
118 var classname = _.first(_.filter(this.classList, function (s) { return s != "Ldt-EnrichedPlan-Control-Checkbox"; })); |
|
119 if (classname !== undefined) { |
|
120 if ($(this).is(':checked')) { |
|
121 content.find(".Ldt-EnrichedPlan-Slide ." + classname).removeClass("filtered_out"); |
|
122 } else { |
|
123 content.find(".Ldt-EnrichedPlan-Slide ." + classname).addClass("filtered_out"); |
|
124 } |
|
125 } |
|
126 |
|
127 }); |
|
128 |
|
129 container.find(".Ldt-EnrichedPlan-Search-Input").on("search", function () { |
|
130 var q = $(this).val().toLocaleLowerCase(); |
|
131 if (q === "") { |
|
132 // Show all |
|
133 content.find(".Ldt-EnrichedPlan-Note").removeClass("non_matching"); |
|
134 } else { |
|
135 $(".Ldt-EnrichedPlan-Note").each( function () { |
|
136 var node = $(this); |
|
137 if (node.text().toLocaleLowerCase().indexOf(q) > -1) { |
|
138 node.removeClass("non_matching"); |
|
139 } else { |
|
140 node.addClass("non_matching"); |
|
141 } |
|
142 }); |
|
143 } |
|
144 }); |
|
145 }; |