[feature] 支持H5页面图片点击捕获 reviewed by 戴强

@@ -16,6 +16,7 @@
 #define kAnimationDurationMultiplier (1.8)
 
 @interface YHWebViewProgressView ()
+<CAAnimationDelegate>
 @property (nonatomic) BOOL isWkWebView;
 @property (nonatomic, strong)UIImageView *maskView;
 @end

@@ -16,6 +16,11 @@
  */
 @property (weak, nonatomic) IBOutlet id <YHExplorerDelegate> delegate;
 @property (nonatomic) BOOL enableProgressBar;
+/*
+ * Explorer的tap手势  默认NO
+ * 开启后可以处理图片点击事件
+ */
+@property (nonatomic) BOOL enablePictureTapGesture;
 @property (weak, nonatomic) UINavigationBar * currentNaviBar;
 - (UIWebView *)webView;
 
@@ -24,4 +29,5 @@
  *  移除滚动条
  */
 - (void)removeProgress;
+
 @end

@@ -9,13 +9,16 @@
 #import "YHExplorerView.h"
 
 @interface YHExplorerView ()
+<UIGestureRecognizerDelegate>
 @property (strong, nonatomic) YHExplorerViewController *webViewController;
 @property (strong, nonatomic) NSString *url;
 @property (assign, nonatomic) BOOL isLoaded;
+@property (strong, nonatomic) UITapGestureRecognizer *tapGesture;
 
 @end
 
 @implementation YHExplorerView
+
 - (instancetype)initWithFrame:(CGRect)frame withNaviBar:(UINavigationBar *)naviBar
 {
     self = [self initWithFrame:frame];
@@ -27,7 +30,7 @@
 {
     self = [super initWithFrame:frame];
     if (self) {
-        self.isLoaded = NO;
+        [self _initialize];
     }
     
     return self;
@@ -37,12 +40,17 @@
 {
     self = [super initWithCoder:aDecoder];
     if (self) {
-        self.isLoaded = NO;
+        [self _initialize];
     }
     
     return self;
 }
 
+- (void)_initialize {
+    self.isLoaded = NO;
+    self.enablePictureTapGesture = NO;
+}
+
 - (void)setUrl:(NSString *)url
 {
     // 检验url是否能正常转成NSURL，防止webview不能加载
@@ -67,6 +75,9 @@
 - (void)didMoveToWindow
 {
     if (!self.window) {
+        if (_tapGesture) {
+            [self removeGestureRecognizer:self.tapGesture];
+        }
         return;
     }
     
@@ -77,6 +88,11 @@
             [self.webViewController loadWebUrl:self.url];
         }
     }
+    
+    if (self.enablePictureTapGesture) {
+        [self addGestureRecognizer:self.tapGesture];
+        [self.tapGesture requireGestureRecognizerToFail:self.webView.scrollView.panGestureRecognizer];
+    }
 }
 
 - (void)layoutSubviews
@@ -123,6 +139,16 @@
     return self.webViewController.webView;
 }
 
+- (UITapGestureRecognizer *)tapGesture {
+    if (!_tapGesture) {
+        _tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hanldeTapGesture:)];
+        _tapGesture.delegate = self;
+    }
+    return _tapGesture;
+}
+
+#pragma mark - Setters
+
 - (void)setDelegate:(id<YHExplorerDelegate>)delegate
 {
     self.webViewController.delegate = delegate;
@@ -140,11 +166,71 @@
     
 }
 
+- (void)setEnablePictureTapGesture:(BOOL)enablePictureTapGesture {
+    _enablePictureTapGesture = enablePictureTapGesture;
+    
+    if (!self.window) {
+        return;
+    }
+    
+    if (enablePictureTapGesture) {
+        if (self.superview) {
+            [self addGestureRecognizer:self.tapGesture];
+            [self.tapGesture requireGestureRecognizerToFail:self.webView.scrollView.panGestureRecognizer];
+        }
+    } else {
+        if (_tapGesture) {
+            [self removeGestureRecognizer:self.tapGesture];
+            self.tapGesture = nil;
+        }
+    }
+}
+
 - (BOOL)enableProgressBar
 {
     return self.webViewController.progressBarEnabled;
 }
 
