juli/OrcaSlicer
1
1
Fork 0
mirror of https://github.com/OrcaSlicer/OrcaSlicer.git synced 2026-06-10 14:02:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge code base of Setup Guide and Standalone versions of Printer / Filament Selection Dialogs (#13579)

Browse Source
This commit is contained in:
yw4z
2026-06-01 16:00:42 +03:00
committed by GitHub
parent 7a0c149701
commit 71eebc2332
16 changed files with 2043 additions and 4262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

471
resources/web/guide/21/21.css
View File

@@ -1,470 +1 @@
#Content
{
overflow-y:auto;
padding: 0 10px 0 20px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
height: 100%;
}
.OneVendorBlock {
position: relative;
margin-bottom: 7px;
}
.OneVendorBlock:last-of-type {
margin-bottom: 36px;
}
.BlockBanner
{
position: sticky;
top: 0;
left: 0;
padding: 0px;
border-bottom: 2px solid var(--main-color);
width: 100%;
display: flex;
align-items: center;
z-index: 100;
background-color: var(--bg-color-secondary);
box-sizing: border-box;
}
.BannerBtns
{
display: flex;
white-space: nowrap;
justify-content: space-around;
align-items: center;
text-align: center;
margin-right: 5px; /* ORCA align buttons with end of horizontal separator/line */
margin-left: auto;
}
.BlockBanner a
{
line-height: 30px;
height: 30px;
font-size: 17px;
font-weight: 600;
padding: 0px 10px;
color: var(--fg-color-text);
}
.BlockBanner .modelCount {
margin: 0 15px 0 auto;
font-size: 14px;
line-height: 14px;
height: 15px;
color: var(--fg-color-label);
}
.VendorCheckbox {
transform: scale(1.3);
}
.PrinterArea
{
padding: 7px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.PrinterBlock
{
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
gap:10px;
padding: 15px 10px 10px 10px;
background-color: var(--bg-color-secondary);
position: relative;
border: 1px solid transparent
}
.PrinterBlock:hover {
background-color: var(--focus-bg-item);
border-color:var(--main-color);
}
.PImg {
width:120px; /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
height:120px; /* ORCA fit image to fill frame */
}
.PrinterInfo,
.PrinterInfoMark {
position: absolute;
right: 4px;
top: 4px;
opacity: 0;
border-radius: 11px;
line-height: 19px;
font-size: 14px;
}
.PrinterInfo {
--card-animation-delay: .8s; /* open info with delay on list / compact view to prevent them appear while mouse movements */
--card-info-height: fit-content;
left: 4px;
width: auto;
z-index: 9998;
height: var(--card-info-height);
border-color: var(--border-color);
background: var(--bg-color);
padding: 10px;
text-align: left;
color: var(--fg-color-text);
pointer-events: none;
}
#Content[layout="2"] .PrinterInfo {
--card-animation-delay: .3s;
--card-info-height: 116px;
}
.PrinterInfo .title {font-weight: 700}
.PrinterInfo .value {font-weight: 400}
.PrinterInfoMark:hover + .PrinterInfo {
animation: infoCard 0s forwards var(--card-animation-delay);
}
@keyframes infoCard {100% {
opacity: 1;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}}
.PrinterInfoMark {
width: 20px;
height: 20px;
background: var(--main-color);
border: 1px solid var(--main-color);
z-index: 9999;
color: #FFF;
text-align: center;
}
.PrinterBlock:hover .PrinterInfoMark {
opacity: 1;
}
.PrinterBlock:hover .PrinterInfoMark:hover {
background: var(--main-color-hover);
}
.ModelCheckBox
{
position: absolute;
height: 6px;
bottom: 0;
left: 10%;
width: 80%;
background: var(--button-bg-hover)
}
.ModelCheckBox.ModelCheckBoxSelected
{
background: var(--main-color-fixed)
}
img.ModelThumbnail
{
width: 100%;
height: 100%;
}
.PName
{
font-weight: 600;
line-height: 20px; /* ORCA */
text-align: center;
width: 100%;
color: var(--fg-color-text);
}
.pNozzel
{
display: none;
align-items: center;
justify-content:flex-start;
color: #5A5A5A;
padding-left: 0px; /* ORCA Align checkboxes with with model text */
}
.pNozzel input
{
vertical-align: middle;
margin-right: 5px;
}
.LayoutSelector {
position: absolute;
right:21px;
top:14px;
}
.LayoutSelector .TabGroup {
display: flex;
padding: 2px;
gap: 2px;
border-radius: 6px;
background-color: var(--bg-color-alt);
}
.LayoutSelector .icon16 {
opacity: .8;
}
.LayoutSelector .TabButton {
padding: 7px;
border-radius: 4px;
}
.LayoutSelector .TabButton.selected {background: var(--main-color)}
.LayoutSelector .TabButton.selected:hover {background: var(--main-color-hover)}
.LayoutSelector .TabButton.selected .icon16 {background: #FFF}
.LayoutSelector .TabButton:nth-of-type(1) .icon16 {--icon-url: var(--icon-layout-list)}
.LayoutSelector .TabButton:nth-of-type(2) .icon16 {--icon-url: var(--icon-layout-compact)}
.LayoutSelector .TabButton:nth-of-type(3) .icon16 {--icon-url: var(--icon-layout-cover)}
/* LAYOUT */
#Content[layout="compact-list"] .PrinterArea {
grid-template-columns: repeat(4, 1fr);
}
#Content[layout="compact-list"] .PImg {
display: none;
}
#Content[layout="compact-list"] .OneVendorBlock {
margin-bottom: 15px;
}
#Content[layout="compact-cover"] .PrinterArea {
grid-template-columns: repeat(3, 1fr);
}
#Content[layout="compact-cover"] .PImg {
width: 60px;
min-width: 60px;
height: 60px;
}
#Content[layout|="compact"] .PName {
text-align: left;
}
#Content[layout|="compact"] .PrinterBlock {
flex-direction: row;
padding: 5px 5px 5px 18px;
}
#Content[layout|="compact"] .ModelCheckBox {
width: 6px;
height: 80%;
left:0;
top:10%
}
#Content[layout|="compact"] .OneVendorBlock:last-of-type {
margin-bottom: 0px;
}
/*-----Notice-----*/
#NoticeMask
{
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody
{
display: none;
width: 400px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -200px;
}
#NoticeBar
{
background-color:#00f0d8;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent
{
padding: 4mm 10mm;
}
#NoticeBtns
{
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}
.search {
position: absolute;
left:66px;
top: 14px;
width: 34px;
height: 34px;
z-index: 99;
overflow: hidden;
}
.search:focus-within,
.search[hasvalue="1"] {
width: calc(100% - 194px);
}
.searchTerm {
width: 100%;
height: 100%;
padding: 4px 5px;
border-radius: 6px;
outline: none;
box-sizing: border-box;
background: var(--button-bg-normal);
border: 1px solid var(--button-bg-normal);
}
@media (prefers-reduced-motion: no-preference) {
.searchTerm {
transition: background-color .2s
}
}
.searchTerm,
.search-placeholder {
line-height: 24px; /* ORCA center text vertically */
font-size: 14px;
}
.search:focus-within .searchTerm,
.search[hasvalue="1"] .searchTerm {
padding-left:33px;
background: var(--bg-color);
border-color: var(--main-color);
}
.search[hasvalue="1"]:not(:focus-within, :hover) .searchTerm {
border-color: var(--border-color);
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm {
cursor: default;
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm:hover {
background: var(--button-bg-hover);
}
.search-placeholder {
color: var(--fg-color-disabled);
left: 33px;
}
.searchTerm:not(:placeholder-shown) + .search-placeholder {
opacity: 0;
}
.search-icon,
.search-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.search-icon {
left: 9px;
--icon-url: var(--icon-search);
}
.SidebarBtn {
position: absolute;
left: 20px;
top: 14px;
padding: 9px;
border-radius: 6px;
}
.SidebarBtn .icon16 {
--icon-url: var(--icon-sidebar);
}
#SidebarContainer {
position: absolute;
top: 0;
left: -240px;
right: 0;
height: 100%;
z-index: 999999;
display: flex;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
#SidebarContainer {
transition: background-color .2s, left .2s
}
}
#SidebarContainer[open="1"] {
left: 0px;
pointer-events: all;
background: rgba(0,0,0,.3);
}
#Sidebar {
flex: 0 0 220px;
background: var(--bg-color);
box-shadow: 5px 0 20px rgba(0,0,0,.2);
padding: 15px 0;
overflow-y: auto;
}
#Sidebar .title {
font-size: 17px;
line-height: 17px;
font-weight: 600;
padding: 0 0 5px 20px;
}
#Sidebar .SidebarItem {
width: 100%;
padding: 2px 10px 2px 20px;
color:var(--fg-color-text);
font-size: 14px;
border: 1px solid transparent;
box-sizing: border-box;
}
#Sidebar .SidebarItem:hover {
border-color: var(--main-color);
}
#SidebarContainer .back {
flex: 1;
}
/* UNIQUE STYLES */

482
resources/web/guide/21/21.js
View File

