[TASK] tabmenu: Get rid of mouseOver/mouseOut 70/27270/3
authorStefan Neufeind <typo3.neufeind@speedpartner.de>
Sun, 2 Feb 2014 16:54:19 +0000 (17:54 +0100)
committerChristian Kuhn <lolli@schwarzbu.ch>
Sun, 2 Feb 2014 20:23:03 +0000 (21:23 +0100)
Tabmenu so far used mouseOver/mouseOut to set CSS-classes.
This is replaced with :hover functionality.

Change-Id: Ie62c017bca7bf26b1d48f1ae02ebab45090f3263
Resolves: #55600
Releases: 6.2
Reviewed-on: https://review.typo3.org/27270
Reviewed-by: Marcin Sągol
Tested-by: Marcin Sągol
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
typo3/sysext/backend/Classes/Template/DocumentTemplate.php
typo3/sysext/backend/Resources/Public/JavaScript/tabmenu.js
typo3/sysext/t3skin/Resources/Public/Css/structure/element_tab.css
typo3/sysext/t3skin/Resources/Public/Css/visual/element_tab.css

index 349e5b4..7235e95 100644 (file)
@@ -1744,17 +1744,16 @@ class DocumentTemplate {
                                if ($isEmpty && $dividers2tabs == 1) {
                                        continue;
                                }
-                               $mouseOverOut = ' onmouseover="DTM_mouseOver(this);" onmouseout="DTM_mouseOut(this);"';
                                $requiredIcon = '<img name="' . $id . '-' . $index . '-REQ" src="' . $GLOBALS['BACK_PATH'] . 'gfx/clear.gif" class="t3-TCEforms-reqTabImg" alt="" />';
                                if (!$foldout) {
                                        // Create TAB cell:
                                        $options[$tabRows][] = '
-                                                       <td class="' . ($isEmpty ? 'disabled' : 'tab') . '" id="' . $id . '-' . $index . '-MENU"' . $noWrap . $mouseOverOut . '>' . ($isEmpty ? '' : '<a href="#" onclick="' . htmlspecialchars($onclick) . '"' . ($def['linkTitle'] ? ' title="' . htmlspecialchars($def['linkTitle']) . '"' : '') . '>') . $def['icon'] . ($def['label'] ? htmlspecialchars($def['label']) : '&nbsp;') . $requiredIcon . $this->icons($def['stateIcon'], 'margin-left: 10px;') . ($isEmpty ? '' : '</a>') . '</td>';
+                                                       <td class="' . ($isEmpty ? 'disabled' : 'tab') . '" id="' . $id . '-' . $index . '-MENU"' . $noWrap . '>' . ($isEmpty ? '' : '<a href="#" onclick="' . htmlspecialchars($onclick) . '"' . ($def['linkTitle'] ? ' title="' . htmlspecialchars($def['linkTitle']) . '"' : '') . '>') . $def['icon'] . ($def['label'] ? htmlspecialchars($def['label']) : '&nbsp;') . $requiredIcon . $this->icons($def['stateIcon'], 'margin-left: 10px;') . ($isEmpty ? '' : '</a>') . '</td>';
                                        $titleLenCount += strlen($def['label']);
                                } else {
                                        // Create DIV layer for content:
                                        $divs[] = '
-                                               <div class="' . ($isEmpty ? 'disabled' : 'tab') . '" id="' . $id . '-' . $index . '-MENU"' . $mouseOverOut . '>' . ($isEmpty ? '' : '<a href="#" onclick="' . htmlspecialchars($onclick) . '"' . ($def['linkTitle'] ? ' title="' . htmlspecialchars($def['linkTitle']) . '"' : '') . '>') . $def['icon'] . ($def['label'] ? htmlspecialchars($def['label']) : '&nbsp;') . $requiredIcon . ($isEmpty ? '' : '</a>') . '</div>';
+                                               <div class="' . ($isEmpty ? 'disabled' : 'tab') . '" id="' . $id . '-' . $index . '-MENU">' . ($isEmpty ? '' : '<a href="#" onclick="' . htmlspecialchars($onclick) . '"' . ($def['linkTitle'] ? ' title="' . htmlspecialchars($def['linkTitle']) . '"' : '') . '>') . $def['icon'] . ($def['label'] ? htmlspecialchars($def['label']) : '&nbsp;') . $requiredIcon . ($isEmpty ? '' : '</a>') . '</div>';
                                }
                                // Create DIV layer for content:
                                $divs[] = '
index d036b49..299666a 100644 (file)
@@ -21,8 +21,7 @@
  *
  ***************************************************************/
 
-var DTM_array = DTM_array || [],
-       DTM_origClass = DTM_origClass || '';
+var DTM_array = DTM_array || [];
 
        // if tabs are used in a popup window the array might not exists
 if (!top.DTM_currentTabs) {
@@ -47,19 +46,11 @@ function DTM_activate(idBase,index,doToogle) {
        if (document.getElementById(idBase+'-'+index+'-DIV')) {
                if (doToogle && document.getElementById(idBase+'-'+index+'-DIV').style.display === 'block') {
                        document.getElementById(idBase+'-'+index+'-DIV').style.display = 'none';
-                       if (DTM_origClass === '') {
-                               document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tab';
-                       } else {
-                               DTM_origClass = 'tab';
-                       }
+                       document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tab';
                        top.DTM_currentTabs[idBase] = -1;
                } else {
                        document.getElementById(idBase+'-'+index+'-DIV').style.display = 'block';
-                       if (DTM_origClass === '') {
-                               document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tabact';
-                       } else {
-                               DTM_origClass = 'tabact';
-                       }
+                       document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tabact';
                        top.DTM_currentTabs[idBase] = index;
                }
        }
@@ -72,29 +63,14 @@ function DTM_toggle(idBase,index,isInit) {
                        document.getElementById(idBase+'-'+index+'-DIV').style.display = 'none';
                        if (isInit) {
                                document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tab';
-                       } else {
-                               DTM_origClass = 'tab';
                        }
                        top.DTM_currentTabs[idBase+'-'+index] = 0;
                } else {
                        document.getElementById(idBase+'-'+index+'-DIV').style.display = 'block';
                        if (isInit) {
                                document.getElementById(idBase+'-'+index+'-MENU').attributes.getNamedItem('class').nodeValue = 'tabact';
-                       } else {
-                               DTM_origClass = 'tabact';
                        }
                        top.DTM_currentTabs[idBase+'-'+index] = 1;
                }
        }
 }
-
-function DTM_mouseOver(obj) {
-               DTM_origClass = obj.attributes.getNamedItem('class').nodeValue;
-               obj.attributes.getNamedItem('class').nodeValue += '_over';
-}
-
-function DTM_mouseOut(obj) {
-               obj.attributes.getNamedItem('class').nodeValue = DTM_origClass;
-               DTM_origClass = '';
-}
-
index e972284..5e58164 100644 (file)
@@ -52,8 +52,7 @@ table.typo3-dyntabmenu td {
        padding: 0;
 }
 
-table.typo3-dyntabmenu td.disabled,
-table.typo3-dyntabmenu td.disabled_over {
+table.typo3-dyntabmenu td.disabled {
        padding: 5px 10px 5px 10px;
 }
 
@@ -66,14 +65,12 @@ table.typo3-dyntabmenu td a {
 }
 
 table.typo3-dyntabmenu td.tabact a,
-table.typo3-dyntabmenu td.tabact_over a,
-table#typo3-tabmenu td.tabact a,
-table#typo3-tabmenu td.tabact_over a {
+table#typo3-tabmenu td.tabact a {
        margin-top: 0px;
 }
 
-table.typo3-dyntabmenu td.tab_over a,
-table#typo3-tabmenu td.tab_over a {
+table.typo3-dyntabmenu td.tab:hover a,
+table#typo3-tabmenu td.tab:hover a {
        margin-top: 0px;
 }
 
