mdui 1.0.2 → 2.0.0

package/src/components/menu/index.ts

@@ -1,725 +0,0 @@
-import $ from 'mdui.jq/es/$';
-import contains from 'mdui.jq/es/functions/contains';
-import extend from 'mdui.jq/es/functions/extend';
-import { JQ } from 'mdui.jq/es/JQ';
-import 'mdui.jq/es/methods/addClass';
-import 'mdui.jq/es/methods/attr';
-import 'mdui.jq/es/methods/children';
-import 'mdui.jq/es/methods/css';
-import 'mdui.jq/es/methods/data';
-import 'mdui.jq/es/methods/each';
-import 'mdui.jq/es/methods/find';
-import 'mdui.jq/es/methods/first';
-import 'mdui.jq/es/methods/hasClass';
-import 'mdui.jq/es/methods/height';
-import 'mdui.jq/es/methods/is';
-import 'mdui.jq/es/methods/on';
-import 'mdui.jq/es/methods/parent';
-import 'mdui.jq/es/methods/parents';
-import 'mdui.jq/es/methods/removeClass';
-import 'mdui.jq/es/methods/width';
-import Selector from 'mdui.jq/es/types/Selector';
-import mdui from '../../mdui';
-import '../../jq_extends/methods/transformOrigin';
-import '../../jq_extends/methods/transitionEnd';
-import '../../jq_extends/static/throttle';
-import { componentEvent } from '../../utils/componentEvent';
-import { $document, $window } from '../../utils/dom';
-
-declare module '../../interfaces/MduiStatic' {
-  interface MduiStatic {
-    /**
-     * Menu 组件
-     *
-     * 请通过 `new mdui.Menu()` 调用
-     */
-    Menu: {
-      /**
-       * 实例化 Menu 组件
-       * @param anchorSelector 触发菜单的元素的 CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param menuSelector 菜单的 CSS 选择器、或 DOM 元素、或 JQ 对象
-       * @param options 配置参数
-       */
-      new (
-        anchorSelector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        menuSelector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-        options?: OPTIONS,
-      ): Menu;
-    };
-  }
-}
-
-type OPTIONS = {
-  /**
-   * 菜单相对于触发它的元素的位置，默认为 `auto`。
-   * 取值范围包括：
-   *   `top`: 菜单在触发它的元素的上方
-   *   `bottom`: 菜单在触发它的元素的下方
-   *   `center`: 菜单在窗口中垂直居中
-   *   `auto`: 自动判断位置。优先级为：`bottom` > `top` > `center`
-   */
-  position?: 'auto' | 'top' | 'bottom' | 'center';
-
-  /**
-   * 菜单与触发它的元素的对其方式，默认为 `auto`。
-   * 取值范围包括：
-   *   `left`: 菜单与触发它的元素左对齐
-   *   `right`: 菜单与触发它的元素右对齐
-   *   `center`: 菜单在窗口中水平居中
-   *   `auto`: 自动判断位置：优先级为：`left` > `right` > `center`
-   */
-  align?: 'auto' | 'left' | 'right' | 'center';
-
-  /**
-   * 菜单与窗口边框至少保持多少间距，单位为 px，默认为 `16`
-   */
-  gutter?: number;
-
-  /**
-   * 菜单的定位方式，默认为 `false`。
-   * 为 `true` 时，菜单使用 fixed 定位。在页面滚动时，菜单将保持在窗口固定位置，不随滚动条滚动。
-   * 为 `false` 时，菜单使用 absolute 定位。在页面滚动时，菜单将随着页面一起滚动。
-   */
-  fixed?: boolean;
-
-  /**
-   * 菜单是否覆盖在触发它的元素的上面，默认为 `auto`
-   * 为 `true` 时，使菜单覆盖在触发它的元素的上面
-   * 为 `false` 时，使菜单不覆盖触发它的元素
-   * 为 `auto` 时，简单菜单覆盖触发它的元素。级联菜单不覆盖触发它的元素
-   */
-  covered?: boolean | 'auto';
-
-  /**
-   * 子菜单的触发方式，默认为 `hover`
-   * 为 `click` 时，点击时触发子菜单
-   * 为 `hover` 时，鼠标悬浮时触发子菜单
-   */
-  subMenuTrigger?: 'click' | 'hover';
-
-  /**
-   * 子菜单的触发延迟时间（单位：毫秒），只有在 `subMenuTrigger: hover` 时，这个参数才有效，默认为 `200`
-   */
-  subMenuDelay?: number;
-};
-
-type EVENT = 'open' | 'opened' | 'close' | 'closed';
-type STATE = 'opening' | 'opened' | 'closing' | 'closed';
-
-const DEFAULT_OPTIONS: OPTIONS = {
-  position: 'auto',
-  align: 'auto',
-  gutter: 16,
-  fixed: false,
-  covered: 'auto',
-  subMenuTrigger: 'hover',
-  subMenuDelay: 200,
-};
-
-class Menu {
-  /**
-   * 触发菜单的元素的 JQ 对象
-   */
-  public $anchor: JQ;
-
-  /**
-   * 菜单元素的 JQ 对象
-   */
-  public $element: JQ;
-
-  /**
-   * 配置参数
-   */
-  public options: OPTIONS = extend({}, DEFAULT_OPTIONS);
-
-  /**
-   * 当前菜单状态
-   */
-  private state: STATE = 'closed';
-
-  /**
-   * 是否是级联菜单
-   */
-  private isCascade: boolean;
-
-  /**
-   * 菜单是否覆盖在触发它的元素的上面
-   */
-  private isCovered: boolean;
-
-  public constructor(
-    anchorSelector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    menuSelector: Selector | HTMLElement | ArrayLike<HTMLElement>,
-    options: OPTIONS = {},
-  ) {
-    this.$anchor = $(anchorSelector).first();
-    this.$element = $(menuSelector).first();
-
-    // 触发菜单的元素 和 菜单必须是同级的元素，否则菜单可能不能定位
-    if (!this.$anchor.parent().is(this.$element.parent())) {
-      throw new Error('anchorSelector and menuSelector must be siblings');
-    }
-
-    extend(this.options, options);
-
-    // 是否是级联菜单
-    this.isCascade = this.$element.hasClass('mdui-menu-cascade');
-
-    // covered 参数处理
-    this.isCovered =
-      this.options.covered === 'auto' ? !this.isCascade : this.options.covered!;
-
-    // 点击触发菜单切换
-    this.$anchor.on('click', () => this.toggle());
-
-    // 点击菜单外面区域关闭菜单
-    $document.on('click touchstart', (event: Event) => {
-      const $target = $(event.target as HTMLElement);
-
-      if (
-        this.isOpen() &&
-        !$target.is(this.$element) &&
-        !contains(this.$element[0], $target[0]) &&
-        !$target.is(this.$anchor) &&
-        !contains(this.$anchor[0], $target[0])
-      ) {
-        this.close();
-      }
-    });
-
-    // 点击不含子菜单的菜单条目关闭菜单
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-    $document.on('click', '.mdui-menu-item', function () {
-      const $item = $(this);
-
-      if (
-        !$item.find('.mdui-menu').length &&
-        $item.attr('disabled') === undefined
-      ) {
-        that.close();
-      }
-    });
-
-    // 绑定点击或鼠标移入含子菜单的条目的事件
-    this.bindSubMenuEvent();
-
-    // 窗口大小变化时，重新调整菜单位置
-    $window.on(
-      'resize',
-      $.throttle(() => this.readjust(), 100),
-    );
-  }
-
-  /**
-   * 是否为打开状态
-   */
-  private isOpen(): boolean {
-    return this.state === 'opening' || this.state === 'opened';
-  }
-
-  /**
-   * 触发组件事件
-   * @param name
-   */
-  private triggerEvent(name: EVENT): void {
-    componentEvent(name, 'menu', this.$element, this);
-  }
-
-  /**
-   * 调整主菜单位置
-   */
-  private readjust(): void {
-    let menuLeft;
-    let menuTop;
-
-    // 菜单位置和方向
-    let position: 'bottom' | 'top' | 'center';
-    let align: 'left' | 'right' | 'center';
-
-    // window 窗口的宽度和高度
-    const windowHeight = $window.height();
-    const windowWidth = $window.width();
-
-    // 配置参数
-    const gutter = this.options.gutter!;
-    const isCovered = this.isCovered;
-    const isFixed = this.options.fixed;
-
-    // 动画方向参数
-    let transformOriginX;
-    let transformOriginY;
-
-    // 菜单的原始宽度和高度
-    const menuWidth = this.$element.width();
-    const menuHeight = this.$element.height();
-
-    // 触发菜单的元素在窗口中的位置
-    const anchorRect = this.$anchor[0].getBoundingClientRect();
-    const anchorTop = anchorRect.top;
-    const anchorLeft = anchorRect.left;
-    const anchorHeight = anchorRect.height;
-    const anchorWidth = anchorRect.width;
-    const anchorBottom = windowHeight - anchorTop - anchorHeight;
-    const anchorRight = windowWidth - anchorLeft - anchorWidth;
-
-    // 触发元素相对其拥有定位属性的父元素的位置
-    const anchorOffsetTop = this.$anchor[0].offsetTop;
-    const anchorOffsetLeft = this.$anchor[0].offsetLeft;
-
-    // 自动判断菜单位置
-    if (this.options.position === 'auto') {
-      if (anchorBottom + (isCovered ? anchorHeight : 0) > menuHeight + gutter) {
-        // 判断下方是否放得下菜单
-        position = 'bottom';
-      } else if (
-        anchorTop + (isCovered ? anchorHeight : 0) >
-        menuHeight + gutter
-      ) {
-        // 判断上方是否放得下菜单
-        position = 'top';
-      } else {
-        // 上下都放不下，居中显示
-        position = 'center';
-      }
-    } else {
-      position = this.options.position!;
-    }
-
-    // 自动判断菜单对齐方式
-    if (this.options.align === 'auto') {
-      if (anchorRight + anchorWidth > menuWidth + gutter) {
-        // 判断右侧是否放得下菜单
-        align = 'left';
-      } else if (anchorLeft + anchorWidth > menuWidth + gutter) {
-        // 判断左侧是否放得下菜单
-        align = 'right';
-      } else {
-        // 左右都放不下，居中显示
-        align = 'center';
-      }
-    } else {
-      align = this.options.align!;
-    }
-
-    // 设置菜单位置
-    if (position === 'bottom') {
-      transformOriginY = '0';
-      menuTop =
-        (isCovered ? 0 : anchorHeight) +
-        (isFixed ? anchorTop : anchorOffsetTop);
-    } else if (position === 'top') {
-      transformOriginY = '100%';
-      menuTop =
-        (isCovered ? anchorHeight : 0) +
-        (isFixed ? anchorTop - menuHeight : anchorOffsetTop - menuHeight);
-    } else {
-      transformOriginY = '50%';
-
-      // =====================在窗口中居中
-      // 显示的菜单的高度，简单菜单高度不超过窗口高度，若超过了则在菜单内部显示滚动条
-      // 级联菜单内部不允许出现滚动条
-      let menuHeightTemp = menuHeight;
-
-      // 简单菜单比窗口高时，限制菜单高度
-      if (!this.isCascade) {
-        if (menuHeight + gutter * 2 > windowHeight) {
-          menuHeightTemp = windowHeight - gutter * 2;
-          this.$element.height(menuHeightTemp);
-        }
-      }
-
-      menuTop =
-        (windowHeight - menuHeightTemp) / 2 +
-        (isFixed ? 0 : anchorOffsetTop - anchorTop);
-    }
-
-    this.$element.css('top', `${menuTop}px`);
-
-    // 设置菜单对齐方式
-    if (align === 'left') {
-      transformOriginX = '0';
-      menuLeft = isFixed ? anchorLeft : anchorOffsetLeft;
-    } else if (align === 'right') {
-      transformOriginX = '100%';
-      menuLeft = isFixed
-        ? anchorLeft + anchorWidth - menuWidth
-        : anchorOffsetLeft + anchorWidth - menuWidth;
-    } else {
-      transformOriginX = '50%';
-
-      //=======================在窗口中居中
-      // 显示的菜单的宽度，菜单宽度不能超过窗口宽度
-      let menuWidthTemp = menuWidth;
-
-      // 菜单比窗口宽，限制菜单宽度
-      if (menuWidth + gutter * 2 > windowWidth) {
-        menuWidthTemp = windowWidth - gutter * 2;
-        this.$element.width(menuWidthTemp);
-      }
-
-      menuLeft =
-        (windowWidth - menuWidthTemp) / 2 +
-        (isFixed ? 0 : anchorOffsetLeft - anchorLeft);
-    }
-
-    this.$element.css('left', `${menuLeft}px`);
-
-    // 设置菜单动画方向
-    this.$element.transformOrigin(`${transformOriginX} ${transformOriginY}`);
-  }
-
-  /**
-   * 调整子菜单的位置
-   * @param $submenu
-   */
-  private readjustSubmenu($submenu: JQ): void {
-    const $item = $submenu.parent('.mdui-menu-item');
-
-    let submenuTop;
-    let submenuLeft;
-
-    // 子菜单位置和方向
-    let position: 'top' | 'bottom';
-    let align: 'left' | 'right';
-
-    // window 窗口的宽度和高度
-    const windowHeight = $window.height();
-    const windowWidth = $window.width();
-
-    // 动画方向参数
-    let transformOriginX;
-    let transformOriginY;
-
-    // 子菜单的原始宽度和高度
-    const submenuWidth = $submenu.width();
-    const submenuHeight = $submenu.height();
-
-    // 触发子菜单的菜单项的宽度高度
-    const itemRect = $item[0].getBoundingClientRect();
-    const itemWidth = itemRect.width;
-    const itemHeight = itemRect.height;
-    const itemLeft = itemRect.left;
-    const itemTop = itemRect.top;
-
-    // 判断菜单上下位置
-    if (windowHeight - itemTop > submenuHeight) {
-      // 判断下方是否放得下菜单
-      position = 'bottom';
-    } else if (itemTop + itemHeight > submenuHeight) {
-      // 判断上方是否放得下菜单
-      position = 'top';
-    } else {
-      // 默认放在下方
-      position = 'bottom';
-    }
-
-    // 判断菜单左右位置
-    if (windowWidth - itemLeft - itemWidth > submenuWidth) {
-      // 判断右侧是否放得下菜单
-      align = 'left';
-    } else if (itemLeft > submenuWidth) {
-      // 判断左侧是否放得下菜单
-      align = 'right';
-    } else {
-      // 默认放在右侧
-      align = 'left';
-    }
-
-    // 设置菜单位置
-    if (position === 'bottom') {
-      transformOriginY = '0';
-      submenuTop = '0';
-    } else if (position === 'top') {
-      transformOriginY = '100%';
-      submenuTop = -submenuHeight + itemHeight;
-    }
-
-    $submenu.css('top', `${submenuTop}px`);
-
-    // 设置菜单对齐方式
-    if (align === 'left') {
-      transformOriginX = '0';
-      submenuLeft = itemWidth;
-    } else if (align === 'right') {
-      transformOriginX = '100%';
-      submenuLeft = -submenuWidth;
-    }
-
-    $submenu.css('left', `${submenuLeft}px`);
-
-    // 设置菜单动画方向
-    $submenu.transformOrigin(`${transformOriginX} ${transformOriginY}`);
-  }
-
-  /**
-   * 打开子菜单
-   * @param $submenu
-   */
-  private openSubMenu($submenu: JQ): void {
-    this.readjustSubmenu($submenu);
-
-    $submenu
-      .addClass('mdui-menu-open')
-      .parent('.mdui-menu-item')
-      .addClass('mdui-menu-item-active');
-  }
-
-  /**
-   * 关闭子菜单，及其嵌套的子菜单
-   * @param $submenu
-   */
-  private closeSubMenu($submenu: JQ): void {
-    // 关闭子菜单
-    $submenu
-      .removeClass('mdui-menu-open')
-      .addClass('mdui-menu-closing')
-      .transitionEnd(() => $submenu.removeClass('mdui-menu-closing'))
-
-      // 移除激活状态的样式
-      .parent('.mdui-menu-item')
-      .removeClass('mdui-menu-item-active');
-
-    // 循环关闭嵌套的子菜单
-    $submenu.find('.mdui-menu').each((_, menu) => {
-      const $subSubmenu = $(menu);
-
-      $subSubmenu
-        .removeClass('mdui-menu-open')
-        .addClass('mdui-menu-closing')
-        .transitionEnd(() => $subSubmenu.removeClass('mdui-menu-closing'))
-        .parent('.mdui-menu-item')
-        .removeClass('mdui-menu-item-active');
-    });
-  }
-
-  /**
-   * 切换子菜单状态
-   * @param $submenu
-   */
-  private toggleSubMenu($submenu: JQ): void {
-    $submenu.hasClass('mdui-menu-open')
-      ? this.closeSubMenu($submenu)
-      : this.openSubMenu($submenu);
-  }
-
-  /**
-   * 绑定子菜单事件
-   */
-  private bindSubMenuEvent(): void {
-    // eslint-disable-next-line @typescript-eslint/no-this-alias
-    const that = this;
-
-    // 点击打开子菜单
-    this.$element.on('click', '.mdui-menu-item', function (event) {
-      const $item = $(this as HTMLElement);
-      const $target = $(event.target as HTMLElement);
-
-      // 禁用状态菜单不操作
-      if ($item.attr('disabled') !== undefined) {
-        return;
-      }
-
-      // 没有点击在子菜单的菜单项上时，不操作（点在了子菜单的空白区域、或分隔线上）
-      if ($target.is('.mdui-menu') || $target.is('.mdui-divider')) {
-        return;
-      }
-
-      // 阻止冒泡，点击菜单项时只在最后一级的 mdui-menu-item 上生效，不向上冒泡
-      if (!$target.parents('.mdui-menu-item').first().is($item)) {
-        return;
-      }
-
-      // 当前菜单的子菜单
-      const $submenu = $item.children('.mdui-menu');
-
-      // 先关闭除当前子菜单外的所有同级子菜单
-      $item
-        .parent('.mdui-menu')
-        .children('.mdui-menu-item')
-        .each((_, item) => {
-          const $tmpSubmenu = $(item).children('.mdui-menu');
-
-          if (
-            $tmpSubmenu.length &&
-            (!$submenu.length || !$tmpSubmenu.is($submenu))
-          ) {
-            that.closeSubMenu($tmpSubmenu);
-          }
-        });
-
-      // 切换当前子菜单
-      if ($submenu.length) {
-        that.toggleSubMenu($submenu);
-      }
-    });
-
-    if (this.options.subMenuTrigger === 'hover') {
-      // 临时存储 setTimeout 对象
-      let timeout: any = null;
-      let timeoutOpen: any = null;
-
-      this.$element.on(
-        'mouseover mouseout',
-        '.mdui-menu-item',
-        function (event) {
-          const $item = $(this as HTMLElement);
-          const eventType = event.type;
-          const $relatedTarget = $(
-            (event as MouseEvent).relatedTarget as HTMLElement,
-          );
-
-          // 禁用状态的菜单不操作
-          if ($item.attr('disabled') !== undefined) {
-            return;
-          }
-
-          // 用 mouseover 模拟 mouseenter
-          if (eventType === 'mouseover') {
-            if (
-              !$item.is($relatedTarget) &&
-              contains($item[0], $relatedTarget[0])
-            ) {
-              return;
-            }
-          }
-
-          // 用 mouseout 模拟 mouseleave
-          else if (eventType === 'mouseout') {
-            if (
-              $item.is($relatedTarget) ||
-              contains($item[0], $relatedTarget[0])
-            ) {
-              return;
-            }
-          }
-
-          // 当前菜单项下的子菜单，未必存在
-          const $submenu = $item.children('.mdui-menu');
-
-          // 鼠标移入菜单项时，显示菜单项下的子菜单
-          if (eventType === 'mouseover') {
-            if ($submenu.length) {
-              // 当前子菜单准备打开时，如果当前子菜单正准备着关闭，不用再关闭了
-              const tmpClose = $submenu.data('timeoutClose.mdui.menu');
-              if (tmpClose) {
-                clearTimeout(tmpClose);
-              }
-
-              // 如果当前子菜单已经打开，不操作
-              if ($submenu.hasClass('mdui-menu-open')) {
-                return;
-              }
-
-              // 当前子菜单准备打开时，其他准备打开的子菜单不用再打开了
-              clearTimeout(timeoutOpen);
-
-              // 准备打开当前子菜单
-              timeout = timeoutOpen = setTimeout(
-                () => that.openSubMenu($submenu),
-                that.options.subMenuDelay,
-              );
-
-              $submenu.data('timeoutOpen.mdui.menu', timeout);
-            }
-          }
-
-          // 鼠标移出菜单项时，关闭菜单项下的子菜单
-          else if (eventType === 'mouseout') {
-            if ($submenu.length) {
-              // 鼠标移出菜单项时，如果当前菜单项下的子菜单正准备打开，不用再打开了
-              const tmpOpen = $submenu.data('timeoutOpen.mdui.menu');
-              if (tmpOpen) {
-                clearTimeout(tmpOpen);
-              }
-
-              // 准备关闭当前子菜单
-              timeout = setTimeout(
-                () => that.closeSubMenu($submenu),
-                that.options.subMenuDelay,
-              );
-
-              $submenu.data('timeoutClose.mdui.menu', timeout);
-            }
-          }
-        },
-      );
-    }
-  }
-
-  /**
-   * 动画结束回调
-   */
-  private transitionEnd(): void {
-    this.$element.removeClass('mdui-menu-closing');
-
-    if (this.state === 'opening') {
-      this.state = 'opened';
-      this.triggerEvent('opened');
-    }
-
-    if (this.state === 'closing') {
-      this.state = 'closed';
-      this.triggerEvent('closed');
-
-      // 关闭后，恢复菜单样式到默认状态，并恢复 fixed 定位
-      this.$element.css({
-        top: '',
-        left: '',
-        width: '',
-        position: 'fixed',
-      });
-    }
-  }
-
-  /**
-   * 切换菜单状态
-   */
-  public toggle(): void {
-    this.isOpen() ? this.close() : this.open();
-  }
-
-  /**
-   * 打开菜单
-   */
-  public open(): void {
-    if (this.isOpen()) {
-      return;
-    }
-
-    this.state = 'opening';
-    this.triggerEvent('open');
-
-    this.readjust();
-
-    this.$element
-      // 菜单隐藏状态使用使用 fixed 定位。
-      .css('position', this.options.fixed ? 'fixed' : 'absolute')
-      .addClass('mdui-menu-open')
-      .transitionEnd(() => this.transitionEnd());
-  }
-
-  /**
-   * 关闭菜单
-   */
-  public close(): void {
-    if (!this.isOpen()) {
-      return;
-    }
-
-    this.state = 'closing';
-    this.triggerEvent('close');
-
-    // 菜单开始关闭时，关闭所有子菜单
-    this.$element.find('.mdui-menu').each((_, submenu) => {
-      this.closeSubMenu($(submenu));
-    });
-
-    this.$element
-      .removeClass('mdui-menu-open')
-      .addClass('mdui-menu-closing')
-      .transitionEnd(() => this.transitionEnd());
-  }
-}
-
-mdui.Menu = Menu;