@@ -1,395 +1,15 @@
// UNIQUE FUNCTIONS
// Keep in here for future additions
function OnInit()
{
//let strInput=JSON.stringify(cData);
//HandleModelList(cData);
TranslatePage();
RequestProfile();
}
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function HandleStudio( pVal )
{
// alert(strInput);
// alert(JSON.stringify(strInput));
//
// let pVal=IsJson(strInput);
// if(pVal==null)
// {
// alert("Msg Format Error is not Json");
// return;
// }
let strCmd=pVal['command'];
//alert(strCmd);
if(strCmd=='response_userguide_profile')
{
HandleModelList(pVal['response']);
}
}
function ShowPrinterThumb(pItem, strImg)
{
$(pItem).attr('src',strImg);
$(pItem).attr('onerror',null);
}
function ChooseModel( vendor, ModelName )
{
let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
if(ChooseItem!=null)
{
if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
$(ChooseItem).removeClass('ModelCheckBoxSelected');
else
$(ChooseItem).addClass('ModelCheckBoxSelected');
SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
}
}
function HandleModelList( pVal )
{
if( !pVal.hasOwnProperty("model") )
return;
pModel=pVal['model'];
// ORCA ensure list correctly ordered
pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
pModel = [ // move custom printers to top
...pModel.filter(i=>i.vendor === "Custom"),
...pModel.filter(i=>i.vendor !== "Custom")
];
let nTotal=pModel.length;
let ModelHtml={};
for(let n=0;n<nTotal;n++)
{
let OneModel=pModel[n];
let strVendor=OneModel['vendor'];
//Add Vendor Html Node
if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
{
let sVV=strVendor;
if( sVV=="BBL" )
sVV="Bambu Lab";
if( sVV=="Custom")
sVV="Custom Printer";
if( sVV=="Other")
sVV="Orca colosseum";
let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
'<div class="BlockBanner">'+
' <a>'+sVV+'</a>'+
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">'+
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
//' </div>'+
'</div>'+
'<div class="PrinterArea"> '+
'</div>'+
'</div>';
$('#Content').append(HtmlNewVendor);
}
let ModelName=OneModel['model'];
//Collect Html Node Nozzel Html
if( !ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor]='';
ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for( let key in ModelHtml )
{
$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
}
//Update Checkbox
for(let m=0;m<nTotal;m++)
{
let OneModel=pModel[m];
let SelectList=OneModel['nozzle_selected'];
if(SelectList!='')
{
ChooseModel(OneModel['vendor'], OneModel['model']);
}
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function scrollToVendor(vendor) {
const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
if (el){
document.getElementById('SidebarContainer').setAttribute('open', '0');
document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
}
}
function SetModelSelect(vendor, model, checked) {
if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
return;
}
if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
ModelNozzleSelected[vendor] = {};
}
let oVendor = ModelNozzleSelected[vendor];
if (oVendor.hasOwnProperty(model) || checked) {
oVendor[model] = checked;
}
UpdateVendorCheckbox(vendor)
}
function GetModelSelect(vendor, model) {
if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
return false;
}
let oVendor = ModelNozzleSelected[vendor];
if (!oVendor.hasOwnProperty(model)) {
return false;
}
return oVendor[model];
}
function FilterModelList(keyword) {
//Save checkbox state
let ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
}
$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
let nTotal = pModel.length;
let ModelHtml = {};
let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
$('#Content').empty();
for (let n = 0; n < nTotal; n++) {
let OneModel = pModel[n];
let strVendor = OneModel['vendor'];
let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
if (!kwSplit.every(s => search.includes(s)))
continue;
//Add Vendor Html Node
if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
let sVV = strVendor;
if (sVV == "BBL")
sVV = "Bambu Lab";
if (sVV == "Custom")
sVV = "Custom Printer";
if (sVV == "Other")
sVV = "Orca colosseum";
let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
'<div class="BlockBanner">' +
' <a>' + sVV + '</a>' +
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">' +
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
//' </div>' +
'</div>' +
'<div class="PrinterArea"> ' +
'</div>' +
'</div>';
$('#Content').append(HtmlNewVendor);
}
//Collect Html Node Nozzel Html
if (!ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor] = '';
ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for (let key in ModelHtml) {
let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
obj.empty();
obj.append(ModelHtml[key]);
}
//Update Checkbox
ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
let checked = GetModelSelect(strVendor, strModel);
if (checked)
$(OneItem).addClass('ModelCheckBoxSelected');
else
$(OneItem).removeClass('ModelCheckBoxSelected');
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
const $content = $('#Content');
$content.css("padding-right", $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function CreatePrinterBlock(OneModel)
{
// ORCA use single functuon to create blocks to simplify code
let vendor = OneModel['vendor']
vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
let modelName = OneModel['name'];
// Most of it unneeded. this can be applied in profiles
if( vendor=="Custom")
modelName = modelName.split(" ")[1];
// these uses different case in name; seckit, ratrig, blocks
else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))
modelName = modelName.slice(vendorName.length);
// these not matches. have to fix in profiles to reduce conditions in here;
else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
modelName = modelName.slice(("MM").length);
else if (vendor == "OrcaArena")
modelName = modelName.slice(("Orca Arena").length);
else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
modelName = modelName.slice(("Rolohaun").length);
return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
'<div class="PImg">'+
'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
'</div>'+
'<div class="PrinterInfoMark">?</div>'+
'<div class="PrinterInfo">'+
//' <div class="title trans">Print volume</div>'+
//' <div class="value">' + OneModel['printable_height'] + '</div>'+
' <div class="title trans">Nozzle</div>'+
' <div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
'</div>'+
'<div style="display: flex;">'+
' <div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
' <div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
'</div>'+
'</div>';
}
function SelectPrinterAll( sVendor )
{
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
let strModel = this.getAttribute("model");
SetModelSelect(sVendor, strModel, true);
});
}
function SelectPrinterNone( sVendor )
{
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
let strModel = this.getAttribute("model");
SetModelSelect(sVendor, strModel, false);
});
}
function ChooseVendor(sVendor) {
const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
const sel = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
sel ? $cbs.addClass('ModelCheckBoxSelected')
: $cbs.removeClass('ModelCheckBoxSelected');
$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
}
function UpdateVendorCheckbox(sVendor) {
const $vb = $(`.OneVendorBlock[vendor='${sVendor}']`);
const $cbs = $vb.find(`.ModelCheckBox`);
const $vcb = $vb.find(`.VendorCheckbox`);
const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
const allSel = selCount === $cbs.length && selCount > 0;
const nonSel = selCount === 0;
$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
}
function GotoFilamentPage()
{
let nChoose=OnExitFilter();
@@ -397,97 +17,3 @@ function GotoFilamentPage()
if(nChoose>0)
window.open('../22/index.html','_self');
}
function OnExitFilter() {
let nTotal = 0;
let ModelAll = {};
for (vendor in ModelNozzleSelected) {
for (model in ModelNozzleSelected[vendor]) {
if (!ModelNozzleSelected[vendor][model])
continue;
if (!ModelAll.hasOwnProperty(model)) {
//alert("ADD: "+strModel);
ModelAll[model] = {};
ModelAll[model]["model"] = model;
}
nTotal++;
}
}
var tSend = {};
tSend['sequence_id'] = Math.round(new Date() / 1000);
tSend['command'] = "save_userguide_models";
tSend['data'] = ModelAll;
SendWXMessage(JSON.stringify(tSend));
return nTotal;
}
//
function OnExit()
{
let ModelAll={};
let ModelSelect=$(".ModelCheckBoxSelected");
let nTotal=ModelSelect.length;
if( nTotal==0 )
{
ShowNotice(1);
return 0;
}
for(let n=0;n<nTotal;n++)
{
let OneItem=ModelSelect[n];
let strModel=OneItem.getAttribute("model");
//alert(strModel+strVendor+strNozzel);
if(!ModelAll.hasOwnProperty(strModel))
{
//alert("ADD: "+strModel);
ModelAll[strModel]={};
ModelAll[strModel]["model"]=strModel;
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_models";
tSend['data']=ModelAll;
SendWXMessage( JSON.stringify(tSend) );
return nTotal;
}
function ShowNotice( nShow )
{
if(nShow==0)
{
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else
{
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}

441
resources/web/guide/21/common.css Normal file
View File

@@ -0,0 +1,441 @@
#Content {
overflow-y:auto;
padding: 0 10px 0 20px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
height: 100%;
}
/* VENDOR BLOCK */
.OneVendorBlock {
position: relative;
margin-bottom: 7px;
}
.OneVendorBlock:last-of-type {
margin-bottom: 36px;
}
.BlockBanner {
position: sticky;
top: 0;
left: 0;
padding: 0px;
border-bottom: 2px solid var(--main-color);
width: 100%;
display: flex;
align-items: center;
z-index: 100;
background-color: var(--bg-color-secondary);
box-sizing: border-box;
}
.BannerBtns {
display: flex;
white-space: nowrap;
justify-content: space-around;
align-items: center;
text-align: center;
margin-right: 5px; /* ORCA align buttons with end of horizontal separator/line */
margin-left: auto;
}
.BlockBanner a {
line-height: 30px;
height: 30px;
font-size: 17px;
font-weight: 600;
padding: 0px 10px;
color: var(--fg-color-text);
}
.BlockBanner .modelCount {
margin: 0 15px 0 auto;
font-size: 14px;
line-height: 14px;
height: 15px;
color: var(--fg-color-label);
}
.VendorCheckbox {
transform: scale(1.3);
}
.PrinterArea {
padding: 7px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
/* PRINTER BLOCK */
.PrinterBlock {
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
gap:10px;
padding: 15px 10px 10px 10px;
background-color: var(--bg-color-secondary);
position: relative;
border: 1px solid transparent
}
.PrinterBlock:hover {
background-color: var(--focus-bg-item);
border-color:var(--main-color);
}
.PImg {
width:120px; /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
height:120px; /* ORCA fit image to fill frame */
}
.PrinterInfo,
.PrinterInfoMark {
position: absolute;
right: 4px;
top: 4px;
opacity: 0;
border-radius: 11px;
line-height: 19px;
font-size: 14px;
}
.PrinterInfo {
--card-animation-delay: .8s; /* open info with delay on list / compact view to prevent them appear while mouse movements */
left: 4px;
width: auto;
z-index: 9998;
height: fit-content;
border-color: var(--border-color);
background: var(--bg-color);
padding: 10px;
text-align: left;
color: var(--fg-color-text);
pointer-events: none;
}
#Content[layout="large-cover"] .PrinterInfo {
--card-animation-delay: .3s;
}
.PrinterInfo .title {font-weight: 700}
.PrinterInfo .value {font-weight: 400}
.PrinterInfoMark:hover + .PrinterInfo {
animation: infoCard 0s forwards var(--card-animation-delay);
}
@keyframes infoCard {100% {
opacity: 1;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}}
.PrinterInfoMark {
width: 20px;
height: 20px;
background: var(--main-color);
border: 1px solid var(--main-color);
z-index: 9999;
color: #FFF;
text-align: center;
}
.PrinterBlock:hover .PrinterInfoMark {
opacity: 1;
}
.PrinterBlock:hover .PrinterInfoMark:hover {
background: var(--main-color-hover);
}
.ModelCheckBox {
position: absolute;
height: 6px;
bottom: 0;
left: 10%;
width: 80%;
background: var(--button-bg-hover)
}
.ModelCheckBox.ModelCheckBoxSelected {
background: var(--main-color-fixed)
}
img.ModelThumbnail {
width: 100%;
height: 100%;
}
.PName {
font-weight: 600;
line-height: 20px; /* ORCA */
text-align: center;
width: 100%;
color: var(--fg-color-text);
}
/* LAYOUT SELECTOR */
.LayoutSelector {
position: absolute;
right:21px;
top:14px;
}
.LayoutSelector .TabGroup {
display: flex;
padding: 2px;
gap: 2px;
border-radius: 6px;
background-color: var(--bg-color-alt);
}
.LayoutSelector .icon16 {
opacity: .8;
}
.LayoutSelector .TabButton {
padding: 7px;
border-radius: 4px;
}
.LayoutSelector .TabButton.selected {background: var(--main-color)}
.LayoutSelector .TabButton.selected:hover {background: var(--main-color-hover)}
.LayoutSelector .TabButton.selected .icon16 {background: #FFF}
.LayoutSelector .TabButton:nth-of-type(1) .icon16 {--icon-url: var(--icon-layout-list)}
.LayoutSelector .TabButton:nth-of-type(2) .icon16 {--icon-url: var(--icon-layout-compact)}
.LayoutSelector .TabButton:nth-of-type(3) .icon16 {--icon-url: var(--icon-layout-cover)}
/* LAYOUT */
#Content[layout="compact-list"] .PrinterArea {
grid-template-columns: repeat(4, 1fr);
}
#Content[layout="compact-list"] .PImg {
display: none;
}
#Content[layout="compact-list"] .OneVendorBlock {
margin-bottom: 15px;
}
#Content[layout="compact-cover"] .PrinterArea {
grid-template-columns: repeat(3, 1fr);
}
#Content[layout="compact-cover"] .PImg {
width: 60px;
min-width: 60px;
height: 60px;
}
#Content[layout|="compact"] .PName {
text-align: left;
}
#Content[layout|="compact"] .PrinterBlock {
flex-direction: row;
padding: 5px 5px 5px 18px;
}
#Content[layout|="compact"] .ModelCheckBox {
width: 6px;
height: 80%;
left:0;
top:10%
}
#Content[layout|="compact"] .OneVendorBlock:last-of-type {
margin-bottom: 0px;
}
/* SEARCH */
.search {
position: absolute;
left:66px;
top: 14px;
width: 34px;
height: 34px;
z-index: 99;
overflow: hidden;
}
.search:focus-within,
.search[hasvalue="1"] {
width: calc(100% - 194px);
}
.searchTerm {
width: 100%;
height: 100%;
padding: 4px 5px;
border-radius: 6px;
outline: none;
box-sizing: border-box;
background: var(--button-bg-normal);
border: 1px solid var(--button-bg-normal);
}
@media (prefers-reduced-motion: no-preference) {
.searchTerm {
transition: background-color .2s
}
}
.searchTerm,
.search-placeholder {
line-height: 24px; /* ORCA center text vertically */
font-size: 14px;
}
.search:focus-within .searchTerm,
.search[hasvalue="1"] .searchTerm {
padding-left:33px;
background: var(--bg-color);
border-color: var(--main-color);
}
.search[hasvalue="1"]:not(:focus-within, :hover) .searchTerm {
border-color: var(--border-color);
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm {
cursor: default;
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm:hover {
background: var(--button-bg-hover);
}
.search-placeholder {
color: var(--fg-color-disabled);
left: 33px;
}
.searchTerm:not(:placeholder-shown) + .search-placeholder {
opacity: 0;
}
.search-icon,
.search-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.search-icon {
left: 9px;
--icon-url: var(--icon-search);
}
/* SIDEBAR */
.SidebarBtn {
position: absolute;
left: 20px;
top: 14px;
padding: 9px;
border-radius: 6px;
}
.SidebarBtn .icon16 {
--icon-url: var(--icon-sidebar);
}
#SidebarContainer {
position: absolute;
top: 0;
left: -240px;
right: 0;
height: 100%;
z-index: 999999;
display: flex;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
#SidebarContainer {
transition: background-color .2s, left .2s
}
}
#SidebarContainer[open="1"] {
left: 0px;
pointer-events: all;
background: rgba(0,0,0,.3);
}
#Sidebar {
flex: 0 0 220px;
background: var(--bg-color);
box-shadow: 5px 0 20px rgba(0,0,0,.2);
padding: 15px 0;
overflow-y: auto;
}
#Sidebar .title {
font-size: 17px;
line-height: 17px;
font-weight: 600;
padding: 0 0 5px 20px;
}
#Sidebar .SidebarItem {
width: 100%;
padding: 2px 10px 2px 20px;
color:var(--fg-color-text);
font-size: 14px;
border: 1px solid transparent;
box-sizing: border-box;
}
#Sidebar .SidebarItem:hover {
border-color: var(--main-color);
}
#SidebarContainer .back {
flex: 1;
}
/* NOTICE POPUP */
#NoticeMask {
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody {
display: none;
width: 400px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -200px;
}
#NoticeBar {
background-color:#00f0d8;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent {
padding: 4mm 10mm;
}
#NoticeBtns {
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}

632
resources/web/guide/21/common.js Normal file
View File

@@ -0,0 +1,632 @@
var pModel = {};
var ModelNozzleSelected = {};
let SearchBox;
let $content;
function InitGlobalVariables()
{
SearchBox = document.querySelector('.searchTerm');
$content = $('#Content');
}
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function HandleStudio( pVal )
{
// alert(strInput);
// alert(JSON.stringify(strInput));
//
// let pVal=IsJson(strInput);
// if(pVal==null)
// {
// alert("Msg Format Error is not Json");
// return;
// }
let strCmd=pVal['command'];
//alert(strCmd);
if(strCmd=='response_userguide_profile')
{
HandleModelList(pVal['response']);
}
}
function HandleModelList( pVal )
{
if( !pVal.hasOwnProperty("model") )
return;
pModel=pVal['model'];
// ORCA ensure list correctly ordered
pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
pModel = [ // move custom printers to top
...pModel.filter(i=>i.vendor === "Custom"),
...pModel.filter(i=>i.vendor !== "Custom")
];
let nTotal=pModel.length;
let ModelHtml={};
for(let n=0;n<nTotal;n++)
{
let OneModel=pModel[n];
let strVendor=OneModel['vendor'];
//Add Vendor Html Node
if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
{
let HtmlNewVendor = CreateVendorBlock(strVendor);
$('#Content').append(HtmlNewVendor);
}
let ModelName=OneModel['model'];
//Collect Html Node Nozzel Html
if( !ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor]='';
ModelHtml[strVendor] += CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for( let key in ModelHtml )
{
$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
}
//Update Checkbox
for(let m=0;m<nTotal;m++)
{
let OneModel=pModel[m];
let SelectList=OneModel['nozzle_selected'];
if(SelectList!='') {
ChooseModel(OneModel['vendor'], OneModel['model']);
}
}
UpdateSidebarVendors();
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function SetModelSelect(vendor, model, checked) {
if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
return;
}
if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
ModelNozzleSelected[vendor] = {};
}
let oVendor = ModelNozzleSelected[vendor];
if (oVendor.hasOwnProperty(model) || checked) {
oVendor[model] = checked;
}
UpdateVendorCheckbox(vendor)
}
function GetModelSelect(vendor, model) {
if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
return false;
}
let oVendor = ModelNozzleSelected[vendor];
if (!oVendor.hasOwnProperty(model)) {
return false;
}
return oVendor[model];
}
function ChooseModel(vendor, ModelName)
{
let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
if(ChooseItem.length > 0) {
if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
$(ChooseItem).removeClass('ModelCheckBoxSelected');
else
$(ChooseItem).addClass('ModelCheckBoxSelected');
SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
}
}
function FilterModelList(keyword) {
//Save checkbox state
let ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
}
$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
let nTotal = pModel.length;
let ModelHtml = {};
let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
$('#Content').empty();
for (let n = 0; n < nTotal; n++) {
let OneModel = pModel[n];
let strVendor = OneModel['vendor'];
let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
if (!kwSplit.every(s => search.includes(s)))
continue;
//Add Vendor Html Node
if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
let HtmlNewVendor = CreateVendorBlock(strVendor);
$('#Content').append(HtmlNewVendor);
}
//Collect Html Node Nozzel Html
if (!ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor] = '';
ModelHtml[strVendor] += CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for (let key in ModelHtml) {
let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
obj.empty();
obj.append(ModelHtml[key]);
}
//Update Checkbox
ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
let checked = GetModelSelect(strVendor, strModel);
if (checked)
$(OneItem).addClass('ModelCheckBoxSelected');
else
$(OneItem).removeClass('ModelCheckBoxSelected');
}
UpdateSidebarVendors();
$content.css("padding-right", $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function textInput(obj) {
FilterModelList(obj.value);
}
function CreateVendorBlock(vendorName)
{
let alt = vendorName;
if( alt == "BBL" )
alt = "Bambu Lab";
if( alt == "Custom")
alt = "Custom Printer";
if( alt == "Other")
alt = "Orca colosseum";
return '<div class="OneVendorBlock" Vendor="' + vendorName + '">' +
' <div class="BlockBanner">' +
' <a>' + alt + '</a>' +
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+vendorName+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
' </div>' +
' <div class="PrinterArea"> ' +
' </div>' +
'</div>';
}
function CreatePrinterBlock(OneModel)
{
let vendor = OneModel['vendor']
let vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
let modelName = OneModel['name'];
// Most of it unneeded. this can be applied in profiles
if( vendor=="Custom")
modelName = modelName.split(" ")[1];
// these uses different case in name; seckit, ratrig, blocks
else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))
modelName = modelName.slice(vendorName.length);
// these not matches. have to fix in profiles to reduce conditions in here;
else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
modelName = modelName.slice(("MM").length);
else if (vendor == "OrcaArena")
modelName = modelName.slice(("Orca Arena").length);
else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
modelName = modelName.slice(("Rolohaun").length);
return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
' <div class="PImg">'+
' <img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
' </div>'+
' <div class="PrinterInfoMark">?</div>'+
' <div class="PrinterInfo">'+
' <div class="title trans">Nozzle</div>'+
' <div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
' </div>'+
' <div style="display: flex;">'+
' <div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
' <div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
' </div>'+
'</div>';
}
function scrollToVendor(vendor) {
const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
if (el){
document.getElementById('SidebarContainer').setAttribute('open', '0');
document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
}
}
function UpdateSidebarVendors()
{
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$('#SidebarVendors').html(SidebarHTML)
}
function ChooseVendor(sVendor) { // automatically selects / unselects all
const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
const sel = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
sel ? $cbs.addClass('ModelCheckBoxSelected')
: $cbs.removeClass('ModelCheckBoxSelected');
$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
}
function UpdateVendorCheckbox(sVendor) {
const $vb = $(`.OneVendorBlock[vendor='${sVendor}']`);
const $cbs = $vb.find(`.ModelCheckBox`);
const $vcb = $vb.find(`.VendorCheckbox`);
const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
const allSel = selCount === $cbs.length && selCount > 0;
const nonSel = selCount === 0;
$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
}
function OnExit()
{
let ModelAll={};
let ModelSelect=$(".ModelCheckBoxSelected");
let nTotal=ModelSelect.length;
if( nTotal==0 ) {
ShowNotice(1);
return 0;
}
for(let n=0;n<nTotal;n++)
{
let OneItem=ModelSelect[n];
let strModel=OneItem.getAttribute("model");
//alert(strModel+strVendor+strNozzel);
if(!ModelAll.hasOwnProperty(strModel))
{
//alert("ADD: "+strModel);
ModelAll[strModel]={};
ModelAll[strModel]["model"]=strModel;
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_models";
tSend['data']=ModelAll;
SendWXMessage( JSON.stringify(tSend) );
return nTotal;
}
function OnExitFilter() {
let nTotal = 0;
let ModelAll = {};
for (let vendor in ModelNozzleSelected) {
for (let model in ModelNozzleSelected[vendor]) {
if (!ModelNozzleSelected[vendor][model])
continue;
if (!ModelAll.hasOwnProperty(model)) {
//alert("ADD: "+strModel);
ModelAll[model] = {};
ModelAll[model]["model"] = model;
}
nTotal++;
}
}
var tSend = {};
tSend['sequence_id'] = Math.round(new Date() / 1000);
tSend['command'] = "save_userguide_models";
tSend['data'] = ModelAll;
SendWXMessage(JSON.stringify(tSend));
return nTotal;
}
function ShowNotice( nShow )
{
if(nShow==0) {
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else {
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}
// 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;
}
function initScrollEvents() {
$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();
});
}
document.addEventListener('DOMContentLoaded', initScrollEvents);
// LAYOUT SELECTOR
function LayoutMode(value) {
let LayoutSelector = document.querySelector('.LayoutSelector > .TabGroup');
let LayoutBtns = Array.from(LayoutSelector.children);
let LayoutTypes = ["compact-list","compact-cover","large-cover"];
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);
}
document.addEventListener('DOMContentLoaded', () => LayoutMode("large-cover"));
// KEY EVENTS
function initKeyEvents(closeOnESC) {
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
let sidebar = document.getElementById('SidebarContainer');
if (e.keyCode == 27){
if(sidebar.getAttribute('open') == "1") { // prefer to close sidebar first if its open
sidebar.setAttribute('open', '0');
}
else if (closeOnESC){
ClosePage();
}
}
// 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 on any key input
sidebar.setAttribute('open', '0');
//if (window.event) {
// try { e.keyCode = 0; } catch (e) { }
// e.returnValue = true;
//}
};
}

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

