From 33a8bfb3478f725512f1a2acea2e3ff5358e87a0 Mon Sep 17 00:00:00 2001 From: Minwe Date: Fri, 26 Sep 2014 13:13:05 +0800 Subject: [PATCH] update gallery --- CHANGELOG.md | 34 +++++++++++- vendor/amazeui.hbs.partials.js | 2 +- widget/gallery/HISTORY.md | 10 +++- widget/gallery/README.md | 94 +++++++++++++++++++++++++++++++++ widget/gallery/package.json | 2 +- widget/gallery/src/gallery.hbs | 4 +- widget/gallery/src/gallery.js | 5 +- widget/gallery/src/gallery.less | 6 +++ 8 files changed, 148 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa92175..7fa3afc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,14 +5,21 @@ ### CSS +- 重新样式梳理 `z-index`； + __Button__： -- `NEW` 增加圆角和直角样式。 +- `NEW` 增加圆角和直角样式； +- `IMPROVED` 按钮样式细节调整。 __Button Group__： - `CHANGED` 使用 `flexbox` 实现按钮等分。 +__Comment__： + +- 尖角样式细节调整。 + __Form__： - `CHANGED` 调整 `select` 样式。 @@ -41,8 +48,31 @@ __PureView__： - `NEW` 增加获取大图选项，可以通过 `a` 的 `href` 或者 `img` 的 `data-rel` 获取大图地址； - `NEW` 是否显示分享按钮选项； - `NEW` 增加在微信中打开时调用微信图片查看器选项； +- `NEW` 增加图片 Loading 图标； - `IMPROVED` 解决打开/关闭窗口抖动问题； -- `IMPROVED` 解决图片变形问题。 +- `IMPROVED` 解决图片比例失调问题。 + +__Sticky__： + +- `CHANGED` #90 底部边距计算逻辑有问题，暂时取消。 + +### Web 组件 + +- 重新样式梳理 `z-index`； + +__Figure、Paragraph__： + +- 移除遗留的无用的样式。 + +__Figure__： + +- `NEW` `data-rel` 接口，可以设置大图路径； + +__Gallery__： + +- `NEW` `data-rel` 接口，可以设置大图路径； +- `IMPROVED` PureView 调用逻辑增强，判断是否设置了 PureView 的选项。 + ## 2014.09 W3 diff --git a/vendor/amazeui.hbs.partials.js b/vendor/amazeui.hbs.partials.js index 8ffdeea..83dfea7 100644 --- a/vendor/amazeui.hbs.partials.js +++ b/vendor/amazeui.hbs.partials.js @@ -10,7 +10,7 @@ hbs.registerPartial("footer", "{{#this}}\n \n\n \n{{/this}}\n"); - hbs.registerPartial("gallery", "{{#this}}\n \n{{/this}}\n"); + hbs.registerPartial("gallery", "{{#this}}\n \n{{/this}}\n"); hbs.registerPartial("gotop", "{{#this}}\n
\n \n {{#if content.title}}\n {{content.title}}\n {{/if}}\n {{#if content.customIcon}}\n \n {{else}}\n {{#if content.icon}}\n \n {{else}}\n \n {{/if}}\n {{/if}}\n \n
\n{{/this}}"); diff --git a/widget/gallery/HISTORY.md b/widget/gallery/HISTORY.md index 109d67e..c8d7837 100644 --- a/widget/gallery/HISTORY.md +++ b/widget/gallery/HISTORY.md @@ -1,11 +1,17 @@ # Gallery 更新日志 --- -## ver 1.2.0 (2014.02.21) +## v1.3.0 (2014.09.26) + +- `IMPROVED` 使用 PureView 插件； +- `IMPROVED` 增加 `data-rel` 接口，用于设置大图； +- `IMPROVED` 微信浏览器里调用内置的图片查看器。 + +## v1.2.0 (2014.02.21) - `New` Pinch Zoom -## ver 1.1.1 (2014.01.22) +## v1.1.1 (2014.01.22) - `IMPROVED` 所有图标使用 font icon； - `IMPROVED` [#460](https://github.com/allmobilize/issues/issues/460) Gallery IE Mobile 10+ 支持； diff --git a/widget/gallery/README.md b/widget/gallery/README.md index 3acc6dc..05bcd13 100644 --- a/widget/gallery/README.md +++ b/widget/gallery/README.md @@ -31,6 +31,100 @@ var data = [ return data; ``` +## 指定缩略图 + +基于节省流量考虑，可以指定缩略图，用户点击放大的时候再显示大图。 + +### 使用 `data-rel` + +将大图放在 `` 的 `data-rel` 属性上。 + +`````html + +````` +```html + +``` + +### 使用链接 + +设置 `target`: `data-am-gallery="{pureview:{target: 'a'}}"`。 + +从可访性的角度而言，这种方式更好一些：用户再禁用 JavaScript 以后仍然可以打开链接查看大图。 + +`````html + +````` +```html + +``` + ## 数据接口 ```javascript diff --git a/widget/gallery/package.json b/widget/gallery/package.json index 2bd64f1..0336b25 100644 --- a/widget/gallery/package.json +++ b/widget/gallery/package.json @@ -1,7 +1,7 @@ { "name": "gallery", - "version": "1.2.0", + "version": "1.3.0", "localName": { "en": "Gallery", diff --git a/widget/gallery/src/gallery.hbs b/widget/gallery/src/gallery.hbs index 4bcdff9..04d75e5 100644 --- a/widget/gallery/src/gallery.hbs +++ b/widget/gallery/src/gallery.hbs @@ -7,7 +7,7 @@
{{#if link}} - {{#if img}}{{title}}{{/if}} + {{#if img}}{{title}}{{/if}} {{#if title}}

{{{title}}}

{{/if}} @@ -16,7 +16,7 @@ {{/if}} {{else}} - {{#if img}}{{title}}{{/if}} + {{#if img}}{{title}}{{/if}} {{#if title}}

{{{title}}}

{{/if}} diff --git a/widget/gallery/src/gallery.js b/widget/gallery/src/gallery.js index d7a3c05..d1b2b77 100644 --- a/widget/gallery/src/gallery.js +++ b/widget/gallery/src/gallery.js @@ -12,7 +12,10 @@ define(function(require, exports, module) { $gallery.each(function() { var options = UI.utils.parseOptions($(this).attr('data-am-gallery')); - options.pureview && $(this).pureview(); + + if (options.pureview) { + (typeof options.pureview === 'object') ? $(this).pureview(options.pureview) : $(this).pureview(); + } }); $galleryOne.each(function() { diff --git a/widget/gallery/src/gallery.less b/widget/gallery/src/gallery.less index 910023c..4c0c693 100644 --- a/widget/gallery/src/gallery.less +++ b/widget/gallery/src/gallery.less @@ -6,3 +6,9 @@ margin: 0; } } + +&[data-am-gallery*='pureview'] { + img { + cursor: pointer; + } +} -- GitLab