提交 067ed82f 编写于 作者: M Minwe LUO

Merge pull request #108 from allmobilize/codename-h

2014.09 w5 update
# Amaze UI Change Log
---
## 2014.09 W4
### Build 文件
### 2014.09 W5
- `NEW` 文档标题添加链接按钮;
- `FIXED` #103 #17 Modal 关闭打开/关闭时间间隔过短操作失效问题;
- `NEW` FastClick 升级到 `1.0.3`
- `IMPROVED` 调整 FastClick 加载模式,解决在 Chrome 模拟器中链接不能点击的问题;
## Amaze UI v1.0.0-beta2
### 2014.09 W4
#### Build 文件
- 文件名与项目名称统一;
- 增加 `basic``widgets` 两个版本供用户选择;
- 上传到 [http://staticfile.org/](http://staticfile.org/),搜索 amazeui 查看相关文件链接。
### 官网
#### 官网
- 优化左侧菜单固定效果,菜单高度超过窗口高度时增加滚动条。
### CSS
#### CSS
- 重新样式梳理 `z-index`
......@@ -40,7 +50,7 @@ __Input Group__:
- `IMPROVED` 处理不同尺寸垂直对齐问题。
### JS 插件
#### JS 插件
__Button__
......@@ -71,7 +81,7 @@ __Tabs__:
- `IMPROVED` #96 改进触控事件处理逻辑,避免标签中有 DOM 元素时触控失效问题。
### Web 组件
#### Web 组件
- 重新样式梳理 `z-index`
......@@ -89,9 +99,9 @@ __Gallery__:
- `IMPROVED` PureView 调用逻辑增强,判断是否设置了 PureView 的选项。
## 2014.09 W3
### 2014.09 W3
### CSS
#### CSS
__Badge__
......@@ -105,7 +115,7 @@ __Topbar__:
- `NEW` 增加顶部/底部固定样式。
### JS 插件
#### JS 插件
__Dropdown__:
......@@ -140,7 +150,7 @@ __Progress__:
- `CHANGED` 样式主色调整为绿色。
### Web 组件
#### Web 组件
__Gotop__
......@@ -156,7 +166,7 @@ __Tabs__:
- `IMPROVED` #72 使用 `flexbox` 实现均分,提高微信 webview 兼容性。
## 2014.09 W2
### 2014.09 W2
__CSS__
......@@ -180,7 +190,7 @@ __Web 组件__:
- `IMPROVED` Paragraph 使用 PureView 插件;
- `CHANGED` 移除 Navbar `package.json` 中图标位置设置选项;
## 2014.09 W1
### 2014.09 W1
__JS 插件__
......@@ -192,7 +202,7 @@ __Navbar 组件__:
- `FIXED` 修复二维码 URL。
## 2014.08 W4
### 2014.08 W4
__Navbar 组件__
......@@ -219,23 +229,23 @@ __布局示例__:
- 调整路径,下载包中 Amaze UI 相关的资源使用本地文件。
## 2014.08 W3
### 2014.08 W3
### 官网
#### 官网
- 首页增加更新订阅;
- 文档增加目录。
### Web 组件
#### Web 组件
- 增加 Web 组件本地预览服务器;
- 公用的 Demo 数据提取到 `package.json``demoContent` 下面;
- 组件细节调整。
## 2014.08 W2
### 2014.08 W2
### Web 组件
#### Web 组件
__Titlebar__:
......
......@@ -22,8 +22,8 @@
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger">红色按钮</button>
<button type="button" class="am-btn am-btn-link">链接</button>
<button type="button" class="am-btn am-btn-default">应用按钮样式的链接</button>
<a class="am-btn am-btn-link">链接</a>
<a class="am-btn am-btn-default">应用按钮样式的链接</a>
`````
```html
......@@ -33,8 +33,8 @@
<button type="button" class="am-btn am-btn-success">绿色按钮</button>
<button type="button" class="am-btn am-btn-warning">橙色按钮</button>
<button type="button" class="am-btn am-btn-danger">红色按钮</button>
<button type="button" class="am-btn am-btn-link">链接</button>
<button type="button" class="am-btn am-btn-default">应用按钮样式的链接</button>
<a class="am-btn am-btn-link">链接</a>
<a class="am-btn am-btn-default">应用按钮样式的链接</a>
```
### 方形按钮
......
......@@ -674,7 +674,7 @@
#### 多行文字截断
在只针对 PC 端开发时代,我们可以通过后端控制输出文字的长度来实现固定行数的效果。
在只针对 PC 端开发的年代,可以通过后端控制输出文字的长度来实现固定行数的效果。
但在响应式页面,这可能不再适用,只能输出足够多的文字,然后通过前端截取需要的行数。
......@@ -712,6 +712,7 @@ __参考链接__
- [Line Clampin’ - Truncating Multiple Line Text](http://css-tricks.com/line-clampin/)
- [CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS](http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/)
- [Clamp.js](https://github.com/josephschmitt/Clamp.js)
- [TextTailor.JS](https://github.com/jpntex/TextTailor.js)
### 图片替换
......
......@@ -12,6 +12,12 @@ Amaze UI 的诞生,依托于 GitHub 及其他技术社区上一些优秀的资
## v1.0.0 鸣谢名单
<!--
### RC1
[@John.Wall](http://t.qq.com/wangzj141)、@ayhome、
-->
### Beta2
整理过程难免有遗漏,请见谅!在此拜谢!(排名不分先后)
......
define(function(require, exports, module) {
'use strict';
// Zepto animate extend
require('zepto.extend.fx');
......@@ -8,10 +10,12 @@ define(function(require, exports, module) {
// Zepto selector extend
require('zepto.extend.selector');
var $ = window.Zepto,
UI = $.AMUI || {},
$win = $(window),
doc = window.document,
FastClick = require('util.fastclick'),
$html = $('html');
UI.support = {};
......@@ -331,16 +335,6 @@ define(function(require, exports, module) {
};
})();
// Require fastclick.js on touch devices
if (UI.support.touch) {
require.async(['util.fastclick'], function(FastClick) {
$(function() {
FastClick && FastClick.attach(document.body);
$html.addClass('am-touch');
});
});
}
// via http://davidwalsh.name/detect-scrollbar-width
UI.utils.measureScrollbar = function() {
if (document.body.clientWidth >= window.innerWidth) return 0;
......@@ -387,6 +381,59 @@ define(function(require, exports, module) {
}
};
/**
* https://github.com/cho45/micro-template.js
* (c) cho45 http://cho45.github.com/mit-license
*/
UI.template = function(id, data) {
var me = arguments.callee;
if (!me.cache[id]) me.cache[id] = (function () {
var name = id,
string = /^[\w\-]+$/.test(id) ? me.get(id): (name = 'template(string)', id); // no warnings
var line = 1, body = (
"try { " +
(me.variable ? "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
"this.ret += '" +
string.
replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
replace(/^\s*|\s*$/g, '').
replace(/\n/g, function () { return "';\nthis.line = " + (++line) + "; this.ret += '\\n" }).
replace(/\x11-(.+?)\x13/g, "' + ($1) + '").
replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
"'; " + (me.variable ? "" : "}") + "return this.ret;" +
"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
"//@ sourceURL=" + name + "\n" // source map
).replace(/this\.ret \+= '';/g, '');
var func = new Function(body);
var map = { '&' : '&amp;', '<' : '&lt;', '>' : '&gt;', '\x22' : '&#x22;', '\x27' : '&#x27;' };
var escapeHTML = function (string) { return (''+string).replace(/[&<>\'\"]/g, function (_) { return map[_] }) };
return function (stash) { return func.call(me.context = { escapeHTML: escapeHTML, line: 1, ret : '', stash: stash }) };
})();
return data ? me.cache[id](data) : me.cache[id];
};
UI.template.cache = {};
UI.template.get = function(id) {
if (id) {
var element = document.getElementById(id);
return element && element.innerHTML || '';
}
};
// Attach FastClick on touch devices
if (UI.support.touch) {
$html.addClass('am-touch');
$(function() {
FastClick.attach(document.body);
});
}
$(function() {
var $body = $('body');
......
define(function(require, exports, module) {
'use strict';
require('core');
require('ui.modal');
var QRCode = require('util.qrcode');
var $ = window.Zepto,
var QRCode = require('util.qrcode'),
$ = window.Zepto,
UI = $.AMUI,
doc = document,
$doc = $(doc),
transition = UI.support.transition;
/**
* https://github.com/cho45/micro-template.js
* (c) cho45 http://cho45.github.com/mit-license
*/
function template(id, data) {
var me = arguments.callee;
if (!me.cache[id]) me.cache[id] = (function() {
var name = id, string = /^[\w\-]+$/.test(id) ? me.get(id) : (name = 'template(string)', id); // no warnings
var line = 1, body = (
"try { " +
(me.variable ? "var " + me.variable + " = this.stash;" : "with (this.stash) { ") +
"this.ret += '" +
string.
replace(/<%/g, '\x11').replace(/%>/g, '\x13'). // if you want other tag, just edit this line
replace(/'(?![^\x11\x13]+?\x13)/g, '\\x27').
replace(/^\s*|\s*$/g, '').
replace(/\n/g, function() {
return "';\nthis.line = " + (++line) + "; this.ret += '\\n"
}).
replace(/\x11=raw(.+?)\x13/g, "' + ($1) + '").
replace(/\x11=(.+?)\x13/g, "' + this.escapeHTML($1) + '").
replace(/\x11(.+?)\x13/g, "'; $1; this.ret += '") +
"'; " + (me.variable ? "" : "}") + "return this.ret;" +
"} catch (e) { throw 'TemplateError: ' + e + ' (on " + name + "' + ' line ' + this.line + ')'; } " +
"//@ sourceURL=" + name + "\n" // source map
).replace(/this\.ret \+= '';/g, '');
var func = new Function(body);
var map = {'&': '&amp;', '<': '&lt;', '>': '&gt;', '\x22': '&#x22;', '\x27': '&#x27;'};
var escapeHTML = function(string) {
return ('' + string).replace(/[&<>\'\"]/g, function(_) {
return map[_]
})
};
return function(stash) {
return func.call(me.context = {escapeHTML: escapeHTML, line: 1, ret: '', stash: stash})
};
})();
return data ? me.cache[id](data) : me.cache[id];
}
template.cache = {};
template.get = function(id) {
return Share.DEFAULTS.tpl;
};
var Share = function(options) {
this.options = $.extend({}, Share.DEFAULTS, options || {});
this.$element = null;
......@@ -64,7 +17,6 @@ define(function(require, exports, module) {
this.pics = null;
this.inited = false;
this.active = false;
// this.init();
};
......@@ -77,12 +29,12 @@ define(function(require, exports, module) {
desc: 'Hi,孤夜观天象,发现一个不错的西西,分享一下下 ;-)',
via: 'Amaze UI',
tpl: '<div class="am-share am-modal-actions" id="<%= id %>">' +
'<h3 class="am-share-title"><%= title %></h3>' +
'<ul class="am-share-sns sm-block-grid-3"><% for(var i = 0; i < sns.length; i++) {%>' +
'<li><a href="<%= sns[i].shareUrl %>" data-am-share-to="<%= sns[i].id %>" ><i class="am-icon-<%= sns[i].icon %>"></i><span><%= sns[i].title %></span></a></li>' +
'<% } %></ul>' +
'<div class="am-share-footer"><button class="am-btn am-btn-default am-btn-block" data-am-share-close><%= cancel %></button></div>' +
'</div>'
'<h3 class="am-share-title"><%= title %></h3>' +
'<ul class="am-share-sns sm-block-grid-3"><% for(var i = 0; i < sns.length; i++) {%>' +
'<li><a href="<%= sns[i].shareUrl %>" data-am-share-to="<%= sns[i].id %>" ><i class="am-icon-<%= sns[i].icon %>"></i><span><%= sns[i].title %></span></a></li>' +
'<% } %></ul>' +
'<div class="am-share-footer"><button class="am-btn am-btn-default am-btn-block" data-am-share-close><%= cancel %></button></div>' +
'</div>'
};
Share.SNS = {
......@@ -222,7 +174,7 @@ define(function(require, exports, module) {
}
});
return template('share', $.extend({}, options, {sns: snsData}));
return UI.template(options.tpl, $.extend({}, options, {sns: snsData}));
};
Share.prototype.init = function() {
......@@ -333,6 +285,8 @@ define(function(require, exports, module) {
};
Share.prototype.wechatQr = function() {
if (window.WeixinJSBridge) {}
if (!this.$wechatQr) {
var qrId = UI.utils.generateGUID('am-share-wechat'),
$qr = $('<div class="am-modal am-modal-no-btn am-share-wechat-qr"><div class="am-modal-dialog"><div class="am-modal-hd">分享到微信 <a href="" class="am-close am-close-spin" data-am-modal-close>&times;</a> </div><div class="am-modal-bd"><div class="am-share-wx-qr"></div><div class="am-share-wechat-tip">打开微信,点击底部的<em>发现</em>,<br/> 使用<em>扫一扫</em>将网页分享至朋友圈</div></div></div></div>', {
......@@ -370,5 +324,3 @@ define(function(require, exports, module) {
module.exports = share;
});
// TODO: 模板函数公有化
define(function(require, exports, module) {
'use strict';
var $ = window.Zepto;
/**
* FastClick: polyfill to remove click delays on browsers with touch UIs.
* @preserve FastClick: polyfill to remove click delays on browsers with touch UIs.
*
* @version 1.0.2
* @version 1.0.3
* @codingstandard ftlabs-jsv2
* @copyright The Financial Times Limited [All Rights Reserved]
* @license MIT License (see LICENSE.txt)
......@@ -22,7 +24,6 @@ define(function(require, exports, module) {
* @param {Object} options The options to override the defaults
*/
function FastClick(layer, options) {
'use strict';
var oldOnClick;
options = options || {};
......@@ -200,6 +201,12 @@ define(function(require, exports, module) {
*/
var deviceIsIOSWithBadTarget = deviceIsIOS && (/OS ([6-9]|\d{2})_\d/).test(navigator.userAgent);
/**
* BlackBerry requires exceptions.
*
* @type boolean
*/
var deviceIsBlackBerry10 = navigator.userAgent.indexOf('BB10') > 0;
/**
* Determine whether a given element requires a native click.
......@@ -208,7 +215,6 @@ define(function(require, exports, module) {
* @returns {boolean} Returns true if the element needs a native click
*/
FastClick.prototype.needsClick = function(target) {
'use strict';
switch (target.nodeName.toLowerCase()) {
// Don't send a synthetic click to disabled inputs (issue #62)
......@@ -244,7 +250,6 @@ define(function(require, exports, module) {
* @returns {boolean} Returns true if the element requires a call to focus to simulate native click.
*/
FastClick.prototype.needsFocus = function(target) {
'use strict';
switch (target.nodeName.toLowerCase()) {
case 'textarea':
return true;
......@@ -276,7 +281,6 @@ define(function(require, exports, module) {
* @param {Event} event
*/
FastClick.prototype.sendClick = function(targetElement, event) {
'use strict';
var clickEvent, touch;
// On some Android devices activeElement needs to be blurred otherwise the synthetic click will have no effect (#24)
......@@ -294,7 +298,6 @@ define(function(require, exports, module) {
};
FastClick.prototype.determineEventType = function(targetElement) {
'use strict';
//Issue #159: Android Chrome Select Box does not open with a synthetic click event
if (deviceIsAndroid && targetElement.tagName.toLowerCase() === 'select') {
......@@ -309,7 +312,6 @@ define(function(require, exports, module) {
* @param {EventTarget|Element} targetElement
*/
FastClick.prototype.focus = function(targetElement) {
'use strict';
var length;
// Issue #160: on iOS 7, some input elements (e.g. date datetime) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
......@@ -328,7 +330,6 @@ define(function(require, exports, module) {
* @param {EventTarget|Element} targetElement
*/
FastClick.prototype.updateScrollParent = function(targetElement) {
'use strict';
var scrollParent, parentElement;
scrollParent = targetElement.fastClickScrollParent;
......@@ -360,7 +361,6 @@ define(function(require, exports, module) {
* @returns {Element|EventTarget}
*/
FastClick.prototype.getTargetElementFromEventTarget = function(eventTarget) {
'use strict';
// On some older browsers (notably Safari on iOS 4.1 - see issue #56) the event target may be a text node.
if (eventTarget.nodeType === Node.TEXT_NODE) {
......@@ -378,7 +378,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.onTouchStart = function(event) {
'use strict';
var targetElement, touch, selection;
// Ignore multiple touches, otherwise pinch-to-zoom is prevented if both fingers are on the FastClick element (issue #111).
......@@ -404,7 +403,10 @@ define(function(require, exports, module) {
// with the same identifier as the touch event that previously triggered the click that triggered the alert.
// Sadly, there is an issue on iOS 4 that causes some normal touch events to have the same identifier as an
// immediately preceeding touch event (issue #52), so this fix is unavailable on that platform.
if (touch.identifier === this.lastTouchIdentifier) {
// Issue 120: touch.identifier is 0 when Chrome dev tools 'Emulate touch events' is set with an iOS device UA string,
// which causes all touch events to be ignored. As this block only applies to iOS, and iOS identifiers are always long,
// random integers, it's safe to to continue if the identifier is 0 here.
if (touch.identifier && touch.identifier === this.lastTouchIdentifier) {
event.preventDefault();
return false;
}
......@@ -444,7 +446,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.touchHasMoved = function(event) {
'use strict';
var touch = event.changedTouches[0], boundary = this.touchBoundary;
if (Math.abs(touch.pageX - this.touchStartX) > boundary || Math.abs(touch.pageY - this.touchStartY) > boundary) {
......@@ -462,7 +463,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.onTouchMove = function(event) {
'use strict';
if (!this.trackingClick) {
return true;
}
......@@ -484,7 +484,6 @@ define(function(require, exports, module) {
* @returns {Element|null}
*/
FastClick.prototype.findControl = function(labelElement) {
'use strict';
// Fast path for newer browsers supporting the HTML5 control attribute
if (labelElement.control !== undefined) {
......@@ -509,7 +508,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.onTouchEnd = function(event) {
'use strict';
var forElement, trackingClickStart, targetTagName, scrollParent, touch, targetElement = this.targetElement;
if (!this.trackingClick) {
......@@ -603,7 +601,6 @@ define(function(require, exports, module) {
* @returns {void}
*/
FastClick.prototype.onTouchCancel = function() {
'use strict';
this.trackingClick = false;
this.targetElement = null;
};
......@@ -616,7 +613,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.onMouse = function(event) {
'use strict';
// If a target element was never set (because a touch event was never fired) allow the event
if (!this.targetElement) {
......@@ -667,7 +663,6 @@ define(function(require, exports, module) {
* @returns {boolean}
*/
FastClick.prototype.onClick = function(event) {
'use strict';
var permitted;
// It's possible for another FastClick-like library delivered with third-party code to fire a click event before FastClick does (issue #44). In that case, set the click-tracking flag back to false and return early. This will cause onTouchEnd to return early.
......@@ -700,7 +695,6 @@ define(function(require, exports, module) {
* @returns {void}
*/
FastClick.prototype.destroy = function() {
'use strict';
var layer = this.layer;
if (deviceIsAndroid) {
......@@ -723,9 +717,9 @@ define(function(require, exports, module) {
* @param {Element} layer The layer to listen on
*/
FastClick.notNeeded = function(layer) {
'use strict';
var metaViewport;
var chromeVersion;
var blackberryVersion;
// Devices that don't support touch don't need FastClick
if (typeof window.ontouchstart === 'undefined') {
......@@ -757,6 +751,27 @@ define(function(require, exports, module) {
}
}
if (deviceIsBlackBerry10) {
blackberryVersion = navigator.userAgent.match(/Version\/([0-9]*)\.([0-9]*)/);
// BlackBerry 10.3+ does not require Fastclick library.
// https://github.com/ftlabs/fastclick/issues/251
if (blackberryVersion[1] >= 10 && blackberryVersion[2] >= 3) {
metaViewport = document.querySelector('meta[name=viewport]');
if (metaViewport) {
// user-scalable=no eliminates click delay.
if (metaViewport.content.indexOf('user-scalable=no') !== -1) {
return true;
}
// width=device-width (or less than device-width) eliminates click delay.
if (document.documentElement.scrollWidth <= window.outerWidth) {
return true;
}
}
}
}
// IE10 with -ms-touch-action: none, which disables double-tap-to-zoom (issue #97)
if (layer.style.msTouchAction === 'none') {
return true;
......@@ -773,10 +788,8 @@ define(function(require, exports, module) {
* @param {Object} options The options to override the defaults
*/
FastClick.attach = function(layer, options) {
'use strict';
return new FastClick(layer, options);
};
module.exports = FastClick;
});
\ No newline at end of file
});
......@@ -14,10 +14,12 @@
//
// ========================================================================
/* ========================================================================
Component: Share Plugin
========================================================================== */
@share-bg: #f8f8f8;
.am-share {
font-size: 14px;
}
......@@ -37,9 +39,9 @@
content: "";
display: block;
width: 100%;
height: 1px;
height: 0;
margin-top: 10px;
background-color: #dfdfdf;
border-bottom: 1px solid #dfdfdf;
}
}
......@@ -120,7 +122,6 @@
.am-modal-dialog {
background-color: #fff;
border: 1px solid #dedede;
.box-shadow(0 0 5px #ddd);
}
.am-modal-hd {
......@@ -144,4 +145,3 @@
}
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册