lupine.web 1.0.14

package/src/components/menu-bar.tsx

@@ -0,0 +1,220 @@
+import { getRenderPageProps } from '../core';
+import { RefProps } from '../jsx';
+import { MediaQueryMaxWidth } from '../types';
+import { LinkItem } from './link-item';
+import { NestMenuItemProps } from './menu-item-props';
+
+const fetchMenu = async (menuId: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(`/api/menu/get/${menuId}`);
+  return data.json;
+};
+
+export type MenuBarProps = {
+  menuId?: string;
+  items: NestMenuItemProps[];
+  className?: string;
+  textColor?: string;
+  hoverColor?: string;
+  hoverBgColor?: string;
+  maxWidthMobileMenu?: string;
+  maxWidth?: string;
+  backgroundColor?: string;
+};
+export const MenuBar = ({
+  menuId,
+  items,
+  className,
+  textColor = 'var(--menubar-color)',
+  backgroundColor = 'var(--menubar-bg-color)', //'black',
+  hoverColor = 'var(--activatable-color-hover)', //'#ffffff',
+  hoverBgColor = 'var(--activatable-bg-color-hover)', //'#d12121',
+  maxWidth = '100%',
+  maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
+}: MenuBarProps) => {
+  const css: any = {
+    width: '100%',
+    maxWidth: maxWidth,
+    margin: 'auto',
+    // height: 'auto',
+    backgroundColor,
+    position: 'relative',
+    '.menu-bar-top': {
+      display: 'flex',
+      width: '100%',
+      justifyContent: 'center',
+    },
+    '.menu-bar-item': {
+      display: 'inline-block',
+      color: textColor,
+      padding: '14px 16px',
+      textDecoration: 'none',
+      position: 'relative',
+    },
+    '.menu-bar-item:hover, .menu-bar-sub-box:hover > .menu-bar-item': {
+      // for desktop, make parent menu hover when sub menu is hover
+      color: hoverColor,
+      backgroundColor: hoverBgColor,
+    },
+    '.menu-bar-sub-box .menu-bar-sub': {
+      display: 'none',
+      position: 'absolute',
+      backgroundColor: 'var(--menubar-sub-bg-color)', //'#f9f9f9',
+      minWidth: '160px',
+      boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+      zIndex: 'var(--layer-menu-sub)',
+      flexDirection: 'column',
+    },
+    '.menu-bar-sub-box > .menu-bar-item': {
+      padding: '14px 26px 14px 16px',
+      width: '100%',
+    },
+    '.menu-bar-sub-box > .menu-bar-item::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%)',
+      marginLeft: '6px',
+      width: 0,
+      height: 0,
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '5px solid ' + textColor,
+    },
+    '.menu-bar-sub-box .menu-bar-sub > .menu-bar-item': {
+      color: 'black',
+    },
+    '.menu-bar-sub-box:hover > .menu-bar-sub': {
+      display: 'flex',
+    },
+    '.menu-bar-sub-box .menu-bar-sub .menu-bar-item:hover': {
+      // backgroundColor: '#ddd',
+      color: hoverColor,
+      backgroundColor: hoverBgColor,
+    },
+    '.menu-bar-mobile': {
+      display: 'none',
+      position: 'relative',
+      backgroundColor,
+      padding: '5px 18px 6px',
+      '.menu-bar-toggle': {
+        cursor: 'pointer',
+        padding: '14px 0 19px 0',
+        'span, span::before, span::after': {
+          cursor: 'pointer',
+          height: '3px',
+          width: '25px',
+          borderRadius: '1px',
+          background: '#ffffff',
+          position: 'absolute',
+          display: 'block',
+          transition: 'all 300ms ease-in-out',
+        },
+        'span::before, span::after': {
+          content: '""',
+        },
+        'span::before': {
+          top: '-10px',
+        },
+        'span::after': {
+          bottom: '-10px',
+        },
+      },
+      '.menu-bar-toggle.active span': {
+        backgroundColor: 'transparent',
+      },
+      '.menu-bar-toggle.active span::before': {
+        transform: 'rotate(45deg)',
+        top: 0,
+      },
+      '.menu-bar-toggle.active span::after': {
+        transform: 'rotate(-45deg)',
+        top: 0,
+      },
+    },
+    ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+      '.menu-bar-mobile': {
+        display: 'block',
+      },
+      '.menu-bar-top': {
+        display: 'none',
+      },
+      '.menu-bar-top.open': {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '.menu-bar-top.open .menu-bar-sub-box > .menu-bar-sub': {
+        display: 'flex',
+        position: 'unset',
+        '.menu-bar-item': {
+          paddingLeft: '32px',
+          color: textColor,
+          backgroundColor,
+        },
+        '.menu-bar-item:hover': {
+          color: hoverColor,
+          backgroundColor: hoverBgColor,
+        },
+      },
+      '.menu-bar-sub-box:hover > .menu-bar-item': {
+        // for mobile, no parent menu hover when sub menu is hover
+        color: textColor,
+        backgroundColor: backgroundColor,
+      },
+      '.menu-bar-sub-box:hover > .menu-bar-item:hover': {
+        color: hoverColor,
+        backgroundColor: hoverBgColor,
+      },
+    },
+  };
+
+  const renderItems = (items: NestMenuItemProps[], className: string) => {
+    return (
+      <div class={className}>
+        {items.map((item) => {
+          return item.items ? (
+            <div class='menu-bar-sub-box'>
+              <div class='menu-bar-item'>{item.text}</div>
+              {renderItems(item.items, 'menu-bar-sub')}
+            </div>
+          ) : (
+            <LinkItem className='menu-bar-item' url={item.url} alt={item.alt} text={item.text} />
+          );
+        })}
+      </div>
+    );
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      if (menuId) {
+        const menu = await fetchMenu(menuId);
+        if (menu.result && menu.result.items.length > 0) {
+          const items = menu.result.items.map((i: any) => {
+            const l = i.split('\t');
+            return { text: l[5], url: l[4] };
+          });
+          const newDom = renderItems(items, 'menu-bar-top');
+          //mountComponents('.menu-bar-top', newDom);
+        }
+      }
+    },
+  };
+  const onToggleClick = () => {
+    const menu = ref.$('.menu-bar-mobile .menu-bar-toggle');
+    menu.classList.toggle('active');
+    const topMenu = ref.$('.menu-bar-top');
+    topMenu.classList.toggle('open');
+  };
+
+  return (
+    <div ref={ref} css={css} class={['menu-bar-box', className].join(' ')}>
+      <div class='menu-bar-mobile'>
+        <div class='menu-bar-toggle' onClick={onToggleClick}>
+          <span></span>
+        </div>
+      </div>
+
+      {renderItems(items, 'menu-bar-top')}
+    </div>
+  );
+};

