From e589edca773ca5cb80232e08a0c69a5a9a0d3b42 Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordan@jordaneldredge.com>
Date: Sun, 22 Oct 2017 11:10:05 -0700
Subject: [PATCH] Implement hover ourselves (sad face)

Fixes #408
---
 js/components/PlaylistWindow/MiscMenu.js      |  6 +--
 js/components/PlaylistWindow/PlaylistMenu.js  | 49 ++++++++++++++++++-
 js/components/PlaylistWindow/RemoveMenu.js    |  8 +--
 js/components/PlaylistWindow/SelectionMenu.js |  6 +--
 js/components/Skin.js                         | 18 ++++---
 5 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/js/components/PlaylistWindow/MiscMenu.js b/js/components/PlaylistWindow/MiscMenu.js
index d145982e..fe76ab46 100644
--- a/js/components/PlaylistWindow/MiscMenu.js
+++ b/js/components/PlaylistWindow/MiscMenu.js
@@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
 
 const MiscMenu = props => (
   <PlaylistMenu id="playlist-misc-menu">
-    <li className="sort-list" />
-    <li className="file-info" onClick={props.fileInfo} />
-    <li className="misc-options" />
+    <div className="sort-list" />
+    <div className="file-info" onClick={props.fileInfo} />
+    <div className="misc-options" />
   </PlaylistMenu>
 );
 
diff --git a/js/components/PlaylistWindow/PlaylistMenu.js b/js/components/PlaylistWindow/PlaylistMenu.js
index 4cd0075f..785e87e5 100644
--- a/js/components/PlaylistWindow/PlaylistMenu.js
+++ b/js/components/PlaylistWindow/PlaylistMenu.js
@@ -1,6 +1,45 @@
 import React from "react";
 import classnames from "classnames";
 
+let cursorX;
+let cursorY;
+window.document.addEventListener("mousemove", e => {
+  cursorX = e.pageX;
+  cursorY = e.pageY;
+});
+
+// We implement hover ourselves, because we hate ourselves and https://stackoverflow.com/a/13259049/1263117
+class Entry extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hover: false };
+  }
+
+  componentDidMount() {
+    const domRect = this.node.getBoundingClientRect();
+    this.setState({
+      hover:
+        cursorX >= domRect.left &&
+        cursorX <= domRect.right &&
+        cursorY >= domRect.top &&
+        cursorY <= domRect.bottom
+    });
+  }
+
+  render() {
+    return (
+      <li
+        ref={node => (this.node = node)}
+        onMouseEnter={() => this.setState({ hover: true })}
+        onMouseLeave={() => this.setState({ hover: false })}
+        className={classnames({ hover: this.state.hover })}
+      >
+        {this.props.children}
+      </li>
+    );
+  }
+}
+
 export default class PlaylistMenu extends React.Component {
   constructor(props) {
     super(props);
@@ -40,8 +79,14 @@ export default class PlaylistMenu extends React.Component {
         })}
         onClick={this._handleClick}
       >
-        <div className="bar" />
-        <ul>{this.props.children}</ul>
+        <div className="bar" />,
+        {this.state.selected && (
+          <ul>
+            {React.Children.map(this.props.children, (child, i) => (
+              <Entry key={i}>{child}</Entry>
+            ))}
+          </ul>
+        )}
       </div>
     );
   }
diff --git a/js/components/PlaylistWindow/RemoveMenu.js b/js/components/PlaylistWindow/RemoveMenu.js
index ccb7a7b0..fcdb72c7 100644
--- a/js/components/PlaylistWindow/RemoveMenu.js
+++ b/js/components/PlaylistWindow/RemoveMenu.js
@@ -6,10 +6,10 @@ import PlaylistMenu from "./PlaylistMenu";
 
 const RemoveMenu = props => (
   <PlaylistMenu id="playlist-remove-menu">
-    <li className="remove-misc" />
-    <li className="remove-all" onClick={props.removeAll} />
-    <li className="crop" onClick={props.crop} />
-    <li className="remove-selected" onClick={props.removeSelected} />
+    <div className="remove-misc" />
+    <div className="remove-all" onClick={props.removeAll} />
+    <div className="crop" onClick={props.crop} />
+    <div className="remove-selected" onClick={props.removeSelected} />
   </PlaylistMenu>
 );
 
