fix not working quick-add mouseover in jdots

pixelegg/js/slider.js

@@ -12,12 +12,12 @@
 function show_pixelegg_header(_toggle, _delay)
 {
 	$j("#egw_fw_header").slideToggle();
-        
+
 	$j("#egw_fw_topmenu_info_items").animate({"margin-right": "20px","bottom": "0px","padding-right" : "0", "height": "0px"},_delay);
 	$j("#egw_fw_topmenu_info_items").css("position", "relative");
         $j("#egw_fw_topmenu_info_items").css("display", "flex");
         $j("#egw_fw_topmenu_info_items").css("float", "right");
-	
+
     $j("#egw_fw_sidebar").animate({'top':'52px'},_delay);
         $j("#egw_fw_tabs").animate({'margin-top':'12px'},_delay);
         $j(".egw_fw_ui_sidemenu_entry_header_active").css("background-position","95% -3000px");
@@ -43,14 +43,14 @@ function hide_pixelegg_header(_toggle, _delay)
 			"white-space": "nowrap",
 			},_delay);
 	$j(".egw_fw_ui_sidemenu_entry_header_active").css("background-position","95% 50%");
-      
+
 	$j("#egw_fw_topmenu_info_items").css("position", "fixed");
 	$j("#egw_fw_topmenu_info_items").css("z-index", "1000");
         // Form - Country Switch
         $j("#egw_fw_topmenu_info_items form").css("display", "none");
-        
+
         $j(".egw_fw_ui_tabs_header").css("height", "34px");
-        
+
         //Tab
         $j(".egw_fw_ui_tab_header").css("height", "24px");
             // ICON
@@ -60,12 +60,48 @@ function hide_pixelegg_header(_toggle, _delay)
             // H1
             $j(".egw_fw_ui_tabs_header h1").css("float", "none");
             $j(".egw_fw_ui_tabs_header h1").css("display", "inline");
-            
+
 
 	$j(_toggle).parent().removeClass("slideup");
 	$j(_toggle).parent().addClass("slidedown");
 }
 
+/*
+ * Replace all SVG images with inline SVG
+ */
+function replace_svg()
+{
+	$j('img.svg').each(function()
+	{
+		var $img = $j(this);
+		var imgID = $img.attr('id');
+		var imgClass = $img.attr('class');
+		var imgURL = $img.attr('src');
+
+		$j.get(imgURL, function(data)
+		{
+			// Get the SVG tag, ignore the rest
+			var $svg = $j(data).find('svg');
+
+			// Add replaced image's ID to the new SVG
+			if(typeof imgID !== 'undefined') {
+				$svg = $svg.attr('id', imgID);
+			}
+			// Add replaced image's classes to the new SVG
+			if(typeof imgClass !== 'undefined') {
+				$svg = $svg.attr('class', imgClass+' replaced-svg');
+			}
+
+			// Remove any invalid XML tags as per http://validator.w3.org
+			$svg = $svg.removeAttr('xmlns:a');
+
+			// Replace image with new SVG
+			$img.replaceWith($svg);
+
+		}, 'xml');
+	});
+}
+
 egw_LAB.wait(function() {
 	$j(document).ready(function() {
 
@@ -84,7 +120,7 @@ egw_LAB.wait(function() {
 		if (egw.preference('pixelegg_header_hidden')) {
 			hide_pixelegg_header($j('#slidetoggle'),0);
 		}
-         
+
 	});
 
 	// Override jdots height calcluation
@@ -99,85 +135,48 @@ egw_LAB.wait(function() {
 			+ 5;
 		return height;
 	};
+
+	/**
+	 * replace [+] on mouseover with quick-add selectbox
+	 *
+	 * Must run after DOM is ready!
+	 */
+	$j('#quick_add').on({
+		mouseover: function(ev){
+			// do NOT react on bubbeling events from contained selectbox
+			if (ev.relatedTarget.id != 'quick_add_selectbox')
+			{
+				$j(this).css({
+					transition: "0.2s ease-out 0s",
+					width: "166px",
+					'border-top-left-radius': "20px",
+					'background-color': "#0B5FA4"
+				});
+				$j('select', this).css({
+					transition: "0.1s linear 0.2s",
+					visibility: "visible"
+				});
+			}
+			ev.stopPropagation();
+		},
+		mouseout: function(ev){
+			// do NOT react on bubbeling events from contained selectbox
+			if (ev.relatedTarget.id != 'quick_add_selectbox')
+			{
+				$j(this).css({
+					transition: "0.2s ease-out 0s",
+					width: "16px",
+					'border-top-left-radius': "0px",
+					'background-color': "transparent"
+				});
+				$j('select', this).css({
+					transition: "0s linear 0s",
+					visibility: "hidden"
+				});
+			}
+			ev.stopPropagation();
+		}
+	});
+
+	replace_svg();
 });
-
-
-
-
-// ADD Button
-
-    function add_quick_Listeners(){
-   
-        if(window.addEventListener) {
-            // ADD
-            document.getElementById('quick_add').addEventListener("mouseover",quick_add_func_over,false);
-            document.getElementById('quick_add').addEventListener("mouseout",quick_add_func_out,false);
-        } else if (window.attachEvent){ // Added For Inetenet Explorer versions previous to IE9
-            document.getElementById('quick_add').attachEvent("onmouseover",quick_add_func_over);
-            document.getElementById('quick_add').attachEvent("onmouseout",quick_add_func_out);
-    }
-}
-        // Write your functions here
-    
-    function quick_add_func_over(){
-            this.style.transition = "0.2s ease-out 0s";
-            this.style.width = "166px";
-            this.style.borderTopLeftRadius = "20px";
-            this.style.backgroundColor = "#0B5FA4";
-            quick_add_selectbox.style.transition = "0.1s linear 0.2s";
-            quick_add_selectbox.style.visibility = "visible";      
-    }
-    
-    function quick_add_func_out(){
-            this.style.transition = "0.2s ease-out 0s";
-            this.style.width = "16px"; 
-            this.style.borderTopLeftRadius = "0px";
-            this.style.backgroundColor = "transparent";
-            quick_add_selectbox.style.transition = "0s linear 0s";
-            quick_add_selectbox.style.visibility = "hidden"; 
-    }
-    
- window.onload = add_quick_Listeners; 
-
-/* #egw_fw_topmenu_info_items {
-    bottom: 0;
-    display: flex;
-    float: right;
-    padding-right: 20px;
-    position: fixed;
-    text-align: right;
-    white-space: nowrap;
-    z-index: 1000;
-} */
-
- /*
-     * Replace all SVG images with inline SVG
-     */
-        $j('img.svg').each(function(){
-            var $img = $j(this);
-            var imgID = $img.attr('id');
-            var imgClass = $img.attr('class');
-            var imgURL = $img.attr('src');
-
-            $j.get(imgURL, function(data) {
-                // Get the SVG tag, ignore the rest
-                var $svg = $j(data).find('svg');
-
-                // Add replaced image's ID to the new SVG
-                if(typeof imgID !== 'undefined') {
-                    $svg = $svg.attr('id', imgID);
-                }
-                // Add replaced image's classes to the new SVG
-                if(typeof imgClass !== 'undefined') {
-                    $svg = $svg.attr('class', imgClass+' replaced-svg');
-                }
-
-                // Remove any invalid XML tags as per http://validator.w3.org
-                $svg = $svg.removeAttr('xmlns:a');
-
-                // Replace image with new SVG
-                $img.replaceWith($svg);
-
-            }, 'xml');
-
-        });