Use Javascript to fetch to the image for the ImageViewController

iOS/Article/ArticleViewController.swift

@@ -349,13 +349,36 @@ extension ArticleViewController: WKUIDelegate {
 extension ArticleViewController: WKScriptMessageHandler {
 
 	func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
-		if message.name == MessageName.imageWasClicked, let link = message.body as? String, let url = URL(string: link) {
-			let imageVC = UIStoryboard.main.instantiateController(ofType: ImageViewController.self)
-			imageVC.url = url
-			imageVC.modalPresentationStyle = .fullScreen
-			present(imageVC, animated: true)
+		if message.name == MessageName.imageWasClicked,
+			let body = message.body as? String,
+			let data = body.data(using: .utf8),
+			let clickMessage = try? JSONDecoder().decode(ImageClickMessage.self, from: data),
+			let range = clickMessage.imageURL.range(of: ";base64,") {
+			
+			let base64Image = String(clickMessage.imageURL.suffix(from: range.upperBound))
+			if let imageData = Data(base64Encoded: base64Image), let image = UIImage(data: imageData) {
+				let imageVC = UIStoryboard.main.instantiateController(ofType: ImageViewController.self)
+				imageVC.image = image
+				imageVC.modalPresentationStyle = .fullScreen
+				present(imageVC, animated: true)
+			}
 		}
 	}
+	
+}
+
+// MARK: JSON
+private struct TemplateData: Codable {
+	let style: String
+	let body: String
+}
+
+private struct ImageClickMessage: Codable {
+	let x: Float
+	let y: Float
+	let width: Float
+	let height: Float
+	let imageURL: String
 }
 
 // MARK: Private
@@ -369,8 +392,3 @@ private extension ArticleViewController {
 	}
 	
 }
-
-private struct TemplateData: Codable {
-	let style: String
-	let body: String
-}

iOS/Article/ArticleViewControllerWebViewProvider.swift

