[CLEANUP] Page Module: Do hovering via CSS, not JS 44/29744/2
authorBenjamin Mack <benni@typo3.org>
Wed, 30 Apr 2014 13:07:03 +0000 (15:07 +0200)
committerNicole Cordes <typo3@cordes.co>
Fri, 2 May 2014 18:13:31 +0000 (20:13 +0200)
The ExtJS functionality for adding active classes can
be done via CSS hover pseudo classes.

This is faster (native browser functionality) and
also removes some ExtJS code. With this change
however, the hovering is not disabled
anymore when dragging.

Releases: 6.2
Resolves: #58359
Change-Id: Ifcc0307b436cf68dfcfe561444e779410978d576
Reviewed-on: https://review.typo3.org/29744
Tested-by: Stefan Neufeind
Reviewed-by: Nadir S.
Tested-by: Nadir S.
Reviewed-by: Nico Schober
Tested-by: Nico Schober
Reviewed-by: Christian Kuhn
Tested-by: Christian Kuhn
Reviewed-by: Nicole Cordes
Tested-by: Nicole Cordes
typo3/sysext/cms/layout/js/typo3pageModule.js
typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_list_sysnote.css
typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_page.css
typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_list_sysnote.css
typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_page.css

index a77371e..6ccd31f 100644 (file)
@@ -31,92 +31,10 @@ TYPO3.Components.PageModule = {
         * Initialization
         */
        init: function() {
-               this.enableHighlighting();
                this.enableDragDrop();
        },
 
        /**
-        * This method is used to bind the highlighting function "setElementActive"
-        * to the mouseover event and the "setElementInactive" to the mouseout event.
-        */
-       enableHighlighting: function() {
-               Ext.select('div.t3-page-ce')
-                       .on('mouseover',this.setElementActive, this)
-                       .on('mouseout',this.setElementInactive, this);
-               Ext.select('td.t3-page-column')
-                       .on('mouseover',this.setColumnActive, this)
-                       .on('mouseout',this.setColumnInactive, this);
-               Ext.select('#typo3-dblist-sysnotes div.single-note')
-                       .on('mouseover',this.setSysnoteActive, this)
-                       .on('mouseout',this.setSysnoteInactive, this);
-       },
-
-       /**
-        * This method is used to unbind the highlighting function "setElementActive"
-        * from the mouseover event and the "setElementInactive" from the mouseout event.
-        */
-       disableHighlighting: function() {
-               Ext.select('div.t3-page-ce')
-                       .un('mouseover', this.setElementActive, this)
-                       .un('mouseout', this.setElementInactive, this);
-               Ext.select('td.t3-page-column')
-                       .un('mouseover',this.setColumnActive, this)
-                       .un('mouseout',this.setColumnInactive, this);
-       },
-
-       /**
-        * This method is used as an event handler when the
-        * user hovers the a content element.
-        */
-       setElementActive: function(event, target) {
-               Ext.get(target).findParent('div.t3-page-ce', null, true).addClass('active');
-       },
-
-       /**
-        * This method is used as event handler to unset active state of
-        * a content element when the mouse of the user leaves the
-        * content element.
-        */
-       setElementInactive: function(event, target) {
-               Ext.get(target).findParent('div.t3-page-ce', null, true).removeClass('active');
-
-       },
-
-       /**
-        * This method is used as an event handler when the
-        * user hovers the a content element.
-        */
-       setColumnActive: function(event, target) {
-               Ext.get(target).findParent('td.t3-page-column', null, true).addClass('active');
-       },
-
-       /**
-        * This method is used as event handler to unset active state of
-        * a content element when the mouse of the user leaves the
-        * content element.
-        */
-       setColumnInactive: function(event, target) {
-               Ext.get(target).findParent('td.t3-page-column', null, true).removeClass('active');
-       },
-
-       /**
-        * This method is used as an event handler when the
-        * user hovers the a sysnote.
-        */
-       setSysnoteActive: function(event, target) {
-               Ext.get(target).findParent('div.single-note', null, true).addClass('active');
-       },
-
-       /**
-        * This method is used as event handler to unset active state of
-        * a sysnote when the mouse of the user leaves the sysnote.
-        */
-       setSysnoteInactive: function(event, target) {
-               Ext.get(target).findParent('div.single-note', null, true).removeClass('active');
-
-       },
-
-       /**
         * This method configures the drag'n'drop behavior in the page module
         */
        enableDragDrop: function() {
@@ -138,7 +56,6 @@ TYPO3.Components.PageModule = {
 
                                // Hide create new element button
                                this.el.findParent('td.t3-page-column', null, true).removeClass('active');
-                               TYPO3.Components.PageModule.disableHighlighting();
 
                                var dropZones = Ext.select('.t3-page-ce-dropzone');
                                var self = this;
@@ -188,7 +105,6 @@ TYPO3.Components.PageModule = {
                                this.el.child('.t3-page-ce-dragitem').removeClass('dragitem-shadow');
                                // Show create new element button again
                                this.el.child('.t3-icon-document-new').removeClass('drag-start');
-                               TYPO3.Components.PageModule.enableHighlighting();
 
                                // Remove dragitem-shadow after dragging
                                this.el.child('.t3-page-ce-dragitem').removeClass('dragitem-shadow');
index bfe14fc..4f383dd 100644 (file)
@@ -27,7 +27,7 @@ Sys notes
        visibility: hidden;
 }
 
-#typo3-dblist-sysnotes .single-note.active .header .right.icons {
+#typo3-dblist-sysnotes .single-note:hover .header .right.icons {
        visibility: visible;
 }
 
index d792952..de1a7f5 100644 (file)
@@ -121,7 +121,7 @@ div.t3-page-lang-copyce {
        margin-top: 30px;
 }
 
-.t3-page-ce.active .t3-page-ce-body {
+.t3-page-ce:hover .t3-page-ce-body {
        margin: 0;
 }
 
index 9e1b7be..c9ab7c8 100644 (file)
@@ -16,12 +16,12 @@ Sys notes
        background:  url(../../../../icons/ext/sys_note/icon-default.png) no-repeat top left;
 }
 
-#typo3-dblist-sysnotes .single-note.active .header {
+#typo3-dblist-sysnotes .single-note:hover .header {
        background-color: #666;
 }
 
-#typo3-dblist-sysnotes .single-note.active .header,
-#typo3-dblist-sysnotes .single-note.active .header span {
+#typo3-dblist-sysnotes .single-note:hover .header,
+#typo3-dblist-sysnotes .single-note:hover .header span {
        color: #d7d7d7;
 }
 
