diff --git a/resources/web/guide/21/21.css b/resources/web/guide/21/21.css index 6ed2682533..7bef772e5f 100644 --- a/resources/web/guide/21/21.css +++ b/resources/web/guide/21/21.css @@ -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 */ \ No newline at end of file diff --git a/resources/web/guide/21/21.js b/resources/web/guide/21/21.js index 5ad3a8b219..4cd9286bdf 100644 --- a/resources/web/guide/21/21.js +++ b/resources/web/guide/21/21.js @@ -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'+ -'
'+ -' '+sVV+''+ -'
'+ -'
' + -' '+ -'
'+ -//'
'+ -//'
all
'+ -//'
none
'+ -//'
'+ -'
'+ -'
'+ -'
'+ -''; - - $('#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{ - UpdateVendorCheckbox(el.getAttribute("vendor")); - SidebarHTML +=`
${el.getAttribute('vendor')}
`; - }); - $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 = '
' + - '
' + - ' ' + sVV + '' + - '
'+ - '
' + - ' '+ - '
'+ - //'
' + - //'
all
' + - //'
none
' + - //'
' + - '
' + - '
' + - '
' + - '
'; - - $('#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 +=`
${el.getAttribute('vendor')}
`; - }); - $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 '
'+ - '
'+ - ''+ - '
'+ - '
?
'+ - '
'+ - //'
Print volume
'+ - //'
' + OneModel['printable_height'] + '
'+ - '
Nozzle
'+ - '
' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '
'+ - '
'+ - '
'+ - '
'+ - '
'+ modelName +'
'+ // >

'+ vendorName +'

- '
'+ - '
'; -} - -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(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 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 '
' + + '
' + + ' ' + alt + '' + + '
'+ + '
' + + ' '+ + '
'+ + '
' + + '
' + + '
' + + '
'; +} + +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 '
'+ + '
'+ + ' '+ + '
'+ + '
?
'+ + '
'+ + '
Nozzle
'+ + '
' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '
'+ + '
'+ + '
'+ + '
'+ + '
'+ modelName +'
'+ // >

'+ vendorName +'

+ '
'+ + '
'; +} + +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 +=`
${el.getAttribute('vendor')}
`; + }); + $('#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(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; + //} + }; +} diff --git a/resources/web/guide/21/index.html b/resources/web/guide/21/index.html index a0fe7d0072..258b957756 100644 --- a/resources/web/guide/21/index.html +++ b/resources/web/guide/21/index.html @@ -6,6 +6,7 @@ 引导_P21 + @@ -14,7 +15,8 @@ - + +
@@ -49,93 +51,33 @@
- +-->
@@ -153,212 +95,10 @@
- - + diff --git a/resources/web/guide/22/22.css b/resources/web/guide/22/22.css index 20e606e777..29d03fd42d 100644 --- a/resources/web/guide/22/22.css +++ b/resources/web/guide/22/22.css @@ -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; } diff --git a/resources/web/guide/22/22.js b/resources/web/guide/22/22.js index b6bf64ee11..514770bb59 100644 --- a/resources/web/guide/22/22.js +++ b/resources/web/guide/22/22.js @@ -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'+sModel['model']+''; - } - - $('#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=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=''; - - 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=''; - - 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=''; - - $("#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=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-1 ) - { - DefaultMaterialString+=OneMode['materials']+';'; - } - } - - let DefaultMaterialArray=DefaultMaterialString.split(';'); - //alert(DefaultMaterialString); - - //Filament - let FilaNodes=$("#ItemBlockArea .MItem"); - let nFilament=FilaNodes.length; - for(let m=0;m-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 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; +} \ No newline at end of file diff --git a/resources/web/guide/22/common.js b/resources/web/guide/22/common.js new file mode 100644 index 0000000000..c49fe5a273 --- /dev/null +++ b/resources/web/guide/22/common.js @@ -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'+sModel['model']+''; + } + + $('#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=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=''; + + 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=''; + + 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=''; + + $("#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=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-1 ) + { + DefaultMaterialString+=OneMode['materials']+';'; + } + } + + let DefaultMaterialArray=DefaultMaterialString.split(';'); + //alert(DefaultMaterialString); + + //Filament + let FilaNodes=$("#ItemBlockArea .MItem"); + let nFilament=FilaNodes.length; + for(let m=0;m-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 { + 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 + }); +} \ No newline at end of file diff --git a/resources/web/guide/22/index.html b/resources/web/guide/22/index.html index cda89a68a8..ac93b92bca 100644 --- a/resources/web/guide/22/index.html +++ b/resources/web/guide/22/index.html @@ -6,6 +6,7 @@ 引导_P21 + @@ -14,6 +15,7 @@ + @@ -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(); diff --git a/resources/web/guide/23/23.css b/resources/web/guide/23/23.css index 596ffe10dc..16b372b08a 100644 --- a/resources/web/guide/23/23.css +++ b/resources/web/guide/23/23.css @@ -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; } \ No newline at end of file diff --git a/resources/web/guide/23/23.js b/resources/web/guide/23/23.js index 8649f7cd41..e1d73c053f 100644 --- a/resources/web/guide/23/23.js +++ b/resources/web/guide/23/23.js @@ -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'+sModel['model']+''; - } - - $('#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=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=''; - - 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=''; - - 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=''; - - $("#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=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=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引导_P21 + @@ -13,6 +14,7 @@ + @@ -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(); diff --git a/resources/web/guide/24/24.css b/resources/web/guide/24/24.css index a635ff7847..641df90f61 100644 --- a/resources/web/guide/24/24.css +++ b/resources/web/guide/24/24.css @@ -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; } \ No newline at end of file diff --git a/resources/web/guide/24/24.js b/resources/web/guide/24/24.js index 5ec0c60197..74a03db7b9 100644 --- a/resources/web/guide/24/24.js +++ b/resources/web/guide/24/24.js @@ -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'+ -'
'+ -' '+sVV+''+ -'
'+ -'
' + -' '+ -'
'+ -//'
'+ -//'
all
'+ -//'
none
'+ -//'
'+ -'
'+ -'
'+ -'
'+ -''; - - $('#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{ - UpdateVendorCheckbox(el.getAttribute("vendor")); - SidebarHTML +=`
${el.getAttribute('vendor')}
`; - }); - $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 = '
' + - '
' + - ' ' + sVV + '' + - '
'+ - '
' + - ' '+ - '
'+ - //'
' + - //'
all
' + - //'
none
' + - //'
' + - '
' + - '
' + - '
' + - '
'; - - $('#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 +=`
${el.getAttribute('vendor')}
`; - }); - $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 '
'+ - '
'+ - ''+ - '
'+ - '
?
'+ - '
'+ - //'
Print volume
'+ - //'
' + OneModel['printable_height'] + '
'+ - '
Nozzle
'+ - '
' + OneModel['nozzle_diameter'].replaceAll(";", " · ") + '
'+ - '
'+ - '
'+ - '
'+ - '
'+ modelName +'
'+ // >

'+ vendorName +'

- '
'+ - '
'; -} - -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引导_P21 + @@ -13,8 +14,9 @@ - - + + +
@@ -49,65 +51,33 @@
- +-->
@@ -126,215 +96,10 @@
- - +