@pixelated-tech/components 3.1.4

package/dist/components/menu/menu-accordion.js

@@ -0,0 +1,183 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import PropTypes from 'prop-types';
+import './menu-accordion.css';
+function generateMenuItems({ menuData, state = "hide" }) {
+    const myItems = [];
+    let index = 0;
+    for (const itemKey in menuData) {
+        const myItem = menuData[itemKey];
+        const safeName = (myItem && myItem.name) ? String(myItem.name).replace(/\s+/g, '_') : 'item';
+        const keyBase = `${safeName}-${itemKey}-${index}`;
+        // if ( typeof myItem === 'object' && myItem !== null ){
+        if (!myItem.hidden) {
+            // ITEM OR GROUP IS NOT HIDDEN
+            if (typeof myItem === 'object' && myItem.routes) {
+                // MENU GROUP - push the toggle and the nested group separately with unique keys
+                myItems.push(_jsx(MenuAccordionItem, { name: "▶ " + myItem.name, href: '' }, `${keyBase}-parent`), _jsx(MenuAccordionGroup, { menuItems: myItem, state: state }, `${keyBase}-group`));
+            }
+            else {
+                // INDIVIDUAL MENU ITEM
+                myItems.push(_jsx(MenuAccordionItem, { name: myItem.name, href: myItem.path, target: myItem.target }, `${keyBase}-item`));
+            }
+        }
+        index++;
+    }
+    return myItems;
+}
+/* ========== MENU ========== */
+MenuAccordion.propTypes = {
+    menuItems: PropTypes.any.isRequired,
+    showHidden: PropTypes.bool,
+};
+export function MenuAccordion(props) {
+    const debug = false;
+    const left = useRef(-250);
+    function setLeft(leftVal) { left.current = leftVal; }
+    ;
+    const documentRef = useRef(null);
+    // const [ menuItems, setMenuItems ] = useState();
+    // only works for 2 layers deep
+    const menuItems = props.menuItems.map((menuItem) => {
+        // MAIN MENU ITEMS
+        if (props.showHidden === true && menuItem.hidden === true) {
+            delete menuItem.hidden;
+        }
+        // SUB MENU ITEMS
+        if (menuItem.routes) {
+            const subMenuItems = menuItem.routes.map((subMenuItem) => {
+                if (props.showHidden === true && subMenuItem.hidden === true) {
+                    delete subMenuItem.hidden;
+                }
+                return subMenuItem;
+            });
+            return { ...menuItem, routes: subMenuItems };
+        }
+        return menuItem;
+    });
+    function moveMenu() {
+        if (debug)
+            console.log("Moving Menu... Left: ", left);
+        const menu = documentRef.current ? documentRef.current.getElementById('accordionMenu') : null;
+        const menuParent = menu ? menu.parentElement : null;
+        if (left.current === 0) {
+            if (debug)
+                console.log("Moving Menu Out");
+            menuParent?.classList.remove('accordionDown'); /* accordionIn */
+            menuParent?.classList.add('accordionUp'); /* accordionOut */
+            setLeft(-250);
+        }
+        else {
+            if (debug)
+                console.log("Moving Menu In");
+            menuParent?.classList.remove('accordionUp'); /* accordionOut */
+            menuParent?.classList.add('accordionDown'); /* accordionIn */
+            setLeft(0);
+        }
+    }
+    ;
+    function expandMenuItem(clickedItem) {
+        if (debug)
+            console.log("Expanding Menu Item...");
+        const parent = clickedItem.parentElement;
+        const subMenu = parent?.nextElementSibling;
+        if (subMenu && subMenu.classList.contains('menuHide')) {
+            if (debug)
+                console.log("Opening Submenu");
+            subMenu.classList.add('menuShow');
+            subMenu.classList.remove('menuHide');
+        }
+        else {
+            if (debug)
+                console.log("Closing Submenu");
+            if (subMenu)
+                subMenu.classList.add('menuHide');
+            if (subMenu)
+                subMenu.classList.remove('menuShow');
+        }
+    }
+    useEffect(() => {
+        window.moveMenu = moveMenu; // attach moveMenu function to the window object for use in MenuAccordionButton
+        documentRef.current = document; // for moveMenu
+        const menu = document.getElementById('accordionMenu');
+        const menuBtn = document.getElementById('panelMenuButton');
+        function handleMenuClick(event) {
+            if (debug)
+                console.log("event : ", event, "target : ", event.target);
+            // const isClicked = (menu.contains(event.target) || menuBtn.contains(event.target));
+            const isMenuClicked = menu?.contains(event.target);
+            const isMenuBtnClicked = menuBtn?.contains(event.target);
+            if (debug)
+                console.log("isMenuBtnClicked : ", isMenuBtnClicked);
+            if (isMenuClicked) {
+                // MENU ITEM CLICKED
+                const target = event.target;
+                if (!(target.href) || !(target.href.length > 0)) {
+                    // NO HREF - EXPAND / COLLAPSE SUB MENU
+                    // event.preventDefault();
+                    event.stopPropagation();
+                    expandMenuItem(target);
+                }
+                else {
+                    // HREF - NAVIGATE
+                }
+            }
+            else if (isMenuBtnClicked) {
+                // MENU BUTTON CLICKED
+                // event.preventDefault();
+                event.stopPropagation();
+                moveMenu();
+            }
+            else if (!isMenuBtnClicked && left.current === 0) {
+                // NON-MENU AREA CLICKED
+                moveMenu();
+            }
+        }
+        ;
+        document.addEventListener('click', handleMenuClick, true);
+        return () => {
+            document.removeEventListener('click', handleMenuClick);
+        };
+    }, []);
+    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
+}
+/* ========== MENU GROUP ========== */
+MenuAccordionGroup.propTypes = {
+    menuItems: PropTypes.object.isRequired,
+    state: PropTypes.string,
+};
+export function MenuAccordionGroup(props) {
+    const myMenuItems = (props.menuItems.routes) ? props.menuItems.routes : props.menuItems;
+    return (_jsx("ul", { className: (props.state === "hide" ? "menuHide" : "menuShow"), children: generateMenuItems({ menuData: myMenuItems, state: props.state ?? "hide" }) }, "menu-group-" + props.menuItems.name));
+}
+/* ========== MENU ITEM ========== */
+MenuAccordionItem.propTypes = {
+    name: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.string,
+};
+export function MenuAccordionItem(props) {
+    if (props.href && props.href.length > 0) {
+        if (props.target && props.target.length > 0) {
+            return (_jsx("li", { children: _jsx("a", { href: props.href, target: props.target, children: props.name }) }, "menu-item-" + props.name));
+        }
+        else {
+            return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }, "menu-item-" + props.name));
+        }
+    }
+    else {
+        return (_jsx("li", { children: _jsx("a", { children: props.name }) }, "menu-item-" + props.name));
+    }
+}
+/* ========== MENU BUTTON ========== */
+/*
+https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html-and-css
+*/
+MenuAccordionButton.propTypes = {};
+export function MenuAccordionButton() {
+    function slideMobilePanel() {
+        window.moveMenu();
+    }
+    return (_jsx("div", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger textOutline", children: "|||" }) }));
+}

package/dist/components/menu/menu-expando.css

@@ -0,0 +1,127 @@
+
+/* ========================================
+=====      SLIDING PANEL MENU         =====
+======================================== */
+
+.menuExpandoButton {
+	/* background-color: rgba(255,255,255,0.7); */
+	/* display: none; */
+	/* display: inline; */
+	margin: 0px 10px 0px 0px;
+	padding: 5px;
+	text-align: center;
+	width: 35px;
+
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+@media screen and (max-width: 480px) {
+	.menuExpandoButton {
+		display: inline;
+	}
+}
+
+.menuExpandoButtonHeader {
+	background-color: #336699;
+	/* background-image: url(/images/pix/pix-bg.gif); */
+	color: #FFFFFF;
+	padding: 15px;
+
+	/* .rounded; */
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+
+/* ========================================
+============  ACCORDION MENU   ============
+======================================== */
+
+details.menuExpandoWrapper {
+	/* background: #FFF; */
+	background: rgba(150, 190, 250, 0.7);
+	border-right: 1px solid #ccc;
+	/* height: auto; */
+	position: fixed;
+	left: 0px;
+	top: 60px;
+	/* height: 100%; */
+	width: 220px;
+	z-index: 1000;
+    /* padding: 5px; */
+}
+
+details.menuExpandoWrapper > summary {
+    /* display: none; */
+    list-style: none;
+    height: 0px;
+    width: 0px;
+}
+
+details.menuExpandoWrapper[open] > summary {
+    --do-nothing: true;
+}
+
+details.menuExpandoWrapper:not([open]) { 
+    --do-nothing: true;
+}
+
+details.menuExpandoWrapper > *,
+details.menuExpandoWrapper[open] > *,
+details.menuExpandoWrapper:not([open]) > * {
+    animation: sweep 1s ease-out;
+}
+
+@keyframes sweep {
+    0% { opacity: 0; margin-left: -220px }
+    100% { opacity: 1; margin-left: 0px }
+}
+
+details.menuExpandoWrapper > summary::marker, 
+details.menuExpandoWrapper > summary::-webkit-details-marker {
+    display:none;
+}
+
+.menuExpando,
+.menuExpando ul {
+	/* ALL LIST LEVELS */
+	display: inline-block;
+	list-style-type: none;
+	padding: 0;
+	width: 200px;
+    margin: 10px;
+}
+
+.menuExpando ul > li {
+	/* ALL LIST ITEM LEVELS */
+	border-bottom: 1px solid #FFF;
+}
+
+.menuExpando ul > li:first-child {
+	/* ALL LIST ITEM LEVELS */
+	border-top: 1px solid #FFF;
+}
+
+.menuExpando ul > li > a {
+	/* this is the button */
+	color: black;
+	background: #CCC;
+    /* background-image: url(/images/pix/pix-bg-lite.jpg); */
+	display: block;
+	font-weight: bold;
+	height: 30px;
+	line-height:30px;
+	text-decoration: none;
+	text-indent: 10px;
+}
+
+.menuExpando ul > li > a:hover {
+	background: #EDD;
+    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+	text-indent: 5px;
+	border-left: 5px #000 solid;
+}

package/dist/components/menu/menu-expando.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import './menu-expando.css';
+/*
+NOTE :
+Stopped development on details / summary for now.
+Not enough css control for animation.
+*/
+/* ========== MENU ========== */
+export function MenuExpando(props) {
+    // const debug = false;
+    function generateMenuItems() {
+        const myItems = [];
+        for (const itemKey in props.menuItems) {
+            myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
+        }
+        return myItems;
+    }
+    return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menuExpandoWrapper", id: "menuExpandoWrapper", children: [_jsx("summary", {}), _jsx("ul", { children: generateMenuItems() })] }) }));
+}
+MenuExpando.propTypes = {
+    menuItems: PropTypes.object.isRequired
+};
+/* ========== MENU ITEM ========== */
+export function MenuExpandoItem(props) {
+    return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
+}
+MenuExpandoItem.propTypes = {
+    name: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired
+};
+/* ========== MENU BUTTON ========== */
+export function MenuExpandoButton() {
+    function handleMenuExpandoButtonClick(event) {
+        const debug = false;
+        if (debug)
+            console.log("MenuExpandoButton clicked");
+        event.preventDefault();
+        event.stopPropagation();
+        // const button = document.getElementById('menuExpandoButton');
+        const details = document.getElementById('menuExpandoWrapper');
+        if (details)
+            details.open = !details.open;
+    }
+    return (_jsx("div", { className: "menuExpandoButton", id: "menuExpandoButton", onClick: handleMenuExpandoButtonClick, children: _jsx("img", { src: "/images/icons/mobile-menu2.png", title: "Mobile Menu", alt: "Mobile Menu" }) }));
+}
+MenuExpandoButton.propTypes = {};

package/dist/components/menu/menu-simple.css

@@ -0,0 +1,76 @@
+
+/* ========================================
+============  SIMPLE MENU   ============
+======================================== */
+
+:root {
+	--primary-color: #369;
+	--secondary-color: #BCD;
+	--accent1-color: #CCC;
+	--accent2-color: #EEE;	
+}
+
+.menuWrapper {
+	height: 100%;
+}
+
+.menuWrapper, .menuWrapper * {
+	display: flex;
+	flex-direction: row;
+	flex-basis: 100%;
+	justify-content: center;  
+	align-items: center;
+	text-align: center;
+}
+
+.menu {
+	width: 100%;
+	padding: 5px 0;
+}
+
+.menu ul {
+	list-style-type: none;
+	margin: 0; /* override pixelated global styles */
+	padding: 0;
+}
+
+.menu a {
+	color: black;
+	text-decoration: none;
+}
+
+.menuItem {
+	border: 1px solid white;
+	background: none;
+	width: auto;
+	height: 30px;
+	border: none;
+	flex-grow: 1;
+	flex-shrink: 1;
+	flex-basis: content; /* each item is its own size instead of auto */
+}
+
+.menuItem:hover {
+	background-color: var(--accent1-color);
+}
+
+.menuItem:not(:first-child) {
+	border-left: 2px solid var(--primary-color);
+}
+
+.menuItem a {
+	/* this is the button */
+	background-color: var(--accent1-color);
+	font-weight: bold;
+	height: 30px;
+	line-height: 30px;
+	text-align: center;
+}
+
+.menuItem a.selected {
+	background-color: var(--secondary-color);
+}
+
+.menuItem a:hover {
+	background-color: var(--accent2-color);
+}

package/dist/components/menu/menu-simple.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import PropTypes from "prop-types";
+import './menu-simple.css';
+/* ========== MENU ========== */
+MenuSimple.propTypes = {
+    // 	menuItems: PropTypes.object.isRequired,
+    menuItems: PropTypes.arrayOf(PropTypes.shape({
+        name: PropTypes.string.isRequired,
+        path: PropTypes.string.isRequired,
+        target: PropTypes.string,
+        hidden: PropTypes.bool,
+        routes: PropTypes.array,
+    })).isRequired,
+};
+export function MenuSimple(props) {
+    function generateMenuItems() {
+        const myItems = [];
+        for (const itemKey in props.menuItems) {
+            const myItem = props.menuItems[itemKey];
+            if (myItem && myItem.routes) {
+                continue;
+            } // Skip nested routes
+            myItems.push(_jsx(MenuSimpleItem, { name: myItem.name, path: myItem.path, target: myItem.target || undefined, hidden: myItem.hidden || undefined }, itemKey));
+        }
+        return myItems;
+    }
+    function styleSelectedMenuItem() {
+        const menuitems = document.querySelectorAll('.menuItem a');
+        const currentURL = window.location.href;
+        menuitems.forEach((menuitem) => {
+            if (menuitem.href === currentURL) {
+                menuitem.classList.add('selected');
+            }
+        });
+    }
+    useEffect(() => {
+        styleSelectedMenuItem();
+    }, []);
+    return (_jsx("div", { className: "menuWrapper", children: _jsx("div", { className: "menu", id: "menu", children: _jsx("ul", { children: generateMenuItems() }) }) }));
+}
+/* ========== MENU ITEM ========== */
+MenuSimpleItem.propTypes = {
+    name: PropTypes.string.isRequired,
+    path: PropTypes.string,
+    target: PropTypes.string,
+    hidden: PropTypes.bool,
+    routes: PropTypes.array,
+};
+export function MenuSimpleItem(props) {
+    if (props.hidden)
+        return null;
+    return (_jsx("li", { className: 'menuItem', children: props.target
+            ? _jsx("a", { href: props.path || undefined, target: props.target, children: props.name })
+            : _jsx("a", { href: props.path || undefined, children: props.name }) }));
+}

package/dist/components/nerdjoke/nerdjoke.css

@@ -0,0 +1,69 @@
+
+/* ========================================
+===============  NERDJOKE   ===============
+======================================== */
+
+.nerdJoke {
+	padding-bottom: 20px;
+	font-size: 24px;
+}
+
+.nerdJoke .jokeText div {
+	padding-bottom: 15px;
+}
+
+.slackButton {
+	padding-bottom: 20px;
+}
+
+.label {
+	font-weight: bold;
+}
+
+.jokeButton {
+	/* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
+    border: 1px solid #999;
+    display: inline-block;
+    font-weight: bold;
+	margin: 5px;
+	padding: 5px 20px !important;
+
+	/* display: block; */
+	margin: 5px auto;
+    text-align: center;
+	max-width: 220px;
+	transition: all .2s ease ;
+	
+	-moz-border-radius: 5px;
+	-webkit-border-radius: 5px;
+	border-radius: 5px;
+}
+
+.jokeButton:hover {
+	--do-nothing: true;
+}
+
+
+.jokeTimer {
+    border: 1px solid #AAA;
+	position: relative;
+	/* height: 25px;
+	width: 100%; */
+}
+
+.jokeTimerSvg {
+	width: 100%;
+	height: 10px;
+	fill: rgb(190,190,190);
+	background: rgb(190,190,190);
+	color: rgb(190,190,190);
+}
+
+#jokeTimerPathElapsed {
+	fill: rgb(0,0,255);
+	width: 100%;
+	height: 10px; 
+	transition: 1s linear all;
+}
+
+#jokeTimerLabel { --do-nothing: true }

package/dist/components/nerdjoke/nerdjoke.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { getXHRData, generateURL } from '../utilities/api';
+import './nerdjoke.css';
+import '../../css/pixelated.grid.scss';
+/*
+TODO: #21 NerdJoke Component - Convert to TypeScript
+*/
+const debug = false;
+export class NerdJoke extends Component {
+    constructor(props) {
+        super(props);
+        this.TIME_LIMIT = 15;
+        this.timePassed = 0;
+        this.timePaused = false;
+        this.timeLeft = this.TIME_LIMIT;
+        this.timerInterval = null;
+        this.jokeInterval = null;
+        this.state = {
+            joke: {
+                question: '',
+                answer: ''
+            }
+        };
+    }
+    loadJoke = () => {
+        if (debug)
+            console.log("Loading Joke");
+        this.timePassed = 0;
+        this.timeLeft = this.TIME_LIMIT;
+        this.timerInterval = null;
+        clearInterval(this.jokeInterval);
+        this.jokeInterval = setInterval(() => {
+            if (!this.timePaused) {
+                this.loadJoke();
+            }
+        }, this.TIME_LIMIT * 1000);
+        const myURL = 'https://vvqyc1xpw6.execute-api.us-east-2.amazonaws.com/prod/nerdjokes?';
+        const myURLProps = { command: '%2Fnerdjokes', text: 'getjokejson' };
+        const myMethod = 'GET';
+        getXHRData(generateURL(myURL, myURLProps), myMethod, (jokeData) => {
+            const myJokeData = jokeData;
+            this.setState({ joke: myJokeData });
+        });
+    };
+    formatTimeLeft(time) {
+        if (debug)
+            console.log("Formatting Time Left");
+        const minutes = Math.floor(time / 60);
+        let seconds = time % 60;
+        if (seconds < 10) {
+            seconds = `0${seconds}`;
+        }
+        return `${minutes}:${seconds}`;
+    }
+    ;
+    startTimer() {
+        if (debug)
+            console.log("Starting Timer");
+        this.timerInterval = setInterval(() => {
+            if (!this.timePaused) {
+                this.timePassed = this.timePassed += 1;
+                this.timeLeft = this.TIME_LIMIT - this.timePassed + 1;
+                const myWidth = (((1 / this.TIME_LIMIT) * this.timeLeft) * 100) + '%';
+                document.getElementById('jokeTimerLabel').innerHTML = this.formatTimeLeft(this.timeLeft);
+                document.getElementById('jokeTimerPathElapsed').style.width = myWidth;
+            }
+        }, 1000);
+    }
+    ;
+    pauseTimer() {
+        if (debug)
+            console.log("Pausing Timer");
+        this.timePaused = !this.timePaused;
+    }
+    ;
+    componentDidMount() {
+        if (debug)
+            console.log("Component is Mounted");
+        this.loadJoke();
+        this.startTimer();
+    }
+    render() {
+        return (_jsx("div", { className: "nerdJoke", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e5", children: _jsx("div", { className: "left", children: _jsx(JokeButton, { clickFunction: this.pauseTimer, buttonText: "Pause ||  / Play >" }) }) }), _jsx("div", { className: "grid-s9-e13", children: _jsx("div", { className: "right", children: _jsx(JokeButton, { clickFunction: this.loadJoke, buttonText: "Next Joke ->" }) }) }), _jsx("div", { className: "jokeTimer grid-s1-e13", children: _jsxs("div", { className: "row-12col", children: [_jsx("div", { className: "grid-s1-e11", children: _jsx("svg", { className: "jokeTimerSvg", xmlns: "http://www.w3.org/2000/svg", children: _jsx("rect", { id: "jokeTimerPathElapsed" }) }) }), _jsx("div", { className: "grid-s11-e13 center", id: "jokeTimerLabel", children: this.formatTimeLeft(this.timeLeft) })] }) }), _jsxs("div", { className: "jokeText grid-s1-e13", children: [_jsxs("div", { children: [_jsx("span", { className: "label", children: "Q: " }), _jsxs("span", { className: "question", children: [" ", this.state.joke.question, " "] })] }), _jsxs("div", { children: [_jsx("span", { className: "label", children: "A: " }), _jsxs("span", { className: "answer", children: [" ", this.state.joke.answer, " "] })] })] })] }) }));
+    }
+}
+/* ========== JOKE BUTTON ========== */
+function JokeButton(props) {
+    return (_jsx("div", { className: 'jokeButton', onClick: props.clickFunction, children: props.buttonText }));
+}
+JokeButton.propTypes = {
+    clickFunction: PropTypes.func.isRequired,
+    buttonText: PropTypes.string.isRequired
+};

package/dist/components/pagebuilder/components/ComponentPropertiesForm.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+// import { PageSectionHeader } from '../../general/pixelated.headers';
+import { FormEngine } from '../form/form';
+/**
+ * ComponentPropertiesForm - Displays the component properties form
+ * Shows FormEngine when component is selected, placeholder otherwise
+ */
+ComponentPropertiesForm.propTypes = {
+    editableComponent: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+};
+export function ComponentPropertiesForm({ editableComponent, onSubmit }) {
+    return (_jsx(_Fragment, { children: editableComponent && editableComponent.fields ? (_jsx(FormEngine, { name: "field_props", id: "field_props", onSubmitHandler: onSubmit, formData: editableComponent })) : (_jsx("p", { style: { color: '#666', fontStyle: 'italic', padding: '1rem' }, children: "Select a component type above to configure its properties." })) }));
+}