lupine.web 1.0.15 → 1.0.17

package/src/components/float-window.tsx

@@ -1,226 +0,0 @@
-import { mountComponents } from '../core';
-import { CssProps, RefProps, VNode } from '../jsx';
-import { stopPropagation } from '../lib';
-
-export type FloatWindowCloseProps = () => void;
-
-export type FloatWindowShowProps = {
-  title: string;
-  children: VNode<any>;
-  buttons?: string[];
-  contentMaxHeight?: string;
-  contentMinWidth?: string;
-  noMoving?: boolean;
-  noModal?: boolean;
-  closeEvent?: () => void;
-  handleClicked: (index: number, close: FloatWindowCloseProps) => void;
-  closeWhenClickOutside?: boolean; // default false
-};
-
-// because it's over a mask, so it can use primary colors
-export class FloatWindow {
-  static hostNode: HTMLElement;
-
-  private static initialized = false;
-  private static pressed = false;
-  private static startX = 0;
-  private static startY = 0;
-  private static startTop = 0;
-  private static startLeft = 0;
-
-  static init() {
-    window.addEventListener('mousemove', FloatWindow.onMousemove.bind(FloatWindow), false);
-    document.documentElement.addEventListener('mouseup', FloatWindow.onMouseup.bind(FloatWindow), false);
-  }
-
-  static async show({
-    title,
-    children,
-    contentMaxHeight,
-    contentMinWidth,
-    buttons,
-    noMoving = false,
-    noModal = false,
-    closeEvent,
-    handleClicked,
-    closeWhenClickOutside = false,
-  }: FloatWindowShowProps): Promise<FloatWindowCloseProps> {
-    const onClickContainer = (event: any) => {
-      if (closeWhenClickOutside !== false && event.target.className === 'fwin-box') {
-        handleClose();
-      }
-    };
-    const handleClose = () => {
-      closeEvent?.();
-      ref.current.classList.add('transition');
-      ref.current.classList.remove('animation');
-      setTimeout(() => {
-        base.remove();
-      }, 300);
-    };
-
-    const base = document.createElement('div');
-    const onMousedown = (event: any) => {
-      if (noMoving) return;
-
-      if (!this.initialized) {
-        this.initialized = true;
-        this.init();
-      }
-
-      FloatWindow.hostNode = ref.current;
-      FloatWindow.onMousedown.bind(FloatWindow)(event);
-    };
-
-    const newButtons = !buttons || buttons.length === 0 ? ['OK', 'Cancel'] : buttons;
-    const onClickButtons = (index: number) => {
-      handleClicked(index, handleClose);
-    };
-
-    const ref: RefProps = {
-      onLoad: async () => {
-        ref.current.classList.add('transition', 'animation');
-        setTimeout(() => {
-          // don't need transition for moving
-          ref.current.classList.remove('transition');
-        }, 300);
-      },
-    };
-    const cssContainer: CssProps = {
-      position: noModal ? '' : 'fixed',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      backgroundColor: noModal ? '' : 'var(--cover-mask-bg-color)',
-      '.fwin-body': {
-        position: 'fixed',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%) scale(0.1)',
-        color: 'var(--primary-color)',
-        backgroundColor: 'var(--cover-bg-color)', //'#fefefe',
-        border: 'var(--primary-border)', //'1px solid #888',
-        borderRadius: '6px',
-        minWidth: contentMinWidth ? contentMinWidth : '',
-        maxWidth: '90%',
-        boxShadow: 'var(--cover-box-shadow)', //'#0000004c 0px 19px 38px, #00000038 0px 15px 12px',
-        opacity: 0,
-        zIndex: 'var(--layer-float-window)',
-        '&.transition': {
-          transition: 'all 0.3s',
-        },
-        '&.animation': {
-          transform: 'translate(-50%, -50%) scale(1)',
-          opacity: 1,
-        },
-        '&.animation-close': {
-          transition: 'all 0.3s',
-          transform: 'translate(-50%, -50%) scale(0)',
-          opacity: 0,
-        },
-        '.fwin-title': {
-          padding: '10px 15px 5px',
-          borderBottom: 'var(--primary-border)', //'1px solid #e9ecef',
-          '.fwin-close': {
-            color: '#aaaaaa',
-            float: 'right',
-            fontSize: '26px',
-            fontWeight: 'bold',
-            cursor: 'pointer',
-            marginTop: '-8px',
-            marginRight: '-10px',
-          },
-          '.fwin-close:hover': {
-            transition: 'all 300ms ease',
-            color: '#555555',
-          },
-        },
-        '.fwin-content': {
-          padding: '15px',
-          maxHeight: contentMaxHeight ? `min(${contentMaxHeight}, calc(100% - 100px))` : 'calc(100% - 100px)',
-          overflowY: 'auto',
-        },
-        '.fwin-bottom': {
-          display: 'flex',
-          padding: '5px 15px',
-          borderTop: 'var(--primary-border)', //'1px solid #e9ecef',
-          justifyContent: 'end',
-          '>div': {
-            marginLeft: '5px',
-          },
-        },
-      },
-    };
-    const component = (
-      <div css={cssContainer} class='fwin-box' onClick={onClickContainer}>
-        <div ref={ref} class='fwin-body' onMouseDown={onMousedown}>
-          <div class='fwin-title'>
-            {title}
-            <span class='fwin-close' onClick={handleClose}>
-              ×
-            </span>
-          </div>
-          <div class='fwin-content'>{children}</div>
-          <div class='fwin-bottom'>
-            {newButtons.map((i, index) => (
-              <button
-                class='button-base button-s mr-m'
-                onClick={() => {
-                  onClickButtons(index);
-                }}
-              >
-                {i}
-              </button>
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-    base.style.position = 'fixed';
-    document.body.appendChild(base);
-    await mountComponents(base, component);
-    return handleClose;
-  }
-
-  static onMousedown(event: any) {
-    if (event.buttons !== 1 || event.button !== 0) return;
-    if (event.srcElement.className !== 'fwin-title') return;
-
-    this.pressed = true;
-    this.startX = event.clientX;
-    this.startY = event.clientY;
-    const nodeStyle = document.defaultView!.getComputedStyle(this.hostNode);
-    this.startTop = parseInt(nodeStyle['top'], 10);
-    this.startLeft = parseInt(nodeStyle['left'], 10);
-  }
-
-  static onMousemove(event: any) {
-    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
-      return;
-    }
-
-    // prevent text/element selection when drag
-    stopPropagation(event);
-    if (
-      event.clientX < 0 ||
-      event.clientY < 0 ||
-      event.clientX > window.innerWidth ||
-      event.clientY > window.innerHeight
-    ) {
-      return;
-    }
-
-    let movedX = this.startLeft + (event.clientX - this.startX);
-    let movedY = this.startTop + (event.clientY - this.startY);
-    if (movedY <= 0) movedY = 0;
-    if (movedX <= 0) movedX = 0;
-
-    this.hostNode.style.top = movedY + 'px';
-    this.hostNode.style.left = movedX + 'px';
-  }
-
-  static onMouseup() {
-    if (this.pressed) this.pressed = false;
-  }
-}

package/src/components/grid.tsx

@@ -1,18 +0,0 @@
-export const Grid = ({ gridOption }: { gridOption: any }) => {
-  const cssContainer: any = {
-    display: 'grid',
-    ...gridOption.options,
-  };
-  const cells: any = [];
-  gridOption.cells.forEach((cell: any, index: number) => {
-    const name = cell.name || 'cell' + index;
-    cssContainer[`.${name}`] = cell.option;
-    cells.push(<div class={name}>{cell.component}</div>);
-  });
-  const className = 'grid-box' + (gridOption.className ? ` ${gridOption.className}` : '');
-  return (
-    <div css={cssContainer} class={className}>
-      {cells}
-    </div>
-  );
-};

package/src/components/html-var.tsx

@@ -1,41 +0,0 @@
-import { mountComponents } from '../core/mount-components';
-import { RefProps, VNode } from '../jsx';
-
-export const HtmlVar = (initial?: string | VNode<any>) => {
-  let _value: string | VNode<any> = initial || '';
-  let _dirty = false;
-  const waitUpdate = async (value: string | VNode<any>) => {
-    if (!ref.current) return;
-    if (typeof value === 'object' && value.type && value.props) {
-      await mountComponents(ref.current, value);
-    } else {
-      ref.current.innerHTML = value;
-    }
-    _dirty = false;
-  }
-  const ref: RefProps = { onLoad: async (el: Element) => {
-    _dirty && waitUpdate(_value);
-  } };
-  const FragmentRef = (props: any) => {
-    return <>{props.children}</>;
-  };
-
-  return {
-    set value(value: string | VNode<any>) {
-      _value = value;
-      _dirty = true;
-      waitUpdate(value);
-    },
-    get value() {
-      return ref.current ? ref.current.innerHTML : _value;
-    },
-    get ref() {
-      return ref;
-    },
-    // _fragment_ref is a special id to add ref to a fragment and it is processed in mount-components
-    get node() {
-      _dirty = false;
-      return <FragmentRef _fragment_ref={ref}>{_value}</FragmentRef>;
-    },
-  };
-};

package/src/components/index.ts

@@ -1,36 +0,0 @@
-
-export * from './button-push-animation';
-export * from './button';
-export * from './drag-refresh';
-export * from './editable-label';
-export * from './float-window';
-export * from './grid';
-export * from './html-var';
-export * from './input-with-title';
-export * from './link-item';
-export * from './link-list';
-export * from './menu-bar';
-export * from './menu-item-props';
-export * from './menu-sidebar';
-export * from './message-box';
-export * from './meta-data';
-export * from './meta-title';
-export * from './meta-description';
-export * from './meta-title';
-export * from './modal';
-export * from './notice-message';
-export * from './paging-link';
-export * from './panel';
-export * from './popup-menu';
-export * from './progress';
-export * from './redirect';
-export * from './resizable-splitter';
-export * from './select-with-title';
-export * from './spinner';
-export * from './svg';
-export * from './text-glow';
-export * from './text-wave';
-export * from './tabs';
-export * from './theme-selector';
-export * from './toggle-base';
-export * from './toggle-switch';

package/src/components/input-with-title.tsx

@@ -1,24 +0,0 @@
-// used in MessageBox.show
-export const InputWithTitle = (
-  title: string,
-  defaultValue: string,
-  onInputChanged?: (option: string) => void,
-  onInputInputed?: (option: string) => void,
-  className = 'input-base',
-  width = '100%',
-) => {
-  return (
-    <div>
-      <div>{title}</div>
-      <div>
-        <input
-          class={className}
-          style={{ width }}
-          onChange={(e: any) => onInputChanged?.(e?.target?.value)}
-          onInput={(e: any) => onInputInputed?.(e?.target?.value)}
-          value={defaultValue}
-        />
-      </div>
-    </div>
-  );
-};

package/src/components/link-item.tsx

@@ -1,13 +0,0 @@
-export type LinkItemProps = {
-  className?: string;
-  text: string;
-  url: string;
-  alt?: string;
-};
-export const LinkItem = (props: LinkItemProps) => {
-  return (
-    <a class={['link-item', props.className].join(' ')} href={props.url} alt={props.alt || props.text}>
-      {props.text}
-    </a>
-  );
-};

package/src/components/link-list.tsx

@@ -1,62 +0,0 @@
-import { LinkItem } from './link-item';
-import { NestMenuItemProps } from './menu-item-props';
-
-export type LinkListProps = {
-  title: string;
-  items: NestMenuItemProps[];
-  className?: string;
-  textColor?: string;
-  backgroundColor?: string;
-  titleBackgroundColor?: string;
-};
-export const LinkList = ({
-  title,
-  items,
-  className,
-  textColor = 'black',
-  backgroundColor = '#d3d3d3',
-  titleBackgroundColor = '#b6b6b6',
-}: LinkListProps) => {
-  const css: any = {
-    width: '100%',
-    margin: 'auto',
-    height: 'auto',
-    backgroundColor,
-    '.link-list-title, .link-list-top': {
-      display: 'flex',
-      width: '100%',
-      flexWrap: 'wrap',
-      padding: '0 16px',
-    },
-    '.link-list-title': {
-      backgroundColor: titleBackgroundColor,
-    },
-    '.link-list-item': {
-      display: 'inline-block',
-      color: textColor,
-      padding: '8px 16px 8px 0',
-      textDecoration: 'none',
-    },
-    '.link-list-item:last-child': {
-      paddingRight: 'unset',
-    },
-    '.link-list-title .link-list-item': {
-      fontSize: '18px',
-    },
-  };
-
-  return (
-    <div css={css} class={['link-list-box', className].join(' ')}>
-      {title && (
-        <div class='link-list-title'>
-          <div class='link-list-item'>{title}</div>
-        </div>
-      )}
-      <div class='link-list-top'>
-        {items.map((item) => {
-          return <LinkItem className='link-list-item' url={item.url} alt={item.alt} text={item.text} />;
-        })}
-      </div>
-    </div>
-  );
-};

package/src/components/menu-bar.tsx

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

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