diff --git a/bin/em/variabletime/web/css/demo.css b/bin/em/variabletime/web/css/demo.css index fa9a791..a3c2336 100755 --- a/bin/em/variabletime/web/css/demo.css +++ b/bin/em/variabletime/web/css/demo.css @@ -266,6 +266,9 @@ body.debug div:not(.centerLine) { #notice_recording.visible { display: flex; } +#notice_recording button { + pointer-events: all; +} #notice_recording.impenetrable { pointer-events: all; background-color: rgba(0,0,0,0.5); diff --git a/bin/em/variabletime/web/css/theatre.css b/bin/em/variabletime/web/css/theatre.css index bdf866b..e5fdf51 100644 --- a/bin/em/variabletime/web/css/theatre.css +++ b/bin/em/variabletime/web/css/theatre.css @@ -46,6 +46,37 @@ .panel>.bottomButtonsContainer { order: 3; + display: flex; + flex-direction: column; +} + +.panel>.bottomButtonsContainer #start_new_project { + order: 1; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #open_project { + order: 2; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #save_project { + order: 3; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #add_font { + order: 4; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #upload_audio { + order: 5; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #exporter_open { + order: 6; + margin: 7px 10px 0px 10px; +} +.panel>.bottomButtonsContainer #hide_ui { + order: 7; + margin: 7px 10px; } .panelWrapper {} diff --git a/bin/em/variabletime/web/js/artboard.js b/bin/em/variabletime/web/js/artboard.js index 065f091..6638c30 100644 --- a/bin/em/variabletime/web/js/artboard.js +++ b/bin/em/variabletime/web/js/artboard.js @@ -173,6 +173,35 @@ const Artboard = function(tp, domElement = false, autoInit = true) { this.hide = () => { // nothing to do }; + const getHierarchyPanelButton = () => { + if (hierarchyPanelButton === null) { + hierarchyPanelButton = tp.shadowRoot.querySelector(`.layerMover${this.id()}`); + } + return hierarchyPanelButton; + }; + this.isSelected = () => { + const panel = getHierarchyPanelButton(); + if (panel === null) { + return false; + } else { + const notSelected = panel.querySelector('.not-selected'); + return !notSelected; + } + }; + this.select = () => { + const panel = getHierarchyPanelButton(); + const selectables = panel.querySelector('.not-selected'); + if (selectables !== null && typeof selectables.dispatchEvent === 'function') { + var clickEvent = new MouseEvent("click", { + "view": window, + "bubbles": true, + "cancelable": false + }); + selectables.dispatchEvent(clickEvent); + } else { + window.debugElement = panel; + } + }; // action if (typeof domElement !== 'object') { diff --git a/bin/em/variabletime/web/js/audio.js b/bin/em/variabletime/web/js/audio.js index 77557e2..9c3b4f6 100644 --- a/bin/em/variabletime/web/js/audio.js +++ b/bin/em/variabletime/web/js/audio.js @@ -44,6 +44,7 @@ const Audio = function(tp, record) { //}, //}); let started = false; + let allowedMicrophone = true; // TODO: actually use this let mapping = {}; let savedMapping = {}; @@ -915,7 +916,15 @@ const Audio = function(tp, record) { visualize(); }) .catch(function(err) { - console.log("The following gUM error occured: " + err); + console.log("Audio::init","The following gUM error occured: " + err); + const noPermission = err.message.toLowerCase().indexOf('permission') >= 0; + if (noPermission) { + if (allowedMicrophone) { + alert("We don't have permission to access the microphone. Microphone input will be silent."); + } + allowedMicrophone = false; + // TODO: actually use this + } }); } else { console.log("getUserMedia not supported on your browser!"); diff --git a/bin/em/variabletime/web/js/main.js b/bin/em/variabletime/web/js/main.js index 95d8617..8268145 100644 --- a/bin/em/variabletime/web/js/main.js +++ b/bin/em/variabletime/web/js/main.js @@ -121,10 +121,7 @@ window.showAbout = () => { if (getAbout() === null) { return; } - getAbout().classList.remove("hidden"); - - } window.hideAbout = () => { if (getAbout() !== null) { @@ -524,9 +521,19 @@ const deleteLayer = (id, saveProject = true) => { } }); } + const wasSelected = layers[index].isSelected(); layers[index].prepareForDepartureFromThisBeautifulExperience(); layers.splice(index, 1); delete layersById[id]; + if (wasSelected) { + if (layers.length > index + 1) { + layers[index].select(); + } else if (layers.length > 0) { + layers[layers.length - 1].select(); + } else { + artboard.select(); + } + } if (saveProject) { setTimeout(() => { tp.saveProject(); diff --git a/bin/em/variabletime/web/js/record.js b/bin/em/variabletime/web/js/record.js index 924a538..951c095 100644 --- a/bin/em/variabletime/web/js/record.js +++ b/bin/em/variabletime/web/js/record.js @@ -469,9 +469,9 @@ const Record = function(tp) { document.querySelector('#notice_recording') .classList.add('visible'); document.querySelector('#notice_recording') - .classList.remove('imprenetrable'); + .classList.remove('impenetrable'); document.querySelector('#notice_recording .what p').innerHTML = 'recording'; - document.querySelector('#notice_recording .details p').innerHTML = ''; + document.querySelector('#notice_recording .details p').innerHTML = ''; if (!isInitialized) { init(); }