Skip to content

Commit

Permalink
made new dropdown
Browse files Browse the repository at this point in the history
  • Loading branch information
@elalish
elalish committed Jul 28, 2023
1 parent a0a87ae commit facaac5
Show file tree
Hide file tree
Showing 3 changed files with 62 additions and 28 deletions.
12 changes: 6 additions & 6 deletions bindings/wasm/examples/editor.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,15 +133,11 @@ model-viewer {
margin: 1em;
}

#file {
width: 250px;
}

.dropdown {
display: none;
position: absolute;
z-index: 1;
width: 250px;
width: 100%;
max-height: 80vh;
overflow-y: auto;
}
Expand All @@ -150,6 +146,10 @@ model-viewer {
display: block;
}

.hide {
display: none;
}

.uparrow {
display: inline-block;
position: relative;
Expand All @@ -174,6 +174,7 @@ model-viewer {
position: absolute;
width: 36px;
top: 0px;
right: 0px;
background-size: 20px;
background-repeat: no-repeat;
background-position: center;
Expand All @@ -193,7 +194,6 @@ model-viewer {

.trash {
background-image: url(/icons/trash.png);
right: 0px;
}

.icon:hover {
Expand Down
57 changes: 41 additions & 16 deletions bindings/wasm/examples/editor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,20 +26,31 @@ let editor = undefined;

// File UI ------------------------------------------------------------
const fileButton = document.querySelector('#file');
const currentElement = document.querySelector('#current');
const arrow = document.querySelector('.uparrow');
const dropdown = document.querySelector('.dropdown');
const currentFileElement = document.querySelector('#current');
const fileArrow = document.querySelector('#file .uparrow');
const fileDropdown = document.querySelector('#fileDropdown');
const saveContainer = document.querySelector('#save');
const saveDropdown = document.querySelector('#saveDropdown');
const saveArrow = document.querySelector('#save .uparrow');

const hideDropdown = function() {
dropdown.classList.remove('show');
arrow.classList.remove('down');
fileDropdown.classList.remove('show');
saveDropdown.classList.remove('show');
fileArrow.classList.remove('down');
saveArrow.classList.remove('down');
};
const toggleDropdown = function(event) {
const toggleFileDropdown = function(event) {
event.stopPropagation();
dropdown.classList.toggle('show');
arrow.classList.toggle('down');
fileDropdown.classList.toggle('show');
fileArrow.classList.toggle('down');
};
fileButton.onclick = toggleDropdown;
const toggleSaveDropdown = function(event) {
event.stopPropagation();
saveDropdown.classList.toggle('show');
saveArrow.classList.toggle('down');
};
fileButton.onclick = toggleFileDropdown;
saveArrow.parentElement.onclick = toggleSaveDropdown;
document.body.onclick = hideDropdown;

const prefix = 'ManifoldCAD';
Expand All @@ -62,7 +73,7 @@ function nthKey(n) {

function saveCurrent() {
if (editor) {
const currentName = currentElement.textContent;
const currentName = currentFileElement.textContent;
if (!exampleFunctions.get(currentName)) {
setScript(currentName, editor.getValue());
}
Expand All @@ -77,7 +88,7 @@ let isExample = true;
function switchTo(scriptName) {
if (editor) {
switching = true;
currentElement.textContent = scriptName;
currentFileElement.textContent = scriptName;
setScript('currentName', scriptName);
const code =
exampleFunctions.get(scriptName) ?? getScript(scriptName) ?? '';
Expand Down Expand Up @@ -148,8 +159,8 @@ function addEdit(button) {
if (!input) return;
const newName = uniqueName(input);
label.textContent = newName;
if (currentElement.textContent == oldName) {
currentElement.textContent = newName;
if (currentFileElement.textContent == oldName) {
currentFileElement.textContent = newName;
}
removeScript(oldName);
setScript(newName, code);
Expand Down Expand Up @@ -182,7 +193,7 @@ function addEdit(button) {
}, {once: true});
} else if (performance.now() - lastClick > 500) {
removeScript(label.textContent);
if (currentElement.textContent == label.textContent) {
if (currentFileElement.textContent == label.textContent) {
switchTo('Intro');
}
const container = button.parentElement;
Expand Down Expand Up @@ -269,10 +280,10 @@ require(['vs/editor/editor.main'], async function() {

for (const [name] of exampleFunctions) {
const button = createDropdownItem(name);
dropdown.appendChild(button.parentElement);
fileDropdown.appendChild(button.parentElement);
}

let currentName = currentElement.textContent;
let currentName = currentFileElement.textContent;

for (let i = 0; i < window.localStorage.length; i++) {
const key = nthKey(i);
Expand Down Expand Up @@ -419,15 +430,29 @@ runButton.onclick = function() {
};

const glbButton = document.querySelector('#glb');
const glbContainer = glbButton.parentElement;
glbButton.onclick = function() {
const oldSave = saveContainer.firstElementChild;
if (oldSave !== glbContainer) {
saveDropdown.insertBefore(oldSave, saveDropdown.firstElementChild);
saveContainer.insertBefore(glbContainer, saveDropdown);
glbContainer.appendChild(saveArrow.parentElement);
}
const link = document.createElement('a');
link.download = 'manifold.glb';
link.href = glbURL;
link.click();
};

const threemfButton = document.querySelector('#threemf');
const threemfContainer = threemfButton.parentElement;
threemfButton.onclick = function() {
const oldSave = saveContainer.firstElementChild;
if (oldSave !== threemfContainer) {
saveDropdown.insertBefore(oldSave, saveDropdown.firstElementChild);
saveContainer.insertBefore(threemfContainer, saveDropdown);
threemfContainer.appendChild(saveArrow.parentElement);
}
const link = document.createElement('a');
link.download = 'manifold.3mf';
link.href = threeMFURL;
Expand Down
21 changes: 15 additions & 6 deletions bindings/wasm/examples/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,25 @@
<div class="page">
<div class="container header" style="background-color: #A288B3;">
<p style="flex: 2;"><a target="_blank" href="https://github.com/elalish/manifold">Manifold</a>CAD </p>
<div class="margin" style="position: relative;">
<button type="button" id="file" class="blue"><b class="uparrow"></b>&nbsp;&nbsp;<span
<div class="margin" style="position: relative; width: 250px;">
<button type="button" id="file" class="blue item"><b class="uparrow"></b>&nbsp;&nbsp;<span
id="current">Intro</span></button>
<div class="dropdown">
<div class="dropdown" id="fileDropdown">
<button type="button" class="green item" id="new">New</button>
</div>
</div>
<button type="button" id="compile" class="margin green" disabled><span>Run</span></button>
<button type="button" id="glb" class="blue margin">Save GLB</button>
<button type="button" id="threemf" class="blue margin">Save 3MF</button>
<div id="save" class="margin" style="position: relative; width: 125px;">
<div class="item">
<button type="button" id="glb" class="blue item">Save GLB</button>
<button type="button" class="icon"><b class="uparrow" style="right: 2px;"></b></button>
</div>
<div class="dropdown" id="saveDropdown">
<div class="item">
<button type="button" id="threemf" class="blue item">Save 3MF</button>
</div>
</div>
</div>
</div>
<div class="container" style="flex: 2;">
<div id="editor" class="col"></div>
Expand All @@ -75,4 +84,4 @@
<script type="module" src="editor.js"></script>
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>

</html>
</html>

0 comments on commit facaac5

Please sign in to comment.