Skip to content

Commit

Permalink
gsuiLibraries: use of gsui0ne
Browse files Browse the repository at this point in the history
  • Loading branch information
@mr21
mr21 committed Apr 15, 2024
1 parent 67e63c1 commit 4653d1c
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 77 deletions.
45 changes: 18 additions & 27 deletions gsuiLibraries/gsuiLibraries.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,28 @@
"use strict";

class gsuiLibraries extends HTMLElement {
#children = GSUgetTemplate( "gsui-libraries" );
#elements = GSUfindElements( this.#children, {
libBtns: ".gsuiLibraries-libBtns",
libDef: ".gsuiLibrary-default",
libLoc: ".gsuiLibrary-local",
} );
#libs = {
default: this.#elements.libDef,
local: this.#elements.libLoc,
};

class gsuiLibraries extends gsui0ne {
constructor() {
super();
super( {
$cmpName: "gsuiLibraries",
$tagName: "gsui-libraries",
$elements: {
$libBtns: ".gsuiLibraries-libBtns",
$libDef: ".gsuiLibrary-default",
$libLoc: ".gsuiLibrary-local",
},
$attributes: {
lib: "default",
},
} );
Object.seal( this );
this.#elements.libBtns.onclick = gsuiLibraries.#onclickBtns.bind( null, this );
this.#libs.default.setPlaceholder( "loading..." );
this.#libs.local.setPlaceholder( "drag'n drop your own samples in the app, they will appear here" );
}

// .........................................................................
connectedCallback() {
if ( this.#children ) {
this.append( ...this.#children );
this.#children = null;
GSUrecallAttributes( this, { lib: "default" } );
}
this.$elements.$libBtns.onclick = gsuiLibraries.#onclickBtns.bind( null, this );
this.$elements.$libDef.$setPlaceholder( "loading..." );
this.$elements.$libLoc.$setPlaceholder( "drag'n drop your own samples in the app, they will appear here" );
}

// .........................................................................
getLibrary( lib ) {
return this.#libs[ lib ];
$getLibrary( lib ) {
return lib === "local" ? this.$elements.$libLoc : this.$elements.$libDef;
}

// .........................................................................
Expand Down
11 changes: 6 additions & 5 deletions gsuiLibraries/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
<script src="/gs-ui-components/gs-utils/gs-utils.js"></script>
<script src="/gs-ui-components/gs-utils/gs-utils-dom.js"></script>
<script src="/gs-ui-components/test-assets/test.js"></script>
<script src="/gs-ui-components/gsui0ne/gsui0ne.js"></script>
<script src="/assets/gsuiLibrarySamples-v1.js"></script>

<!-- ....................................................................... -->
Expand All @@ -51,17 +52,17 @@
<!-- ....................................................................... -->
<script>
const elLibs = document.querySelector( "gsui-libraries" );
const elLibDef = elLibs.getLibrary( "default" );
const elLibDef = elLibs.$getLibrary( "default" );

elLibDef.setLibrary( gsuiLibrarySamples );
elLibDef.$setLibrary( gsuiLibrarySamples );
GSUlistenEvents( elLibs, {
gsuiLibrary: {
loadSample: d => {
elLibDef.loadSample( d.args[ 0 ] );
setTimeout( () => elLibDef.readySample( d.args[ 0 ] ), 1 * 1000 );
elLibDef.$loadSample( d.args[ 0 ] );
setTimeout( () => elLibDef.$readySample( d.args[ 0 ] ), 1 * 1000 );
},
playSample: d => {
elLibDef.playSample( d.args[ 0 ], 1 );
elLibDef.$playSample( d.args[ 0 ], 1 );
},
},
} );
Expand Down
65 changes: 29 additions & 36 deletions gsuiLibrary/gsuiLibrary.js
View file
Original file line number Diff line number Diff line change
@@ -1,53 +1,46 @@
"use strict";

class gsuiLibrary extends HTMLElement {
#dispatch = GSUdispatchEvent.bind( null, this, "gsuiLibrary" );
#children = GSUgetTemplate( "gsui-library" );
#elements = GSUfindElements( this.#children, {
body: ".gsuiLibrary-body",
placeholder: ".gsuiLibrary-placeholder",
} );
class gsuiLibrary extends gsui0ne {
#samplesMap = new Map();
#idPlaying = null;
#elCursor = null;
#stopTimeout = null;
#idFavs = new Map();

constructor() {
super();
super( {
$cmpName: "gsuiLibrary",
$tagName: "gsui-library",
$elements: {
$body: ".gsuiLibrary-body",
$placeholder: ".gsuiLibrary-placeholder",
},
} );
Object.seal( this );
this.#elements.body.onclick = this.#onclick.bind( this );
this.#elements.body.ondragstart = this.#ondragstart.bind( this );
this.#elements.body.oncontextmenu = this.#oncontextmenu.bind( this );
}

// .........................................................................
connectedCallback() {
if ( this.#children ) {
this.append( ...this.#children );
this.#children = null;
}
this.$elements.$body.onclick = this.#onclick.bind( this );
this.$elements.$body.ondragstart = this.#ondragstart.bind( this );
this.$elements.$body.oncontextmenu = this.#oncontextmenu.bind( this );
}

// .........................................................................
clear() {
$clear() {
this.#samplesMap.forEach( el => el.remove() );
this.#samplesMap.clear();
this.#idFavs.clear();
this.#elements.body.querySelectorAll( ".gsuiLibrary-sep" ).forEach( el => el.remove() );
this.$elements.$body.querySelectorAll( ".gsuiLibrary-sep" ).forEach( el => el.remove() );
}
unloadSamples() {
$unloadSamples() {
this.#samplesMap.forEach( el => {
el.classList.remove( "gsuiLibrary-sample-loading", "gsuiLibrary-sample-ready" );
el.title = el.dataset.name;
} );
}
setPlaceholder( str ) {
this.#elements.placeholder.textContent = str;
$setPlaceholder( str ) {
this.$elements.$placeholder.textContent = str;
}
setLibrary( lib ) {
$setLibrary( lib ) {
let lastSep;
const prevLastSep = Array.from( this.#elements.body.children )
const prevLastSep = Array.from( this.$elements.$body.children )
.findLast( el => el.classList.contains( "gsuiLibrary-sep" ) );
const el = lib.map( smp => {
if ( typeof smp !== "string" ) {
Expand All @@ -66,46 +59,46 @@ class gsuiLibrary extends HTMLElement {
return lastSep = GSUgetTemplate( "gsui-library-sep", smp );
} );

this.#elements.body.append( ...el );
this.$elements.$body.append( ...el );
if ( lastSep && lastSep.dataset.id === prevLastSep?.dataset.id ) {
lastSep.remove();
}
}

// .........................................................................
bookmarkSample( id, b ) {
$bookmarkSample( id, b ) {
b
? this.#idFavs.set( id )
: this.#idFavs.delete( id );
this.#samplesMap.get( id )?.classList.toggle( "gsuiLibrary-sample-fav", b );
}
loadSample( id ) {
$loadSample( id ) {
const el = this.#samplesMap.get( id );

el.classList.add( "gsuiLibrary-sample-loading" );
el.title = "loading...";
}
readySample( id ) {
$readySample( id ) {
const el = this.#samplesMap.get( id );

el.classList.remove( "gsuiLibrary-sample-loading" );
el.classList.add( "gsuiLibrary-sample-ready" );
el.title = el.dataset.name;
}
playSample( id, dur ) {
$playSample( id, dur ) {
const el = this.#samplesMap.get( id );

this.stopSample();
this.$stopSample();
this.#idPlaying = id;
this.#elCursor = GSUcreateDiv( { class: "gsuiLibrary-sample-cursor" } );
this.#elCursor.style.left = "0%";
this.#elCursor.style.transitionDuration = `${ dur }s`;
el.classList.add( "gsuiLibrary-sample-playing" );
el.append( this.#elCursor );
setTimeout( () => this.#elCursor.style.left = "100%", 10 );
this.#stopTimeout = setTimeout( this.stopSample.bind( this ), dur * 1000 );
this.#stopTimeout = setTimeout( this.$stopSample.bind( this ), dur * 1000 );
}
stopSample() {
$stopSample() {
if ( this.#idPlaying ) {
const el = this.#samplesMap.get( this.#idPlaying );

Expand Down Expand Up @@ -150,12 +143,12 @@ class gsuiLibrary extends HTMLElement {
? "playSample"
: "loadSample";

this.#dispatch( act, el.dataset.id );
this.$dispatch( act, el.dataset.id );
}
}
#oncontextmenu( e ) {
if ( e.target.classList.contains( "gsuiLibrary-sample" ) ) {
this.#dispatch( "stopSample" );
this.$dispatch( "stopSample" );
}
return false;
}
Expand Down
19 changes: 10 additions & 9 deletions gsuiLibrary/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
<script src="/gs-ui-components/gs-utils/gs-utils.js"></script>
<script src="/gs-ui-components/gs-utils/gs-utils-dom.js"></script>
<script src="/gs-ui-components/test-assets/test.js"></script>
<script src="/gs-ui-components/gsui0ne/gsui0ne.js"></script>
<script src="/assets/gsuiLibrarySamples-v1.js"></script>

<!-- ....................................................................... -->
Expand All @@ -45,20 +46,20 @@
<script>
const elLib = document.querySelector( "gsui-library" );

elLib.setLibrary( gsuiLibrarySamples );
elLib.setPlaceholder( "hey, placeholder here" );
elLib.bookmarkSample( "clap-001", true );
elLib.bookmarkSample( "clap-013", true );
elLib.bookmarkSample( "hat-003", true );
elLib.bookmarkSample( "crash-001", true );
elLib.$setLibrary( gsuiLibrarySamples );
elLib.$setPlaceholder( "hey, placeholder here" );
elLib.$bookmarkSample( "clap-001", true );
elLib.$bookmarkSample( "clap-013", true );
elLib.$bookmarkSample( "hat-003", true );
elLib.$bookmarkSample( "crash-001", true );
GSUlistenEvents( elLib, {
gsuiLibrary: {
loadSample: d => {
elLib.loadSample( d.args[ 0 ] );
setTimeout( () => elLib.readySample( d.args[ 0 ] ), 1 * 1000 );
elLib.$loadSample( d.args[ 0 ] );
setTimeout( () => elLib.$readySample( d.args[ 0 ] ), 1 * 1000 );
},
playSample: d => {
elLib.playSample( d.args[ 0 ], 1 );
elLib.$playSample( d.args[ 0 ], 1 );
},
},
} );
Expand Down

0 comments on commit 4653d1c

Please sign in to comment.