+#pragma mark - Private
+- (NSString *)_getImageScriptStringWithPoint:(CGPoint)p {
+    NSString *string = [NSString stringWithFormat:@"var imageElement = document.elementFromPoint(%f, %f);\
+                        var rect = imageElement.getBoundingClientRect();\
+                        var frame = {x:rect.left, y:rect.top, width:rect.width, height:rect.height};\
+                        var dataSet = { url:imageElement.src, displayFrame:frame };\
+                        JSON.stringify(dataSet);", p.x, p.y];
+    return string;
+}
+
+#pragma mark - UIGestureRecognizerDelegate
+- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
+    if (gestureRecognizer == _tapGesture) {
+        return YES;
+    } else {
+        return NO;
+    }
+}
+
+#pragma mark - Gesture Handlers 
+- (void)hanldeTapGesture:(UITapGestureRecognizer *)gesture {
+    if (gesture == _tapGesture) {
+        CGPoint touchPoint = [gesture locationInView:self.webView];
+        
+        NSString *imgURL = [self _getImageScriptStringWithPoint:touchPoint];
+        NSString *resultString = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];
+        
+        if (resultString.length) {
+            
+            NSData *resultData = [resultString dataUsingEncoding:NSUTF8StringEncoding];
+            
+            NSDictionary *json = [NSJSONSerialization JSONObjectWithData:resultData
+                                                                 options:0
+                                                                   error:nil];
+            if ([self.delegate respondsToSelector:@selector(explorer:didClickPicture:)]) {
+                [self.delegate explorer:self.webViewController didClickPicture:json];
+            }
+        }
+    }
+}
 
 #pragma mark - Method Forwarding
 - (BOOL)respondsToSelector:(SEL)aSelector

@@ -137,6 +137,17 @@
  */
 - (NSString * _Nullable)extraUserAgent;
 