@@ -6,6 +6,7 @@
<title>引导_P21</title>
<link rel="stylesheet" type="text/css" href="../../include/global.css" /> <!-- ORCA One for all-->
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../21/common.css" /> <!-- ORCA use common sources for setup guide and standalone dialog -->
<link rel="stylesheet" type="text/css" href="21.css" />
<link rel="stylesheet" type="text/css" href="../css/dark.css" />
<script type="text/javascript" src="test.js"></script>
@@ -14,7 +15,8 @@
<script type="text/javascript" src="../../data/text.js"></script>
<script type="text/javascript" src="../js/globalapi.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="21.js"></script>
<script type="text/javascript" src="../21/common.js"></script> <!-- ORCA use common sources for setup guide and standalone dialog -->
<script type="text/javascript" src="21.js"></script>
</head>
<body onLoad="OnInit()">
<div id="Title">
@@ -49,93 +51,33 @@
<div id="Content" class="thin-scroll">
<!--<div class="OneVendorBlock" Vendor="BBL">
<div class="BlockBanner">
<a>BBL-3DP</a>
<div class="BannerBtns">
<div class="ButtonStyleConfirm ButtonTypeWindow trans" onClick="SelectPrinterAll('BBL')">所有</div>
<div class="ButtonStyleRegular ButtonTypeWindow trans" onClick="SelectPrinterNone('BBL')">无</div>
<!-- EXAMPLE GENERATED CODE BLOCK
<div class="OneVendorBlock" Vendor="VendorName">
<div class="BlockBanner">
<a>VendorName</a>
<div class="BannerBtns" onClick="ChooseVendor('VendorName')" >
<div class="modelCount"></div>
<input type="checkbox" class="VendorCheckbox" />
</div>
</div>
<div class="PrinterArea">
<div class="PrinterBlock" onClick="ChooseModel('VendorName','ModelName')" >
<div class="PImg" >
<img class="ModelThumbnail" src="CoverPath" />
</div>
<div class="PrinterInfoMark">?</div>
<div class="PrinterInfo">
<div class="title trans">Nozzle</div>
<div class="value">nozzleInfo</div>
</div>
<div style="display: flex;">
<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>
<div class="PName">modelName</div>
</div>
</div>
</div>
</div>
<div class="PrinterArea">
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox ModelCheckBoxSelected" model="BBL-3DP-V5NORMAL" onClick="ChooseModel('BBL-3DP-V5NORMAL')"></div>
</div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox"></div>
</div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox"></div>
</div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.11mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox ModelCheckBoxSelected"></div>
</div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.22mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
</div>
</div>
</div>
<div class="OneVendorBlock" Vendor="BAMBU">
<div class="BlockBanner">
<a>BAMBU-3DP</a>
<div class="BannerBtns">
<div class="SmallBtn_Green trans" onClick="SelectPrinterAll('BAMBU')">所有</div>
<div class="SmallBtn trans" onClick="SelectPrinterNone('BAMBU')">无</div>
</div>
</div>
<div class="PrinterArea">
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox ModelCheckBoxSelected"></div>
</div>
<div class="PName TextS1">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg">
<img class="ModelThumbnail" src="p2.jpg" />
<div class="ModelCheckBox ModelCheckBoxSelected"></div>
</div>
<div class="PName TextS1">BBL-3DP-V4NORMAL</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BAMBU" />0.2mm nozzle</div>
<div class="pNozzel TextS2"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
</div>
</div>
</div>-->
-->
</div>
<div id="AcceptArea">
@@ -153,212 +95,10 @@
</div>
</div>
</div>
</body>
<script>
const SearchBox = document.querySelector('.searchTerm');
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
// 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");
initKeyEvents(false); // dont close on ESC
InitGlobalVariables();
</script>
</html>

264
resources/web/guide/22/22.css
View File

@@ -1,269 +1,7 @@
.ChooseBlock
{
display:flex;
line-height: 32px;
}
.CName
{
width:130px;
font-weight: 700;
height: 100%;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
#ItemBlockArea
{
display:flex;
overflow-y:scroll;
flex-wrap:wrap;
flex-direction: row;
padding: 0 0 0 8px;
}
.MItem
{
width:33%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px !important;
top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
}
.MItem label
{
margin-right: 0px !important;
}
#NoticeMask
{
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody
{
display: none;
width: 500px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -250px;
}
#NoticeBar
{
background-color: var(--main-color);
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent
{
padding: 4mm 10mm;
}
#NoticeBtns
{
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}
#GotoNetPluginBtn
{
display: none;
}
/* ORCA column browser */
#Content {
padding: 10px 15px 5px;
height: 100%;
}
.cbr-browser-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 210px auto;
width: 100%;
height: 100%;
border: 1px solid var(--border-color);
box-sizing: border-box;
}
.cbr-column:last-child {
grid-column: 1 / -1;
border-top: 1px solid var(--border-color);
}
.cbr-column {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cbr-column:nth-child(-n+2) {
border-right: 1px solid var(--border-color);
}
.cbr-column .CValues {
display: grid;
}
.CValues label {
margin-right: 0 !important;
}
.cbr-column-title-container {
position: sticky;
background: var(--bg-color-secondary);
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.cbr-search-bar,
.cbr-filter-bar {
font-size: 16px;
background: var(--bg-color-secondary);
border: 1px solid transparent;
padding: 2px 27px 2px 27px;
line-height: 24px;
}
.cbr-search-bar {
width: calc(100% - 18px);
}
.cbr-filter-bar {
border-color: var(--border-color);
width: 160px;
height:24px;
}
.cbr-column-title-container .ComboBox > select {
margin: 3px 0;
height: 30px;
}
.cbr-column-title-container input:is(:hover,:focus) {
border-color: var(--main-color);
outline: none;
}
.cbr-column-title-container input:is(:focus) {
background: var(--focus-bg-box);
}
.cbr-filter-box {
position: relative;
margin: 3px;
}
.list-item-count {
color:var(--fg-color-label);
margin-left:10px
}
.cbr-filter-btns {
display: flex;
margin: 5px 5px 5px auto;
}
.cbr-filter-btns div:first-of-type {
margin-left: 10px;
}
.cbr-filter-mode-filter {
display: none;
}
.clear-icon,
.search-icon,
.filter-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-mask-image: var(--url);
mask-image: var(--url);
width: 16px;
height: 16px;
background-color: var(--icon-color);
pointer-events:none;
}
.filter-icon {--url: var(--icon-filter)}
.search-icon {--url: var(--icon-search)}
.clear-icon {--url: var(--icon-input-clear)}
.search-icon,
.filter-icon {
left: 6px;
}
.clear-icon {
right: 6px;
display: none;
}
.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon {
display: block;
}
input[onclear="1"]{
cursor:default
}
.cbr-search-placeholder,
.cbr-filter-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--fg-color-label);
pointer-events: none;
line-height: 24px;
left: 27px;
}
.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
opacity: 0;
}
.cbr-content {
overflow-y: auto;
}
.cbr-content div {
padding-left: 8px;
}
.cbr-content label {
margin-right: 0 !important;
padding: 1px 0 !important;
}
.cbr-content div.cbr-no-items {
#GotoNetPluginBtn {
display: none;
}

544
resources/web/guide/22/22.js
View File