package/src/components/menu-item-props.tsx

@@ -0,0 +1,10 @@
+export type MenuItemProps = {
+  text: string; // "-" for break line
+  url: string;
+  js?: () => void;
+  alt?: string;
+};
+
+export type NestMenuItemProps = MenuItemProps & {
+  items?: NestMenuItemProps[];
+};

package/src/components/menu-sidebar.tsx

@@ -0,0 +1,289 @@
+import { bindGlobalStyles, getRenderPageProps } from '../core';
+import { CssProps, RefProps } from '../jsx';
+import { stopPropagation } from '../lib';
+import { MediaQueryMaxWidth } from '../types';
+import { NestMenuItemProps } from './menu-item-props';
+
+const fetchMenu = async (menuId: string) => {
+  const data = await getRenderPageProps().renderPageFunctions.fetchData(`/api/menu/get/${menuId}`);
+  return data.json;
+};
+
+export type MenuSidebarProps = {
+  mobileMenu?: boolean;
+  desktopMenu?: boolean;
+  menuId?: string;
+  items: NestMenuItemProps[];
+  className?: string;
+  maxWidthMobileMenu?: string;
+  maxWidth?: string;
+  color?: string;
+  backgroundColor?: string;
+};
+export const MenuSidebar = ({
+  mobileMenu,
+  desktopMenu,
+  menuId,
+  items,
+  className,
+  color = 'white',
+  backgroundColor = 'dark',
+  maxWidth = '100%',
+  maxWidthMobileMenu = MediaQueryMaxWidth.TabletMax,
+}: MenuSidebarProps) => {
+  const css: CssProps = {
+    backgroundColor,
+    '.menu-sidebar-top': {
+      width: '100%',
+      backgroundColor: 'var(--sidebar-bg-color)',
+      maxWidth: maxWidth,
+      margin: 'auto',
+      // height: 'auto',
+      position: 'relative',
+
+      display: 'flex',
+      // width: '100%',
+      justifyContent: 'center',
+      flexDirection: 'column',
+    },
+    '&.mobile .menu-sidebar-top': {
+      position: 'absolute',
+    },
+    '.menu-sidebar-item': {
+      display: 'inline-block',
+      color,
+      cursor: 'pointer',
+      padding: '14px 16px',
+      textDecoration: 'none',
+      position: 'relative',
+      borderBottom: 'var(--sidebar-border)',
+    },
+    // select parent when hover on a child, .menu-sidebar-sub-box:hover > .menu-sidebar-item
+    '.menu-sidebar-item:hover': {
+      color: 'var(--activatable-color-hover)',
+      backgroundColor: 'var(--activatable-bg-color-hover)',
+    },
+    '.menu-sidebar-sub-box .menu-sidebar-sub': {
+      display: 'none',
+      // position: 'absolute',
+      // color: 'var(--sidebar-sub-color)',
+      // backgroundColor: 'var(--sidebar-sub-bg-color)',
+      minWidth: '160px',
+      // boxShadow: '0px 8px 16px 0px rgba(0,0,0,0.2)',
+      zIndex: 'var(--layer-sidebar-sub)',
+      flexDirection: 'column',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-item': {
+      padding: '14px 26px 14px 16px',
+      width: '100%',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-sub > .menu-sidebar-item': {
+      paddingLeft: '32px',
+    },
+    '.menu-sidebar-sub-box > .menu-sidebar-item::after': {
+      content: '""',
+      position: 'absolute',
+      top: '50%',
+      transform: 'translateY(-50%) rotate(-90deg)',
+      marginLeft: '6px',
+      width: 0,
+      height: 0,
+      borderLeft: '5px solid transparent',
+      borderRight: '5px solid transparent',
+      borderTop: '5px solid ' + color,
+      right: '10px',
+      transition: 'all 300ms ease-in-out',
+    },
+    '.menu-sidebar-sub-box.open > .menu-sidebar-item::after': {
+      transform: 'rotate(0deg)',
+    },
+    '&.mobile .menu-sidebar-sub-box > .menu-sidebar-item::after': {
+      transform: 'rotate(0deg)',
+    },
+    // '.menu-sidebar-sub-box .menu-sidebar-sub > .menu-sidebar-item': {
+    //   color: 'black',
+    // },
+    '.menu-sidebar-sub-box.open > .menu-sidebar-sub': {
+      display: 'flex',
+    },
+    '.menu-sidebar-sub-box .menu-sidebar-sub .menu-sidebar-item:hover': {
+      color: 'var(--activatable-color-hover)',
+      backgroundColor: 'var(--activatable-bg-color-hover)',
+    },
+    '.menu-sidebar-mobile': {
+      display: 'none',
+      position: 'relative',
+      backgroundColor: 'var(--primary-bg-color)',
+      padding: '5px 4px 6px',
+      '.menu-sidebar-toggle': {
+        cursor: 'pointer',
+        padding: '6px 0 8px 0',
+        'span, span::before, span::after': {
+          cursor: 'pointer',
+          height: '3px',
+          width: '25px',
+          borderRadius: '1px',
+          background: 'var(--primary-color)',
+          position: 'absolute',
+          display: 'block',
+          transition: 'all 300ms ease-in-out',
+        },
+        'span::before, span::after': {
+          content: '""',
+        },
+        'span::before': {
+          top: '-7px',
+        },
+        'span::after': {
+          bottom: '-7px',
+        },
+      },
+      '.menu-sidebar-toggle.active span': {
+        backgroundColor: 'transparent',
+      },
+      '.menu-sidebar-toggle.active span::before': {
+        transform: 'rotate(45deg)',
+        top: 0,
+      },
+      '.menu-sidebar-toggle.active span::after': {
+        transform: 'rotate(-45deg)',
+        top: 0,
+      },
+    },
+    // hide menu for mobile place
+    '&.mobile': {
+      display: 'none',
+      // width: '33px',
+    },
+    '&.mobile .menu-sidebar-mobile': {
+      display: 'block',
+      width: '33px',
+    },
+    ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+      // hide menu for not mobile place
+      display: 'none',
+      // show menu for mobile place
+      '&.mobile': {
+        display: 'block',
+      },
+      '.menu-sidebar-top': {
+        display: 'none',
+      },
+      '.menu-sidebar-top.open': {
+        display: 'flex',
+        flexDirection: 'column',
+        zIndex: 'var(--layer-sidebar)',
+      },
+      '.menu-sidebar-top.open .menu-sidebar-sub-box > .menu-sidebar-sub': {
+        display: 'flex',
+        position: 'unset',
+        '.menu-sidebar-item': {
+          paddingLeft: '32px',
+          color,
+          backgroundColor,
+        },
+        '.menu-sidebar-item:hover': {
+          color: 'var(--activatable-color-hover)',
+          backgroundColor: 'var(--activatable-bg-color-hover)',
+        },
+      },
+      '.menu-sidebar-sub-box:hover > .menu-sidebar-item': {
+        backgroundColor: 'unset',
+      },
+      '.menu-sidebar-sub-box:hover > .menu-sidebar-item:hover': {
+        color: 'var(--activatable-color-hover)',
+        backgroundColor: 'var(--activatable-bg-color-hover)',
+      },
+    },
+  };
+
+  // first level is grouped
+  const renderItems = (items: NestMenuItemProps[], className: string) => {
+    return (
+      <div class={className}>
+        {items.map((item) => {
+          let ref: RefProps = {};
+          return item.items ? (
+            <div ref={ref} class='menu-sidebar-sub-box' onClick={() => onItemToggleClick(ref)}>
+              <div class='menu-sidebar-item'>{item.text}</div>
+              {renderItems(item.items, 'menu-sidebar-sub')}
+            </div>
+          ) : item.js ? (
+            <a
+              class='menu-sidebar-item'
+              href='javascript:void(0)'
+              alt={item.alt || item.text}
+              onClick={(event) => {
+                stopPropagation(event);
+                // hide menu
+                onToggleClick();
+                item.js && item.js();
+              }}
+            >
+              {item.text}
+            </a>
+          ) : (
+            <a class='menu-sidebar-item' href={item.url} alt={item.alt || item.text}>
+              {item.text}
+            </a>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const ref: RefProps = {
+    onLoad: async () => {
+      if (menuId) {
+        const menu = await fetchMenu(menuId);
+        if (menu.result.items.length > 0) {
+          const items = menu.result.items.map((i: any) => {
+            const l = i.split('\t');
+            return { text: l[5], url: l[4] };
+          });
+          const newDom = renderItems(items, 'menu-sidebar-top');
+          //mountComponents('.menu-sidebar-top', newDom);
+        }
+      }
+    },
+  };
+  const onToggleClick = () => {
+    const menu = ref.$('.menu-sidebar-mobile .menu-sidebar-toggle');
+    menu.classList.toggle('active');
+    const topMenu = ref.$('.menu-sidebar-top');
+    topMenu.classList.toggle('open');
+  };
+  const onItemToggleClick = (ref: RefProps) => {
+    // if (event.target != ref.current && (event.target as any).parentNode != ref.current) {
+    //   return;
+    // }
+    ref.current.classList.toggle('open');
+  };
+
+  // if this component is used twice, then the Global styles is only set at the first time
+  bindGlobalStyles('menu-sidebar-box', '.menu-sidebar-box', css);
+
+  // show the menu on both mobile and desktop
+  const newCss: CssProps =
+    (!desktopMenu && !mobileMenu) || (desktopMenu && mobileMenu)
+      ? {
+          ['@media only screen and (max-width: ' + maxWidthMobileMenu + ')']: {
+            display: 'block',
+            '.menu-sidebar-top': {
+              display: 'block',
+            },
+          },
+        }
+      : {};
+  return (
+    <div css={newCss} ref={ref} class={['menu-sidebar-box', className, mobileMenu ? 'mobile' : ''].join(' ')}>
+      <div class='menu-sidebar-mobile'>
+        <div class='menu-sidebar-toggle' onClick={onToggleClick}>
+          <span></span>
+        </div>
+      </div>
+
+      {renderItems(items, 'menu-sidebar-top')}
+    </div>
+  );
+};

package/src/components/message-box.tsx

@@ -0,0 +1,44 @@
+import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
+
+export enum MessageBoxButtonProps {
+  YesNo = 'yesno',
+  OkCancel = 'okcancel',
+  Ok = 'ok',
+}
+export type MessageBoxProps = FloatWindowShowProps & {
+  buttonType: MessageBoxButtonProps;
+};
+
+export class MessageBox {
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    contentMinWidth,
+    buttonType = MessageBoxButtonProps.OkCancel,
+    noMoving = false,
+    noModal = false,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = false,
+  }: MessageBoxProps): Promise<FloatWindowCloseProps> {
+    const buttons =
+      buttonType === MessageBoxButtonProps.OkCancel
+        ? ['OK', 'Cancel']
+        : buttonType === MessageBoxButtonProps.YesNo
+        ? ['Yes', 'No']
+        : ['OK'];
+    return FloatWindow.show({
+      title,
+      children,
+      contentMaxHeight,
+      contentMinWidth,
+      buttons,
+      noMoving,
+      noModal,
+      closeEvent,
+      handleClicked,
+      closeWhenClickOutside,
+    });
+  }
+}

package/src/components/meta-data.tsx

@@ -0,0 +1,54 @@
+// import { bindPageResetEvent } from '../core/page-reset-events';
+import { getMetaDescription } from './meta-description';
+
+type NameMeta = { name: string; content: string };
+type PropertyMeta = { property: string; content: string };
+type HttpEquivMeta = { httpEquiv: string; content: string };
+type AllMeta = NameMeta | PropertyMeta | HttpEquivMeta;
+
+function isNameMeta(data: any): data is NameMeta {
+  return !!(data.name && data.content);
+}
+function isPropertyMeta(data: any): data is PropertyMeta {
+  return !!(data.property && data.content);
+}
+function isHttpEquivMeta(data: any): data is HttpEquivMeta {
+  return !!(data.httpEquiv && data.content);
+}
+
+let _metaData: { [key: string]: string } = {};
+// Shouldn't include <meta name="description" content="...">
+export const MetaData = (data: AllMeta) => {
+  if (isNameMeta(data)) {
+    _metaData[`name:${data.name}`] = `<meta name="${data.name}" content="${data.content}">`;
+  } else if (isPropertyMeta(data)) {
+    _metaData[`property:${data.property}`] = `<meta property="${data.property}" content="${data.content}">`;
+  } else if (isHttpEquivMeta(data)) {
+    _metaData[`http-equiv:${data.httpEquiv}`] = `<meta http-equiv="${data.httpEquiv}" content="${data.content}">`;
+  } else if ((data as any).key && (data as any).string) {
+    _metaData[`${(data as any).key}`] = `${(data as any).string}`;
+  } else {
+    console.warn('Unknown meta data:', data);
+  }
+  return <></>;
+};
+
+export const getMetaDataTags = () => {
+  return Object.values(getMetaDataObject()).join('\n');
+};
+
+export const getMetaDataObject = () => {
+  const metaDescription = getMetaDescription();
+  return metaDescription
+    ? Object.assign(
+        {
+          'name:description': `<meta name="description" content="${metaDescription}">`,
+        },
+        _metaData
+      )
+    : _metaData;
+};
+
+// bindPageResetEvent(() => {
+//   _metaData = {};
+// });

package/src/components/meta-description.tsx

@@ -0,0 +1,19 @@
+// import { bindPageResetEvent } from '../core/page-reset-events';
+
+let _description = { value: '', defaultValue: '' };
+export const MetaDescription = ({ children }: { children: string }) => {
+  _description.value = children;
+  return <></>;
+};
+
+export const getMetaDescription = () => {
+  return _description.value || _description.defaultValue;
+};
+
+export const setDefaultMetaDescription = (children: string) => {
+  _description.defaultValue = children;
+};
+
+// bindPageResetEvent(() => {
+//   _description.value = '';
+// });

package/src/components/meta-title.tsx

@@ -0,0 +1,19 @@
+// import { bindPageResetEvent } from '../core/page-reset-events';
+
+let _title = { value: '', defaultValue: '' };
+export const MetaTitle = ({ children }: { children: string }) => {
+  _title.value = children;
+  return <></>;
+};
+
+export const getMetaTitle = () => {
+  return _title.value || _title.defaultValue;
+};
+
+export const setDefaultMetaTitle = (children: string) => {
+  _title.defaultValue = children;
+};
+
+// bindPageResetEvent(() => {
+//   _title.value = '';
+// });

package/src/components/modal.tsx

@@ -0,0 +1,29 @@
+import { FloatWindow, FloatWindowCloseProps, FloatWindowShowProps } from './float-window';
+
+export class ModalWindow {
+  static async show({
+    title,
+    children,
+    contentMaxHeight,
+    contentMinWidth,
+    buttons,
+    noMoving = true,
+    noModal = false,
+    closeEvent,
+    handleClicked,
+    closeWhenClickOutside = true,
+  }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
+    return FloatWindow.show({
+      title,
+      children,
+      contentMaxHeight,
+      contentMinWidth,
+      buttons,
+      noMoving,
+      noModal,
+      closeEvent,
+      handleClicked,
+      closeWhenClickOutside,
+    });
+  }
+}