item mixin, playlists
This commit is contained in:
Ondrej Zara
parent
eb195a171e
commit
4ab17b2c96
2
Makefile
2
Makefile
|
|
@ -1,7 +1,7 @@
|
|||
LESS := $(shell npm bin)/lessc
|
||||
APP := app
|
||||
CSS := $(APP)/cyp.css
|
||||
ICONS := $(APP)/js/lib/icons.js
|
||||
ICONS := $(APP)/js/icons.js
|
||||
SYSD_USER := ~/.config/systemd/user
|
||||
SERVICE := cyp.service
|
||||
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
h2, div { .long-line; }
|
||||
// h2, div { .long-line; }
|
||||
}
|
||||
|
||||
&.has-art {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ header, footer {
|
|||
footer {
|
||||
position: relative;
|
||||
height: 56px;
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: @breakpoint-menu) {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ cyp-menu, cyp-commands {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: @breakpoint-menu) {
|
||||
flex-direction: row;
|
||||
span:not([id]) { display: none; }
|
||||
}
|
||||
|
|
@ -47,7 +47,7 @@ cyp-commands {
|
|||
}
|
||||
|
||||
button {
|
||||
flex: 0 0 80px;
|
||||
flex: 0 0 @breakpoint-menu/6;
|
||||
&.last {
|
||||
order: 1;
|
||||
margin-left: auto;
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ cyp-player {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.title, .subtitle { .long-line; }
|
||||
.title, .subtitle { .no-wrap; }
|
||||
}
|
||||
|
||||
.timeline {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
cyp-playlist {
|
||||
.flex-row;
|
||||
|
||||
padding: 8px;
|
||||
.item;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
|
|
|
|||
|
|
@ -1,7 +1,2 @@
|
|||
cyp-playlists {
|
||||
.component;
|
||||
|
||||
.info {
|
||||
.multiline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
cyp-song {
|
||||
.selectable;
|
||||
.flex-row;
|
||||
.item;
|
||||
|
||||
.info { // FIXME zrevidovat
|
||||
flex-grow: 1;
|
||||
|
|
@ -17,14 +16,6 @@ cyp-song {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
h2, div { .long-line; }
|
||||
}
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
|
||||
&:not(.has-art) {
|
||||
padding: 8px;
|
||||
// h2, div { .long-line; } FIXME vyresit zalamovani/vypustku
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
}
|
||||
|
||||
.info {
|
||||
.multiline;
|
||||
// .multiline; FIXME
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,17 +9,19 @@
|
|||
flex-direction: column;
|
||||
}
|
||||
|
||||
.long-line {
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/*
|
||||
.multiline {
|
||||
.flex-row;
|
||||
|
||||
h2 { font-weight: normal; }
|
||||
}
|
||||
*/
|
||||
|
||||
.selectable {
|
||||
border-left: 4px solid transparent;
|
||||
|
|
@ -28,3 +30,13 @@
|
|||
border-left-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.item {
|
||||
.flex-row;
|
||||
.selectable;
|
||||
padding: 8px;
|
||||
|
||||
&:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
@breakpoint-menu: 480px;
|
||||
|
||||
cyp-app {
|
||||
--font-size-large: 112.5%;
|
||||
--icon-spacing: 4px;
|
||||
|
|
@ -43,7 +45,7 @@ cyp-app[color=limegreen] {
|
|||
--primary-raw: 50, 205, 50;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: @breakpoint-menu) {
|
||||
:root {
|
||||
--spacing: var(--icon-spacing);
|
||||
}
|
||||
|
|
|
|||
161
app/cyp.css
161
app/cyp.css
|
|
@ -91,27 +91,39 @@ select {
|
|||
.flex-column:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
.long-line {
|
||||
.no-wrap {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
/*
|
||||
.multiline {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
.multiline:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
.multiline h2 {
|
||||
font-weight: normal;
|
||||
.flex-row;
|
||||
|
||||
h2 { font-weight: normal; }
|
||||
}
|
||||
*/
|
||||
.selectable {
|
||||
border-left: 4px solid transparent;
|
||||
}
|
||||
.selectable.selected {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
.item {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-left: 4px solid transparent;
|
||||
padding: 8px;
|
||||
}
|
||||
.item:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
.item.selected {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
.item:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
.component header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -155,12 +167,6 @@ select {
|
|||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
.component li .info h2,
|
||||
.component li .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.component li:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -213,12 +219,6 @@ select {
|
|||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
#library li .info h2,
|
||||
#library li .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#library li:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -308,12 +308,6 @@ select {
|
|||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
#fs li .info h2,
|
||||
#fs li .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
#fs li:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -335,16 +329,6 @@ select {
|
|||
#fs .group {
|
||||
cursor: pointer;
|
||||
}
|
||||
#fs .info {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
#fs .info:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
#fs .info h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
.search {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -509,15 +493,19 @@ cyp-commands button.last {
|
|||
margin-left: auto;
|
||||
}
|
||||
cyp-song {
|
||||
border-left: 4px solid transparent;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-left: 4px solid transparent;
|
||||
padding: 8px;
|
||||
}
|
||||
cyp-song:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
cyp-song.selected {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
cyp-song:not([hidden]) {
|
||||
display: flex;
|
||||
cyp-song:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
cyp-song .info {
|
||||
flex-grow: 1;
|
||||
|
|
@ -532,18 +520,6 @@ cyp-song .info h2 {
|
|||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
cyp-song .info h2,
|
||||
cyp-song .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
cyp-song:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
cyp-song:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
cyp-player {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -662,74 +638,6 @@ cyp-player .misc .icon {
|
|||
height: 96px;
|
||||
}
|
||||
}
|
||||
cyp-playlists header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: var(--spacing);
|
||||
}
|
||||
cyp-playlists header:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
cyp-playlists header button {
|
||||
font-size: var(--font-size-large);
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
}
|
||||
cyp-playlists header button .icon {
|
||||
margin-right: var(--icon-spacing);
|
||||
}
|
||||
cyp-playlists ul {
|
||||
flex-grow: 1;
|
||||
overflow: auto;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
cyp-playlists li {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
cyp-playlists li:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
cyp-playlists li .info {
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
cyp-playlists li .info .icon {
|
||||
color: var(--primary);
|
||||
margin-right: var(--icon-spacing);
|
||||
filter: drop-shadow(var(--text-shadow));
|
||||
}
|
||||
cyp-playlists li .info h2 {
|
||||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
cyp-playlists li .info h2,
|
||||
cyp-playlists li .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
cyp-playlists li:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
cyp-playlists li button .icon {
|
||||
width: 32px;
|
||||
}
|
||||
cyp-playlists li:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
cyp-playlists .info {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
cyp-playlists .info:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
cyp-playlists .info h2 {
|
||||
font-weight: normal;
|
||||
}
|
||||
cyp-queue .current {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
|
@ -808,12 +716,6 @@ cyp-yt li .info h2 {
|
|||
font-size: var(--font-size-large);
|
||||
margin: 0;
|
||||
}
|
||||
cyp-yt li .info h2,
|
||||
cyp-yt li .info div {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
cyp-yt li:not(.has-art) {
|
||||
padding: 8px;
|
||||
}
|
||||
|
|
@ -917,11 +819,18 @@ x-range:not([disabled]) .-thumb:hover {
|
|||
cyp-playlist {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
border-left: 4px solid transparent;
|
||||
padding: 8px;
|
||||
}
|
||||
cyp-playlist:not([hidden]) {
|
||||
display: flex;
|
||||
}
|
||||
cyp-playlist.selected {
|
||||
border-left-color: var(--primary);
|
||||
}
|
||||
cyp-playlist:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
cyp-playlist:nth-child(odd) {
|
||||
background-color: var(--bg-alt);
|
||||
}
|
||||
|
|
|
|||
1
app/icons/cancel.svg
Normal file
1
app/icons/cancel.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="24" height="24" viewBox="0 0 24 24"><path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z" /></svg>
|
||||
|
After Width: | Height: | Size: 546 B |
|
|
@ -13,9 +13,9 @@ export class Item extends HasApp {
|
|||
}
|
||||
|
||||
export default class Component extends HasApp {
|
||||
constructor() {
|
||||
constructor(options) {
|
||||
super();
|
||||
this.selection = new Selection(this);
|
||||
if (options.selection) { this.selection = new Selection(this, options.selection); }
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import Component from "../component.js";
|
|||
|
||||
class Menu extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
super({selection:null});
|
||||
|
||||
this._tabs = Array.from(this.querySelectorAll("[data-for]"));
|
||||
this._tabs.forEach(tab => {
|
||||
|
|
@ -10,19 +10,13 @@ class Menu extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
async _listen() {
|
||||
const app = await this._app;
|
||||
let mo = new MutationObserver(_ => this._sync())
|
||||
mo.observe(app, {attributes:true});
|
||||
}
|
||||
|
||||
async _activate(component) {
|
||||
const app = await this._app;
|
||||
app.setAttribute("component", component);
|
||||
}
|
||||
|
||||
_onComponentChange(component) {
|
||||
this._tabs.forEach(tab => {
|
||||
this._tabs.forEach(/** @param {HTMLElement} tab */ tab => {
|
||||
tab.classList.toggle("active", tab.dataset.for == component);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const DELAY = 1000;
|
|||
|
||||
class Player extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
super({selection:null});
|
||||
this._current = {};
|
||||
this._toggledVolume = 0;
|
||||
this._idleTimeout = null;
|
||||
|
|
|
|||
|
|
@ -10,12 +10,6 @@ export default class Playlist extends Item {
|
|||
connectedCallback() {
|
||||
html.icon("playlist-music", this)
|
||||
html.node("h2", {}, this.name, this);
|
||||
|
||||
/*
|
||||
playButton(TYPE_PLAYLIST, name, node);
|
||||
addButton(TYPE_PLAYLIST, name, node);
|
||||
deleteButton(TYPE_PLAYLIST, name, node);
|
||||
*/
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,14 @@
|
|||
import * as html from "../html.js";
|
||||
import * as ui from "../ui.js";
|
||||
|
||||
import Component from "../component.js";
|
||||
import Playlist from "./playlist.js";
|
||||
|
||||
|
||||
class Playlists extends Component {
|
||||
constructor() {
|
||||
super({selection:"single"});
|
||||
this._initCommands();
|
||||
}
|
||||
|
||||
handleEvent(e) {
|
||||
switch (e.type) {
|
||||
case "playlists-change":
|
||||
|
|
@ -30,9 +33,25 @@ class Playlists extends Component {
|
|||
|
||||
_buildLists(lists) {
|
||||
html.clear(this);
|
||||
this.selection.clear();
|
||||
|
||||
lists.forEach(name => this.appendChild(new Playlist(name)));
|
||||
}
|
||||
|
||||
_initCommands() {
|
||||
const sel = this.selection;
|
||||
|
||||
sel.addCommand(async items => {
|
||||
}, {label:"Play", icon:"play"});
|
||||
|
||||
sel.addCommand(async items => {
|
||||
}, {label:"Enqueue", icon:"plus"});
|
||||
|
||||
sel.addCommand(async items => {
|
||||
}, {label:"Delete", icon:"delete"});
|
||||
|
||||
sel.addCommandCancel();
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define("cyp-playlists", Playlists);
|
||||
|
|
|
|||
|
|
@ -2,9 +2,10 @@ import * as html from "../html.js";
|
|||
import Component from "../component.js";
|
||||
import Song from "./song.js";
|
||||
|
||||
|
||||
class Queue extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
super({selection:"multi"});
|
||||
this._currentId = null;
|
||||
this._initCommands();
|
||||
}
|
||||
|
|
@ -35,7 +36,6 @@ class Queue extends Component {
|
|||
}
|
||||
|
||||
async _sync() {
|
||||
this.selection.clear();
|
||||
let songs = await this._mpd.listQueue();
|
||||
this._buildSongs(songs);
|
||||
|
||||
|
|
@ -51,6 +51,7 @@ class Queue extends Component {
|
|||
|
||||
_buildSongs(songs) {
|
||||
html.clear(this);
|
||||
this.selection.clear();
|
||||
|
||||
songs.forEach(song => this.appendChild(new Song(song)));
|
||||
|
||||
|
|
@ -84,7 +85,7 @@ class Queue extends Component {
|
|||
this._sync();
|
||||
}, {label:"Remove", icon:"delete"});
|
||||
|
||||
sel.addCommandClear();
|
||||
sel.addCommandCancel();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ function saveToStorage(key, value) {
|
|||
|
||||
class Settings extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
super({selection:null});
|
||||
this._inputs = {
|
||||
theme: this.querySelector("[name=theme]"),
|
||||
color: Array.from(this.querySelectorAll("[name=color]"))
|
||||
|
|
|
|||
|
|
@ -1,15 +1,33 @@
|
|||
let ICONS={};
|
||||
ICONS["library-music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4M18,7H15V12.5A2.5,2.5 0 0,1 12.5,15A2.5,2.5 0 0,1 10,12.5A2.5,2.5 0 0,1 12.5,10C13.07,10 13.58,10.19 14,10.5V5H18M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z"/>
|
||||
</svg>`;
|
||||
ICONS["plus"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
|
||||
ICONS["playlist-music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M15,6H3V8H15V6M15,10H3V12H15V10M3,16H11V14H3V16M17,6V14.18C16.69,14.07 16.35,14 16,14A3,3 0 0,0 13,17A3,3 0 0,0 16,20A3,3 0 0,0 19,17V8H22V6H17Z"/>
|
||||
</svg>`;
|
||||
ICONS["folder"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M10,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V8C22,6.89 21.1,6 20,6H12L10,4Z"/>
|
||||
</svg>`;
|
||||
ICONS["playlist-music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M15,6H3V8H15V6M15,10H3V12H15V10M3,16H11V14H3V16M17,6V14.18C16.69,14.07 16.35,14 16,14A3,3 0 0,0 13,17A3,3 0 0,0 16,20A3,3 0 0,0 19,17V8H22V6H17Z"/>
|
||||
ICONS["shuffle"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M14.83,13.41L13.42,14.82L16.55,17.95L14.5,20H20V14.5L17.96,16.54L14.83,13.41M14.5,4L16.54,6.04L4,18.59L5.41,20L17.96,7.46L20,9.5V4M10.59,9.17L5.41,4L4,5.41L9.17,10.58L10.59,9.17Z"/>
|
||||
</svg>`;
|
||||
ICONS["artist"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z"/>
|
||||
</svg>`;
|
||||
ICONS["download"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
|
||||
</svg>`;
|
||||
ICONS["magnify"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
|
||||
</svg>`;
|
||||
ICONS["delete"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
|
||||
</svg>`;
|
||||
ICONS["rewind"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M11.5,12L20,18V6M11,18V6L2.5,12L11,18Z"/>
|
||||
</svg>`;
|
||||
ICONS["account-multiple"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
|
||||
</svg>`;
|
||||
ICONS["cancel"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12C4,13.85 4.63,15.55 5.68,16.91L16.91,5.68C15.55,4.63 13.85,4 12,4M12,20A8,8 0 0,0 20,12C20,10.15 19.37,8.45 18.32,7.09L7.09,18.32C8.45,19.37 10.15,20 12,20Z"/>
|
||||
</svg>`;
|
||||
ICONS["settings"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
|
||||
|
|
@ -17,55 +35,40 @@ ICONS["settings"] = `<svg viewBox="0 0 24 24">
|
|||
ICONS["pause"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M14,19H18V5H14M6,19H10V5H6V19Z"/>
|
||||
</svg>`;
|
||||
ICONS["artist"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M11,14C12,14 13.05,14.16 14.2,14.44C13.39,15.31 13,16.33 13,17.5C13,18.39 13.25,19.23 13.78,20H3V18C3,16.81 3.91,15.85 5.74,15.12C7.57,14.38 9.33,14 11,14M11,12C9.92,12 9,11.61 8.18,10.83C7.38,10.05 7,9.11 7,8C7,6.92 7.38,6 8.18,5.18C9,4.38 9.92,4 11,4C12.11,4 13.05,4.38 13.83,5.18C14.61,6 15,6.92 15,8C15,9.11 14.61,10.05 13.83,10.83C13.05,11.61 12.11,12 11,12M18.5,10H20L22,10V12H20V17.5A2.5,2.5 0 0,1 17.5,20A2.5,2.5 0 0,1 15,17.5A2.5,2.5 0 0,1 17.5,15C17.86,15 18.19,15.07 18.5,15.21V10Z"/>
|
||||
</svg>`;
|
||||
ICONS["volume-off"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z"/>
|
||||
</svg>`;
|
||||
ICONS["fast-forward"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/>
|
||||
</svg>`;
|
||||
ICONS["delete"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/>
|
||||
</svg>`;
|
||||
ICONS["volume-high"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/>
|
||||
</svg>`;
|
||||
ICONS["minus"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,13H5V11H19V13Z"/>
|
||||
</svg>`;
|
||||
ICONS["play"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
|
||||
</svg>`;
|
||||
ICONS["magnify"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"/>
|
||||
</svg>`;
|
||||
ICONS["music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"/>
|
||||
</svg>`;
|
||||
ICONS["rewind"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M11.5,12L20,18V6M11,18V6L2.5,12L11,18Z"/>
|
||||
</svg>`;
|
||||
ICONS["album"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12,16.5C9.5,16.5 7.5,14.5 7.5,12C7.5,9.5 9.5,7.5 12,7.5C14.5,7.5 16.5,9.5 16.5,12C16.5,14.5 14.5,16.5 12,16.5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
|
||||
</svg>`;
|
||||
ICONS["download"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z"/>
|
||||
</svg>`;
|
||||
ICONS["account-multiple"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M16,13C15.71,13 15.38,13 15.03,13.05C16.19,13.89 17,15 17,16.5V19H23V16.5C23,14.17 18.33,13 16,13M8,13C5.67,13 1,14.17 1,16.5V19H15V16.5C15,14.17 10.33,13 8,13M8,11A3,3 0 0,0 11,8A3,3 0 0,0 8,5A3,3 0 0,0 5,8A3,3 0 0,0 8,11M16,11A3,3 0 0,0 19,8A3,3 0 0,0 16,5A3,3 0 0,0 13,8A3,3 0 0,0 16,11Z"/>
|
||||
</svg>`;
|
||||
ICONS["close"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"/>
|
||||
</svg>`;
|
||||
ICONS["content-save"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
|
||||
ICONS["music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M21,3V15.5A3.5,3.5 0 0,1 17.5,19A3.5,3.5 0 0,1 14,15.5A3.5,3.5 0 0,1 17.5,12C18.04,12 18.55,12.12 19,12.34V6.47L9,8.6V17.5A3.5,3.5 0 0,1 5.5,21A3.5,3.5 0 0,1 2,17.5A3.5,3.5 0 0,1 5.5,14C6.04,14 6.55,14.12 7,14.34V6L21,3Z"/>
|
||||
</svg>`;
|
||||
ICONS["shuffle"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M14.83,13.41L13.42,14.82L16.55,17.95L14.5,20H20V14.5L17.96,16.54L14.83,13.41M14.5,4L16.54,6.04L4,18.59L5.41,20L17.96,7.46L20,9.5V4M10.59,9.17L5.41,4L4,5.41L9.17,10.58L10.59,9.17Z"/>
|
||||
ICONS["minus"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,13H5V11H19V13Z"/>
|
||||
</svg>`;
|
||||
ICONS["repeat"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M17,17H7V14L3,18L7,22V19H19V13H17M7,7H17V10L21,6L17,2V5H5V11H7V7Z"/>
|
||||
</svg>`;
|
||||
ICONS["play"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M8,5.14V19.14L19,12.14L8,5.14Z"/>
|
||||
</svg>`;
|
||||
ICONS["plus"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z"/>
|
||||
</svg>`;
|
||||
ICONS["content-save"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
|
||||
</svg>`;
|
||||
ICONS["library-music"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M4,6H2V20A2,2 0 0,0 4,22H18V20H4M18,7H15V12.5A2.5,2.5 0 0,1 12.5,15A2.5,2.5 0 0,1 10,12.5A2.5,2.5 0 0,1 12.5,10C13.07,10 13.58,10.19 14,10.5V5H18M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2Z"/>
|
||||
</svg>`;
|
||||
ICONS["fast-forward"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M13,6V18L21.5,12M4,18L12.5,12L4,6V18Z"/>
|
||||
</svg>`;
|
||||
ICONS["volume-high"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M14,3.23V5.29C16.89,6.15 19,8.83 19,12C19,15.17 16.89,17.84 14,18.7V20.77C18,19.86 21,16.28 21,12C21,7.72 18,4.14 14,3.23M16.5,12C16.5,10.23 15.5,8.71 14,7.97V16C15.5,15.29 16.5,13.76 16.5,12M3,9V15H7L12,20V4L7,9H3Z"/>
|
||||
</svg>`;
|
||||
ICONS["album"] = `<svg viewBox="0 0 24 24">
|
||||
<path d="M12,11A1,1 0 0,0 11,12A1,1 0 0,0 12,13A1,1 0 0,0 13,12A1,1 0 0,0 12,11M12,16.5C9.5,16.5 7.5,14.5 7.5,12C7.5,9.5 9.5,7.5 12,7.5C14.5,7.5 16.5,9.5 16.5,12C16.5,14.5 14.5,16.5 12,16.5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"/>
|
||||
</svg>`;
|
||||
export default ICONS;
|
||||
|
|
|
|||
|
|
@ -1,8 +1,10 @@
|
|||
import * as html from "./html.js";
|
||||
|
||||
export default class Selection {
|
||||
constructor(component) {
|
||||
constructor(component, mode) {
|
||||
this._component = component;
|
||||
/** @type {"single" | "multi"} */
|
||||
this._mode = mode;
|
||||
this._items = []; // FIXME ukladat skutecne HTML? co kdyz nastane refresh?
|
||||
this._node = html.node("cyp-commands", {hidden:true});
|
||||
}
|
||||
|
|
@ -14,18 +16,21 @@ export default class Selection {
|
|||
addCommand(cb, options) {
|
||||
const button = html.button({icon:options.icon}, "", this._node);
|
||||
html.node("span", {}, options.label, button);
|
||||
button.addEventListener("click", _ => cb(this._items));
|
||||
button.addEventListener("click", _ => {
|
||||
const arg = (this._mode == "single" ? this._items[0] : this._items);
|
||||
cb(arg);
|
||||
});
|
||||
return button;
|
||||
}
|
||||
|
||||
addCommandAll(items) {
|
||||
addCommandAll() {
|
||||
this.addCommand(_ => {
|
||||
Array.from(this._component.children).forEach(node => this.add(node));
|
||||
}, {label:"Select all", icon:"plus"});
|
||||
}
|
||||
|
||||
addCommandClear() {
|
||||
const button = this.addCommand(_ => this.clear(), {icon:"close", label:"Clear"});
|
||||
addCommandCancel() {
|
||||
const button = this.addCommand(_ => this.clear(), {icon:"cancel", label:"Cancel"});
|
||||
button.classList.add("last");
|
||||
return button;
|
||||
}
|
||||
|
|
@ -43,6 +48,9 @@ export default class Selection {
|
|||
const length = this._items.length;
|
||||
this._items.push(node);
|
||||
node.classList.add("selected");
|
||||
|
||||
if (this._mode == "single" && length > 0) { this.remove(this._items[0]); }
|
||||
|
||||
if (length == 0) { this._show(); }
|
||||
}
|
||||
|
||||
|
|
@ -54,7 +62,7 @@ export default class Selection {
|
|||
}
|
||||
|
||||
_show() {
|
||||
const parent = this._component.closest("cyp-app").querySelector("footer");
|
||||
const parent = this._component.closest("cyp-app").querySelector("footer"); // FIXME jde lepe?
|
||||
parent.appendChild(this._node);
|
||||
this._node.offsetWidth; // FIXME jde lepe?
|
||||
this._node.hidden = false;
|
||||
|
|
|
|||
Loading…
Reference in a new issue