Skip to content

Commit

Permalink
Merge pull request #14 from TheAlienDrew/patch-5
Browse files Browse the repository at this point in the history 
Basic theming support
  • Loading branch information
@jazz-soft
jazz-soft committed Jul 4, 2023
2 parents a39af18 + 9e565f9 commit 753cbc0
Showing 1 changed file with 117 additions and 50 deletions.
167 changes: 117 additions & 50 deletions javascript/JZZ.gui.Player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,77 @@
function nop() {}
var _noBtn = { on: nop, off: nop, disable: nop, title: nop, div: {} };

var theme = {
container: {
backgroundColor: '#888',
borderRadius: '0px',
borderWidth: '1px'
},
lbl: {
color: '#aaa',
fontSize: '12px',
fontFamily: 'Arial, Helvetica, sans-serif'
},
btn: {
borderRadius: '0px',
backgroundColor: {
on: '#ddd',
off: '#aaa',
disable: '#888'
},
borderColor: {
on: '#ccc',
off: '#ccc',
disable: '#aaa'
},
svgFill: {
on: '#000',
off: '#000',
disable: '#555'
},
close: {
borderRadius: '0px',
backgroundColor: '#f44'
}
},
rail: {
borderRadius: '2px',
borderWidth: '1px',
backgroundColor: {
enable: '#ccc',
disable: '#888'
},
borderColor: {
enable: '#ccc',
disable: '#aaa'
}
},
caret: {
borderRadius: '6px',
borderWidth: '1px',
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 +98,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.container.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 @@ -71,8 +135,9 @@
self.gui.style.boxSizing = 'content-box';
self.gui.style.margin = '0px';
self.gui.style.padding = '0px';
self.gui.style.borderRadius = theme.container.borderRadius;
self.gui.style.borderStyle = 'none';
self.gui.style.backgroundColor = '#888';
self.gui.style.backgroundColor = theme.container.backgroundColor;
self.gui.style.width = '270px';
self.gui.style.height = '40px';

Expand All @@ -81,7 +146,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 +156,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 +166,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 +176,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 +186,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 +209,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 +250,13 @@
self.closeBtn.style.left = '262px';
self.closeBtn.style.margin = '0';
self.closeBtn.style.padding = '0';
self.closeBtn.style.backgroundColor = '#f44';
self.closeBtn.style.borderRadius = theme.btn.close.borderRadius;
self.closeBtn.style.backgroundColor = theme.btn.close.backgroundColor;
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 +273,9 @@
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.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 +288,10 @@
self.rail.style.height = '0';
self.rail.style.padding = '1px';
self.rail.style.borderStyle = 'solid';
self.rail.style.borderWidth = '1px';
self.rail.style.borderRadius = '2px';
self.rail.style.borderColor = '#aaa';
self.rail.style.backgroundColor = '#888';
self.rail.style.borderWidth = theme.rail.borderWidth;
self.rail.style.borderRadius = theme.rail.borderRadius;
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 +304,10 @@
self.caret.style.left = '-5px';
self.caret.style.padding = '4px';
self.caret.style.borderStyle = 'solid';
self.caret.style.borderWidth = '1px';
self.caret.style.borderRadius = '6px';
self.caret.style.borderColor = '#aaa';
self.caret.style.backgroundColor = '#888';
self.caret.style.borderWidth = theme.caret.borderWidth;
self.caret.style.borderRadius = theme.caret.borderRadius;
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 +387,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 @@ -655,7 +721,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 @@ -678,7 +744,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 @@ -737,4 +803,5 @@

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

0 comments on commit 753cbc0

Please sign in to comment.