Skip to content

Commit

Permalink
Basic theming support
Browse files Browse the repository at this point in the history 
Allows changing various aspects of the player, from colors, to the curve on buttons (border-radius).
  • Loading branch information
@Andrew-J-Larson
Andrew-J-Larson committed Jul 4, 2023
1 parent 1c738df commit 04dabe4
Showing 1 changed file with 107 additions and 48 deletions.
155 changes: 107 additions & 48 deletions javascript/JZZ.gui.Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,70 @@
function nop() {}
var _noBtn = { on: nop, off: nop, disable: nop, title: nop, div: {} };

var theme = {
base: {
backgroundColor: '#888',
borderWidth: '1px'
},
lbl: {
backgroundColor: '#fff',
color: '#aaa',
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
},
btn: {
borderRadius: '0px',
backgroundColor: {
on: '#ddd',
off: '#aaa',
disable: '#888',
close: '#f44'
},
borderColor: {
on: '#ccc',
off: '#ccc',
disable: '#aaa'
},
svgFill: {
on: '#000',
off: '#000',
disable: '#555'
}
},
rail: {
backgroundColor: {
enable: '#ccc',
disable: '#888'
},
borderColor: {
enable: '#ccc',
disable: '#aaa'
}
},
caret: {
backgroundColor: {
mouseDown: '#ddd',
mouseUp: '#aaa',
enable: '#aaa',
disable: '#888'
},
borderColor: {
enable: '#ccc',
disable: '#aaa'
}
},
svg: {
play: '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
pause: '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
stop: '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>',
loop: '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>',
more: '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/></svg>',
open: '<svg fill="#555" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10 4H2v16h20V6H12l-2-2z"/></svg>',
link: '<svg fill="#555" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>',
close: '<svg stroke="#ff8" xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7"><line x1="1" y1="1" x2="6" y2="6"/><line x1="1" y1="6" x2="6" y2="1"/></svg>'
}
};

function Btn(html) {
this.div = document.createElement('div');
this.div.style.display = 'inline-block';
Expand All @@ -27,40 +91,33 @@
this.div.style.top = '8px';
this.div.style.margin = '0';
this.div.style.padding = '2px';
this.div.style.borderRadius = theme.btn.borderRadius;
this.div.style.borderStyle = 'solid';
this.div.style.borderWidth = '1px';
this.div.style.borderColor = '#aaa';
this.div.style.backgroundColor = '#888';
this.div.style.borderWidth = theme.base.borderWidth;
this.div.style.borderColor = theme.btn.borderColor.disable;
this.div.style.backgroundColor = theme.btn.backgroundColor.disable;
this.div.style.lineHeight = '0';
this.div.style.lineSpasing = '0';
this.div.style.width = '18px';
this.div.style.height = '18px';
this.div.innerHTML = html;
}
Btn.prototype.on = function() {
this.div.style.backgroundColor = '#ddd';
this.div.style.borderColor = '#ccc';
this.div.firstChild.style.fill = '#000';
this.div.style.backgroundColor = theme.btn.backgroundColor.on;
this.div.style.borderColor = theme.btn.borderColor.on;
this.div.firstChild.style.fill = theme.btn.svgFill.on;
};
Btn.prototype.off = function() {
this.div.style.backgroundColor = '#aaa';
this.div.style.borderColor = '#ccc';
this.div.firstChild.style.fill = '#000';
this.div.style.backgroundColor = theme.btn.backgroundColor.off;
this.div.style.borderColor = theme.btn.borderColor.off;
this.div.firstChild.style.fill = theme.btn.svgFill.off;
};
Btn.prototype.disable = function() {
this.div.style.backgroundColor = '#888';
this.div.style.borderColor = '#aaa';
this.div.firstChild.style.fill = '#555';
this.div.style.backgroundColor = theme.btn.backgroundColor.disable;
this.div.style.borderColor = theme.btn.borderColor.disable;
this.div.firstChild.style.fill = theme.btn.svgFill.disable;
};
Btn.prototype.title = function(s) { this.div.title = s; };
var svg_play = '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M8 5v14l11-7z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
var svg_pause = '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/><path d="M0 0h24v24H0z" fill="none"/></svg>';
var svg_stop = '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M6 6h12v12H6z"/></svg>';
var svg_loop = '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/></svg>';
var svg_more = '<svg fill="#555" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/></svg>';
var svg_open = '<svg fill="#555" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M10 4H2v16h20V6H12l-2-2z"/></svg>';
var svg_link = '<svg fill="#555" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"><path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2z"/><path fill="none" d="M0 0h24v24H0z"/></svg>';
var svg_close = '<svg stroke="#ff8" xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7"><line x1="1" y1="1" x2="6" y2="6"/><line x1="1" y1="6" x2="6" y2="1"/></svg>';