@@ -1,24 +1,8 @@
var m_ProfileItem;
var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
var VendorPriority=new Array("generic");
function OnInit()
{
TranslatePage();
RequestProfile();
}
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function HandleStudio(pVal)
@@ -30,537 +14,19 @@ function HandleStudio(pVal)
{
m_ProfileItem=pVal['response'];
SortUI();
InstallNetworkPlugin();
}
}
function GetFilamentShortname( sName )
function InstallNetworkPlugin()
{
let sShort=sName.split('@')[0].trim();
return sShort;
}
function SortUI()
{
var ModelList=new Array();
let nMode=m_ProfileItem["model"].length;
for(let n=0;n<nMode;n++)
{
let OneMode=m_ProfileItem["model"][n];
if( OneMode["nozzle_selected"]!="" )
ModelList.push(OneMode);
}
//model
let HtmlMode='';
nMode=ModelList.length;
for(let n=0;n<nMode;n++)
{
let sModel=ModelList[n];
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
}
$('#MachineList .CValues').append(HtmlMode);
$('#MachineList .CValues input').prop("checked",true);
//if(nMode<=1)
//{
// $('#MachineList').hide();
//}
//Filament - Create sorted array with generic vendor first
let FilamentArray=new Array();
let GenericFilamentArray=new Array();
for( let key in m_ProfileItem['filament'] )
{
let OneFila=m_ProfileItem['filament'][key];
if(OneFila['vendor'].toLowerCase() === 'generic')
GenericFilamentArray.push({key: key, data: OneFila});
else
FilamentArray.push({key: key, data: OneFila});
}
// Combine arrays with generic filaments first
let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
let HtmlFilament='';
let SelectNumber=0;
var TypeHtmlArray={};
var VendorHtmlArray={};
for( let n=0; n<SortedFilamentArray.length; n++ )
{
let filamentItem = SortedFilamentArray[n];
let key = filamentItem.key;
let OneFila = filamentItem.data;
//alert(JSON.stringify(OneFila));
let fWholeName=OneFila['name'].trim();
let fShortName=GetFilamentShortname( OneFila['name'] );
let fVendor=OneFila['vendor'];
let fType=OneFila['type'];
let fSelect=OneFila['selected'];
let fModel=OneFila['models']
let bFind=false;
//let bCheck=$("#MachineList input:first").prop("checked");
if( fModel=='')
{
// Orca: hide
bFind=true;
}
else
{
//check in modellist
let nModelAll=ModelList.length;
for(let m=0;m<nModelAll;m++)
{
let sOne=ModelList[m];
let OneName=sOne['model'];
let NozzleArray=sOne["nozzle_selected"].split(';');
let nNozzle=NozzleArray.length;
for( let b=0;b<nNozzle;b++ )
{
let nowModel= OneName+"++"+NozzleArray[b];
if(fModel.indexOf(nowModel)>=0)
{
bFind=true;
break;
}
}
}
}
if(bFind)
{
//Type
let LowType=fType.toLowerCase();
if(!TypeHtmlArray.hasOwnProperty(LowType))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" /><span>'+fType+'</span></label>';
TypeHtmlArray[LowType]=HtmlType;
}
//Vendor
let lowVendor=fVendor.toLowerCase();
if(!VendorHtmlArray.hasOwnProperty(lowVendor))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
VendorHtmlArray[lowVendor]=HtmlVendor;
}
//Filament
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
if(pFila.length==0)
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
$("#ItemBlockArea").append(HtmlFila);
}
else
{
let strModel=pFila.attr("model");
let strFilalist=pFila.attr("filalist");
if(strModel == '' || fModel == '')
pFila.attr("model", '');
else
pFila.attr("model", strModel+fModel);
pFila.attr("filalist", strFilalist+fWholeName+';');
}
if(fSelect*1==1)
{
//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
SelectNumber++;
}
// else
// $("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);
}
}
//Sort TypeArray
let TypeAdvNum=FilamentPriority.length;
for( let n=0;n<TypeAdvNum;n++ )
{
let strType=FilamentPriority[n];
if( TypeHtmlArray.hasOwnProperty( strType ) )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
delete( TypeHtmlArray[strType] );
}
}
for(let key in TypeHtmlArray )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
}
$("#FilatypeList .CValues input").prop("checked",true);
//Sort VendorArray
let VendorAdvNum=VendorPriority.length;
for( let n=0;n<VendorAdvNum;n++ )
{
let strVendor=VendorPriority[n];
if( VendorHtmlArray.hasOwnProperty( strVendor ) )
{
$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
delete( VendorHtmlArray[strVendor] );
}
}
for(let key in VendorHtmlArray )
{
$("#VendorList .CValues").append( VendorHtmlArray[key] );
}
$("#VendorList .CValues input").prop("checked",true);
//------
if(SelectNumber==0)
ChooseDefaultFilament();
//--If Need Install Network Plugin
if(m_ProfileItem["network_plugin_install"]!='1' || (m_ProfileItem["network_plugin_install"]=='1' && m_ProfileItem["network_plugin_compability"]=='0') )
{
$("#AcceptBtn").hide();
$("#GotoNetPluginBtn").show();
}
UpdateStats();
}
function ChooseAllMachine()
{
let bCheck=$("#MachineList input:first").prop("checked");
$("#MachineList input").prop("checked",bCheck);
SortFilament();
}
function MachineClick()
{
let nChecked=$("#MachineList input:gt(0):checked").length
let nAll =$("#MachineList input:gt(0)").length
if(nAll==nChecked)
{
$("#MachineList input:first").prop("checked",true);
}
else
{
$("#MachineList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllFilament()
{
let bCheck=$("#FilatypeList input:first").prop("checked");
$("#FilatypeList input").prop("checked",bCheck);
SortFilament();
}
function FilaClick()
{
let nChecked=$("#FilatypeList input:gt(0):checked").length
let nAll =$("#FilatypeList input:gt(0)").length
if(nAll==nChecked)
{
$("#FilatypeList input:first").prop("checked",true);
}
else
{
$("#FilatypeList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllVendor()
{
let bCheck=$("#VendorList input:first").prop("checked");
$("#VendorList input").prop("checked",bCheck);
SortFilament();
}
function VendorClick()
{
let nChecked=$("#VendorList input:gt(0):checked").length
let nAll =$("#VendorList input:gt(0)").length
if(nAll==nChecked)
{
$("#VendorList input:first").prop("checked",true);
}
else
{
$("#VendorList input:first").prop("checked",false);
}
SortFilament();
}
function SortFilament()
{
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
//$("#ItemBlockArea .MItem").hide();
//ModelList
let pModel=$("#MachineList input:checked");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
let mName=OneModel.getAttribute("mode");
if( mName=='all' )
{
continue;
}
else
{
let mNozzle=OneModel.getAttribute("nozzle");
let NozzleArray=mNozzle.split(';');
for( let bb=0;bb<NozzleArray.length;bb++ )
{
let NewModel='['+mName+'++'+NozzleArray[bb]+']';
ModelList.push( NewModel );
}
}
}
//TypeList
let pType=$("#FilatypeList input:gt(0):checked");
let nType=pType.length;
let TypeList=new Array();
for(let n=0;n<nType;n++)
{
let OneType=pType[n];
TypeList.push( OneType.getAttribute("filatype") );
}
//VendorList
let pVendor=$("#VendorList input:gt(0):checked");
let nVendor=pVendor.length;
let VendorList=new Array();
for(let n=0;n<nVendor;n++)
{
let OneVendor=pVendor[n];
VendorList.push( OneVendor.getAttribute("vendor") );
}
//Update Filament UI
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
let fModel=OneFF.getAttribute("model");
let fVendor=OneFF.getAttribute("vendor");
let fType=OneFF.getAttribute("filatype");
let fName=OneFF.getAttribute("name");
if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
{
let HasModel=false;
for(let m=0;m<ModelList.length;m++)
{
let ModelSrc=ModelList[m];
if( fModel.indexOf(ModelSrc)>=0)
{
HasModel=true;
break;
}
}
if(HasModel || fModel=='')
$(OneNode).show();
else
$(OneNode).hide();
}
else{
$(OneNode).hide();
//alert(fName) //debug non common filament type
}
}
UpdateStats();
}
function UpdateStats()
{
let $i = $("#ItemBlockArea");
let $allItems = $i.find(".MItem");
let $visibleItems = $i.find(".MItem:visible");
let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
let visibleCount = Math.min($filteredItems.length, $visibleItems.length);
$(".list-item-count").text(
$i.find("input:checked").length + " / " +
$allItems.length +
($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
);
}
function ChooseDefaultFilament()
{
//ModelList
let pModel=$("#MachineList input:gt(0)");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
ModelList.push( OneModel.getAttribute("mode") );
}
//DefaultMaterialList
let DefaultMaterialString=new Array();
let nMode=m_ProfileItem["model"].length;
for(let n=0;n<nMode;n++)
{
let OneMode=m_ProfileItem["model"][n];
let ModeName=OneMode['model'];
let DefaultM=OneMode['materials'];
if( ModelList.indexOf(ModeName)>-1 )
{
DefaultMaterialString+=OneMode['materials']+';';
}
}
let DefaultMaterialArray=DefaultMaterialString.split(';');
//alert(DefaultMaterialString);
//Filament
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
$(OneFF).prop("checked",false);
let filamentList=GetFilamentShortname(OneFF.getAttribute("filalist"));
//alert(filamentList);
let filamentArray=filamentList.split(';')
let HasModel=false;
let NowFilaLength=filamentArray.length;
for(let p=0;p<NowFilaLength;p++)
{
let NowFila=filamentArray[p];
if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
{
HasModel=true;
break;
}
}
if(HasModel)
$(OneFF).prop("checked",true);
}
ShowNotice(0);
UpdateStats();
}
function SelectAllFilament( nShow )
{
// ORCA add ability to only select / unselect filted items
if (document.querySelector('.cbr-filter-bar').value) {
$('#ItemBlockArea .MItem:visible input')
.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
.prop("checked", nShow != 0);
}
else {
$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
}
}
function ShowNotice( nShow )
{
if(nShow==0)
{
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else
{
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}
function ResponseFilamentResult()
{
let FilaSelectedList= $("#ItemBlockArea input:checked");
let nAll=FilaSelectedList.length;
if( nAll==0 )
{
ShowNotice(1);
return false;
}
let FilaArray=new Array();
for(let n=0;n<nAll;n++)
{
let strFilalist=FilaSelectedList[n].getAttribute("filalist");
if(strFilalist) {
let filaNames = strFilalist.split(';');
for(let i=0; i<filaNames.length; i++) {
let fname = filaNames[i].trim();
if(fname !== '')
FilaArray.push(fname);
}
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_filaments";
tSend['data']={};
tSend['data']['filament']=FilaArray;
SendWXMessage( JSON.stringify(tSend) );
return true;
}
function ReturnPreviewPage()
{
let nMode=m_ProfileItem["model"].length;
@@ -571,7 +37,6 @@ function ReturnPreviewPage()
document.location.href="../21/index.html";
}
function GotoNetPluginPage()
{
let bRet=ResponseFilamentResult();
@@ -596,8 +61,3 @@ function FinishGuide()
}
//window.location.href="../6/index.html";
}

250
resources/web/guide/22/common.css Normal file
View File

@@ -0,0 +1,250 @@
#Content {
height: 100%;
}
.ChooseBlock {
display:flex;
line-height: 32px;
}
.CName {
width:130px;
font-weight: 700;
height: 100%;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
#ItemBlockArea {
display:flex;
overflow-y:scroll;
flex-wrap:wrap;
flex-direction: row;
padding: 0 0 0 8px;
}
.MItem {
width:33%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px !important;
top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
}
.MItem label {
margin-right: 0px !important;
}
/* ORCA COLUMN BROWSER */
.cbr-browser-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 210px auto;
width: 100%;
height: 100%;
border: 1px solid var(--border-color);
box-sizing: border-box;
}
.cbr-column:last-child {
grid-column: 1 / -1;
border-top: 1px solid var(--border-color);
}
.cbr-column {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cbr-column:nth-child(-n+2) {
border-right: 1px solid var(--border-color);
}
.cbr-column .CValues {
display: grid;
}
.CValues label {
margin-right: 0 !important;
}
.cbr-column-title-container {
position: sticky;
background: var(--bg-color-secondary);
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.cbr-search-bar,
.cbr-filter-bar {
font-size: 16px;
background: var(--bg-color-secondary);
border: 1px solid transparent;
padding: 2px 27px 2px 27px;
line-height: 24px;
}
.cbr-search-bar {
width: calc(100% - 18px);
}
.cbr-filter-bar {
border-color: var(--border-color);
width: 160px;
height:24px;
}
.cbr-column-title-container .ComboBox > select {
margin: 3px 0;
height: 30px;
}
.cbr-column-title-container input:is(:hover,:focus) {
border-color: var(--main-color);
outline: none;
}
.cbr-column-title-container input:is(:focus) {
background: var(--focus-bg-box);
}
.cbr-filter-box {
position: relative;
margin: 3px;
}
.list-item-count {
color:var(--fg-color-label);
margin-left:10px
}
.cbr-filter-btns {
display: flex;
margin: 5px 5px 5px auto;
}
.cbr-filter-btns div:first-of-type {
margin-left: 10px;
}
.cbr-filter-mode-filter {
display: none;
}
.clear-icon,
.search-icon,
.filter-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-mask-image: var(--url);
mask-image: var(--url);
width: 16px;
height: 16px;
background-color: var(--icon-color);
pointer-events:none;
}
.filter-icon {--url: var(--icon-filter)}
.search-icon {--url: var(--icon-search)}
.clear-icon {--url: var(--icon-input-clear)}
.search-icon,
.filter-icon {
left: 6px;
}
.clear-icon {
right: 6px;
display: none;
}
.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon {
display: block;
}
input[onclear="1"] {
cursor:default
}
.cbr-search-placeholder,
.cbr-filter-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--fg-color-label);
pointer-events: none;
line-height: 24px;
left: 27px;
}
.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
opacity: 0;
}
.cbr-content {
overflow-y: auto;
}
.cbr-content div {
padding-left: 8px;
}
.cbr-content label {
margin-right: 0 !important;
padding: 1px 0 !important;
}
.cbr-content div.cbr-no-items {
display: none;
}
/* NOTICE POPUP */
#NoticeMask {
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody {
display: none;
width: 500px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -250px;
}
#NoticeBar {
background-color: var(--main-color);
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent {
padding: 4mm 10mm;
}
#NoticeBtns {
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}

614
resources/web/guide/22/common.js Normal file
View File

@@ -0,0 +1,614 @@
var m_ProfileItem;
var FilamentPriority = new Array( "pla","abs","pet","tpu","pc");
var VendorPriority = new Array("generic");
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function GetFilamentShortname( sName )
{
let sShort=sName.split('@')[0].trim();
return sShort;
}
function SortUI()
{
var ModelList=new Array();
let nMode=m_ProfileItem["model"].length;
for(let n=0;n<nMode;n++)
{
let OneMode=m_ProfileItem["model"][n];
if( OneMode["nozzle_selected"]!="" )
ModelList.push(OneMode);
}
//model
let HtmlMode='';
nMode=ModelList.length;
for(let n=0;n<nMode;n++)
{
let sModel=ModelList[n];
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
}
$('#MachineList .CValues').append(HtmlMode);
$('#MachineList .CValues input').prop("checked",true);
//if(nMode<=1)
//{
// $('#MachineList').hide();
//}
//Filament - Create sorted array with generic vendor first
let FilamentArray=new Array();
let GenericFilamentArray=new Array();
for( let key in m_ProfileItem['filament'] )
{
let OneFila=m_ProfileItem['filament'][key];
if(OneFila['vendor'].toLowerCase() === 'generic')
GenericFilamentArray.push({key: key, data: OneFila});
else
FilamentArray.push({key: key, data: OneFila});
}
// Combine arrays with generic filaments first
let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
let HtmlFilament='';
let SelectNumber=0;
var TypeHtmlArray={};
var VendorHtmlArray={};
for( let n=0; n<SortedFilamentArray.length; n++ )
{
let filamentItem = SortedFilamentArray[n];
let key = filamentItem.key;
let OneFila = filamentItem.data;
//alert(JSON.stringify(OneFila));
let fWholeName=OneFila['name'].trim();
let fShortName=GetFilamentShortname( OneFila['name'] );
let fVendor=OneFila['vendor'];
let fType=OneFila['type'];
let fSelect=OneFila['selected'];
let fModel=OneFila['models']
let bFind=false;
//let bCheck=$("#MachineList input:first").prop("checked");
if( fModel=='')
{
// Orca: hide
bFind=true;
}
else
{
//check in modellist
let nModelAll=ModelList.length;
for(let m=0;m<nModelAll;m++)
{
let sOne=ModelList[m];
let OneName=sOne['model'];
let NozzleArray=sOne["nozzle_selected"].split(';');
let nNozzle=NozzleArray.length;
for( let b=0;b<nNozzle;b++ )
{
let nowModel= OneName+"++"+NozzleArray[b];
if(fModel.indexOf(nowModel)>=0)
{
bFind=true;
break;
}
}
}
}
if(bFind)
{
//Type
let LowType=fType.toLowerCase();
if(!TypeHtmlArray.hasOwnProperty(LowType))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" /><span>'+fType+'</span></label>';
TypeHtmlArray[LowType]=HtmlType;
}
//Vendor
let lowVendor=fVendor.toLowerCase();
if(!VendorHtmlArray.hasOwnProperty(lowVendor))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
VendorHtmlArray[lowVendor]=HtmlVendor;
}
//Filament
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
if(pFila.length==0)
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
$("#ItemBlockArea").append(HtmlFila);
}
else
{
let strModel=pFila.attr("model");
let strFilalist=pFila.attr("filalist");
if(strModel == '' || fModel == '')
pFila.attr("model", '');
else
pFila.attr("model", strModel+fModel);
pFila.attr("filalist", strFilalist+fWholeName+';');
}
if(fSelect*1==1)
{
//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
SelectNumber++;
}
// else
// $("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);
}
}
//Sort TypeArray
let TypeAdvNum=FilamentPriority.length;
for( let n=0;n<TypeAdvNum;n++ )
{
let strType=FilamentPriority[n];
if( TypeHtmlArray.hasOwnProperty( strType ) )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
delete( TypeHtmlArray[strType] );
}
}
for(let key in TypeHtmlArray )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
}
$("#FilatypeList .CValues input").prop("checked",true);
//Sort VendorArray
let VendorAdvNum=VendorPriority.length;
for( let n=0;n<VendorAdvNum;n++ )
{
let strVendor=VendorPriority[n];
if( VendorHtmlArray.hasOwnProperty( strVendor ) )
{
$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
delete( VendorHtmlArray[strVendor] );
}
}
for(let key in VendorHtmlArray )
{
$("#VendorList .CValues").append( VendorHtmlArray[key] );
}
$("#VendorList .CValues input").prop("checked",true);
if(SelectNumber==0)
ChooseDefaultFilament();
UpdateStats();
}
function ChooseAllMachine()
{
let bCheck=$("#MachineList input:first").prop("checked");
$("#MachineList input").prop("checked",bCheck);
SortFilament();
}
function MachineClick()
{
let nChecked=$("#MachineList input:gt(0):checked").length
let nAll =$("#MachineList input:gt(0)").length
if(nAll==nChecked) {
$("#MachineList input:first").prop("checked",true);
}
else {
$("#MachineList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllFilament()
{
let bCheck=$("#FilatypeList input:first").prop("checked");
$("#FilatypeList input").prop("checked",bCheck);
SortFilament();
}
function FilaClick()
{
let nChecked=$("#FilatypeList input:gt(0):checked").length
let nAll =$("#FilatypeList input:gt(0)").length
if(nAll==nChecked) {
$("#FilatypeList input:first").prop("checked",true);
}
else {
$("#FilatypeList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllVendor()
{
let bCheck=$("#VendorList input:first").prop("checked");
$("#VendorList input").prop("checked",bCheck);
SortFilament();
}
function VendorClick()
{
let nChecked=$("#VendorList input:gt(0):checked").length
let nAll =$("#VendorList input:gt(0)").length
if(nAll==nChecked) {
$("#VendorList input:first").prop("checked",true);
}
else {
$("#VendorList input:first").prop("checked",false);
}
SortFilament();
}
function SortFilament()
{
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
//$("#ItemBlockArea .MItem").hide();
//ModelList
let pModel=$("#MachineList input:checked");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
let mName=OneModel.getAttribute("mode");
if( mName=='all' )
{
continue;
}
else
{
let mNozzle=OneModel.getAttribute("nozzle");
let NozzleArray=mNozzle.split(';');
for( let bb=0;bb<NozzleArray.length;bb++ )
{
let NewModel='['+mName+'++'+NozzleArray[bb]+']';
ModelList.push( NewModel );
}
}
}
//TypeList
let pType=$("#FilatypeList input:gt(0):checked");
let nType=pType.length;
let TypeList=new Array();
for(let n=0;n<nType;n++)
{
let OneType=pType[n];
TypeList.push( OneType.getAttribute("filatype") );
}
//VendorList
let pVendor=$("#VendorList input:gt(0):checked");
let nVendor=pVendor.length;
let VendorList=new Array();
for(let n=0;n<nVendor;n++)
{
let OneVendor=pVendor[n];
VendorList.push( OneVendor.getAttribute("vendor") );
}
//Update Filament UI
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
let fModel=OneFF.getAttribute("model");
let fVendor=OneFF.getAttribute("vendor");
let fType=OneFF.getAttribute("filatype");
let fName=OneFF.getAttribute("name");
if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
{
let HasModel=false;
for(let m=0;m<ModelList.length;m++)
{
let ModelSrc=ModelList[m];
if( fModel.indexOf(ModelSrc)>=0)
{
HasModel=true;
break;
}
}
if(HasModel || fModel=='')
$(OneNode).show();
else
$(OneNode).hide();
}
else{
$(OneNode).hide();
//alert(fName) //debug non common filament type
}
}
UpdateStats();
}
function UpdateStats()
{
let $i = $("#ItemBlockArea");
let $allItems = $i.find(".MItem");
let $visibleItems = $i.find(".MItem:visible");
let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
let visibleCount = Math.min($filteredItems.length, $visibleItems.length);
$(".list-item-count").text(
$i.find("input:checked").length + " / " +
$allItems.length +
($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
);
}
function SelectAllFilament( nShow )
{
// ORCA add ability to only select / unselect filted items
if (document.querySelector('.cbr-filter-bar').value) {
$('#ItemBlockArea .MItem:visible input')
.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
.prop("checked", nShow != 0);
}
else {
$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
}
UpdateStats();
}
function ShowNotice( nShow )
{
if(nShow==0) {
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else {
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}
function ChooseDefaultFilament()
{
//ModelList
let pModel=$("#MachineList input:gt(0)");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
ModelList.push( OneModel.getAttribute("mode") );
}
//DefaultMaterialList
let DefaultMaterialString = "";
let nMode=m_ProfileItem["model"].length;
for(let n=0;n<nMode;n++)
{
let OneMode=m_ProfileItem["model"][n];
let ModeName=OneMode['model'];
let DefaultM=OneMode['materials'];
if( ModelList.indexOf(ModeName)>-1 )
{
DefaultMaterialString+=OneMode['materials']+';';
}
}
let DefaultMaterialArray=DefaultMaterialString.split(';');
//alert(DefaultMaterialString);
//Filament
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
$(OneFF).prop("checked",false);
let filamentList=GetFilamentShortname(OneFF.getAttribute("filalist"));
//alert(filamentList);
let filamentArray=filamentList.split(';')
let HasModel=false;
let NowFilaLength=filamentArray.length;
for(let p=0;p<NowFilaLength;p++)
{
let NowFila=filamentArray[p];
if( NowFila!='' && DefaultMaterialArray.indexOf(NowFila)>-1)
{
HasModel=true;
break;
}
}
if(HasModel)
$(OneFF).prop("checked",true);
}
ShowNotice(0);
UpdateStats();
}
function ResponseFilamentResult()
{
let FilaSelectedList= $("#ItemBlockArea input:checked");
let nAll=FilaSelectedList.length;
if( nAll==0 )
{
ShowNotice(1);
return false;
}
let FilaArray=new Array();
for(let n=0;n<nAll;n++)
{
let strFilalist=FilaSelectedList[n].getAttribute("filalist");
if(strFilalist) {
let filaNames = strFilalist.split(';');
for(let i=0; i<filaNames.length; i++) {
let fname = filaNames[i].trim();
if(fname !== '')
FilaArray.push(fname);
}
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_filaments";
tSend['data']={};
tSend['data']['filament']=FilaArray;
SendWXMessage( JSON.stringify(tSend) );
return true;
}
function addClearBtnEvents(el){
el.addEventListener('click', e => {
if (el.getAttribute("onclear") == "1") {
el.value = '';
el.dispatchEvent(new Event('input', {bubbles: true}));
}
});
el.addEventListener('mousemove', e => {
const rc = el.getBoundingClientRect();
const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
el.setAttribute("onclear", onRight ? "1" : "0");
});
el.addEventListener('mouseleave', e => {
el.setAttribute("onclear", "0");
});
}
function initInputEvents(){
document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
searchBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase(),
list = this.closest('.cbr-column').querySelector('.cbr-content'),
items = list.querySelectorAll('label');
let hidden = 0;
items.forEach((item, i) => {
if(i == 0){
item.style.display ="block";
return;
};
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.display = hide ? "none" : "block";
if(hide) hidden++;
});
if(items.length - hidden == 1){
items[0].style.display = "none";
hidden++;
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
});
addClearBtnEvents(searchBar);
});
const filterBar = document.querySelector('.cbr-filter-bar');
const filterModeFilter = document.querySelector('.cbr-filter-mode-filter' );
const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
filterBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase();
const list = this.closest('.cbr-column').querySelector('.cbr-content');
const items = list.querySelectorAll('label');
let hidden = 0;
filterModeFilter.style.display = search ? "block" : "none";
filterModeVisible.style.display = search ? "none" : "block";
const showSel = search == "::checked";
const showUnsel = search == "::unchecked";
if(showSel || showUnsel){
items.forEach(item => {
const cb = item.querySelector("input");
const hide = showSel ? !cb.checked : cb.checked;
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
else {
items.forEach(item => {
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
UpdateStats();
});
addClearBtnEvents(filterBar);
document.querySelector('#filter-tags').addEventListener('change', e => {
let v = e.target.value;
filterBar.value = v == "1" ? "::checked" : "::unchecked";
filterBar.dispatchEvent(new Event('input', {bubbles: true}));
filterBar.focus();
e.target.value = 0; // reset back to make dropdown items always selectable
});
}

96
resources/web/guide/22/index.html
View File

@@ -6,6 +6,7 @@
<title>引导_P21</title>
<link rel="stylesheet" type="text/css" href="../../include/global.css" /> <!-- ORCA One for all-->
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../22/common.css" /> <!-- ORCA use common sources for setup guide and standalone dialog -->
<link rel="stylesheet" type="text/css" href="22.css" />
<link rel="stylesheet" type="text/css" href="../css/dark.css" />
<script type="text/javascript" src="test.js"></script>
@@ -14,6 +15,7 @@
<script type="text/javascript" src="../../data/text.js"></script>
<script type="text/javascript" src="../js/globalapi.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../22/common.js"></script> <!-- ORCA use common sources for setup guide and standalone dialog -->
<script type="text/javascript" src="./22.js"></script>
</head>
<body onLoad="OnInit()">
@@ -129,98 +131,6 @@
// e.returnValue = false;
//}
};
function addClearBtnEvents(el){
el.addEventListener('click', e => {
if (el.getAttribute("onclear") == "1") {
el.value = '';
el.dispatchEvent(new Event('input', {bubbles: true}));
}
});
el.addEventListener('mousemove', e => {
const rc = el.getBoundingClientRect();
const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
el.setAttribute("onclear", onRight ? "1" : "0");
});
el.addEventListener('mouseleave', e => {
el.setAttribute("onclear", "0");
});
}
document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
searchBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase(),
list = this.closest('.cbr-column').querySelector('.cbr-content'),
items = list.querySelectorAll('label');
let hidden = 0;
items.forEach((item, i) => {
if(i == 0){
item.style.display ="block";
return;
};
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.display = hide ? "none" : "block";
if(hide) hidden++;
});
if(items.length - hidden == 1){
items[0].style.display = "none";
hidden++;
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
});
addClearBtnEvents(searchBar);
});
const filterBar = document.querySelector('.cbr-filter-bar');
const filterModeFilter = document.querySelector('.cbr-filter-mode-filter' );
const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
filterBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase();
const list = this.closest('.cbr-column').querySelector('.cbr-content');
const items = list.querySelectorAll('label');
let hidden = 0;
filterModeFilter.style.display = search ? "block" : "none";
filterModeVisible.style.display = search ? "none" : "block";
const showSel = search == "::checked";
const showUnsel = search == "::unchecked";
if(showSel || showUnsel){
items.forEach(item => {
const cb = item.querySelector("input");
const hide = showSel ? !cb.checked : cb.checked;
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
else {
items.forEach(item => {
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
UpdateStats();
});
addClearBtnEvents(filterBar);
document.querySelector('#filter-tags').addEventListener('change', e => {
let v = e.target.value;
filterBar.value = v == "1" ? "::checked" : "::unchecked";
filterBar.dispatchEvent(new Event('input', {bubbles: true}));
filterBar.focus();
e.target.value = 0; // reset back to make dropdown items always selectable
});
initInputEvents();
</script>
</html>

328
resources/web/guide/23/23.css
View File

@@ -1,108 +1,5 @@
.ChooseBlock
{
display:flex;
line-height: 32px;
}
.CName
{
width:130px;
font-weight: 700;
height: 100%;
text-align: right;
white-space: nowrap;
flex-shrink: 0;
}
#ItemBlockArea
{
display:flex;
overflow-y:scroll;
flex-wrap:wrap;
flex-direction: row;
padding: 0 0 0 8px;
}
.MItem
{
width:33%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 4px !important;
top: -100px; /* ORCA this will be activated when item filtered with position:absolute */
}
.MItem label
{
margin-right: 0px !important;
}
#NoticeMask
{
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody
{
display: none;
width: 500px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -250px;
}
#NoticeBar
{
background-color: var(--main-color);
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent
{
padding: 4mm 10mm;
}
#NoticeBtns
{
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}
#SystemFilamentsArea
{
display: none;
flex-direction: column;
height: 100%;
}
#CFilament_Btn_Area
{
display: flex;
align-items: center;
height: 30px;
}
#Title
{
/* TABS SYSTEM / CUSTOM */
#Title {
margin: 0px 40px;
border-bottom: 1px solid var(--border-color);
display: flex;
@@ -111,37 +8,44 @@
align-items: center;
}
#Title div
{
#Title div {
cursor: pointer;
font-size: 24px;
}
#Title div.TitleSelected
{
#Title div.TitleSelected {
height: calc(100% - 6px);
display: flex;
align-items: center;
border-bottom: 6px solid var(--main-color);
}
#Title div.TitleUnselected
{
#Title div.TitleUnselected {
height: 100%;
display: flex;
align-items: center;
color: #000;
}
#CustomFilamentsArea
{
/* SYSTEM FILAMENTS PAGE */
body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser support 2023+ */
padding: 15px 15px 5px;
}
#SystemFilamentsArea {
display: none;
flex-direction: column;
height: 100%;
}
/* CUSTOM FILAMENTS PAGE */
#CustomFilamentsArea {
display: flex;
flex-direction: column;
height: 100%;
}
#CFilament_List
{
#CFilament_List {
display:flex;
overflow-y:auto;
flex-wrap:wrap;
@@ -152,8 +56,7 @@
height: 100%;
}
.CFilament_Item
{
.CFilament_Item {
display: flex;
align-items: center;
margin-right: 10%;
@@ -164,200 +67,21 @@
margin-right: 2%;
}
.CFilament_Name
{
.CFilament_Name {
width: 100%;
overflow: hidden;
white-space: nowrap; /* ?????? */
text-overflow: ellipsis; /* ????????? */
}
.CFilament_EditBtn
{
cursor: pointer;
width: 20px;
height: 20px;
}
.CFilament_EditBtn:hover
{
}
/* ORCA column browser */
#Content {
height: 100%;
}
body:has(#SystemFilamentBtn.TitleSelected) #Content { /* :has selector browser support 2023+ */
padding: 15px 15px 5px;
}
.cbr-browser-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 210px auto;
width: 100%;
height: 100%;
border: 1px solid var(--border-color);
box-sizing: border-box;
}
.cbr-column:last-child {
grid-column: 1 / -1;
border-top: 1px solid var(--border-color);
}
.cbr-column {
display: flex;
flex-direction: column;
overflow: hidden;
}
.cbr-column:nth-child(-n+2) {
border-right: 1px solid var(--border-color);
}
.cbr-column .CValues {
display: grid;
}
.CValues label {
margin-right: 0 !important;
}
.cbr-column-title-container {
position: sticky;
background: var(--bg-color-secondary);
#CFilament_Btn_Area {
display: flex;
align-items: center;
border-bottom: 1px solid var(--border-color);
}
.cbr-search-bar,
.cbr-filter-bar {
font-size: 16px;
background: var(--bg-color-secondary);
border: 1px solid transparent;
padding: 2px 27px 2px 27px;
line-height: 24px;
}
.cbr-search-bar {
width: calc(100% - 18px);
}
.cbr-filter-bar {
border-color: var(--border-color);
width: 160px;
height:24px;
}
.cbr-column-title-container .ComboBox > select {
margin: 3px 0;
height: 30px;
}
.cbr-column-title-container input:is(:hover,:focus) {
border-color: var(--main-color);
outline: none;
}
.cbr-column-title-container input:is(:focus) {
background: var(--focus-bg-box);
}
.cbr-filter-box {
position: relative;
margin: 3px;
}
.list-item-count {
color:var(--fg-color-label);
margin-left:10px
}
.cbr-filter-btns {
display: flex;
margin: 5px 5px 5px auto;
}
.cbr-filter-btns div:first-of-type {
margin-left: 10px;
}
.cbr-filter-mode-filter {
display: none;
}
.clear-icon,
.search-icon,
.filter-icon {
position: absolute;
top: 50%;
transform: translateY(-50%);
-webkit-mask-image: var(--url);
mask-image: var(--url);
width: 16px;
height: 16px;
background-color: var(--icon-color);
pointer-events:none;
}
.filter-icon {--url: var(--icon-filter)}
.search-icon {--url: var(--icon-search)}
.clear-icon {--url: var(--icon-input-clear)}
.search-icon,
.filter-icon {
left: 6px;
}
.clear-icon {
right: 6px;
display: none;
}
.cbr-search-bar:not(:placeholder-shown) ~ .clear-icon,
.cbr-filter-bar:not(:placeholder-shown) ~ .clear-icon {
display: block;
}
input[onclear="1"]{
cursor:default
}
.cbr-search-placeholder,
.cbr-filter-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 16px;
color: var(--fg-color-label);
pointer-events: none;
line-height: 24px;
left: 27px;
}
.cbr-search-bar:not(:placeholder-shown) + .cbr-search-placeholder,
.cbr-filter-bar:not(:placeholder-shown) + .cbr-filter-placeholder {
opacity: 0;
}
.cbr-content {
overflow-y: auto;
}
.cbr-content div {
padding-left: 8px;
}
.cbr-content label {
margin-right: 0 !important;
padding: 1px 0 !important;
}
.cbr-content div.cbr-no-items {
display: none;
.CFilament_EditBtn {
cursor: pointer;
width: 20px;
height: 20px;
}

518
resources/web/guide/23/23.js
View File

@@ -1,8 +1,3 @@
var m_ProfileItem;
var FilamentPriority=new Array( "pla","abs","pet","tpu","pc");
var VendorPriority=new Array("generic");
function OnInit()
{
TranslatePage();
@@ -15,15 +10,6 @@ function OnInit()
//OnSelectMenu(2);
}
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function HandleStudio(pVal)
{
let strCmd=pVal['command'];
@@ -40,505 +26,6 @@ function HandleStudio(pVal)
}
}
function GetFilamentShortname( sName )
{
let sShort=sName.split('@')[0].trim();
return sShort;
}
function SortUI()
{
var ModelList=new Array();
let nMode=m_ProfileItem["model"].length;
for(let n=0;n<nMode;n++)
{
let OneMode=m_ProfileItem["model"][n];
if( OneMode["nozzle_selected"]!="" )
ModelList.push(OneMode);
}
//model
let HtmlMode='';
nMode=ModelList.length;
for(let n=0;n<nMode;n++)
{
let sModel=ModelList[n];
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
HtmlMode+='<label><input type="checkbox" mode="'+sModel['model']+'" nozzle="'+sModel['nozzle_selected']+'" onChange="MachineClick()" /><span>'+sModel['model']+'</span></label>';
}
$('#MachineList .CValues').append(HtmlMode);
$('#MachineList .CValues input').prop("checked",true);
//if(nMode<=1)
//{
// $('#MachineList').hide();
//}
//Filament - Create sorted array with generic vendor first
let FilamentArray=new Array();
let GenericFilamentArray=new Array();
for( let key in m_ProfileItem['filament'] )
{
let OneFila=m_ProfileItem['filament'][key];
if(OneFila['vendor'].toLowerCase() === 'generic')
GenericFilamentArray.push({key: key, data: OneFila});
else
FilamentArray.push({key: key, data: OneFila});
}
// Combine arrays with generic filaments first
let SortedFilamentArray = GenericFilamentArray.concat(FilamentArray);
let HtmlFilament='';
let SelectNumber=0;
var TypeHtmlArray={};
var VendorHtmlArray={};
for( let n=0; n<SortedFilamentArray.length; n++ )
{
let filamentItem = SortedFilamentArray[n];
let key = filamentItem.key;
let OneFila = filamentItem.data;
//alert(JSON.stringify(OneFila));
let fWholeName=OneFila['name'].trim();
let fShortName=GetFilamentShortname( OneFila['name'] );
let fVendor=OneFila['vendor'];
let fType=OneFila['type'];
let fSelect=OneFila['selected'];
let fModel=OneFila['models']
let bFind=false;
//let bCheck=$("#MachineList input:first").prop("checked");
if( fModel=='')
{
bFind=true;
}
else
{
//check in modellist
let nModelAll=ModelList.length;
for(let m=0;m<nModelAll;m++)
{
let sOne=ModelList[m];
let OneName=sOne['model'];
let NozzleArray=sOne["nozzle_selected"].split(';');
let nNozzle=NozzleArray.length;
for( let b=0;b<nNozzle;b++ )
{
let nowModel= OneName+"++"+NozzleArray[b];
if(fModel.indexOf(nowModel)>=0)
{
bFind=true;
break;
}
}
}
}
if(bFind)
{
//Type
let LowType=fType.toLowerCase();
if(!TypeHtmlArray.hasOwnProperty(LowType))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlType='<label><input type="checkbox" filatype="'+fType+'" onChange="FilaClick()" /><span>'+fType+'</span></label>';
TypeHtmlArray[LowType]=HtmlType;
}
//Vendor
let lowVendor=fVendor.toLowerCase();
if(!VendorHtmlArray.hasOwnProperty(lowVendor))
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlVendor='<label><input type="checkbox" vendor="'+fVendor+'" onChange="VendorClick()" /><span>'+fVendor+'</span></label>';
VendorHtmlArray[lowVendor]=HtmlVendor;
}
//Filament
let pFila=$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']");
if(pFila.length==0)
{
/* ORCA use label tag to allow checkbox to toggle when user ckicked to text */
let HtmlFila='<label class="MItem"><input type="checkbox" onChange="UpdateStats()" vendor="'+fVendor+'" filatype="'+fType+'" filalist="'+fWholeName+';'+'" model="'+fModel+'" name="'+fShortName+'" /><span>'+fShortName+'</span></label>';
$("#ItemBlockArea").append(HtmlFila);
}
else
{
let strModel=pFila.attr("model");
let strFilalist=pFila.attr("filalist");
if(strModel == '' || fModel == '')
pFila.attr("model", '');
else
pFila.attr("model", strModel+fModel);
pFila.attr("filalist", strFilalist+fWholeName+';');
}
if(fSelect*1==1)
{
//alert( fWholeName+' - '+fShortName+' - '+fVendor+' - '+fType+' - '+fSelect+' - '+fModel );
$("#ItemBlockArea input[vendor='"+fVendor+"'][filatype='"+fType+"'][name='"+fShortName+"']").prop("checked",true);
SelectNumber++;
}
// else
// $("#ItemBlockArea input[vendor='"+fVendor+"'][model='"+fModel+"'][filatype='"+fType+"'][name='"+key+"']").prop("checked",false);
}
}
//Sort TypeArray
let TypeAdvNum=FilamentPriority.length;
for( let n=0;n<TypeAdvNum;n++ )
{
let strType=FilamentPriority[n];
if( TypeHtmlArray.hasOwnProperty( strType ) )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[strType] );
delete( TypeHtmlArray[strType] );
}
}
for(let key in TypeHtmlArray )
{
$("#FilatypeList .CValues").append( TypeHtmlArray[key] );
}
$("#FilatypeList .CValues input").prop("checked",true);
//Sort VendorArray
let VendorAdvNum=VendorPriority.length;
for( let n=0;n<VendorAdvNum;n++ )
{
let strVendor=VendorPriority[n];
if( VendorHtmlArray.hasOwnProperty( strVendor ) )
{
$("#VendorList .CValues").append( VendorHtmlArray[strVendor] );
delete( VendorHtmlArray[strVendor] );
}
}
for(let key in VendorHtmlArray )
{
$("#VendorList .CValues").append( VendorHtmlArray[key] );
}
$("#VendorList .CValues input").prop("checked",true);
//------
if(SelectNumber==0)
ChooseDefaultFilament();
UpdateStats();
}
function ChooseAllMachine()
{
let bCheck=$("#MachineList input:first").prop("checked");
$("#MachineList input").prop("checked",bCheck);
SortFilament();
}
function MachineClick()
{
let nChecked=$("#MachineList input:gt(0):checked").length
let nAll =$("#MachineList input:gt(0)").length
if(nAll==nChecked)
{
$("#MachineList input:first").prop("checked",true);
}
else
{
$("#MachineList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllFilament()
{
let bCheck=$("#FilatypeList input:first").prop("checked");
$("#FilatypeList input").prop("checked",bCheck);
SortFilament();
}
function FilaClick()
{
let nChecked=$("#FilatypeList input:gt(0):checked").length
let nAll =$("#FilatypeList input:gt(0)").length
if(nAll==nChecked)
{
$("#FilatypeList input:first").prop("checked",true);
}
else
{
$("#FilatypeList input:first").prop("checked",false);
}
SortFilament();
}
function ChooseAllVendor()
{
let bCheck=$("#VendorList input:first").prop("checked");
$("#VendorList input").prop("checked",bCheck);
SortFilament();
}
function VendorClick()
{
let nChecked=$("#VendorList input:gt(0):checked").length
let nAll =$("#VendorList input:gt(0)").length
if(nAll==nChecked)
{
$("#VendorList input:first").prop("checked",true);
}
else
{
$("#VendorList input:first").prop("checked",false);
}
SortFilament();
}
function SortFilament()
{
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
//$("#ItemBlockArea .MItem").hide();
//ModelList
let pModel=$("#MachineList input:checked");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
let mName=OneModel.getAttribute("mode");
if( mName=='all' )
{
continue;
}
else
{
let mNozzle=OneModel.getAttribute("nozzle");
let NozzleArray=mNozzle.split(';');
for( let bb=0;bb<NozzleArray.length;bb++ )
{
let NewModel='['+mName+'++'+NozzleArray[bb]+']';
ModelList.push( NewModel );
}
}
}
//TypeList
let pType=$("#FilatypeList input:gt(0):checked");
let nType=pType.length;
let TypeList=new Array();
for(let n=0;n<nType;n++)
{
let OneType=pType[n];
TypeList.push( OneType.getAttribute("filatype") );
}
//VendorList
let pVendor=$("#VendorList input:gt(0):checked");
let nVendor=pVendor.length;
let VendorList=new Array();
for(let n=0;n<nVendor;n++)
{
let OneVendor=pVendor[n];
VendorList.push( OneVendor.getAttribute("vendor") );
}
//Update Filament UI
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
let fModel=OneFF.getAttribute("model");
let fVendor=OneFF.getAttribute("vendor");
let fType=OneFF.getAttribute("filatype");
let fName=OneFF.getAttribute("name");
if(TypeList.in_array(fType) && VendorList.in_array(fVendor))
{
let HasModel=false;
for(let m=0;m<ModelList.length;m++)
{
let ModelSrc=ModelList[m];
if( fModel.indexOf(ModelSrc)>=0)
{
HasModel=true;
break;
}
}
if(HasModel || fModel=='')
$(OneNode).show();
else
$(OneNode).hide();
}
else{
$(OneNode).hide();
//alert(fName) //debug non common filament type
}
}
UpdateStats();
}
function UpdateStats()
{
let $i = $("#ItemBlockArea");
let $allItems = $i.find(".MItem");
let $visibleItems = $i.find(".MItem:visible");
let $filteredItems = $visibleItems.filter(function() { return $(this).css('position') !== 'absolute'});
let visibleCount = Math.min($filteredItems.length, $visibleItems.length);
$(".list-item-count").text(
$i.find("input:checked").length + " / " +
$allItems.length +
($allItems.length > visibleCount ? (" [" + visibleCount + "]") : "") // filtered items
);
}
function ChooseDefaultFilament()
{
//ModelList
let pModel=$("#MachineList input:gt(0):checked");
let nModel=pModel.length;
let ModelList=new Array();
for(let n=0;n<nModel;n++)
{
let OneModel=pModel[n];
ModelList.push( OneModel.getAttribute("mode") );
}
//Filament
let FilaNodes=$("#ItemBlockArea .MItem");
let nFilament=FilaNodes.length;
for(let m=0;m<nFilament;m++)
{
let OneNode=FilaNodes[m];
let OneFF=OneNode.getElementsByTagName("input")[0];
$(OneFF).prop("checked",false);
let fModel=OneFF.getAttribute("model");
let HasModel=false;
for(let m=0;m<nModel;m++)
{
let ModelSrc=ModelList[m];
if( fModel.indexOf(ModelSrc)>=0)
{
HasModel=true;
break;
}
}
if(HasModel)
$(OneFF).prop("checked",true);
}
ShowNotice(0);
}
function SelectAllFilament( nShow )
{
// ORCA add ability to only select / unselect filted items
if (document.querySelector('.cbr-filter-bar').value) {
$('#ItemBlockArea .MItem:visible input')
.filter(function() {return $(this).closest('.MItem').css('position') !== 'absolute'})
.prop("checked", nShow != 0);
}
else {
$('#ItemBlockArea .MItem:visible input').prop("checked",nShow!=0);
}
UpdateStats();
}
function ShowNotice( nShow )
{
if(nShow==0)
{
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else
{
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}
function ResponseFilamentResult()
{
let FilaSelectedList= $("#ItemBlockArea input:checked");
let nAll=FilaSelectedList.length;
if( nAll==0 )
{
ShowNotice(1);
return false;
}
let FilaArray=new Array();
for(let n=0;n<nAll;n++)
{
let strFilalist=FilaSelectedList[n].getAttribute("filalist");
if(strFilalist) {
let filaNames = strFilalist.split(';');
for(let i=0; i<filaNames.length; i++) {
let fname = filaNames[i].trim();
if(fname !== '')
FilaArray.push(fname);
}
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_filaments";
tSend['data']={};
tSend['data']['filament']=FilaArray;
SendWXMessage( JSON.stringify(tSend) );
return true;
}
function CancelSelect()
{
var tSend={};
@@ -549,7 +36,6 @@ function CancelSelect()
SendWXMessage( JSON.stringify(tSend) );
}
function ConfirmSelect()
{
let bRet=ResponseFilamentResult();
@@ -566,7 +52,6 @@ function ConfirmSelect()
}
}
function OnSelectMenu( nIndex )
{
switch(nIndex)
@@ -633,7 +118,6 @@ function UpdateCustomFilaments( CFList )
$('#CFilament_List').html(strHtml);
}
function OnClickCustomFilamentAdd()
{
//alert('Create New Custom Filament');
@@ -657,5 +141,3 @@ function CFEdit( fid )
SendWXMessage( JSON.stringify(tSend) );
}

95
resources/web/guide/23/index.html
View File

@@ -6,6 +6,7 @@
<title>引导_P21</title>
<link rel="stylesheet" type="text/css" href="../../include/global.css" /> <!-- ORCA One for all-->
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../22/common.css" /> <!-- ORCA use common sources for setup guide and standalone dialog -->
<link rel="stylesheet" type="text/css" href="23.css" />
<link rel="stylesheet" type="text/css" href="../css/dark.css" />
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
@@ -13,6 +14,7 @@
<script type="text/javascript" src="../../data/text.js"></script>
<script type="text/javascript" src="../js/globalapi.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../22/common.js"></script> <!-- ORCA use common sources for setup guide and standalone dialog -->
<script type="text/javascript" src="./23.js"></script>
</head>
<body onLoad="OnInit()">
@@ -150,97 +152,6 @@
}
}, { passive: false });
function addClearBtnEvents(el){
el.addEventListener('click', e => {
if (el.getAttribute("onclear") == "1") {
el.value = '';
el.dispatchEvent(new Event('input', {bubbles: true}));
}
});
el.addEventListener('mousemove', e => {
const rc = el.getBoundingClientRect();
const onRight = el.value && (e.clientX - rc.left > rc.width - 32);
el.setAttribute("onclear", onRight ? "1" : "0");
});
el.addEventListener('mouseleave', e => {
el.setAttribute("onclear", "0");
});
}
document.querySelectorAll('.cbr-search-bar').forEach(searchBar => {
searchBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase(),
list = this.closest('.cbr-column').querySelector('.cbr-content'),
items = list.querySelectorAll('label');
let hidden = 0;
items.forEach((item, i) => {
if(i == 0){
item.style.display ="block";
return;
};
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.display = hide ? "none" : "block";
if(hide) hidden++;
});
if(items.length - hidden == 1){
items[0].style.display = "none";
hidden++;
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
});
addClearBtnEvents(searchBar);
});
const filterBar = document.querySelector('.cbr-filter-bar');
const filterModeFilter = document.querySelector('.cbr-filter-mode-filter' );
const filterModeVisible = document.querySelector('.cbr-filter-mode-visible');
filterBar.addEventListener('input', function() {
const search = this.value.trim().toLowerCase();
const list = this.closest('.cbr-column').querySelector('.cbr-content');
const items = list.querySelectorAll('label');
let hidden = 0;
filterModeFilter.style.display = search ? "block" : "none";
filterModeVisible.style.display = search ? "none" : "block";
const showSel = search == "::checked";
const showUnsel = search == "::unchecked";
if(showSel || showUnsel){
items.forEach(item => {
const cb = item.querySelector("input");
const hide = showSel ? !cb.checked : cb.checked;
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
else {
items.forEach(item => {
const text = item.querySelector("span").textContent.toLowerCase();
const hide = search && !text.includes(search);
item.style.position = hide ? "absolute" : "unset";
if(hide) hidden++;
});
}
list.querySelector('.cbr-no-items').style.display = (hidden === items.length) ? "block" : "none";
UpdateStats();
});
addClearBtnEvents(filterBar);
document.querySelector('#filter-tags').addEventListener('change', e => {
let v = e.target.value;
filterBar.value = v == "1" ? "::checked" : "::unchecked";
filterBar.dispatchEvent(new Event('input', {bubbles: true}));
filterBar.focus();
e.target.value = 0; // reset back to make dropdown items always selectable
});
initInputEvents();
</script>
</html>

470
resources/web/guide/24/24.css
View File

@@ -1,473 +1,5 @@
#Content
{
overflow-y:auto;
padding: 0 10px 0 20px; /* ORCA Specify & Reduce horizontal paddings to fit 4 items per row */
height: 100%;
}
.OneVendorBlock {
position: relative;
margin-bottom: 7px;
}
.OneVendorBlock:last-of-type {
margin-bottom: 36px;
}
.BlockBanner
{
position: sticky;
top: 0;
left: 0;
padding: 0px;
border-bottom: 2px solid var(--main-color);
width: 100%;
display: flex;
align-items: center;
z-index: 100;
background-color: var(--bg-color-secondary);
box-sizing: border-box;
}
.BannerBtns
{
display: flex;
white-space: nowrap;
justify-content: space-around;
align-items: center;
text-align: center;
margin-right: 5px; /* ORCA align buttons with end of horizontal separator/line */
margin-left: auto;
}
.BlockBanner a
{
line-height: 30px;
height: 30px;
font-size: 17px;
font-weight: 600;
padding: 0px 10px;
color: var(--fg-color-text);
}
.BlockBanner .modelCount {
margin: 0 15px 0 auto;
font-size: 14px;
line-height: 14px;
height: 15px;
color: var(--fg-color-label);
}
.VendorCheckbox {
transform: scale(1.3);
}
.PrinterArea
{
padding: 7px 0px; /* ORCA Reduce horizontal paddings to fit 4 items per row */
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 7px;
}
.PrinterBlock
{
display: flex;
align-items: center;
text-align: center;
flex-direction: column;
gap:10px;
padding: 15px 10px 10px 10px;
background-color: var(--bg-color-secondary);
position: relative;
border: 1px solid transparent
}
.PrinterBlock:hover {
background-color: var(--focus-bg-item);
border-color:var(--main-color);
}
.PImg {
width:120px; /* ORCA use covers as 120x120px but use source file as 240x240 for better quality on hidpi */
height:120px; /* ORCA fit image to fill frame */
}
.PrinterInfo,
.PrinterInfoMark {
position: absolute;
right: 4px;
top: 4px;
opacity: 0;
border-radius: 11px;
line-height: 19px;
font-size: 14px;
}
.PrinterInfo {
--card-animation-delay: .8s; /* open info with delay on list / compact view to prevent them appear while mouse movements */
--card-info-height: fit-content;
left: 4px;
width: auto;
z-index: 9998;
height: var(--card-info-height);
border-color: var(--border-color);
background: var(--bg-color);
padding: 10px;
text-align: left;
color: var(--fg-color-text);
pointer-events: none;
}
#Content[layout="2"] .PrinterInfo {
--card-animation-delay: .3s;
--card-info-height: 116px;
}
.PrinterInfo .title {font-weight: 700}
.PrinterInfo .value {font-weight: 400}
.PrinterInfoMark:hover + .PrinterInfo {
animation: infoCard 0s forwards var(--card-animation-delay);
}
@keyframes infoCard {100% {
opacity: 1;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
}}
.PrinterInfoMark {
width: 20px;
height: 20px;
background: var(--main-color);
border: 1px solid var(--main-color);
z-index: 9999;
color: #FFF;
text-align: center;
}
.PrinterBlock:hover .PrinterInfoMark {
opacity: 1;
}
.PrinterBlock:hover .PrinterInfoMark:hover {
background: var(--main-color-hover);
}
.ModelCheckBox
{
position: absolute;
height: 6px;
bottom: 0;
left: 10%;
width: 80%;
background: var(--button-bg-hover)
}
.ModelCheckBox.ModelCheckBoxSelected
{
background: var(--main-color-fixed)
}
img.ModelThumbnail
{
width: 100%;
height: 100%;
}
.PName
{
font-weight: 600;
line-height: 20px; /* ORCA */
text-align: center;
width: 100%;
color: var(--fg-color-text);
}
.pNozzel
{
display: none;
align-items: center;
justify-content:flex-start;
color: #5A5A5A;
padding-left: 0px; /* ORCA Align checkboxes with with model text */
}
.pNozzel input
{
vertical-align: middle;
margin-right: 5px;
}
.LayoutSelector {
position: absolute;
right:21px;
top:14px;
}
.LayoutSelector .TabGroup {
display: flex;
padding: 2px;
gap: 2px;
border-radius: 6px;
background-color: var(--bg-color-alt);
}
.LayoutSelector .icon16 {
opacity: .8;
}
.LayoutSelector .TabButton {
padding: 7px;
border-radius: 4px;
}
.LayoutSelector .TabButton.selected {background: var(--main-color)}
.LayoutSelector .TabButton.selected:hover {background: var(--main-color-hover)}
.LayoutSelector .TabButton.selected .icon16 {background: #FFF}
.LayoutSelector .TabButton:nth-of-type(1) .icon16 {--icon-url: var(--icon-layout-list)}
.LayoutSelector .TabButton:nth-of-type(2) .icon16 {--icon-url: var(--icon-layout-compact)}
.LayoutSelector .TabButton:nth-of-type(3) .icon16 {--icon-url: var(--icon-layout-cover)}
/* UNIQUE STYLES */
#CreateBtn {
margin: 0 auto 0 0;
}
/* LAYOUT */
#Content[layout="compact-list"] .PrinterArea {
grid-template-columns: repeat(4, 1fr);
}
#Content[layout="compact-list"] .PImg {
display: none;
}
#Content[layout="compact-list"] .OneVendorBlock {
margin-bottom: 15px;
}
#Content[layout="compact-cover"] .PrinterArea {
grid-template-columns: repeat(3, 1fr);
}
#Content[layout="compact-cover"] .PImg {
width: 60px;
min-width: 60px;
height: 60px;
}
#Content[layout|="compact"] .PName {
text-align: left;
}
#Content[layout|="compact"] .PrinterBlock {
flex-direction: row;
padding: 5px 5px 5px 18px;
}
#Content[layout|="compact"] .ModelCheckBox {
width: 6px;
height: 80%;
left:0;
top:10%
}
#Content[layout|="compact"] .OneVendorBlock:last-of-type {
margin-bottom: 0px;
}
/*-----Notice-----*/
#NoticeMask
{
background-color: #000;
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
opacity: 0.05;
display: none;
}
#NoticeBody
{
display: none;
width: 400px;
border-width: 1px;
border-style: solid;
border-radius: 4px;
background-color: inherit;
position: absolute;
left: 50%;
top: 200px;
margin-left: -200px;
}
#NoticeBar
{
background-color:#00f0d8;
height: 40px;
line-height: 40px;
color: #fff;
text-align: center;
}
#NoticeContent
{
padding: 4mm 10mm;
}
#NoticeBtns
{
margin-top: 4mm;
display: flex;
justify-content:flex-end;
}
.search {
position: absolute;
left:66px;
top: 14px;
width: 34px;
height: 34px;
z-index: 99;
overflow: hidden;
}
.search:focus-within,
.search[hasvalue="1"] {
width: calc(100% - 194px);
}
.searchTerm {
width: 100%;
height: 100%;
padding: 4px 5px;
border-radius: 6px;
outline: none;
box-sizing: border-box;
background: var(--button-bg-normal);
border: 1px solid var(--button-bg-normal);
}
@media (prefers-reduced-motion: no-preference) {
.searchTerm {
transition: background-color .2s
}
}
.searchTerm,
.search-placeholder {
line-height: 24px; /* ORCA center text vertically */
font-size: 14px;
}
.search:focus-within .searchTerm,
.search[hasvalue="1"] .searchTerm {
padding-left:33px;
background: var(--bg-color);
border-color: var(--main-color);
}
.search[hasvalue="1"]:not(:focus-within, :hover) .searchTerm {
border-color: var(--border-color);
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm {
cursor: default;
}
.search:not(:focus-within, [hasvalue="1"]) .searchTerm:hover {
background: var(--button-bg-hover);
}
.search-placeholder {
color: var(--fg-color-disabled);
left: 33px;
}
.searchTerm:not(:placeholder-shown) + .search-placeholder {
opacity: 0;
}
.search-icon,
.search-placeholder {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
}
.search-icon {
left: 9px;
--icon-url: var(--icon-search);
}
.SidebarBtn {
position: absolute;
left: 20px;
top: 14px;
padding: 9px;
border-radius: 6px;
}
.SidebarBtn .icon16 {
--icon-url: var(--icon-sidebar);
}
#SidebarContainer {
position: absolute;
top: 0;
left: -240px;
right: 0;
height: 100%;
z-index: 999999;
display: flex;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
#SidebarContainer {
transition: background-color .2s, left .2s
}
}
#SidebarContainer[open="1"] {
left: 0px;
pointer-events: all;
background: rgba(0,0,0,.3);
}
#Sidebar {
flex: 0 0 220px;
background: var(--bg-color);
box-shadow: 5px 0 20px rgba(0,0,0,.2);
padding: 15px 0;
overflow-y: auto;
}
#Sidebar .title {
font-size: 17px;
line-height: 17px;
font-weight: 600;
padding: 0 0 5px 20px;
}
#Sidebar .SidebarItem {
width: 100%;
padding: 2px 10px 2px 20px;
color:var(--fg-color-text);
font-size: 14px;
border: 1px solid transparent;
box-sizing: border-box;
}
#Sidebar .SidebarItem:hover {
border-color: var(--main-color);
}
#SidebarContainer .back {
flex: 1;
}

