Update part8
This commit is contained in:
Richard Feldman
@@ -1 +0,0 @@
|
||||
elm-stuff
|
||||
@@ -1,30 +0,0 @@
|
||||
Copyright (c) 2014-present, Evan Czaplicki
|
||||
|
||||
All rights reserved.
|
||||
|
||||
Redistribution and use in source and binary forms, with or without
|
||||
modification, are permitted provided that the following conditions are met:
|
||||
|
||||
* Redistributions of source code must retain the above copyright
|
||||
notice, this list of conditions and the following disclaimer.
|
||||
|
||||
* Redistributions in binary form must reproduce the above
|
||||
copyright notice, this list of conditions and the following
|
||||
disclaimer in the documentation and/or other materials provided
|
||||
with the distribution.
|
||||
|
||||
* Neither the name of Evan Czaplicki nor the names of other
|
||||
contributors may be used to endorse or promote products derived
|
||||
from this software without specific prior written permission.
|
||||
|
||||
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
|
||||
"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
|
||||
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||
A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
|
||||
OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
|
||||
SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
|
||||
LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
|
||||
DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
|
||||
THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
|
||||
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
|
||||
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
@@ -1,5 +0,0 @@
|
||||
# HTML for Elm
|
||||
|
||||
The core HTML library for Elm. It is backed by [elm-lang/virtual-dom](http://package.elm-lang.org/packages/elm-lang/virtual-dom/latest/) which handles the dirty details of rendering things quickly.
|
||||
|
||||
The best way to learn how to use this library is to read [guide.elm-lang.org](http://guide.elm-lang.org/), particularly the section on [The Elm Architecture](http://guide.elm-lang.org/architecture/index.html).
|
||||
@@ -1,21 +0,0 @@
|
||||
{
|
||||
"version": "2.0.0",
|
||||
"summary": "Fast HTML, rendered with virtual DOM diffing",
|
||||
"repository": "https://github.com/elm-lang/html.git",
|
||||
"license": "BSD3",
|
||||
"source-directories": [
|
||||
"src"
|
||||
],
|
||||
"exposed-modules": [
|
||||
"Html",
|
||||
"Html.Attributes",
|
||||
"Html.Events",
|
||||
"Html.Keyed",
|
||||
"Html.Lazy"
|
||||
],
|
||||
"dependencies": {
|
||||
"elm-lang/core": "5.0.0 <= v < 6.0.0",
|
||||
"elm-lang/virtual-dom": "2.0.0 <= v < 3.0.0"
|
||||
},
|
||||
"elm-version": "0.18.0 <= v < 0.19.0"
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
# Properties vs. Attributes
|
||||
|
||||
When you are working with HTML, you can have DOM nodes like `<div></div>`. And you can add *attributes* to those DOM nodes, like `<div class="user-info"></div>`.
|
||||
|
||||
When you are creating DOM nodes in JavaScript, there are two ways to add attributes like this:
|
||||
|
||||
1. **Attributes** — You can use the `setAttribute` function. So adding a class attribute would look like this: `domNode.setAttribute('class', 'user-info')`.
|
||||
|
||||
2. **Properties** — JavaScript often exposes an alternate way to set these attributes. Another way to add a class attribute would be like this: `domNode.className = 'user-info'`
|
||||
|
||||
Notice that the attribute is called `class` but the property is called `className`. This is because `class` is a reserved word in JavaScript. Point is, **attributes and properties do not always match up.**
|
||||
|
||||
It is actually a bit crazier than that though. **Sometimes an attribute exists, but there is no corresponding property.** For example, as of this writing the `webkit-playsinline` can be added with `setAttribute`, but there is no corresponding property. And with SVG, you cannot use properties at all, you must to use `setAttributeNS` for everything.
|
||||
|
||||
With all the corner cases here, it makes sense to have access to both approaches.
|
||||
@@ -1,923 +0,0 @@
|
||||
module Html exposing
|
||||
( Html, Attribute
|
||||
, text, node, map
|
||||
, beginnerProgram, program, programWithFlags
|
||||
, h1, h2, h3, h4, h5, h6
|
||||
, div, p, hr, pre, blockquote
|
||||
, span, a, code, em, strong, i, b, u, sub, sup, br
|
||||
, ol, ul, li, dl, dt, dd
|
||||
, img, iframe, canvas, math
|
||||
, form, input, textarea, button, select, option
|
||||
, section, nav, article, aside, header, footer, address, main_, body
|
||||
, figure, figcaption
|
||||
, table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
|
||||
, fieldset, legend, label, datalist, optgroup, keygen, output, progress, meter
|
||||
, audio, video, source, track
|
||||
, embed, object, param
|
||||
, ins, del
|
||||
, small, cite, dfn, abbr, time, var, samp, kbd, s, q
|
||||
, mark, ruby, rt, rp, bdi, bdo, wbr
|
||||
, details, summary, menuitem, menu
|
||||
)
|
||||
|
||||
{-| This file is organized roughly in order of popularity. The tags which you'd
|
||||
expect to use frequently will be closer to the top.
|
||||
|
||||
# Primitives
|
||||
@docs Html, Attribute, text, node, map
|
||||
|
||||
# Programs
|
||||
@docs beginnerProgram, program, programWithFlags
|
||||
|
||||
# Tags
|
||||
|
||||
## Headers
|
||||
@docs h1, h2, h3, h4, h5, h6
|
||||
|
||||
## Grouping Content
|
||||
@docs div, p, hr, pre, blockquote
|
||||
|
||||
## Text
|
||||
@docs span, a, code, em, strong, i, b, u, sub, sup, br
|
||||
|
||||
## Lists
|
||||
@docs ol, ul, li, dl, dt, dd
|
||||
|
||||
## Emdedded Content
|
||||
@docs img, iframe, canvas, math
|
||||
|
||||
## Inputs
|
||||
@docs form, input, textarea, button, select, option
|
||||
|
||||
## Sections
|
||||
@docs section, nav, article, aside, header, footer, address, main_, body
|
||||
|
||||
## Figures
|
||||
@docs figure, figcaption
|
||||
|
||||
## Tables
|
||||
@docs table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th
|
||||
|
||||
|
||||
## Less Common Elements
|
||||
|
||||
### Less Common Inputs
|
||||
@docs fieldset, legend, label, datalist, optgroup, keygen, output, progress, meter
|
||||
|
||||
### Audio and Video
|
||||
@docs audio, video, source, track
|
||||
|
||||
### Embedded Objects
|
||||
@docs embed, object, param
|
||||
|
||||
### Text Edits
|
||||
@docs ins, del
|
||||
|
||||
### Semantic Text
|
||||
@docs small, cite, dfn, abbr, time, var, samp, kbd, s, q
|
||||
|
||||
### Less Common Text Tags
|
||||
@docs mark, ruby, rt, rp, bdi, bdo, wbr
|
||||
|
||||
## Interactive Elements
|
||||
@docs details, summary, menuitem, menu
|
||||
|
||||
-}
|
||||
|
||||
import VirtualDom
|
||||
|
||||
|
||||
|
||||
-- CORE TYPES
|
||||
|
||||
|
||||
{-| The core building block used to build up HTML. Here we create an `Html`
|
||||
value with no attributes and one child:
|
||||
|
||||
hello : Html msg
|
||||
hello =
|
||||
div [] [ text "Hello!" ]
|
||||
-}
|
||||
type alias Html msg = VirtualDom.Node msg
|
||||
|
||||
|
||||
{-| Set attributes on your `Html`. Learn more in the
|
||||
[`Html.Attributes`](Html-Attributes) module.
|
||||
-}
|
||||
type alias Attribute msg = VirtualDom.Property msg
|
||||
|
||||
|
||||
|
||||
-- PRIMITIVES
|
||||
|
||||
|
||||
{-| General way to create HTML nodes. It is used to define all of the helper
|
||||
functions in this library.
|
||||
|
||||
div : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
div attributes children =
|
||||
node "div" attributes children
|
||||
|
||||
You can use this to create custom nodes if you need to create something that
|
||||
is not covered by the helper functions in this library.
|
||||
-}
|
||||
node : String -> List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
node =
|
||||
VirtualDom.node
|
||||
|
||||
|
||||
{-| Just put plain text in the DOM. It will escape the string so that it appears
|
||||
exactly as you specify.
|
||||
|
||||
text "Hello World!"
|
||||
-}
|
||||
text : String -> Html msg
|
||||
text =
|
||||
VirtualDom.text
|
||||
|
||||
|
||||
|
||||
-- NESTING VIEWS
|
||||
|
||||
|
||||
{-| Transform the messages produced by some `Html`. In the following example,
|
||||
we have `viewButton` that produces `()` messages, and we transform those values
|
||||
into `Msg` values in `view`.
|
||||
|
||||
type Msg = Left | Right
|
||||
|
||||
view : model -> Html Msg
|
||||
view model =
|
||||
div []
|
||||
[ map (\_ -> Left) (viewButton "Left")
|
||||
, map (\_ -> Right) (viewButton "Right")
|
||||
]
|
||||
|
||||
viewButton : String -> Html ()
|
||||
viewButton name =
|
||||
button [ onClick () ] [ text name ]
|
||||
|
||||
This should not come in handy too often. Definitely read [this][reuse] before
|
||||
deciding if this is what you want.
|
||||
|
||||
[reuse]: https://guide.elm-lang.org/reuse/
|
||||
-}
|
||||
map : (a -> msg) -> Html a -> Html msg
|
||||
map =
|
||||
VirtualDom.map
|
||||
|
||||
|
||||
|
||||
-- CREATING PROGRAMS
|
||||
|
||||
|
||||
{-| Create a [`Program`][program] that describes how your whole app works.
|
||||
|
||||
Read about [The Elm Architecture][tea] to learn how to use this. Just do it.
|
||||
The additional context is very worthwhile! (Honestly, it is best to just read
|
||||
that guide from front to back instead of muddling around and reading it
|
||||
piecemeal.)
|
||||
|
||||
[program]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program
|
||||
[tea]: https://guide.elm-lang.org/architecture/
|
||||
-}
|
||||
beginnerProgram
|
||||
: { model : model
|
||||
, view : model -> Html msg
|
||||
, update : msg -> model -> model
|
||||
}
|
||||
-> Program Never model msg
|
||||
beginnerProgram {model, view, update} =
|
||||
program
|
||||
{ init = model ! []
|
||||
, update = \msg model -> update msg model ! []
|
||||
, view = view
|
||||
, subscriptions = \_ -> Sub.none
|
||||
}
|
||||
|
||||
|
||||
{-| Create a [`Program`][program] that describes how your whole app works.
|
||||
|
||||
Read about [The Elm Architecture][tea] to learn how to use this. Just do it.
|
||||
Commands and subscriptions make way more sense when you work up to them
|
||||
gradually and see them in context with examples.
|
||||
|
||||
[program]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program
|
||||
[tea]: https://guide.elm-lang.org/architecture/
|
||||
-}
|
||||
program
|
||||
: { init : (model, Cmd msg)
|
||||
, update : msg -> model -> (model, Cmd msg)
|
||||
, subscriptions : model -> Sub msg
|
||||
, view : model -> Html msg
|
||||
}
|
||||
-> Program Never model msg
|
||||
program =
|
||||
VirtualDom.program
|
||||
|
||||
|
||||
{-| Create a [`Program`][program] that describes how your whole app works.
|
||||
|
||||
It works just like `program` but you can provide “flags” from
|
||||
JavaScript to configure your application. Read more about that [here][].
|
||||
|
||||
[program]: http://package.elm-lang.org/packages/elm-lang/core/latest/Platform#Program
|
||||
[here]: https://guide.elm-lang.org/interop/javascript.html
|
||||
-}
|
||||
programWithFlags
|
||||
: { init : flags -> (model, Cmd msg)
|
||||
, update : msg -> model -> (model, Cmd msg)
|
||||
, subscriptions : model -> Sub msg
|
||||
, view : model -> Html msg
|
||||
}
|
||||
-> Program flags model msg
|
||||
programWithFlags =
|
||||
VirtualDom.programWithFlags
|
||||
|
||||
|
||||
|
||||
-- SECTIONS
|
||||
|
||||
|
||||
{-| Represents the content of an HTML document. There is only one `body`
|
||||
element in a document.
|
||||
-}
|
||||
body : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
body =
|
||||
node "body"
|
||||
|
||||
|
||||
{-| Defines a section in a document.
|
||||
-}
|
||||
section : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
section =
|
||||
node "section"
|
||||
|
||||
|
||||
{-| Defines a section that contains only navigation links.
|
||||
-}
|
||||
nav : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
nav =
|
||||
node "nav"
|
||||
|
||||
|
||||
{-| Defines self-contained content that could exist independently of the rest
|
||||
of the content.
|
||||
-}
|
||||
article : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
article =
|
||||
node "article"
|
||||
|
||||
|
||||
{-| Defines some content loosely related to the page content. If it is removed,
|
||||
the remaining content still makes sense.
|
||||
-}
|
||||
aside : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
aside =
|
||||
node "aside"
|
||||
|
||||
|
||||
{-|-}
|
||||
h1 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h1 =
|
||||
node "h1"
|
||||
|
||||
|
||||
{-|-}
|
||||
h2 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h2 =
|
||||
node "h2"
|
||||
|
||||
|
||||
{-|-}
|
||||
h3 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h3 =
|
||||
node "h3"
|
||||
|
||||
|
||||
{-|-}
|
||||
h4 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h4 =
|
||||
node "h4"
|
||||
|
||||
|
||||
{-|-}
|
||||
h5 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h5 =
|
||||
node "h5"
|
||||
|
||||
|
||||
{-|-}
|
||||
h6 : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
h6 =
|
||||
node "h6"
|
||||
|
||||
|
||||
{-| Defines the header of a page or section. It often contains a logo, the
|
||||
title of the web site, and a navigational table of content.
|
||||
-}
|
||||
header : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
header =
|
||||
node "header"
|
||||
|
||||
|
||||
{-| Defines the footer for a page or section. It often contains a copyright
|
||||
notice, some links to legal information, or addresses to give feedback.
|
||||
-}
|
||||
footer : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
footer =
|
||||
node "footer"
|
||||
|
||||
|
||||
{-| Defines a section containing contact information. -}
|
||||
address : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
address =
|
||||
node "address"
|
||||
|
||||
|
||||
{-| Defines the main or important content in the document. There is only one
|
||||
`main` element in the document.
|
||||
-}
|
||||
main_ : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
main_ =
|
||||
node "main"
|
||||
|
||||
|
||||
-- GROUPING CONTENT
|
||||
|
||||
{-| Defines a portion that should be displayed as a paragraph. -}
|
||||
p : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
p =
|
||||
node "p"
|
||||
|
||||
|
||||
{-| Represents a thematic break between paragraphs of a section or article or
|
||||
any longer content.
|
||||
-}
|
||||
hr : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
hr =
|
||||
node "hr"
|
||||
|
||||
|
||||
{-| Indicates that its content is preformatted and that this format must be
|
||||
preserved.
|
||||
-}
|
||||
pre : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
pre =
|
||||
node "pre"
|
||||
|
||||
|
||||
{-| Represents a content that is quoted from another source. -}
|
||||
blockquote : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
blockquote =
|
||||
node "blockquote"
|
||||
|
||||
|
||||
{-| Defines an ordered list of items. -}
|
||||
ol : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
ol =
|
||||
node "ol"
|
||||
|
||||
|
||||
{-| Defines an unordered list of items. -}
|
||||
ul : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
ul =
|
||||
node "ul"
|
||||
|
||||
|
||||
{-| Defines a item of an enumeration list. -}
|
||||
li : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
li =
|
||||
node "li"
|
||||
|
||||
|
||||
{-| Defines a definition list, that is, a list of terms and their associated
|
||||
definitions.
|
||||
-}
|
||||
dl : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
dl =
|
||||
node "dl"
|
||||
|
||||
|
||||
{-| Represents a term defined by the next `dd`. -}
|
||||
dt : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
dt =
|
||||
node "dt"
|
||||
|
||||
|
||||
{-| Represents the definition of the terms immediately listed before it. -}
|
||||
dd : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
dd =
|
||||
node "dd"
|
||||
|
||||
|
||||
{-| Represents a figure illustrated as part of the document. -}
|
||||
figure : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
figure =
|
||||
node "figure"
|
||||
|
||||
|
||||
{-| Represents the legend of a figure. -}
|
||||
figcaption : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
figcaption =
|
||||
node "figcaption"
|
||||
|
||||
|
||||
{-| Represents a generic container with no special meaning. -}
|
||||
div : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
div =
|
||||
node "div"
|
||||
|
||||
|
||||
-- TEXT LEVEL SEMANTIC
|
||||
|
||||
{-| Represents a hyperlink, linking to another resource. -}
|
||||
a : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
a =
|
||||
node "a"
|
||||
|
||||
|
||||
{-| Represents emphasized text, like a stress accent. -}
|
||||
em : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
em =
|
||||
node "em"
|
||||
|
||||
|
||||
{-| Represents especially important text. -}
|
||||
strong : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
strong =
|
||||
node "strong"
|
||||
|
||||
|
||||
{-| Represents a side comment, that is, text like a disclaimer or a
|
||||
copyright, which is not essential to the comprehension of the document.
|
||||
-}
|
||||
small : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
small =
|
||||
node "small"
|
||||
|
||||
|
||||
{-| Represents content that is no longer accurate or relevant. -}
|
||||
s : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
s =
|
||||
node "s"
|
||||
|
||||
|
||||
{-| Represents the title of a work. -}
|
||||
cite : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
cite =
|
||||
node "cite"
|
||||
|
||||
|
||||
{-| Represents an inline quotation. -}
|
||||
q : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
q =
|
||||
node "q"
|
||||
|
||||
|
||||
{-| Represents a term whose definition is contained in its nearest ancestor
|
||||
content.
|
||||
-}
|
||||
dfn : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
dfn =
|
||||
node "dfn"
|
||||
|
||||
|
||||
{-| Represents an abbreviation or an acronym; the expansion of the
|
||||
abbreviation can be represented in the title attribute.
|
||||
-}
|
||||
abbr : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
abbr =
|
||||
node "abbr"
|
||||
|
||||
|
||||
{-| Represents a date and time value; the machine-readable equivalent can be
|
||||
represented in the datetime attribute.
|
||||
-}
|
||||
time : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
time =
|
||||
node "time"
|
||||
|
||||
|
||||
{-| Represents computer code. -}
|
||||
code : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
code =
|
||||
node "code"
|
||||
|
||||
|
||||
{-| Represents a variable. Specific cases where it should be used include an
|
||||
actual mathematical expression or programming context, an identifier
|
||||
representing a constant, a symbol identifying a physical quantity, a function
|
||||
parameter, or a mere placeholder in prose.
|
||||
-}
|
||||
var : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
var =
|
||||
node "var"
|
||||
|
||||
|
||||
{-| Represents the output of a program or a computer. -}
|
||||
samp : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
samp =
|
||||
node "samp"
|
||||
|
||||
|
||||
{-| Represents user input, often from the keyboard, but not necessarily; it
|
||||
may represent other input, like transcribed voice commands.
|
||||
-}
|
||||
kbd : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
kbd =
|
||||
node "kbd"
|
||||
|
||||
|
||||
{-| Represent a subscript. -}
|
||||
sub : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
sub =
|
||||
node "sub"
|
||||
|
||||
|
||||
{-| Represent a superscript. -}
|
||||
sup : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
sup =
|
||||
node "sup"
|
||||
|
||||
|
||||
{-| Represents some text in an alternate voice or mood, or at least of
|
||||
different quality, such as a taxonomic designation, a technical term, an
|
||||
idiomatic phrase, a thought, or a ship name.
|
||||
-}
|
||||
i : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
i =
|
||||
node "i"
|
||||
|
||||
|
||||
{-| Represents a text which to which attention is drawn for utilitarian
|
||||
purposes. It doesn't convey extra importance and doesn't imply an alternate
|
||||
voice.
|
||||
-}
|
||||
b : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
b =
|
||||
node "b"
|
||||
|
||||
|
||||
{-| Represents a non-textual annoatation for which the conventional
|
||||
presentation is underlining, such labeling the text as being misspelt or
|
||||
labeling a proper name in Chinese text.
|
||||
-}
|
||||
u : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
u =
|
||||
node "u"
|
||||
|
||||
|
||||
{-| Represents text highlighted for reference purposes, that is for its
|
||||
relevance in another context.
|
||||
-}
|
||||
mark : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
mark =
|
||||
node "mark"
|
||||
|
||||
|
||||
{-| Represents content to be marked with ruby annotations, short runs of text
|
||||
presented alongside the text. This is often used in conjunction with East Asian
|
||||
language where the annotations act as a guide for pronunciation, like the
|
||||
Japanese furigana.
|
||||
-}
|
||||
ruby : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
ruby =
|
||||
node "ruby"
|
||||
|
||||
|
||||
{-| Represents the text of a ruby annotation. -}
|
||||
rt : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
rt =
|
||||
node "rt"
|
||||
|
||||
|
||||
{-| Represents parenthesis around a ruby annotation, used to display the
|
||||
annotation in an alternate way by browsers not supporting the standard display
|
||||
for annotations.
|
||||
-}
|
||||
rp : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
rp =
|
||||
node "rp"
|
||||
|
||||
|
||||
{-| Represents text that must be isolated from its surrounding for
|
||||
bidirectional text formatting. It allows embedding a span of text with a
|
||||
different, or unknown, directionality.
|
||||
-}
|
||||
bdi : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
bdi =
|
||||
node "bdi"
|
||||
|
||||
|
||||
{-| Represents the directionality of its children, in order to explicitly
|
||||
override the Unicode bidirectional algorithm.
|
||||
-}
|
||||
bdo : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
bdo =
|
||||
node "bdo"
|
||||
|
||||
|
||||
{-| Represents text with no specific meaning. This has to be used when no other
|
||||
text-semantic element conveys an adequate meaning, which, in this case, is
|
||||
often brought by global attributes like `class`, `lang`, or `dir`.
|
||||
-}
|
||||
span : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
span =
|
||||
node "span"
|
||||
|
||||
|
||||
{-| Represents a line break. -}
|
||||
br : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
br =
|
||||
node "br"
|
||||
|
||||
|
||||
{-| Represents a line break opportunity, that is a suggested point for
|
||||
wrapping text in order to improve readability of text split on several lines.
|
||||
-}
|
||||
wbr : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
wbr =
|
||||
node "wbr"
|
||||
|
||||
|
||||
-- EDITS
|
||||
|
||||
{-| Defines an addition to the document. -}
|
||||
ins : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
ins =
|
||||
node "ins"
|
||||
|
||||
|
||||
{-| Defines a removal from the document. -}
|
||||
del : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
del =
|
||||
node "del"
|
||||
|
||||
|
||||
-- EMBEDDED CONTENT
|
||||
|
||||
{-| Represents an image. -}
|
||||
img : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
img =
|
||||
node "img"
|
||||
|
||||
|
||||
{-| Embedded an HTML document. -}
|
||||
iframe : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
iframe =
|
||||
node "iframe"
|
||||
|
||||
|
||||
{-| Represents a integration point for an external, often non-HTML,
|
||||
application or interactive content.
|
||||
-}
|
||||
embed : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
embed =
|
||||
node "embed"
|
||||
|
||||
|
||||
{-| Represents an external resource, which is treated as an image, an HTML
|
||||
sub-document, or an external resource to be processed by a plug-in.
|
||||
-}
|
||||
object : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
object =
|
||||
node "object"
|
||||
|
||||
|
||||
{-| Defines parameters for use by plug-ins invoked by `object` elements. -}
|
||||
param : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
param =
|
||||
node "param"
|
||||
|
||||
|
||||
{-| Represents a video, the associated audio and captions, and controls. -}
|
||||
video : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
video =
|
||||
node "video"
|
||||
|
||||
|
||||
{-| Represents a sound or audio stream. -}
|
||||
audio : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
audio =
|
||||
node "audio"
|
||||
|
||||
|
||||
{-| Allows authors to specify alternative media resources for media elements
|
||||
like `video` or `audio`.
|
||||
-}
|
||||
source : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
source =
|
||||
node "source"
|
||||
|
||||
|
||||
{-| Allows authors to specify timed text track for media elements like `video`
|
||||
or `audio`.
|
||||
-}
|
||||
track : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
track =
|
||||
node "track"
|
||||
|
||||
|
||||
{-| Represents a bitmap area for graphics rendering. -}
|
||||
canvas : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
canvas =
|
||||
node "canvas"
|
||||
|
||||
|
||||
{-| Defines a mathematical formula. -}
|
||||
math : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
math =
|
||||
node "math"
|
||||
|
||||
|
||||
-- TABULAR DATA
|
||||
|
||||
{-| Represents data with more than one dimension. -}
|
||||
table : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
table =
|
||||
node "table"
|
||||
|
||||
|
||||
{-| Represents the title of a table. -}
|
||||
caption : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
caption =
|
||||
node "caption"
|
||||
|
||||
|
||||
{-| Represents a set of one or more columns of a table. -}
|
||||
colgroup : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
colgroup =
|
||||
node "colgroup"
|
||||
|
||||
|
||||
{-| Represents a column of a table. -}
|
||||
col : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
col =
|
||||
node "col"
|
||||
|
||||
|
||||
{-| Represents the block of rows that describes the concrete data of a table.
|
||||
-}
|
||||
tbody : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
tbody =
|
||||
node "tbody"
|
||||
|
||||
|
||||
{-| Represents the block of rows that describes the column labels of a table.
|
||||
-}
|
||||
thead : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
thead =
|
||||
node "thead"
|
||||
|
||||
|
||||
{-| Represents the block of rows that describes the column summaries of a table.
|
||||
-}
|
||||
tfoot : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
tfoot =
|
||||
node "tfoot"
|
||||
|
||||
|
||||
{-| Represents a row of cells in a table. -}
|
||||
tr : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
tr =
|
||||
node "tr"
|
||||
|
||||
|
||||
{-| Represents a data cell in a table. -}
|
||||
td : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
td =
|
||||
node "td"
|
||||
|
||||
|
||||
{-| Represents a header cell in a table. -}
|
||||
th : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
th =
|
||||
node "th"
|
||||
|
||||
|
||||
-- FORMS
|
||||
|
||||
{-| Represents a form, consisting of controls, that can be submitted to a
|
||||
server for processing.
|
||||
-}
|
||||
form : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
form =
|
||||
node "form"
|
||||
|
||||
|
||||
{-| Represents a set of controls. -}
|
||||
fieldset : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
fieldset =
|
||||
node "fieldset"
|
||||
|
||||
|
||||
{-| Represents the caption for a `fieldset`. -}
|
||||
legend : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
legend =
|
||||
node "legend"
|
||||
|
||||
|
||||
{-| Represents the caption of a form control. -}
|
||||
label : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
label =
|
||||
node "label"
|
||||
|
||||
|
||||
{-| Represents a typed data field allowing the user to edit the data. -}
|
||||
input : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
input =
|
||||
node "input"
|
||||
|
||||
|
||||
{-| Represents a button. -}
|
||||
button : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
button =
|
||||
node "button"
|
||||
|
||||
|
||||
{-| Represents a control allowing selection among a set of options. -}
|
||||
select : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
select =
|
||||
node "select"
|
||||
|
||||
|
||||
{-| Represents a set of predefined options for other controls. -}
|
||||
datalist : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
datalist =
|
||||
node "datalist"
|
||||
|
||||
|
||||
{-| Represents a set of options, logically grouped. -}
|
||||
optgroup : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
optgroup =
|
||||
node "optgroup"
|
||||
|
||||
|
||||
{-| Represents an option in a `select` element or a suggestion of a `datalist`
|
||||
element.
|
||||
-}
|
||||
option : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
option =
|
||||
node "option"
|
||||
|
||||
|
||||
{-| Represents a multiline text edit control. -}
|
||||
textarea : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
textarea =
|
||||
node "textarea"
|
||||
|
||||
|
||||
{-| Represents a key-pair generator control. -}
|
||||
keygen : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
keygen =
|
||||
node "keygen"
|
||||
|
||||
|
||||
{-| Represents the result of a calculation. -}
|
||||
output : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
output =
|
||||
node "output"
|
||||
|
||||
|
||||
{-| Represents the completion progress of a task. -}
|
||||
progress : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
progress =
|
||||
node "progress"
|
||||
|
||||
|
||||
{-| Represents a scalar measurement (or a fractional value), within a known
|
||||
range.
|
||||
-}
|
||||
meter : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
meter =
|
||||
node "meter"
|
||||
|
||||
|
||||
-- INTERACTIVE ELEMENTS
|
||||
|
||||
{-| Represents a widget from which the user can obtain additional information
|
||||
or controls.
|
||||
-}
|
||||
details : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
details =
|
||||
node "details"
|
||||
|
||||
|
||||
{-| Represents a summary, caption, or legend for a given `details`. -}
|
||||
summary : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
summary =
|
||||
node "summary"
|
||||
|
||||
|
||||
{-| Represents a command that the user can invoke. -}
|
||||
menuitem : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
menuitem =
|
||||
node "menuitem"
|
||||
|
||||
|
||||
{-| Represents a list of commands. -}
|
||||
menu : List (Attribute msg) -> List (Html msg) -> Html msg
|
||||
menu =
|
||||
node "menu"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,269 +0,0 @@
|
||||
module Html.Events exposing
|
||||
( onClick, onDoubleClick
|
||||
, onMouseDown, onMouseUp
|
||||
, onMouseEnter, onMouseLeave
|
||||
, onMouseOver, onMouseOut
|
||||
, onInput, onCheck, onSubmit
|
||||
, onBlur, onFocus
|
||||
, on, onWithOptions, Options, defaultOptions
|
||||
, targetValue, targetChecked, keyCode
|
||||
)
|
||||
|
||||
{-|
|
||||
It is often helpful to create an [Union Type][] so you can have many different kinds
|
||||
of events as seen in the [TodoMVC][] example.
|
||||
|
||||
[Union Type]: http://elm-lang.org/learn/Union-Types.elm
|
||||
[TodoMVC]: https://github.com/evancz/elm-todomvc/blob/master/Todo.elm
|
||||
|
||||
# Mouse Helpers
|
||||
@docs onClick, onDoubleClick,
|
||||
onMouseDown, onMouseUp,
|
||||
onMouseEnter, onMouseLeave,
|
||||
onMouseOver, onMouseOut
|
||||
|
||||
# Form Helpers
|
||||
@docs onInput, onCheck, onSubmit
|
||||
|
||||
# Focus Helpers
|
||||
@docs onBlur, onFocus
|
||||
|
||||
# Custom Event Handlers
|
||||
@docs on, onWithOptions, Options, defaultOptions
|
||||
|
||||
# Custom Decoders
|
||||
@docs targetValue, targetChecked, keyCode
|
||||
-}
|
||||
|
||||
import Html exposing (Attribute)
|
||||
import Json.Decode as Json
|
||||
import VirtualDom
|
||||
|
||||
|
||||
|
||||
-- MOUSE EVENTS
|
||||
|
||||
|
||||
{-|-}
|
||||
onClick : msg -> Attribute msg
|
||||
onClick msg =
|
||||
on "click" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onDoubleClick : msg -> Attribute msg
|
||||
onDoubleClick msg =
|
||||
on "dblclick" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseDown : msg -> Attribute msg
|
||||
onMouseDown msg =
|
||||
on "mousedown" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseUp : msg -> Attribute msg
|
||||
onMouseUp msg =
|
||||
on "mouseup" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseEnter : msg -> Attribute msg
|
||||
onMouseEnter msg =
|
||||
on "mouseenter" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseLeave : msg -> Attribute msg
|
||||
onMouseLeave msg =
|
||||
on "mouseleave" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseOver : msg -> Attribute msg
|
||||
onMouseOver msg =
|
||||
on "mouseover" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onMouseOut : msg -> Attribute msg
|
||||
onMouseOut msg =
|
||||
on "mouseout" (Json.succeed msg)
|
||||
|
||||
|
||||
|
||||
-- FORM EVENTS
|
||||
|
||||
|
||||
{-| Capture [input](https://developer.mozilla.org/en-US/docs/Web/Events/input)
|
||||
events for things like text fields or text areas.
|
||||
|
||||
It grabs the **string** value at `event.target.value`, so it will not work if
|
||||
you need some other type of information. For example, if you want to track
|
||||
inputs on a range slider, make a custom handler with [`on`](#on).
|
||||
|
||||
For more details on how `onInput` works, check out [targetValue](#targetValue).
|
||||
-}
|
||||
onInput : (String -> msg) -> Attribute msg
|
||||
onInput tagger =
|
||||
on "input" (Json.map tagger targetValue)
|
||||
|
||||
|
||||
{-| Capture [change](https://developer.mozilla.org/en-US/docs/Web/Events/change)
|
||||
events on checkboxes. It will grab the boolean value from `event.target.checked`
|
||||
on any input event.
|
||||
|
||||
Check out [targetChecked](#targetChecked) for more details on how this works.
|
||||
-}
|
||||
onCheck : (Bool -> msg) -> Attribute msg
|
||||
onCheck tagger =
|
||||
on "change" (Json.map tagger targetChecked)
|
||||
|
||||
|
||||
{-| Capture a [submit](https://developer.mozilla.org/en-US/docs/Web/Events/submit)
|
||||
event with [`preventDefault`](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault)
|
||||
in order to prevent the form from changing the page’s location. If you need
|
||||
different behavior, use `onWithOptions` to create a customized version of
|
||||
`onSubmit`.
|
||||
-}
|
||||
onSubmit : msg -> Attribute msg
|
||||
onSubmit msg =
|
||||
onWithOptions "submit" onSubmitOptions (Json.succeed msg)
|
||||
|
||||
|
||||
onSubmitOptions : Options
|
||||
onSubmitOptions =
|
||||
{ defaultOptions | preventDefault = True }
|
||||
|
||||
|
||||
-- FOCUS EVENTS
|
||||
|
||||
|
||||
{-|-}
|
||||
onBlur : msg -> Attribute msg
|
||||
onBlur msg =
|
||||
on "blur" (Json.succeed msg)
|
||||
|
||||
|
||||
{-|-}
|
||||
onFocus : msg -> Attribute msg
|
||||
onFocus msg =
|
||||
on "focus" (Json.succeed msg)
|
||||
|
||||
|
||||
|
||||
-- CUSTOM EVENTS
|
||||
|
||||
|
||||
{-| Create a custom event listener. Normally this will not be necessary, but
|
||||
you have the power! Here is how `onClick` is defined for example:
|
||||
|
||||
import Json.Decode as Json
|
||||
|
||||
onClick : msg -> Attribute msg
|
||||
onClick message =
|
||||
on "click" (Json.succeed message)
|
||||
|
||||
The first argument is the event name in the same format as with JavaScript's
|
||||
[`addEventListener`][aEL] function.
|
||||
|
||||
The second argument is a JSON decoder. Read more about these [here][decoder].
|
||||
When an event occurs, the decoder tries to turn the event object into an Elm
|
||||
value. If successful, the value is routed to your `update` function. In the
|
||||
case of `onClick` we always just succeed with the given `message`.
|
||||
|
||||
If this is confusing, work through the [Elm Architecture Tutorial][tutorial].
|
||||
It really does help!
|
||||
|
||||
[aEL]: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
|
||||
[decoder]: http://package.elm-lang.org/packages/elm-lang/core/latest/Json-Decode
|
||||
[tutorial]: https://github.com/evancz/elm-architecture-tutorial/
|
||||
-}
|
||||
on : String -> Json.Decoder msg -> Attribute msg
|
||||
on =
|
||||
VirtualDom.on
|
||||
|
||||
|
||||
{-| Same as `on` but you can set a few options.
|
||||
-}
|
||||
onWithOptions : String -> Options -> Json.Decoder msg -> Attribute msg
|
||||
onWithOptions =
|
||||
VirtualDom.onWithOptions
|
||||
|
||||
|
||||
{-| Options for an event listener. If `stopPropagation` is true, it means the
|
||||
event stops traveling through the DOM so it will not trigger any other event
|
||||
listeners. If `preventDefault` is true, any built-in browser behavior related
|
||||
to the event is prevented. For example, this is used with touch events when you
|
||||
want to treat them as gestures of your own, not as scrolls.
|
||||
-}
|
||||
type alias Options =
|
||||
{ stopPropagation : Bool
|
||||
, preventDefault : Bool
|
||||
}
|
||||
|
||||
|
||||
{-| Everything is `False` by default.
|
||||
|
||||
defaultOptions =
|
||||
{ stopPropagation = False
|
||||
, preventDefault = False
|
||||
}
|
||||
-}
|
||||
defaultOptions : Options
|
||||
defaultOptions =
|
||||
VirtualDom.defaultOptions
|
||||
|
||||
|
||||
|
||||
-- COMMON DECODERS
|
||||
|
||||
|
||||
{-| A `Json.Decoder` for grabbing `event.target.value`. We use this to define
|
||||
`onInput` as follows:
|
||||
|
||||
import Json.Decode as Json
|
||||
|
||||
onInput : (String -> msg) -> Attribute msg
|
||||
onInput tagger =
|
||||
on "input" (Json.map tagger targetValue)
|
||||
|
||||
You probably will never need this, but hopefully it gives some insights into
|
||||
how to make custom event handlers.
|
||||
-}
|
||||
targetValue : Json.Decoder String
|
||||
targetValue =
|
||||
Json.at ["target", "value"] Json.string
|
||||
|
||||
|
||||
{-| A `Json.Decoder` for grabbing `event.target.checked`. We use this to define
|
||||
`onCheck` as follows:
|
||||
|
||||
import Json.Decode as Json
|
||||
|
||||
onCheck : (Bool -> msg) -> Attribute msg
|
||||
onCheck tagger =
|
||||
on "input" (Json.map tagger targetChecked)
|
||||
-}
|
||||
targetChecked : Json.Decoder Bool
|
||||
targetChecked =
|
||||
Json.at ["target", "checked"] Json.bool
|
||||
|
||||
|
||||
{-| A `Json.Decoder` for grabbing `event.keyCode`. This helps you define
|
||||
keyboard listeners like this:
|
||||
|
||||
import Json.Decode as Json
|
||||
|
||||
onKeyUp : (Int -> msg) -> Attribute msg
|
||||
onKeyUp tagger =
|
||||
on "keyup" (Json.map tagger keyCode)
|
||||
|
||||
**Note:** It looks like the spec is moving away from `event.keyCode` and
|
||||
towards `event.key`. Once this is supported in more browsers, we may add
|
||||
helpers here for `onKeyUp`, `onKeyDown`, `onKeyPress`, etc.
|
||||
-}
|
||||
keyCode : Json.Decoder Int
|
||||
keyCode =
|
||||
Json.field "keyCode" Json.int
|
||||
@@ -1,48 +0,0 @@
|
||||
module Html.Keyed exposing
|
||||
( node
|
||||
, ol
|
||||
, ul
|
||||
)
|
||||
{-| A keyed node helps optimize cases where children are getting added, moved,
|
||||
removed, etc. Common examples include:
|
||||
|
||||
- The user can delete items from a list.
|
||||
- The user can create new items in a list.
|
||||
- You can sort a list based on name or date or whatever.
|
||||
|
||||
When you use a keyed node, every child is paired with a string identifier. This
|
||||
makes it possible for the underlying diffing algorithm to reuse nodes more
|
||||
efficiently.
|
||||
|
||||
# Keyed Nodes
|
||||
@docs node
|
||||
|
||||
# Commonly Keyed Nodes
|
||||
@docs ol, ul
|
||||
-}
|
||||
|
||||
|
||||
import Html exposing (Attribute, Html)
|
||||
import VirtualDom
|
||||
|
||||
|
||||
{-| Works just like `Html.node`, but you add a unique identifier to each child
|
||||
node. You want this when you have a list of nodes that is changing: adding
|
||||
nodes, removing nodes, etc. In these cases, the unique identifiers help make
|
||||
the DOM modifications more efficient.
|
||||
-}
|
||||
node : String -> List (Attribute msg) -> List ( String, Html msg ) -> Html msg
|
||||
node =
|
||||
VirtualDom.keyedNode
|
||||
|
||||
|
||||
{-|-}
|
||||
ol : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
|
||||
ol =
|
||||
node "ol"
|
||||
|
||||
|
||||
{-|-}
|
||||
ul : List (Attribute msg) -> List ( String, Html msg ) -> Html msg
|
||||
ul =
|
||||
node "ul"
|
||||
@@ -1,48 +0,0 @@
|
||||
module Html.Lazy exposing
|
||||
( lazy, lazy2, lazy3
|
||||
)
|
||||
|
||||
{-| Since all Elm functions are pure we have a guarantee that the same input
|
||||
will always result in the same output. This module gives us tools to be lazy
|
||||
about building `Html` that utilize this fact.
|
||||
|
||||
Rather than immediately applying functions to their arguments, the `lazy`
|
||||
functions just bundle the function and arguments up for later. When diffing
|
||||
the old and new virtual DOM, it checks to see if all the arguments are equal.
|
||||
If so, it skips calling the function!
|
||||
|
||||
This is a really cheap test and often makes things a lot faster, but definitely
|
||||
benchmark to be sure!
|
||||
|
||||
@docs lazy, lazy2, lazy3
|
||||
-}
|
||||
|
||||
import Html exposing (Html)
|
||||
import VirtualDom
|
||||
|
||||
|
||||
{-| A performance optimization that delays the building of virtual DOM nodes.
|
||||
|
||||
Calling `(view model)` will definitely build some virtual DOM, perhaps a lot of
|
||||
it. Calling `(lazy view model)` delays the call until later. During diffing, we
|
||||
can check to see if `model` is referentially equal to the previous value used,
|
||||
and if so, we just stop. No need to build up the tree structure and diff it,
|
||||
we know if the input to `view` is the same, the output must be the same!
|
||||
-}
|
||||
lazy : (a -> Html msg) -> a -> Html msg
|
||||
lazy =
|
||||
VirtualDom.lazy
|
||||
|
||||
|
||||
{-| Same as `lazy` but checks on two arguments.
|
||||
-}
|
||||
lazy2 : (a -> b -> Html msg) -> a -> b -> Html msg
|
||||
lazy2 =
|
||||
VirtualDom.lazy2
|
||||
|
||||
|
||||
{-| Same as `lazy` but checks on three arguments.
|
||||
-}
|
||||
lazy3 : (a -> b -> c -> Html msg) -> a -> b -> c -> Html msg
|
||||
lazy3 =
|
||||
VirtualDom.lazy3
|
||||
Reference in New Issue
Block a user