From: riccardo Date: Wed, 27 Apr 2011 18:03:12 +0000 (+0200) Subject: implemented popup (still work in progress) + locale.js. X-Git-Tag: 1.1~273 X-Git-Url: https://git.parisson.com/?a=commitdiff_plain;h=7ba7c205baf10be0f859c55b4ae9927891399bd0;p=telemeta.git implemented popup (still work in progress) + locale.js. --- diff --git a/telemeta/htdocs/js/locale.js b/telemeta/htdocs/js/locale.js new file mode 100644 index 00000000..fdba86d0 --- /dev/null +++ b/telemeta/htdocs/js/locale.js @@ -0,0 +1,15 @@ +/* + * javascript file to handle translations between django and javascript + */ +function gettrans(str){ + var loc = localeStrings; //instantiate once for faster lookup + return str in loc ? loc[str] : str; +} +var localeStrings = { + 'title': gettext('title'), + 'description': gettext('description'), + 'delete the marker permanently?': gettext('delete the marker permanently?'), + 'marker added to selected playlist': gettext('marker added to selected playlist'), + 'item added to selected playlist': gettext('item added to selected playlist'), + 'collection added to selected playlist': gettext('collection added to selected playlist') +}; diff --git a/telemeta/htdocs/timeside/src/divmarker.js b/telemeta/htdocs/timeside/src/divmarker.js index 72f0178f..1751d17d 100644 --- a/telemeta/htdocs/timeside/src/divmarker.js +++ b/telemeta/htdocs/timeside/src/divmarker.js @@ -126,7 +126,7 @@ var MarkerMapDiv = TimesideArray.extend({ e_okButton.hide(); editButton.show(); } - + this.setFocus(index,value); this.stretch(e_titleText); }, diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js index b3427560..06adc848 100644 --- a/telemeta/htdocs/timeside/src/player.js +++ b/telemeta/htdocs/timeside/src/player.js @@ -1,9 +1,11 @@ var Player = TimesideClass.extend({ - + //sound duration is in milliseconds because the soundmanager has that unit, //player (according to timeside syntax) has durations in seconds init: function(container, sound, soundDurationInMsec) { this._super(); + var player = this; + if (!container){ this.debug('ERROR: container is null in initializing the player') } @@ -14,6 +16,8 @@ var Player = TimesideClass.extend({ return sound; } + + //rpivate functions for converting //soundmanager has milliseconds, we use here seconds var pInt = Math.round; //instantiate once for faster lookup @@ -26,7 +30,6 @@ var Player = TimesideClass.extend({ } - var sd = toSec(soundDurationInMsec); this.getSoundDuration = function(){ return sd; @@ -39,7 +42,12 @@ var Player = TimesideClass.extend({ *Note that a 1 may not always guarantee that sound is being heard, given buffering and autoPlay status.*/ return sound && sound.playState==1; }; - + + var currentMarkerIndex=0; + this.getCurrentMarkerIndex = function(){ + return currentMarkerIndex; + }; + //setting the position=============================================== //if sound is not loaded, position is buggy. Moreover, we have to handle the conversions between units: //seconds (here) and milliseconds (swmanager sound). So we store a private variable @@ -48,6 +56,13 @@ var Player = TimesideClass.extend({ //private method: updates just the internal variable (called in whilePlaying below) function setPos(value){ soundPos = value; + var map = player.getMarkerMap(); + if(map){ + currentMarkerIndex = map.insertionIndex(value); + if(currentMarkerIndex<0){ //see markermap.insertionindex + currentMarkerIndex = -currentMarkerIndex-1; + } + } } //public methods: calls setPos above AND updates sounbd position this.setSoundPosition = function(newPositionInSeconds){ @@ -70,7 +85,6 @@ var Player = TimesideClass.extend({ //implement play here: while playing we do not have to update the sound position, so //we call the private variable soundPos this.play = function(){ - var player = this; if(!player || player.isPlaying()){ return false; } @@ -79,13 +93,7 @@ var Player = TimesideClass.extend({ return false; } - var map = player.getMarkerMap(); - var indexToShow = map.insertionIndex(player.getSoundPosition()); - var mydiv = this.$J('
').addClass('markerDiv').css({ - 'position':'absolute', - 'zIndex':1000 - }); var ruler = player.getRuler(); @@ -96,16 +104,8 @@ var Player = TimesideClass.extend({ if(ruler && !ruler.isPointerMovingFromMouse()){ ruler.movePointer(sPos); } - if(indexToShow=sPos-spanSec && offzet<=sPos+spanSec){ - indexToShow++; - popup.show(jQuery('
').html(map.toArray()[indexToShow-1].toString())); - consolelog('showing marker '+(indexToShow-1)); - } - } + + player.showMarkerPopup(currentMarkerIndex); }, onfinish: function() { setPos(0); //reset position, not cursor, so that clicking play restarts from zero @@ -114,10 +114,6 @@ var Player = TimesideClass.extend({ //internal play function. Set all properties and play: var play_ = function(sound, positionInSec){ sound.setPosition(toMsec(positionInSec)); - indexToShow = map.insertionIndex(positionInSec); //if we are at zero - if(indexToShow<0){ - indexToShow = -indexToShow-1; - } sound.setVolume(sound.volume); //workaround. Just to be sure. Sometimes it fails when we re-play sound.play(playOptions); }; @@ -175,6 +171,8 @@ var Player = TimesideClass.extend({ }, + + _setupInterface: function(isInteractive) { this.isInteractive = function(){ @@ -333,8 +331,55 @@ var Player = TimesideClass.extend({ //finally, load markers and bind events for markers (see method below): this.loadMarkers(isInteractive); - + + //set the marker popup + //functions to set the marker popup + var popupMarker = $J('
').css({ + 'dislay':'none', + 'position':'absolute', + 'zIndex':1000 + }).addClass('container'); + $J(document).append(popupMarker); + var w = v.width(); + var h = v.height(); + var offs = v.offset(); //relative to the document + var width = parseInt(w/2); + var height = parseInt(h/2); + var margin = 5; + popupMarker.css({ + 'left':(margin+offs.left+width)+'px', + 'top': parseInt(margin+offs.top)+'px', + 'width':width+'px', + 'height':height+'px' + }); + popupMarker.html("
"+gettrans('title')+"
"); + this.getMarkerPopup = function(){ + return popupMarker; + } }, + + showMarkerPopup: function(markerIndex){ + var popup = this.getMarkerPopup(); + // consolelog(popup.attr('id')); + consolelog('popup'); + if(popup.attr('id') != 'markerpopup'+markerIndex){ + + var marker = getMarkerMap().toArray()[markerIndex]; + var pos = this.getPosition(); + var mPos = marker.offset; + var span = 0.3; + if(pos>=mPos-span && pos<=mPos+span){ + popup.attr('id','markerpopup'+markerIndex); + popup.find('.title').html(marker.title); + popup.find('.description').html(marker.desc); + if(!popup.is(':visible')){ + popup.show('fast'); + } + } + } + }, + resize: function() { this.debug("resizing"); var height; diff --git a/telemeta/templates/telemeta_default/base.html b/telemeta/templates/telemeta_default/base.html index 34cafcd4..b9214cef 100644 --- a/telemeta/templates/telemeta_default/base.html +++ b/telemeta/templates/telemeta_default/base.html @@ -18,6 +18,7 @@ {% endblock %} +