From 3f513db728fe36861640cd621fe79b2a973030d0 Mon Sep 17 00:00:00 2001 From: riccardo Date: Tue, 15 Mar 2011 17:51:23 +0100 Subject: [PATCH] maybe solved problem of marker at zero (add). Still error server side --- telemeta/htdocs/js/application.js | 28 ++++ telemeta/htdocs/js/playerUtils.js | 6 +- telemeta/htdocs/timeside/src/controller.js | 42 +++--- telemeta/htdocs/timeside/src/divmarker.js | 151 ++++++++++----------- telemeta/htdocs/timeside/src/markermap.js | 50 ++++--- telemeta/htdocs/timeside/src/player.js | 9 +- telemeta/htdocs/timeside/src/ruler.js | 14 +- 7 files changed, 169 insertions(+), 131 deletions(-) diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js index 0dd92af5..b73a1b0c 100644 --- a/telemeta/htdocs/js/application.js +++ b/telemeta/htdocs/js/application.js @@ -1,3 +1,31 @@ +//adds a move function to the array object. +//moves the element at position from into to position +//returns from if no move was accomplished, ie when either: +//1) from or to are not integers +//2) from==to or from==to-1 (also in this latter case there is no need to move) +//3) from or to are lower than zero or greater than the array length +//in any other case, returns to +Array.prototype.move = function(from, to){ + var pInt = parseInt; + if(pInt(from)!==from || pInt(to)!==to){ + return from; + } + var len = this.length; + if((from<0 || from>len)||(to<0 || to>len)){ + return from; + } + //if we moved left to right, the insertion index is actually + //newIndex-1, as we must also consider to remove the current index markerIndex, so: + if(to>from){ + to--; + } + if(from != to){ + var elm = this.splice(from,1)[0]; + this.markers.splice(to,0,elm); + return to; + } + return from; +} function foldInfoBlocks() { var extra = $('.extraInfos'); diff --git a/telemeta/htdocs/js/playerUtils.js b/telemeta/htdocs/js/playerUtils.js index 4ff463d1..fcaa34f3 100644 --- a/telemeta/htdocs/js/playerUtils.js +++ b/telemeta/htdocs/js/playerUtils.js @@ -44,9 +44,9 @@ function change_visualizer() { function load_player(duration) { $(document).ready(function () { - if (!$('#player').length) + if (!$('#player').length){ return; - + } soundUrl = $('.ts-wave a').attr('href'); $('.ts-wave a img').insertAfter('.ts-wave a'); @@ -60,7 +60,7 @@ function load_player(duration) { }); controller = new TimeSide.Controller({ player: player, - soundProvider: provider, + soundProvider: provider, map: map }); change_visualizer(); diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js index ddd0d3e8..e8f0935d 100644 --- a/telemeta/htdocs/timeside/src/controller.js +++ b/telemeta/htdocs/timeside/src/controller.js @@ -65,15 +65,17 @@ TimeSide(function($N) { _onMarkerMapMoved:function(e, data){ var from = data.fromIndex; var to = data.toIndex; - if(from===to){ - //just update the div in order to show the new time offset - //and start edit - this.cfg.divmarkers[from].setIndex(to); - return; - } - this.cfg.player.ruler.move(from,to); - var m = this.cfg.divmarkers.splice(from,1)[0]; //remove - this.cfg.divmarkers.splice(to,0,m); //add +// if(from===to){ +// //just update the div in order to show the new time offset +// //and start edit +// this.cfg.divmarkers[from].setIndex(to); +// return; +// } + this.cfg.divmarkers.move(from,to); + this.cfg.player.ruler.markers.move(from,to); +// this.cfg.player.ruler.move(from,to); +// var m = this.cfg.divmarkers.splice(from,1)[0]; //remove +// this.cfg.divmarkers.splice(to,0,m); //add this.updateIndices(from,to); }, @@ -98,9 +100,10 @@ TimeSide(function($N) { //var idx = this.cfg.map.add(data.offset); //alert('df'); var idx = data.index; - var divMarker = new $N.DivMarker(this.cfg.map); - this.cfg.divmarkers.splice(idx,0, divMarker); - this.cfg.player.ruler.add(data.marker, idx); + //var divMarker = new $N.DivMarker(this.cfg.map); + this.cfg.divmarkers.splice(idx,0, new $N.DivMarker(this.cfg.map)); + this.cfg.player.ruler.onMapAdd(data.marker, idx); + //this.cfg.player.ruler.add(data.marker, idx); } }, @@ -116,7 +119,12 @@ TimeSide(function($N) { var divRemoved = this.cfg.divmarkers.splice(idx,1)[0]; //there is only one element removed divRemoved.remove(); this.cfg.player.ruler.remove(idx); + + //if(idxlen){ - //it might happen when we remove the last element - //suppose [0,1,2], we remove [2] then we call - //updateIndices[2] but array till 1 (there is nothing to update) + if(from>this.cfg.divmarkers.length){ return; } if(to==undefined || to ==null){ - to = len; + to = this.cfg.divmarkers.length-1; } if(to') .addClass('markersdivIndexLabel') @@ -107,9 +97,7 @@ TimeSide(function($N, $J) { .addClass('markersdivSave') .attr("href","#") .html("OK"); - // .append($J('').attr("src","/images/marker_ok_green.png").css({ - // width:'3em' - // })) + //create marker div and append all elements markerDiv = $J('
') @@ -118,42 +106,30 @@ TimeSide(function($N, $J) { .append(this.e_okButton) .addClass('roundBorder8') .addClass('markerdiv'); - } return markerDiv; }, - setIndex: function(index){ + updateMarkerIndex: function(index){ var map = this.markerMap; var marker = map.get(index); this.e_indexLabel.attr('title',marker.toString()); this.e_indexLabel.html(index+1); this.e_offsetLabel.html(this.formatMarkerOffset(marker.offset)); - if(index!=this.markerIndex){ - //add it to the parent div or move the div - if(this.markerIndex!=-1){ - //here is the case when the div is already added, so we have to remove it from the parent - //The .detach() method is the same as .remove(), except that .detach() keeps - //all jQuery data associated with the removed elements. - //This method is useful when removed elements are to be reinserted into the DOM at a later time. - this.me.detach(); - //note that we might have index!=this.markerIndex without the need to detach the div - //we leave this code to be sure, especially on loading - }else{ - //div is not added: set description and title - this.e_descriptionText.val(marker.desc ? marker.desc : ""); - this.e_titleText.val(marker.title ? marker.title : ""); - } - //the div is still to be added - var divLen = this.cfg.parent.children().length; - //this.cfg.parent.append(this.me); - if(index==divLen){ - this.cfg.parent.append(this.me); - }else{ - $( this.cfg.parent.children()[index] ).before(this.me); - } + this.e_descriptionText.val(marker.desc ? marker.desc : ""); + this.e_titleText.val(marker.title ? marker.title : ""); + + var divIndex = this.me.prevAll().length; + //move the div if necessary: + //note that moving left to right the actual insertionIndex is index-1 + //because we will first remove the current index + var insertionIndex = index>divIndex ? index-1 : index; + if(insertionIndex!=divIndex){ + this.me.detach();//The .detach() method is the same as .remove(), except that .detach() keeps + //all jQuery data associated with the removed elements + $( this.cfg.parent.children()[insertionIndex] ).before(this.me); //add } - + if(!marker.isEditable || marker.isSaved){ this.e_okButton.hide(); this.e_descriptionText.attr('readonly','readonly').addClass('markersdivUneditable'); @@ -164,54 +140,63 @@ TimeSide(function($N, $J) { return; } } - if(index!=this.markerIndex){ - //update events associated to anchors - this.markerIndex = index; - var remove = map.remove; - this.e_deleteButton.unbind('click').click( function(){ - remove.apply(map,[index]); - return false; //avoid scrolling of the page on anchor click - }).show(); - - var dText = this.e_descriptionText; - var tText = this.e_titleText; - var okB = this.e_okButton; - this.e_editButton.unbind('click').click( function(){ - dText.removeAttr('readonly').removeClass('markersdivUneditable').show(); - tText.removeAttr('readonly').removeClass('markersdivUneditable').show(); - okB.show(); - $(this).hide(); - tText.select(); - return false; //avoid scrolling of the page on anchor click - }); - var eB = this.e_editButton; - //action for ok button - this.e_okButton.unbind('click').click( function(){ - //if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below - marker.desc = dText.val(); - marker.title = tText.val(); - map.sendHTTP(marker, + + var remove = map.remove; + this.e_deleteButton.unbind('click').click( function(){ + remove.apply(map,[index]); //which will call this.remove below + return false; //avoid scrolling of the page on anchor click + }).show(); + + this.e_deleteButton.unbind('click').click( function(){ + remove.apply(map,[index]); + return false; //avoid scrolling of the page on anchor click + }).show(); + + + //notifies controller.js + // this.fire('remove', { + // index: index + // }); + + var dText = this.e_descriptionText; + var tText = this.e_titleText; + var okB = this.e_okButton; + this.e_editButton.unbind('click').click( function(){ + dText.removeAttr('readonly').removeClass('markersdivUneditable').show(); + tText.removeAttr('readonly').removeClass('markersdivUneditable').show(); + okB.show(); + $(this).hide(); + tText.select(); + return false; //avoid scrolling of the page on anchor click + }); + var eB = this.e_editButton; + //action for ok button + this.e_okButton.unbind('click').click( function(){ + //if(marker.desc !== descriptionText.val()){ //strict equality needed. See note below + marker.desc = dText.val(); + marker.title = tText.val(); + map.sendHTTP(marker, function(){ - dText.attr('readonly','readonly').addClass('markersdivUneditable'); - tText.attr('readonly','readonly').addClass('markersdivUneditable'); - eB.show(); - okB.hide(); + dText.attr('readonly','readonly').addClass('markersdivUneditable'); + tText.attr('readonly','readonly').addClass('markersdivUneditable'); + eB.show(); + okB.hide(); }, true ); - //} - // func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText, - // descriptionLabel, okButton]); - return false; //avoid scrolling of the page on anchor click - }); - //set the title text width. This method - var w = tText.parent().width(); - w-=tText.outerWidth(true)-tText.width(); //so we consider also tText margin border and padding - var space = w-this.e_indexLabel.outerWidth(true) - this.e_offsetLabel.outerWidth(true) - - this.e_editButton.outerWidth(true) - this.e_deleteButton.outerWidth(true); - tText.css('width',space+'px'); - } + //} + // func_fem.apply(klass,[marker,editModeSaved,editButton, descriptionText, + // descriptionLabel, okButton]); + return false; //avoid scrolling of the page on anchor click + }); + //set the title text width. This method + var w = tText.parent().width(); + w-=tText.outerWidth(true)-tText.width(); //so we consider also tText margin border and padding + var space = w-this.e_indexLabel.outerWidth(true) - this.e_offsetLabel.outerWidth(true) - + this.e_editButton.outerWidth(true) - this.e_deleteButton.outerWidth(true); + tText.css('width',space+'px'); + //} if(!marker.isSaved){ this.e_editButton.trigger('click'); } diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js index 367f09ce..230dc448 100644 --- a/telemeta/htdocs/timeside/src/markermap.js +++ b/telemeta/htdocs/timeside/src/markermap.js @@ -83,7 +83,7 @@ TimeSide(function($N, $J) { remove: function(index) { var marker = this.get(index); if (marker) { - if(marker.isSaved){ + if(marker.id!==undefined){ this.removeHTTP(marker); } this.markers.splice(index, 1); @@ -97,26 +97,38 @@ TimeSide(function($N, $J) { move: function(markerIndex, newOffset){ var newIndex = this.indexOf(newOffset); - - //if we moved left to right, the insertion index is actually - //newIndex-1, as we must also consider to remove the current index markerIndex, so: - if(newIndex>markerIndex){ - newIndex--; - } - //this way, we are sure that if markerIndex==newIndex we do not have to move, - //and we can safely first remove the marker then add it at the newIndex without - //checking if we moved left to right or right to left - var marker = this.markers[markerIndex]; + newIndex = this.markers.move(markerIndex,newIndex); + + var marker = this.markers[newIndex]; marker.offset = newOffset; marker.isSaved = marker.isEditable ? false : true; - if(newIndex != markerIndex){ - this.markers.splice(markerIndex,1); - this.markers.splice(newIndex,0,marker); - } + this.fire('moved', { fromIndex: markerIndex, toIndex: newIndex }); + +// var newIndex = this.indexOf(newOffset); +// +// //if we moved left to right, the insertion index is actually +// //newIndex-1, as we must also consider to remove the current index markerIndex, so: +// if(newIndex>markerIndex){ +// newIndex--; +// } +// //this way, we are sure that if markerIndex==newIndex we do not have to move, +// //and we can safely first remove the marker then add it at the newIndex without +// //checking if we moved left to right or right to left +// var marker = this.markers[markerIndex]; +// marker.offset = newOffset; +// marker.isSaved = marker.isEditable ? false : true; +// if(newIndex != markerIndex){ +// this.markers.splice(markerIndex,1); +// this.markers.splice(newIndex,0,marker); +// } +// this.fire('moved', { +// fromIndex: markerIndex, +// toIndex: newIndex +// }); }, // //The core search index function: returns insertionIndex if object is found according to comparatorFunction, @@ -191,8 +203,14 @@ TimeSide(function($N, $J) { var method = isSaved ? "telemeta.update_marker" : "telemeta.add_marker"; var s = this.jsonify; + + //server problem on zero. offset of zero must be converted to 0.0 + var offset = marker.offset; + if(!(offset)){ + offset = "0.0"; + } var data2send = '{"id":"jsonrpc", "params":[{"item_id":"'+ s(itemid)+ - '", "public_id": "'+s(marker.id)+'", "time": "'+s(marker.offset)+ + '", "public_id": "'+s(marker.id)+'", "time": "'+s(offset)+ '", "author": "'+s(marker.author)+ '", "title": "'+s(marker.title)+ '","description": "'+s(marker.desc)+'"}], "method":"'+method+'","jsonrpc":"1.0"}'; diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js index 793b2a2d..02179f74 100644 --- a/telemeta/htdocs/timeside/src/player.js +++ b/telemeta/htdocs/timeside/src/player.js @@ -42,8 +42,9 @@ TimeSide(function($N, $J) { initialize: function($super, container, cfg) { $super(); - if (!container) + if (!container){ throw new $N.RequiredArgumentError(this, 'container'); + } this.container = $J(container); this.configure(cfg, { image: null @@ -111,8 +112,9 @@ TimeSide(function($N, $J) { .attr('href', '#') .each(function(i, a){ a = $J(a); - if (!a.attr('title')) + if (!a.attr('title')){ a.attr('title', a.text()); + } }); //this.elements.markerControl.find('a').attr('href', '#'); @@ -145,8 +147,9 @@ TimeSide(function($N, $J) { this.resize(); var resizeTimer = null; $J(window).resize(this.attach(function() { - if (resizeTimer) + if (resizeTimer){ clearTimeout(resizeTimer); + } resizeTimer = setTimeout(this.attach(this.resize), 100); })); //this.container.resize(this.attach(this.resize)); // Can loop ? diff --git a/telemeta/htdocs/timeside/src/ruler.js b/telemeta/htdocs/timeside/src/ruler.js index e5697e4c..0844ba23 100644 --- a/telemeta/htdocs/timeside/src/ruler.js +++ b/telemeta/htdocs/timeside/src/ruler.js @@ -411,10 +411,10 @@ TimeSide(function($N, $J) { }); } }, - - add: function(marker, index){ + + //called from markermap after we retrieved the marker index: + onMapAdd: function(marker, index){ this.markers.splice(index, 0, this._drawMarker(marker, index)); - //this.markers.push(this._drawMarker(marker, index)); }, // _onMapAdd2: function(e, data) { @@ -428,10 +428,10 @@ TimeSide(function($N, $J) { }, //it is assured that fromIndex!=toIndex and fromIndex!=toIndex+1 (see markermap.move) - move: function(fromIndex, toIndex){ - var m = this.markers.splice(fromIndex,1)[0]; //remove - this.markers.splice(toIndex,0,m); //add - }, +// move: function(fromIndex, toIndex){ +// var m = this.markers.splice(fromIndex,1)[0]; //remove +// this.markers.splice(toIndex,0,m); //add +// }, updateMarkerIndices:function(fromIndex, toIndex){ for(var i=fromIndex; i<=toIndex; i++){ -- 2.39.5