From e853709da5ae2f8087f5f6c444ac44e31e71cbea Mon Sep 17 00:00:00 2001
From: Jordan Eldredge <jordaneldredge@gmail.com>
Date: Tue, 9 Dec 2014 22:26:07 -0800
Subject: [PATCH] Add Options context menu

Fixes #111
---
 css/context-menu.css | 60 ++++++++++++++++++++++++++++++++++++++++++++
 css/winamp.css       | 47 +++++++++++++++++++++++++++++-----
 index.html           | 29 +++++++++++++++++++--
 js/context.js        | 27 ++++++++++++++++++++
 js/winamp.js         | 16 +++++++++---
 5 files changed, 168 insertions(+), 11 deletions(-)
 create mode 100644 css/context-menu.css
 create mode 100644 js/context.js

diff --git a/css/context-menu.css b/css/context-menu.css
new file mode 100644
index 00000000..2d1cb69d
--- /dev/null
+++ b/css/context-menu.css
@@ -0,0 +1,60 @@
+#context-menu,
+#context-menu ul
+{
+    display: none;
+    z-index: 50; /* Gross */
+    background-color: #FFFFFF;
+    position: absolute;
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    border: 1px solid #A7A394;
+    cursor: default;
+    box-shadow: 2px 2px 4px rgba(0,0,0,.5);
+}
+
+#context-menu li {
+    position: relative;
+    font-family: 'Tahoma';
+    font-size: 11px;
+    color: black;
+    white-space: nowrap;
+    margin: 2px;
+    padding: 1px 18px 3px 18px;
+    display: block;
+}
+#context-menu li a {
+    text-decoration: none;
+    color: black;
+    cursor: default;
+}
+
+#context-menu li:hover {
+    background-color: #224EB7;
+    color: #FFFFFF;
+}
+
+#context-menu li.hr {
+    padding: 2px 0;
+}
+
+#context-menu li.hr:hover {
+    background-color: #FFFFFF;
+}
+
+#context-menu li.hr hr {
+    border: none;
+    height: 1px;
+    background-color: #A7A394;
+    margin: 0;
+    padding: 0;
+}
+
+#context-menu ul {
+    left: 100%;
+    margin-left: -3px;
+}
+
+#context-menu li:hover ul {
+    display: block;
+}
diff --git a/css/winamp.css b/css/winamp.css
index f38e33a6..b111de41 100755
--- a/css/winamp.css
+++ b/css/winamp.css
@@ -55,12 +55,25 @@ body {
     -webkit-transform-origin: top left;
 }
 
+.doubled #context-menu {
+    -moz-transform: scale(.5);
+    -moz-transform-origin: top left;
+    -webkit-transform: scale(.5);
+    -webkit-transform-origin: top left;
+}
+
 #winamp.loading {
+    background-image: none;
     background-color: #FFFFFF;
     border: 2px solid #dddddd;
 }
-#winamp.loading #loading {
-    display: block;
+/* Hide everything whil we are loading */
+#winamp.loading * {
+    display: none;
+}
+
+#loading {
+    display: none;
     text-align: center;
     font-size: 20px;
     height: 30px;
@@ -69,9 +82,11 @@ body {
     top: 0; left: 0; bottom: 0; right: 0;
 }
 
-#loading {
-    display: none;
+/* Only show loading div while we are loading */
+#winamp.loading #loading {
+    display: block;
 }
+
 #winamp.closed { display: none; }
 
 #title-bar {
@@ -112,9 +127,21 @@ body {
     left: 6px;
     /* background-image: TITLEBAR.BMP via Javascript */
 }
-#title-bar #option:active {
+#title-bar #option #context-menu {
+    display: none;
+    top: 12px;
+    left: 0px;
+}
+#title-bar #option:active,
+#title-bar #option.selected
+{
     background-position: 0 -9px;
 }
+#title-bar #option:active #context-menu,
+#title-bar #option.selected #context-menu
+{
+    display: block;
+}
 
 #title-bar #minimize {
     left: 244px;
@@ -657,9 +684,17 @@ body {
 /* Shade View */
 #winamp.shade {
     height: 14px;
-    overflow: hidden;
 }
 
+.shade .media-info,
+.shade .windows,
+.shade #volume,
+.shade #balance,
+.shade .shuffle-repeat,
+.shade .status
+{
+    display: none;
+}
 .shade #title-bar {
     background-position: -27px -42px;
     cursor:url('../cursors/MAINMENU.PNG'), auto;
diff --git a/index.html b/index.html
index 2d4933dd..d6384bcb 100755
--- a/index.html
+++ b/index.html
@@ -11,13 +11,35 @@
         <meta property="og:url" content="http://jordaneldredge.com/projects/winamp2-js/" />
         <meta property="og:image" content="http://jordaneldredge.com/projects/winamp2-js/preview.png" />
         <link rel='stylesheet' type='text/css' href='css/winamp.css' />
+        <link rel='stylesheet' type='text/css' href='css/context-menu.css' />
         <link rel="shortcut icon" sizes="16x16 32x32" href="favicon.ico">
     </head>
     <body>
         <div id='winamp' class='loading stop'>
             <div id='loading'>Loading...</div>
             <div id='title-bar' class='selected'>
