lupine.web 1.0.15 → 1.0.17

package/src/components/menu-sidebar.tsx

@@ -1,289 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,54 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,19 +0,0 @@
-// 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

@@ -1,29 +0,0 @@
-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,
-    });
-  }
-}

package/src/components/notice-message.tsx

@@ -1,119 +0,0 @@
-import { bindGlobalStyles } from '../core';
-import { CssProps } from '../jsx';
-/**
-How to use:
-  Notification.sendMessage(message);
-*/
-export enum NotificationColor {
-  Success = 'var(--success-bg-color)',
-  Info = 'var(--info-bg-color)',
-  Warning = 'var(--warning-bg-color)',
-  Error = 'var(--error-bg-color)',
-}
-export const notificationColorFromValue = (value: string) => {
-  switch (value) {
-    case 'Success':
-      return NotificationColor.Success;
-    case 'Info':
-      return NotificationColor.Info;
-    case 'Warning':
-      return NotificationColor.Warning;
-    case 'Error':
-      return NotificationColor.Error;
-  }
-  return NotificationColor.Info;
-};
-export class NotificationMessage {
-  // public static readonly Color = NotificationColor;
-
-  private static initialized = false;
-  private static container: HTMLElement;
-
-  static init() {
-    /* styles for resizable splitter */
-    const css: CssProps = {
-      position: 'fixed',
-      top: 0,
-      right: 0,
-      height: 'auto',
-      overflowY: 'auto',
-      maxHeight: '100%',
-      width: '100%',
-      maxWidth: '400px',
-      // cursor: 'pointer',
-      // backgroundColor: '#fefefe',
-      padding: '0 10px',
-      zIndex: 'var(--layer-notice)',
-      // borderRadius: '6px',
-      // boxShadow: '0px 0px 2px #000',
-      '>div': {
-        color: 'var(--notice-color-with-bg)',
-        padding: '10px 8px',
-        margin: '16px 0',
-        borderRadius: '6px',
-        boxShadow: 'var(--cover-box-shadow)', //'3px 3px 8px #767676',
-        transition: 'all 0.5s',
-        transform: 'scale(0.1)',
-        opacity: 0,
-      },
-      '.close-btn': {
-        position: 'absolute',
-        top: '-2px',
-        right: '3px',
-        color: 'var(--notice-color-with-bg)',
-        fontWeight: 'bold',
-        fontSize: '22px',
-        lineHeight: '20px',
-        cursor: 'pointer',
-        transition: '0.3s',
-      },
-
-      '.close-btn:hover': {
-        color: 'black',
-      },
-    };
-    bindGlobalStyles('lj_notification', '.lj_notification', css);
-
-    let container = document.querySelector('.lj_notification');
-    if (!container) {
-      container = document.createElement('div');
-      container.className = 'lj_notification';
-      document.body.appendChild(container);
-      this.container = container as HTMLElement;
-    }
-  }
-
-  static sendMessage(message: string, backgroundColor = NotificationColor.Info, permanent = false, showTime = 3000) {
-    if (!this.initialized) {
-      this.initialized = true;
-      this.init();
-    }
-    this.container.scrollTop = 0;
-    const div = document.createElement('div');
-    div.innerHTML = message;
-    div.style.backgroundColor = backgroundColor;
-    this.container.insertBefore(div, this.container.firstChild);
-    setTimeout(() => {
-      div.style.opacity = '1';
-      div.style.transform = 'scale(1)';
-    }, 0);
-
-    if (permanent) {
-      const closeBtn = document.createElement('span');
-      closeBtn.innerHTML = '×';
-      closeBtn.className = 'close-btn';
-      div.appendChild(closeBtn);
-      closeBtn.onclick = () => {
-        this.container.removeChild(div);
-      };
-    } else {
-      setTimeout(() => {
-        div.style.opacity = '0';
-        div.style.transform = 'scale(0.1)';
-        setTimeout(() => {
-          this.container.removeChild(div);
-        }, 1000);
-      }, showTime);
-    }
-  }
-}

package/src/components/paging-link.tsx

@@ -1,100 +0,0 @@
-import { CssProps } from '../jsx';
-import { bindGlobalStyles, getRenderPageProps } from '../core';
-
-let _DEFAULT_PAGE_LIMIT = 7;
-export const getDefaultPageLimit = () => {
-  return _DEFAULT_PAGE_LIMIT;
-};
-export const setDefaultPageLimit = (limit: number) => {
-  _DEFAULT_PAGE_LIMIT = limit;
-};
-export type PagingLinkProps = {
-  itemsCount: number;
-  pageLimit?: number;
-  pageIndex?: number;
-  baseLink: string;
-  onClick?: (index: number) => void; // if onClick is set then use it instead of href
-};
-
-export const PagingLink = (props: PagingLinkProps) => {
-  const css: CssProps = {
-    textAlign: 'right',
-    paddingRight: '16px',
-    '.paging-link-index': {
-      padding: '0px 4px',
-    },
-    a: {
-      textDecoration: 'none',
-    },
-  };
-
-  bindGlobalStyles('paging-link-box', '.paging-link-box', css);
-  const html = [];
-  let pageIndex = props.pageIndex ?? (Number.parseInt(getRenderPageProps().query['pg_i'] || '') || 0);
-  const pageLimit = props.pageLimit || _DEFAULT_PAGE_LIMIT;
-  if (props.itemsCount > 0 && pageLimit > 0) {
-    let maxPages = Math.floor(props.itemsCount / pageLimit);
-    if (props.itemsCount % pageLimit !== 0) {
-      maxPages++;
-    }
-    if (pageIndex > maxPages) {
-      pageIndex = maxPages - 1;
-    }
-    if (pageIndex > 0) {
-      html.push(
-        <span class='paging-link-go'>
-          <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex - 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex - 1)}
-          >
-            &lt;
-          </a>
-        </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&lt;</span>);
-    }
-    for (let i = 0; i < maxPages; i++) {
-      if (i < 2 || i >= maxPages - 2 || (i > pageIndex - 3 && i < pageIndex + 3)) {
-        if (i == pageIndex) {
-          html.push(
-            <span class='paging-link-index current'>
-              <b>{'' + (i + 1)}</b>
-            </span>
-          );
-        } else {
-          html.push(
-            <span class='paging-link-index'>
-              <a
-                href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + i}
-                onClick={() => props.onClick && props.onClick(i)}
-              >
-                {'' + (i + 1)}
-              </a>
-            </span>
-          );
-        }
-      } else {
-        if (i == pageIndex - 4 || i == pageIndex + 4) {
-          html.push(<span class='paging-link-skip'>...</span>);
-        }
-      }
-    }
-    if (pageIndex < maxPages - 1) {
-      html.push(
-        <span class='paging-link-go'>
-          <a
-            href={props.onClick ? 'javascript:void(0)' : props.baseLink + '?pg_i=' + (pageIndex + 1)}
-            onClick={() => props.onClick && props.onClick(pageIndex + 1)}
-          >
-            &gt;
-          </a>
-        </span>
-      );
-    } else {
-      html.push(<span class='paging-link-go disabled'>&gt;</span>);
-    }
-  }
-
-  return html.length > 0 ? <div class='paging-link-box'>{html}</div> : <></>;
-};