reenable basic modal functionality
This commit is contained in:
Stewart Allen
parent
757457fed2
commit
3ea6f400bc
7 changed files with 177 additions and 105 deletions
|
|
@ -1091,10 +1091,15 @@
|
|||
layerView: $('layer-view'),
|
||||
layerSlider: $('layer-slider'),
|
||||
modelOpacity: $('opacity'),
|
||||
|
||||
modal: $('modal'),
|
||||
print: $('print'),
|
||||
local: $('local'),
|
||||
help: $('help'),
|
||||
help: $('mod-help'),
|
||||
print: $('mod-print'),
|
||||
local: $('mod-local'),
|
||||
files: $('mod-files'),
|
||||
catalogBody: $('catalogBody'),
|
||||
catalogList: $('catalogList'),
|
||||
|
||||
devices: $('devices'),
|
||||
deviceAdd: $('device-add'),
|
||||
deviceDelete: $('device-del'),
|
||||
|
|
@ -1119,9 +1124,6 @@
|
|||
// toolTaperAngle: $('tool-tangle'),
|
||||
toolTaperTip: $('tool-ttip'),
|
||||
toolMetric: $('tool-metric'),
|
||||
catalog: $('catalog'),
|
||||
catalogBody: $('catalogBody'),
|
||||
catalogList: $('catalogList'),
|
||||
settings: $('settings'),
|
||||
settingsBody: $('settingsBody'),
|
||||
settingsList: $('settingsList'),
|
||||
|
|
@ -1763,12 +1765,12 @@
|
|||
// add ability to override
|
||||
API.show.controls(API.feature.controls);
|
||||
|
||||
// set initial layer slider size
|
||||
API.dialog.update();
|
||||
|
||||
// show version on startup
|
||||
$('app-vers').innerHTML = KIRI.version;
|
||||
|
||||
// enable modal hiding
|
||||
$('mod-x').onclick = API.modal.hide;
|
||||
|
||||
if (!SETUP.s) console.log(`kiri | init main | ${KIRI.version}`);
|
||||
|
||||
// send init-done event
|
||||
|
|
|
|||
|
|
@ -184,9 +184,8 @@
|
|||
set: undefined // set during init
|
||||
},
|
||||
dialog: {
|
||||
show: showDialog,
|
||||
hide: hideDialog,
|
||||
update: updateDialogLeft
|
||||
show: showModal,
|
||||
hide: hideModal,
|
||||
},
|
||||
help: {
|
||||
show: showHelp,
|
||||
|
|
@ -1619,37 +1618,62 @@
|
|||
}
|
||||
|
||||
function modalShowing() {
|
||||
let showing = $('modal').style.display !== 'none';
|
||||
return showing || UC.isPopped();
|
||||
return UI.modal.style.display === 'flex';
|
||||
}
|
||||
|
||||
function showModal(which) {
|
||||
UI.modal.style.display = 'block';
|
||||
["print","help","local"].forEach(function(modal) {
|
||||
UI[modal].style.display = (modal === which ? 'block' : 'none');
|
||||
let mod = UI.modal,
|
||||
style = mod.style,
|
||||
visible = modalShowing(),
|
||||
info = { pct: 0 };
|
||||
|
||||
["print","help","files","local"].forEach(function(name) {
|
||||
UI[name].style.display = name === which ? 'flex' : '';
|
||||
});
|
||||
if (which) API.event.emit('modal.show', which);
|
||||
|
||||
function ondone() {
|
||||
// UI[which].style.display = 'flex';
|
||||
API.event.emit('modal.show', which);
|
||||
}
|
||||
|
||||
if (visible) {
|
||||
return ondone();
|
||||
}
|
||||
|
||||
style.height = '0';
|
||||
style.display = 'flex';
|
||||
|
||||
new TWEEN.Tween(info).
|
||||
easing(TWEEN.Easing.Quadratic.InOut).
|
||||
to({ pct: 100 }, 100).
|
||||
onUpdate(() => { style.height = `${info.pct}%` }).
|
||||
onComplete(ondone).
|
||||
start();
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
if (!modalShowing()) {
|
||||
return;
|
||||
}
|
||||
let mod = UI.modal, style = mod.style, info={pct:100};
|
||||
new TWEEN.Tween(info).
|
||||
easing(TWEEN.Easing.Quadratic.InOut).
|
||||
to({pct:0}, 100).
|
||||
onUpdate(() => { style.height = `${info.pct}%` }).
|
||||
onComplete(() => { style.display = '' }).
|
||||
start();
|
||||
}
|
||||
|
||||
function hideDialog() {
|
||||
showDialog(null);
|
||||
hideModal();
|
||||
}
|
||||
|
||||
function showDialog(which, force) {
|
||||
return console.log('TODO showDialog');
|
||||
if (UC.isPopped()) {
|
||||
UC.hidePop();
|
||||
return;
|
||||
}
|
||||
["catalog","devices","tools","settings"].forEach(function(dialog) {
|
||||
let style = UI[dialog].style;
|
||||
style.display = (dialog === which && (force || style.display !== 'flex') ? 'flex' : 'none');
|
||||
});
|
||||
if (which) API.event.emit('dialog.show', which);
|
||||
function showDialog(which) {
|
||||
showModal(which);
|
||||
}
|
||||
|
||||
function showCatalog() {
|
||||
showDialog("catalog");
|
||||
showDialog("files");
|
||||
}
|
||||
|
||||
function getSettings() {
|
||||
|
|
@ -1776,10 +1800,6 @@
|
|||
UI.settings.style.right = (right.width + 5) + 'px';
|
||||
}
|
||||
|
||||
function hideModal() {
|
||||
UI.modal.style.display = 'none';
|
||||
}
|
||||
|
||||
function showHelp() {
|
||||
showHelpFile(`/kiri/lang/${KIRI.lang.get()}-help.html`);
|
||||
}
|
||||
|
|
@ -1792,7 +1812,6 @@
|
|||
}
|
||||
ajax(local, function(html) {
|
||||
UI.help.innerHTML = html;
|
||||
$('help-close').onclick = hideModal;
|
||||
$('kiri-version').innerHTML = `<i>${LANG.version} ${KIRI.version}</i>`;
|
||||
showModal('help');
|
||||
});
|
||||
|
|
|
|||
|
|
@ -113,7 +113,7 @@
|
|||
|
||||
if (popper) {
|
||||
let pop = DOC.createElement('div');
|
||||
pop.classList.add('setpop');
|
||||
pop.classList.add('set-pop');
|
||||
row.appendChild(pop);
|
||||
addTo = pop;
|
||||
} else {
|
||||
|
|
@ -121,7 +121,7 @@
|
|||
}
|
||||
|
||||
div.appendChild(row);
|
||||
row.setAttribute("class", "setgroup noselect");
|
||||
row.setAttribute("class", "set-group noselect");
|
||||
row.appendChild(a);
|
||||
a.appendChild(DOC.createTextNode(label));
|
||||
addModeControls(row, opt);
|
||||
|
|
|
|||
|
|
@ -78,6 +78,9 @@ select {
|
|||
th, tr, td, span, div, label, button {
|
||||
user-select: none;
|
||||
}
|
||||
th, tr, td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.noselect {
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
|
|
@ -280,11 +283,47 @@ th, tr, td, span, div, label, button {
|
|||
display: none;
|
||||
position: fixed;
|
||||
z-index: 10000;
|
||||
top: 0px;
|
||||
transform: translateY(-50%);
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
height: 300px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
border-bottom: 1px solid black;
|
||||
border-top: 1px solid black;
|
||||
overflow: hidden;
|
||||
}
|
||||
#modal > div {
|
||||
position: absolute;
|
||||
transform: translateX(50%) translateY(-50%);
|
||||
right: 50%;
|
||||
top: 50%;
|
||||
}
|
||||
.mdialog {
|
||||
display: none;
|
||||
padding: 10px;
|
||||
font-size: smaller;
|
||||
font-family: monospace;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
}
|
||||
#mod-top {
|
||||
height: 10px;
|
||||
border-top-left-radius: 10px;
|
||||
border-top-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
#mod-x {
|
||||
position: absolute;
|
||||
z-index: 30000;
|
||||
bottom: -20px;
|
||||
right: 5px;
|
||||
}
|
||||
#mod-end {
|
||||
height: 10px;
|
||||
border-bottom-left-radius: 10px;
|
||||
border-bottom-right-radius: 10px;
|
||||
background-color: rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
#slider {
|
||||
|
|
@ -298,22 +337,18 @@ th, tr, td, span, div, label, button {
|
|||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
#slider > div {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#slider-begin {
|
||||
background-color: #ccc;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#slider-end {
|
||||
background-color: #ccc;
|
||||
border-top: 1px solid #aaa;
|
||||
}
|
||||
|
||||
#slider-hold {
|
||||
background-color: #ccc;
|
||||
position: absolute;
|
||||
|
|
@ -321,7 +356,6 @@ th, tr, td, span, div, label, button {
|
|||
left: 0;
|
||||
border: 3px solid white;
|
||||
}
|
||||
|
||||
#slider-hold .shim {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
|
|
@ -382,7 +416,7 @@ th, tr, td, span, div, label, button {
|
|||
background-color: #abc;
|
||||
height: 10px;
|
||||
}
|
||||
.setgroup {
|
||||
.set-group {
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
background-color: rgba(255,255,255,0.75);
|
||||
|
|
@ -393,12 +427,12 @@ th, tr, td, span, div, label, button {
|
|||
color: #89a;
|
||||
right: -5px;
|
||||
}
|
||||
.setgroup:hover {
|
||||
.set-group:hover {
|
||||
background-color: #eee;
|
||||
border: 1px solid #aaa;
|
||||
color: #000;
|
||||
}
|
||||
.setpop {
|
||||
.set-pop {
|
||||
top: 50%;
|
||||
right: 100%;
|
||||
position: absolute;
|
||||
|
|
@ -407,11 +441,11 @@ th, tr, td, span, div, label, button {
|
|||
transform: translateY(-50%);
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
border: 1px solid #aaa;
|
||||
border-radius: 3px;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
margin-right: 5px;
|
||||
padding: 5px;
|
||||
}
|
||||
.setpop label {
|
||||
.set-pop label {
|
||||
padding: 2px 4px 2px 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -87,33 +87,54 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-rotate" class="lt-menu">
|
||||
<i class="fas fa-sync-alt"></i>
|
||||
<label>rotate</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-scale" class="lt-menu">
|
||||
<i class="fas fa-expand"></i>
|
||||
<label>scale</label>
|
||||
<div id="pop-view" class="pop-lcol row">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div id="lt-end"></div>
|
||||
</div>
|
||||
<div id="mid-mcol" class="grow">
|
||||
<div id="modal">
|
||||
<div id="mod-help">
|
||||
<div class="col">
|
||||
<div id="mod-top" class="row"><div id="mod-x"><i class="fas fa-times"></i></div></div>
|
||||
|
||||
<div id="mod-help" class="mdialog col">
|
||||
<a href="https://en.wikipedia.org/wiki/Slicer_(3D_printing)">wikipedia</a>
|
||||
<a href="https://www.onshape.com/cad-blog/partner-spotlight-kirimoto">Onshape</a>
|
||||
<a href="https://www.inov3d.net/3d-printing-slicer-software-download/">slicer news</a>
|
||||
<a href="https://sienci.com/2016/08/24/the-story-of-kirimoto/">Sienci Labs</a>
|
||||
<a href="https://www.youtube.com/watch?v=IZ1VG07oFCo">Teaching Tech</a>
|
||||
</div>
|
||||
<div id="mod-setup">
|
||||
<div id="mod-setup" class="mdialog">
|
||||
<div id="device">temp device</div>
|
||||
<div id="layers">temp layers</div>
|
||||
<div id="langpop">temp language</div>
|
||||
</div>
|
||||
<div id="mod-tools"></div>
|
||||
<div id="mod-local"></div>
|
||||
<div id="mod-print"></div>
|
||||
<div id="mod-files" class="mdialog"></div>
|
||||
<div id="mod-tools" class="mdialog"></div>
|
||||
<div id="mod-local" class="mdialog"></div>
|
||||
<div id="mod-print" class="mdialog"></div>
|
||||
<!-- hidden file input loader -->
|
||||
<input id="load-file" type="file" name="loadme" style="display:none" accept=".stl,.gcode,.nc"/>
|
||||
|
||||
<div id="mod-end"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mid-rcol" class="col j-center">
|
||||
<div id="set-top" class="setgroup"><a>settings</a></div>
|
||||
<div id="set-top" class="set-group"><a>settings</a></div>
|
||||
<div id="settings" class="col"></div>
|
||||
<div id="set-end" class="setgroup"></div>
|
||||
<div id="set-end" class="set-group"></div>
|
||||
<div id="slider" class="col">
|
||||
<div id="slider-begin">0</div>
|
||||
<div id="slider-center" class="grow">
|
||||
|
|
|
|||
|
|
@ -1,64 +1,60 @@
|
|||
<button id="help-close" class="modal-x">X</button>
|
||||
<div id="help-body" class="row">
|
||||
|
||||
<div id="help-body" class="flex frow">
|
||||
<div id="help-left" class="col">
|
||||
<p><center><b>Kiri:Moto</b></center></p>
|
||||
|
||||
<div id="help-left">
|
||||
<div class="grouphead">About</div>
|
||||
|
||||
<p><center><b>Kiri:Moto</b></center></p>
|
||||
<div class="content">
|
||||
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
|
||||
is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for
|
||||
<br>
|
||||
Laser cutting, 3D printing, CNC milling
|
||||
</div>
|
||||
|
||||
<div class="grouphead">About</div>
|
||||
<div class="grouphead">File Loading</div>
|
||||
|
||||
<div class="content">
|
||||
<a href="#" title="Kiri-e is the Japanese art of papercutting"><b>Kiri:Moto</b></a>
|
||||
is an <a href="https://github.com/GridSpace/grid-apps" target="_github">open-source</a> slicer for
|
||||
<br>
|
||||
Laser cutting, 3D printing, CNC milling
|
||||
<div class="content">
|
||||
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
|
||||
<br>
|
||||
or import from your computer
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Workflow</div>
|
||||
|
||||
<div class="content">
|
||||
Select operating <u>mode</u><br>
|
||||
Select target <u>device</u><br>
|
||||
<u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Integrations</div>
|
||||
|
||||
<div class="content">
|
||||
Kiri:Moto is also available through<br>
|
||||
<a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and
|
||||
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Resources</div>
|
||||
|
||||
<div class="content">
|
||||
Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube
|
||||
<br>
|
||||
Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
|
||||
<br>
|
||||
Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
|
||||
<br>
|
||||
Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
|
||||
</div>
|
||||
|
||||
<div class="help-post"><p id="kiri-version"></p></div>
|
||||
</div>
|
||||
|
||||
<div class="grouphead">File Loading</div>
|
||||
|
||||
<div class="content">
|
||||
Drag and drop a <a href="https://en.wikipedia.org/wiki/STL_(file_format)" target="_stl">file</a> onto the grid
|
||||
<br>
|
||||
or import from your computer
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Workflow</div>
|
||||
|
||||
<div class="content">
|
||||
Select operating <u>mode</u><br>
|
||||
Select target <u>device</u><br>
|
||||
<u>Slice</u>, <u>Preview</u>, then <u>Export</u> GCode
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Integrations</div>
|
||||
|
||||
<div class="content">
|
||||
Kiri:Moto is also available through<br>
|
||||
<a target="_onshape" href="https://appstore.onshape.com/apps/CAM/EAAEWYIOMQKBENEMYW2N7MF253CT4WYL6SUJGEY=/description">Onshape</a> and
|
||||
<a target="_thingiverse" href="http://www.thingiverse.com/apps/kirimoto/">Thingiverse</a> as apps
|
||||
</div>
|
||||
|
||||
<div class="grouphead">Resources</div>
|
||||
|
||||
<div class="content">
|
||||
Watch <a target="_tutor" href="https://www.youtube.com/playlist?list=PLRoVgyRoWZpumQIKWm7oldx3bjDivqP24">a tutorial</a> on YouTube
|
||||
<br>
|
||||
Follow <a target="_tw" href="https://twitter.com/grid_space_3d">Grid.Space</a> on Twitter
|
||||
<br>
|
||||
Join the <a target="_fb" href="https://www.facebook.com/groups/kirimoto">user group</a> on Facebook
|
||||
<br>
|
||||
Visit the <a target="_help" href="https://wiki.grid.space/wiki/Kiri:Moto">Wiki</a> on Github
|
||||
</div>
|
||||
|
||||
<div class="help-post"><p id="kiri-version"></p></div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="help-right">
|
||||
<div id="help-right" class="col">
|
||||
<p><center><b>Keyboard & Mouse Controls</b></center>
|
||||
<p>
|
||||
<div class="flex frow">
|
||||
<div class="row">
|
||||
<table>
|
||||
<tr><th colspan=2 class="grouphead">Mode</th></tr>
|
||||
<tr><td><label>a</label></td><td>Arrange</td></tr>
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@ kiri.lang['en-us'] = {
|
|||
sl_lbot_l: "number of solid layers\nto enforce at the\nbottom of the print",
|
||||
|
||||
// FDM FILL
|
||||
fi_menu: "fill",
|
||||
fi_menu: "infill",
|
||||
fi_type: "type",
|
||||
fi_pcnt_s: "percentage",
|
||||
fi_pcnt_l: "fill density values\n0.0 - 1.0",
|
||||
|
|
@ -178,7 +178,7 @@ kiri.lang['en-us'] = {
|
|||
fi_over_l: "overlap with shell and fill\nas % of nozzle width\nhigher bonds better\n0.0 - 1.0",
|
||||
|
||||
// FDM FIRST LAYER
|
||||
fl_menu: "first layer",
|
||||
fl_menu: "1st layer",
|
||||
fl_lahi_s: "layer height",
|
||||
fl_lahi_l: "height of each slice\nin millimeters\nshould be >= slice height",
|
||||
fl_rate_s: "shell speed",
|
||||
|
|
|
|||
Loading…
Reference in a new issue