slider and volume ctrl
This commit is contained in:
Gitea
parent
5082139e03
commit
2f8226d406
5 changed files with 206 additions and 104 deletions
|
|
@ -14,6 +14,7 @@ configure_file(image.js image.js)
|
|||
configure_file(button.js button.js)
|
||||
configure_file(enumeration.js enumeration.js)
|
||||
configure_file(player.js player.js)
|
||||
configure_file(slider.js slider.js)
|
||||
configure_file(songProgress.js songProgress.js)
|
||||
|
||||
add_subdirectory(helpers)
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
deps.push("views/view");
|
||||
deps.push("views/image");
|
||||
deps.push("views/songProgress");
|
||||
deps.push("views/slider");
|
||||
|
||||
deps.push("lib/wController/localModel");
|
||||
|
||||
|
|
@ -21,6 +22,7 @@
|
|||
var View = require("views/view");
|
||||
var Image = require("views/image");
|
||||
var SongProgress = require("views/songProgress");
|
||||
var Slider = require("views/slider");
|
||||
|
||||
var Model = require("lib/wController/localModel");
|
||||
|
||||
|
|
@ -49,14 +51,16 @@
|
|||
var artist = new Label(this._infoModels.artist);
|
||||
var album = new Label(this._infoModels.album);
|
||||
var song = new Label(this._infoModels.song);
|
||||
var spacer = new View(helper, {maxWidth: 50});
|
||||
var spacer = new View(helper, {maxWidth: 10});
|
||||
var progress = new SongProgress(ctrl.progress);
|
||||
var volume = new Slider(ctrl.volume, {maxWidth: 100});
|
||||
|
||||
this.append(artist, 0, 4, 1, 1, GridLayout.Aligment.LeftCenter);
|
||||
this.append(song, 1, 4, 1, 1, GridLayout.Aligment.LeftCenter);
|
||||
this.append(album, 2, 4, 1, 1, GridLayout.Aligment.LeftCenter);
|
||||
this.append(spacer, 0, 6, 3, 1, GridLayout.Aligment.LeftCenter);
|
||||
this.append(progress, 1, 5, 1, 1, GridLayout.Aligment.CenterCenter);
|
||||
this.append(volume, 1, 7, 1, 1, GridLayout.Aligment.CenterCenter);
|
||||
|
||||
this._uncyclic.push(this._infoModels.artist.destructor.bind(this._infoModels.artist));
|
||||
this._uncyclic.push(this._infoModels.song.destructor.bind(this._infoModels.song));
|
||||
|
|
|
|||
137
lorgar/views/slider.js
Normal file
137
lorgar/views/slider.js
Normal file
|
|
@ -0,0 +1,137 @@
|
|||
"use strict";
|
||||
(function() {
|
||||
var moduleName = "views/slider";
|
||||
|
||||
var deps = [];
|
||||
deps.push("views/view");
|
||||
|
||||
define(moduleName, deps, function() {
|
||||
var View = require("views/view");
|
||||
|
||||
var Slider = View.inherit({
|
||||
className: "Slider",
|
||||
constructor: function(controller, options) {
|
||||
var base = {
|
||||
minHeight: 10,
|
||||
maxHeight: 10
|
||||
};
|
||||
W.extend(base, options)
|
||||
var el = document.createElement("div");
|
||||
this._createBars();
|
||||
View.fn.constructor.call(this, controller, base, el);
|
||||
|
||||
this._seeking = false;
|
||||
this._createProxy();
|
||||
|
||||
this._f.on("value", this._onValue, this);
|
||||
this._f.on("enabled", this._onEnabled, this);
|
||||
|
||||
this._e.style.backgroundColor = "#eeeeee";
|
||||
this._e.appendChild(this._value);
|
||||
|
||||
if (this._f.enabled) {
|
||||
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
|
||||
this._e.addEventListener("touchstart", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchmove", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchend", W.touchToMouse, false);
|
||||
}
|
||||
},
|
||||
destructor: function() {
|
||||
if (this._seeking) {
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
}
|
||||
if (this._f.enabled) {
|
||||
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
|
||||
this._e.removeEventListener("touchstart", W.touchToMouse);
|
||||
this._e.removeEventListener("touchmove", W.touchToMouse);
|
||||
this._e.removeEventListener("touchend", W.touchToMouse);
|
||||
}
|
||||
|
||||
this._f.off("value", this._value, this);
|
||||
this._f.off("enabled", this._onEnabled, this);
|
||||
|
||||
View.fn.destructor.call(this);
|
||||
},
|
||||
_createBars: function() {
|
||||
this._value = document.createElement("div");
|
||||
|
||||
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
|
||||
this._value.style.height = "100%";
|
||||
this._value.style.width = "0";
|
||||
this._value.style.position = "absolute";
|
||||
this._value.style.top = "0";
|
||||
this._value.style.left = "0";
|
||||
},
|
||||
_createProxy: function () {
|
||||
this._proxy = {
|
||||
onMouseDown: this._onMouseDown.bind(this),
|
||||
onMouseUp: this._onMouseUp.bind(this),
|
||||
onMouseMove: this._onMouseMove.bind(this)
|
||||
}
|
||||
},
|
||||
_onData: function() {
|
||||
this._onValue(this._f.value);
|
||||
},
|
||||
_onEnabled: function(enabled) {
|
||||
if (enabled) {
|
||||
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
|
||||
this._e.addEventListener("touchstart", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchmove", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchend", W.touchToMouse, false);
|
||||
} else {
|
||||
if (this._seeking) {
|
||||
this._onMouseUp();
|
||||
}
|
||||
|
||||
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
|
||||
this._e.removeEventListener("touchstart", W.touchToMouse);
|
||||
this._e.removeEventListener("touchmove", W.touchToMouse);
|
||||
this._e.removeEventListener("touchend", W.touchToMouse);
|
||||
}
|
||||
},
|
||||
_onMouseDown: function(e) {
|
||||
if (e.which === 1) {
|
||||
window.addEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.addEventListener("mousemove", this._proxy.onMouseMove);
|
||||
this._seeking = true;
|
||||
|
||||
this._ap = this.getAbsolutePosition();
|
||||
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
|
||||
var nSeek = seek / this._w;
|
||||
if (this._seek !== nSeek) {
|
||||
this._seek = nSeek;
|
||||
this._f.setValue(this._seek);
|
||||
}
|
||||
}
|
||||
},
|
||||
_onMouseMove: function(e) {
|
||||
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
|
||||
var nSeek = seek / this._w;
|
||||
if (this._seek !== nSeek) {
|
||||
this._seek = nSeek;
|
||||
this._f.setValue(this._seek);
|
||||
}
|
||||
},
|
||||
_onMouseUp: function() {
|
||||
delete this._ap;
|
||||
delete this._seek;
|
||||
|
||||
this._seeking = false;
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
},
|
||||
_onValue: function(pb) {
|
||||
this._value.style.width = pb * 100 + "%";
|
||||
},
|
||||
_resetTheme: function() {
|
||||
View.fn._resetTheme.call(this);
|
||||
|
||||
this._value.style.backgroundColor = View.theme.primaryColor || "#ff0000";
|
||||
}
|
||||
});
|
||||
|
||||
return Slider;
|
||||
})
|
||||
})();
|
||||
|
||||
|
|
@ -3,12 +3,12 @@
|
|||
var moduleName = "views/songProgress";
|
||||
|
||||
var deps = [];
|
||||
deps.push("views/view");
|
||||
deps.push("views/slider");
|
||||
|
||||
define(moduleName, deps, function() {
|
||||
var View = require("views/view");
|
||||
var Slider = require("views/slider");
|
||||
|
||||
var SongProgress = View.inherit({
|
||||
var SongProgress = Slider.inherit({
|
||||
className: "SongProgress",
|
||||
constructor: function(controller, options) {
|
||||
var base = {
|
||||
|
|
@ -16,116 +16,51 @@
|
|||
maxHeight: 10
|
||||
};
|
||||
W.extend(base, options)
|
||||
var el = document.createElement("div");
|
||||
this._createBars();
|
||||
View.fn.constructor.call(this, controller, base, el);
|
||||
|
||||
this._seeking = false;
|
||||
this._createProxy();
|
||||
Slider.fn.constructor.call(this, controller, base);
|
||||
|
||||
this._f.on("load", this._onLoad, this);
|
||||
this._f.on("playback", this._onPlayback, this);
|
||||
|
||||
this._e.style.backgroundColor = "#eeeeee";
|
||||
this._e.appendChild(this._loadProgress);
|
||||
this._e.appendChild(this._playbackProgress);
|
||||
|
||||
this._e.addEventListener("mousedown", this._proxy.onMouseDown, false);
|
||||
this._e.addEventListener("touchstart", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchmove", W.touchToMouse, false);
|
||||
this._e.addEventListener("touchend", W.touchToMouse, false);
|
||||
this._e.insertBefore(this._loadProgress, this._value);
|
||||
},
|
||||
destructor: function() {
|
||||
if (this._seeking) {
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
}
|
||||
|
||||
this._e.removeEventListener("mousedown", this._proxy.onMouseDown);
|
||||
this._e.removeEventListener("touchstart", W.touchToMouse);
|
||||
this._e.removeEventListener("touchmove", W.touchToMouse);
|
||||
this._e.removeEventListener("touchend", W.touchToMouse);
|
||||
|
||||
this._f.off("load", this._onLoad, this);
|
||||
this._f.off("playback", this._onPlayback, this);
|
||||
|
||||
View.fn.destructor.call(this);
|
||||
Slider.fn.destructor.call(this);
|
||||
},
|
||||
_createBars: function() {
|
||||
Slider.fn._createBars.call(this);
|
||||
|
||||
this._loadProgress = document.createElement("div");
|
||||
this._playbackProgress = document.createElement("div");
|
||||
|
||||
this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00";
|
||||
this._loadProgress.style.backgroundColor = Slider.theme.secondaryColor || "#ffff00";
|
||||
this._loadProgress.style.height = "100%";
|
||||
this._loadProgress.style.width = "0";
|
||||
this._loadProgress.style.position = "absolute";
|
||||
this._loadProgress.style.top = "0";
|
||||
this._loadProgress.style.left = "0";
|
||||
|
||||
this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
|
||||
this._playbackProgress.style.height = "100%";
|
||||
this._playbackProgress.style.width = "0";
|
||||
this._playbackProgress.style.position = "absolute";
|
||||
this._playbackProgress.style.top = "0";
|
||||
this._playbackProgress.style.left = "0";
|
||||
},
|
||||
_createProxy: function () {
|
||||
this._proxy = {
|
||||
onMouseDown: this._onMouseDown.bind(this),
|
||||
onMouseUp: this._onMouseUp.bind(this),
|
||||
onMouseMove: this._onMouseMove.bind(this)
|
||||
}
|
||||
},
|
||||
_onData: function() {
|
||||
Slider.fn._onData.call(this);
|
||||
this._onLoad(this._f.load);
|
||||
this._onPlayback(this._f.playback);
|
||||
},
|
||||
_onLoad: function(load) {
|
||||
this._loadProgress.style.width = load * 100 + "%";
|
||||
},
|
||||
_onMouseDown: function(e) {
|
||||
if (e.which === 1) {
|
||||
window.addEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.addEventListener("mousemove", this._proxy.onMouseMove);
|
||||
this._seeking = true;
|
||||
|
||||
this._f.trigger("seekingStart");
|
||||
|
||||
this._ap = this.getAbsolutePosition();
|
||||
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
|
||||
var nSeek = seek / this._w;
|
||||
if (this._seek !== nSeek) {
|
||||
this._seek = nSeek;
|
||||
this._f.trigger("seek", this._seek);
|
||||
}
|
||||
}
|
||||
},
|
||||
_onMouseMove: function(e) {
|
||||
var seek = Math.max(Math.min(e.pageX - this._ap.x, this._w), 0);
|
||||
var nSeek = seek / this._w;
|
||||
if (this._seek !== nSeek) {
|
||||
this._seek = nSeek;
|
||||
this._f.trigger("seek", this._seek);
|
||||
}
|
||||
},
|
||||
_onMouseUp: function() {
|
||||
delete this._ap;
|
||||
delete this._seek;
|
||||
this._f.trigger("seekingEnd", this._f.playback);
|
||||
|
||||
this._seeking = false;
|
||||
window.removeEventListener("mouseup", this._proxy.onMouseUp);
|
||||
window.removeEventListener("mousemove", this._proxy.onMouseMove);
|
||||
Slider.fn._onMouseDown.call(this, e);
|
||||
},
|
||||
_onPlayback: function(pb) {
|
||||
this._playbackProgress.style.width = pb * 100 + "%";
|
||||
_onMouseUp: function(e) {
|
||||
Slider.fn._onMouseUp.call(this, e);
|
||||
this._f.trigger("seekingEnd", this._f.value);
|
||||
},
|
||||
_resetTheme: function() {
|
||||
View.fn._resetTheme.call(this);
|
||||
Slider.fn._resetTheme.call(this);
|
||||
|
||||
this._loadProgress.style.backgroundColor = View.theme.secondaryColor || "#ffff00"
|
||||
this._playbackProgress.style.backgroundColor = View.theme.primaryColor || "#ff0000";
|
||||
this._loadProgress.style.backgroundColor = Slider.theme.secondaryColor || "#ffff00"
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue