Prepare AdsGridView for AdSense (#586)

* changes image ratio delegate to item height, update demo and classes

* asks data source for cell classes

* calculates adsGridViewCell height in static func

* adds BannerAdDemoCell to demo google ad

* updates snapshot reference image for frontpage and adsgridview

* adds configure function to ads grid cell

* changes ads creation format

* update version in podspec

Demo/Assets.xcassets/adsense-demo.imageset/Contents.json

@@ -0,0 +1,21 @@
+{
+  "images" : [
+    {
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "idiom" : "universal",
+      "filename" : "adsense-demo.png",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "version" : 1,
+    "author" : "xcode"
+  }
+}

Demo/Fullscreen/FrontPage/FrontPageViewDemoView.swift

@@ -5,11 +5,16 @@
 import FinniversKit
 
 public class FrontpageViewDemoView: UIView {
-    private let ads = AdFactory.create(numberOfModels: 120)
     private let markets = Market.allMarkets
     private var didSetupView = false
     private var visibleItems = 20
 
+    private let ads: [Ad] = {
+        var ads = AdFactory.create(numberOfModels: 120)
+        ads.insert(AdFactory.googleDemoAd, at: 4)
+        return ads
+    }()
+
     private lazy var frontPageView: FrontPageView = {
         let view = FrontPageView(delegate: self)
         view.model = FrontpageViewDefaultData()
@@ -74,8 +79,41 @@ extension FrontpageViewDemoView: AdsGridViewDataSource {
         return min(ads.count, visibleItems)
     }
 
-    public func adsGridView(_ adsGridView: AdsGridView, modelAtIndex index: Int) -> AdsGridViewModel {
-        return ads[index]
+    public func adsGridView(_ adsGridView: AdsGridView, cellClassesIn collectionView: UICollectionView) -> [UICollectionViewCell.Type] {
+        return [
+            AdsGridViewCell.self,
+            BannerAdDemoCell.self
+        ]
+    }
+
+    public func adsGridView(_ adsGridView: AdsGridView, heightForItemWithWidth width: CGFloat, at indexPath: IndexPath) -> CGFloat {
+        let model = ads[indexPath.item]
+
+        switch model.adType {
+        case .google:
+            return 300
+        default:
+            return AdsGridViewCell.height(
+                for: model,
+                width: width
+            )
+        }
+    }
+
+    public func adsGridView(_ adsGridView: AdsGridView, collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let model = ads[indexPath.item]
+
+        switch model.adType {
+        case .google:
+            return collectionView.dequeue(BannerAdDemoCell.self, for: indexPath)
+
+        default:
+            let cell = collectionView.dequeue(AdsGridViewCell.self, for: indexPath)
+            cell.dataSource = adsGridView
+            cell.delegate = adsGridView
+            cell.configure(with: model, atIndex: indexPath.item)
+            return cell
+        }
     }
 
     public func adsGridView(_ adsGridView: AdsGridView, loadImageForModel model: AdsGridViewModel, imageWidth: CGFloat, completion: @escaping ((AdsGridViewModel, UIImage?) -> Void)) {

Demo/Recycling/GridViews/Ads/AdsGridViewDemoView.swift

@@ -6,7 +6,11 @@ import FinniversKit
 
 /// For use with AdsGridView.
 public class AdDataSource: NSObject {
-    let models = AdFactory.create(numberOfModels: 9)
+    let models: [Ad] = {
+        var ads = AdFactory.create(numberOfModels: 9)
+        ads.insert(AdFactory.googleDemoAd, at: 4)
+        return ads
+    }()
 }
 
 public class AdsGridViewDemoView: UIView {
@@ -51,8 +55,41 @@ extension AdsGridViewDemoView: AdsGridViewDataSource {
         return dataSource.models.count
     }
 
-    public func adsGridView(_ adsGridView: AdsGridView, modelAtIndex index: Int) -> AdsGridViewModel {
-        return dataSource.models[index]
+    public func adsGridView(_ adsGridView: AdsGridView, cellClassesIn collectionView: UICollectionView) -> [UICollectionViewCell.Type] {
+        return [
+            AdsGridViewCell.self,
+            BannerAdDemoCell.self
+        ]
+    }
+
+    public func adsGridView(_ adsGridView: AdsGridView, heightForItemWithWidth width: CGFloat, at indexPath: IndexPath) -> CGFloat {
+        let model = dataSource.models[indexPath.item]
+
+        switch model.adType {
+        case .google:
+            return 300
+        default:
+            return AdsGridViewCell.height(
+                for: model,
+                width: width
+            )
+        }
+    }
+
+    public func adsGridView(_ adsGridView: AdsGridView, collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
+        let model = dataSource.models[indexPath.item]
+
+        switch model.adType {
+        case .google:
+            return collectionView.dequeue(BannerAdDemoCell.self, for: indexPath)
+
+        default:
+            let cell = collectionView.dequeue(AdsGridViewCell.self, for: indexPath)
+            cell.dataSource = adsGridView
+            cell.delegate = adsGridView
+            cell.configure(with: model, atIndex: indexPath.item)
+            return cell
+        }
     }
 
     public func adsGridView(_ adsGridView: AdsGridView, loadImageForModel model: AdsGridViewModel, imageWidth: CGFloat, completion: @escaping ((AdsGridViewModel, UIImage?) -> Void)) {

Demo/Recycling/GridViews/Ads/AdsGridViewDemoViewHelpers.swift

@@ -6,6 +6,11 @@ import FinniversKit
 
 /// A model confirming to the AdsGridViewModel protocol for showcasing AdsGridViewCell in playground.
 public struct Ad: AdsGridViewModel {
+    public enum AdType {
+        case google
+        case normal
+    }
+
     public let imagePath: String?
     public let imageSize: CGSize
     public var iconImage: UIImage?
@@ -14,6 +19,7 @@ public struct Ad: AdsGridViewModel {
     public var accessory: String?
     public let imageText: String?
     public var isFavorite = false
+    public var adType: AdType
 
     public var accessibilityLabel: String {
         var message = title
@@ -41,6 +47,19 @@ public struct AdFactory {
 
     private static var minimumDataItemsCount = { return min(titles.count, min(imageSources.count, min(prices.count, subtitles.count))) }()
 
+    public static let googleDemoAd = Ad(
+        imagePath: nil,
+        imageSize: .zero,
+        iconImage: nil,
+        title: "Google Ad",
+        subtitle: nil,
+        accessory: nil,
+        imageText: nil,
+        isFavorite: false,
+        adType: .google,
+        favoriteButtonAccessibilityLabel: ""
+    )
+
     public static func create(numberOfModels: Int) -> [Ad] {
         return (0 ..< numberOfModels).map { index in
             let dataIndex = index % minimumDataItemsCount
@@ -58,6 +77,7 @@ public struct AdFactory {
                 accessory: index % 2 == 0 ? "Totalpris \(price)" : nil,
                 imageText: price,
                 isFavorite: false,
+                adType: .normal,
                 favoriteButtonAccessibilityLabel: "Sett annonsen som favoritt")
         }
     }

Demo/Recycling/GridViews/Ads/BannerAdDemoCell.swift

@@ -0,0 +1,25 @@
+//
+//  Copyright © 2019 FINN AS. All rights reserved.
+//
+
+import FinniversKit
+
+class BannerAdDemoCell: UICollectionViewCell {
+
+    private lazy var imageView: UIImageView = {
+        let image = UIImage(named: "adsense-demo")
+        let imageView = UIImageView(image: image)
+        imageView.contentMode = .scaleAspectFit
+        return imageView
+    }()
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        contentView.addSubview(imageView)
+        imageView.fillInSuperview()
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

FinniversKit.podspec

@@ -1,6 +1,6 @@
 Pod::Spec.new do |s|
   s.name         = 'FinniversKit'
-  s.version      = '8.0.0'
+  s.version      = '9.0.0'
   s.summary      = "FINN's iOS Components"
   s.author       = 'FINN.no'
   s.homepage     = 'https://schibsted.frontify.com/d/oCLrx0cypXJM/design-system'

FinniversKit.xcodeproj/project.pbxproj

@@ -474,6 +474,7 @@
 		DAB7FAAA21B690DD00BF8CC6 /* BottomSheetGestureController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAB7FAA421B690DD00BF8CC6 /* BottomSheetGestureController.swift */; };
 		DAB7FAAB21B690DD00BF8CC6 /* BottomSheetInteractionController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAB7FAA521B690DD00BF8CC6 /* BottomSheetInteractionController.swift */; };
 		DAB7FAAE21B6924E00BF8CC6 /* SpringAnimator.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAB7FAAD21B6924E00BF8CC6 /* SpringAnimator.swift */; };
+		DABA6F47232FAF1D0007B24D /* BannerAdDemoCell.swift in Sources */ = {isa = PBXBuildFile; fileRef = DABA6F46232FAF1D0007B24D /* BannerAdDemoCell.swift */; };
 		DAC0383B2119B7DC00CD49B7 /* Icons.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = DAC0383A2119B7DC00CD49B7 /* Icons.xcassets */; };
 		DAC1EC4E21C1297500F4FEC4 /* BalloonView.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAC1EC4D21C1297500F4FEC4 /* BalloonView.swift */; };
 		DAC65FBB21E35F7300644CDE /* BottomSheetMechanicsDemoViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = DAC65FBA21E35F7300644CDE /* BottomSheetMechanicsDemoViewController.swift */; };
@@ -1028,6 +1029,7 @@
 		DAB7FAA421B690DD00BF8CC6 /* BottomSheetGestureController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BottomSheetGestureController.swift; sourceTree = "<group>"; };
 		DAB7FAA521B690DD00BF8CC6 /* BottomSheetInteractionController.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = BottomSheetInteractionController.swift; sourceTree = "<group>"; };
 		DAB7FAAD21B6924E00BF8CC6 /* SpringAnimator.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SpringAnimator.swift; sourceTree = "<group>"; };
+		DABA6F46232FAF1D0007B24D /* BannerAdDemoCell.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BannerAdDemoCell.swift; sourceTree = "<group>"; };
 		DAC0383A2119B7DC00CD49B7 /* Icons.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Icons.xcassets; sourceTree = "<group>"; };
 		DAC1EC4D21C1297500F4FEC4 /* BalloonView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BalloonView.swift; sourceTree = "<group>"; };
 		DAC1EC5021C1322900F4FEC4 /* NewYearsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = NewYearsView.swift; sourceTree = "<group>"; };
@@ -3376,6 +3378,7 @@
 			children = (
 				441FE437209A254200B04EF1 /* AdsGridViewDemoView.swift */,
 				441FE438209A254200B04EF1 /* AdsGridViewDemoViewHelpers.swift */,
+				DABA6F46232FAF1D0007B24D /* BannerAdDemoCell.swift */,
 			);
 			path = Ads;
 			sourceTree = "<group>";
@@ -4058,6 +4061,7 @@
 				AA864B37222D6F3F00BAE95A /* DialogueViewController.swift in Sources */,
 				44AEFC2422E722FC00D3C307 /* BasicCellDemoView.swift in Sources */,
 				441FE43E209A254900B04EF1 /* MarketsGridViewDemoView.swift in Sources */,
+				DABA6F47232FAF1D0007B24D /* BannerAdDemoCell.swift in Sources */,
 				44AEFC2522E722FC00D3C307 /* BasicCellVariationsDemoView.swift in Sources */,
 				4441F9EF22CCF72F00DCFD2F /* AddressViewDemoView.swift in Sources */,
 				9B7D5A2B22E1A5AF001E4005 /* KlimabroletDemoViewController.swift in Sources */,

Sources/Recycling/GridViews/Ads/Cell/AdsGridViewCell.swift

@@ -98,6 +98,8 @@ public class AdsGridViewCell: UICollectionViewCell {
         return button
     }()
 
+    private var model: AdsGridViewModel?
+
     // MARK: - External properties
 
     /// The loading color is used to fill the image view while we load the image.
@@ -116,16 +118,6 @@ public class AdsGridViewCell: UICollectionViewCell {
     /// Optional index of the cell
     public var index: Int?
 
-    /// Height in cell that is not image
-    public static var nonImageHeight: CGFloat {
-        return subtitleTopMargin + subtitleHeight + titleTopMargin + titleHeight + bottomMargin
-    }
-
-    /// Height in cell that is not image including the height of accessory label
-    public static var nonImageWithAccessoryHeight: CGFloat {
-        return subtitleTopMargin + subtitleHeight + titleTopMargin + titleHeight + accessoryHeight + bottomMargin
-    }
-
     // MARK: - Setup
 
     public override init(frame: CGRect) {
@@ -220,19 +212,23 @@ public class AdsGridViewCell: UICollectionViewCell {
 
     // MARK: - Dependency injection
 
-    public var model: AdsGridViewModel? {
-        didSet {
-            if let model = model {
-                iconImageView.image = model.iconImage?.withRenderingMode(.alwaysTemplate)
-                titleLabel.text = model.title
-                subtitleLabel.text = model.subtitle
-                accessoryLabel.text = model.accessory
-                imageTextLabel.text = model.imageText
-                accessibilityLabel = model.accessibilityLabel
-                favoriteButton.accessibilityLabel = model.favoriteButtonAccessibilityLabel
-                isFavorite = model.isFavorite
-            }
-        }
+    public func configure(with model: AdsGridViewModel?, atIndex index: Int) {
+        self.model = model
+        self.index = index
+
+        iconImageView.image = model?.iconImage?.withRenderingMode(.alwaysTemplate)
+        titleLabel.text = model?.title
+        subtitleLabel.text = model?.subtitle
+        accessoryLabel.text = model?.accessory
+        imageTextLabel.text = model?.imageText
+        accessibilityLabel = model?.accessibilityLabel
+        favoriteButton.accessibilityLabel = model?.favoriteButtonAccessibilityLabel
+        isFavorite = model?.isFavorite ?? false
+
+        // Show a pretty color while we load the image
+        let colors: [UIColor] = [.toothPaste, .mint, .banana, .salmon]
+        let color = colors[index % 4]
+        loadingColor = color
     }
 
     public var isFavorite = false {
@@ -243,6 +239,27 @@ public class AdsGridViewCell: UICollectionViewCell {
 
     // MARK: - Public
 
+    /// Height in cell that is not image
+    private static var nonImageHeight: CGFloat {
+        return subtitleTopMargin + subtitleHeight + titleTopMargin + titleHeight + bottomMargin
+    }
+
+    /// Height in cell that is not image including the height of accessory label
+    private static var nonImageWithAccessoryHeight: CGFloat {
+        return subtitleTopMargin + subtitleHeight + titleTopMargin + titleHeight + accessoryHeight + bottomMargin
+    }
+
+    public static func height(for model: AdsGridViewModel, width: CGFloat) -> CGFloat {
+        let imageRatio = model.imageSize.height / model.imageSize.width
+        let imageHeight = width * imageRatio
+
+        if model.accessory != nil {
+            return imageHeight + nonImageWithAccessoryHeight
+        } else {
+            return imageHeight + nonImageHeight
+        }
+    }
+
     public func loadImage() {
         guard imageView.image == nil else {
             return