Add part7

This commit is contained in:
Richard Feldman
2018-05-05 08:04:50 -04:00
parent 8ae366a175
commit c34810f421
576 changed files with 79147 additions and 0 deletions

View File

@@ -0,0 +1 @@
elm-stuff

View File

@@ -0,0 +1,30 @@
Copyright (c) 2016, 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.

View File

@@ -0,0 +1,7 @@
# Mess with the DOM
Sometimes you want to manually set the **focus** to a particular input field.
Other times you want to be able to control how things **scroll**.
This library makes it possible to do these kinds of operations as tasks.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

View File

@@ -0,0 +1,19 @@
{
"version": "1.1.1",
"summary": "DOM helpers for managing focus and scrolling.",
"repository": "http://github.com/elm-lang/dom.git",
"license": "BSD3",
"source-directories": [
"src"
],
"exposed-modules": [
"Dom",
"Dom.Scroll",
"Dom.LowLevel"
],
"native-modules": true,
"dependencies": {
"elm-lang/core": "4.0.0 <= v < 6.0.0"
},
"elm-version": "0.17.0 <= v < 0.19.0"
}

View File

@@ -0,0 +1,69 @@
module Dom exposing
( focus, blur, Id
, Error(..)
)
{-|
# Focus
@docs focus, blur, Id
# Errors
@docs Error
-}
import Native.Dom
import Task exposing (Task)
-- ERRORS
{-| All the functions here look up DOM nodes by ID. If you ask for an ID that
is not currently attached to the DOM, you will get this error!
-}
type Error = NotFound String
-- FOCUS
{-| A unique identifier for a particular DOM node. When you create
`<div id="my-thing"></div>` you would refer to it with the `Id` `"my-thing"`.
-}
type alias Id =
String
{-| On a website, there can only be one thing in focus at a time. A text field,
a check box, etc. This function tells the Elm runtime to move the focus to a
particular DOM node.
Dom.focus "my-thing"
This is roughly the same as saying `document.getElementById(id).focus()`.
NOTE: setting focus can silently fail if the element is invisible. This could be captured as an error by checking to see
if document.activeElement actually got updated to the element we selected. https://jsbin.com/xeletez/edit?html,js,output
-}
focus : Id -> Task Error ()
focus =
Native.Dom.focus
{-| On a website, there can only be one thing in focus at a time. A text field,
a check box, etc. Sometimes you want that thing to no longer be in focus. This
is called &ldquo;blur&rdquo; for reasons that are unclear to almost everybody.
So this function tells a particular DOM node to lose focus.
Dom.blur "my-thing"
This is roughly the same as saying `document.getElementById(id).blur()`.
-}
blur : Id -> Task Error ()
blur =
Native.Dom.blur

View File

@@ -0,0 +1,37 @@
module Dom.LowLevel exposing
( onDocument
, onWindow
)
{-| This is not for general use. It backs libraries like `elm-lang/mouse` and
`elm-lang/window` which should cover your needs in most cases. In the rare
case that those packages do not seem to cover your scenario, first bring it up
with the community. Ask around and learn stuff first! Only get into these
functions after that.
# Global Event Listeners
@docs onDocument, onWindow
-}
import Json.Decode as Json
import Native.Dom
import Task exposing (Task)
{-| Add an event handler on the `document`. The resulting task will never end,
and when you kill the process it is on, it will detach the relevant JavaScript
event listener.
-}
onDocument : String -> Json.Decoder msg -> (msg -> Task Never ()) -> Task Never Never
onDocument =
Native.Dom.onDocument
{-| Add an event handler on `window`. The resulting task will never end, and
when you kill the process it is on, it will detach the relevant JavaScript
event listener.
-}
onWindow : String -> Json.Decoder msg -> (msg -> Task Never ()) -> Task Never Never
onWindow =
Native.Dom.onWindow

View File

@@ -0,0 +1,119 @@
module Dom.Scroll exposing
( toTop, toBottom, y, toY
, toLeft, toRight, x, toX
)
{-| When you set `overflow-y: scroll` on an element, a scroll bar will appear
when the content overflows the available space. When that happens, you may want
to modify the scroll position yourself. For example, maybe you have a chat room
that autoscrolls as new messages come in. This module provides functions like
`Dom.Scroll.toBottom` that let you do that kind of thing.
# Vertical
@docs toTop, toBottom, y, toY
# Horizontal
@docs toLeft, toRight, x, toX
-}
import Dom exposing (Error, Id)
import Dom.Size as Size
import Native.Dom
import Task exposing (Task)
-- VERTICAL
{-| Find the node with the given `Id` and scroll it to the top.
So `toTop id` is the same as `toY id 0`.
-}
toTop : Id -> Task Error ()
toTop id =
toY id 0
{-| Find the node with the given `Id` and scroll it to the bottom.
-}
toBottom : Id -> Task Error ()
toBottom =
Native.Dom.toBottom
{-| How much this element is scrolled vertically.
Say you have a node that does not fit in its container. A scroll bar shows up.
Initially you are at the top, which means `y` is `0`. If you scroll down 300
pixels, `y` will be `300`.
This is roughly the same as saying [`document.getElementById(id).scrollTop`][docs].
[docs]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop
-}
y : Id -> Task Error Float
y =
Native.Dom.getScrollTop
{-| Set the vertical scroll to whatever offset you want.
Imagine you have a chat room and you want to control how it scrolls. Say the
full chat is 400 pixels long, but it is in a box that limits the visible height
to 100 pixels.
- If we say `toY "chat" 0` it will scroll to the very top.
- If we say `toY "chat" 300` it will be at the bottom.
If we provide values outside that range, they just get clamped, so
`toY "chat" 900` is also scrolled to the bottom.
-}
toY : Id -> Float -> Task Error ()
toY =
Native.Dom.setScrollTop
-- HORIZONTAL
{-| Find the node with the given `Id` and scroll it to the far left.
So `toLeft id` is the same as `toX id 0`.
-}
toLeft : Id -> Task Error ()
toLeft id =
toX id 0
{-| Find the node with the given `Id` and scroll it to the far right.
-}
toRight : Id -> Task Error ()
toRight =
Native.Dom.toRight
{-| How much this element is scrolled horizontally.
Say you have a node that does not fit in its container. A scroll bar shows up.
Initially you are at the far left, which means `x` is `0`. If you scroll right
300 pixels, `x` will be `300`.
This is roughly the same as saying [`document.getElementById(id).scrollLeft`][docs].
[docs]: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollLeft
-}
x : Id -> Task Error Float
x =
Native.Dom.getScrollLeft
{-| Set the horizontal scroll to whatever offset you want.
It works just like `toY`, so check out those docs for a more complete example.
-}
toX : Id -> Float -> Task Error ()
toX =
Native.Dom.setScrollLeft

View File

@@ -0,0 +1,59 @@
module Dom.Size exposing ( height, width, Boundary )
{-| Figuring out the size of a node is actually pretty tricky. Nodes have
padding, borders, and margins. You can also scroll the content in a node in
many situations. Here it is as a picture:
<img src=""></img>
This module lets you choose one of these boundaries and then measure its size.
# Sizes
@docs width, height, Boundary
-}
import Dom exposing (Error, Id)
import Native.Dom
import Task exposing (Task)
{-| Get the height of a node, measured along a certain boundary.
If the node has the `hidden` attribute or the `display: none` style, this
will be zero.
-}
height : Boundary -> Id -> Task Error Float
height =
Native.Dom.height
{-| Get the width of a node, measured along a certain boundary.
If the node has the `hidden` attribute or the `display: none` style, this
will be zero.
-}
width : Boundary -> Id -> Task Error Float
width =
Native.Dom.width
{-| Check out [this diagram][diagram] to understand what all of these
boundaries refer to.
If you happen to know the JavaScript equivalents by heart, maybe this will help you:
- `scrollHeight` is the same as `height Content`
- `clientHeight` is the same as `height VisibleContent`
- `offsetHeight` is the same as `height VisibleContentWithBorders`
- `getBoundingClientRect().height` is the same as `height VisibleContentWithBordersAndMargins`
But again, look at [the diagram][diagram]. It makes this easier!
[diagram]:
-}
type Boundary
= Content
| VisibleContent
| VisibleContentWithBorders
| VisibleContentWithBordersAndMargins