@@ -87,11 +84,8 @@ div.typo3-dyntabmenu-divs-foldout div.c-tablayer {
 }
 
 div.typo3-dyntabmenu-divs-foldout div.tab,
-div.typo3-dyntabmenu-divs-foldout div.tab_over,
 div.typo3-dyntabmenu-divs-foldout div.tabact,
-div.typo3-dyntabmenu-divs-foldout div.tabact_over,
-div.typo3-dyntabmenu-divs-foldout div.disabled,
-div.typo3-dyntabmenu-divs-foldout div.disabled_over {
+div.typo3-dyntabmenu-divs-foldout div.disabled {
        margin-top: 5px;
 }
 
@@ -99,14 +93,8 @@ div.typo3-dyntabmenu-divs-foldout div.disabled {
        padding: 2px 2px 2px 18px;
 }
 
-div.typo3-dyntabmenu-divs-foldout div.disabled_over {
-       padding: 2px 2px 2px 18px;
-}
-
 div.typo3-dyntabmenu-divs-foldout div.tab a,
-div.typo3-dyntabmenu-divs-foldout div.tabact a,
-div.typo3-dyntabmenu-divs-foldout div.tab_over a,
-div.typo3-dyntabmenu-divs-foldout div.tabact_over a {
+div.typo3-dyntabmenu-divs-foldout div.tabact a {
        display: block;
        padding: 2px 2px 2px 18px;
 }
\ No newline at end of file
index 49687e2..2f40f82 100644 (file)
@@ -20,8 +20,7 @@ table#typo3-tabmenu td.disabled {
 }
 
 table.typo3-dyntabmenu td.tabact a,
-table.typo3-dyntabmenu td.tab_over a,
-table.typo3-dyntabmenu td.tabact_over a,
+table.typo3-dyntabmenu td.tab:hover a,
 table#typo3-tabmenu td.tabact,
 table#typo3-tabmenu td.tab:hover,
 table#typo3-tabmenu td.tabact:hover {
@@ -29,15 +28,14 @@ table#typo3-tabmenu td.tabact:hover {
        color: #000;
 }
 
