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 (file)
index 0000000..fdba86d
--- /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 72f0178faec9e730f6e78ece911ed9ef309ff938..1751d17df50236429fc09e671718b4f126a8e71b 100644 (file)
--- 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 b342756023bc84eab163c805c80e15e65c480d18..06adc848a01b300f018f203b0814607d69994751 100644 (file)
--- 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('<div/>').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<map.length){
-                        //consolelog(map.toArray()[indexToShow].offset+' '+sPos);
-                        var spanSec = 0.25;
-                        var offzet = map.toArray()[indexToShow].offset;
-                        if(offzet>=sPos-spanSec && offzet<=sPos+spanSec){
-                            indexToShow++;
-                            popup.show(jQuery('<div/>').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('<div/>').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("<table style='width:100%'><tr><td>"+gettrans('title')+"</td><td class='title></td></tr><tr><td>"+
+            gettrans('description')+"</td><td class='description'></td></tr></table>");
+        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 34cafcd49863c9019c0905707ccbec8cfcabcc59..b9214cef708ec469ae0a48b7137a9adc580941bc 100644 (file)
--- a/telemeta/templates/telemeta_default/base.html
+++ b/telemeta/templates/telemeta_default/base.html
@@ -18,6 +18,7 @@
 <![endif]-->
 {% endblock %}
 <script src="{% url telemeta-js "jquery.js" %}" type="text/javascript"></script>
+<script src="{% url telemeta-js "locale.js" %}" type="text/javascript"></script>
 <script src="{% url telemeta-js "application.js" %}" type="text/javascript"></script>
 <script src="{% url django.views.i18n.javascript_catalog %}" type="text/javascript"></script>