onHeaderNavigationItemClick(cvc)}
/>
)
}
return(
onSetSearchPhrase(e)}/>
{categoryTreeHeaderDisplay}
onCategoryPanleItemClick(ccl,cvc)}
onGoBackClick={goBack}
/>
{tagCloudDisplay}
)
}
function CategoryTreeHeader(props){
const [ categories, setCategories ] = useState(props.currentViewedCategories)
React.useEffect(() => {
const newCurrentViewedCategories = props.currentViewedCategories;
setCategories(newCurrentViewedCategories);
},[props.currentViewedCategories,props.currentCategoryLevel])
function onHeaderNavigationItemClick(cvc,index){
props.onHeaderNavigationItemClick(cvc);
const newCategories = categories;
newCategories.length = index + 1;
setCategories(newCategories)
const catLink = cvc.id === "0" ? "/browse/" : "/browse/cat/"+cvc.id+"/order/latest/"
window.location.href = catLink;
}
let categoryTreeHeaderNavigationDisplay;
if (categories.length > 0){
categoryTreeHeaderNavigationDisplay = categories.map((cvc,index) =>{
let title = "/", titleHoverElement = {cvc.title};
if (categories.length === index + 1){
title = cvc.title;
titleHoverElement = '';
}
return (
onHeaderNavigationItemClick(cvc,index)}>
{title}
{titleHoverElement}
)
})
}
return (
)
}
function CategoryPanelsContainer(props){
/* STATE */
const rootListingPanel = {categoryId:0,categories:props.categoryTree}
const storeListingPanel = {categoryId:-1,categories:window.config.domains}
- console.log(window.config.domains);
+
let initialRootCategoryPanels = [storeListingPanel,rootListingPanel];
if (window.is_show_in_menu === 1) initialRootCategoryPanels = [storeListingPanel,rootListingPanel];
let initialPanelsValue = initialRootCategoryPanels;
if (props.currentViewedCategories.length > 0) initialPanelsValue = initialRootCategoryPanels.concat(props.currentViewedCategories);
const [ panels, setPanels ] = useState(initialPanelsValue);
const [ containerWidth, setContainerWidth ] = useState(document.getElementById('category-tree-container').offsetWidth);
const [ sliderWidth, setSliderWidth ] = useState(containerWidth * panels.length);
const [ sliderHeight, setSliderHeight ] = useState();
let currentCategoryLevel = props.currentCategoryLevel;
if (window.is_show_in_menu === 1) currentCategoryLevel += 1;
const [ sliderPosition, setSliderPosition ] = useState(currentCategoryLevel * containerWidth);
let initialShowBackButtonValue = true;
if (window.is_show_in_menu === 0){ if (props.currentCategoryLevel === 0) initialShowBackButtonValue = false; }
else if (window.is_show_in_menu === 1){ if (props.currentCategoryLevel === -1) initialShowBackButtonValue = false; }
const [ showBackButton, setShowBackButton ] = useState(initialShowBackButtonValue);
/* COMPONENT */
React.useEffect(() => { updateSlider() },[props.currentCategoryLevel,props.currentViewedCategories])
React.useEffect(() => { updatePanlesOnSearch() },[props.searchMode,props.searchPhrase])
// update slider
function updateSlider(){
const trimedPanelsArray = [...initialRootCategoryPanels,...props.currentViewedCategories];
if (props.searchMode === false ){
let currentCategoryLevel = props.currentCategoryLevel;
if (window.is_show_in_menu) currentCategoryLevel = props.currentCategoryLevel + 1;
trimedPanelsArray.length = currentCategoryLevel + 1;
}
setPanels(trimedPanelsArray);
let currentCategoryLevel = props.currentCategoryLevel;
if (window.is_show_in_menu === 1) currentCategoryLevel += 1;
const newSliderPosition = currentCategoryLevel * containerWidth;
setSliderPosition(newSliderPosition);
}
// update panels on search
function updatePanlesOnSearch(){
const newPanels = [...initialRootCategoryPanels,...props.currentViewedCategories];
const newSliderWidth = containerWidth * newPanels.length;
setPanels(newPanels);
setSliderWidth(newSliderWidth);
}
// on category select
function onCategorySelect(c){
const newCurrentCategoryLevel = props.currentCategoryLevel + 1;
const trimedPanelsArray = panels;
trimedPanelsArray.length = newCurrentCategoryLevel;
const newPanels = [...trimedPanelsArray,{categoryId:c.id,categories:ConvertObjectToArray(c.children)}];
setPanels(newPanels);
const newSliderWidth = containerWidth * newPanels.length;
setSliderWidth(newSliderWidth);
const newSliderPosition = newCurrentCategoryLevel * containerWidth;
setSliderPosition(newSliderPosition);
let trimedCurrentViewedCategoriesArray = []
if (props.currentViewedCategories.length > 0) {
trimedCurrentViewedCategoriesArray = props.currentViewedCategories;
trimedCurrentViewedCategoriesArray.length = props.currentCategoryLevel;
}
const newCurrentViewedCategories = [
...trimedCurrentViewedCategoriesArray,
{...c, level:newCurrentCategoryLevel}
]
props.onCategoryPanleItemClick(newCurrentCategoryLevel,newCurrentViewedCategories)
}
// on go back click
function onGoBackClick(){
if (props.currentCategoryLevel > 0) props.onGoBackClick()
else {
setSliderPosition(0);
setShowBackButton(false);
}
}
/* RENDER */
const categoryPanelsDislpay = panels.map((cp,index) => (
setSliderHeight(height)}
onCategorySelect={(c) => onCategorySelect(c)}
/>
))
let categoryPanelsContainerCss = {
height:sliderHeight+"px"
}
let categoryPanelsSliderCss = {
left:"-"+sliderPosition+"px",
width:sliderWidth+"px",
}
let categoryPanelsContainerClassName, backButtonDisplay;
if (showBackButton){
categoryPanelsContainerClassName = "show-back-button";
backButtonDisplay =
}
return (
{backButtonDisplay}
{categoryPanelsDislpay}
)
}
function CategoryPanel(props){
React.useEffect(() => {adjustSliderHeight()},[])
React.useEffect(() => {adjustSliderHeight()},[props.currentCategoryLevel])
function adjustSliderHeight(){
let currentCategoryLevel = props.currentCategoryLevel
if (window.is_show_in_menu) currentCategoryLevel = props.currentCategoryLevel + 1;
if (currentCategoryLevel === props.level){
const panelHeight = (props.categories.length * 24) + props.categories.length;
props.onSetSliderHeight(panelHeight);
}
}
function onCategoryClick(c){
if (!c.has_children) console.log('navigate to category?');
else props.onCategorySelect(c);
}
let categoryPanelContent;
if (props.categories){
let categories;
if (props.categories.length > 0){
categories = props.categories.sort(sortArrayAlphabeticallyByTitle).map((c,index) => (
onCategoryClick(c)}
/>
))
} else {
categories = no categories matching {props.searchPhrase}
}
categoryPanelContent =
}
const categoryPanelCss = {
width:props.containerWidth,
float:"left"
}
return(
{categoryPanelContent}
)
}
function CategoryMenuItem(props){
const c = props.category;
let initialCatLink;
if (c.id) initialCatLink = c.id === "0" ? "/browse/" : "/browse/cat/"+c.id+"/order/latest/"
else {
if (c.menuhref.indexOf('http') > -1) initialCatLink = c.menuhref;
else initialCatLink = "https://" + c.menuhref;
}
const [ catLink, setCatLink ] = useState(initialCatLink)
function onCategoryClick(c){
props.onCategoryClick(c);
window.top.location.href = catLink;
}
let catTitle;
if (c.title) catTitle = c.title;
else catTitle = c.name;
let categoryMenuItemDisplay;
if (c.has_children === true){
categoryMenuItemDisplay = (
onCategoryClick(c)}>
{catTitle}
{c.product_count}
)
} else {
categoryMenuItemDisplay = (
{catTitle}
{c.product_count}
)
}
let categoryMenuItemClassName;
if (props.categoryId === parseInt(c.id) || props.selectedCategoriesId.indexOf(c.id) > -1) categoryMenuItemClassName = "active";
return(
{categoryMenuItemDisplay}
)
}
function CategoryTagCloud(props){
const [ tags, setTags ] = useState();
React.useEffect(() => { getCategoryTags() },[])
React.useEffect(() => { getCategoryTags() },[props.selectedCategory])
function getCategoryTags(){
let baseAjaxUrl = "https://www.pling."
if (window.location.host.endsWith('com') || window.location.host.endsWith('org')){
baseAjaxUrl += "com";
} else {
baseAjaxUrl += "cc";
}
let url = baseAjaxUrl + "/json/cattags/id/" + props.selectedCategory.id;
$.ajax({
dataType: "json",
url: url,
success: function(res){
setTags(res);
}
});
}
let tagsDisplay;
if (tags){
tagsDisplay = tags.map((t,index) => (
{t.tag_name}
))
}
return (
{tagsDisplay}
)
}
const rootElement = document.getElementById("category-tree-container");
ReactDOM.render(, rootElement);
\ No newline at end of file