From 0829a9fde03412af86d1e9383c16f180f7d75653 Mon Sep 17 00:00:00 2001
From: riccardo <riccardo@parisson.com>
Date: Fri, 4 Mar 2011 15:52:55 +0100
Subject: [PATCH] Menu selection (according to current page) fixed. Note that
 selecting a menu M and then a submenu keeps the M selected (although page
 adress changes) to remind which is the root menu::

---
 telemeta/htdocs/css/telemeta.css              |  21 +-
 telemeta/htdocs/js/application.js             |  36 +++
 telemeta/htdocs/timeside/src/controller.js    |   7 +-
 telemeta/htdocs/timeside/src/markermap.js     |   2 +-
 telemeta/htdocs/timeside/src/util.js          | 268 +++++++++++++-----
 .../telemeta_default/mediaitem_detail.html    |  88 ------
 6 files changed, 263 insertions(+), 159 deletions(-)

diff --git a/telemeta/htdocs/css/telemeta.css b/telemeta/htdocs/css/telemeta.css
index 49277b68..e0948622 100644
--- a/telemeta/htdocs/css/telemeta.css
+++ b/telemeta/htdocs/css/telemeta.css
@@ -409,6 +409,7 @@ form.login .submit {
  padding: .2em 20px;
 }
 * html #menu :link, * html #menu :visited { background-position: 1px 0 }
+/*
 #menu :link:hover, #menu :visited:hover {
  background-color: #FFF;
  color: #6a0307;
@@ -416,14 +417,32 @@ form.login .submit {
  border-bottom: .4em solid #FFF; 
  border-top: 2px solid #FFF;
 }
+
 #menu .active :link, #menu .active :visited {
- background-color: #FFF;border-bottom: .5em solid #6a0307;
+ background-color: #FFF; border-bottom: .5em solid #6a0307;
  color: #6a0307;
 }
 #menu .active :link:hover, #menu .active :visited:hover {
  background-color: #FFF;
  color: #6a0307;
     
+}*/
+#menu .active, #menu :link:hover, #menu :visited:hover{
+   background-color: #FFF;
+ color: #6a0307;
+ text-decoration:none;
+ border-bottom: .4em solid #FFF;
+ border-top: 2px solid #FFF;
+    background-color: #FFF;
+    /*border-bottom: .5em solid #6a0307;*/
+    
+    -webkit-border-top-left-radius:5px 5px;
+    moz-border-radius-topleft: 5px 5px;
+    border-top-left-radius: 5px 5px;
+    -webkit-border-top-right-radius:5px 5px;
+    moz-border-radius-topright: 5px 5px;
+    border-top-right-radius: 5px 5px;
+
 }
 
 /* Footer (borrowed from Trac) */
diff --git a/telemeta/htdocs/js/application.js b/telemeta/htdocs/js/application.js
index f94f4cd8..2978e5dc 100644
--- a/telemeta/htdocs/js/application.js
+++ b/telemeta/htdocs/js/application.js
@@ -8,7 +8,43 @@ function foldInfoBlocks() {
     });
 }
 
+
+function setSelectedMenu(){
+    var menus = $('#menu a');
+    //build collections/items from http:/site/collections/items,
+    //being http:/site/ = window.location.origin
+    
+    //function for normalizing paths (removes last n occurrences of the slash)
+    var normalize = function(str){
+        return str.replace(/\/+$/,"");
+    }
+    var pageOrigin = normalize(window.location.origin);
+    var pageHref = normalize(window.location.href);
+    menus.each(function(){
+        ///if we are at home, the window location href corresponds to window location origin,
+        //so we select only links whose link points EXACTLY to the origin (home link)
+        var linkHref = normalize(this.href);
+        if(pageOrigin===pageHref){
+            if(pageHref == linkHref){
+                jQuery(this).addClass('active');
+            }else{
+                jQuery(this).removeClass('active');
+            }
+        }else{
+            //here, on the other hand, we select if a link points to a page or super page
+            //of the current paqge
+            if(linkHref!=pageOrigin && pageHref.match("^"+linkHref+".*")){
+                jQuery(this).addClass('active');
+            }else{
+                jQuery(this).removeClass('active');
+            }
+        }
+        
+    })
+}
+
 $(document).ready(function() {
     foldInfoBlocks();
+    setSelectedMenu();
 });
 
