!2664 feat(#I52PW1): image viewer support touch on mobile device

* doc: 更新组件名称
* fix: 修复拖动报错问题
* chore: 更新打包文件
* feat: 手势移除动画效果
* revert: 恢复配置
* fix: 修复js
* wip: 提交脚本调试
* chore: 更新资源文件
* feat: ImageViewer 支持手势缩放
* feat: 增加手势缩放

src/BootstrapBlazor.Shared/Locales/en.json

@@ -2698,7 +2698,7 @@
     "LinkButton": "LinkButton",
     "ListView": "ListView",
     "Locator": "Locator",
-    "Image": "Image",
+    "ImageViewer": "ImageViewer",
     "Popover": "Popover",
     "Print": "Print",
     "QRCode": "QRCode",

src/BootstrapBlazor.Shared/Locales/zh.json

@@ -2708,7 +2708,7 @@
     "LinkButton": "链接按钮 LinkButton",
     "ListView": "列表组件 ListView",
     "Locator": "位置定位 Locator",
-    "Image": "图片 Image",
+    "ImageViewer": "图片 ImageViewer",
     "Popover": "弹出窗 Popover",
     "Print": "打印组件 Print",
     "QRCode": "二维码 QRCode",

src/BootstrapBlazor.Shared/Samples/ImageViewers.razor

@@ -1,6 +1,6 @@
 @page "/imageviewers"
 
-<h3>Image 图片</h3>
+<h3>ImageViewer 图片</h3>
 
 <h4>图片容器，在保留原生 img 的特性下，支持懒加载，自定义占位、加载失败等</h4>
 

src/BootstrapBlazor/Components/ImageViewer/ImageViewer.js

@@ -227,6 +227,12 @@
                 }
                 return value;
             };
+
+            $prevImg.touchScale(function (scale) {
+                processImage(function () {
+                    return scale;
+                });
+            });
         }
     });
 })(jQuery);

src/BootstrapBlazor/wwwroot/lib/extensions/longbow.extensions.js

@@ -118,7 +118,7 @@
     });
 
     $.fn.extend({
-        drag: function (star, move, end) {
+        drag: function (start, move, end) {
             var $this = $(this);
 
             var handleDragStart = function (e) {
@@ -130,12 +130,16 @@
                 document.addEventListener('mouseup', handleDragEnd);
                 document.addEventListener('touchend', handleDragEnd);
 
-                if ($.isFunction(star)) {
-                    star.call($this, e);
+                if ($.isFunction(start)) {
+                    start.call($this, e);
                 }
             };
 
             var handleDragMove = function (e) {
+                if (e.touches && e.touches.length > 1) {
+                    return;
+                }
+
                 if ($.isFunction(move)) {
                     move.call($this, e);
                 }
@@ -157,6 +161,109 @@
 
             $this.on('mousedown', handleDragStart);
             $this.on('touchstart', handleDragStart);
+        },
+        touchScale: function (cb, options) {
+            options = $.extend({ max: null, min: 0.195 }, options);
+            var eleImg = this[0];
+            var store = {
+                scale: 1
+            };
+            var $this = $(this);
+
+            // 缩放处理
+            eleImg.addEventListener('touchstart', function (event) {
+                var touches = event.touches;
+                var events = touches[0];
+                var events2 = touches[1];
+
+                event.preventDefault();
+
+                store.pageX = events.pageX;
+                store.pageY = events.pageY;
+                store.moveable = true;
+
+                if (events2) {
+                    store.pageX2 = events2.pageX;
+                    store.pageY2 = events2.pageY;
+                }
+
+                store.originScale = store.scale || 1;
+            });
+
+            document.addEventListener('touchmove', function (event) {
+                if (!store.moveable) {
+                    return;
+                }
+
+                var touches = event.touches;
+                var events = touches[0];
+                var events2 = touches[1];
+
+                if (events2) {
+                    event.preventDefault();
+                    if (!$this.hasClass('transition-none')) {
+                        $this.addClass('transition-none');
+                    }
+
+                    if (!store.pageX2) {
+                        store.pageX2 = events2.pageX;
+                    }
+                    if (!store.pageY2) {
+                        store.pageY2 = events2.pageY;
+                    }
+
+                    var getDistance = function (start, stop) {
+                        return Math.hypot(stop.x - start.x, stop.y - start.y);
+                    };
+
+                    var zoom = getDistance({
+                        x: events.pageX,
+                        y: events.pageY
+                    }, {
+                        x: events2.pageX,
+                        y: events2.pageY
+                    }) /
+                        getDistance({
+                            x: store.pageX,
+                            y: store.pageY
+                        }, {
+                            x: store.pageX2,
+                            y: store.pageY2
+                        });
+
+                    var newScale = store.originScale * zoom;
+
+                    if (options.max != null && newScale > options.max) {
+                        newScale = options.max;
+                    }
+
+                    if (options.min != null && newScale < options.min) {
+                        newScale = options.min;
+                    }
+
+                    store.scale = newScale;
+
+                    if ($.isFunction(cb)) {
+                        cb.call($this, newScale);
+                    }
+                }
+            });
+
+            document.addEventListener('touchend', function () {
+                store.moveable = false;
+                $this.removeClass('transition-none');
+
+                delete store.pageX2;
+                delete store.pageY2;
+            });
+
+            document.addEventListener('touchcancel', function () {
+                store.moveable = false;
+                $this.removeClass('transition-none');
+
+                delete store.pageX2;
+                delete store.pageY2;
+            });
         }
     });