Skip to content

Commit

Permalink
Alphabetized builders and attributes
Browse files Browse the repository at this point in the history
  • Loading branch information
dokun1 committed Jun 13, 2019
1 parent a168e21 commit 71be202
Show file tree
Hide file tree
Showing 4 changed files with 252 additions and 126 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
build/
DerivedData/
.swiftpm/
.swift-version
## Various settings
*.pbxuser
!default.pbxuser
Expand Down
102 changes: 56 additions & 46 deletions Sources/Vaux/Attributes.swift
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,33 @@ import Foundation


extension HTML {

/// Allows you to specify an `align` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.align(.center)`, then the rendered HTML will be `<div align="center">some text</div>`.
/// - Note: Alignment can affect multiple different elements with different behavior based on their containing elements. Best practice is to offload this to the associated CSS file.
/// - Parameters:
/// - value: The value that will be associated with the `align` tag.
public func alignment(_ value: Alignment) -> HTML {
return attr("align", value.rawValue)
}

/// Allows you to specify any attribute at the end of a HTML element. For example, if you specify `div { "some text" }.attr("tag", "123")`, then the rendered HTML will be `<div tag="123">some text</div>`.
/// - Parameters:
/// - key: The tag for the attribute that will be added to this HTML node
/// - value: The value that will be associated with the tag.
public func attr(_ key: String, _ value: String? = nil) -> HTML {
return AttributedNode(attribute: Attribute(key: key, value: value),
child: self)
}

/// Allows you to specify a `bgcolor` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.backgroundColor("555555")`, then the rendered HTML will be `<div bgcolor="555555">some text</div>`.
/// - Note: Background color is generally better to set in your associated CSS file. The hex code must be a 6 character hexadecimal string.
/// - Warning: This will eventually be refactored to allow for use of specific colors that convert to hex codes via an enum. UIColor() must not be used, which would limit this library to iOS only.
/// - Parameters:
/// - hexCode: The value that will be used to describe the color associated with the `bgcolor` tag.
public func backgroundColor(_ hexCode: String) -> HTML {
return attr("bgcolor", hexCode)
}

/// Allows you to specify a `class` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.class("menu")`, then the rendered HTML will be `<div class="menu">some text</div>`.
/// - Note: In a HTML document, classes can be reused many times, and are not treated uniquely like ids.
/// - Parameters:
Expand All @@ -17,12 +44,13 @@ extension HTML {
return attr("class", value)
}

/// Allows you to specify a `id` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.id("12345")`, then the rendered HTML will be `<div id="12345">some text</div>`.
/// - Warning: In a HTML document, IDs must be considered unique, and cannot be reused.
/// Allows you to specify a `color` attribute at the end of a HTML element. For example, if you specify `span { "some text" }.color("555555")`, then the rendered HTML will be `<span color="555555">some text</span>`.
/// - Note: Color, mostly used with text, is generally better to set in your associated CSS file. The hex code must be a 6 character hexadecimal string.
/// - Warning: This will eventually be refactored to allow for use of specific colors that convert to hex codes via an enum. UIColor() must not be used, which would limit this library to iOS only.
/// - Parameters:
/// - value: The value that will be associated with the `id` tag.
public func `id`(_ value: String) -> HTML {
return attr("id", value)
/// - hexCode: The value that will be used to describe the color associated with the `color` tag.
public func color(_ hexCode: String) -> HTML {
return attr("color", hexCode)
}

/// Allows you to specify a `colspan` attribute at the end of a HTML element. For example, if you specify `tableData { "some text" }.columnSpan(4)`, then the rendered HTML will be `<td colspan="4">some text</td>`.
Expand All @@ -33,6 +61,14 @@ extension HTML {
return attr("colspan", String(value))
}

/// Allows you to specify a `id` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.id("12345")`, then the rendered HTML will be `<div id="12345">some text</div>`.
/// - Warning: In a HTML document, IDs must be considered unique, and cannot be reused.
/// - Parameters:
/// - value: The value that will be associated with the `id` tag.
public func `id`(_ value: String) -> HTML {
return attr("id", value)
}

/// Allows you to specify a `rowspan` attribute at the end of a HTML element. For example, if you specify `tableData { "some text" }.rowSpan(4)`, then the rendered HTML will be `<td rowspan="4">some text</td>`.
/// - Note: In a HTML table, rowspan is used to define how many rows a particular element should go across. This is easier to see when you have clearly defined borders and cell padding for your table.
/// - Parameters:
Expand All @@ -49,40 +85,6 @@ extension HTML {
return attr("scope", value.rawValue)
}

/// Allows you to specify an `align` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.align(.center)`, then the rendered HTML will be `<div align="center">some text</div>`.
/// - Note: Alignment can affect multiple different elements with different behavior based on their containing elements. Best practice is to offload this to the associated CSS file.
/// - Parameters:
/// - value: The value that will be associated with the `align` tag.
public func alignment(_ value: Alignment) -> HTML {
return attr("align", value.rawValue)
}

/// Allows you to specify a `bgcolor` attribute at the end of a HTML element. For example, if you specify `div { "some text" }.backgroundColor("555555")`, then the rendered HTML will be `<div bgcolor="555555">some text</div>`.
/// - Note: Background color is generally better to set in your associated CSS file. The hex code must be a 6 character hexadecimal string.
/// - Warning: This will eventually be refactored to allow for use of specific colors that convert to hex codes via an enum. UIColor() must not be used, which would limit this library to iOS only.
/// - Parameters:
/// - hexCode: The value that will be used to describe the color associated with the `bgcolor` tag.
public func backgroundColor(_ hexCode: String) -> HTML {
return attr("bgcolor", hexCode)
}

/// Allow you to specify a media type for a HTML element.
///
/// This could be used for link, script, input, and any other tags which support it.
/// - Note: Look at IANA Media Types for a complete list of standard media types.
/// - Example: This:
/// ```
/// linkStyleSheet(url: "style.css").type("text/css")
/// ```
/// yields this:
/// ```
/// <link type="text/css" rel="stylesheet" href="style.css"/>
/// ```
/// - Parameter mime: The Internet media type of the linked document.
public func type(_ mime: String) -> HTML {
return attr("type", mime)
}

/// Allows you to specify inline CSS (cascading style sheets) style for a HTML element.
/// - Note: Inline CSS style on HTML elements is often times frowned upon. It is recommended to instead use a link to a separate stylesheet that is defined on its own. You can do this with the `linkStylesheet()` builder.
/// - Example: This:
Expand Down Expand Up @@ -110,12 +112,20 @@ extension HTML {
return attr("style", inlineStyle)
}

/// Allows you to specify any attribute at the end of a HTML element. For example, if you specify `div { "some text" }.attr("tag", "123")`, then the rendered HTML will be `<div tag="123">some text</div>`.
/// - Parameters:
/// - key: The tag for the attribute that will be added to this HTML node
/// - value: The value that will be associated with the tag.
public func attr(_ key: String, _ value: String? = nil) -> HTML {
return AttributedNode(attribute: Attribute(key: key, value: value),
child: self)
/// Allow you to specify a media type for a HTML element.
///
/// This could be used for link, script, input, and any other tags which support it.
/// - Note: Look at IANA Media Types for a complete list of standard media types.
/// - Example: This:
/// ```
/// linkStyleSheet(url: "style.css").type("text/css")
/// ```
/// yields this:
/// ```
/// <link type="text/css" rel="stylesheet" href="style.css"/>
/// ```
/// - Parameter mime: The Internet media type of the linked document.
public func type(_ mime: String) -> HTML {
return attr("type", mime)
}
}
Loading

0 comments on commit 71be202

Please sign in to comment.