ui-default: init

将ui-default合并至主存储库便于维护

packages/ui-default/components/tooltip/Tooltip.js

@@ -0,0 +1,51 @@
+import Drop from 'tether-drop';
+import _ from 'lodash';
+import DOMAttachedObject from 'vj/components/DOMAttachedObject';
+
+export default class Tooltip extends DOMAttachedObject {
+  static DOMAttachKey = 'vjTooltipInstance';
+
+  constructor($dom, options = {}) {
+    super($dom, true);
+    this.dropRemoved = false;
+    this.drop = new Drop({
+      target: $dom[0],
+      classes: 'tooltip',
+      position: options.position || 'top center',
+      openOn: 'hover',
+      constrainToWindow: true,
+      constrainToScrollParent: false,
+      content: $dom.attr('data-tooltip'),
+    });
+    this.isOpen = false;
+    this.drop.on('open', this.onOpen, this);
+    this.drop.on('close', this.onClose, this);
+    this.delayDetach = _.debounce(this.detach.bind(this), 200);
+  }
+
+  onOpen() {
+    this.delayDetach.cancel();
+  }
+
+  onClose() {
+    this.delayDetach();
+  }
+
+  detach() {
+    if (this.detached) {
+      return;
+    }
+    super.detach();
+    this.drop.destroy();
+  }
+
+  close() {
+    this.drop.close();
+  }
+
+  open() {
+    this.drop.open();
+  }
+}
+
+_.assign(Tooltip, DOMAttachedObject);

packages/ui-default/components/tooltip/tooltip.page.js

@@ -0,0 +1,30 @@
+import { AutoloadPage } from 'vj/misc/Page';
+import Tooltip from './Tooltip';
+
+function getClosestTooltipElement(element) {
+  const MAX_DEPTH = 3;
+  for (let i = 0, e = element; i < MAX_DEPTH && e !== null && e !== document; e = e.parentNode, i++) {
+    if (e.getAttribute('data-tooltip')) {
+      return e;
+    }
+  }
+  return null;
+}
+
+const tooltipPage = new AutoloadPage('tooltipPage', () => {
+  $(document).on('mouseover', (e) => {
+    const element = getClosestTooltipElement(e.target);
+    if (!element) {
+      return;
+    }
+    const $element = $(element);
+    const options = {};
+    if ($element.attr('data-tooltip-pos')) {
+      options.position = $element.attr('data-tooltip-pos');
+    }
+    const tooltip = Tooltip.getOrConstruct($element, options);
+    tooltip.open();
+  });
+});
+
+export default tooltipPage;

packages/ui-default/components/tooltip/tooltip.page.styl

@@ -0,0 +1,69 @@
+.tooltip
+
+  &.drop-element
+    pointer-events: none
+
+  .drop-content
+    transition: transform .1s ease-in-out
+    background: #333
+    color: #fff
+    font-size: rem($font-size-small)
+    padding: .7em 0.9em
+    max-width: rem(250px)
+    box-shadow: 1px 1px 4px rgba(#000, 0.3)
+    line-height: 1
+    position: relative
+
+    &:before
+      content: ''
+      display: block
+      position: absolute
+      width: 0
+      height: 0
+      border: rem(6px) solid transparent
+      pointer-events: none
+
+  &.drop-after-open
+    transition-delay: .4s
+
+    .drop-content
+      transition-delay: .4s
+
+  // Transitions
+  &.drop-element-attached-bottom.drop-element-attached-center .drop-content
+    transform: scale(0.9) translate(0, 5px) translateZ(0)
+  &.drop-element-attached-bottom.drop-element-attached-left .drop-content
+    transform: scale(0.9) translate(5px, 5px) translateZ(0)
+  &.drop-element-attached-bottom.drop-element-attached-right .drop-content
+    transform: scale(0.9) translate(-5px, 5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-center .drop-content
+    transform: scale(0.9) translate(0, -5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-left .drop-content
+    transform: scale(0.9) translate(5px, -5px) translateZ(0)
+  &.drop-element-attached-top.drop-element-attached-right .drop-content
+    transform: scale(0.9) translate(-5px, -5px) translateZ(0)
+  &.drop-after-open .drop-content
+    transform: scale(1) translateZ(0) !important
+
+  // Triangle Borders
+  &.drop-element-attached-bottom .drop-content
+    bottom: rem(10px)
+    &:before
+      border-top-color: #333
+  &.drop-element-attached-top .drop-content
+    top: rem(10px)
+    &:before
+      border-bottom-color: #333
+
+  // Triangle Positions
+  &.drop-element-attached-bottom .drop-content:before
+    bottom: rem(-12px)
+  &.drop-element-attached-top .drop-content:before
+    top: rem(-12px)
+  &.drop-element-attached-center .drop-content:before
+    margin-left: rem(-6px)
+    left: 50%
+  &.drop-element-attached-left .drop-content:before
+    left: 0
+  &.drop-element-attached-right .drop-content:before
+    right: 0