test version 2 mai 2011. Popup still work in progress

diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js
index ab425336406effaf24ca34f668c5574d26c0fd85..333a2d915d14eb4c3b4a8ff0de3b214930e558b8 100644 (file)
--- a/telemeta/htdocs/js/application.js
+++ b/telemeta/htdocs/js/application.js
@@ -656,24 +656,24 @@ function PopupUtils(){
             var spaceAbove = offs.top - rect.y;\r
             var spaceBelow = rect.height - height - spaceAbove;\r
 \r
-           // consolelog('wHeight:'+rect.height+ ' space above: '+spaceAbove + ' spacebelow: '+spaceBelow);\r
+            // consolelog('wHeight:'+rect.height+ ' space above: '+spaceAbove + ' spacebelow: '+spaceBelow);\r
 \r
             if(spaceAbove>spaceBelow){\r
                 p.css({\r
                     'maxHeight':(spaceAbove-p.shadowoffset)+'px',\r
                     'top':rect.y+'px'\r
-                    });\r
+                });\r
             }else{\r
                 p.css({\r
                     'maxHeight':(spaceBelow-p.shadowoffset)+'px',\r
                     'top':(offs.top+height)+'px'\r
-                    });\r
+                });\r
             }\r
             p.css({\r
                 'height':'auto',\r
                 'width' :'auto',\r
                 'maxWidth': (rect.x+rect.width-offs.left)+'px'\r
-                });\r
+            });\r
 \r
             //consolelog("size"); consolelog(size);\r
             //        p.offset({\r
