mirror of
https://github.com/captbaritone/webamp.git
synced 2026-01-23 18:25:30 +00:00
Merge pull request #120 from captbaritone/context-menu
Add Options context menu
This commit is contained in:
Jordan Eldredge
commit
69659cbc7c
5 changed files with 168 additions and 11 deletions
60
css/context-menu.css
Normal file
60
css/context-menu.css
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
29
index.html
29
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'><Base Skin></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';
|
||||
|
|
|
|||
27
js/context.js
Normal file
27
js/context.js
Normal file
|
|
@ -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();
|
||||
};
|
||||
}
|
||||
}
|
||||
16
js/winamp.js
16
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));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue