Skip to content

M
mui
Commit bd2f183c authored by hbcui1984's avatar hbcui1984
Browse files
Options

解决图片预览双指缩放失效的问题

parent d2549d1a
Show whitespace changes
Inline Side-by-side
Showing with 308 additions and 185 deletions
Gruntfile.js
View file @ bd2f183c
......@@ -62,6 +62,7 @@ module.exports = function(grunt) {
'js/mui.gestures.tap.js',
'js/mui.gestures.longtap.js',
'js/mui.gestures.hold.js',
'js/mui.gestures.pinch.js',
'js/mui.init.js',
'js/mui.init.5+.js',
'js/mui.back.js',
......
dist/js/mui.js
View file @ bd2f183c
......@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
......
dist/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/examples/setting.html
View file @ bd2f183c
......@@ -136,14 +136,20 @@
width: 40px;
height: 40px;
}
#head-img1{
#head-img1 {
position: absolute;
bottom: 10px;right: 40px;
width: 40px;height: 40px;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
}
.update{font-style: normal;color: #999999;margin-right: -25px;font-size: 15px}
.mui-fullscreen{
.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
......@@ -152,6 +158,7 @@
position: static;
}
</style>
<link rel="stylesheet" type="text/css" href="../css/feedback-page.css" />
</head>
<body>
......@@ -466,6 +473,9 @@
<li class="mui-table-view-cell">
<a id="tel" class="mui-navigate-right">客服电话</a>
</li>
<li class="mui-table-view-cell">
<a id="feedback-btn" href="#feedback" class="mui-navigate-right">问题反馈</a>
</li>
<li class="mui-table-view-cell">
<a id="update" class="mui-navigate-right">检查更新</a>
</li>
......@@ -474,9 +484,40 @@
</div>
</div>
</div>
<div id="feedback" class="mui-page feedback">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>关于MUI
</button>
<h1 class="mui-center mui-title">问题反馈</h1>
</div>
<div class="mui-page-content">
<p>问题和意见</p>
<div class="row mui-input-row">
<textarea id='question' class="mui-input-clear question" placeholder="请详细描述你的问题和意见..."></textarea>
</div>
<p>图片(选填,提供问题截图)</p>
<div id='image-list' class="row image-list">
</div>
<p>QQ/邮箱</p>
<div class="mui-input-row">
<input id='contact' type="text" class="mui-input-clear contact" placeholder="(选填,方便我们联系你 )" />
</div>
<button id='submit' type="button" class="mui-btn mui-btn-green">提交</button>
</div>
<p>此示例基于环信 “WebIM SDK” + 环信 “移动客服” 实现，在环信 “移动客服面板” 能够查阅反馈信息。</p>
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.view.js "></script>
<script src='../libs/easymob-webim-sdk/jquery-1.11.1.js'></script>
<script src='../libs/easymob-webim-sdk/strophe-custom-2.0.0.js'></script>
<script src='../libs/easymob-webim-sdk/json2.js'></script>
<script src="../libs/easymob-webim-sdk/easemob.im-1.0.5.js"></script>
<script src='../js/feedback.js'></script>
<script src="../js/feedback-page.js"></script>
<script>
mui.init();
//初始化单页view
......@@ -499,9 +540,9 @@
console.log("获取分享服务列表失败");
});
defaultImg();
setTimeout(function () {
setTimeout(function() {
initImgPreview();
},500);
}, 500);
});
//分享链接点击事件
document.getElementById("share").addEventListener('tap', function() {
......@@ -515,8 +556,8 @@
id: "sinaweibo"
}, {
id: "tencentweibo"
},{
id:"qq"
}, {
id: "qq"
}],
bts = [{
title: "发送给微信好友"
......@@ -526,7 +567,7 @@
title: "分享到新浪微博"
}, {
title: "分享到腾讯微博"
},{
}, {
title: "分享到QQ"
}];
plus.nativeUI.actionSheet({
......@@ -537,7 +578,7 @@
if (i > 0) {
var s_id = ids[i - 1].id;
var share = shares[s_id];
if(share){
if (share) {
if (share.authenticated) {
shareMessage(share, ids[i - 1].ex);
} else {
......@@ -547,7 +588,7 @@
console.log("认证授权失败：" + e.code + " - " + e.message);
});
}
}else{
} else {
mui.toast("无法获取分享服务，请检查manifest.json中分享插件参数配置，并重新打包")
}
}
......@@ -589,26 +630,29 @@
document.getElementById("tel").addEventListener('tap', function() {
plus.device.dial("114");
});
// //意见反馈
// document.getElementById("quest").addEventListener('tap', function() {
//
// });
//
// //意见反馈
// document.getElementById("quest").addEventListener('tap', function() {
//
// });
//
//检查更新
document.getElementById("update").addEventListener('tap', function() {
var server="http://www.dcloud.io/check/update";//获取升级描述文件服务器地址
mui.getJSON(server,{"appid":plus.runtime.appid,"version":plus.runtime.version,"imei":plus.device.imei},function (data) {
if(data.status){
plus.ui.confirm( data.note, function(i){
if ( 0==i ) {
plus.runtime.openURL( data.url );
}
}, data.title, ["立即更新","取　　消"] );
}else{
var server = "http://www.dcloud.io/check/update"; //获取升级描述文件服务器地址
mui.getJSON(server, {
"appid": plus.runtime.appid,
"version": plus.runtime.version,
"imei": plus.device.imei
}, function(data) {
if (data.status) {
plus.ui.confirm(data.note, function(i) {
if (0 == i) {
plus.runtime.openURL(data.url);
}
}, data.title, ["立即更新", "取　　消"]);
} else {
mui.toast('Hello MUI 已是最新版本~')
}
});
});
var view = viewApi.view;
(function($) {
......@@ -687,10 +731,10 @@
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function (root) {
root.getFile("head.jpg",{},function (file) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.jpg", {}, function(file) {
//文件已存在
file.remove(function () {
file.remove(function() {
console.log("file remove success");
entry.copyTo(root, 'head.jpg', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
......@@ -701,12 +745,12 @@
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = e + "?version=" + new Date().getTime();;
},
function(e) {
console.log('copy image fail:'+e.message);
console.log('copy image fail:' + e.message);
});
},function () {
console.log("delete image fail:"+e.message);
}, function() {
console.log("delete image fail:" + e.message);
});
},function () {
}, function() {
//文件不存在
entry.copyTo(root, 'head.jpg', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
......@@ -717,10 +761,10 @@
document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;
},
function(e) {
console.log('copy image fail:'+e.message);
console.log('copy image fail:' + e.message);
});
});
},function (e) {
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
......@@ -733,7 +777,7 @@
function defaultImg() {
plus.io.resolveLocalFileSystemURL("_doc/head.jpg", function(entry) {
var s = entry.fullPath+ "?version=" + new Date().getTime();;
var s = entry.fullPath + "?version=" + new Date().getTime();;
document.getElementById("head-img").src = s;
document.getElementById("head-img1").src = s;
}, function(e) {
......@@ -741,64 +785,58 @@
document.getElementById("head-img1").src = '../images/logo.png';
})
}
document.getElementById("head-img1").addEventListener('tap',function (e) {
document.getElementById("head-img1").addEventListener('tap', function(e) {
e.stopPropagation();
});
document.getElementById("welcome").addEventListener('tap',function (e) {
document.getElementById("welcome").addEventListener('tap', function(e) {
//显示启动导航
mui.openWindow({
id:'guide',
url:'guide.html',
show:{
aniShow:'fade-in',
duration:300
id: 'guide',
url: 'guide.html',
show: {
aniShow: 'fade-in',
duration: 300
},
waiting:{
autoShow:false
waiting: {
autoShow: false
}
});
});
function initImgPreview () {
function initImgPreview() {
var imgs = document.querySelectorAll("img.mui-action-preview");
imgs = mui.slice.call(imgs);
if(imgs&&imgs.length>0){
if (imgs && imgs.length > 0) {
var slider = document.createElement("div");
slider.setAttribute("id","__mui-imageview__");
slider.setAttribute("id", "__mui-imageview__");
slider.classList.add("mui-slider");
slider.classList.add("mui-fullscreen");
slider.style.display = "none";
slider.addEventListener("tap",function () {
slider.addEventListener("tap", function() {
slider.style.display = "none";
});
slider.addEventListener("touchmove",function (event) {
slider.addEventListener("touchmove", function(event) {
event.preventDefault();
})
var slider_group = document.createElement("div");
slider_group.setAttribute("id","__mui-imageview__group");
slider_group.setAttribute("id", "__mui-imageview__group");
slider_group.classList.add("mui-slider-group");
imgs.forEach(function (value,index,array) {
imgs.forEach(function(value, index, array) {
//给图片添加点击事件，触发预览显示；
value.addEventListener('tap',function () {
value.addEventListener('tap', function() {
slider.style.display = "block";
_slider.refresh();
_slider.gotoItem(index,0);
_slider.gotoItem(index, 0);
})
var item = document.createElement("div");
item.classList.add("mui-slider-item");
var a = document.createElement("a");
var img = document.createElement("img");
img.setAttribute("src",value.src);
img.setAttribute("src", value.src);
a.appendChild(img)
item.appendChild(a);
slider_group.appendChild(item);
});
slider.appendChild(slider_group);
document.body.appendChild(slider);
var _slider = mui(slider).slider();
......
examples/hello-mui/examples/template.html
View file @ bd2f183c
......@@ -116,7 +116,7 @@
}
menu.style.display = display;
if(mui.os.android&&parseFloat(mui.os.version)>=4.4){
if(mui.os.android&&aniShow&&parseFloat(mui.os.version)>=4.4){
if(contentWebview==null){
contentWebview = self.children()[0];
}
......
examples/hello-mui/js/feedback-page.js
View file @ bd2f183c
......@@ -62,7 +62,11 @@
if (file) {
var reader = new FileReader();
reader.onload = function() {
placeholder.style.backgroundImage = 'url("' + reader.result + '")';
//处理 android 4.1 兼容问题
var base64 = reader.result.split(',')[1];
var dataUrl = 'data:image/png;base64,' + base64;
//
placeholder.style.backgroundImage = 'url(' + dataUrl + ')';
}
reader.readAsDataURL(file);
placeholder.classList.remove('space');
......
examples/hello-mui/js/feedback.js
View file @ bd2f183c
(function($, feedback, window, document) {
/*******************************************/
/*************** 环信配置开始 ****************/
//以后信息更改后，需卸载 “调试 app” 重新调用运行
var APP_KEY = 'dcloudio#mui';
var CUSTOM_ID = 'customer';
//--
/*************** 环信配置结束 ****************/
//一组 “常量”
var PASSWORD = 'pass01!';
var LOCAL_STORE_KEY = 'mui://user';
var USER_PREFIX = 'mui-user-';
/*******************************************/
/**
* 生成一个 IM 用户名
......
examples/hello-mui/js/mui.dtpicker.js
View file @ bd2f183c
......@@ -339,10 +339,23 @@
},
hide: function() {
var self = this;
if (self.disposed) return;
var ui = self.ui;
ui.picker.classList.remove($.className('active'));
ui.mask.close();
document.body.classList.remove($.className('dtpicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.ui.picker.parentNode.removeChild(self.ui.picker);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
......
examples/hello-mui/js/mui.imageViewer.js
View file @ bd2f183c
......@@ -127,7 +127,7 @@
if (touches.length == 2) {
var p1 = touches[0];
var p2 = touches[1];
var x = p1.pageX = p2.pageX; //x1-x2
var x = p1.pageX - p2.pageX; //x1-x2
var y = p1.pageY - p2.pageY; //y1-y2
self.scaleStart = Math.sqrt(x * x + y * y);
self.isMultiTouch = true;
......@@ -143,7 +143,7 @@
event.cancelBubble = true;
var p1 = touches[0];
var p2 = touches[1];
var x = p1.pageX = p2.pageX;
var x = p1.pageX - p2.pageX;
var y = p1.pageY - p2.pageY;
self.scaleEnd = Math.sqrt(x * x + y * y);
self._scaleValue = (self.scaleValue * (self.scaleEnd / self.scaleStart));
......
examples/hello-mui/js/mui.indexedlist.js
View file @ bd2f183c
/**
* 分组列表
* IndexedList
* 类似联系人应用中的联系人列表，可以按首字母分组
* 右侧的字母定位工具条，可以快速定位列表位置
* varstion 1.0.0
......@@ -13,16 +13,16 @@
return '.' + $.className(name);
}
var GroupList = $.GroupList = $.Class.extend({
var IndexedList = $.IndexedList = $.Class.extend({
/**
* 通过 element 和 options 构造 GroupList 实例
* 通过 element 和 options 构造 IndexedList 实例
**/
init: function(holder, options) {
var self = this;
self.options = options || {};
self.box = holder;
if (!self.box) {
throw "实例 GroupList 时需要指定 element";
throw "实例 IndexedList 时需要指定 element";
}
self.createDom();
self.findElements();
......
examples/hello-mui/js/mui.js
View file @ bd2f183c
......@@ -1655,6 +1655,66 @@ var mui = (function(document, undefined) {
}
});
})(mui, 'hold');
/**
* mui gesture pinch
* @param {type} $
* @param {type} name
* @returns {undefined}
*/
(function($, name) {
var handle = function(event, touch) {
var options = this.options;
var session = $.gestures.session;
switch (event.type) {
case $.EVENT_START:
break;
case $.EVENT_MOVE:
if ($.options.gestureConfig.pinch) {
if (touch.touches.length < 2) {
return;
}
if (!session.pinch) { //start
session.pinch = true;
$.trigger(event.target, name + 'start', touch);
}
$.trigger(event.target, name, touch);
var scale = touch.scale;
var rotation = touch.rotation;
var lastScale = typeof touch.lastScale === 'undefined' ? 1 : touch.lastScale;
var scaleDiff = 0.000000000001; //防止scale与lastScale相等，不触发事件的情况。
if (scale > lastScale) { //out
lastScale = scale - scaleDiff;
$.trigger(event.target, name + 'out', touch);
} //in
else if (scale < lastScale) {
lastScale = scale + scaleDiff;
$.trigger(event.target, name + 'in', touch);
}
if (Math.abs(rotation) > options.minRotationAngle) {
$.trigger(event.target, 'rotate', touch);
}
}
break;
case $.EVENT_END:
case $.EVENT_CANCEL:
if ($.options.gestureConfig.pinch && session.pinch && touch.touches.length === 2) {
$.trigger(event.target, name + 'end', touch);
}
break;
}
};
/**
* mui gesture pinch
*/
$.registerGesture({
name: name,
index: 10,
handle: handle,
options: {
minRotationAngle: 0
}
});
})(mui, 'pinch');
/**
* mui.init
* @param {type} $
......
examples/hello-mui/js/mui.locker.js
View file @ bd2f183c
......@@ -280,14 +280,14 @@
new Locker(element, options);
} else {
var optionsText = element.getAttribute('data-locker-options');
var options = optionsText ? JSON.parse(optionsText) : {};
options.lineColor = element.getAttribute('data-locker-line-color') || options.lineColor;
options.ringColor = element.getAttribute('data-locker-ring-color') || options.ringColor;
options.fillColor = element.getAttribute('data-locker-fill-color') || options.fillColor;
options.pointColor = element.getAttribute('data-locker-point-color') || options.pointColor;
options.width = element.getAttribute('data-locker-width') || options.width;
options.height = element.getAttribute('data-locker-height') || options.height;
new Locker(element, options);
var _options = optionsText ? JSON.parse(optionsText) : {};
_options.lineColor = element.getAttribute('data-locker-line-color') || _options.lineColor;
_options.ringColor = element.getAttribute('data-locker-ring-color') || _options.ringColor;
_options.fillColor = element.getAttribute('data-locker-fill-color') || _options.fillColor;
_options.pointColor = element.getAttribute('data-locker-point-color') || _options.pointColor;
_options.width = element.getAttribute('data-locker-width') || _options.width;
_options.height = element.getAttribute('data-locker-height') || _options.height;
new Locker(element, _options);
}
});
return this;
......
examples/hello-mui/js/mui.locker.md deleted 100644 → 0
View file @ d2549d1a
### 集成方式
1. 首先在页面中引入 mui ，包括相关 style 和 script
### 使用方式
1. 通过实例化 Locker, 示例: new Locker(element, options);
2. 通过扩展方法, 示例: mui('选择器').locker(options);
3. 通过添加 className, 示例: <div class='mui-locker' data-locker-options='{}'></div> (注: data-locker-options 值为 options 的 json 字符串);
### options 结构说明
```javascript
{
lineColor: "#999", //连接线颜色，省略时此参数将使用默认值
ringColor: "#888", //圆圈边框颜色，省略时此参数将使用默认值
fillColor: "#f3f3f3", //圆圈填充颜色，省略时此参数将使用默认值
pointColor: "#777", //圆圈中心点颜色，省略时此参数将使用默认值
width:300 , //宽度，通常省略，省略时可以通过 element 的样式控制
height:300, //高度，通常少略，省略时可以通过 element 的样式控制
}
```
### done 事件
1. 可以通过 element.addEventListener('done',function(event){},false); 处理 "绘的制完成" 事件
2. event.detail.points 为绘制结果，points 是一个数组，包括了当时绘制手势数据
3. event.detail.sender 为当前 "手势解锁" 实例，包括 clear 方法，可以清除当前会制的内容
### 示例
HMTL:
```html
<div id='holder' class="mui-locker" style="width:300px;height:300px;" data-locker-options='{"ringColor":"rgba(221,221,221,1)","fillColor":"#ffffff","pointColor":"rgba(0,136,204,1)","lineColor":"rgba(0,136,204,1)"}'></div>
<div id='alert'></div>
```
JavaScript:
```javascript
(function($,doc){
$.init();
var holder = doc.querySelector('#holder'),
alert = doc.querySelector('#alert'),
record = [];
//处理事件
holder.addEventListener('done', function(event) {
var rs = event.detail;
if (rs.points.length < 4) {
alert.innerText = '设定的手势太简单了';
record = [];
rs.sender.clear();
return;
}
record.push(rs.points.join(''));
if (record.length >= 2) {
if (record[0] == record[1]) {
alert.innerText = '手势设定完成';
} else {
alert.innerText = '两次手势设定不一致';
}
rs.sender.clear();
record = [];
} else {
alert.innerText = '请确认手势设定';
rs.sender.clear();
}
});
}(mui,document));
```
examples/hello-mui/js/mui.min.js
View file @ bd2f183c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/hello-mui/js/mui.poppicker.js
View file @ bd2f183c
......@@ -104,9 +104,22 @@
//隐藏
hide: function() {
var self = this;
if (self.disposed) return;
self.panel.classList.remove($.className('active'));
self.mask.close();
document.body.classList.remove($.className('poppicker-active-for-page'));
},
dispose: function() {
var self = this;
self.hide();
setTimeout(function() {
self.panel.parentNode.removeChild(self.panel);
for (var name in self) {
self[name] = null;
delete self[name];
};
self.disposed = true;
}, 300);
}
});
......
examples/hello-mui/list.html
View file @ bd2f183c
......@@ -363,11 +363,11 @@
chat（聊天窗口）
</a>
</li>
<li id='feedback' class="mui-table-view-cell">
<!-- <li id='feedback' class="mui-table-view-cell">
<a class="mui-navigate-right" href="examples/feedback.html">
feedback（问题反馈）
</a>
</li>
</li> -->
<li class="mui-table-view-cell">
<a class="mui-navigate-right" open-type="common" href="examples/imageviewer.html">
image viewer（图片预览）
......@@ -427,7 +427,7 @@
//Android平台暂时使用slide-in-right动画
if(mui.os.android&&parseFloat(mui.os.version)<4.4){
aniShow = "slide-in-right";
document.getElementById('feedback').style.display = 'none';
// document.getElementById('feedback').style.display = 'none';
}
}
//初始化，并预加载webview模式的选项卡
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment