This commit is contained in:
mtkennerly 2019-07-27 20:00:42 -04:00
parent 70229d574b
commit 7c114754b7
10 changed files with 28462 additions and 1499 deletions

@ -1,2 +0,0 @@
dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.1)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}
/*# sourceMappingURL=dialog-polyfill.min.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

@ -1,20 +0,0 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}

@ -1,3 +0,0 @@
.mdl-selectfield{position:relative;font-size:16px;display:inline-block;box-sizing:border-box;width:300px;max-width:100%;margin:0;padding:20px 0}.mdl-selectfield .mdl-menu__container{max-height:256px;min-width:100%;top:12px !important}.mdl-selectfield.mdl-selectfield--floating-label .mdl-menu__container{top:24px !important}.mdl-selectfield .mdl-menu__outline{max-height:256px;transform-origin:50% 0}.mdl-selectfield .mdl-menu{min-width:100%;max-height:240px;outline:0;overflow-y:auto;width:auto !important}.mdl-selectfield .mdl-menu.is-animating{overflow:hidden}.mdl-selectfield--align-right{text-align:right}.mdl-selectfield--full-width{width:100%}.mdl-selectfield__select{display:block;width:100%;padding:4px 0;margin:0;color:inherit;background:transparent;font-size:16px;text-align:left;color:inherit;border:none;border-bottom:1px solid rgba(0,0,0, 0.12);border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.mdl-selectfield.is-focused .mdl-selectfield__select{outline:none}.mdl-selectfield.is-invalid .mdl-selectfield__select{border-color:rgb(222, 50, 38);box-shadow:none}fieldset[disabled] .mdl-selectfield .mdl-selectfield__select,.mdl-selectfield.is-disabled .mdl-selectfield__select{background-color:transparent;border-bottom:1px dotted rgba(0,0,0, 0.12);color:rgba(0,0,0, 0.26)}.mdl-selectfield__label{bottom:0;color:rgba(0,0,0, 0.26);font-size:16px;left:0;right:0;pointer-events:none;position:absolute;display:block;top:24px;width:100%;overflow:hidden;white-space:nowrap;text-align:left}.mdl-selectfield.is-dirty .mdl-selectfield__label{visibility:hidden}.mdl-selectfield--floating-label .mdl-selectfield__label{transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}fieldset[disabled] .mdl-selectfield .mdl-selectfield__label,.mdl-selectfield.is-disabled.is-disabled .mdl-selectfield__label{color:rgba(0,0,0, 0.26)}.mdl-selectfield--floating-label.is-focused .mdl-selectfield__label,.mdl-selectfield--floating-label.is-dirty .mdl-selectfield__label{color:rgb(63,81,181);font-size:12px;top:4px;visibility:visible}.mdl-selectfield--floating-label.is-invalid .mdl-selectfield__label{color:rgb(222, 50, 38);font-size:12px}.mdl-selectfield__label:after{background-color:rgb(63,81,181);bottom:20px;content:'';height:2px;left:45%;position:absolute;transition-duration:0.2s;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);visibility:hidden;width:10px}.mdl-selectfield.is-focused .mdl-selectfield__label:after{left:0;visibility:visible;width:100%}.mdl-selectfield.is-invalid .mdl-selectfield__label:after{background-color:rgb(222, 50, 38)}.mdl-selectfield__error{color:rgb(222, 50, 38);position:absolute;font-size:12px;margin-top:3px;visibility:hidden;display:block}.mdl-selectfield.is-invalid .mdl-selectfield__error{visibility:visible}.mdl-selectfield__placeholder{bottom:20px;cursor:pointer;color:rgba(0,0,0, 0.26);left:0;padding:2px 0;position:absolute;text-align:right;top:20px;width:100%}.mdl-selectfield__placeholder>i{outline:0}
/*# sourceMappingURL=mdl-selectfield.min.css.map */

