this.configure(cfg, {
player: null,
soundProvider: null,
- map: null,
- markersDiv: document.getElementById("markers_div_id")
+ map: null
});
- if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
- this.cfg.player = new $N.Player(this.cfg.player);
- }
- this._setupPlayer();
+// if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
+// this.cfg.player = new $N.Player(this.cfg.player);
+// }
+ //this._setupPlayer();
+ this.loadHTTP();
},
_setupPlayer: function() {
+ if (this.cfg.player && !$N.isInstanceOf(this.cfg.player, 'Player')) {
+ this.cfg.player = new $N.Player(this.cfg.player);
+ }
this.attach(this.updateMarkersDiv);
this.cfg.player
.setSoundProvider(this.cfg.soundProvider)
this.cfg.soundProvider.seek(data.offset);
},
- formatMarkerOffset: function(markerOffset){
- //marker offset is in float format second.decimalPart
- var hours = parseInt(markerOffset/(60*24));
- markerOffset-=hours*(60*24);
- var minutes = parseInt(markerOffset/(60));
- markerOffset-=minutes*(60);
- var seconds = parseInt(markerOffset);
- markerOffset-=seconds;
- var msec = Math.round(markerOffset*100); //show only centiseconds
- //(use 1000* to show milliseconds)
- var format = (hours<10 ? "0"+hours : hours )+":"+
- (minutes<10 ? "0"+minutes : minutes )+":"+
- (seconds<10 ? "0"+seconds : seconds )+"."+
- msec;
- return format;
- },
+
_onMarkerMove: function(e, data) {
if (this.cfg.map) {
- this.refreshMarkersText(this.cfg.map);
+ //this.refreshMarkersText(this.cfg.map);
this.cfg.map.move(this.cfg.map.byId(data.id), data.offset);
- this.updateMarkersDiv(this.cfg.map, data.offset);
+ //this.updateMarkersDiv(this.cfg.map, data.offset);
}
},
_onMarkerAdd: function(e, data) {
if (this.cfg.map) {
- this.refreshMarkersText(this.cfg.map);
+ //this.refreshMarkersText(this.cfg.map);
this.cfg.map.add(data.offset, '');
- this.updateMarkersDiv(this.cfg.map, data.offset);
+ //this.updateMarkersDiv(this.cfg.map, data.offset);
}
},
-
- refreshMarkersText: function(nonNullMarkersMap){
- var div = this.cfg.markersDiv;
- var m = nonNullMarkersMap.markers;
- var l = m.length;
- if(div){
- var divChildren = div.childNodes;
- for(var i=0; i<l; i++){
- var marker = m[i];
- var subdiv = divChildren[i];
- var text = subdiv.childNodes[1];
- marker.desc = text.value;
- }
- }
-
- },
- updateMarkersDiv: function(nonNullMarkersMap, selectedMarkOffset){
- var div = this.cfg.markersDiv;
- var m = nonNullMarkersMap.markers;
- var l = m.length;
- if(div){
- var textWithFocus;
- div.style.display = "block";
- var doc = document;
- var divChildren = div.childNodes;
- //var round = Math.round;
- for(var i=0; i<l; i++){
- var marker = m[i];
- var subdiv, text;
- if(divChildren.length<=i){
- //create new div
- subdiv = doc.createElement('div');
- var header = doc.createElement('div');
- //creating marker, see marker.js
- //would be better not to copy this code but to
- //reference it.
- var label = doc.createElement('span');
- label.style.cssText = "color:#fff;background-color:#009;width: '2ex';textAlign: 'center';font-family: 'monospace'";
- //label.setAttribute("class", $N.cssPrefix + this.cfg.className);
- label.innerHTML = (i+1);
- header.appendChild(label);
- var timeSpan = doc.createElement('span');
- timeSpan.style.cssText="margin-left:1ex";
- header.appendChild(timeSpan);
- subdiv.appendChild(header);
-
- text = doc.createElement('textarea');
- text.style.cssText="margin:0;padding:0;width:100%";
-
- var ok = doc.createElement('a');
- ok.setAttribute("href","#");
- ok.innerHTML = "OK";
- subdiv.appendChild(text);
- subdiv.appendChild(ok);
- subdiv.style.cssText="margin-bottom:1em;margin-top:1ex";
- div.appendChild(subdiv);
- }else{
- subdiv = divChildren[i];
- text = subdiv.childNodes[1];
- header = subdiv.childNodes[0];
- }
- var timeStr = this.formatMarkerOffset(marker.offset);
-
- header.childNodes[1].innerHTML = timeStr;
- //updating text
- text.value = marker.desc;
-
- if(selectedMarkOffset==marker.offset){
- textWithFocus = text;
- }
- var send = this.sendHTTP;
- //set the ok function
- ok.onclick = function(){
- marker.desc = text.value;
- send(marker);
- };
- }
- if(textWithFocus){
- textWithFocus.focus();
- }
- }
- },
+ loadHTTP: function(){
- sendHTTP: function(marker){
-
//itemid is the item (spund file) name
var sPath = window.location.pathname;
//remove last "/" or last "/#", if any...
//WARNING: use single quotes for the whole string!!
//see http://stackoverflow.com/questions/4809157/i-need-to-pass-a-json-object-to-a-javascript-ajax-method-for-a-wcf-call-how-can
- var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ itemid+'", "public_id": "'+marker.id+'", "time": "'+
- marker.offset+'","description": "'+marker.desc+'"}], "method":"telemeta.add_marker","jsonrpc":"1.0"}';
-
-
+ var data2send = '{"id":"jsonrpc","params":["'+itemid+'"], "method":"telemeta.get_markers","jsonrpc":"1.0"}';
+ var map = this.cfg.map;
+ var me = this;
$.ajax({
type: "POST",
url: 'http://localhost:9000/json/',
contentType: "application/json",
- data: data2send
+ data: data2send,
+ dataType: "json",
+ success: function(data) {
+ if(data){
+ if(data.result){
+ var result = data.result;
+
+ for(var i =0; i< result.length; i++){
+// var marker = {
+// id: result[i].public_id,
+// offset: result[i].time,
+// desc: result[i].description
+// };
+ map.add(result[i].time, result[i].description);
+ }
+ }
+
+ }
+ me._setupPlayer();
+ }
});
- },
-
- quote: function(string){
- // var s = "\"";
- // var isEscaped = false;
- // for(var i=0; i<string.length; i++){
- // var c = string.charAt(i);
- // if(isEscaped){
- //
- // }else if(c == "\\"){
- // isEscaped = true;
- // }else{
- //
- // }
- // s+=c;
- // }
- // s+="\"";
- return s;
+ var g = 9;
}
+
+
});
$N.notifyScriptLoad();
$N.Class.create("MarkerMap", $N.Core, {
markers: null,
- divContainer: $J("#markers_div"),
+ divContainer: $J("#markers_div_id"),
initialize: function($super, markers) {
$super();
if (!markers){
return index;
},
- _reorder: function() {
+ _reorder: function(selectedMarkerOffset) {
+ //selectedMarkerOffset is the offset of the marker whose textarea
+ //must be selected. It can be undefined
+
//first of all, assign to each marker its text.
//we could assign it onchange, but that event is NOT fired when the textarea changes.
//so we doit it here
var div = this.divContainer;
- var m = markers;
- var l = m.length;
+ var m = this.markers;
+
if(div){
var divChildren = div.childNodes;
- for(var i=0; i<l; i++){
- var marker = m[i];
- var subdiv = divChildren[i];
- var text = subdiv.childNodes[1];
- marker.desc = text.value;
+ if(divChildren){
+ var l = Math.min(divChildren.length, m.length);
+ for(var i=0; i<l; i++){
+ var marker = m[i];
+ var subdiv = divChildren[i];
+ var text = subdiv.childNodes[1];
+ marker.desc = text.value;
+ }
}
}
//old code:
this.fire('indexchange', {
marker: this.markers[i],
index: parseInt(i)
- });
+ });
}
//now update the div
- this.updateDiv();
+ this.updateDiv(selectedMarkerOffset);
},
add: function(offset, desc) {
marker: marker,
index: i
});
- this._reorder();
+ this._reorder(offset);
return marker;
},
move: function(marker, offset) {
oldMarkers = [].concat(this.markers);
marker.offset = offset;
- this._reorder();
+ this._reorder(offset);
},
getPrevious: function(offset, skip) {
updateDiv: function(selectedMarkOffset){
var div = this.divContainer;
- var m = markers;
+ var m = this.markers;
var l = m.length;
if(div){
var textWithFocus;
- div.style.display = "block";
- var doc = document;
- var divChildren = div.childNodes;
+ //div.style.display = "block";
+ //var doc = document;
+ var divChildren = div.children();
//var round = Math.round;
for(var i=0; i<l; i++){
var marker = m[i];
+
var subdiv, text;
if(divChildren.length<=i){
- //create new div
- subdiv = $J('div');
- var header = doc.createElement('div');
+
//creating marker, see marker.js
//would be better not to copy this code but to
//reference it.
- var label = doc.createElement('span');
- label.style.cssText = "color:#fff;background-color:#009;width: '2ex';textAlign: 'center';font-family: 'monospace'";
- label.innerHTML = (i+1);
- header.appendChild(label);
- var timeSpan = doc.createElement('span');
- timeSpan.style.cssText="margin-left:1ex";
- header.appendChild(timeSpan);
- subdiv.appendChild(header);
-
- text = doc.createElement('textarea');
- text.style.cssText="margin:0;padding:0;width:100%";
-
- var ok = doc.createElement('a');
- ok.setAttribute("href","#");
- ok.innerHTML = "OK";
- subdiv.appendChild(text);
- subdiv.appendChild(ok);
- subdiv.style.cssText="margin-bottom:1em;margin-top:1ex";
- div.appendChild(subdiv);
+ var label = $J('<span/>')
+ .css({
+ color:'#fff',
+ backgroundColor:'#009',
+ width: '2ex',
+ textAlign: 'center',
+ fontFamily: 'monospace'
+ })
+ .html(i+1);
+
+ var timeSpan = $J('<span/>')
+ .css({
+ marginLeft:'1ex'
+ });
+
+
+ var header = $J('<div/>')
+ .append(label)
+ .append(timeSpan);
+
+ text = $J('<textarea/>')
+ .css({
+ margin:0,
+ padding:0,
+ width:'100%'
+ });
+
+ var ok = $J('<a/>')
+ .attr("href","#")
+ .html("OK");
+
+ //create new div
+ subdiv = $J('<div/>')
+ .append(header)
+ .append(text)
+ .append(ok)
+ .css({
+ marginBottom:'1em',
+ marginTop:'1ex'
+ });
+
+ div.append(subdiv);
}else{
- subdiv = divChildren[i];
- text = subdiv.childNodes[1];
- header = subdiv.childNodes[0];
+ subdiv = $( div.children()[i] );
+ text = $( subdiv.children()[1] );
+ header = $( subdiv.children()[0] );
+ ok = $( subdiv.children()[2] );
}
var timeStr = this.formatMarkerOffset(marker.offset);
- header.childNodes[1].innerHTML = timeStr;
+ $( header.children()[1] ).html(timeStr);
//updating text
- text.value = marker.desc;
+ text.val(marker.desc);
if(selectedMarkOffset==marker.offset){
textWithFocus = text;
}
var send = this.sendHTTP;
//set the ok function
- ok.onclick = function(){
- marker.desc = text.value;
+ ok.click( function(){
+ marker.desc = text.val();
send(marker);
- };
+ });
}
if(textWithFocus){
textWithFocus.focus();
}
}
+ },
+
+ formatMarkerOffset: function(markerOffset){
+ //marker offset is in float format second.decimalPart
+ var hours = parseInt(markerOffset/(60*24));
+ markerOffset-=hours*(60*24);
+ var minutes = parseInt(markerOffset/(60));
+ markerOffset-=minutes*(60);
+ var seconds = parseInt(markerOffset);
+ markerOffset-=seconds;
+ var msec = Math.round(markerOffset*100); //show only centiseconds
+ //(use 1000* to show milliseconds)
+ var format = (hours<10 ? "0"+hours : hours )+":"+
+ (minutes<10 ? "0"+minutes : minutes )+":"+
+ (seconds<10 ? "0"+seconds : seconds )+"."+
+ msec;
+ return format;
+ },
+
+ sendHTTP: function(marker){
+
+ //itemid is the item (spund file) name
+ var sPath = window.location.pathname;
+ //remove last "/" or last "/#", if any...
+ sPath = sPath.replace(/\/#*$/,"");
+ var itemid = sPath.substring(sPath.lastIndexOf('/') + 1);
+
+ //WARNING: use single quotes for the whole string!!
+ //see http://stackoverflow.com/questions/4809157/i-need-to-pass-a-json-object-to-a-javascript-ajax-method-for-a-wcf-call-how-can
+ var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ itemid+'", "public_id": "'+marker.id+'", "time": "'+
+ marker.offset+'","description": "'+marker.desc+'"}], "method":"telemeta.add_marker","jsonrpc":"1.0"}';
+
+
+ $.ajax({
+ type: "POST",
+ url: 'http://localhost:9000/json/',
+ contentType: "application/json",
+ data: data2send
+ });
}
});
projects / telemeta.git / commitdiff