jquery-ui: replace tabs by own implementation

website/agenda/planung/css/default.css

@@ -454,28 +454,6 @@ div.badge-error {
     background: none;
 }
 
-/*overwrite jquery ui*/
-#content .ui-tabs-nav {
-    border: 0;
-    background: #fff;
-    border-bottom: solid 1px #ccc;
-}
-
-#content .ui-tab a {
-    color: #fff;
-}
-
-#content .ui-tabs-tab {
-    border: 0;
-    background: #aaa;
-    padding: 6px;
-    border-radius: 3px 3px 0 0;
-}
-
-#content .ui-tab a:hover {
-    text-decoration: none;
-}
-
 /* overwrite tablesorter */
 tr.tablesorter-filter-row {
     background: #ccc;
@@ -652,3 +630,46 @@ input.image {
     overflow-y: scroll
 }
 
+div#tabs > div {
+    background:white;
+}
+
+ul.tabContainer{
+    background:none;
+    display:block;
+}
+ul.tabContainer li.active{
+    background:#1678c2;
+}
+ul.tabContainer li:hover{
+    border-bottom-color:#1678c2;
+}
+#content ul.tabContainer li a:hover{
+    text-decoration:none;
+}
+
+#content ul.tabContainer li.active a{
+    color:#fff;
+}
+#content ul.tabContainer li.active a:hover{
+    color:#fff;
+}
+ul.tabContainer li{
+    background:white;
+    display:inline-block;
+    padding:1rem;
+    cursor:pointer;
+    border: 1px solid rgba(0, 0, 0, .03);
+    box-shadow: 0 2px 2px rgba(0, 0, 0, .24),
+                0 0   2px rgba(0, 0, 0, .12);
+    margin-left:-3px;
+    margin-bottom:-2px;
+}
+ul.tabContainer li:first-child{
+    border-top-left-radius:0.5rem;
+    margin-left:4px;
+}
+ul.tabContainer li:last-child{
+    border-top-right-radius:0.5rem;
+}
+

website/agenda/planung/js/default.js

@@ -353,6 +353,52 @@ function copyToClipboard(text){
     document.execCommand("copy");
 }
 
+function setTabs(id, callback) {
+    var key = id + ' ul li';
+    var i = 0;
+
+    // preselect by URL hash
+    var pos=0;
+    $(key).each( function() {
+        if ( window.location.hash == "#"+$(this).children(":first").attr("href").substr(1) )
+            pos=i;
+        i++
+    })
+
+    var i = 0;
+    $(key).each( function() {
+        var elem = $(this);
+        var id = elem.children(":first").attr("href").substr(1);
+        if ( i==pos ) {
+            elem.addClass("active");
+            $('#'+id).show();
+        } else {
+            $('#'+id).hide();
+            elem.removeClass("active");
+        }
+        i++;
+    });
+
+    $( key ).on( "click", function(){
+        var id2 = $(this).children(":first").attr("href").substr(1);
+        $(key).each( function(){
+            var elem = $(this);
+            var id = elem.children(":first").attr("href").substr(1);
+            if (id==id2){
+                $('#'+id).show();
+                elem.addClass("active");
+            } else {
+                $('#'+id).hide();
+                elem.removeClass("active");
+            }
+        });
+        if (callback) callback();
+        return false;
+    });
+    $( id+' ul' ).addClass("tabContainer");
+    return false;
+}
+
 $(document).ready(
     function(){
         setupMenu();

website/agenda/planung/js/edit-series.js

@@ -247,8 +247,7 @@ $(document).ready(
         initCheckBoxes();
         addCheckBoxHandler();
 
-        $("#tabs").tabs();
+        setTabs('#tabs');
-        $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
 
         updateScheduleButtonName();
         initScheduleFields();

website/agenda/planung/js/edit_work_time.js

@@ -204,8 +204,7 @@ $(document).ready(
         initCheckBoxes();
         addCheckBoxHandler();
 
-        $("#tabs").tabs();
+        setTabs('#tabs');
-        $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
 
         updateScheduleButtonName();
         initScheduleFields();

website/agenda/planung/js/image.js

@@ -1,7 +1,7 @@
 
 // get current selected tab by tabs-id
 function getSelectedTab(id){
-    var selector = '#'+id+" li.ui-tabs-active a";
+    var selector = '#'+id+" li.active a";
     var tabValue = $(selector).attr("value");
     return tabValue;
 }

website/agenda/planung/js/studio-timeslots.js

@@ -68,16 +68,7 @@ $(document).ready(
         updateWeekdays();
     });
 
-    $("#tabs").tabs({
+    setTabs('#tabs');
-        activate: function(){
-            console.log("set style");
-            $('.tablesorter-scroller-header').css('width','95%');
-            $('.tablesorter-scroller-table').css('width','95%');
-            $('.tablesorter-scroller-header table').css('width','95%');
-            $('.tablesorter-scroller-table table').css('width','95%');
-        }
-    });
-    $('#tabs').removeClass('ui-widget ui-widget-content ui-corner-all');
 
        initTextWidth();
 

website/agenda/planung/templates/image.html

@@ -17,22 +17,19 @@
             addLocalization('image');
 
             //add tab change handler
-            $("#image-tabs").tabs({
+            setTabs("#image-tabs", function(){
-                activate: function(event, ui){
+                selectedImageTab = getSelectedTab('image-tabs');
-                    if (ui==null) return;
-                    selectedImageTab = getSelectedTab('image-tabs');
 
-                    <TMPL_IF .allow.create_image>
+                <TMPL_IF .allow.create_image>
-                        if(selectedImageTab=="upload"){
+                    if(selectedImageTab=="upload"){
-                            initUploadDialog();
+                        initUploadDialog();
-                            $('#imageList').hide();
+                        $('#imageList').hide();
-                            return;
+                        return;
-                        }
+                    }
-                    </TMPL_IF>
+                </TMPL_IF>
 
-                    //TODO: add confirm handler
+                //TODO: add confirm handler
-                    $('#imageList').show();
+                $('#imageList').show();
-                }
             });
             // get initially selected tab
             selectedImageTab = getSelectedTab('image-tabs');