index fda057f..1786e50 100644 (file)
@@ -28,7 +28,7 @@ Web > Page
 }
 
 .t3-page-colHeader:hover .t3-page-colHeader-icons,
-.t3-page-column.active .t3-page-colHeader .t3-page-colHeader-icons {
+.t3-page-column:hover .t3-page-colHeader .t3-page-colHeader-icons {
        visibility: visible;
 }
 
@@ -52,16 +52,16 @@ Web > Page
 }
 
 .t3-page-ce .t3-page-ce-body,
-.t3-page-ce.active .t3-page-ce-body {
+.t3-page-ce:hover .t3-page-ce-body {
        background-color: #ffffff;
        border: 1px solid #ffffff;
        border-top: none;
 }
 
-.t3-page-ce.active .t3-page-ce-body {
+.t3-page-ce:hover .t3-page-ce-body {
        border-color: #5b5b5b;
 }
-.t3-page-column.active .t3-icon-document-new {
+.t3-page-column:hover .t3-icon-document-new {
        visibility: visible;
 }
 
@@ -73,11 +73,11 @@ Web > Page
        visibility: visible;
 }
 
-.t3-page-ce.active .t3-icon-document-new {
+.t3-page-ce:hover .t3-icon-document-new {
        visibility: visible;
 }
 
-.t3-page-ce.active .drag-start {
+.t3-page-ce:hover .drag-start {
        visibility: hidden;
 }
 
@@ -92,14 +92,14 @@ Web > Page
        filter: alpha(opacity = 60);
 }
 
-.t3-page-ce.t3-page-ce-hidden.active {
+.t3-page-ce.t3-page-ce-hidden:hover {
        -moz-opacity: 1.0;
        opacity: 1.0;
        filter: alpha(opacity = 100);
 }
 
-.t3-page-ce-hidden.active .t3-page-ce-body,
-.t3-page-ce-hidden.active .t3-page-ce-body a {
+.t3-page-ce-hidden:hover .t3-page-ce-body,
+.t3-page-ce-hidden:hover .t3-page-ce-body a {
        color: #000000;
 }
 
@@ -114,8 +114,8 @@ Web > Page
        filter: alpha(opacity = 60);
 }
 
-.t3-page-ce.active .t3-page-ce-body .t3-icon ,
-.t3-page-ce.active .t3-page-ce-body img {
+.t3-page-ce:hover .t3-page-ce-body .t3-icon ,
+.t3-page-ce:hover .t3-page-ce-body img {
        -moz-opacity: 1.0;
        opacity: 1.0;
        filter: alpha(opacity = 100);
@@ -181,8 +181,8 @@ td.t3-gridCell-restricted div.t3-row-header div {
        visibility: hidden;
 }
 
-.t3-page-ce.active .t3-row-header .ce-icons,
-.t3-page-ce.active .t3-row-header .ce-icons-left{
+.t3-page-ce:hover .t3-row-header .ce-icons,
+.t3-page-ce:hover .t3-row-header .ce-icons-left{
        visibility: visible;
 }
 
@@ -204,6 +204,6 @@ td.t3-gridCell-restricted div.t3-row-header div {
        box-shadow: 0 1px 12px rgba(0, 0, 0, 0.50);
 }
 
-.t3-page-ce.active .t3-row-header {
+.t3-page-ce:hover .t3-row-header {
        background-color: #666;
 }