diff --git a/telemeta/htdocs/timeside/src/controller.js b/telemeta/htdocs/timeside/src/controller.js
index 70e7b56d..1abaa3f5 100644
--- a/telemeta/htdocs/timeside/src/controller.js
+++ b/telemeta/htdocs/timeside/src/controller.js
@@ -47,14 +47,14 @@ TimeSide(function($N) {
 
         _onMarkerMove: function(e, data) {
             if (this.cfg.map) {
-                selectMarkerTab(); //defined in mediaitem|_detail.html
+                $N.Util.selectMarkerTab(); //defined in utils.js
                 this.cfg.map.move(this.cfg.map.byId(data.id), data.offset);
             }
         },
 
         _onMarkerAdd: function(e, data) {
             if (this.cfg.map) {
-                selectMarkerTab(); //defined in mediaitem|_detail.html
+                $N.Util.selectMarkerTab(); //defined in mediaitem|_detail.html
                 //this.refreshMarkersText(this.cfg.map);
                 this.cfg.map.addNew(data.offset);
             //this.updateMarkersDiv(this.cfg.map, data.offset);
@@ -97,7 +97,8 @@ TimeSide(function($N) {
                             //We call mediaitem_detail.setUpTabs from controller once all markers have been loaded
                             //this because setLabelDescription, which sets the label text according to the div width,
                             //needs to have all elements visible.
-                            setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div
+                            $N.Util.setUpTabs();
+                            //setUpTabs(); //which hides the marker div. Call with argument 1 to set up marker div
                             //as visible as startup
                         }
                         
diff --git a/telemeta/htdocs/timeside/src/markermap.js b/telemeta/htdocs/timeside/src/markermap.js
index 6571e4e2..f77b5e3d 100644
--- a/telemeta/htdocs/timeside/src/markermap.js
+++ b/telemeta/htdocs/timeside/src/markermap.js
@@ -437,7 +437,7 @@ TimeSide(function($N, $J) {
 
 
         //sets the length of the label description. Note that all elements must be visible.
-        //Therefore, we call nediaitem_detail.setUpTabs from controller once all markers have been loaded
+        //Therefore, we call $N.Util.setUpTabs() from controller once all markers have been loaded
         setLabelDescription: function(marker){
             var mDiv = marker.div;
             var e = this.getHtmElm;
diff --git a/telemeta/htdocs/timeside/src/util.js b/telemeta/htdocs/timeside/src/util.js
index 94c42dc9..2b7c8009 100755
--- a/telemeta/htdocs/timeside/src/util.js
+++ b/telemeta/htdocs/timeside/src/util.js
@@ -7,77 +7,213 @@
 
 TimeSide(function($N, $J) {
 
-$N.Util = {
-    _loadChild: function(container, tag, className, index, contents) {
-        var p = $N.cssPrefix;
-        var element = container.find('.' + p + className);
-        if (!element.length) {
-            element = $J(document.createElement(tag)).addClass(p + className);
-            if (contents[className]) {
-                element.text(contents[className]);
-            }
-            var children = container.children();
-            if (index < children.length) {
-                children.eq(index).before(element);
-            } else {
-                container.append(element);
+    $N.Util = {
+        _loadChild: function(container, tag, className, index, contents) {
+            var p = $N.cssPrefix;
+            var element = container.find('.' + p + className);
+            if (!element.length) {
+                element = $J(document.createElement(tag)).addClass(p + className);
+                if (contents[className]) {
+                    element.text(contents[className]);
+                }
+                var children = container.children();
+                if (index < children.length) {
+                    children.eq(index).before(element);
+                } else {
+                    container.append(element);
+                }
             }
-        }
-        return element;
-    },
-
-    _loadUI: function(container, skeleton, contents) {
-        var i = 0;
-        var elements = {};
-        with ($N.Util) {
-            if (skeleton[0]) {
-                $J(skeleton).each((function(i, selector) {
-                    var s = selector.split('.');
-                    elements[$N.Util.camelize(s[1])] = _loadChild(container, s[0], s[1], i++, contents);
-                }));
-            } else {
-                for (key in skeleton) {
-                    var s = key.split('.');
-                    var e = _loadChild(container, s[0], s[1], i++, contents);
-                    elements[$N.Util.camelize(s[1])] = e;
-                    $N.extend(elements, _loadUI(e, skeleton[key], contents));
+            return element;
+        },
+
+        _loadUI: function(container, skeleton, contents) {
+            var i = 0;
+            var elements = {};
+            with ($N.Util) {
+                if (skeleton[0]) {
+                    $J(skeleton).each((function(i, selector) {
+                        var s = selector.split('.');
+                        elements[$N.Util.camelize(s[1])] = _loadChild(container, s[0], s[1], i++, contents);
+                    }));
+                } else {
+                    for (key in skeleton) {
+                        var s = key.split('.');
+                        var e = _loadChild(container, s[0], s[1], i++, contents);
+                        elements[$N.Util.camelize(s[1])] = e;
+                        $N.extend(elements, _loadUI(e, skeleton[key], contents));
                     
+                    }
+                }
+                }
+            return elements;
+        },
+
+        loadUI: function(container, skeleton, contents) {
+            return $N.Util._loadUI($J(container), skeleton, contents);
+        },
+
+        makeTimeLabel: function(offset) {
+            var minutes = Math.floor(offset / 60);
+            if (minutes < 10)
+                minutes = '0' + minutes;
+            var seconds = Math.floor(offset % 60);
+            if (seconds < 10)
+                seconds = '0' + seconds;
+            return minutes + ':' + seconds;
+        },
+
+        camelize: function(str) {
+            var parts = str.split('-'), len = parts.length;
+            if (len == 1) return parts[0];
+
+            var camelized = str.charAt(0) == '-'
+            ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
+            : parts[0];
+
+            for (var i = 1; i < len; i++)
+                camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
+
+            return camelized;
+        },
+
+        setUpTabs:function(selIndex) {//called from within controller.js once all markers have been loaded.
+            //this is because we need all divs to be visible to calculate size. selIndex is optional, it defaults to 0
+            //
+            //declare variables:
+            var tabContainerHeight = '5ex'; //height for the tab container
+            var tabHeight = '3.5ex'; //height for the tab. Must be lower than tabContainerHeight
+            var tabPaddingTop ='.8ex'; //padding top of each tab. Increasing it will increase also the tab height, so
+            //compensate by decreasing tabHeight, in case. In any case, must be lower or equal to tabContainerHeight-tabHeight
+            var tabWidth = '10ex'; //width of each tab. Each tab from index 1 to n will be at left=n*tabWidth
+            var tabBottom ='-1px'; //bottom of each tab. Must be equal and opposite to the border of the div below the tab
+
+            //retrieve tab container:
+            var tabContainer = $("#tabs_container"); //change if tabContainer has to be retrieved diferently
+            //retrieve the tabs by checking the elements whose class name starts with "tab_"
+            //var tabs = $('a[class^="tab_"]'); //change if the tabs have to be determined differently.
+            var tabs = tabContainer.find('a[id^="tab_"]');
+            //function that retrieves the div relative to a tab (the div will be set visible.invisible according to tab click):
+            var tab2div = function(tab){
+                return $("#"+tab.attr("name"));
+            //ie, returns the element whose id is equal to the tab name.
+            //change here if div has to be determined differently
+            };
+            var selectedTabClassName = "tab_selected"; //change if needed
+            var unselectedTabClassName = "tab_unselected"; //change if needed
+            var tabClicked = function(index) {
+                for(var i=0; i<tabs.length; i++){
+                    var t = $(tabs[i]);
+                    if(i===index){
+                        t.removeClass(unselectedTabClassName).addClass(selectedTabClassName);
+                        tab2div(t).fadeIn('slow');
+                    }else{
+                        t.removeClass(selectedTabClassName).addClass(unselectedTabClassName);
+                        tab2div(t).hide();
+                    }
+                }
+                return false; //returning false avoids scroll of the anchor to the top of the page
+            //if the tab is an anchor, of course
+            };
+            //end of variables declaration
+
+            //tabContainer default css:
+            tabContainer.css({
+                'position':'relative',
+                'height':tabContainerHeight
+            });
+            //tabs default css:
+            tabs.css({
+                'position':'absolute',
+                'height':tabHeight,
+                'bottom':tabBottom,
+                'paddingTop':tabPaddingTop,
+                'width':tabWidth,
+                'color': '#000000',
+                'left':0, //this will be overridden for tabs from 1 to n (see below)
+                'textAlign':'center'
+            });
+            //setting the left property for all tabs from 1 to n
+            var left = parseFloat(tabWidth); //note that 40%, 33.3ex will be converted
+            //succesfully to 40 and 33.3 respectively
+            if(!isNaN(left)){
+                //retrieve the unit
+                var s = new String(left);
+                var unit = '';
+                if(s.length<tabWidth.length){
+                    unit = tabWidth.substring(s.length,tabWidth.length);
+                }
+                for(var i=1; i<tabs.length; i++){
+                    $(tabs[i]).css('left',(left*i)+unit);
                 }
             }
-        }
-        return elements;
-    },
-
-    loadUI: function(container, skeleton, contents) {
-        return $N.Util._loadUI($J(container), skeleton, contents);
-    },
-
-    makeTimeLabel: function(offset) {
-        var minutes = Math.floor(offset / 60);
-        if (minutes < 10)
-            minutes = '0' + minutes;
-        var seconds = Math.floor(offset % 60);
-        if (seconds < 10)
-            seconds = '0' + seconds;
-        return minutes + ':' + seconds;
-    },
-
-    camelize: function(str) {
-        var parts = str.split('-'), len = parts.length;
-        if (len == 1) return parts[0];
-
-        var camelized = str.charAt(0) == '-'
-          ? parts[0].charAt(0).toUpperCase() + parts[0].substring(1)
-          : parts[0];
-
-        for (var i = 1; i < len; i++)
-          camelized += parts[i].charAt(0).toUpperCase() + parts[i].substring(1);
-
-        return camelized;
-    }
 
-}
+            for (var i=0;i<tabs.length;i++){
+                // introduce a new scope (round brackets)
+                //otherwise i is retrieved from the current scope and will be always equal to tabs.length
+                //due to this loop
+                (function(tabIndex){
+                    $(tabs[i]).click(function(){
+                        return tabClicked(tabIndex);
+                    });
+                })(i);
+            }
+
+            this.setRoundBorder(tabs,'5px','5px',[0,1]);
+
+            if(!(selIndex)){
+                selIndex = 0;
+            }
+            $(tabs[selIndex]).trigger("click");
+        },
+
+        selectMarkerTab: function(){
+            $('#tab_markers').trigger("click");
+        },
+        //set cross browser round borders.
+        //elements: the html element or elements (jQuery syntax)
+        //hRadius the horizontal radius, or the horizontal vertical radius if the latter is omitted (see below)
+        //vRadius OPTIONAL the vertical radius. If missing, it defaults to hRadius
+        //angles: OTPIONAL. An array object of the corner indices where to apply radius. Indices are
+        //      considered clockwise starting from the top left corner,ie:
+        //      0=topleft, 1 topright, 2 bottomright, 3 bottomleft
+        //      If missing, it defaults to [0,1,2,3] (all indices)
+        setRoundBorder: function(elements, hRadius, vRadius, whichAngles){
+            if(!(vRadius)){
+                vRadius = hRadius;
+            }
+            var cssVal = hRadius+' '+vRadius;
+            if(!(whichAngles)){
+                whichAngles = [0,1,2,3];
+            }
+            $(elements).each(function(){
+                var element = $(this);
+                for(var i=0; i<whichAngles.length; i++){
+                    var keys=[];
+                    if(whichAngles[i]===0){
+                        keys=['-webkit-border-top-left-radius','moz-border-radius-topleft','border-top-left-radius'];
+                    }else if(whichAngles[i]===1){
+                        keys=['-webkit-border-top-right-radius','moz-border-radius-topright','border-top-right-radius'];
+                    }else if(whichAngles[i]===2){
+                        keys=['-webkit-border-bottom-right-radius','moz-border-radius-bottomright','border-bottom-right-radius'];
+                    }else if(whichAngles[i]===3){
+                        keys=['-webkit-border-bottom-left-radius','moz-border-radius-bottomleft','border-bottom-left-radius'];
+                    }
+                    if(keys){
+                        for(var j=0; j<keys.length; j++){
+                            element.css(keys[j],cssVal);
+                        }
+                    }
+                //            element.css('-webkit-border-top-left-radius',hRadius+' '+vRadius);
+                //            element.css('moz-border-radius-topleft',hRadius+' '+vRadius);
+                //            element.css('border-top-left-radius',hRadius+' '+vRadius);
+                }
+            });
+
+        },
+        
+
+    }
 
-$N.notifyScriptLoad();
+    $N.notifyScriptLoad();
 
 });
diff --git a/telemeta/templates/telemeta_default/mediaitem_detail.html b/telemeta/templates/telemeta_default/mediaitem_detail.html
index e8179d53..a13efc49 100644
--- a/telemeta/templates/telemeta_default/mediaitem_detail.html
+++ b/telemeta/templates/telemeta_default/mediaitem_detail.html
@@ -26,94 +26,6 @@
     load_player({{ item.approx_duration.as_seconds }});
 </script>
 
-<!-- script for tabs-->
-<script type="text/javascript">
-    function setUpTabs(selIndex) {//called from within controller.js once all markers have been loaded.
-         //this is because we need all divs to be visible to calculate size. selIndex is optional, it defaults to 0
-         //
-        //declare variables:
-        var tabContainerHeight = '5ex'; //height for the tab container
-        var tabHeight = '3.5ex'; //height for the tab. Must be lower than tabContainerHeight
-        var tabPaddingTop ='.8ex'; //padding top of each tab. Increasing it will increase also the tab height, so
-        //compensate by decreasing tabHeight, in case. In any case, must be lower or equal to tabContainerHeight-tabHeight
-        var tabWidth = '10ex'; //width of each tab. Each tab from index 1 to n will be at left=n*tabWidth
-        var tabBottom ='-1px'; //bottom of each tab. Must be equal and opposite to the border of the div below the tab
-
-        //retrieve tab container:
-        var tabContainer = $("#tabs_container"); //change if tabContainer has to be retrieved diferently
-        //retrieve the tabs by checking the elements whose class name starts with "tab_"
-        //var tabs = $('a[class^="tab_"]'); //change if the tabs have to be determined differently.
-        var tabs = tabContainer.find('a[id^="tab_"]');
-        //function that retrieves the div relative to a tab (the div will be set visible.invisible according to tab click):
-        var tab2div = function(tab){
-            return $("#"+tab.attr("name"));
-            //ie, returns the element whose id is equal to the tab name.
-            //change here if div has to be determined differently
-        };
-        var selectedTabClassName = "tab_selected"; //change if needed
-        var unselectedTabClassName = "tab_unselected"; //change if needed
-        var tabClicked = function(index) {
-            for(var i=0; i<tabs.length; i++){
-                var t = $(tabs[i]);
-                if(i===index){
-                    t.removeClass(unselectedTabClassName).addClass(selectedTabClassName);
-                    tab2div(t).fadeIn('slow');
-                }else{
-                    t.removeClass(selectedTabClassName).addClass(unselectedTabClassName);
-                    tab2div(t).hide();
-                }
-            }
-            return false; //returning false avoids scroll of the anchor to the top of the page
-            //if the tab is an anchor, of course
-        };
-        //end of variables declaration
-
-        //tabContainer default css:
-        tabContainer.css({'position':'relative','height':tabContainerHeight});
-        //tabs default css:
-        tabs.css({'position':'absolute',
-            'height':tabHeight,
-            'bottom':tabBottom,
-            'paddingTop':tabPaddingTop,
-            'width':tabWidth,
-            'color': '#000000',
-            'left':0, //this will be overridden for tabs from 1 to n (see below)
-            'textAlign':'center'});
-        //setting the left property for all tabs from 1 to n
-        var left = parseFloat(tabWidth); //note that 40%, 33.3ex will be converted
-        //succesfully to 40 and 33.3 respectively
-        if(!isNaN(left)){
-            //retrieve the unit
-            var s = new String(left);
-            var unit = '';
-            if(s.length<tabWidth.length){
-                unit = tabWidth.substring(s.length,tabWidth.length);
-            }
-            for(var i=1; i<tabs.length; i++){
-                $(tabs[i]).css('left',(left*i)+unit);
-            }
-        }
-
-        for (var i=0;i<tabs.length;i++){
-            // introduce a new scope (round brackets)
-            //otherwise i is retrieved from the current scope and will be always equal to tabs.length
-            //due to this loop
-            (function(tabIndex){
-                $(tabs[i]).click(function(){return tabClicked(tabIndex);});
-                })(i);
-        }
-        
-        if(!(selIndex)){
-            selIndex = 0;
-        }
-        $(tabs[selIndex]).trigger("click");
-    }
-
-    function selectMarkerTab(){
-        $('#tab_markers').trigger("click");
-    }
-</script>
-
 {% endblock %}
 
 
-- 
2.39.5