@ -1,2 +0,0 @@
!function(){"use strict";var e=function(e){this.element_=e,this.init()};window.MaterialSelectfield=e,e.prototype.Constant_={},e.prototype.CssClasses_={LABEL:"mdl-selectield__label",SELECT:"mdl-selectfield__select",IS_DIRTY:"is-dirty",IS_FOCUSED:"is-focused",IS_DISABLED:"is-disabled",IS_INVALID:"is-invalid",IS_UPGRADED:"is-upgraded"},e.prototype.onFocus_=function(e){this.element_.classList.add(this.CssClasses_.IS_FOCUSED)},e.prototype.onBlur_=function(e){this.element_.classList.remove(this.CssClasses_.IS_FOCUSED)},e.prototype.onReset_=function(e){this.updateClasses_()},e.prototype.updateClasses_=function(){this.checkDisabled(),this.checkValidity(),this.checkDirty()},e.prototype.checkDisabled=function(){this.select_.disabled?this.element_.classList.add(this.CssClasses_.IS_DISABLED):this.element_.classList.remove(this.CssClasses_.IS_DISABLED)},e.prototype.checkDisabled=e.prototype.checkDisabled,e.prototype.checkValidity=function(){this.select_.validity.valid?this.element_.classList.remove(this.CssClasses_.IS_INVALID):this.element_.classList.add(this.CssClasses_.IS_INVALID)},e.prototype.checkValidity=e.prototype.checkValidity,e.prototype.checkDirty=function(){this.select_.value&&this.select_.value.length>0?this.element_.classList.add(this.CssClasses_.IS_DIRTY):this.element_.classList.remove(this.CssClasses_.IS_DIRTY)},e.prototype.checkDirty=e.prototype.checkDirty,e.prototype.disable=function(){this.select_.disabled=!0,this.updateClasses_()},e.prototype.disable=e.prototype.disable,e.prototype.enable=function(){this.select_.disabled=!1,this.updateClasses_()},e.prototype.enable=e.prototype.enable,e.prototype.change=function(e){e&&(this.select_.value=e),this.updateClasses_()},e.prototype.change=e.prototype.change,e.prototype.init=function(){if(this.element_&&(this.label_=this.element_.querySelector("."+this.CssClasses_.LABEL),this.select_=this.element_.querySelector("."+this.CssClasses_.SELECT),this.select_)){if(this.boundUpdateClassesHandler=this.updateClasses_.bind(this),this.boundFocusHandler=this.onFocus_.bind(this),this.boundBlurHandler=this.onBlur_.bind(this),this.boundResetHandler=this.onReset_.bind(this),this.select_.addEventListener("change",this.boundUpdateClassesHandler),this.select_.addEventListener("focus",this.boundFocusHandler),this.select_.addEventListener("blur",this.boundBlurHandler),this.select_.addEventListener("reset",this.boundResetHandler),"function"==typeof MaterialMenu){var e=this,t="plc-"+(new Date).getTime(),s=document.createElement("div");if(s.id=t,s.classList.add("mdl-selectfield__placeholder"),s.innerHTML='<i class="material-icons" tabindex="-1">arrow_drop_down</i>',s.addEventListener("click",function(){e.select_.focus()}),this.element_.appendChild(s),this.options_=this.select_.querySelectorAll("option"),this.options_.length){var i=document.createElement("ul");i.classList.add("mdl-menu"),i.classList.add("mdl-js-menu"),i.classList.add("mdl-js-ripple-effect"),i.tabIndex="-1",i.setAttribute("for",t),i.addEventListener("mousewheel",function(e){(this.scrollTop===this.scrollHeight-this.offsetHeight&&e.wheelDelta<0||0===this.scrollTop&&e.wheelDelta>0)&&e.preventDefault()});for(var l=0;l<this.options_.length;l++){var n=this.options_[l],a=((n.textContent||"").toUpperCase().replace(/( )|(\n)/g,""),document.createElement("li"));a.textContent=n.textContent,a.classList.add("mdl-menu__item"),a.setAttribute("data-value",l),a.tabIndex="-1",a.addEventListener("mousedown",function(){e.select_.selectedIndex=this.getAttribute("data-value"),e.updateClasses_()}),i.appendChild(a),this.element_.appendChild(i)}}componentHandler.upgradeDom("MaterialMenu")}this.updateClasses_(),this.element_.classList.add(this.CssClasses_.IS_UPGRADED)}},e.prototype.mdlDowngrade_=function(){this.select_.removeEventListener("change",this.boundUpdateClassesHandler),this.select_.removeEventListener("focus",this.boundFocusHandler),this.select_.removeEventListener("blur",this.boundBlurHandler),this.select_.removeEventListener("reset",this.boundResetHandler)},componentHandler.register({constructor:e,classAsString:"MaterialSelectfield",cssClass:"mdl-js-selectfield",widget:!0})}();
//# sourceMappingURL=mdl-selectfield.min.js.map