481
resources/web/guide/24/24.js
View File

@@ -1,485 +1,15 @@
// UNIQUE FUNCTIONS
// Keep in here for future additions
function OnInit()
{
//let strInput=JSON.stringify(cData);
//HandleModelList(cData);
TranslatePage();
RequestProfile();
}
function RequestProfile()
{
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="request_userguide_profile";
SendWXMessage( JSON.stringify(tSend) );
}
function HandleStudio( pVal )
{
// alert(strInput);
// alert(JSON.stringify(strInput));
//
// let pVal=IsJson(strInput);
// if(pVal==null)
// {
// alert("Msg Format Error is not Json");
// return;
// }
let strCmd=pVal['command'];
//alert(strCmd);
if(strCmd=='response_userguide_profile')
{
HandleModelList(pVal['response']);
}
}
function ShowPrinterThumb(pItem, strImg)
{
$(pItem).attr('src',strImg);
$(pItem).attr('onerror',null);
}
function ChooseModel( vendor, ModelName )
{
let ChooseItem=$(".ModelCheckBox[vendor='"+vendor+"'][model='"+ModelName+"']");
if(ChooseItem!=null)
{
if( $(ChooseItem).hasClass('ModelCheckBoxSelected') )
$(ChooseItem).removeClass('ModelCheckBoxSelected');
else
$(ChooseItem).addClass('ModelCheckBoxSelected');
SetModelSelect(vendor, ModelName, $(ChooseItem).hasClass('ModelCheckBoxSelected'));
}
}
function HandleModelList( pVal )
{
if( !pVal.hasOwnProperty("model") )
return;
pModel=pVal['model'];
// ORCA ensure list correctly ordered
pModel = pModel.sort((a, b)=>(a["vendor"].localeCompare(b["vendor"])))
pModel = [ // move custom printers to top
...pModel.filter(i=>i.vendor === "Custom"),
...pModel.filter(i=>i.vendor !== "Custom")
];
let nTotal=pModel.length;
let ModelHtml={};
for(let n=0;n<nTotal;n++)
{
let OneModel=pModel[n];
let strVendor=OneModel['vendor'];
//Add Vendor Html Node
if($(".OneVendorBlock[vendor='"+strVendor+"']").length==0)
{
let sVV=strVendor;
if( sVV=="BBL" )
sVV="Bambu Lab";
if( sVV=="Custom")
sVV="Custom Printer";
if( sVV=="Other")
sVV="Orca colosseum";
let HtmlNewVendor='<div class="OneVendorBlock" Vendor="'+strVendor+'">'+
'<div class="BlockBanner">'+
' <a>'+sVV+'</a>'+
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">'+
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll('+"\'"+strVendor+"\'"+')">all</div>'+
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone('+"\'"+strVendor+"\'"+')">none</div>'+
//' </div>'+
'</div>'+
'<div class="PrinterArea"> '+
'</div>'+
'</div>';
$('#Content').append(HtmlNewVendor);
}
let ModelName=OneModel['model'];
//Collect Html Node Nozzel Html
if( !ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor]='';
ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for( let key in ModelHtml )
{
$(".OneVendorBlock[vendor='"+key+"'] .PrinterArea").append( ModelHtml[key] );
}
//Update Checkbox
for(let m=0;m<nTotal;m++)
{
let OneModel=pModel[m];
let SelectList=OneModel['nozzle_selected'];
if(SelectList!='')
{
ChooseModel(OneModel['vendor'], OneModel['model']);
}
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function scrollToVendor(vendor) {
const el = $(".OneVendorBlock[vendor='"+vendor+"']")[0];
if (el){
document.getElementById('SidebarContainer').setAttribute('open', '0');
document.getElementById('Content').scrollTo({top: el.offsetTop, behavior: "smooth"});
}
}
function SetModelSelect(vendor, model, checked) {
if (!ModelNozzleSelected.hasOwnProperty(vendor) && !checked) {
return;
}
if (!ModelNozzleSelected.hasOwnProperty(vendor) && checked) {
ModelNozzleSelected[vendor] = {};
}
let oVendor = ModelNozzleSelected[vendor];
if (oVendor.hasOwnProperty(model) || checked) {
oVendor[model] = checked;
}
UpdateVendorCheckbox(vendor)
}
function GetModelSelect(vendor, model) {
if (!ModelNozzleSelected.hasOwnProperty(vendor)) {
return false;
}
let oVendor = ModelNozzleSelected[vendor];
if (!oVendor.hasOwnProperty(model)) {
return false;
}
return oVendor[model];
}
function FilterModelList(keyword) {
//Save checkbox state
let ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
SetModelSelect(strVendor, strModel, $(OneItem).hasClass('ModelCheckBoxSelected'));
}
$('.search')[0].setAttribute("hasvalue", keyword ? "1" : "0")
let nTotal = pModel.length;
let ModelHtml = {};
let kwSplit = keyword.toLowerCase().match(/\S+/g) || [];
$('#Content').empty();
for (let n = 0; n < nTotal; n++) {
let OneModel = pModel[n];
let strVendor = OneModel['vendor'];
let search = (OneModel['name'] + '\0' + strVendor).toLowerCase();
if (!kwSplit.every(s => search.includes(s)))
continue;
//Add Vendor Html Node
if ($(".OneVendorBlock[vendor='" + strVendor + "']").length == 0) {
let sVV = strVendor;
if (sVV == "BBL")
sVV = "Bambu Lab";
if (sVV == "Custom")
sVV = "Custom Printer";
if (sVV == "Other")
sVV = "Orca colosseum";
let HtmlNewVendor = '<div class="OneVendorBlock" Vendor="' + strVendor + '">' +
'<div class="BlockBanner">' +
' <a>' + sVV + '</a>' +
' <div class="BannerBtns" onClick="ChooseVendor('+"\'"+strVendor+"\'"+')">'+
' <div class="modelCount"></div>' +
' <input type="checkbox" class="VendorCheckbox"/>'+
' </div>'+
//' <div class="BannerBtns">' +
//' <div class="ButtonStyleConfirm ButtonTypeWindow trans" tid="t11" onClick="SelectPrinterAll(' + "\'" + strVendor + "\'" + ')">all</div>' +
//' <div class="ButtonStyleRegular ButtonTypeWindow trans" tid="t12" onClick="SelectPrinterNone(' + "\'" + strVendor + "\'" + ')">none</div>' +
//' </div>' +
'</div>' +
'<div class="PrinterArea"> ' +
'</div>' +
'</div>';
$('#Content').append(HtmlNewVendor);
}
//Collect Html Node Nozzel Html
if (!ModelHtml.hasOwnProperty(strVendor))
ModelHtml[strVendor] = '';
ModelHtml[strVendor]+=CreatePrinterBlock(OneModel); // ORCA
}
//Update Nozzel Html Append
for (let key in ModelHtml) {
let obj = $(".OneVendorBlock[vendor='" + key + "'] .PrinterArea");
obj.empty();
obj.append(ModelHtml[key]);
}
//Update Checkbox
ModelSelect = $('.ModelCheckBox');
for (let n = 0; n < ModelSelect.length; n++) {
let OneItem = ModelSelect[n];
let strModel = OneItem.getAttribute("model");
let strVendor = OneItem.getAttribute("vendor");
let checked = GetModelSelect(strVendor, strModel);
if (checked)
$(OneItem).addClass('ModelCheckBoxSelected');
else
$(OneItem).removeClass('ModelCheckBoxSelected');
}
const $SidebarVendors = $('#SidebarVendors');
let SidebarHTML = "";
$(`.OneVendorBlock`).each((i, el)=>{
UpdateVendorCheckbox(el.getAttribute("vendor"));
SidebarHTML +=`<div class="SidebarItem" onclick="scrollToVendor(this.textContent)">${el.getAttribute('vendor')}</div>`;
});
$SidebarVendors.html(SidebarHTML)
const $content = $('#Content');
$content.css("padding-right", $content[0].scrollHeight > $content[0].clientHeight ? "10px" : "20px");
// let AlreadySelect=$(".ModelCheckBoxSelected");
// let nSelect=AlreadySelect.length;
// if(nSelect==0)
// {
// $("div.OneVendorBlock[vendor='"+BBL+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
// }
TranslatePage();
}
function CreatePrinterBlock(OneModel)
{
// ORCA use single functuon to create blocks to simplify code
let vendor = OneModel['vendor']
vendorName = vendor=="BBL" ? "Bambu Lab" : vendor=="Custom" ? "Generic Printer" : vendor;
let modelName = OneModel['name'];
// Most of it unneeded. this can be applied in profiles
if( vendor=="Custom")
modelName = modelName.split(" ")[1];
// these uses different case in name; seckit, ratrig, blocks
else if (modelName.toLowerCase().startsWith(vendorName.toLowerCase()))
modelName = modelName.slice(vendorName.length);
// these not matches. have to fix in profiles to reduce conditions in here;
else if (vendor == "MagicMaker" && modelName.startsWith("MM"))
modelName = modelName.slice(("MM").length);
else if (vendor == "OrcaArena")
modelName = modelName.slice(("Orca Arena").length);
else if (vendor == "RolohaunDesign" && modelName.startsWith("Rolohaun"))
modelName = modelName.slice(("Rolohaun").length);
return '<div class="PrinterBlock" onClick="ChooseModel(\''+vendor+'\',\''+OneModel['model']+'\')">'+
'<div class="PImg">'+
'<img class="ModelThumbnail" src="' + OneModel['cover'] + '" />'+
'</div>'+
'<div class="PrinterInfoMark">?</div>'+
'<div class="PrinterInfo">'+
//' <div class="title trans">Print volume</div>'+
//' <div class="value">' + OneModel['printable_height'] + '</div>'+
' <div class="title trans">Nozzle</div>'+
' <div class="value">' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '</div>'+
'</div>'+
'<div style="display: flex;">'+
' <div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>'+
' <div class="PName">'+ modelName +'</div>'+ // ><p>'+ vendorName +'</p>
'</div>'+
'</div>';
}
function SelectPrinterAll( sVendor )
{
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").addClass('ModelCheckBoxSelected');
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
let strModel = this.getAttribute("model");
SetModelSelect(sVendor, strModel, true);
});
}
function SelectPrinterNone( sVendor )
{
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").removeClass('ModelCheckBoxSelected');
$("div.OneVendorBlock[vendor='"+sVendor+"'] .ModelCheckBox").each(function() {
let strModel = this.getAttribute("model");
SetModelSelect(sVendor, strModel, false);
});
}
function ChooseVendor(sVendor) {
const $cbs = $(`.OneVendorBlock[vendor='${sVendor}'] .ModelCheckBox`);
const sel = $cbs.length && $cbs.not('.ModelCheckBoxSelected').length;
sel ? $cbs.addClass('ModelCheckBoxSelected')
: $cbs.removeClass('ModelCheckBoxSelected');
$cbs.each((i, el)=>{SetModelSelect(sVendor, el.getAttribute('model'), sel)});
}
function UpdateVendorCheckbox(sVendor) {
const $vb = $(`.OneVendorBlock[vendor='${sVendor}']`);
const $cbs = $vb.find(`.ModelCheckBox`);
const $vcb = $vb.find(`.VendorCheckbox`);
const selCount = $cbs.filter('.ModelCheckBoxSelected').length;
const allSel = selCount === $cbs.length && selCount > 0;
const nonSel = selCount === 0;
$vcb.prop({checked: allSel , indeterminate: !allSel && !nonSel});
$vb.find(".modelCount").text(selCount + " / " + $cbs.length);
}
function OnExitFilter() {
let nTotal = 0;
let ModelAll = {};
for (vendor in ModelNozzleSelected) {
for (model in ModelNozzleSelected[vendor]) {
if (!ModelNozzleSelected[vendor][model])
continue;
if (!ModelAll.hasOwnProperty(model)) {
//alert("ADD: "+strModel);
ModelAll[model] = {};
ModelAll[model]["model"] = model;
}
nTotal++;
}
}
var tSend = {};
tSend['sequence_id'] = Math.round(new Date() / 1000);
tSend['command'] = "save_userguide_models";
tSend['data'] = ModelAll;
SendWXMessage(JSON.stringify(tSend));
return nTotal;
}
//
function OnExit()
{
let ModelAll={};
let ModelSelect=$(".ModelCheckBoxSelected");
let nTotal=ModelSelect.length;
if( nTotal==0 )
{
ShowNotice(1);
return 0;
}
for(let n=0;n<nTotal;n++)
{
let OneItem=ModelSelect[n];
let strModel=OneItem.getAttribute("model");
//alert(strModel+strVendor+strNozzel);
if(!ModelAll.hasOwnProperty(strModel))
{
//alert("ADD: "+strModel);
ModelAll[strModel]={};
ModelAll[strModel]["model"]=strModel;
}
}
var tSend={};
tSend['sequence_id']=Math.round(new Date() / 1000);
tSend['command']="save_userguide_models";
tSend['data']=ModelAll;
SendWXMessage( JSON.stringify(tSend) );
return nTotal;
}
function ShowNotice( nShow )
{
if(nShow==0)
{
$("#NoticeMask").hide();
$("#NoticeBody").hide();
}
else
{
$("#NoticeMask").show();
$("#NoticeBody").show();
}
}
function CancelSelect()
{
var tSend={};
@@ -490,7 +20,6 @@ function CancelSelect()
SendWXMessage( JSON.stringify(tSend) );
}
function ConfirmSelect()
{
let nChoose=OnExitFilter();
@@ -516,7 +45,3 @@ function CreateNewPrinter()
SendWXMessage( JSON.stringify(tSend) );
}

