1import get_wp_data from 'https://www.sswagger.hk/wp-webcomp/getdata_wp.php'; 2 3class PlaceMenu extends HTMLElement { 4 5 6 constructor() { 7 8 super(); 9 10 //console.log('Menu_data'); 11 const shadow = this.attachShadow({ 12 mode: 'open' 13 }); 14 const style = document.createElement('style'); 15 16 const wp_html= Promise.resolve(get_wp_data()).then((result)=>{ 17 const mobileheader_html=result.mobileheader_data; 18 const mobilemenu_html=result.mobilemenu_data; 19 const desktopheader_html=result.desktopheader_data; 20 //const footer_html=result.footer_data; 21 22 23 const webcomponents_header= document.createElement('div'); 24 webcomponents_header.className="webcomponents_header layout--boxed"; 25 26 const mobileheader = document.createElement('div'); 27 mobileheader.className="post-header"; 28 29 const mobilemenu = document.createElement('div') 30 mobilemenu.id = "page"; 31 32 33 34 const desktopheader = document.createElement('div'); 35 desktopheader.className="warapper"; 36 37 38 39 desktopheader.appendChild(desktopheader_html); 40 mobileheader.appendChild(mobileheader_html); 41 mobilemenu.appendChild(mobilemenu_html); 42 webcomponents_header.appendChild(mobileheader); 43 webcomponents_header.appendChild(mobilemenu); 44 webcomponents_header.appendChild(desktopheader); 45 shadow.appendChild(webcomponents_header); 46 }).then( 47 ()=>{ 48 //let fontFaceSheet = new CSSStyleSheet(); 49 //fontFaceSheet.replaceSync(`html {font:0.875em/1.71429 "PT Sans", sans-serif;}`); 50 //document.adoptedStyleSheets = [...document.adoptedStyleSheets, fontFaceSheet]; 51 let fontFaceSheet = document.createElement('style'); 52 fontFaceSheet.type = 'text/css'; 53 fontFaceSheet.innerText ='html {font:0.875em/1.71429 "PT Sans", sans-serif;}'; 54 document.head.appendChild(fontFaceSheet); 55 listnner(); 56 }); 57 58 59 60 style.textContent = ` 61 @import url("https://www.sswagger.hk/wp-content/themes/bucket/theme-content/css/style.css"); 62 @import url("https://www.sswagger.hk/wp-content/themes/bucket/theme-content/css/style-2.css"); 63 @import url("https://www.sswagger.hk/wp-content/plugins/nmg-sharebar/css/nmgsharebar.css"); 64 :host html {font:0.875em/1.71429 "PT Sans", sans-serif;} 65 :host { 66 --ssw-theme-color: #164468; 67 --ssw-share-icon-bg: #00df78; 68 --ssw-share-hover-bg: #ffff00; 69 --customize-menu-color: #000; 70 --customize-menu-hcolor: #ffaeb6; 71 --customize-menu-font-color: #fff; 72 --customize-menu-font-hcolor: #fff; 73 --customize-submenu-color: #000; 74 --customize-submenu-hcolor: #000; 75 --customize-submenu-border-color: #000; 76 --customize-current-menu-color: #ffaeb6; 77 --customize-current-menu-font-color: #fff; 78 --mobile-customize-menu-color: #000; 79 --mobile-customize-menu-border-color: #f7cacf; 80 --mobile-customize-menu-exp-color: #F1A7AF; 81 --mobile-customize-submenu-color: #000; 82 --mobile-current-menu-color: #000; 83 --mobile-current-menu-font-color: #fff; 84 } 85 :host html{ 86 font: 0.875em/1.71429 "PT Sans", sans-serif; 87 } 88 :host .navigation--main{ 89 background:#00df78; 90 } 91 :host .navigation--main.nav_show2{ 92 background:#164468; 93 } 94 :host .webcomponents_header{ 95 position:relative; 96 z-index:999999; 97 } 98 :host #page{ 99 position: relative; 100 z-index: 0; 101 } 102 103 :host #menu-main-2{ 104 display:none; 105 } 106 107 :host .navigation--main { 108 109 } 110 :host .nav--main>li a { 111 112 } 113 :host .post-header .navigation--main.nav_show2 .search-form{ 114 display:block; 115 } 116 :host #menu-main-1.nav--main li.hidden:hover > ul.sub-menu { 117 display: unset !important; 118 opacity: 1 !important; 119 } 120 :host .wrapper{min-height:auto;} 121 :host .search-wrapper{ 122 margin-bottom: 0; 123 } 124 :host .container { 125 max-width: 1270px; 126 } 127 :host #menu-home{ 128 display:none; 129 } 130 :host .btn.search-submit{ 131 padding:0; 132 } 133 :host .pixcode--icon.circle{ 134 display:flex; 135 justify-content: center; 136 align-items: center; 137 } 138 `; 139 140 141 shadow.appendChild(style); 142 // shadow.appendChild(webcomponents_header); 143 144 145 // listnner(); 146 147 // setTimeout(()=>{ 148 //<!-- async () => { --> 149 const listnner = ()=>{ 150 //const hot_tags = this.shadowRoot.querySelector('div.search_hot_tag'); --> 151 152 const mobile_nav = this.shadowRoot.querySelector('nav.navigation'); 153 // console.log(search_query); 154 //mobile_nav.appendChild(hot_tags); 155 156 const submenu = this.shadowRoot.querySelectorAll('#menu-main .menu-item.menu-item-has-children.nav__item--relative'); 157 const arrowhtml= `<div class="arrow_box"><i class="arrow d_arrow"></i></div>`; 158 submenu.forEach((e,index)=>{ 159 // console.log(submenu); 160 e.innerHTML += arrowhtml; 161 }); 162 163 const submenutext = this.shadowRoot.querySelectorAll('#menu-main .menu-item.menu-item-has-children.nav__item--relative .sub-menu a'); 164 const beforetexthtml= `<strong>--</strong>`; 165 submenutext.forEach((e,index)=>{ 166 // console.log(submenu); 167 e.innerHTML += beforetexthtml; 168 }); 169 170 const doc = this.shadowRoot.querySelector('.fixed_nav'); 171 // console.log(this.shadowRoot.innerHTML); 172 doc.addEventListener("click",(e)=>{ 173 // console.log(this.shadowRoot); 174 this.shadowRoot.querySelector('.webcomponents_header').classList.toggle("navigation--is-visible"); 175 this.shadowRoot.querySelector('.post-header').classList.toggle("pull_left"); 176 this.shadowRoot.querySelector('.fixed_nav').classList.toggle("close_nav"); 177 // this.shadowRoot.querySelector('.wc-menu').classList.toggle("navigation--is-visible"); 178 // this.shadowRoot.querySelector('.post-header').classList.toggle("pull_left"); 179 // this.shadowRoot.querySelector('.fixed_nav').classList.toggle("close_nav"); 180 181 }); 182 const moblie_search_btn = this.shadowRoot.querySelector('.share_search'); 183 moblie_search_btn.addEventListener("click",(e)=>{ 184 this.shadowRoot.querySelector('.share_search').classList.toggle("nav_close"); 185 this.shadowRoot.querySelector('.navigation--main').classList.toggle("nav_show2"); 186 }); 187 188 const moblie_submenu = this.shadowRoot.querySelectorAll('.arrow_box'); 189 moblie_submenu.forEach((e,index) =>{ 190 e.addEventListener("click",(e)=>{ 191 moblie_submenu[index].previousElementSibling.style.display!='block'? moblie_submenu[index].previousElementSibling.style.display ='block': moblie_submenu[index].previousElementSibling.style.display='none'; 192 moblie_submenu[index].childNodes[0].classList.toggle('t_arrow'); 193 }); 194 }); 195 196 const hot_tag = this.shadowRoot.querySelectorAll('.btn--tertiary'); 197 // console.log(hot_tag); 198 hot_tag.forEach((e,index)=>{ 199 200 e.addEventListener('click', (e)=>{ 201 var word='https://www.sswagger.hk/s/' 202 word+=hot_tag[index].text+'?from=wordpress_search'; 203 // console.log("hot_tag"); 204 window.open(word,'_blank'); 205 }); 206 }); 207 208 const search_form = this.shadowRoot.querySelectorAll('.form-search'); 209 search_form.forEach((e,index)=>{ 210 211 var div_e = document.createElement('div'); 212 div_e.classList.add('form-search'); 213 div_e.innerHTML = search_form[index].innerHTML; 214 search_form[index].parentNode.replaceChild(div_e, search_form[index]); 215 }); 216 217 const search_btn = this.shadowRoot.querySelectorAll('.search-submit'); 218 const search_input = this.shadowRoot.querySelectorAll('.search-query'); 219 search_input.forEach((e,index)=>{ 220 // console.log(e,search_btn); 221 search_btn[index].addEventListener('click', (e)=>{ 222 // console.log(e); 223 var word='https://www.sswagger.hk/s/'
224 search_input[index].value !=''? word+=search_input[index].value+'?from=wordpress_search' : word=document.URL; 225 if(word !=document.URL){ 226 console.log(word); 227 window.open(word,'_blank'); 228 }else{console.log(word);} 229 }); 230 }); 231 232 const pageSlug = document.location.href; 233 //console.log(pageSlug); 234 const menuURL = this.shadowRoot.querySelectorAll('li.menu-item>a'); 235 menuURL.forEach((e,index)=>{ 236 //if(index!=0){ 237 if(e.href.indexOf(pageSlug)!=-1){ 238 e.parentElement.classList.add('current-menu-item') 239 } 240 //} 241 }); 242 243 const hot_tags_list = this.shadowRoot.querySelector('.header-bar-container div.search_hot_tag'); 244 const header_tag_btns = this.shadowRoot.querySelectorAll('.header-bar-container div.search_hot_tag .btn-list .btn--tertiary'); 245 const search_query = this.shadowRoot.querySelector('.header-bar-container input.search-query'); 246 search_query.addEventListener('focus',(e)=>{ 247 // console.log('focus',header_tag_btns); 248 hot_tags_list.style.display="block"; 249 header_tag_btns.forEach((e,index)=>{ 250 e.addEventListener('click', (e)=>{ 251 var word='https://www.sswagger.hk/keyword/' 252 word+=hot_tag[index].text; 253 window.open(word,'_blank'); 254 }); 255 }); 256 }); 257 258 search_query.addEventListener('focusout',(e)=>{ 259 setTimeout(()=>{hot_tags_list.style.display="none"},500); 260 }); 261 262 263 264 265 266 267 268 269 270 } 271 272 273 274 } 275 276 277 278} 279 280 281class PlaceFooter extends HTMLElement { 282 283 284 constructor() { 285 286 super(); 287 //console.log('footer_data'); 288 // console.log(this.get_footer_data().then()); 289 const footer_html=Promise.resolve(get_wp_data()); 290 const shadow = this.attachShadow({ 291 mode: 'open' 292 }); 293 const style = document.createElement('style'); 294 295 const webcomponents_footer= document.createElement('div'); 296 webcomponents_footer.className="layout--boxed"; 297 footer_html.then(function(result) { 298 const footer_html=result.footer_data; 299 webcomponents_footer.appendChild(footer_html); 300 }); 301 302 303 style.textContent = ` 304 @import url("https://www.sswagger.hk/wp-content/themes/bucket/theme-content/css/style.css"); 305 @import url("https://www.sswagger.hk/wp-content/themes/bucket/theme-content/css/style-2.css"); 306 @import url("https://www.sswagger.hk/wp-content/plugins/nmg-sharebar/css/nmgsharebar.css"); 307 :host { 308 --customize-menu-color: #000; 309 --customize-menu-hcolor: #ffaeb6; 310 --customize-menu-font-color: #fff; 311 --customize-menu-font-hcolor: #fff; 312 --customize-submenu-color: #000; 313 --customize-submenu-hcolor: #000; 314 --customize-submenu-border-color: #000; 315 --customize-current-menu-color: #ffaeb6; 316 --customize-current-menu-font-color: #fff; 317 --mobile-customize-menu-color: #000; 318 --mobile-customize-menu-border-color: #f7cacf; 319 --mobile-customize-menu-exp-color: #F1A7AF; 320 --mobile-customize-submenu-color: #000; 321 --mobile-current-menu-color: #000; 322 --mobile-current-menu-font-color: #fff; 323 } 324 :host #page{ 325 position: relative; 326 z-index: 0; 327 } 328 :host .footer .hd .award img { 329 height: auto !important; 330 } 331 :host .navigation--main { 332 333 } 334 :host .nav--main>li a { 335 color: #ffffff; 336 } 337 :host .nav--main li.hidden:hover > ul.sub-menu { 338 display: unset !important; 339 opacity: 1 !important; 340 } 341 :host .wrapper{min-height:auto;} 342 :host .container { 343 max-width: 1270px; 344 } 345 `; 346 347 348 shadow.appendChild(style); 349 shadow.appendChild(webcomponents_footer); 350 //console.log('footer_data'); 351 } 352 // async get_footer_data(){ 353 // const res= await fetch('https://www.sswagger.hk/webcomponents_header_footer/'); 354 // const data= await res.text(); 355 // const parser = await new DOMParser(); 356 // const doc = await parser.parseFromString(data, "text/html"); 357 // const footer_data=await doc.querySelector('.site__footer').cloneNode(true); 358 //console.log('footer_data'); 359 // return footer_data 360 // } 361 362} 363 364// Define the new element 365customElements.define('ssw-header', PlaceMenu); 366customElements.define('ssw-footer', PlaceFooter);
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.