+/**
+ @brief 点击图片事件
+        注：需要开启 `YHExplorerView`属性`enablePictureTapGesture`
+ 
+ @param explorer explorer对象
+ @param params   图片的一些信息
+ 
+ @since 1.1.3
+ */
+- (void)explorer:(YHExplorerViewController * _Nonnull)explorer didClickPicture:(NSDictionary * _Nonnull)pictureInfo;
+
 #pragma mark Native
 /**
  @brief H5端触发Native事件

@@ -58,7 +58,7 @@
     WebViewController *wv = [self.storyboard instantiateViewControllerWithIdentifier:@"wc"];
     
     if ([title isEqualToString:@"链接跳转"]) {
-        wv.url = @"http://sealedace.com/content/images/test/h5_test.html";
+        wv.url = @"http://m.yohobuy.com";
     } else {
         wv.url = @"http://localhost";
     }

@@ -13,6 +13,8 @@
 <YHExplorerDelegate>
 @property (weak, nonatomic) IBOutlet YHExplorerView *webView;
 @property (strong, nonatomic) UITextView *tv;
+@property (strong, nonatomic) UIVisualEffectView *blurView;
+@property (strong, nonatomic) UIImageView *displayPictureView;
 @end
 
 @implementation WebViewController
@@ -32,6 +34,27 @@
     return YES;
 }
 
+- (UIVisualEffectView *)blurView {
+    if (!_blurView) {
+        UIBlurEffect *effect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
+        _blurView = [[UIVisualEffectView alloc] initWithEffect:effect];
+        _blurView.frame = CGRectMake(0, 0, CGRectGetWidth(self.view.bounds), 200.f);
+        [_blurView addSubview:self.displayPictureView];
+        _blurView.userInteractionEnabled = YES;
+        self.displayPictureView.frame = _blurView.bounds;
+    }
+    return _blurView;
+}
+
+- (UIImageView *)displayPictureView {
+    if (!_displayPictureView) {
+        _displayPictureView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
+        _displayPictureView.contentMode = UIViewContentModeScaleAspectFit;
+        _displayPictureView.autoresizingMask = UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight;
+    }
+    return _displayPictureView;
+}
+
 - (void)dealloc
 {
     
@@ -52,6 +75,7 @@
     [super viewDidLoad];
     self.webView.delegate = self;
     self.webView.enableProgressBar = YES;
+    self.webView.enablePictureTapGesture = YES;
     
     [self.webView loadWebUrl:self.url];
 //    [self.webView loadWebUrl:[[NSBundle mainBundle] pathForResource:@"untitled" ofType:@"html"]];
@@ -68,6 +92,21 @@
 //    [self.webView loadHTMLString:html];
 }
 
+- (void)viewWillAppear:(BOOL)animated {
+    [super viewWillAppear:animated];
+    
+    if (self.blurView.superview) {
+        [NSObject cancelPreviousPerformRequestsWithTarget:self];
+        [self performSelector:@selector(hideBlurView) withObject:nil afterDelay:2];
+    }
+}
+
+- (void)viewWillDisappear:(BOOL)animated {
+    [super viewWillDisappear:animated];
+    
+    [NSObject cancelPreviousPerformRequestsWithTarget:self];
+}
+
 #pragma mark - YHExplorerDelegate
 - (void)pageTitleUpdated:(NSString *)title
 {
@@ -117,4 +156,61 @@
     self.tv.text = [[NSString alloc] initWithFormat:@"url: %@\nopentype: %@\nopenParams:\n%@", freshUrl, openType, openParameters];
 }
 
+// H5上点击了图片的事件
+- (void)explorer:(YHExplorerViewController *)explorer didClickPicture:(NSDictionary *)pictureInfo {
+    NSLog(@"explorer didClickPicture: \n%@", pictureInfo);
+    
+    NSString *imageUrl = pictureInfo[@"url"];
+    
+    if (imageUrl.length == 0) {
+        return;
+    }
+    
+    CGFloat width = CGRectGetWidth(self.view.frame);
+    CGFloat height = CGRectGetHeight(self.view.frame)-CGRectGetMaxY(self.navigationController.navigationBar.frame);
+    
+    self.blurView.frame = CGRectMake((CGRectGetWidth(self.view.frame)-width)/2,
+                                     CGRectGetHeight(self.view.frame)+height,
+                                     width,
+                                     height);
+    
+    if (self.blurView.superview) {
+        [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(hideBlurView) object:nil];
+        [self performSelector:@selector(hideBlurView) withObject:nil afterDelay:2];
+    } else {
+    
+        [self.view addSubview:self.blurView];
+        [UIView animateWithDuration:0.7
+                              delay:0
+             usingSpringWithDamping:1
+              initialSpringVelocity:0.5
+                            options:UIViewAnimationOptionCurveEaseInOut
+                         animations:^{
+                             CGPoint center = self.blurView.center;
+                             self.blurView.center = CGPointMake(center.x, CGRectGetHeight(self.view.frame)-height/2);
+                         } completion:^(BOOL finished) {
+                             [NSObject cancelPreviousPerformRequestsWithTarget:self selector:@selector(hideBlurView) object:nil];
+                             [self performSelector:@selector(hideBlurView) withObject:nil afterDelay:2];
+                         }];
+    }
+    
+    // 从url加载图片
+    NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]];
+    self.displayPictureView.image = [UIImage imageWithData:imageData scale:0];
+}
+
+- (void)hideBlurView {
+    [UIView animateWithDuration:0.7
+                          delay:0
+         usingSpringWithDamping:1
+          initialSpringVelocity:0.5
+                        options:UIViewAnimationOptionCurveEaseInOut
+                     animations:^{
+                         CGPoint center = self.blurView.center;
+                         self.blurView.center = CGPointMake(center.x, CGRectGetHeight(self.view.frame)+CGRectGetHeight(self.blurView.frame)/2);
+                     } completion:^(BOOL finished) {
+                         [self.blurView removeFromSuperview];
+                     }];
+}
+
 @end