View File

@@ -0,0 +1,182 @@
var _elm_lang$dom$Native_Dom = function() {
var fakeNode = {
addEventListener: function() {},
removeEventListener: function() {}
};
var onDocument = on(typeof document !== 'undefined' ? document : fakeNode);
var onWindow = on(typeof window !== 'undefined' ? window : fakeNode);
function on(node)
{
return function(eventName, decoder, toTask)
{
return _elm_lang$core$Native_Scheduler.nativeBinding(function(callback) {
function performTask(event)
{
var result = A2(_elm_lang$core$Json_Decode$decodeValue, decoder, event);
if (result.ctor === 'Ok')
{
_elm_lang$core$Native_Scheduler.rawSpawn(toTask(result._0));
}
}
node.addEventListener(eventName, performTask);
return function()
{
node.removeEventListener(eventName, performTask);
};
});
};
}
var rAF = typeof requestAnimationFrame !== 'undefined'
? requestAnimationFrame
: function(callback) { callback(); };
function withNode(id, doStuff)
{
return _elm_lang$core$Native_Scheduler.nativeBinding(function(callback)
{
rAF(function()
{
var node = document.getElementById(id);
if (node === null)
{
callback(_elm_lang$core$Native_Scheduler.fail({ ctor: 'NotFound', _0: id }));
return;
}
callback(_elm_lang$core$Native_Scheduler.succeed(doStuff(node)));
});
});
}
// FOCUS
function focus(id)
{
return withNode(id, function(node) {
node.focus();
return _elm_lang$core$Native_Utils.Tuple0;
});
}
function blur(id)
{
return withNode(id, function(node) {
node.blur();
return _elm_lang$core$Native_Utils.Tuple0;
});
}
// SCROLLING
function getScrollTop(id)
{
return withNode(id, function(node) {
return node.scrollTop;
});
}
function setScrollTop(id, desiredScrollTop)
{
return withNode(id, function(node) {
node.scrollTop = desiredScrollTop;
return _elm_lang$core$Native_Utils.Tuple0;
});
}
function toBottom(id)
{
return withNode(id, function(node) {
node.scrollTop = node.scrollHeight;
return _elm_lang$core$Native_Utils.Tuple0;
});
}
function getScrollLeft(id)
{
return withNode(id, function(node) {
return node.scrollLeft;
});
}
function setScrollLeft(id, desiredScrollLeft)
{
return withNode(id, function(node) {
node.scrollLeft = desiredScrollLeft;
return _elm_lang$core$Native_Utils.Tuple0;
});
}
function toRight(id)
{
return withNode(id, function(node) {
node.scrollLeft = node.scrollWidth;
return _elm_lang$core$Native_Utils.Tuple0;
});
}
// SIZE
function width(options, id)
{
return withNode(id, function(node) {
switch (options.ctor)
{
case 'Content':
return node.scrollWidth;
case 'VisibleContent':
return node.clientWidth;
case 'VisibleContentWithBorders':
return node.offsetWidth;
case 'VisibleContentWithBordersAndMargins':
var rect = node.getBoundingClientRect();
return rect.right - rect.left;
}
});
}
function height(options, id)
{
return withNode(id, function(node) {
switch (options.ctor)
{
case 'Content':
return node.scrollHeight;
case 'VisibleContent':
return node.clientHeight;
case 'VisibleContentWithBorders':
return node.offsetHeight;
case 'VisibleContentWithBordersAndMargins':
var rect = node.getBoundingClientRect();
return rect.bottom - rect.top;
}
});
}
return {
onDocument: F3(onDocument),
onWindow: F3(onWindow),
focus: focus,
blur: blur,
getScrollTop: getScrollTop,
setScrollTop: F2(setScrollTop),
getScrollLeft: getScrollLeft,
setScrollLeft: F2(setScrollLeft),
toBottom: toBottom,
toRight: toRight,
height: F2(height),
width: F2(width)
};
}();