lupine.web 1.0.14

package/src/components/notice-message.tsx

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

@@ -0,0 +1,100 @@
+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> : <></>;
+};

package/src/components/panel.tsx

@@ -0,0 +1,24 @@
+import { CssProps, JSXInternal } from '../jsx';
+import { ContentPosition, Position } from '../types';
+
+export type PanelProps = {
+  children: any;
+  className?: string;
+  contentPosition?: ContentPosition;
+  css?: CssProps;
+};
+
+export const Panel = ({ children, className, css }: PanelProps) => {
+  const newCss: CssProps = {
+    display: 'flex',
+    flexDirection: 'column',
+    // justifyContent: ContentPosition.center,
+    ...css,
+  };
+
+  return (
+    <div css={newCss} class={['panel-box', className].join(' ')}>
+      {children}
+    </div>
+  );
+};

package/src/components/popup-menu.tsx

@@ -0,0 +1,218 @@
+import { RefProps, stopPropagation } from 'lupine.js';
+
+export type PopupMenuOpenMenuProps = { handle?: Function };
+
+export type PopupMenuProps = {
+  list: string[];
+  defaultValue: string;
+  tips?: string;
+  minWidth?: string;
+  maxWidth?: string;
+  maxHeight?: string;
+  handleSelected?: Function;
+  handleOpened?: Function;
+  handleClosed?: Function;
+  noUpdateValue?: boolean;
+  refOpenMenu?: PopupMenuOpenMenuProps;
+};
+
+export type PopupMenuWithButtonProps = { label: string } & PopupMenuProps;
+
+export const PopupMenuWithButton = (props: PopupMenuWithButtonProps) => {
+  const handle: PopupMenuOpenMenuProps = {};
+  return (
+    <button
+      class='button-base'
+      onClick={() => {
+        handle.handle && handle.handle();
+      }}
+      css={{ '>div': { float: 'right', textAlign: 'left' } }}
+    >
+      {props.label}:{' '}
+      <PopupMenu
+        list={props.list}
+        defaultValue={props.defaultValue}
+        tips={props.tips}
+        minWidth={props.minWidth}
+        maxWidth={props.maxWidth}
+        maxHeight={props.maxHeight}
+        handleSelected={props.handleSelected}
+        handleOpened={props.handleOpened}
+        handleClosed={props.handleClosed}
+        noUpdateValue={props.noUpdateValue}
+        refOpenMenu={handle}
+      ></PopupMenu>
+    </button>
+  );
+};
+
+export type PopupMenuWithLabelProps = { label: string } & PopupMenuProps;
+
+export const PopupMenuWithLabel = (props: PopupMenuWithLabelProps) => {
+  const handle: PopupMenuOpenMenuProps = {};
+  return (
+    <div
+      onClick={() => {
+        handle.handle && handle.handle();
+      }}
+      css={{ cursor: 'pointer', '>div': { float: 'right', textAlign: 'left' } }}
+    >
+      {props.label}:{' '}
+      <PopupMenu
+        list={props.list}
+        defaultValue={props.defaultValue}
+        tips={props.tips}
+        minWidth={props.minWidth}
+        maxWidth={props.maxWidth}
+        maxHeight={props.maxHeight}
+        handleSelected={props.handleSelected}
+        handleOpened={props.handleOpened}
+        handleClosed={props.handleClosed}
+        noUpdateValue={props.noUpdateValue}
+        refOpenMenu={handle}
+      ></PopupMenu>
+    </div>
+  );
+};
+
+export const PopupMenu = ({
+  list,
+  defaultValue,
+  tips = '',
+  minWidth,
+  maxWidth,
+  maxHeight,
+  handleSelected,
+  handleOpened,
+  handleClosed,
+  noUpdateValue,
+  refOpenMenu,
+}: PopupMenuProps) => {
+  const css: any = {
+    '.popup-menu-item': {
+      padding: '0 0 1px 0',
+      display: 'inline-block',
+      position: 'relative',
+      '.popup-menu-text': {
+        display: 'inline-block',
+        cursor: 'pointer',
+        whiteSpace: 'nowrap',
+        marginRight: '15px',
+      },
+      // cover-box-shadow
+      '.popup-menu-text::after': {
+        content: '""',
+        position: 'absolute',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        marginLeft: '3px',
+        width: 0,
+        height: 0,
+        borderLeft: '5px solid transparent',
+        borderRight: '5px solid transparent',
+        borderTop: '5px solid var(--primary-color)',
+      },
+    },
+    '.popup-menu-item:hover': {
+      padding: '1px 0 0 0',
+    },
+    '.popup-menu-bottom': {
+      position: 'relative',
+      height: '1px',
+      '.popup-menu-list': {
+        display: 'none',
+        position: 'absolute',
+        fontSize: 'var(--menu-font-size)',
+        top: 0,
+        left: '2px',
+        color: 'var(--activatable-color-normal)',
+        backgroundColor: 'var(--activatable-bg-color-normal)',
+        zIndex: 'var(--layer-menu)',
+        borderRadius: '4px',
+        border: '1px solid #ddd',
+        padding: '5px 0px',
+        overflow: 'auto',
+        'line-height': '1.2em',
+        'min-width': minWidth || 'auto',
+        'max-width': maxWidth || '200px',
+        'max-height': maxHeight || '300px',
+        'box-shadow': 'var(--cover-box-shadow)', //'#0000004c 0px 19px 38px, #00000038 0px 15px 12px',
+        '.menu-focus': {
+          position: 'absolute',
+          height: '0px',
+        },
+        '.item': {
+          padding: '2px 12px',
+        },
+        '.item:hover': {
+          padding: '2px 11px 2px 13px',
+          color: 'var(--activatable-color-hover)',
+          backgroundColor: 'var(--activatable-bg-color-hover)',
+          cursor: 'pointer',
+        },
+      },
+    },
+  };
+
+  let ref: RefProps = { id: '' };
+  let isShowing = false;
+  const handleClick = (event: any) => {
+    stopPropagation(event);
+
+    handleOpened && handleOpened();
+    // console.log('=======22', event);
+    isShowing = !isShowing;
+    ref.$('.popup-menu-list').style.display = isShowing ? 'inline-block' : 'none';
+    ref.$('.popup-menu-list .menu-focus').focus();
+  };
+  if (refOpenMenu) {
+    refOpenMenu.handle = handleClick;
+  }
+  const itemClick = (event: any) => {
+    stopPropagation(event);
+
+    // console.log('=======', event);
+    isShowing = false;
+    ref.$('.popup-menu-list').style.display = 'none';
+    if (event.target) {
+      if (noUpdateValue !== true) {
+        ref.$('.popup-menu-item .popup-menu-text').innerText = event.target.innerText;
+      }
+      if (handleSelected) {
+        handleSelected(event.target.innerText);
+      }
+    }
+    handleClosed && handleClosed();
+  };
+  const onBlur = (event: any) => {
+    setTimeout(() => {
+      ref.$('.popup-menu-list').style.display = 'none';
+      isShowing && handleClosed && handleClosed();
+      isShowing = false;
+    }, 300);
+  };
+
+  return (
+    <div ref={ref} css={css} onClick={handleClick} title={tips}>
+      <div class='popup-menu-item'>
+        <span class='popup-menu-text'>{defaultValue || '&nbsp;'}</span>
+      </div>
+      <div class='popup-menu-bottom'>
+        <div class='popup-menu-list'>
+          <div>
+            {list.map((item) => {
+              return item === '' ? (
+                <hr />
+              ) : (
+                <div class='item' onClick={itemClick}>
+                  {item}
+                </div>
+              );
+            })}
+          </div>
+          <div class='menu-focus' onBlur={onBlur} tabIndex={0}></div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/progress.tsx

@@ -0,0 +1,91 @@
+import { RefProps } from '../jsx';
+import { HtmlVar } from './html-var';
+
+export type ProgressHookProps = {
+  onProgress?: (percentage: number, chunkNumber: number, totalChunks: number) => void;
+  onShow?: (show: boolean, title?: string) => void;
+};
+export type ProgressProps = {
+  hook: ProgressHookProps;
+};
+
+export const Progress = (props: ProgressProps) => {
+  const css: any = {
+    position: 'fixed',
+    display: 'flex',
+    bottom: '0',
+    left: '0',
+    width: '100%',
+    zIndex: 'var(--layer-modal-over)',
+    flexDirection: 'column',
+    backgroundColor: '#e6e6e6de',
+    padding: '16px',
+    '.progress-box': {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: 'auto',
+      margin: 'auto',
+    },
+    '.progress-bar': {
+      display: 'flex',
+      width: '100%',
+      height: '60px',
+      borderRadius: '4px',
+      overflow: 'hidden',
+    },
+    '.progress-bar1': {
+      height: '100%',
+      width: '0%',
+      backgroundColor: '#49e57e',
+    },
+    '.progress-bar2': {
+      height: '100%',
+      width: '100%',
+      backgroundColor: '#2bb8cd',
+    },
+    '.progress-tips': {
+      marginTop: '10px',
+      fontSize: '30px',
+      color: '#49e57e',
+    },
+  };
+
+  props.hook.onProgress = (percentage: number, chunkNumber: number, totalChunks: number) => {
+    // console.log(`Upload progress: ${percentage}% (chunk ${chunkNumber} of ${totalChunks})`);
+    percentage = Math.round(percentage * 100);
+    const bar1 = document.querySelector('.progress-bar1') as HTMLElement;
+    const bar2 = document.querySelector('.progress-bar2') as HTMLElement;
+    bar1.style.width = `${percentage}%`;
+    bar2.style.width = `${1 - percentage}%`;
+    dom.value = `${percentage}%`;
+  };
+  props.hook.onShow = (show: boolean, title?: string) => {
+    if (title) {
+      domTitle.value = title;
+    }
+    if (show) {
+      ref.current?.classList.remove('d-none');
+    } else {
+      ref.current?.classList.add('d-none');
+    }
+  };
+
+  const ref: RefProps = {};
+  const domTitle = HtmlVar('Progress');
+  const dom = HtmlVar('0 %');
+  return (
+    <div ref={ref} css={css} class='progress-top d-none'>
+      <div class='progress-box'>
+        <div class='progress-title mb-m align-left w-100p'>{domTitle.node}</div>
+        <div class='progress-bar'>
+          <div class='progress-bar1'></div>
+          <div class='progress-bar2'></div>
+        </div>
+        <div class='progress-tips'>{dom.node}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/redirect.tsx

@@ -0,0 +1,19 @@
+import { RefProps } from '../jsx';
+
+export type RedirectProps = {
+  title?: string;
+  url: string;
+  delaySeconds?: number;
+};
+export const Redirect = ({ title = 'redirect...', url, delaySeconds = 0 }: RedirectProps) => {
+  // if SSR is disabled, then MetaData will not be working
+  // MetaData({ httpEquiv: 'refresh', content: delaySeconds + ';URL=' + url });
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      setTimeout(() => {
+        window.location.href = url;
+      }, delaySeconds * 1000);
+    },
+  };
+  return <div ref={ref}>{title}</div>;
+};

package/src/components/resizable-splitter.tsx

@@ -0,0 +1,129 @@
+import { bindGlobalStyles } from '../core';
+import { CssProps } from '../jsx';
+import { stopPropagation } from '../lib';
+/**
+How to use:
+  // getSplitter's first parameter is the container's selector where the Splitter will be in.
+  // the second parameter is whether it's Vertical
+  // then the third parameter is it's RightOrTop or not
+  const locationLeft = false;
+  const splitter = ResizableSplitter.getSplitter('.body .side', true, locationLeft);
+  const container = (
+        <div class='body'>
+            <div class='side'>
+              {splitter}
+              {designPanel}
+            </div>
+          ...
+
+*/
+export class ResizableSplitter {
+  static hostNode: HTMLElement;
+  static isVertical = true;
+  static isRightOrTop = true;
+
+  private static initialized = false;
+  private static startXorY = 0;
+  private static startWidthOrHeight = 0;
+  private static pressed = false;
+
+  static init() {
+    /* styles for resizable splitter */
+    const css: CssProps = {
+      '.resizable-splitter-v-left, .resizable-splitter-v-right': {
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        left: 0,
+        width: '2px',
+        cursor: 'col-resize',
+      },
+      '.resizable-splitter-v-right': {
+        left: 'unset',
+        right: 0,
+      },
+      '.resizable-splitter-v-left:hover, .resizable-splitter-v-right:hover': {
+        width: '4px',
+        backgroundColor: '#ccc',
+      },
+
+      '.resizable-splitter-h-top, .resizable-splitter-h-bottom': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '2px',
+        cursor: 'row-resize',
+      },
+      '.resizable-splitter-h-bottom': {
+        top: 'unset',
+        bottom: 0,
+      },
+      '.resizable-splitter-h-top:hover, .resizable-splitter-h-bottom:hover': {
+        height: '4px',
+        backgroundColor: '#ccc',
+      },
+    };
+    bindGlobalStyles('resizable-splitter', 'html', css);
+
+    window.addEventListener('mousemove', ResizableSplitter.onMousemove.bind(ResizableSplitter), false);
+    document.documentElement.addEventListener('mouseup', ResizableSplitter.onMouseup.bind(ResizableSplitter), false);
+  }
+
+  static getSplitterClassName(isVertical: boolean, isRightOrTop: boolean): string {
+    const className =
+      'resizable-splitter-' +
+      (isVertical ? (isRightOrTop ? 'v-right' : 'v-left') : isRightOrTop ? 'h-top' : 'h-bottom');
+    return className;
+  }
+
+  static onMousedown(event: any) {
+    if (event.buttons !== 1 || event.button !== 0) return;
+    this.pressed = true;
+    this.startXorY = this.isVertical ? event.clientX : event.clientY;
+    const startPosition = document.defaultView!.getComputedStyle(this.hostNode)[this.isVertical ? 'width' : 'height'];
+    this.startWidthOrHeight = parseInt(startPosition, 10);
+  }
+
+  static onMousemove(event: any) {
+    if (!this.pressed || event.buttons !== 1 || event.button !== 0) {
+      return;
+    }
+
+    // prevent text/element selection when drag
+    stopPropagation(event);
+    if (this.isVertical) {
+      const movedXorY = this.startWidthOrHeight + (event.clientX - this.startXorY) * (this.isRightOrTop ? 1 : -1);
+      this.hostNode.style.width = movedXorY + 'px';
+    } else {
+      const movedXorY = this.startWidthOrHeight + (event.clientY - this.startXorY) * (this.isRightOrTop ? -1 : 1);
+      this.hostNode.style.height = movedXorY + 'px';
+    }
+  }
+
+  static onMouseup() {
+    if (this.pressed) this.pressed = false;
+  }
+
+  static getSplitter(selector: string, isVertical: boolean, isRightOrTop: boolean) {
+    const className = this.getSplitterClassName(isVertical, isRightOrTop);
+
+    const onMousedown = (event: any) => {
+      if (!this.initialized) {
+        this.initialized = true;
+        this.init();
+      }
+
+      ResizableSplitter.hostNode = document.querySelector(selector)!;
+      if (!ResizableSplitter.hostNode) {
+        console.error(`Can't find element: ${selector}`);
+        return;
+      }
+      ResizableSplitter.isVertical = isVertical;
+      ResizableSplitter.isRightOrTop = isRightOrTop;
+      ResizableSplitter.onMousedown.bind(ResizableSplitter)(event);
+    };
+
+    return <div onMouseDown={onMousedown} class={className}></div>;
+  }
+}