@@ -69,6 +69,7 @@ class ArticleViewControllerWebViewProvider: NSObject, WKNavigationDelegate {
 
 			let configuration = WKWebViewConfiguration()
 			configuration.preferences = preferences
+			configuration.setValue(true, forKey: "allowUniversalAccessFromFileURLs")
 			configuration.allowsInlineMediaPlayback = true
 			configuration.mediaTypesRequiringUserActionForPlayback = .video
 			

iOS/Article/ImageViewController.swift

@@ -11,55 +11,29 @@ import UIKit
 class ImageViewController: UIViewController {
 
 	@IBOutlet weak var shareButton: UIButton!
-	@IBOutlet weak var activityIndicatorView: UIActivityIndicatorView!
 	@IBOutlet weak var imageScrollView: ImageScrollView!
 	
-	private var dataTask: URLSessionDataTask? = nil
-	private var image: UIImage?
-	var url: URL!
+	var image: UIImage!
 	
 	override func viewDidLoad() {
         super.viewDidLoad()
 		
-		activityIndicatorView.isHidden = false
-		activityIndicatorView.startAnimating()
-		
         imageScrollView.setup()
         imageScrollView.imageScrollViewDelegate = self
         imageScrollView.imageContentMode = .aspectFit
         imageScrollView.initialOffset = .center
-		
-		dataTask = URLSession.shared.dataTask(with: url) { [weak self] data, response, error in
-			guard let self = self else { return }
-			
-			if let data = data, let image = UIImage(data: data) {
-				
-				self.image = image
-				
-				DispatchQueue.main.async {
-					self.shareButton.isEnabled = true
-					self.activityIndicatorView.isHidden = true
-					self.activityIndicatorView.stopAnimating()
-					self.imageScrollView.display(image: image)
-				}
-				
-			}
-			
-		}
-		
-		dataTask!.resume()
+		imageScrollView.display(image: image)
     }
 
 	@IBAction func share(_ sender: Any) {
 		guard let image = image else { return }
-		let activityViewController = UIActivityViewController(activityItems: [url!, image], applicationActivities: nil)
+		let activityViewController = UIActivityViewController(activityItems: [image], applicationActivities: nil)
 		activityViewController.popoverPresentationController?.sourceView = shareButton
 		activityViewController.popoverPresentationController?.sourceRect = shareButton.bounds
 		present(activityViewController, animated: true)
 	}
 	
 	@IBAction func done(_ sender: Any) {
-		dataTask?.cancel()
 		dismiss(animated: true)
 	}
 	

iOS/Base.lproj/Main.storyboard

@@ -237,19 +237,10 @@
                         <subviews>
                             <scrollView verifyAmbiguity="off" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" ambiguous="YES" translatesAutoresizingMaskIntoConstraints="NO" id="msG-pz-EKk" customClass="ImageScrollView" customModule="NetNewsWire" customModuleProvider="target">
                                 <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
-                                <subviews>
-                                    <activityIndicatorView opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="750" verticalHuggingPriority="750" style="large" translatesAutoresizingMaskIntoConstraints="NO" id="iEh-n3-Vkg">
-                                        <rect key="frame" x="188.5" y="390.5" width="37" height="37"/>
-                                    </activityIndicatorView>
-                                </subviews>
-                                <constraints>
-                                    <constraint firstItem="iEh-n3-Vkg" firstAttribute="centerX" secondItem="msG-pz-EKk" secondAttribute="centerX" id="FSP-DY-Vax"/>
-                                    <constraint firstItem="iEh-n3-Vkg" firstAttribute="centerY" secondItem="msG-pz-EKk" secondAttribute="centerY" id="rev-zC-wMY"/>
-                                </constraints>
                                 <viewLayoutGuide key="contentLayoutGuide" id="phv-DN-krZ"/>
                                 <viewLayoutGuide key="frameLayoutGuide" id="NNU-C8-Fsz"/>
                             </scrollView>
-                            <button opaque="NO" contentMode="scaleToFill" enabled="NO" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="RmY-a3-hUg">
+                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="RmY-a3-hUg">
                                 <rect key="frame" x="362" y="44" width="44" height="44"/>
                                 <constraints>
                                     <constraint firstAttribute="width" constant="44" id="56o-Zr-T0w"/>
@@ -288,7 +279,6 @@
                         <viewLayoutGuide key="safeArea" id="mbY-02-GFL"/>
                     </view>
                     <connections>
-                        <outlet property="activityIndicatorView" destination="iEh-n3-Vkg" id="xue-X1-awS"/>
                         <outlet property="imageScrollView" destination="msG-pz-EKk" id="dGi-M6-dcO"/>
                         <outlet property="shareButton" destination="RmY-a3-hUg" id="Z54-ah-WAI"/>
                     </connections>

iOS/Resources/main_ios.js

@@ -1,6 +1,34 @@
 // Used to pop a resizable image view
-function imageWasClicked(img) {
-	window.webkit.messageHandlers.imageWasClicked.postMessage(img.src);
+async function imageWasClicked(img) {
+	const rect = img.getBoundingClientRect();
+	
+	var message = {
+		x: rect.x,
+		y: rect.y,
+		width: rect.width,
+		height: rect.height
+	};
+	
+	try {
+		const response = await fetch(img.src);
+		if (!response.ok) {
+			throw new Error('Network response was not ok.');
+		}
+
+		const imgBlob = await response.blob();
+
+		var reader = new FileReader();
+		reader.readAsDataURL(imgBlob);
+
+		reader.onloadend = function() {
+			message.imageURL = reader.result;
+			var jsonMessage = JSON.stringify(message);
+			window.webkit.messageHandlers.imageWasClicked.postMessage(jsonMessage);
+		}
+	} catch (error) {
+		console.log('There has been a problem with your fetch operation: ', error.message);
+	}
+	
 }
 
 // Add the click listeners for images