const TAG = 'spz-custom-smart-search-location';
const SMART_PRODUCR_SEARCH_WRAP_CLASSNAME = 'app-smart-product-search-wrap';
const THEME_NAME = window.SHOPLAZZA.theme.merchant_theme_name;
const BREAKPOINT = 960;
const DELAY = 300;
class SpzCustomSmartSearchLocation extends SPZ.BaseElement {
constructor(element) {
super(element);
this.mobileHeaderPluginParentEle = null;
}
static deferredMount() {
return false;
}
isLayoutSupported(layout) {
return layout == SPZCore.Layout.LOGIC;
}
buildCallback() {
this.init();
this.listenerResize();
}
init() {
// PC-end not load
if (this.isDesktop()) {
return;
}
if (!window.__isLoadAppSmartSearch__) {
this.initSmartSearch();
console.log('__isLoadAppSmartSearch__');
}
// B-end must reload
if (window.self === window.top && !window.__isLoadAppSmartSearch__) {
window.__isLoadAppSmartSearch__ = true;
}
}
initSmartSearch() {
if (this.hasMobileUpperRightPlugin()) {
this.showMobileSmartSearch();
} else {
this.addMobileSmartSearch();
}
}
listenerResize() {
window.removeEventListener('resize', window.smartSearchResizeCallback);
window.smartSearchResizeCallback = SPZCore.Types.debounce(
this.win,
() => {
this.init();
},
DELAY
);
window.addEventListener('resize', window.smartSearchResizeCallback);
}
isDesktop() {
const mediaQueryList = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
return mediaQueryList.matches;
}
hasMobileUpperRightPlugin() {
return !['geek', 'flash', 'boost'].includes(THEME_NAME.toLocaleLowerCase());
}
showMobileSmartSearch() {
this.mobileHeaderPluginParentEle = this.getMobileHeaderPluginParentEle();
this.setMobileHeaderIconsPluginStyle(this.mobileHeaderPluginParentEle);
}
getMobileHeaderPluginParentEle() {
const MOBILE_HEADER_PLUGIN_PARENT_ELE_MAP = {
nova: '.header__mobile #header__plugin-container',
hero: '.header__icons .tw-flex.tw-justify-end.tw-items-center.tw-space-x-7',
onePage: '.header__mobile #header__plugin-container',
wind: '#header-icons .flex.justify-end.items-center',
eva: '#header__icons .plugin_content'
};
const headerPluginParentSelector = this.combineMultipleSelectors(
Object.values(MOBILE_HEADER_PLUGIN_PARENT_ELE_MAP)
);
return document.querySelector(headerPluginParentSelector);
}
setMobileHeaderIconsPluginStyle(pluginParentEle) {
if (!pluginParentEle) {
return;
}
const containHidden = pluginParentEle.classList.contains('md:hidden');
const containTwHidden = pluginParentEle.classList.contains('md:tw-hidden');
if (containHidden || containTwHidden) {
Array.from(pluginParentEle.children).forEach((pluginElement) => {
if (!this.hasSmartSearchPlugin(pluginElement)) {
pluginElement.style.display = 'none';
}
});
pluginParentEle.classList.remove('md:hidden', 'md:tw-hidden');
} else {
const smartSearchPluginElement = Array.from(pluginParentEle.children).find(
(pluginElement) => {
return this.hasSmartSearchPlugin(pluginElement);
}
);
smartSearchPluginElement.style.display = 'block';
}
}
hasSmartSearchPlugin(pluginElement) {
return (
pluginElement.classList.contains(`${SMART_PRODUCR_SEARCH_WRAP_CLASSNAME}`) ||
pluginElement.querySelectorAll(`.${SMART_PRODUCR_SEARCH_WRAP_CLASSNAME}`).length > 0
);
}
addMobileSmartSearch() {
this.mobileHeaderIconsEle = this.getMobileHeaderIconsEle();
this.smartSearchWrapEle = this.getSmartSearchWrapEle();
this.appendSmartSearchToHeader();
}
getMobileHeaderIconsEle() {
// Must be the parent element of the plugin
const MOBILE_HEADER_ICONS_ELE_MAP = {
geek: '#header-mobile-container .flex.items-center.justify-end.flex-shrink-0',
flash: '#header-layout .header__icons',
boost: '.header__mobile-bottom .tw-flex.tw-items-center.tw-justify-end.tw-flex-1'
};
const headerIconsSelector = this.combineMultipleSelectors(
Object.values(MOBILE_HEADER_ICONS_ELE_MAP)
);
return document.querySelector(headerIconsSelector);
}
getSmartSearchWrapEle() {
const smartSearchWrapEle = document.querySelector(this.getSmartSearchWrapSelector());
if (!smartSearchWrapEle) {
return null;
}
return smartSearchWrapEle;
}
appendSmartSearchToHeader() {
if (!this.smartSearchWrapEle) {
return;
}
this.mobileHeaderIconsEle.insertAdjacentElement('afterbegin', this.smartSearchWrapEle);
}
getSmartSearchWrapSelector() {
const PLUGIN_POSITION = {
DRAWER: 'drawer',
HEADER_TOP: 'headerTop'
};
// only one this plugin of ancestor element
const MOBILE_PLUGIN_POSITION_ELE_MAP = {
[PLUGIN_POSITION.DRAWER]: {
geek: '#header-menu-mobile #menu-drawer',
flash: '#menu-drawer .plugin__header-content',
boost: '.header__drawer'
},
[PLUGIN_POSITION.HEADER_TOP]: {
geek: '#header-menu-mobile #menu-drawer',
flash: '#menu-drawer .plugin__header-content',
boost: '.header-content .logo-wrap'
}
};
const MbPluginPositionInTheme = [
...Object.values(MOBILE_PLUGIN_POSITION_ELE_MAP[PLUGIN_POSITION.DRAWER]),
...Object.values(MOBILE_PLUGIN_POSITION_ELE_MAP[PLUGIN_POSITION.HEADER_TOP])
];
return Object.values(MbPluginPositionInTheme).reduce((pre, ancestor) => {
if (pre === '') {
return `${ancestor} .app-smart-product-search-wrap`;
}
if (pre.includes(ancestor)) {
return pre;
}
return `${pre},${ancestor} .app-smart-product-search-wrap`;
}, '');
}
combineMultipleSelectors(selectorList) {
return selectorList.reduce((pre, selector) => {
if (pre === '') {
return `${selector}`;
}
if (pre.includes(selector)) {
return pre;
}
return `${pre},${selector}`;
}, '');
}
}
SPZ.defineElement(TAG, SpzCustomSmartSearchLocation);
A tool that comes in your kit, or can be purchased separately, that holds the diamonds while you Diamond Paint. Gently shaking the tray from side to side will separate, straighten, and flip the drills to make them easier to pick up.