elf
/
fridgemagnets
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Compare commits

base: elf:ee1b763a7a543314857d392c4b58dfd8b0adae5a
Branches Tags
elf:master
elf:lit
elf:64bitfix
...
compare: elf:9a53ecf4c968430947e8a0000fb76d9f028665f2
Branches Tags
elf:lit
elf:64bitfix
elf:master

3 Commits
ee1b763a7a ... 9a53ecf4c9

Author SHA1 Message Date
Elf M. Sternberg 9a53ecf4c9 Flyout begun. 2024-11-21 12:49:45 -08:00
Elf M. Sternberg c7c9c4809d We'll figure it out later. 2024-11-19 14:34:53 -08:00
Elf M. Sternberg d0bf45d827 Cleaning up. 2024-11-16 20:11:07 -08:00
4 changed files with 4 additions and 856 deletions
Show Stats Expand all files Collapse all files

BIN
PikePlaceMarket.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 29 KiB

854
js/buzz.js
View File

@ -1,854 +0,0 @@
// ----------------------------------------------------------------------------
// Buzz, a Javascript HTML5 Audio library
// v 1.0.4 beta
// Licensed under the MIT license.
// http://buzz.jaysalvat.com/
// ----------------------------------------------------------------------------
// Copyright (C) 2011 Jay Salvat
// http://jaysalvat.com/
// ----------------------------------------------------------------------------
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files ( the "Software" ), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.
// ----------------------------------------------------------------------------
var buzz = {
defaults: {
autoplay: false,
duration: 5000,
formats: [],
loop: false,
placeholder: '--',
preload: 'metadata',
volume: 80
},
types: {
'mp3': 'audio/mpeg',
'ogg': 'audio/ogg',
'wav': 'audio/wav',
'aac': 'audio/aac',
'm4a': 'audio/x-m4a'
},
sounds: [],
el: document.createElement( 'audio' ),
sound: function( src, options ) {
options = options || {};
var pid = 0,
events = [],
eventsOnce = {},
supported = buzz.isSupported();
// publics
this.load = function() {
if ( !supported ) {
return this;
}
this.sound.load();
return this;
};
this.play = function() {
if ( !supported ) {
return this;
}
this.sound.play();
return this;
};
this.togglePlay = function() {
if ( !supported ) {
return this;
}
if ( this.sound.paused ) {
this.sound.play();
} else {
this.sound.pause();
}
return this;
};
this.pause = function() {
if ( !supported ) {
return this;
}
this.sound.pause();
return this;
};
this.isPaused = function() {
if ( !supported ) {
return null;
}
return this.sound.paused;
};
this.stop = function() {
if ( !supported ) {
return this;
}
this.setTime( this.getDuration() );
this.sound.pause();
return this;
};
this.isEnded = function() {
if ( !supported ) {
return null;
}
return this.sound.ended;
};
this.loop = function() {
if ( !supported ) {
return this;
}
this.sound.loop = 'loop';
this.bind( 'ended.buzzloop', function() {
this.currentTime = 0;
this.play();
});
return this;
};
this.unloop = function() {
if ( !supported ) {
return this;
}
this.sound.removeAttribute( 'loop' );
this.unbind( 'ended.buzzloop' );
return this;
};
this.mute = function() {
if ( !supported ) {
return this;
}
this.sound.muted = true;
return this;
};
this.unmute = function() {
if ( !supported ) {
return this;
}
this.sound.muted = false;
return this;
};
this.toggleMute = function() {
if ( !supported ) {
return this;
}
this.sound.muted = !this.sound.muted;
return this;
};
this.isMuted = function() {
if ( !supported ) {
return null;
}
return this.sound.muted;
};
this.setVolume = function( volume ) {
if ( !supported ) {
return this;
}
if ( volume < 0 ) {
volume = 0;
}
if ( volume > 100 ) {
volume = 100;
}
this.volume = volume;
this.sound.volume = volume / 100;
return this;
};
this.getVolume = function() {
if ( !supported ) {
return this;
}
return this.volume;
};
this.increaseVolume = function( value ) {
return this.setVolume( this.volume + ( value || 1 ) );
};
this.decreaseVolume = function( value ) {
return this.setVolume( this.volume - ( value || 1 ) );
};
this.setTime = function( time ) {
if ( !supported ) {
return this;
}
this.whenReady( function() {
this.sound.currentTime = time;
});
return this;
};
this.getTime = function() {
if ( !supported ) {
return null;
}
var time = Math.round( this.sound.currentTime * 100 ) / 100;
return isNaN( time ) ? buzz.defaults.placeholder : time;
};
this.setPercent = function( percent ) {
if ( !supported ) {
return this;
}
return this.setTime( buzz.fromPercent( percent, this.sound.duration ) );
};
this.getPercent = function() {
if ( !supported ) {
return null;
}
var percent = Math.round( buzz.toPercent( this.sound.currentTime, this.sound.duration ) );
return isNaN( percent ) ? buzz.defaults.placeholder : percent;
};
this.setSpeed = function( duration ) {
if ( !supported ) {
return this;
}
this.sound.playbackRate = duration;
};
this.getSpeed = function() {
if ( !supported ) {
return null;
}
return this.sound.playbackRate;
};
this.getDuration = function() {
if ( !supported ) {
return null;
}
var duration = Math.round( this.sound.duration * 100 ) / 100;
return isNaN( duration ) ? buzz.defaults.placeholder : duration;
};
this.getPlayed = function() {
if ( !supported ) {
return null;
}
return timerangeToArray( this.sound.played );
};
this.getBuffered = function() {
if ( !supported ) {
return null;
}
return timerangeToArray( this.sound.buffered );
};
this.getSeekable = function() {
if ( !supported ) {
return null;
}
return timerangeToArray( this.sound.seekable );
};
this.getErrorCode = function() {
if ( supported && this.sound.error ) {
return this.sound.error.code;
}
return 0;
};
this.getErrorMessage = function() {
if ( !supported ) {
return null;
}
switch( this.getErrorCode() ) {
case 1:
return 'MEDIA_ERR_ABORTED';
case 2:
return 'MEDIA_ERR_NETWORK';
case 3:
return 'MEDIA_ERR_DECODE';
case 4:
return 'MEDIA_ERR_SRC_NOT_SUPPORTED';
default:
return null;
}
};
this.getStateCode = function() {
if ( !supported ) {
return null;
}
return this.sound.readyState;
};
this.getStateMessage = function() {
if ( !supported ) {
return null;
}
switch( this.getStateCode() ) {
case 0:
return 'HAVE_NOTHING';
case 1:
return 'HAVE_METADATA';
case 2:
return 'HAVE_CURRENT_DATA';
case 3:
return 'HAVE_FUTURE_DATA';
case 4:
return 'HAVE_ENOUGH_DATA';
default:
return null;
}
};
this.getNetworkStateCode = function() {
if ( !supported ) {
return null;
}
return this.sound.networkState;
};
this.getNetworkStateMessage = function() {
if ( !supported ) {
return null;
}
switch( this.getNetworkStateCode() ) {
case 0:
return 'NETWORK_EMPTY';
case 1:
return 'NETWORK_IDLE';
case 2:
return 'NETWORK_LOADING';
case 3:
return 'NETWORK_NO_SOURCE';
default:
return null;
}
};
this.set = function( key, value ) {
if ( !supported ) {
return this;
}
this.sound[ key ] = value;
return this;
};
this.get = function( key ) {
if ( !supported ) {
return null;
}
return key ? this.sound[ key ] : this.sound;
};
this.bind = function( types, func ) {
if ( !supported ) {
return this;
}
types = types.split( ' ' );
var that = this,
efunc = function( e ) { func.call( that, e ); };
for( var t = 0; t < types.length; t++ ) {
var type = types[ t ],
idx = type;
type = idx.split( '.' )[ 0 ];
events.push( { idx: idx, func: efunc } );
this.sound.addEventListener( type, efunc, true );
}
return this;
};
this.unbind = function( types ) {
if ( !supported ) {
return this;
}
types = types.split( ' ' );
for( var t = 0; t < types.length; t++ ) {
var idx = types[ t ],
type = idx.split( '.' )[ 0 ];
for( var i = 0; i < events.length; i++ ) {
var namespace = events[ i ].idx.split( '.' );
if ( events[ i ].idx == idx || ( namespace[ 1 ] && namespace[ 1 ] == idx.replace( '.', '' ) ) ) {
this.sound.removeEventListener( type, events[ i ].func, true );
delete events[ i ];
}
}
}
return this;
};
this.bindOnce = function( type, func ) {
if ( !supported ) {
return this;
}
var that = this;
eventsOnce[ pid++ ] = false;
this.bind( pid + type, function() {
if ( !eventsOnce[ pid ] ) {
eventsOnce[ pid ] = true;
func.call( that );
}
that.unbind( pid + type );
});
};
this.trigger = function( types ) {
if ( !supported ) {
return this;
}
types = types.split( ' ' );
for( var t = 0; t < types.length; t++ ) {
var idx = types[ t ];
for( var i = 0; i < events.length; i++ ) {
var eventType = events[ i ].idx.split( '.' );
if ( events[ i ].idx == idx || ( eventType[ 0 ] && eventType[ 0 ] == idx.replace( '.', '' ) ) ) {
var evt = document.createEvent('HTMLEvents');
evt.initEvent( eventType[ 0 ], false, true );
this.sound.dispatchEvent( evt );
}
}
}
return this;
};
this.fadeTo = function( to, duration, callback ) {
if ( !supported ) {
return this;
}
if ( duration instanceof Function ) {
callback = duration;
duration = buzz.defaults.duration;
} else {
duration = duration || buzz.defaults.duration;
}
var from = this.volume,
delay = duration / Math.abs( from - to ),
that = this;
this.play();
function doFade() {
setTimeout( function() {
if ( from < to && that.volume < to ) {
that.setVolume( that.volume += 1 );
doFade();
} else if ( from > to && that.volume > to ) {
that.setVolume( that.volume -= 1 );
doFade();
} else if ( callback instanceof Function ) {
callback.apply( that );
}
}, delay );
}
this.whenReady( function() {
doFade();
});
return this;
};
this.fadeIn = function( duration, callback ) {
if ( !supported ) {
return this;
}
return this.setVolume(0).fadeTo( 100, duration, callback );
};
this.fadeOut = function( duration, callback ) {
if ( !supported ) {
return this;
}
return this.fadeTo( 0, duration, callback );
};
this.fadeWith = function( sound, duration ) {
if ( !supported ) {
return this;
}
this.fadeOut( duration, function() {
this.stop();
});
sound.play().fadeIn( duration );
return this;
};
this.whenReady = function( func ) {
if ( !supported ) {
return null;
}
var that = this;
if ( this.sound.readyState === 0 ) {
this.bind( 'canplay.buzzwhenready', function() {
func.call( that );
});
} else {
func.call( that );
}
};
// privates
function timerangeToArray( timeRange ) {
var array = [],
length = timeRange.length - 1;
for( var i = 0; i <= length; i++ ) {
array.push({
start: timeRange.start( length ),
end: timeRange.end( length )
});
}
return array;
}
function getExt( filename ) {
return filename.split('.').pop();
}
function addSource( sound, src ) {
var source = document.createElement( 'source' );
source.src = src;
if ( buzz.types[ getExt( src ) ] ) {
source.type = buzz.types[ getExt( src ) ];
}
sound.appendChild( source );
}
// init
if ( supported ) {
for(var i in buzz.defaults ) {
if(buzz.defaults.hasOwnProperty(i)) {
options[ i ] = options[ i ] || buzz.defaults[ i ];
}
}
this.sound = document.createElement( 'audio' );
if ( src instanceof Array ) {
for( var j in src ) {
if(src.hasOwnProperty(j)) {
addSource( this.sound, src[ j ] );
}
}
} else if ( options.formats.length ) {
for( var k in options.formats ) {
if(options.formats.hasOwnProperty(k)) {
addSource( this.sound, src + '.' + options.formats[ k ] );
}
}
} else {
addSource( this.sound, src );
}
if ( options.loop ) {
this.loop();
}
if ( options.autoplay ) {
this.sound.autoplay = 'autoplay';
}
if ( options.preload === true ) {
this.sound.preload = 'auto';
} else if ( options.preload === false ) {
this.sound.preload = 'none';
} else {
this.sound.preload = options.preload;
}
this.setVolume( options.volume );
buzz.sounds.push( this );
}
},
group: function( sounds ) {
sounds = argsToArray( sounds, arguments );
// publics
this.getSounds = function() {
return sounds;
};
this.add = function( soundArray ) {
soundArray = argsToArray( soundArray, arguments );
for( var a = 0; a < soundArray.length; a++ ) {
sounds.push( soundArray[ a ] );
}
};
this.remove = function( soundArray ) {
soundArray = argsToArray( soundArray, arguments );
for( var a = 0; a < soundArray.length; a++ ) {
for( var i = 0; i < sounds.length; i++ ) {
if ( sounds[ i ] == soundArray[ a ] ) {
delete sounds[ i ];
break;
}
}
}
};
this.load = function() {
fn( 'load' );
return this;
};
this.play = function() {
fn( 'play' );
return this;
};
this.togglePlay = function( ) {
fn( 'togglePlay' );
return this;
};
this.pause = function( time ) {
fn( 'pause', time );
return this;
};
this.stop = function() {
fn( 'stop' );
return this;
};
this.mute = function() {
fn( 'mute' );
return this;
};
this.unmute = function() {
fn( 'unmute' );
return this;
};
this.toggleMute = function() {
fn( 'toggleMute' );
return this;
};
this.setVolume = function( volume ) {
fn( 'setVolume', volume );
return this;
};
this.increaseVolume = function( value ) {
fn( 'increaseVolume', value );
return this;
};
this.decreaseVolume = function( value ) {
fn( 'decreaseVolume', value );
return this;
};
this.loop = function() {
fn( 'loop' );
return this;
};
this.unloop = function() {
fn( 'unloop' );
return this;
};
this.setTime = function( time ) {
fn( 'setTime', time );
return this;
};
this.setduration = function( duration ) {
fn( 'setduration', duration );
return this;
};
this.set = function( key, value ) {
fn( 'set', key, value );
return this;
};
this.bind = function( type, func ) {
fn( 'bind', type, func );
return this;
};
this.unbind = function( type ) {
fn( 'unbind', type );
return this;
};
this.bindOnce = function( type, func ) {
fn( 'bindOnce', type, func );
return this;
};
this.trigger = function( type ) {
fn( 'trigger', type );
return this;
};
this.fade = function( from, to, duration, callback ) {
fn( 'fade', from, to, duration, callback );
return this;
};
this.fadeIn = function( duration, callback ) {
fn( 'fadeIn', duration, callback );
return this;
};
this.fadeOut = function( duration, callback ) {
fn( 'fadeOut', duration, callback );
return this;
};
// privates
function fn() {
var args = argsToArray( null, arguments ),
func = args.shift();
for( var i = 0; i < sounds.length; i++ ) {
sounds[ i ][ func ].apply( sounds[ i ], args );
}
}
function argsToArray( array, args ) {
return ( array instanceof Array ) ? array : Array.prototype.slice.call( args );
}
},
all: function() {
return new buzz.group( buzz.sounds );
},
isSupported: function() {
return !!buzz.el.canPlayType;
},
isOGGSupported: function() {
return !!buzz.el.canPlayType && buzz.el.canPlayType( 'audio/ogg; codecs="vorbis"' );
},
isWAVSupported: function() {
return !!buzz.el.canPlayType && buzz.el.canPlayType( 'audio/wav; codecs="1"' );
},
isMP3Supported: function() {
return !!buzz.el.canPlayType && buzz.el.canPlayType( 'audio/mpeg;' );
},
isAACSupported: function() {
return !!buzz.el.canPlayType && ( buzz.el.canPlayType( 'audio/x-m4a;' ) || buzz.el.canPlayType( 'audio/aac;' ) );
},
toTimer: function( time, withHours ) {
var h, m, s;
h = Math.floor( time / 3600 );
h = isNaN( h ) ? '--' : ( h >= 10 ) ? h : '0' + h;
m = withHours ? Math.floor( time / 60 % 60 ) : Math.floor( time / 60 );
m = isNaN( m ) ? '--' : ( m >= 10 ) ? m : '0' + m;
s = Math.floor( time % 60 );
s = isNaN( s ) ? '--' : ( s >= 10 ) ? s : '0' + s;
return withHours ? h + ':' + m + ':' + s : m + ':' + s;
},
fromTimer: function( time ) {
var splits = time.toString().split( ':' );
if ( splits && splits.length == 3 ) {
time = ( parseInt( splits[ 0 ], 10 ) * 3600 ) + ( parseInt(splits[ 1 ], 10 ) * 60 ) + parseInt( splits[ 2 ], 10 );
}
if ( splits && splits.length == 2 ) {
time = ( parseInt( splits[ 0 ], 10 ) * 60 ) + parseInt( splits[ 1 ], 10 );
}
return time;
},
toPercent: function( value, total, decimal ) {
var r = Math.pow( 10, decimal || 0 );
return Math.round( ( ( value * 100 ) / total ) * r ) / r;
},
fromPercent: function( percent, total, decimal ) {
var r = Math.pow( 10, decimal || 0 );
return Math.round( ( ( total / 100 ) * percent ) * r ) / r;
}
};

