1 /* widgets-container/metadataplayer.js - initialization and configuration of the widgets |
1 /* widgets-container/metadataplayer.js - initialization and configuration of the widgets |
2 */ |
2 */ |
3 |
3 |
4 /* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */ |
4 /* The Metadataplayer Object, single point of entry, replaces IriSP.init_player */ |
5 |
5 import _ from "lodash"; |
6 (function(ns) { |
6 import jQuery from "jquery"; |
7 |
7 |
8 var formerJQuery, formerUnderscore, former$; |
8 export default function (ns) { |
9 |
9 var formerJQuery, formerUnderscore, former$; |
10 var Metadataplayer = ns.Metadataplayer = function(config) { |
10 |
|
11 var Metadataplayer = (ns.Metadataplayer = function (config) { |
11 ns.log("IriSP.Metadataplayer constructor"); |
12 ns.log("IriSP.Metadataplayer constructor"); |
12 for (var key in ns.guiDefaults) { |
13 for (var key in ns.guiDefaults) { |
13 if (ns.guiDefaults.hasOwnProperty(key) && !config.hasOwnProperty(key)) { |
14 if (ns.guiDefaults.hasOwnProperty(key) && !config.hasOwnProperty(key)) { |
14 config[key] = ns.guiDefaults[key] |
15 config[key] = ns.guiDefaults[key]; |
15 } |
16 } |
16 } |
17 } |
17 var _container = document.getElementById(config.container); |
18 var _container = document.getElementById(config.container); |
18 _container.innerHTML = '<h3 class="Ldt-Loader">Loading... Chargement...</h3>'; |
19 _container.innerHTML = |
|
20 '<h3 class="Ldt-Loader">Loading... Chargement...</h3>'; |
19 this.sourceManager = new ns.Model.Directory(); |
21 this.sourceManager = new ns.Model.Directory(); |
20 this.config = config; |
22 this.config = config; |
21 this.__events = {}; |
23 this.__events = {}; |
22 this.loadLibs(); |
24 //this.loadLibs(); |
23 }; |
25 this.onLibsLoaded(); |
24 |
26 }); |
25 Metadataplayer.prototype.toString = function() { |
27 |
26 return 'Metadataplayer in #' + this.config.container; |
28 Metadataplayer.prototype.toString = function () { |
27 }; |
29 return "Metadataplayer in #" + this.config.container; |
28 |
30 }; |
29 Metadataplayer.prototype.on = function(_event, _callback) { |
31 |
|
32 Metadataplayer.prototype.on = function (_event, _callback) { |
30 if (typeof this.__events[_event] === "undefined") { |
33 if (typeof this.__events[_event] === "undefined") { |
31 this.__events[_event] = []; |
34 this.__events[_event] = []; |
32 } |
35 } |
33 this.__events[_event].push(_callback); |
36 this.__events[_event].push(_callback); |
34 }; |
37 }; |
35 |
38 |
36 Metadataplayer.prototype.trigger = function(_event, _data) { |
39 Metadataplayer.prototype.trigger = function (_event, _data) { |
37 var _element = this; |
40 var _element = this; |
38 ns._(this.__events[_event]).each(function(_callback) { |
41 _(this.__events[_event]).each(function (_callback) { |
39 _callback.call(_element, _data); |
42 _callback.call(_element, _data); |
40 }); |
43 }); |
41 }; |
44 }; |
42 |
45 |
43 Metadataplayer.prototype.loadLibs = function() { |
46 Metadataplayer.prototype.onLibsLoaded = function () { |
44 ns.log("IriSP.Metadataplayer.prototype.loadLibs"); |
|
45 var $L = $LAB |
|
46 .queueScript(ns.getLib("Mustache")); |
|
47 formerJQuery = !!window.jQuery; |
|
48 former$ = !!window.$; |
|
49 formerUnderscore = !!window._; |
|
50 |
|
51 if (typeof ns.jQuery === "undefined") { |
|
52 $L.queueScript(ns.getLib("jQuery")); |
|
53 } |
|
54 |
|
55 if (typeof ns._ === "undefined") { |
|
56 $L.queueScript(ns.getLib("underscore")); |
|
57 } |
|
58 |
|
59 if (typeof window.JSON == "undefined") { |
|
60 $L.queueScript(ns.getLib("json")); |
|
61 } |
|
62 $L.queueWait().queueScript(ns.getLib("jQueryUI")).queueWait(); |
|
63 |
|
64 /* widget specific requirements */ |
|
65 for(var _i = 0; _i < this.config.widgets.length; _i++) { |
|
66 var _t = this.config.widgets[_i].type; |
|
67 if (typeof ns.widgetsRequirements[_t] !== "undefined" && typeof ns.widgetsRequirements[_t].requires !== "undefined" ) { |
|
68 for (var _j = 0; _j < ns.widgetsRequirements[_t].requires.length; _j++) { |
|
69 $L.queueScript(ns.getLib(ns.widgetsRequirements[_t].requires[_j])); |
|
70 } |
|
71 } |
|
72 } |
|
73 |
|
74 var _this = this; |
|
75 $L.queueWait(function() { |
|
76 _this.onLibsLoaded(); |
|
77 }); |
|
78 |
|
79 $L.runQueue(); |
|
80 }; |
|
81 |
|
82 Metadataplayer.prototype.onLibsLoaded = function() { |
|
83 ns.log("IriSP.Metadataplayer.prototype.onLibsLoaded"); |
47 ns.log("IriSP.Metadataplayer.prototype.onLibsLoaded"); |
84 |
48 |
85 if (typeof ns.jQuery === "undefined" && typeof window.jQuery !== "undefined") { |
49 // if ( |
86 ns.jQuery = window.jQuery; |
50 // typeof jQuery === "undefined" && |
87 if (former$ || formerJQuery) { |
51 // typeof window.jQuery !== "undefined" |
88 window.jQuery.noConflict(formerJQuery); |
52 // ) { |
89 } |
53 // jQuery = window.jQuery; |
90 } |
54 // if (former$ || formerJQuery) { |
91 if (typeof ns._ === "undefined" && typeof window._ !== "undefined") { |
55 // window.jQuery.noConflict(formerJQuery); |
92 ns._ = window._; |
56 // } |
93 if (formerUnderscore) { |
57 // } |
94 _.noConflict(); |
58 // if (typeof _ === "undefined" && typeof window._ !== "undefined") { |
95 } |
59 // _ = window._; |
96 } |
60 // if (formerUnderscore) { |
97 |
61 // _.noConflict(); |
98 ns.loadCss(ns.getLib("cssjQueryUI")); |
62 // } |
99 ns.loadCss(this.config.css); |
63 // } |
100 |
64 |
101 this.$ = ns.jQuery('#' + this.config.container); |
65 this.$ = jQuery("#" + this.config.container); |
102 this.$.css({ |
66 this.$.css({ |
103 "width": this.config.width, |
67 width: this.config.width, |
104 "clear": "both" |
68 clear: "both", |
105 }); |
69 }); |
106 if (typeof this.config.height !== "undefined") { |
70 if (typeof this.config.height !== "undefined") { |
107 this.$.css("height", this.config.height); |
71 this.$.css("height", this.config.height); |
108 } |
72 } |
109 |
73 |
110 this.widgets = []; |
74 this.widgets = []; |
111 var _this = this; |
75 var _this = this; |
112 ns._(this.config.widgets).each(function(widgetconf, key) { |
76 _(this.config.widgets).each(function (widgetconf, key) { |
113 _this.widgets.push(null); |
77 _this.widgets.push(null); |
114 _this.loadWidget(widgetconf, function(widget) { |
78 _this.loadWidget(widgetconf, function (widget) { |
115 _this.widgets[key] = widget; |
79 _this.widgets[key] = widget; |
116 if (widget.isLoaded()) { |
80 if (widget.isLoaded()) { |
117 _this.trigger("widget-loaded"); |
81 _this.trigger("widget-loaded"); |
118 } |
82 } |
119 }); |
83 }); |
120 }); |
84 }); |
121 this.$.find('.Ldt-Loader').detach(); |
85 this.$.find(".Ldt-Loader").detach(); |
122 |
86 |
123 this.widgetsLoaded = false; |
87 this.widgetsLoaded = false; |
124 |
88 |
125 this.on("widget-loaded", function() { |
89 this.on("widget-loaded", function () { |
126 if (_this.widgetsLoaded) { |
90 if (_this.widgetsLoaded) { |
127 return; |
91 return; |
128 } |
92 } |
129 var isloaded = !ns._(_this.widgets).any(function(w) { |
93 var isloaded = !_(_this.widgets).some(function (w) { |
130 return !(w && w.isLoaded()); |
94 return !(w && w.isLoaded()); |
131 }); |
95 }); |
132 if (isloaded) { |
96 if (isloaded) { |
133 _this.widgetsLoaded = true; |
97 _this.widgetsLoaded = true; |
134 _this.trigger("widgets-loaded"); |
98 _this.trigger("widgets-loaded"); |
135 } |
99 } |
136 }); |
100 }); |
137 }; |
101 }; |
138 |
102 |
139 Metadataplayer.prototype.loadLocalAnnotations = function(localsourceidentifier) { |
103 Metadataplayer.prototype.loadLocalAnnotations = function ( |
|
104 localsourceidentifier |
|
105 ) { |
140 if (this.localSource === undefined) |
106 if (this.localSource === undefined) |
141 this.localSource = this.sourceManager.newLocalSource({serializer: IriSP.serializers['ldt_localstorage']}); |
107 this.localSource = this.sourceManager.newLocalSource({ |
|
108 serializer: IriSP.serializers["ldt_localstorage"], |
|
109 }); |
142 // Load current local annotations |
110 // Load current local annotations |
143 if (localsourceidentifier) { |
111 if (localsourceidentifier) { |
144 // Allow to override localsourceidentifier when necessary (usually at init time) |
112 // Allow to override localsourceidentifier when necessary (usually at init time) |
145 this.localSource.identifier = localsourceidentifier; |
113 this.localSource.identifier = localsourceidentifier; |
146 } |
114 } |
147 this.localSource.deSerialize(window.localStorage[this.localSource.identifier] || "[]"); |
115 this.localSource.deSerialize( |
|
116 window.localStorage[this.localSource.identifier] || "[]" |
|
117 ); |
148 return this.localSource; |
118 return this.localSource; |
149 }; |
119 }; |
150 |
120 |
151 Metadataplayer.prototype.saveLocalAnnotations = function() { |
121 Metadataplayer.prototype.saveLocalAnnotations = function () { |
152 // Save annotations back to localstorage |
122 // Save annotations back to localstorage |
153 window.localStorage[this.localSource.identifier] = this.localSource.serialize(); |
123 window.localStorage[this.localSource.identifier] = |
|
124 this.localSource.serialize(); |
154 // Merge modifications into widget source |
125 // Merge modifications into widget source |
155 // this.source.merge(this.localSource); |
126 // this.source.merge(this.localSource); |
156 }; |
127 }; |
157 |
128 |
158 Metadataplayer.prototype.addLocalAnnotation = function(a) { |
129 Metadataplayer.prototype.addLocalAnnotation = function (a) { |
159 this.loadLocalAnnotations(); |
130 this.loadLocalAnnotations(); |
160 this.localSource.getAnnotations().push(a); |
131 this.localSource.getAnnotations().push(a); |
161 this.saveLocalAnnotations(); |
132 this.saveLocalAnnotations(); |
162 }; |
133 }; |
163 |
134 |
164 Metadataplayer.prototype.deleteLocalAnnotation = function(ident) { |
135 Metadataplayer.prototype.deleteLocalAnnotation = function (ident) { |
165 this.localSource.getAnnotations().removeId(ident, true); |
136 this.localSource.getAnnotations().removeId(ident, true); |
166 this.saveLocalAnnotations(); |
137 this.saveLocalAnnotations(); |
167 }; |
138 }; |
168 |
139 |
169 Metadataplayer.prototype.getLocalAnnotation = function (ident) { |
140 Metadataplayer.prototype.getLocalAnnotation = function (ident) { |
170 this.loadLocalAnnotations(); |
141 this.loadLocalAnnotations(); |
171 // We cannot use .getElement since it fetches |
142 // We cannot use .getElement since it fetches |
172 // elements from the global Directory |
143 // elements from the global Directory |
173 return IriSP._.first(IriSP._.filter(this.localSource.getAnnotations(), function (a) { return a.id == ident; })); |
144 return _.first( |
174 }; |
145 _.filter(this.localSource.getAnnotations(), function (a) { |
175 |
146 return a.id == ident; |
176 Metadataplayer.prototype.loadMetadata = function(_metadataInfo) { |
147 }) |
|
148 ); |
|
149 }; |
|
150 |
|
151 Metadataplayer.prototype.loadMetadata = function (_metadataInfo) { |
177 if (_metadataInfo.elementType === "source") { |
152 if (_metadataInfo.elementType === "source") { |
178 return _metadataInfo; |
153 return _metadataInfo; |
179 } |
154 } |
180 if (typeof _metadataInfo.serializer === "undefined" && typeof _metadataInfo.format !== "undefined") { |
155 if ( |
181 _metadataInfo.serializer = ns.serializers[_metadataInfo.format]; |
156 typeof _metadataInfo.serializer === "undefined" && |
182 } |
157 typeof _metadataInfo.format !== "undefined" |
183 if (typeof _metadataInfo.url !== "undefined" && typeof _metadataInfo.serializer !== "undefined") { |
158 ) { |
184 return this.sourceManager.remoteSource(_metadataInfo); |
159 _metadataInfo.serializer = ns.serializers[_metadataInfo.format]; |
|
160 } |
|
161 if ( |
|
162 typeof _metadataInfo.url !== "undefined" && |
|
163 typeof _metadataInfo.serializer !== "undefined" |
|
164 ) { |
|
165 return this.sourceManager.remoteSource(_metadataInfo); |
185 } else { |
166 } else { |
186 return this.sourceManager.newLocalSource(_metadataInfo); |
167 return this.sourceManager.newLocalSource(_metadataInfo); |
187 } |
168 } |
188 }; |
169 }; |
189 |
170 |
190 Metadataplayer.prototype.loadWidget = function(_widgetConfig, _callback) { |
171 Metadataplayer.prototype.loadWidget = function (_widgetConfig, _callback) { |
191 /* Creating containers if needed */ |
172 /* Creating containers if needed */ |
192 if (typeof _widgetConfig.container === "undefined") { |
173 if (typeof _widgetConfig.container === "undefined") { |
193 var _divs = this.layoutDivs(_widgetConfig.type); |
174 var _divs = this.layoutDivs(_widgetConfig.type); |
194 _widgetConfig.container = _divs[0]; |
175 _widgetConfig.container = _divs[0]; |
195 } |
176 } |
196 |
177 |
197 var _this = this; |
178 var _this = this; |
198 |
179 |
199 if (typeof ns.Widgets[_widgetConfig.type] !== "undefined") { |
180 if (typeof ns.Widgets[_widgetConfig.type] !== "undefined") { |
200 ns._.defer(function() { |
181 _.defer(function () { |
201 _callback(new ns.Widgets[_widgetConfig.type](_this, _widgetConfig)); |
182 _callback(new ns.Widgets[_widgetConfig.type](_this, _widgetConfig)); |
202 }); |
183 }); |
203 } else { |
184 } else { |
204 /* Loading Widget CSS */ |
185 ns.log("Widget type " + _widgetConfig.type + " Unkown !"); |
205 if (typeof ns.widgetsRequirements[_widgetConfig.type] === "undefined" || typeof ns.widgetsRequirements[_widgetConfig.type].noCss === "undefined" || !ns.widgetsRequirements[_widgetConfig.type].noCss) { |
186 } |
206 ns.loadCss(ns.widgetsDir + '/' + _widgetConfig.type + '.css'); |
187 }; |
207 } |
188 |
208 /* Loading Widget JS */ |
189 /** create a subdiv with an unique id, and a spacer div as well. |
209 $LAB.script(ns.widgetsDir + '/' + _widgetConfig.type + '.js').wait(function() { |
|
210 _callback(new ns.Widgets[_widgetConfig.type](_this, _widgetConfig)); |
|
211 }); |
|
212 } |
|
213 }; |
|
214 |
|
215 /** create a subdiv with an unique id, and a spacer div as well. |
|
216 @param widgetName the name of the widget. |
190 @param widgetName the name of the widget. |
217 @return an array of the form [createdivId, spacerdivId]. |
191 @return an array of the form [createdivId, spacerdivId]. |
218 */ |
192 */ |
219 Metadataplayer.prototype.layoutDivs = function(_name, _height) { |
193 Metadataplayer.prototype.layoutDivs = function (_name, _height) { |
220 if (typeof(_name) === "undefined") { |
194 if (typeof _name === "undefined") { |
221 _name = ""; |
195 _name = ""; |
222 } |
196 } |
223 var newDiv = ns._.uniqueId(this.config.container + "_widget_" + _name + "_"), |
197 var newDiv = _.uniqueId(this.config.container + "_widget_" + _name + "_"), |
224 spacerDiv = ns._.uniqueId("LdtPlayer_spacer_"), |
198 spacerDiv = _.uniqueId("LdtPlayer_spacer_"), |
225 divHtml = ns.jQuery('<div>') |
199 divHtml = jQuery("<div>") |
226 .attr("id",newDiv) |
200 .attr("id", newDiv) |
227 .css({ |
201 .css({ |
228 width: this.config.width + "px", |
202 width: this.config.width + "px", |
229 position: "relative", |
203 position: "relative", |
230 clear: "both" |
204 clear: "both", |
231 }), |
205 }), |
232 spacerHtml = ns.jQuery('<div>') |
206 spacerHtml = jQuery("<div>") |
233 .attr("id",spacerDiv) |
207 .attr("id", spacerDiv) |
234 .css({ |
208 .css({ |
235 width: this.config.width + "px", |
209 width: this.config.width + "px", |
236 height: this.config.spacer_div_height + "px", |
210 height: this.config.spacer_div_height + "px", |
237 position: "relative", |
211 position: "relative", |
238 clear: "both" |
212 clear: "both", |
239 }); |
213 }); |
240 if (typeof _height !== "undefined") { |
214 if (typeof _height !== "undefined") { |
241 divHtml.css("height", _height); |
215 divHtml.css("height", _height); |
242 } |
216 } |
243 |
217 |
244 this.$.append(divHtml); |
218 this.$.append(divHtml); |
245 this.$.append(spacerHtml); |
219 this.$.append(spacerHtml); |
246 |
220 |
247 return [newDiv, spacerDiv]; |
221 return [newDiv, spacerDiv]; |
248 }; |
222 }; |
249 |
223 } |
250 })(IriSP); |
|
251 |
224 |
252 /* End of widgets-container/metadataplayer.js */ |
225 /* End of widgets-container/metadataplayer.js */ |