1class top3_subsection extends HTMLElement{#model;#settings;constructor(){super();this.shadow_root=this.attachShadow({mode:"open"});this.shadow_root.adoptedStyleSheets=this.css();this.shadow_root.innerHTML=this.html()}set settings(settings){this.#settings=settings}set subsection_model(subsection_model){if(!(subsection_model instanceof top3_subsection_model)){throw new Error("Invalid top3 subsection model")}this.#model=subsection_model;this.render()}render(){this.shadow_root.getElementById("title").innerText=this.#model.get_title();this.shadow_root.getElementById("see_all").innerText=PHP2JS.texts.TEXT_SHOW_ALL;let link_prefix="c";if(this.#model.get_link_page()==="specials"){link_prefix="s"}this.shadow_root.getElementById("subsection_header").href=this.#settings.link_prefix+"/"+link_prefix+this.#model.get_category_id()+".htm";this.#model.get_products().forEach(product_model=>{let top3_product=document.createElement("top3-product");top3_product.settings=this.#settings;top3_product.product=product_model;this.shadow_root.getElementById("list").appendChild(top3_product)})}html(){return`\n\t\t<a id="subsection_header">\n\t\t\t<h2 id="title"></h2>\n\t\t\t<span id="see_all"></span>\n\t\t</a>\n\t\t<div id="list"></div>`}css(){const sheet=new CSSStyleSheet;sheet.replaceSync(`\n\t\t\t@keyframes slide {\n\t\t\t\t0% {\n\t\t\t\t\tbackground-position: 0 50%;\n\t\t\t\t}\n\t\t\t\t50% {\n\t\t\t\t\tbackground-position: 100% 50%;\n\t\t\t\t}\n\t\t\t\t100% {\n\t\t\t\t\tbackground-position: 0 50%;\n\t\t\t\t}\n\t\t\t}\n\t\t\t\n\t\t\t:host {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: column;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t:host([data-placeholder="true"]) #title {\n\t\t\t\theight: 24px;\n\t\t\t\tbackground: linear-gradient(131deg, rgba(235,235,235,1) 0%, rgba(190,190,190,.6) 100%);\n\t\t\t\tborder-radius: 15px;\n\t\t\t\tdisplay: inline-block;\n\t\t\t\twidth: 150px;\n\t\t\t}\n\n\t\t\t:host([data-placeholder="true"]) #list {\n\t\t\t\tbackground: linear-gradient(45deg, rgba(235,235,235,1) 40%, rgba(150,150,150,.5) 60%);\n\t\t\t\tborder-radius: 15px;\n\t\t\t\tbackground-size: 400% 400%;\n\t\t\t\theight: 190px;\n\t\t\t\twidth: 100%;\n\t\t\t\tanimation: slide 3s ease infinite;\n\t\t\t}\n\t\t\n\t\t\t#list {\n\t\t\t\tdisplay: grid;\n\t\t\t\tgrid-template-columns: repeat(3, minmax(0, 1fr));\n\t\t\t\tgap: 30px;\n\t\t\t\tborder-radius: 10px;\n\t\t\t\tborder: 1px solid #dfdede;\n\t\t\t\tbackground-color: #FFF;\n\t\t\t\twidth: 100%;\n\t\t\t\tflex-grow: 1;\n\t\t\t\tpadding: 20px;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-content: center;\n\t\t\t}\n\t\t\n\t\t\t#subsection_header {\n\t\t\t\tdisplay: flex;\n\t\t\t\tflex-direction: row;\n\t\t\t\tjustify-content: space-between;\n\t\t\t\talign-items: center;\n\t\t\t\twidth: 100%;\n\t\t\t\tmargin-bottom: 5px;\n\t\t\t\ttext-decoration: none;\n\t\t\t}\n\t\t\n\t\t\th2 {\n\t\t\t\tfont-size: 18px;\n\t\t\t\ttext-transform: uppercase;\n\t\t\t\tcolor: #686868;\n\t\t\t\tmargin: 0;\n\t\t\t\tfont-weight: normal;\n\t\t\t}\n\t\t\n\t\t\t#see_all {\n\t\t\t\ttext-decoration: none;\n\t\t\t\tbackground-image: url(https://cdn.skatepro.com/icon/font/awesome/angle_right.svg);\n\t\t\t\tbackground-repeat: no-repeat;\n\t\t\t\tbackground-position: 100% 72%;\n\t\t\t\tbackground-size: 10px;\n\t\t\t\tpadding-right: 20px;\n\t\t\t\tcolor: #4071A1;\n\t\t\t\tfont-size: 14px;\n\t\t\t}\n\t\t`);return[sheet]}}customElements.define("top3-subsection",top3_subsection);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.