3
src/fridge-magnets.ts
View File

@ -1,5 +1,6 @@
import { LitElement, html, css } from "lit"; import { LitElement, html, css } from "lit";
import { customElement } from "lit/decorators/custom-element.js"; import { customElement } from "lit/decorators/custom-element.js";
import { words } from "./wordlist.js";
import "./fridge-tile.js"; import "./fridge-tile.js";
@customElement("fridge-magnets") @customElement("fridge-magnets")
@ -34,7 +35,7 @@ export class FridgeMagnets extends LitElement {
render() { render() {
return html` <div id="fridgemagnets"> return html` <div id="fridgemagnets">
<div id="fridge"> <div id="fridge">
<fridge-tile word="Magnificent"></fridge-tile> ${words.map(word => html`<fridge-tile word=${word.w}></fridge-tile>`)}
</div> </div>
<div id="footer">Footer</div> <div id="footer">Footer</div>
</div>`; </div>`;

3
src/fridge-tile.ts
View File

@ -40,6 +40,7 @@ export class FridgeTile extends LitElement {
font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif; font-family: Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif;
box-shadow: 0 0 0.375rem 0.125rem #aaa; box-shadow: 0 0 0.375rem 0.125rem #aaa;
text-align: center; text-align: center;
border-radius: 10%;
user-select: none; user-select: none;
cursor: pointer; cursor: pointer;
color: #444; color: #444;
@ -88,7 +89,7 @@ export class FridgeTile extends LitElement {
render() { render() {
const styles = { const styles = {
width: `${this.word.length}ch`, width: `${this.word.length * 1.2}ch`,
transform: `rotate(${this.transform.rotate}deg)`, transform: `rotate(${this.transform.rotate}deg)`,
}; };
return html`<div part="word ${ref(this.handle)} " style="${styleMap(styles)}" class="word">${this.word}</div>`; return html`<div part="word ${ref(this.handle)} " style="${styleMap(styles)}" class="word">${this.word}</div>`;