-table.typo3-dyntabmenu td.tab_over a,
+table.typo3-dyntabmenu td.tab:hover a,
 table#typo3-tabmenu td.tab:hover {
        background-color: #eeeeee;
        border-color: #adadad;
        color: #606060;
 }
 
-table.typo3-dyntabmenu td.disabled,
-table.typo3-dyntabmenu td.disabled_over {
+table.typo3-dyntabmenu td.disabled {
        background: #e8e8e8;
        border: 1px solid #d6d6d6;
        color: #b7b7b7;
@@ -48,8 +46,7 @@ table.typo3-dyntabmenu td a {
        border-bottom: 1px solid #ffffff;
 }
 
-table.typo3-dyntabmenu td.tab a,
-table.typo3-dyntabmenu td.tab_over a {
+table.typo3-dyntabmenu td.tab a {
        border-bottom: 1px solid #c0c0c0;
 }
 
@@ -81,11 +78,8 @@ div.typo3-dyntabmenu-divs p.c-descr {
 
 /* Foldout tabs */
 div.typo3-dyntabmenu-divs-foldout div.tab,
-div.typo3-dyntabmenu-divs-foldout div.tab_over,
 div.typo3-dyntabmenu-divs-foldout div.tabact,
-div.typo3-dyntabmenu-divs-foldout div.tabact_over,
-div.typo3-dyntabmenu-divs-foldout div.disabled,
-div.typo3-dyntabmenu-divs-foldout div.disabled_over {
+div.typo3-dyntabmenu-divs-foldout div.disabled {
        border: solid black 1px;
        border-radius: 3px;
        -webkit-border-radius: 3px;
@@ -98,7 +92,7 @@ div.typo3-dyntabmenu-divs-foldout div.tab {
        background-repeat: no-repeat;
 }
 
-div.typo3-dyntabmenu-divs-foldout div.tab_over {
+div.typo3-dyntabmenu-divs-foldout div.tab:hover {
        background: #f6eab7;
        background-image: url('../../../../icons/gfx/ol/arrowbullet.gif');
        background-repeat: no-repeat;
@@ -110,7 +104,7 @@ div.typo3-dyntabmenu-divs-foldout div.tabact {
        background-repeat: no-repeat;
 }
 
-div.typo3-dyntabmenu-divs-foldout div.tabact_over {
+div.typo3-dyntabmenu-divs-foldout div.tabact:hover {
        background: #f6eab7;
        background-image: url('../../../../icons/gfx/ol/arrowbullet.gif');
        background-repeat: no-repeat;
@@ -121,15 +115,13 @@ div.typo3-dyntabmenu-divs-foldout div.disabled {
        color: #999;
 }
 
-div.typo3-dyntabmenu-divs-foldout div.disabled_over {
+div.typo3-dyntabmenu-divs-foldout div.disabled:hover {
        background: #f6eab7;
        color: #999;
 }
 
 div.typo3-dyntabmenu-divs-foldout div.tab a,
-div.typo3-dyntabmenu-divs-foldout div.tabact a,
-div.typo3-dyntabmenu-divs-foldout div.tab_over a,
-div.typo3-dyntabmenu-divs-foldout div.tabact_over a {
+div.typo3-dyntabmenu-divs-foldout div.tabact a {
        text-decoration: none;
        color: #000;
 }
\ No newline at end of file