lupine.web 1.0.14

package/src/components/toggle-base.tsx

@@ -0,0 +1,260 @@
+import { CssProps, RefProps, VNode } from 'lupine.js';
+
+export const PlayButtonSize = {
+  Small: { w: 50, h: 50 },
+  Medium: { w: 70, h: 70 },
+  Large: { w: 90, h: 90 },
+};
+export type PlayButtonSizeProps = {
+  w: number;
+  h: number;
+};
+export type PlayButtonProps = {
+  size: PlayButtonSizeProps;
+  disabled?: boolean;
+  checked?: boolean;
+  onClick?: (checked: boolean) => void;
+  hook?: ToggleBaseHookProps;
+};
+export const PlayButton = (props: PlayButtonProps) => {
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    borderRadius: '50%',
+    backgroundColor: '#3b29cc',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '.play-icon': {
+      width: '50%',
+      height: '50%',
+      transition: 'all 0.2s ease-in-out',
+      backgroundColor: '#fff',
+      cursor: 'pointer',
+    },
+    '&.toggle-off .play-icon': {
+      clipPath: 'polygon(20% 0, 20% 100%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%, 90% 50%)',
+      translate: '6% 0',
+    },
+    '&.toggle-on .play-icon': {
+      clipPath: 'polygon(0 0, 0 100%, 33.33% 100%, 33.33% 0, 66.66% 0, 100% 0, 100% 100%, 66.66% 100%, 66.66% 0)',
+      translate: '0 0',
+    },
+    '&.disabled': {
+      cursor: 'not-allowed',
+      backgroundColor: '#5d578b',
+    },
+  };
+  return (
+    <ToggleBase {...props}>
+      <ToggleWaveFrame>
+        <div
+          css={css}
+          class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
+            props.disabled ? ' disabled' : ''
+          }`}
+        >
+          <div class='play-icon'></div>
+        </div>
+      </ToggleWaveFrame>
+    </ToggleBase>
+  );
+};
+
+export type ToggleButtonProps = {
+  size: ToggleBaseSizeProps;
+  onText: string;
+  offText: string;
+  disabled?: boolean;
+  checked?: boolean;
+  onClick?: (checked: boolean) => void;
+  hook?: ToggleBaseHookProps;
+};
+export const ToggleButton = (props: ToggleButtonProps) => {
+  const css: CssProps = {
+    // width: `${props.size + 5}px`,
+    // height: `${props.size + 5}px`,
+    '&.disabled': {
+      cursor: 'not-allowed',
+    },
+    '&.toggle-on .on, &.toggle-off .off': {
+      display: 'block',
+    },
+    '&.toggle-on .off, &.toggle-off .on': {
+      display: 'none',
+    },
+  };
+  return (
+    <ToggleBase {...props}>
+      <div
+        css={css}
+        class={`toggle-button-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
+          props.disabled ? ' disabled' : ''
+        }`}
+      >
+        <div class='on'>{props.onText}</div>
+        <div class='off'>{props.offText}</div>
+      </div>
+    </ToggleBase>
+  );
+};
+
+export type ToggleWaveFrameProps = {
+  children: VNode<any>;
+};
+export const ToggleWaveFrame = (props: ToggleWaveFrameProps) => {
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    '@keyframes pulse-border': {
+      '0%': {
+        transform: 'scale(0.6)',
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'scale(1)',
+        opacity: 0,
+      },
+    },
+    '.toggle-waves': {
+      position: 'absolute',
+      width: `100%`,
+      height: `100%`,
+      top: '-0',
+      left: '0',
+      borderRadius: '50%',
+      backgroundColor: '#eb205580',
+      opacity: 0,
+      zIndex: -1,
+      animation: 'pulse-border 3s ease-in-out infinite',
+    },
+    '.toggle-waves-1': {
+      '-webkit-animation-delay': '0s',
+      'animation-delay': '0s',
+    },
+
+    '.toggle-waves-2': {
+      '-webkit-animation-delay': '1s',
+      'animation-delay': '1s',
+    },
+
+    '.toggle-waves-3': {
+      '-webkit-animation-delay': '2s',
+      'animation-delay': '2s',
+    },
+    '.toggle-waves-box': {
+      width: `100%`,
+      height: `100%`,
+      padding: `18%`,
+    },
+    '&.disabled .toggle-waves': {
+      backgroundColor: '#5d578b',
+    },
+  };
+  return (
+    <div css={css} class='toggle-waves-box toggle-placeholder'>
+      <div class='toggle-waves toggle-waves-1'></div>
+      <div class='toggle-waves toggle-waves-2'></div>
+      <div class='toggle-waves toggle-waves-3'></div>
+      <div class='toggle-waves-box'>{props.children}</div>
+    </div>
+  );
+};
+
+export const ToggleBaseSize = {
+  Small: { w: 30, h: 30 },
+  Medium: { w: 50, h: 50 },
+  Large: { w: 70, h: 70 },
+};
+export type ToggleBaseSizeProps = {
+  w: number | string;
+  h: number | string;
+};
+export type ToggleBaseHookProps = {
+  setChecked?: (checked: boolean) => void;
+  getChecked?: () => boolean;
+  setEnabled?: (enabled: boolean) => void;
+  getEnabled?: () => boolean;
+};
+export type ToggleBaseProps = {
+  size: ToggleBaseSizeProps;
+  disabled?: boolean;
+  checked?: boolean;
+  onClick?: (checked: boolean) => void;
+  hook?: ToggleBaseHookProps;
+  children: VNode<any>;
+};
+export const ToggleBase = (props: ToggleBaseProps) => {
+  const applyToggle = (checked: boolean, disabled: boolean) => {
+    const childDom = ref.$all('.toggle-base-container .toggle-placeholder');
+    childDom.forEach((dom: HTMLElement) => {
+      dom.classList.toggle('toggle-on', checked);
+      dom.classList.toggle('toggle-off', !checked);
+      dom.classList.toggle('disabled', disabled);
+    });
+  };
+  let disabled = props.disabled || false;
+  const ref: RefProps = {
+    onLoad: async (el: Element) => {
+      applyToggle(props.checked || false, disabled);
+    },
+  };
+  const onClick = (e: MouseEvent) => {
+    if (disabled) {
+      return;
+    }
+
+    const checked = (e.target as HTMLInputElement).checked;
+    applyToggle(checked, disabled);
+    if (props.onClick) {
+      props.onClick(checked);
+    }
+  };
+  if (props.hook) {
+    props.hook.setChecked = (checked: boolean) => {
+      (ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked = checked;
+      applyToggle(checked, disabled);
+    };
+    props.hook.getChecked = () => {
+      return (ref.$('input.toggle-base-checkbox') as HTMLInputElement).checked;
+    };
+    props.hook.setEnabled = (enabled: boolean) => {
+      disabled = !enabled;
+      const dom = ref.$('input.toggle-base-checkbox') as HTMLInputElement;
+      dom.disabled = disabled;
+      applyToggle(dom.checked, disabled);
+    };
+    props.hook.getEnabled = () => {
+      return !disabled;
+    };
+  }
+
+  const css: CssProps = {
+    width: `${typeof props.size.w === 'number' ? props.size.w + 'px' : props.size.w}`,
+    height: `${typeof props.size.h === 'number' ? props.size.h + 'px' : props.size.h}`,
+    '.toggle-base-box, .toggle-base-container': {
+      position: 'relative',
+      width: `100%`,
+      height: `100%`,
+    },
+    '.toggle-base-checkbox': {
+      opacity: 0,
+      position: 'absolute',
+      pointerEvents: 'none',
+    },
+  };
+  return (
+    <div ref={ref} css={css} class='toggle-base-component'>
+      <label class='toggle-base-box'>
+        <div class='toggle-base-container'>{props.children}</div>
+        <input
+          type='checkbox'
+          class='toggle-base-checkbox'
+          checked={props.checked || false}
+          disabled={disabled}
+          onClick={onClick}
+        />
+      </label>
+    </div>
+  );
+};

package/src/components/toggle-switch.tsx

@@ -0,0 +1,156 @@
+import { bindGlobalStyles, CssProps } from 'lupine.js';
+import { ToggleBase, ToggleBaseHookProps } from './toggle-base';
+
+export enum ToggleSwitchSize {
+  SmallSmall = 'smallsmall',
+  Small = 'small',
+  Medium = 'medium',
+  Large = 'large',
+}
+export type ToggleSwitchProps = {
+  size: ToggleSwitchSize;
+  text?: { on: string; off: string };
+  textWidth?: string;
+  disabled?: boolean;
+  checked?: boolean;
+  onClick?: (checked: boolean) => void;
+  hook?: ToggleBaseHookProps;
+};
+export const ToggleSwitch = (props: ToggleSwitchProps) => {
+  const sizeH =
+    props.size === ToggleSwitchSize.SmallSmall
+      ? 16
+      : props.size === ToggleSwitchSize.Small
+      ? 22
+      : props.size === ToggleSwitchSize.Large
+      ? 42
+      : 34;
+  const cssSize =
+    props.size === ToggleSwitchSize.SmallSmall
+      ? 'smallsmall'
+      : props.size === ToggleSwitchSize.Small
+      ? 'small'
+      : props.size === ToggleSwitchSize.Large
+      ? 'large'
+      : '';
+
+  const css: CssProps = {
+    width: `100%`,
+    height: `100%`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& .ts-slider': {
+      position: 'relative',
+      cursor: 'pointer',
+      backgroundColor: 'var(--toggle-background-color, #c7c7c7)',
+      transition: '.4s',
+      borderRadius: '34px',
+      height: '100%',
+      display: 'flex',
+      padding: '0 27px 0 37px',
+      alignItems: 'center',
+    },
+    '&.smallsmall .ts-slider': {
+      padding: '0 8px 0 22px',
+      fontSize: '0.65rem',
+    },
+    '&.small .ts-slider': {
+      padding: '0 17px 0 27px',
+      fontSize: '0.85rem',
+    },
+    '&.large .ts-slider': {
+      padding: '0 37px 0 57px',
+    },
+
+    '& .ts-slider .ts-circle': {
+      position: 'absolute',
+      content: '',
+      height: '26px',
+      width: '26px',
+      left: '4px',
+      bottom: '4px',
+      backgroundColor: 'var(--toggle-ball-color, #fff)',
+      transition: '.4s',
+      borderRadius: '50%',
+    },
+    '&.smallsmall .ts-slider .ts-circle': {
+      height: '12px',
+      width: '12px',
+      left: '2px',
+      bottom: '2px',
+    },
+    '&.small .ts-slider .ts-circle': {
+      height: '18px',
+      width: '18px',
+      left: '3px',
+      bottom: '2px',
+    },
+    '&.large .ts-slider .ts-circle': {
+      height: '38px',
+      width: '38px',
+      left: '4px',
+      bottom: '2px',
+    },
+
+    '& .ts-on-text, & .ts-off-text': {
+      display: 'none',
+      width: props.textWidth,
+    },
+    '&.toggle-on .ts-on-text': {
+      display: 'block',
+    },
+    '&.toggle-off .ts-off-text': {
+      display: 'block',
+    },
+
+    '&.toggle-on .ts-slider': {
+      backgroundColor: 'var(--primary-accent-color, #0a74c9)',
+      padding: '0 47px 0 17px',
+    },
+    '&.smallsmall.toggle-on .ts-slider': {
+      padding: '0 18px 0 12px',
+    },
+    '&.small.toggle-on .ts-slider': {
+      padding: '0 27px 0 17px',
+    },
+    '&.large.toggle-on .ts-slider': {
+      padding: '0 72px 0 22px',
+    },
+
+    '&.toggle-on .ts-slider .ts-circle': {
+      left: 'unset',
+      right: '3px',
+    },
+    '&.disabled .ts-slider': {
+      cursor: 'not-allowed',
+      opacity: 'var(--primary-disabled-opacity)',
+    },
+  };
+
+  // this is a sample to add variables for a theme
+  const cssTheme: CssProps = {
+    '[data-theme="dark" i]': {
+      '--toggle-ball-color': '#000000',
+      '--toggle-background-color': '#262626',
+    },
+  };
+
+  bindGlobalStyles('toggle-switch-theme', '', cssTheme);
+  return (
+    <ToggleBase {...props} size={{ w: 'auto', h: sizeH }}>
+      <div
+        css={css}
+        class={`toggle-switch-component toggle-placeholder ${props.checked ? 'toggle-on' : 'toggle-off'}${
+          props.disabled ? ' disabled' : ''
+        } ${cssSize}`}
+      >
+        <span class='ts-slider'>
+          <span class='ts-on-text'>{props.text?.on}</span>
+          <span class='ts-circle'></span>
+          <span class='ts-off-text'>{props.text?.off}</span>
+        </span>
+      </div>
+    </ToggleBase>
+  );
+};

package/src/core/bind-attributes.ts

@@ -0,0 +1,58 @@
+import { bindRef } from './bind-ref';
+
+export const bindAttributesChildren = (topEl: Element, children: any) => {
+  for (let i = 0; i < children.length; i++) {
+    const item = children[i];
+    if (item && item.type && item.props) {
+      bindAttributes(topEl, item.type, item.props);
+    } else if (item && Array.isArray(item)) {
+      bindAttributesChildren(topEl, item);
+    } else if (
+      typeof item !== 'undefined' &&
+      item !== null &&
+      typeof item !== 'string' &&
+      typeof item !== 'number' &&
+      typeof item !== 'boolean'
+    ) {
+      console.warn(`Unexpected children:`, item);
+    }
+  }
+};
+
+export const bindAttributes = (topEl: Element, type: any, props: any) => {
+  const newProps = (props._result && props._result.props) || props;
+  if (newProps._id) {
+    const el = topEl.querySelector(`[${newProps._id}]`);
+    if (el) {
+      for (let i in newProps) {
+        if (i === 'ref') {
+          bindRef(type, newProps, el);
+          // } else if (i === "css") {
+          //     mountStyles(`[${newProps._id}]`, `[${newProps._id}]`, newProps[i]);
+        } else if (i[0] === 'o' && i[1] === 'n') {
+          let name = i;
+          if (name.toLowerCase() in el) name = name.toLowerCase().slice(2);
+          else name = name.slice(2);
+          // console.log('===bind event', name, el);
+          el.addEventListener(name, newProps[i]);
+        }
+      }
+    }
+  }
+
+  if (newProps.children && Array.isArray(newProps.children)) {
+    bindAttributesChildren(topEl, newProps.children);
+  } else if (newProps._result && newProps._result.type !== 'Fragment' && newProps._result.props) {
+    bindAttributes(topEl, newProps._result.type, newProps._result.props);
+  } else if (newProps.children && newProps.children.type && newProps.children.props) {
+    bindAttributes(topEl, newProps.children.type, newProps.children.props);
+  } else if (
+    !newProps.children ||
+    typeof newProps.children === 'string' ||
+    typeof newProps.children === 'number' ||
+    typeof newProps.children === 'boolean'
+  ) {
+  } else {
+    console.warn(`Unexpected children:`, newProps.children, type, props);
+  }
+};

package/src/core/bind-lang.ts

@@ -0,0 +1,51 @@
+import { DomUtils } from '../lib';
+import { getEitherCookie } from './server-cookie';
+
+// The FE only loads one language for the consideration of the size
+
+export const defaultLangName = 'en';
+export const langCookieName = 'lang';
+export const updateLangEventName = 'updateLang';
+const _langCfg: any = { defaultLang: defaultLangName, langs: {} };
+export type OneLangProps = { [key: string]: string };
+export const bindLang = (defaultLang: string, langs: OneLangProps) => {
+  _langCfg.defaultLang = defaultLang;
+  _langCfg.langs = langs;
+
+  // set to cookie
+  getCurrentLang();
+};
+
+export const getCurrentLang = () => {
+  let langName = getEitherCookie(langCookieName) as string;
+  if (!langName || !_langCfg.langs[langName]) {
+    langName = _langCfg.defaultLang;
+    if (typeof window !== 'undefined') {
+      DomUtils.setCookie(langCookieName, _langCfg.defaultLang);
+    }
+  }
+  return { langName, langs: _langCfg.langs };
+};
+
+// the FE needs to reload the page when the language is changed
+export const updateLang = (langName: string) => {
+  // Lang is only updated in Browser
+  _langCfg.defaultLang = langName;
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  DomUtils.setCookie(langCookieName, langName);
+  // document.documentElement.setAttribute(langAttributeName, langName);
+
+  // // update lang for all iframe
+  // const allIframe = document.querySelectorAll('iframe');
+  // for (let i = 0; i < allIframe.length; i++) {
+  //   if (allIframe[i].contentWindow && allIframe[i].contentWindow!.top === window) {
+  //     allIframe[i].contentWindow!.document.documentElement.setAttribute(langAttributeName, langName);
+  //   }
+  // }
+
+  const event = new CustomEvent(updateLangEventName, { detail: langName });
+  window.dispatchEvent(event);
+};

package/src/core/bind-links.ts

@@ -0,0 +1,16 @@
+import { initializePage } from './core';
+
+export function bindLinks(el: Element | Document) {
+  const links = el.getElementsByTagName('a');
+  for (var i = 0, l = links.length; i < l; i++) {
+    let href = new URL(links[i].href, document.baseURI).href;
+    if (links[i].target !== '_blank' && href.startsWith(document.location.origin)) {
+      href = href.substring(document.location.origin.length);
+      // console.log(`====${href}, javascript:init('${document.links[i].href}')`);
+      links[i].onclick = () => {
+        initializePage(href);
+        return false;
+      };
+    }
+  }
+}

package/src/core/bind-ref.ts

@@ -0,0 +1,33 @@
+// import { mountSelfComponents, renderComponent } from "./mount-components";
+
+export const bindRef = (type: any, newProps: any, el: Element) => {
+  // console.log('========', newProps, el);
+  const id = newProps._id;
+  // newProps["ref"].id = id; // this is set at bindAttributes
+  newProps['ref'].current = el;
+  if (newProps['ref'].onLoad) {
+    // setTimeout(() => newProps['ref'].onLoad(el), 0);
+    const defer = Promise.prototype.then.bind(Promise.resolve());
+    defer(() => newProps['ref'].onLoad(el));
+  }
+  if (newProps['ref'].onUnload) {
+    (el as any)._lj = (el as any)._lj || {};
+    (el as any)._lj.onUnload = async () => {
+      await newProps['ref'].onUnload(el);
+    };
+  }
+
+  /**
+   * ref.$('selector')
+   * @param selector
+   * @returns Element
+   */
+  newProps['ref'].$ = (selector: string) => {
+    return el.querySelector(`[${id}] ` + selector);
+    // const dom = LiteDom.queryOne(el);
+    // return dom && dom.$(selector, value);
+  };
+  newProps['ref'].$all = (selector: string) => {
+    return el.querySelectorAll(`[${id}] ` + selector);
+  };
+};