feat(webview): add loader

feat(FAB): add badge count
feat(weloop): add delegate method for badge count update

Author: HHK1

Example/WeLoop/AppDelegate.swift

@@ -46,4 +46,8 @@ extension AppDelegate: WeLoopDelegate {
         // The widget could not be launched. Most likely is that the initialization process failed, or the user is missing in autoAuthentication
         print(error)
     }
+    
+    func notificationCountUpdated(newCount: Int) {
+        print(newCount)
+    }
 }

WeLoop/Classes/FloatingButtonController.swift

@@ -58,8 +58,8 @@ class FloatingButtonController: UIViewController {
         view.setNeedsLayout()
     }
 
-    func setNotificationBadge(hidden: Bool) {
-        self.button.setBadge(hidden: hidden)
+    func setNotificationBadge(count: Int) {
+        self.button.setBadge(count: count)
     }
 
     @objc func keyboardDidShow(notification: NSNotification) {

WeLoop/Classes/WeLoop.swift

@@ -18,6 +18,7 @@ import UIKit
     @objc optional func initializationSuccessful()
     @objc optional func initializationFailed(with error: Error)
     @objc optional func failedToLaunch(with error: Error)
+    @objc optional func notificationCountUpdated(newCount: Int)
 }
 
 public class WeLoop: NSObject {
@@ -219,8 +220,9 @@ public class WeLoop: NSObject {
         return URL(string: "\(appURL)?appGuid=\(apiKey)")!
     }
 
-    func setNotificationBadge(count: Int?) {
-        fabController?.setNotificationBadge(hidden: count == nil || count! == 0)
+    func setNotificationBadge(count: Int) {
+        fabController?.setNotificationBadge(count: count)
+        delegate?.notificationCountUpdated?(newCount: count)
     }
 }
 

WeLoop/Classes/WeLoopButton.swift

@@ -10,11 +10,13 @@ import UIKit
 
 private let size: CGFloat = 60.0
 private let badgeSize: CGFloat = 24.0
+private let badgePadding: CGFloat = 5.0
 private let shadowHighlightedOpacity: Float = 0.2
 
 class WeLoopButton: UIButton {
 
     private let badge = UIView(frame: CGRect(x: 0, y: 0, width: badgeSize, height: badgeSize))
+    private let badgeLabel =  UILabel(frame: CGRect(x: 0, y: 0, width: badgeSize, height: badgeSize))
 
     var color: UIColor? = nil  {
         didSet {
@@ -58,23 +60,28 @@ class WeLoopButton: UIButton {
 
     func setupBadge() {
         insertSubview(badge, at: 1)
-        badge.translatesAutoresizingMaskIntoConstraints = false
-        badge.backgroundColor = .white
-        badge.layer.borderColor = UIColor.red.cgColor
-        badge.layer.borderWidth = badgeSize / 2 - 2
+        badge.addSubview(badgeLabel)
+        
+        badge.backgroundColor = .red
+        badgeLabel.textColor = .white
+        badgeLabel.textAlignment = .center
         badge.layer.cornerRadius = badgeSize / 2
 
+        badge.clipsToBounds =  true
         badge.isHidden = true
 
-        badge.layer.shadowColor = UIColor.red.cgColor
-        badge.layer.shadowRadius = 3
-        badge.layer.shadowOpacity = 0.1
-        badge.layer.shadowOffset = CGSize.zero
+        badge.translatesAutoresizingMaskIntoConstraints = false
+        badgeLabel.translatesAutoresizingMaskIntoConstraints = false
 
-        badge.widthAnchor.constraint(equalToConstant: badgeSize).isActive = true
+        badge.widthAnchor.constraint(greaterThanOrEqualToConstant: badgeSize).isActive = true
         badge.heightAnchor.constraint(equalToConstant: badgeSize).isActive = true
         badge.centerYAnchor.constraint(equalTo: topAnchor, constant: size / (2 * CGFloat.pi)).isActive = true
         badge.centerXAnchor.constraint(equalTo: rightAnchor, constant: -size / (2 * CGFloat.pi)).isActive =  true
+        
+        badgeLabel.centerXAnchor.constraint(equalTo: badge.centerXAnchor).isActive = true
+        badgeLabel.centerYAnchor.constraint(equalTo: badge.centerYAnchor).isActive = true
+        badgeLabel.leftAnchor.constraint(equalTo: badge.leftAnchor, constant: badgePadding).isActive = true
+        badgeLabel.rightAnchor.constraint(equalTo: badge.rightAnchor, constant: -badgePadding).isActive = true
     }
 
     func configureButton(settings: Settings) {
@@ -98,7 +105,8 @@ class WeLoopButton: UIButton {
         }
     }
 
-    func setBadge(hidden: Bool) {
-        badge.isHidden = hidden
+    func setBadge(count: Int) {
+        badge.isHidden = count < 1
+        badgeLabel.text = "\(count)"
     }
 }

WeLoop/Classes/WeLoopViewController.swift

@@ -20,6 +20,7 @@ class WeLoopViewController: UIViewController {
 
     var url: URL?
     weak var webView: WKWebView!
+    weak var indicator: UIActivityIndicatorView!
     var window: UIWindow = UIWindow(frame: UIScreen.main.bounds)
     private var observation: NSKeyValueObservation?
 
@@ -64,17 +65,23 @@ class WeLoopViewController: UIViewController {
 
     private func configureWebview() {
         let webView = WKWebView(frame: view.bounds, configuration: self.configuration)
+        let indicator = UIActivityIndicatorView(frame: view.bounds)
         self.webView = webView
+        self.indicator = indicator
         view.addSubview(webView)
+        view.addSubview(indicator)
 
 
         if #available(iOS 11.0, *) {
             let bottomInset = UIApplication.shared.keyWindow?.safeAreaInsets.bottom ?? 0
             self.additionalSafeAreaInsets = UIEdgeInsets(top: 0, left: 0, bottom: -bottomInset, right: 0)
         }
 
+        indicator.style = .gray
+        indicator.hidesWhenStopped = true
+        
         webView.isOpaque = false
-        webView.backgroundColor = .clear
+        webView.backgroundColor = .white
         webView.scrollView.backgroundColor = .clear
 
         webView.allowsLinkPreview = false
@@ -92,7 +99,7 @@ class WeLoopViewController: UIViewController {
 
     func loadWeLoop() {
         guard let url = url else { return }
-        webView.alpha = 0
+        indicator.startAnimating()
         webView.load(URLRequest(url: url))
     }
 
@@ -107,7 +114,7 @@ class WeLoopViewController: UIViewController {
 
     func sendCurrentUser() {
         guard let uuid = WeLoop.shared.apiKey, let token = WeLoop.shared.authenticationToken else { return }
-        webView?.evaluateJavaScript("GetCurrentUser({ appGuid: \(uuid), token: \(token)})")
+        webView?.evaluateJavaScript("GetCurrentUser({ appGuid: '\(uuid)', token: '\(token)'})")
     }
 }
 
@@ -147,6 +154,9 @@ extension WeLoopViewController: WKNavigationDelegate {
     }
 
     func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
-         webView.alpha = 1
+       indicator.stopAnimating()
+        //TODO: commented out for now, but at this point the load is finished (files have been loaded) and the spa should render
+        // a loader. This is not done immediately so there is a little lag, but I can't do anything more on the native side.
+        //webView.backgroundColor = .clear
     }
 }