[CLEANUP] Page Module: Do hovering via CSS, not JS

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

@@ -31,91 +31,9 @@ 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
 	 */
@@ -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');

typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_list_sysnote.css

@@ -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;
 }
 

typo3/sysext/t3skin/Resources/Public/Css/structure/module_web_page.css

@@ -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;
 }
 

typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_list_sysnote.css

@@ -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;
 }
 

typo3/sysext/t3skin/Resources/Public/Css/visual/module_web_page.css

@@ -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;
 }