-                <div id='option'></div>
+                <div id='option'>
+                    <ul id='context-menu'>
+                        <li><a href='https://github.com/captbaritone/winamp2-js' target='_blank'>Winamp2-js...</a></li>
+                        <li class='hr'><hr /></li>
+                        <li id='context-play-file'>Play File...</li>
+                        <li class='dropdown'>
+                            <ul>
+                                <li id='context-load-skin'>Load Skin...</li>
+                                <li class='hr'><hr /></li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'>&lt;Base Skin&gt;</li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/MacOSXAqua1-5.wsz'>Mac OSX v1.5 (Aqua)</li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/TopazAmp1-2.wsz'>TopazAmp</li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/Vizor1-01.wsz'>Vizor</li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/XMMS-Turquoise.wsz'>XMMS Turquoise </li>
+                                <li class='skin-select' data-skin-url='https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/ZaxonRemake1-0.wsz'>Zaxon Remake</li>
+                            </ul>
+                            Skins
+                        </li>
+                        <li class='hr'><hr /></li>
+                        <li id='context-exit'>Exit</li>
+                    </ul>
+                </div>
                 <div id='shade-time'>
                     <div id='shade-minus-sign'></div>
                     <div id='shade-minute-first-digit' class='character'></div>
@@ -99,6 +121,7 @@
         <script src="js/skin.js"></script>
         <script src="js/multi-display.js"></script>
         <script src="js/hotkeys.js"></script>
+        <script src="js/context.js"></script>
         <script src="js/winamp.js"></script>
         <script type="text/javascript">
             if(Browser.isCompatible()) {
@@ -109,10 +132,12 @@
                         'url': "https://cdn.rawgit.com/captbaritone/llama/master/llama-2.91.mp3",
                         'name': "1. DJ Mike Llama - Llama Whippin' Intro"
                     },
-                    'skinUrl': 'https://cdn.rawgit.com/captbaritone/winamp2-js/master/skins/base-2.91.wsz'
+                    'skinUrl':
+                    'https://cdn.rawgit.com/captbaritone/winamp-skins/master/v2/base-2.91.wsz'
                 });
 
                 Hotkeys.init(winamp);
+                Context.init(winamp);
             } else {
                 document.getElementById('winamp').style.display = 'none';
                 document.getElementById('browser-compatibility').style.display = 'block';
diff --git a/js/context.js b/js/context.js
new file mode 100644
index 00000000..efbec1fd
--- /dev/null
+++ b/js/context.js
@@ -0,0 +1,27 @@
+Context = {
+    init: function(winamp) {
+        document.onclick = function() {
+            winamp.closeOptionMenu();
+        }
+
+        var skinSelectNodes = document.getElementsByClassName('skin-select');
+        for(var i = 0; i < skinSelectNodes.length; i++) {
+            skinSelectNodes[i].onclick = function() {
+                winamp.setSkinByUrl(this.dataset.skinUrl);
+            }
+        }
+        document.getElementById('context-play-file').onclick = function(event) {
+            winamp.openFileDialog();
+            // Makes the option menu close. Not 100% sure why
+            event.stopPropagation();
+        };
+        document.getElementById('context-load-skin').onclick = function(event) {
+            winamp.openFileDialog();
+            // Makes the option menu close. Not 100% sure why
+            event.stopPropagation();
+        };
+        document.getElementById('context-exit').onclick = function() {
+            winamp.close();
+        };
+    }
+}
diff --git a/js/winamp.js b/js/winamp.js
index dfc3fedb..dcd3cd20 100755
--- a/js/winamp.js
+++ b/js/winamp.js
@@ -51,7 +51,7 @@ Winamp = {
         this.setVolume(options.volume);
         this.setBalance(options.balance);
         this.loadFromUrl(options.mediaFile.url, options.mediaFile.name);
-        this.skin.setSkinByUrl(options.skinUrl);
+        this.setSkinByUrl(options.skinUrl);
 
         this._registerListeners();
         return this;
@@ -114,8 +114,9 @@ Winamp = {
             window.addEventListener('mouseup',handleUp);
         });
 
-        this.nodes.option.onclick = function() {
-            // We don't support playing from URLs any more
+        this.nodes.option.onclick = function(event) {
+            event.stopPropagation();
+            this.classList.toggle('selected');
         }
 
         this.nodes.close.onclick = function() {
@@ -315,6 +316,10 @@ Winamp = {
         this.nodes.winamp.classList.add(className);
     },
 
+    closeOptionMenu: function() {
+        this.nodes.option.classList.remove('selected');
+    },
+
     // From 0-100
     setVolume: function(volume) {
         // Ensure volume does not go out of bounds
@@ -459,6 +464,11 @@ Winamp = {
         this.fileManager.bufferFromUrl(url, this._loadBuffer.bind(this));
     },
 
+    setSkinByUrl: function(url) {
+        this.nodes.winamp.classList.add('loading');
+        this.skin.setSkinByUrl(url);
+    },
+
     _loadBuffer: function(buffer) {
         // Note, this will not happen right away
         this.media.loadBuffer(buffer, this._setMetaData.bind(this));