diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..db386b3 --- /dev/null +++ b/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [ + "stage-0", + "es2015" + ], + "plugins": [ + "add-module-exports", + "transform-class-properties" + ] +} \ No newline at end of file diff --git a/.travis.yml b/.travis.yml index 9add6e4..78f2f6c 100644 --- a/.travis.yml +++ b/.travis.yml @@ -3,9 +3,8 @@ language: node_js node_js: - "4" - before_script: - npm install script: - - atool-test + - npm run test diff --git a/examples/sample.md b/examples/sample.md index a9a8393..c5eba02 100644 --- a/examples/sample.md +++ b/examples/sample.md @@ -78,8 +78,7 @@ ``` ```javascript -import Tip from '../tip'; -import '../src/tip.less'; +import Tip from '../index'; // 箭头位置 new Tip({ diff --git a/index.js b/index.js new file mode 100644 index 0000000..8cc7258 --- /dev/null +++ b/index.js @@ -0,0 +1 @@ +module.exports = require('./lib/tip'); diff --git a/lib/basic-tip.js b/lib/basic-tip.js new file mode 100644 index 0000000..d76faba --- /dev/null +++ b/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); + } + +}); \ No newline at end of file diff --git a/src/tip.less b/lib/tip.css similarity index 55% rename from src/tip.less rename to lib/tip.css index adb7915..d1c8e1b 100644 --- a/src/tip.less +++ b/lib/tip.css @@ -1,5 +1,3 @@ -@import (css) '~alice-poptip'; - .ui-poptip { top: 0; left: 0; diff --git a/lib/tip.js b/lib/tip.js new file mode 100644 index 0000000..62785f9 --- /dev/null +++ b/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: '
\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n
', + + // 提示内容 + 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; \ No newline at end of file diff --git a/package.json b/package.json index 3a46854..625dbb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "arale-tip", - "version": "2.0.0", + "version": "2.0.1", "keywords": [ "widget", "bubble", @@ -21,24 +21,24 @@ }, "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" @@ -46,5 +46,10 @@ "engines": { "node": ">=4.0.0" }, - "publishConfig": {} + "files": [ + "lib", + "index.js", + "package.json", + "README.md" + ] } diff --git a/src/basic-tip.js b/src/basic-tip.js index 37cc9f7..4a99574 100644 --- a/src/basic-tip.js +++ b/src/basic-tip.js @@ -1,4 +1,4 @@ -var Popup = require('arale-popup'); +import Popup from 'arale-popup'; // 通用提示组件 // 兼容站内各类样式 diff --git a/src/tip.css b/src/tip.css new file mode 100644 index 0000000..d1c8e1b --- /dev/null +++ b/src/tip.css @@ -0,0 +1,4 @@ +.ui-poptip { + top: 0; + left: 0; +} diff --git a/src/tip.js b/src/tip.js index 8b804eb..482f6dc 100644 --- a/src/tip.js +++ b/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: `
diff --git a/tests/tip-spec.js b/tests/tip-spec.js index 69c023e..127e71a 100644 --- a/tests/tip-spec.js +++ b/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_'; diff --git a/tip.js b/tip.js deleted file mode 100644 index 3447411..0000000 --- a/tip.js +++ /dev/null @@ -1 +0,0 @@ -module.exports = require('./src/tip');