diff --git a/js/components/PlaylistWindow/SelectionMenu.js b/js/components/PlaylistWindow/SelectionMenu.js
index 425b4997..8df16db2 100644
--- a/js/components/PlaylistWindow/SelectionMenu.js
+++ b/js/components/PlaylistWindow/SelectionMenu.js
@@ -5,9 +5,9 @@ import PlaylistMenu from "./PlaylistMenu";
 
 const SelectionMenu = props => (
   <PlaylistMenu id="playlist-selection-menu">
-    <li className="invert-selection" onClick={props.invertSelection} />
-    <li className="select-zero" onClick={props.selectZero} />
-    <li className="select-all" onClick={props.selectAll} />
+    <div className="invert-selection" onClick={props.invertSelection} />
+    <div className="select-zero" onClick={props.selectZero} />
+    <div className="select-all" onClick={props.selectAll} />
   </PlaylistMenu>
 );
 
diff --git a/js/components/Skin.js b/js/components/Skin.js
index f3e82dff..8d50c082 100644
--- a/js/components/Skin.js
+++ b/js/components/Skin.js
@@ -80,27 +80,27 @@ const imageSelectors = {
 
   PLAYLIST_REMOVE_MENU_BAR: ["#playlist-remove-menu.selected .bar"],
   PLAYLIST_REMOVE_ALL: ["#playlist-remove-menu .remove-all"],
-  PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .remove-all:hover"],
+  PLAYLIST_REMOVE_ALL_SELECTED: ["#playlist-remove-menu .hover .remove-all"],
   PLAYLIST_CROP: ["#playlist-remove-menu .crop"],
-  PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .crop:hover"],
+  PLAYLIST_CROP_SELECTED: ["#playlist-remove-menu .hover .crop"],
   PLAYLIST_REMOVE_SELECTED: ["#playlist-remove-menu .remove-selected"],
   PLAYLIST_REMOVE_SELECTED_SELECTED: [
-    "#playlist-remove-menu .remove-selected:hover"
+    "#playlist-remove-menu .hover .remove-selected"
   ],
   PLAYLIST_REMOVE_MISC: ["#playlist-remove-menu .remove-misc"],
-  PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .remove-misc:hover"],
+  PLAYLIST_REMOVE_MISC_SELECTED: ["#playlist-remove-menu .hover .remove-misc"],
 
   PLAYLIST_SELECT_MENU_BAR: ["#playlist-selection-menu.selected .bar"],
   PLAYLIST_INVERT_SELECTION: ["#playlist-selection-menu .invert-selection"],
   PLAYLIST_INVERT_SELECTION_SELECTED: [
-    "#playlist-selection-menu .invert-selection:hover"
+    "#playlist-selection-menu .hover .invert-selection"
   ],
   PLAYLIST_SELECT_ZERO: ["#playlist-selection-menu .select-zero"],
   PLAYLIST_SELECT_ZERO_SELECTED: [
-    "#playlist-selection-menu .select-zero:hover"
+    "#playlist-selection-menu .hover .select-zero"
   ],
   PLAYLIST_SELECT_ALL: ["#playlist-selection-menu .select-all"],
-  PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .select-all:hover"],
+  PLAYLIST_SELECT_ALL_SELECTED: ["#playlist-selection-menu .hover .select-all"],
 
   EQ_WINDOW_BACKGROUND: ["#equalizer-window:not(.shade)"],
   EQ_TITLE_BAR: [".equalizer-top"],
@@ -254,7 +254,9 @@ const cursorSelectors = {
     "#equalizer-window .title-bar",
     "#equalizer-window.shade",
     "#equalizer-window.shade input"
-  ]
+  ],
+  PNORMAL: ["#playlist-window"],
+  PVSCROLL: ["#playlist-window .playlist-scrollbar-wrapper"]
 };
 
 Object.keys(FONT_LOOKUP).forEach(character => {