@ -1,167 +1,12 @@
<html> <html>
<head> <head>
<script src="/bosca-ceoil-js/assets/index.js"></script> <script src="/bosca-ceoil-js/public/index.js"></script>
<link rel="stylesheet" href="/bosca-ceoil-js/public/index.css">
<link rel="stylesheet" href="/bosca-ceoil-js/assets/md-icons.css">
<link rel="stylesheet" href="/bosca-ceoil-js/assets/material.indigo-pink.min.css">
<script defer src="/bosca-ceoil-js/assets/material.min.js"></script>
<link rel="stylesheet" href="/bosca-ceoil-js/assets/mdl-selectfield.min.css">
<script defer src="/bosca-ceoil-js/assets/mdl-selectfield.min.js"></script>
<link rel="stylesheet" href="/bosca-ceoil-js/assets/dialog-polyfill.min.css">
<link rel="stylesheet" href="/bosca-ceoil-js/index.css">
</head> </head>
<body> <body>
<div id="app"> <div id="root"></div>
<div class="metaWorkspace">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
id="playButton">
Play
</button>
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select class="mdl-selectfield__select" id="instruments">
<!-- MIDI -->
<option value="midi.piano1">MIDI ⮞ Piano ⮞ Grand Piano</option>
<option value="midi.chrom1">MIDI ⮞ Bells ⮞ Celesta</option>
<option value="midi.organ1">MIDI ⮞ Organ ⮞ Drawbar Organ</option>
<option value="midi.guitar1">MIDI ⮞ Guitar ⮞ Nylon Guitar</option>
<option value="midi.bass1">MIDI ⮞ Bass ⮞ Acoustic Bass</option>
<option value="midi.strings1">MIDI ⮞ Strings ⮞ Violin</option>
<option value="midi.ensemble1">MIDI ⮞ Ensemble ⮞ String Ensemble 1</option>
<option value="midi.brass1">MIDI ⮞ Brass ⮞ Trumpet</option>
<option value="midi.reed1">MIDI ⮞ Reed ⮞ Soprano Sax</option>
<option value="midi.pipe1">MIDI ⮞ Pipe ⮞ Piccolo</option>
<option value="midi.lead1">MIDI ⮞ Lead ⮞ Square Lead</option>
<option value="midi.pad1">MIDI ⮞ Pad ⮞ New Age Pad</option>
<option value="midi.fx1">MIDI ⮞ Synth ⮞ Rain</option>
<option value="midi.world1">MIDI ⮞ World ⮞ Sitar</option>
<option value="midi.percus1">MIDI ⮞ Drums ⮞ Tinkle Bell</option>
<option value="midi.se1">MIDI ⮞ Effects ⮞ Fret Noise</option>
<!-- Chiptune -->
<option value="square">Chiptune ⮞ Square Wave</option>
</select>
<label class="mdl-selectfield__label">Instrument</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="bpm" type="number" min="10" max="220" step="5" value="120"
required />
<label class="mdl-textfield__label">BPM</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="volume" type="number" min="0" max="200" step="5" value="100"
required />
<label class="mdl-textfield__label">Volume</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="swing" type="number" min="0" max="1" step="0.1" value="0"
required />
<label class="mdl-textfield__label">Swing</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="resonance" type="number" min="0" max="1" step="0.05" value="0"
required />
<label class="mdl-textfield__label">Resonance</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="dampening" type="number" min="0" max="3000" step="100"
value="3000" required />
<label class="mdl-textfield__label">Dampening</label>
</div>
<button id="effectsButton"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">
Effects <i class="material-icons">arrow_drop_down</i>
</button>
<ul id="effectsMenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="effectsButton">
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="delayEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Delay</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="chorusEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Chorus</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="reverbEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Reverb</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="distortionEffect" type="number" min="0" max="8" step="1"
value="0" required />
<label class="mdl-textfield__label">Distortion</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="lowBoostEffect" type="number" min="0" max="3000"
step="100" value="0" required />
<label class="mdl-textfield__label">Low boost</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="compressorEffect" type="number" min="-100" max="0"
step="5" value="0" required />
<label class="mdl-textfield__label">Compressor</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="highPassEffect" type="number" min="0" max="3000"
step="100" value="0" required />
<label class="mdl-textfield__label">High pass</label>
</div>
</li>
</ul>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
id="helpButton">
Help
</button>
</div>
<div id="patternWorkspace">
<table id="pattern">
</table>
</div>
</div>
<dialog id="helpModal" class="mdl-dialog">
<h4 class="mdl-dialog__title">Help</h4>
<div class="mdl-dialog__content">
<ul>
<li>Click in a box to add or remove a note.</li>
<li>Shift click to extend a note, and ctrl-shift click to shorten it.</li>
<li>Press the space bar to play or stop the song.</li>
<li>After clicking in an entry field, use the arrow keys to quickly change the value.</li>
</ul>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Close</button>
</div>
</dialog>
</body> </body>
</html> </html>

@ -10,6 +10,19 @@ body {
width: 100%; width: 100%;
} }
.mdc-text-field {
margin-left: 10px;
}
.effect-panel {
display: inline;
}
.effect-panel-popup {
display: flex;
flex-flow: column;
}
#app { #app {
display: flex; display: flex;
flex-flow: column; flex-flow: column;
@ -17,12 +30,12 @@ body {
width: 100%; width: 100%;
} }
#playButton, #effectsButton, #helpButton { button {
margin-left: 10px; margin-left: 10px;
margin-right: 10px; margin-right: 10px;
} }
#playButton, #helpButton { #playButton {
width: 100px; width: 100px;
} }
@ -84,7 +97,7 @@ table tr:nth-of-type(12n) {
border-bottom: 3px solid white; border-bottom: 3px solid white;
} }
.metaWorkspace { #metaWorkspace {
background-color: transparent; background-color: transparent;
margin-bottom: 10px; margin-bottom: 10px;
} }
@ -93,19 +106,14 @@ table tr:nth-of-type(12n) {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
user-select: none;
} }
table#pattern { table#pattern {
width: 100%; width: 100%;
} }
/* MDL hides these by default. */ .no-select {
-moz-user-select: none;
input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-user-select: none;
-webkit-appearance: inner-spin-button !important; user-select: none;
}
#helpModal {
width: 600px;
} }

28439
public/index.js Normal file

File diff suppressed because one or more lines are too long