juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-05-19 11:23:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Printer selection dialog redesign (#12248)

Browse Source 
* init

* remove debug

* update

* cleanup

* update

* animate sidebar and search bar when reduce motion not enabled

* add custom snappy scrolling to fix lags

* cleanup

* update

* scroll to vendor after layout change

* improve snapping on events

* update

* match UI of setup guide
This commit is contained in:
yw4z
2026-05-11 02:16:13 +03:00
committed by GitHub
parent f8db5b8ba3
commit 133dc1c8e5
10 changed files with 1336 additions and 220 deletions
Download Patch File Download Diff File Expand all files Collapse all files

230
resources/web/guide/21/index.html
View File

@@ -20,16 +20,34 @@
<div id="Title">
<div class="trans" tid="t10">Printer Selection</div>
</div>
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Device keyword" oninput="textInput(this)">
<svg id="search-icon" width="16px" height="16px"> <!-- ORCA -->
<path d="M6.5,2A4.505,4.505,0,0,0,2,6.5a.5.5,0,0,0,1,0A3.5,3.5,0,0,1,6.5,3a.5.5,0,0,0,0-1Z"/>
<path d="M14.854,14.146l-3.423-3.422a6.518,6.518,0,1,0-.707.707l3.422,3.423a.5.5,0,0,0,.708-.708ZM1,6.5A5.5,5.5,0,1,1,6.5,12,5.507,5.507,0,0,1,1,6.5Z"/>
</svg>
<div id="SidebarContainer">
<div id="Sidebar" class="thin-scroll">
<div class="title">Vendors</div>
<div class="area" id="SidebarVendors">
<!-- <div class="SidebarItem"></div> -->
</div>
</div>
<div class="back" onclick="document.getElementById('SidebarContainer').setAttribute('open', '0')"></div>
</div>
<div class="SidebarBtn ButtonStyleRegular" onclick="document.getElementById('SidebarContainer').setAttribute('open', '1')">
<div class="icon16"></div>
</div>
<div class="search" hasvalue="0">
<div class="search-icon icon16"></div>
<input type="text" class="searchTerm" placeholder=" " oninput="textInput(this)">
<span class="search-placeholder trans">Search...</span>
</div>
<div class="LayoutSelector">
<div class="TabGroup">
<div class="TabButton" onclick="LayoutMode('compact-list')" ><div class="icon16"></div></div>
<div class="TabButton" onclick="LayoutMode('compact-cover')"><div class="icon16"></div></div>
<div class="TabButton" onclick="LayoutMode('large-cover')" ><div class="icon16"></div></div>
</div>
</div>
<div id="Content" class="ZScrol">
<div id="Content" class="thin-scroll">
<!--<div class="OneVendorBlock" Vendor="BBL">
<div class="BlockBanner">
@@ -139,18 +157,208 @@
</body>
<script>
const SearchBox = document.querySelector('.searchTerm');
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (window.event) {
try { e.keyCode = 0; } catch (e) { }
e.returnValue = true;
// ORCA focus search bar on key input
// SearchBox not in focus && writable character && non modifier
if (document.activeElement != SearchBox && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
SearchBox.focus();
}
// Close sidebar
document.getElementById('SidebarContainer').setAttribute('open', '0')
//if (window.event) {
// try { e.keyCode = 0; } catch (e) { }
// e.returnValue = true;
//}
};
let pModel = {};
let ModelNozzleSelected = {};
function textInput(obj) {
FilterModelList(obj.value);
}
const $content = $('#Content');
// SNAPPY SCROLLING WITHOUT LAGS
const SNAP_DELAY = 600;
const SNAP_DURATION = 200;
const SNAP_CORR = 8; // error correction / tolerance
let scrollTimer = null;
let lastScrollTop = 0;
let scrollDir = 'down';
let isSnapping = false;
let snapRafId = null;
let lastSnapTarget = null;
let waitingForUserScroll = false;
function findSnap(cur, dir) {
if (lastSnapTarget !== null && Math.abs(cur - lastSnapTarget) < SNAP_CORR) return null;
const savedScroll = cur;
$content[0].scrollTop = 0; // Temporarily scroll to 0 so getBoundingClientRect can get absolute positions
let bcTop = el=>(el.getBoundingClientRect().top);
const contentTop = bcTop($content[0]);
const bannerH = ($content.find('.BlockBanner')[0] || {}).offsetHeight || 0;
const firstCard = $content.find('.PrinterBlock')[0];
const firstArea = $content.find('.PrinterArea')[0];
const cardGap = (firstCard && firstArea) ? (bcTop(firstCard) - bcTop(firstArea)) : 0;
const candidates = $content.find('.BlockBanner, .PrinterBlock').get();
if (dir === 'up') candidates.reverse();
let result = lastSeen = null;
for (const el of candidates) {
const snapTo = Math.round(
el.classList.contains('BlockBanner')
? (bcTop(el.closest('.OneVendorBlock')) - contentTop)
: Math.max(0, bcTop(el) - contentTop - bannerH - cardGap)
);
if (snapTo != lastSeen){
lastSeen = snapTo;
if (dir === 'down' && snapTo > cur + SNAP_CORR) { result = snapTo; break; }
if (dir === 'up' && snapTo < cur - SNAP_CORR) { result = snapTo; break; }
}
}
$content[0].scrollTop = savedScroll; // Restore scroll position
return result;
}
function smoothScrollTo(target) {
if (snapRafId) {
cancelAnimationFrame(snapRafId);
snapRafId = null;
}
const el = $content[0];
const from = el.scrollTop;
const dist = target - from;
const t0 = performance.now();
const ease = t => t < 0.5 ? 2*t*t : -1 + (4 - 2*t)*t;
function onDone() {
el.scrollTop = target;
lastScrollTop = lastSnapTarget = target;
waitingForUserScroll = true;
clearTimeout(scrollTimer);
scrollTimer = null;
snapRafId = null;
isSnapping = false;
}
if (Math.abs(dist) < 2)
return onDone();
snapRafId = requestAnimationFrame(function step(now) {
const p = Math.min((now - t0) / SNAP_DURATION, 1);
el.scrollTop = from + dist * ease(p);
if (p < 1)
snapRafId = requestAnimationFrame(step);
else
onDone();
});
}
function armSnap() {
waitingForUserScroll = false;
lastSnapTarget = null;
}
$content.on('scroll', function() {
if (isSnapping) return;
if (this.scrollTop > lastScrollTop + 1) scrollDir = 'down';
else if (this.scrollTop < lastScrollTop - 1) scrollDir = 'up';
lastScrollTop = this.scrollTop;
if (waitingForUserScroll) return;
clearTimeout(scrollTimer);
scrollTimer = setTimeout(()=>{
if (isSnapping) return;
const target = findSnap($content[0].scrollTop, scrollDir);
if (target){
isSnapping = true;
smoothScrollTo(target);
}
}, SNAP_DELAY);
});
let touchY = 0;
$content[0].addEventListener('touchstart', e => {
touchY = e.touches[0].clientY;
armSnap();
}, { passive: true });
$content[0].addEventListener('touchmove', e => {
const dy = touchY - e.touches[0].clientY;
if (Math.abs(dy) > 3)
scrollDir = dy > 0 ? 'down' : 'up';
}, { passive: true });
// Re-arm snap system on user scroll
$content[0].addEventListener('wheel', armSnap, { passive: true });
// Re-arm on after scrollbar usage
$content[0].addEventListener('pointerdown', e => {
if (e.target === $content[0])
armSnap();
});
// Re-arm on keyboard scroll or focus changes
document.addEventListener('keydown', e => {
if (document.activeElement != SearchBox){
let scrollKeys = ['ArrowUp','ArrowDown','PageUp','PageDown',' '];
let hasFocus = $content[0].contains(document.activeElement);
if(scrollKeys.includes(e.key) || (hasFocus && e.which == 9))
armSnap();
}
});
// ORCA unfocus search bar while scrolling and its content empty
$content[0].addEventListener("scroll", () => {
if (document.activeElement === SearchBox && SearchBox.value == "")
SearchBox.blur();
});
// LAYOUT SELECTOR
const LayoutSelector = document.querySelector('.LayoutSelector > .TabGroup');
const LayoutBtns = Array.from(LayoutSelector.children);
const LayoutTypes = ["compact-list","compact-cover","large-cover"];
function LayoutMode(value) {
if($content[0].getAttribute("layout") === value)
return;
// find current visible vendor and scroll to it after layout change
let target = null;
for (const el of $content.find('.OneVendorBlock')) {
if (el.getBoundingClientRect().bottom - $content[0].getBoundingClientRect().top >= -1) {
target = el.getAttribute("vendor");
break;
}
}
LayoutBtns.forEach(el => el.classList.remove('selected'));
LayoutBtns[LayoutTypes.indexOf(value)].classList.add('selected');
$content[0].setAttribute("layout", value);
if (target) scrollToVendor(target);
}
LayoutMode("large-cover");
</script>
</html>