AI_Assistant/grid-apps-cmms
Watch
1
0
Fork
You've already forked grid-apps-cmms
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reflow op add list. proper fix for mobile slider touch events

Browse source
This commit is contained in:
Stewart Allen 2022-10-18 00:44:39 -04:00
commit a79d566812
3 changed files with 30 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/kiri/init.js
View file

@ -2059,6 +2059,8 @@ gapp.register("kiri.init", [], (root, exports) => {
ui.slider.classList.add('slider-mobile'); ui.slider.classList.add('slider-mobile');
ui.sliderLo.classList.add('slider-mobile'); ui.sliderLo.classList.add('slider-mobile');
ui.sliderHi.classList.add('slider-mobile'); ui.sliderHi.classList.add('slider-mobile');
// add css style for mobile devices
DOC.body.classList.add('mobile');
} }
function pxToInt(txt) { function pxToInt(txt) {
@ -2077,6 +2079,7 @@ gapp.register("kiri.init", [], (root, exports) => {
function dragit(el, delta) { function dragit(el, delta) {
el.ontouchstart = el.onmousedown = (ev) => { el.ontouchstart = el.onmousedown = (ev) => {
// el.classList.add('sli-drag-el');
tracker.style.display = 'block'; tracker.style.display = 'block';
ev.stopPropagation(); ev.stopPropagation();
let obj = (ev.touches ? ev.touches[0] : ev); let obj = (ev.touches ? ev.touches[0] : ev);
@ -2089,6 +2092,7 @@ gapp.register("kiri.init", [], (root, exports) => {
drag.mdmax = drag.width - slbar - drag.loat; drag.mdmax = drag.width - slbar - drag.loat;
drag.himax = drag.width - slbar - drag.mdat; drag.himax = drag.width - slbar - drag.mdat;
let cancel_drag = tracker.ontouchend = tracker.onmouseup = (ev) => { let cancel_drag = tracker.ontouchend = tracker.onmouseup = (ev) => {
// el.classList.remove('sli-drag-el');
if (ev) { if (ev) {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
@ -2096,7 +2100,8 @@ gapp.register("kiri.init", [], (root, exports) => {
slider.onmousemove = undefined; slider.onmousemove = undefined;
tracker.style.display = 'none'; tracker.style.display = 'none';
}; };
tracker.ontouchmove = tracker.onmousemove = (ev) => { el.ontouchend = cancel_drag;
el.ontouchmove = tracker.ontouchmove = tracker.onmousemove = (ev) => {
ev.stopPropagation(); ev.stopPropagation();
ev.preventDefault(); ev.preventDefault();
if (ev.buttons === 0) { if (ev.buttons === 0) {

19
web/kiri/index.css
View file

@ -916,6 +916,12 @@ th, tr, td, label {
#oplist div:hover .opop { #oplist div:hover .opop {
display: flex; display: flex;
} }
.mobile #oplist {
font-size: larger;
}
.mobile #op-add-pop {
font-size: larger;
}
#op-add-pop { #op-add-pop {
position: absolute; position: absolute;
display: none; display: none;
@ -925,16 +931,24 @@ th, tr, td, label {
#op-add:hover #op-add-pop { #op-add:hover #op-add-pop {
display: flex; display: flex;
} }
.op-grid {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto;
align-items: center;
gap: 5px;
}
#op-add-list { #op-add-list {
padding: 4px; padding: 4px;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
flex-direction: column-reverse; flex-direction: column;
} }
#op-add-list > div { #op-add-list > div {
padding: 3px 5px 3px 5px; padding: 3px 5px 3px 5px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border: 1px dashed gray;
border-radius: 3px; border-radius: 3px;
} }
#op-add-list > div:hover { #op-add-list > div:hover {
@ -1544,6 +1558,9 @@ th, tr, td, label {
height: 30px; height: 30px;
z-index: 100; z-index: 100;
} }
.mobile .sli-drag-el {
background-color: rgba(200,0,0,0.8) !important;
}
#slider-hi-val, #slider-lo-val { #slider-hi-val, #slider-lo-val {
display: none; display: none;
position: absolute; position: absolute;

13
web/kiri/index.html
View file

@ -482,18 +482,17 @@
<div id="op-add" class="opdiv"> <div id="op-add" class="opdiv">
<i class="fas fa-plus"></i> <i class="fas fa-plus"></i>
<div id="op-add-pop" class="f-col"> <div id="op-add-pop" class="f-col">
<div id="op-add-list" class="opdiv"> <div id="op-add-list" class="opdiv op-grid">
<div title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
<div title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
<div title="drill any holes matching&#13;selected tool diameter">drill</div>
<div title="clear stock face&#13;or top of part&#13;when no stock">level</div> <div title="clear stock face&#13;or top of part&#13;when no stock">level</div>
<div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
<div title="insert custom gcode">gcode</div>
<div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div> <div title="remove an area of material&#13;inside a defined boundary&#13;sometimes called pocketing">rough</div>
<div title="clean up after roughing&#13;or perform a part cutout">outline</div> <div title="clean up after roughing&#13;or perform a part cutout">outline</div>
<div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div> <div title="2.5D tracing along X or Y axis&#13;used for complex part features">contour</div>
<div title="clear areas above&#13;selected surfaces">pocket</div> <div title="clear areas above&#13;selected surfaces">pocket</div>
<div title="follow selected features with&#13;a specified tool. often used&#13;for lettering and engraving">trace</div>
<div title="drill any holes matching&#13;selected tool diameter">drill</div>
<hr width="100%">
<div title="drill registration holes&#13;along the X or Y axis&#13;for double-sided work">register</div>
<div title="insert custom gcode">gcode</div>
<div title="flip part and load&#13;profile for other side&#13;for double-sided work">flip</div>
</div> </div>
</div> </div>
</div> </div>