297
resources/web/guide/24/index.html
View File

@@ -6,6 +6,7 @@
<title>引导_P21</title>
<link rel="stylesheet" type="text/css" href="../../include/global.css" /> <!-- ORCA One for all-->
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<link rel="stylesheet" type="text/css" href="../21/common.css" /> <!-- ORCA use common sources for setup guide and standalone dialog -->
<link rel="stylesheet" type="text/css" href="24.css" />
<link rel="stylesheet" type="text/css" href="../css/dark.css" />
<!-- <script type="text/javascript" src="test.js"></script> -->
@@ -13,8 +14,9 @@
<script type="text/javascript" src="../js/json2.js"></script>
<script type="text/javascript" src="../../data/text.js"></script>
<script type="text/javascript" src="../js/globalapi.js"></script>
<!-- <script type="text/javascript" src="../js/common.js"></script> -->
<script type="text/javascript" src="24.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../21/common.js"></script> <!-- ORCA use common sources for setup guide and standalone dialog -->
<script type="text/javascript" src="24.js"></script>
</head>
<body onLoad="OnInit()">
<div id="Title">
@@ -49,65 +51,33 @@
<div id="Content" class="thin-scroll">
<!--<div class="OneVendorBlock" Vendor="BBL">
<div class="BlockBanner">
<div class="BannerBtns">
<div class="ButtonStyleConfirm ButtonTypeWindow" onClick="SelectPrinterAll('BBL')">所有</div>
<div class="ButtonStyleRegular ButtonTypeWindow" onClick="SelectPrinterNone('BBL')">无</div>
<!-- EXAMPLE GENERATED CODE BLOCK
<div class="OneVendorBlock" Vendor="VendorName">
<div class="BlockBanner">
<a>VendorName</a>
<div class="BannerBtns" onClick="ChooseVendor('VendorName')" >
<div class="modelCount"></div>
<input type="checkbox" class="VendorCheckbox" />
</div>
</div>
<a>BBL-3DP</a>
</div>
<div class="PrinterArea">
<div class="PrinterBlock">
<div class="PImg"><img src="p2.jpg" /></div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel"><input id="ZZ" type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg"><img src="p1.jpg" /></div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BBL" />0.4mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BBL" />0.2mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BBL" />0.1mm nozzle</div>
</div>
</div>
</div>
<div class="OneVendorBlock" Vendor="BAMBU">
<div class="BlockBanner">
<div class="BannerBtns">
<div class="Banner-Btn-green" onClick="SelectPrinterAll('BAMBU')">所有</div>
<div class="Banner-Btn" onClick="SelectPrinterNone('BAMBU')">无</div>
<div class="PrinterArea">
<div class="PrinterBlock" onClick="ChooseModel('VendorName','ModelName')" >
<div class="PImg" >
<img class="ModelThumbnail" src="CoverPath" />
</div>
<div class="PrinterInfoMark">?</div>
<div class="PrinterInfo">
<div class="title trans">Nozzle</div>
<div class="value">nozzleInfo</div>
</div>
<div style="display: flex;">
<div class="ModelCheckBox" vendor="' +vendor+ '" model="'+OneModel['model']+'"></div>
<div class="PName">modelName</div>
</div>
</div>
</div>
<a>BBL-3DP</a>
</div>
<div class="PrinterArea">
<div class="PrinterBlock">
<div class="PImg"><img src="p2.jpg" /></div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V4NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
</div>
<div class="PrinterBlock">
<div class="PImg"><img src="p1.jpg" /></div>
<div class="PName">BBL-3DP-V4NORMAL</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.4" vendor="BAMBU" />0.4mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.2" vendor="BAMBU" />0.2mm nozzle</div>
<div class="pNozzel"><input type="checkbox" model="BBL-3DP-V5NORMAL" nozzel="0.1" vendor="BAMBU" />0.1mm nozzle</div>
</div>
</div>
</div>-->
-->
</div>
<div id="AcceptArea">
@@ -126,215 +96,10 @@
</div>
</div>
</div>
</body>
<script>
const SearchBox = document.querySelector('.searchTerm');
document.onkeydown = function (event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e.keyCode == 27)
ClosePage();
// 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");
initKeyEvents(true); // close on ESC
InitGlobalVariables();
</script>
</html>