@@ -822,17 +822,17 @@ function DivDialog(content){
         popup.css({\r
             'maxHeight':size.height,\r
             'maxWidth':size.width\r
-            });\r
+        });\r
         popupContent.css({\r
             'maxHeight':size.height-(popup.outerHeight()-popup.height()),\r
             'maxWidth':size.width-(popup.outerWidth()-popup.width())\r
-            });\r
+        });\r
     };\r
     this.minsize = function(size){\r
         popup.css({\r
             'minHeight':size.height,\r
             'minWidth':size.width\r
-            });\r
+        });\r
     };\r
     this.offset = function(){\r
         var ret = popup.offset.apply(popup,arguments);\r
@@ -968,7 +968,7 @@ function DivDialog(content){
                 //otherwise execute callback\r
                 setTimeout(function(){\r
                     var v = document.activeElement;\r
-                   // consolelog(v);\r
+                    // consolelog(v);\r
                     if(v && $J(v).attr(focusid)){\r
                         return;\r
                     }\r
@@ -1414,21 +1414,25 @@ function PopupDiv(content){
     var div  = $J('<div/>').addClass(this.defaultClasses).css({\r
         'position':'absolute',\r
         'zIndex':this.zIndex,\r
-//        'display':'none',\r
-//        'left':wdw.scrollLeft()+'px',\r
-//        'top':wdw.scrollTop()+'px',\r
-        'overflow':'auto',\r
+        //        'display':'none',\r
+        //        'left':wdw.scrollLeft()+'px',\r
+        //        'top':wdw.scrollTop()+'px',\r
+        //        'overflow':'auto',\r
         'padding':'1ex',\r
         'border':'1px solid #666'\r
     });\r
+    var header = $J('<div/>').css('float','right');\r
+    var container = $J('<div/>').css('overflow','auto');\r
+    var footer = $J('<div/>');\r
+    div.append(header).append(container).append(footer);\r
+\r
     //div.appendTo('body'); //necessary to properly display the div size\r
     if(content instanceof $J){\r
-        div.append(content);\r
+        container.append(content);\r
     }else if(typeof content == 'string'){\r
-        div.html(""+content);\r
+        container.html(""+content);\r
     }else{\r
         div.css('overflow',''); //clear overflow\r
-        var container = $J('<div/>').css('overflow','auto');\r
         var table = $J('<table/>');\r
         container.append(table);\r
         var insert = function(e1,e2){\r
@@ -1467,7 +1471,7 @@ function PopupDiv(content){
             }\r
         }\r
     }\r
-    div.attr('id',this.defaultId+"_"+(new Date().getTime()));\r
+    \r
     this.getFocusId = function(){\r
         return this.defaultId+'_focus';\r
     }\r
@@ -1490,8 +1494,28 @@ function PopupDiv(content){
     p.defaultId = 'popup_'+(new Date().getTime());\r
     p.focusId = p.defaultId+'_focus';\r
 \r
+    p.okButtonClass =  'component_icon button icon_ok';\r
+    p.cancelButtonClass = 'component_icon button icon_cancel';\r
     //p.wdow = p.$J(window);\r
     //methods:\r
+\r
+    p.addButton = function(onTop, caption, classNames, callback){\r
+        var $J = this.$J;\r
+        var div = $J($J(this.getDiv()).children()[onTop ? 0 : 2]);\r
+        var a = $J('<a/>').html(caption).addClass(classNames).attr('href','#').click(function(evt){callback(evt); return false;});\r
+        div.append(a);\r
+        return a;\r
+    },\r
+\r
+    p.addCancelButton = function(caption, removeOnClick){\r
+        var me = this;\r
+        addButton(false,caption,this.cancelButtonClass, removeOnClick ? function(){me.remove()} : function(){me.hide()});\r
+    },\r
+\r
+    p.addOkButton = function(caption, callbackOnClick){\r
+        addButton(false,caption,this.okButtonClass, callbackOnClick);\r
+    },\r
+\r
     p.getId = function(){\r
         var div = this.getDiv();\r
         if(!(div.attr('id'))){\r
@@ -1500,7 +1524,12 @@ function PopupDiv(content){
         return div.attr('id');\r
     };\r
     //p.createButtons({'ok':function...,'cancel':function,...});\r
-   \r
+   p.createButtons = function(jQueryElement){\r
+     var bottomDiv = this.$J(this.getDiv().children()[2]);\r
+     for(k in dict){\r
+         bottomDiv.append(this.$J('<a/>'))\r
+     }\r
+   },\r
 \r
     p.setAsPopupOf = function(invoker,removeOnBlur){\r
         if(!(invoker.is('a') || invoker.is('input[type=button]') || invoker.is('button') ||\r
@@ -1596,17 +1625,36 @@ function PopupDiv(content){
 \r
     p.show = function(){\r
         var div = this.getDiv();\r
+        var me = this;\r
 \r
         if(!div.parent().length){\r
             div.appendTo('body');\r
         }\r
-        //set the div as opacity 0 but displayable\r
+        //set the div invisible but displayable to calculate the size (callbackPreShow)\r
         div.css({\r
-            'visibility':'visible'\r
-        }).fadeTo(0,0).show();\r
+            'visibility':'hidden'\r
+        }).show();\r
 \r
         if(this.callbackPreShow){\r
             this.callbackPreShow();\r
+\r
+            //set all subdivs to same width. Must be done when the element is full showing\r
+            //apparently, even opacity is considered not fully showing\r
+            var subdiv = div.children();\r
+            consolelog(subdiv);\r
+            var maxw = 0;\r
+            var $J= me.$J;\r
+            var max = Math.max;\r
+            subdiv.each(function(i,d){\r
+                //consolelog(i);\r
+                maxw = max(maxw,$J(d).width());\r
+            });\r
+            subdiv.each(function(i,d){\r
+                $J(d).css('minWidth',maxw+'px');\r
+            });\r
+            $J(subdiv[1]).css('maxHeight',(div.height()-$J(subdiv[0]).outerHeight()-$J(subdiv[2]).outerHeight()-\r
+                ($J(subdiv[1]).outerHeight(true)-$J(subdiv[1]).height()))+'px');\r
+            //done\r
         }\r
 \r
        \r
@@ -1614,13 +1662,14 @@ function PopupDiv(content){
         var shadow = div.clone(true,true).empty().css({\r
             'backgroundColor':'#000',\r
             'borderColor':'#000',\r
+            'visibility':'visible',\r
             'zIndex':this.zIndex-1\r
         }).removeAttr('tabindex').fadeTo(0,0);\r
         var id = this.getId();\r
         shadow.attr('id',id+'_shadow'); //for use in hide\r
         shadow.insertAfter(div);\r
 \r
-        var me = this;\r
+        \r
         var postShowFcn = function(){\r
             var rect = me.getBounds.apply(me);\r
             shadow.css({\r
@@ -1628,7 +1677,10 @@ function PopupDiv(content){
                 'top':(rect.y + me.shadowOffset)+'px',\r
                 'width':(rect.width)+'px',\r
                 'height':(rect.height)+'px'\r
-            }).fadeTo(0,me.shadowOpacity);\r
+            }).fadeTo(me.defaultFadeTime,me.shadowOpacity);\r
+\r
+            \r
+            \r
             if(me.callbackPostShow){\r
                 me.callbackPostShow.apply(me);\r
             }\r
@@ -1637,7 +1689,7 @@ function PopupDiv(content){
         var arg1 = arguments.length && arguments[0] instanceof Function ? arguments[0] : this.defaultFadeTime;\r
         var arg2 = arguments.length && arguments[arguments.length-1] instanceof Function ? arguments[arguments.length-1] : undefined;\r
 \r
-        div.fadeTo(arg1,1,function(){\r
+        div.hide().css('visibility','visible').show(arg1,function(){\r
             postShowFcn();\r
             if(arg2){\r
                 arg2();\r

diff --git a/telemeta/htdocs/timeside/src/player.js b/telemeta/htdocs/timeside/src/player.js
index abf0e8aed196f78b0fb4bb06ee5c6c03cd2ac4cc..ece27fada398f2cff83780123d5f95d54c485cb7 100644 (file)
--- a/telemeta/htdocs/timeside/src/player.js
+++ b/telemeta/htdocs/timeside/src/player.js
@@ -328,7 +328,8 @@ var Player = TimesideClass.extend({
             'dislay':'none',
             'position':'absolute',
             'zIndex':1000,
-            'overflow':'auto'
+            'overflow':'auto',
+            'display':'none' //TODO: remove this
             //'backgroundColor':'#666'
         });
         $J('body').append(popupMarker);
@@ -352,26 +353,25 @@ var Player = TimesideClass.extend({
     },
 
     showMarkerPopup: function(markerIndex){
-        var popup = this.getMarkerPopup();
-       // consolelog(popup.attr('id'));
-        
-        if(popup.attr('id') != 'markerpopup'+markerIndex){
-            
-            var marker = this.getMarkerMap().toArray()[markerIndex];
-            var pos = this.getSoundPosition();
-            var mPos = marker.offset;
-            var span = 0.3;
-            
-            if(pos>=mPos-span && pos<=mPos+span){
-                consolelog('songpos: '+pos+' nextmarkerpos:'+mPos);
-                popup.attr('id','markerpopup'+markerIndex);
-                popup.find('.title').html(marker.title);
-                popup.find('.description').html(marker.desc);
-                if(!popup.is(':visible')){
-                    popup.show('fast');
-                }
-            }
-        }
+//        var popup = this.getMarkerPopup();
+//
+//        if(popup.attr('id') != 'markerpopup'+markerIndex){
+//
+//            var marker = this.getMarkerMap().toArray()[markerIndex];
+//            var pos = this.getSoundPosition();
+//            var mPos = marker.offset;
+//            var span = 0.3;
+//
+//            if(pos>=mPos-span && pos<=mPos+span){
+//                consolelog('songpos: '+pos+' nextmarkerpos:'+mPos);
+//                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() {

diff --git a/telemeta/htdocs/timeside/src/timeside.js b/telemeta/htdocs/timeside/src/timeside.js
index 30f33f880afe4120d6ebff3b37174b525d3be3ac..5435ba5ee9ef8c821d0c2aa0fb26aa729b359577 100644 (file)
--- a/telemeta/htdocs/timeside/src/timeside.js
+++ b/telemeta/htdocs/timeside/src/timeside.js
@@ -176,14 +176,14 @@ var TimesideClass = Class.extend({
 
         //first of all, instantiate the power function once (and not inside the function or function's loop):
         var mpow = Math.pow; //instantiate mpow once
-        var format = function(integer,ceilAsPowerOfTen){
+        var format = function(integer,minimumNumberOfDigits){
             var n = ""+integer;
-            if(!(ceilAsPowerOfTen)){
-                return n;
-            }
+//            if(!(ceilAsPowerOfTen)){
+//                return n;
+//            }
             var zero = "0"; //instantiating once increases performances???
-            for(var i=0; i< ceilAsPowerOfTen; i++){
-                if(integer<mpow(10,i+1)){
+            for(var i=1; i< minimumNumberOfDigits; i++){
+                if(integer<mpow(10,i)){
                     n = zero+n;
                 }
             }
@@ -211,6 +211,8 @@ var TimesideClass = Class.extend({
             }else if(f=='C'){
                 separator = ".";
                 ret[i]=format(round(time*100),2);
+                consolelog('NOW=======================================');
+                consolelog(time);
             }else if(f=='D'){
                 separator = ".";
                 ret[i]=format(round(time*10),1);

diff --git a/telemeta/templates/telemeta_default/home.html b/telemeta/templates/telemeta_default/home.html
index 8fab57a29912d37b016a4dc4a4c265c94822f021..a9c0d25f0c56195af9a27101dac4fb551a3d6f0e 100644 (file)
--- a/telemeta/templates/telemeta_default/home.html
+++ b/telemeta/templates/telemeta_default/home.html
@@ -6,7 +6,7 @@
 <script src="{% url telemeta-timeside "src/playlist.js" %}" type="text/javascript"></script>
 <script>
     jQuery(document).ready(function(){
-        $('#_new_playlist').bind("click.bla",function(e){var p = popup;
+        jQuery('#_new_playlist').bind("click.bla",function(e){var p = popup;
             return p.show(p.createDivDialog({'title':'','description':''}, function(data){playlistUtils.add(data)}),e);
         });
     });

diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index 88e5eda16ba4546ccea0dfa1a243d92cb03d7b27..8621a39a08ca9ab23e3e48e6d462d0fe08edcb05 100644 (file)
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -67,10 +67,11 @@
 
     jQuery(document).ready(function(){
         var ar = [];
-        for(var i=0; i<1000; i++){
+        for(var i=0; i<100; i++){
             ar.push('<a href=#>'+i+'</a>');
         }
         var p = new PopupDiv(ar.join('<br/>'));
+        //var p = new PopupDiv({'title':"azzo",'description':'w'});
          consolelog(p);
             p.getDiv().find('a').each(function(i,aa){
                 jQuery(aa).click(function(){alert(jQuery(aa).html());p.hide();return false;});