forked from BRNSystems/bosca-ceoil-js
Updates
This commit is contained in:
mtkennerly
parent
70229d574b
commit
7c114754b7
2
assets/dialog-polyfill.min.css
vendored
2
assets/dialog-polyfill.min.css
vendored
@ -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 */
|
|
||||||
1284
assets/index.js
1284
assets/index.js
File diff suppressed because one or more lines are too long
8
assets/material.indigo-pink.min.css
vendored
8
assets/material.indigo-pink.min.css
vendored
File diff suppressed because one or more lines are too long
10
assets/material.min.js
vendored
10
assets/material.min.js
vendored
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;
|
|
||||||
}
|
|
||||||
3
assets/mdl-selectfield.min.css
vendored
3
assets/mdl-selectfield.min.css
vendored
@ -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 */
|
|
||||||
2
assets/mdl-selectfield.min.js
vendored
2
assets/mdl-selectfield.min.js
vendored
@ -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
|
|
||||||
161
index.html
161
index.html
@ -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
28439
public/index.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user