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);
Some Diamond Painting kits are classified as Special Shape Paintings. These are canvases that use a drill that is unique in shape or material. A majority of these are Partials. Crystal or Rhinestone drills are the most popular form of Special Shape Paintings.
Special Shape Drill DP Kits
4209 Products
