View scrollama-web-components.html
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Scrollama + Web Components</title> | |
</head> | |
<body> | |
<!-- The web component --> |
View cscsw_cva.csv
address | name | cva | |
---|---|---|---|
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 1 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 2 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 3 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 4 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 5 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 6 | |
9700 Sumac Road Des Plaines IL 60016 | Glen Oaks Apts | 7 | |
733 Bode Circle Hoffman Estates IL 60169 | Autumn Chase Apts | 10 | |
755 Bode Circle Hoffman Estates IL 60169 | Autumn Chase Apts | 11 |
View ThatsAllFolks.swift
import SwiftUI | |
// View to split up a string into Text views, split by spaces. | |
struct ContentText: View { | |
private var splitText: [String] | |
let count: Int | |
init(_ text: String) { | |
self.splitText = text.split(separator: " ").map { "\($0) " } | |
if text.hasPrefix(" ") { |
View alignment.swift
// Determine the alignment of every view in the ZStack | |
func zStackViews(_ geometry: GeometryProxy) -> some View { | |
// These are used to track the current horizontal and vertical position | |
// in the ZStack. As a new text or link is added, horizontal is decreased. | |
// When a new line is required, vertical is decreased & horizontal is reset to 0. | |
var horizontal: CGFloat = 0 | |
var vertical: CGFloat = 0 | |
// Determine the alignment for the view at the given index | |
func forEachView(_ index: Int) -> some View { |
View forEachView.swift
let numberOfViewsInContent: Int | |
let view: AnyView | |
// Determine the number of views in the Content at the given index | |
switch content[index] { | |
case .text(let text): | |
numberOfViewsInContent = text.count | |
view = AnyView(text) | |
case .link(let link): | |
numberOfViewsInContent = 1 |
View ZStack.swift
... | |
var body: some View { | |
VStack { | |
GeometryReader { geometry in | |
// Needs to be .topLeading so we can modify alignments on top and leading | |
ZStack(alignment: .topLeading) { | |
self.zStackViews(geometry) | |
} | |
.background(calculateHeight($height)) | |
} |
View zStackView.swift
var body: some View { | |
VStack { | |
GeometryReader { geometry in | |
// Needs to be .topLeading so we can modify alignments on top and leading | |
ZStack(alignment: .topLeading) { | |
self.zStackViews(geometry) | |
} | |
.background(calculateHeight($height)) | |
} | |
}.frame(height: height) |
View ContentView.swift
struct ContentView: View { | |
// The current height of the view | |
@State private var height: CGFloat = 0 | |
var body: some View { | |
VStack { | |
GeometryReader { geometry in | |
// Needs to be .topLeading so we can modify alignments on top and leading | |
ZStack(alignment: .topLeading) { | |
... |
View Content.swift
enum Content<T: View> { | |
case text(ContentText) | |
case link(Link<T>) | |
} | |
// A collection of either ContentText or Link views | |
// This text taken from https://developer.apple.com/documentation/swiftui/link | |
let content: [Content<Text>] = [ | |
.text(ContentText("As with other views, you can style links using standard view modifiers depending on the view type of the link’s label. For example, a ")), | |
.link(Link("Text", destination: URL(string: "https://developer.apple.com/documentation/swiftui/text")!)), |
View ContextText.swift
struct ContentText: View { | |
private var splitText: [String] | |
let count: Int | |
init(_ text: String) { | |
self.splitText = text.split(separator: " ").map { "\($0) " } | |
if text.hasPrefix(" ") { | |
self.splitText = [" "] + self.splitText | |
} |
NewerOlder