Merge pull request #28 from aralejs/2.0.1

babel

.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    "stage-0",
+    "es2015"
+  ],
+  "plugins": [
+    "add-module-exports",
+    "transform-class-properties"
+  ]
+}

.travis.yml

@@ -3,9 +3,8 @@ language: node_js
 node_js:
   - "4"
 
-
 before_script:
   - npm install
 
 script:
-  - atool-test
+  - npm run test

examples/sample.md

@@ -78,8 +78,7 @@
 ```
 
 ```javascript
-import Tip from '../tip';
-import '../src/tip.less';
+import Tip from '../index';
 
 // 箭头位置
 new Tip({

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib/tip');

lib/basic-tip.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var _aralePopup = require('arale-popup');
+
+var _aralePopup2 = _interopRequireDefault(_aralePopup);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// 通用提示组件
+// 兼容站内各类样式
+module.exports = _aralePopup2.default.extend({
+
+  attrs: {
+    // 提示内容
+    content: null,
+
+    // 提示框在目标的位置方向 [up|down|left|right]
+    direction: 'up',
+
+    // 提示框离目标距离(px)
+    distance: 8,
+
+    // 箭头偏移位置(px)，负数表示箭头位置从最右边或最下边开始算
+    arrowShift: 22,
+
+    // 箭头指向 trigger 的水平或垂直的位置
+    pointPos: '50%'
+  },
+
+  _setAlign: function _setAlign() {
+    var alignObject = {},
+        arrowShift = this.get('arrowShift'),
+        distance = this.get('distance'),
+        pointPos = this.get('pointPos'),
+        direction = this.get('direction');
+
+    if (arrowShift < 0) {
+      arrowShift = '100%' + arrowShift;
+    }
+
+    if (direction === 'up') {
+      alignObject.baseXY = [pointPos, 0];
+      alignObject.selfXY = [arrowShift, '100%+' + distance];
+    } else if (direction === 'down') {
+      alignObject.baseXY = [pointPos, '100%+' + distance];
+      alignObject.selfXY = [arrowShift, 0];
+    } else if (direction === 'left') {
+      alignObject.baseXY = [0, pointPos];
+      alignObject.selfXY = ['100%+' + distance, arrowShift];
+    } else if (direction === 'right') {
+      alignObject.baseXY = ['100%+' + distance, pointPos];
+      alignObject.selfXY = [0, arrowShift];
+    }
+
+    alignObject.comeFromArrowPosition = true;
+    this.set('align', alignObject);
+  },
+
+  // 用于 set 属性后的界面更新
+  _onRenderContent: function _onRenderContent(val) {
+    var ctn = this.$('[data-role="content"]');
+    if (typeof val !== 'string') {
+      val = val.call(this);
+    }
+    ctn && ctn.html(val);
+  }
+
+});

src/tip.less → lib/tip.css

@@ -1,5 +1,3 @@
-@import (css) '~alice-poptip';
-
 .ui-poptip {
     top: 0;
     left: 0;

lib/tip.js

@@ -0,0 +1,140 @@
+'use strict';
+
+var _jquery = require('jquery');
+
+var _jquery2 = _interopRequireDefault(_jquery);
+
+var _basicTip = require('./basic-tip');
+
+var _basicTip2 = _interopRequireDefault(_basicTip);
+
+require('alice-poptip');
+
+require('./tip.css');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// 气泡提示弹出组件
+// ---
+var Tip = _basicTip2.default.extend({
+  attrs: {
+    template: '<div class="ui-poptip">\n                  <div class="ui-poptip-shadow">\n                  <div class="ui-poptip-container">\n                      <div class="ui-poptip-arrow">\n                          <em></em>\n                          <span></span>\n                      </div>\n                      <div class="ui-poptip-content" data-role="content">\n                      </div>\n                  </div>\n                  </div>\n              </div>',
+
+    // 提示内容
+    content: 'A TIP BOX',
+
+    // 箭头位置
+    // 按钟表点位置，目前支持1、2、5、7、10、11点位置
+    // https://i.alipayobjects.com/e/201307/jBty06lQT.png
+    arrowPosition: 7,
+
+    align: {
+      setter: function setter(val) {
+        // 用户初始化时主动设置了 align
+        // 且并非来自 arrowPosition 的设置
+        if (val && !val.comeFromArrowPosition) {
+          this._specifiedAlign = true;
+        }
+        return val;
+      }
+    },
+
+    // 颜色 [yellow|blue|white]
+    theme: 'yellow',
+
+    // 当弹出层显示在屏幕外时，是否自动转换浮层位置
+    inViewport: false
+  },
+
+  setup: function setup() {
+    _basicTip2.default.superclass.setup.call(this);
+    this._originArrowPosition = this.get('arrowPosition');
+
+    this.after('show', function () {
+      this._makesureInViewport();
+    });
+  },
+
+  _makesureInViewport: function _makesureInViewport() {
+    if (!this.get('inViewport')) {
+      return;
+    }
+    var ap = this._originArrowPosition,
+        scrollTop = (0, _jquery2.default)(window).scrollTop(),
+        viewportHeight = (0, _jquery2.default)(window).outerHeight(),
+        elemHeight = this.element.height() + this.get('distance'),
+        triggerTop = this.get('trigger').offset().top,
+        triggerHeight = this.get('trigger').height(),
+        arrowMap = {
+      '1': 5,
+      '5': 1,
+      '7': 11,
+      '11': 7
+    };
+
+    if ((ap == 11 || ap == 1) && triggerTop + triggerHeight > scrollTop + viewportHeight - elemHeight) {
+      // tip 溢出屏幕下方
+      this.set('arrowPosition', arrowMap[ap]);
+    } else if ((ap == 7 || ap == 5) && triggerTop < scrollTop + elemHeight) {
+      // tip 溢出屏幕上方
+      this.set('arrowPosition', arrowMap[ap]);
+    } else {
+      // 复原
+      this.set('arrowPosition', this._originArrowPosition);
+    }
+  },
+
+  // 用于 set 属性后的界面更新
+  _onRenderArrowPosition: function _onRenderArrowPosition(val, prev) {
+    val = parseInt(val, 10);
+    var arrow = this.$('.ui-poptip-arrow');
+    arrow.removeClass('ui-poptip-arrow-' + prev).addClass('ui-poptip-arrow-' + val);
+
+    // 用户设置了 align
+    // 则直接使用 align 表示的位置信息，忽略 arrowPosition
+    if (this._specifiedAlign) {
+      return;
+    }
+
+    var direction = '',
+        arrowShift = 0;
+    if (val === 10) {
+      direction = 'right';
+      arrowShift = 20;
+    } else if (val === 11) {
+      direction = 'down';
+      arrowShift = 22;
+    } else if (val === 1) {
+      direction = 'down';
+      arrowShift = -22;
+    } else if (val === 2) {
+      direction = 'left';
+      arrowShift = 20;
+    } else if (val === 5) {
+      direction = 'up';
+      arrowShift = -22;
+    } else if (val === 7) {
+      direction = 'up';
+      arrowShift = 22;
+    }
+    this.set('direction', direction);
+    this.set('arrowShift', arrowShift);
+    this._setAlign();
+  },
+
+  _onRenderWidth: function _onRenderWidth(val) {
+    this.$('[data-role="content"]').css('width', val);
+  },
+
+  _onRenderHeight: function _onRenderHeight(val) {
+    this.$('[data-role="content"]').css('height', val);
+  },
+
+  _onRenderTheme: function _onRenderTheme(val, prev) {
+    this.element.removeClass('ui-poptip-' + prev);
+    this.element.addClass('ui-poptip-' + val);
+  }
+
+});
+
+module.exports = Tip;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "arale-tip",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "keywords": [
     "widget",
     "bubble",
@@ -21,30 +21,35 @@
   },
   "license": "MIT",
   "scripts": {
+    "build": "rm -rf lib && babel -d lib src && cp src/tip.css lib/",
     "test": "atool-test",
     "doc": "atool-doc"
   },
-  "spm": {
-    "build": {
-      "global": {
-        "jquery": "jQuery"
-      }
-    }
-  },
   "dependencies": {
-    "spm-sea": "~1.0.1",
-    "jquery": "1.7.2",
     "arale-popup": "~1.2.0",
     "alice-poptip": "~1.3.0"
   },
-  "main": "tip.js",
+  "main": "index.js",
   "devDependencies": {
+    "babel-cli": "^6.7.5",
+    "babel-core": "^6.7.6",
+    "babel-eslint": "^6.0.2",
+    "babel-istanbul": "^0.7.0",
+    "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-transform-class-properties": "^6.6.0",
+    "babel-preset-es2015": "^6.6.0",
+    "babel-preset-stage-0": "^6.5.0",
     "atool-doc": "~0.4.3",
     "atool-test": "~0.4.3",
     "expect.js": "0.3.1"
   },
   "engines": {
     "node": ">=4.0.0"
   },
-  "publishConfig": {}
+  "files": [
+    "lib",
+    "index.js",
+    "package.json",
+    "README.md"
+  ]
 }

src/basic-tip.js

@@ -1,4 +1,4 @@
-var Popup = require('arale-popup');
+import Popup from 'arale-popup';
 
 // 通用提示组件
 // 兼容站内各类样式

src/tip.css

@@ -0,0 +1,4 @@
+.ui-poptip {
+    top: 0;
+    left: 0;
+}

src/tip.js

@@ -1,12 +1,11 @@
-var $ = require('jquery');
-var BasicTip = require('./basic-tip');
-
-require('./tip.less');
+import $ from 'jquery';
+import BasicTip from './basic-tip';
+import 'alice-poptip';
+import './tip.css';
 
 // 气泡提示弹出组件
 // ---
-var Tip = BasicTip.extend({
-
+const Tip = BasicTip.extend({
   attrs: {
     template: `<div class="ui-poptip">
                   <div class="ui-poptip-shadow">

tests/tip-spec.js

@@ -1,7 +1,7 @@
 var exepct = require('expect.js');
 
-var $ = require('spm-jquery');
-var Tip = require('../src/tip');
+var $ = require('jquery');
+var Tip = require('../index');
 var tip, trigger;
 var CONTENT = '_content_';