function _stopProp(e) { e.stopPropagation(); e.preventDefault(); }

Expand All @@ -72,7 +129,7 @@
self.gui.style.margin = '0px';
self.gui.style.padding = '0px';
self.gui.style.borderStyle = 'none';
self.gui.style.backgroundColor = '#888';
self.gui.style.backgroundColor = theme.base.backgroundColor;
self.gui.style.width = '270px';
self.gui.style.height = '40px';

Expand All @@ -81,7 +138,7 @@
var step = 28;

if (arg.play) {
self.playBtn = new Btn(svg_play);
self.playBtn = new Btn(theme.svg.play);
self.playBtn.div.style.left = left + 'px';
left += step;
self.playBtn.div.title = 'play';
Expand All @@ -91,7 +148,7 @@
else self.playBtn = _noBtn;

if (arg.pause) {
self.pauseBtn = new Btn(svg_pause);
self.pauseBtn = new Btn(theme.svg.pause);
self.pauseBtn.div.style.left = left + 'px';
left += step;
self.pauseBtn.div.title = 'pause';
Expand All @@ -101,7 +158,7 @@
else self.pauseBtn = _noBtn;

if (arg.stop) {
self.stopBtn = new Btn(svg_stop);
self.stopBtn = new Btn(theme.svg.stop);
self.stopBtn.div.style.left = left + 'px';
left += step;
self.stopBtn.div.title = 'stop';
Expand All @@ -111,7 +168,7 @@
else self.stopBtn = _noBtn;

if (arg.loop) {
self.loopBtn = new Btn(svg_loop);
self.loopBtn = new Btn(theme.svg.loop);
self.loopBtn.div.style.left = left + 'px';
left += step;
self.loopBtn.div.title = 'loop';
Expand All @@ -121,7 +178,7 @@
else self.loopBtn = _noBtn;

if (arg.midi) {
self.midiBtn = new Btn(svg_more);
self.midiBtn = new Btn(theme.svg.more);
self.midiBtn.div.style.left = right + 'px';
right -= step;
self.midiBtn.div.title = 'midi';
Expand All @@ -144,15 +201,15 @@
else self.midiBtn = _noBtn;

if (arg.link) {
self.linkBtn = new Btn(svg_link);
self.linkBtn = new Btn(theme.svg.link);
self.linkBtn.div.style.left = right + 'px';
right -= step;
self.linkBtn.div.title = 'link';
self.gui.appendChild(self.linkBtn.div);
}

if (arg.file) {
self.fileBtn = new Btn(svg_open);
self.fileBtn = new Btn(theme.svg.open);
self.fileBtn.div.style.left = right + 'px';
right -= step;
self.fileBtn.div.title = 'file';
Expand Down Expand Up @@ -185,12 +242,12 @@
self.closeBtn.style.left = '262px';
self.closeBtn.style.margin = '0';
self.closeBtn.style.padding = '0';
self.closeBtn.style.backgroundColor = '#f44';
self.closeBtn.style.backgroundColor = theme.btn.backgroundColor.close;
self.closeBtn.style.width = '7px';
self.closeBtn.style.height = '7px';
self.closeBtn.style.lineHeight = '0';
self.closeBtn.style.lineSpasing = '0';
self.closeBtn.innerHTML = svg_close;
self.closeBtn.innerHTML = theme.svg.close;
self.closeBtn.title = 'close';
self.closeBtn.addEventListener('click', function() { self.destroy(); });
self.gui.appendChild(self.closeBtn);
Expand All @@ -207,9 +264,10 @@
self.lbl.style.height = '12px';
self.lbl.style.padding = '0';
self.lbl.style.textAlign = 'center';
self.lbl.style.color = '#aaa';
self.lbl.style.fontSize = '12px';
self.lbl.style.fontFamily = 'Arial, Helvetica, sans-serif';
self.lbl.style.backgroundColor = theme.lbl.backgroundColor;
self.lbl.style.color = theme.lbl.color;
self.lbl.style.fontSize = theme.lbl.fontSize;
self.lbl.style.fontFamily = theme.lbl.fontFamily;
self.gui.appendChild(self.lbl);

self.rail = document.createElement('div');
Expand All @@ -222,10 +280,10 @@
self.rail.style.height = '0';
self.rail.style.padding = '1px';
self.rail.style.borderStyle = 'solid';
self.rail.style.borderWidth = '1px';
self.rail.style.borderWidth = theme.base.borderWidth;
self.rail.style.borderRadius = '2px';
self.rail.style.borderColor = '#aaa';
self.rail.style.backgroundColor = '#888';
self.rail.style.borderColor = theme.rail.borderColor.disable;
self.rail.style.backgroundColor = theme.rail.backgroundColor.disable;
self.gui.appendChild(self.rail);

self.caret = document.createElement('div');
Expand All @@ -238,10 +296,10 @@
self.caret.style.left = '-5px';
self.caret.style.padding = '4px';
self.caret.style.borderStyle = 'solid';
self.caret.style.borderWidth = '1px';
self.caret.style.borderWidth = theme.base.borderWidth;
self.caret.style.borderRadius = '6px';
self.caret.style.borderColor = '#aaa';
self.caret.style.backgroundColor = '#888';
self.caret.style.borderColor = theme.caret.borderColor.disable;
self.caret.style.backgroundColor = theme.caret.backgroundColor.disable;
self.caret.addEventListener('mousedown', function(e) { self._mousedown(e); });
self.rail.appendChild(self.caret);

Expand Down Expand Up @@ -321,20 +379,20 @@
this.midiBtn.disable();
if (this._conn) this.midiBtn.off();
this.fileBtn.off();
this.rail.style.borderColor = '#aaa';
this.rail.style.backgroundColor = '#888';
this.caret.style.borderColor = '#aaa';
this.caret.style.backgroundColor = '#888';
this.rail.style.borderColor = theme.rail.borderColor.disable;
this.rail.style.backgroundColor = theme.rail.backgroundColor.disable;
this.caret.style.borderColor = theme.caret.borderColor.disable;
this.caret.style.backgroundColor = theme.caret.backgroundColor.disable;
};
Player.prototype.enable = function() {
this.playBtn.off();
this.pauseBtn.off();
this.stopBtn.off();
this.loopBtn.off();
if (this._conn) this.midiBtn.off();
this.rail.style.borderColor = '#ccc';
this.caret.style.backgroundColor = '#aaa';
this.caret.style.borderColor = '#ccc';
this.rail.style.borderColor = theme.rail.borderColor.enable;
this.caret.style.backgroundColor = theme.caret.backgroundColor.enable;
this.caret.style.borderColor = theme.caret.borderColor.enable;
};
Player.prototype.load = function(smf) {
var self = this;
Expand Down Expand Up @@ -656,7 +714,7 @@
Player.prototype._mousedown = function(e) {
if (_lftBtnDn(e) && this._player) {
if (!this._more) e.preventDefault();
this.caret.style.backgroundColor = '#ddd';
this.caret.style.backgroundColor = theme.caret.backgroundColor.mouseDown;
this._wasPlaying = this._playing;
this._player.pause();
this._caretX = e.clientX;
Expand All @@ -679,7 +737,7 @@
this._wasPlaying = undefined;
this._player.resume();
}
this.caret.style.backgroundColor = '#aaa';
this.caret.style.backgroundColor = theme.caret.backgroundColor.mouseUp;
this._caretX = undefined;
}
}
Expand Down Expand Up @@ -738,4 +796,5 @@

JZZ.gui.Player = Player;
JZZ.gui.Player.Btn = Btn;
JZZ.gui.Player.theme = theme;
});

0 comments on commit 04dabe4

Please sign in to comment.