Flatman Client 1.10.2
MIT
License:✅ All 84 tests pass
Table of Contents
Overview
-
Description
-
Installation
-
Notes
-
Component
-
Initialing A Component
-
Mixing A Component
-
The Options Object
-
Writing A Component
-
-
Examples
-
Nesting
-
Basic Usage
-
Wrapping The Dom
-
What You Can Pass As An Object
-
-
Functional Methods
-
Basics
-
el.addClass
-
el.isComponent
-
-
El Methods
-
Attributes
-
addClass
-
attr
-
className
-
copy
-
name
-
removeClass
-
scrollHeight
-
scrollTop
-
scrollWidth
-
toggleClass
-
-
Dom Manipulation
-
Events
-
doubleclick
-
off
-
on
-
once
-
trigger
-
Input
-
Drag And Drop
-
-
Predicates
-
Query
-
Description
top)
Description.md (- Create nodes with a simple interface which will be very familiar.
- Get an API to simplify DOM manipulation
- Plugin architecture to extend the prototype
Thanks to FRZR for some help for clearing up the "child" problem https://freezer.js.org/minimum-viable-view-library/
Installation
top)
Installation.md (Include the script in your body
tag, or head
, I think it's wise to place it in the body
, at the bottom.
<script src="createNode.min.js"></script>
Notes
top)
Notes.md (I use this on production, and I would like some help on it. Thanks. The goal is to keep it as simple and light as possible. It's a bit of a bastard child between FRZR and jQuery — a somewhat attractive & useful bastard.
Component
Initialing A Component
top)
Component / Initialing A Component.md (The most basic way to initialize a component is like this:
It takes the same type of arguments that a regular el
takes.
A component and an element are designed to be similar. This means you can do things like this:
;
Mixing A Component
top)
Component / Mixing A Component.md (Special considerations
Wrapped components cannot share method names which are shared with 'el()' node. They will be excluded.
Component; Component;
var a = ; a;a;
The Options Object
top)
Component / The Options Object.md (You can pass your component any options.
- Keys will be checked for matching methods
- The options will be passed as an argument to the Component constructor
el('Component', {
className : 'this-class',
onClick : function () {},
})
Writing A Component
top)
Component / Writing A Component.md (Component;
Examples
Nesting
top)
Examples / Nesting.md (;
Basic Usage
top)
Examples / Basic Usage.md (;
Wrapping The Dom
top)
Examples / Wrapping The Dom.md (You can get all the methods and the simplified interface based on ideas in jQuery by wrapping a node in el
.
var wrapped = ;
What You Can Pass As An Object
top)
Examples / What You Can Pass As An Object.md (- You can pass it anything which has an
appendTo
method
Functional Methods
Basics
top)
Functional Methods / Basics.md (Functional interfaces
el.contains
el.fn
el.hasParent
el.isComponent
el.isCreateNode
el.isElement
el.isVisible
el.addClass
top)
Functional Methods / el.addClass.md (Is a curried function which can take 1
or 2
arguments.
Using el.addClass
with a single argument will return a function which expects a Node
or an Array
of nodes.
Using the partially applied function:
var pizzas = document;forEach;
Using the function with 2
arguments:
var pizza = document;el;
The order of the arguments does not matter
var pizza = document;el;
A curried function which adds class names to the Node
var pizza = document;var toppings = el;;;
el.isComponent
top)
Functional Methods / el.isComponent.md (Returns true
or false
if the argument is a component
El Methods
Attributes
addClass
top)
El Methods / Attributes / addClass.md (Will add a class to a node, and will check if the class does not exist before adding.
;
attr
top)
El Methods / Attributes / attr.md (var div = ;div;
;
className
top)
El Methods / Attributes / className.md (Will set or return value of the attribute class
for a Node
.
var b = ; aclassName'test'; aclassName;//-> test
copy
top)
El Methods / Attributes / copy.md (Will copy a target node's attributes from another node, including it's innerHTML
.
var a = ;var b = ;a; aclassName;//-> test a;// -> text
name
top)
El Methods / Attributes / name.md (Will set or return value of the attribute name
for a Node
.
var b = ; aname'test'; aname;//-> test
removeClass
top)
El Methods / Attributes / removeClass.md (Will remove the class name from a node.
var node = ;node;
scrollHeight
top)
El Methods / Attributes / scrollHeight.md (Will tell you an elements scrollHeight
value
myDiv;// -> Number
scrollTop
top)
El Methods / Attributes / scrollTop.md (Will tell you an elements scrollTop
value when passed nothing. Will set the node scrollTop
when passed a number.
myDiv;// -> Number
myDiv;// -> [ELEMENT]
scrollWidth
top)
El Methods / Attributes / scrollWidth.md (Will tell you an elements scrollWidth
value
myDiv;// -> Number
toggleClass
top)
El Methods / Attributes / toggleClass.md (Will toggle a class name on a node. If the class exists, it will be removed, if it does not exist, it will be added.
var myDIV = ;myDIV; // -> myDIV has class 'toggle'myDIV; // -> myDIV does not have class 'toggle'
Dom Manipulation
append
top)
El Methods / Dom Manipulation / append.md (Is an interface for appendChild
, the result being a way to add a Node
to a parent Node
.
When a Node
is appended to an element in the DOM
it emits a mount
event.
var parent = ;var child = ;parent;
is the same as
var parent = ;
;
<div class="parent-1"> <div class="child-1"></div> <div class="child-2"></div></div>
appendTo
top)
El Methods / Dom Manipulation / appendTo.md (Is an interface for appendChild
, the result being a way to add a child Node
to a parent Node
.
When a Node
is appended to an element in the DOM
it emmits a mount
event.
var parent = ;var child = ;child;
<div class="parent-1"> <div class="child-1"></div></div>
before
top)
El Methods / Dom Manipulation / before.md (Is an interface for insertBefore
, the result being a way to add a Node
before the reference Node
.
When a Node
is appended to an element in the DOM
it emmits a mount
event.
var parent = ;var reference = ;var before = ; parent;reference;
<div class="parent-1"> <div class="before-1"></div> <div class="reference-1"></div></div>
check
top)
El Methods / Dom Manipulation / check.md (Check a checkbox and radio
var a = ; a;a;// -> true
clone
top)
El Methods / Dom Manipulation / clone.md (Clones an element, is an interface for Node.cloneNode(true)
var a = ; var b = a;
<!-- b -->
disable
top)
El Methods / Dom Manipulation / disable.md (Disables an element by setting it's disabled
attribute to disabled
var a = ;
Result
enable
top)
El Methods / Dom Manipulation / enable.md (Enables an element by removing it's disabled
attribute
var a = ;
focus
top)
El Methods / Dom Manipulation / focus.md (Will focus
an element. This will only work if the element is in the document.body
and if it has an tabindex
attribute.
var a = ;a;
html
top
Is an interface for innerHTML
. When passed no arguments, it will return the value of innerHTML
.
var a = ;a;// a.node.innerHTML -> 'test'// a.html() -> 'test'
html
top)
El Methods / Dom Manipulation / html.md (Sets the innerHTML
value of a node.
var target = ;target;
Passing it no arguments will return the value of innerHTML
var target = ;target;// -> '<div class="my-div"></div>'
prepend
top)
El Methods / Dom Manipulation / prepend.md (Will append a child element in the first position of the parent node.
var parent = ; var child = ;
parent;
prependTo
top)
El Methods / Dom Manipulation / prependTo.md (Will append a child element in the first position of the parent node.
var child = ;var parent = ;
child;
remove
top)
El Methods / Dom Manipulation / remove.md (Will remove a Node
from it's parent.
var a = ;var b = ; a;
b;
removeChild
top)
El Methods / Dom Manipulation / removeChild.md (Will remove a child Node
.
var a = ;var b = ; a;
a;
replaceWith
top)
El Methods / Dom Manipulation / replaceWith.md (Replaces a target node with a new node.
var targetNode = ;var newNode = ;targetNode;
select
top)
El Methods / Dom Manipulation / select.md (Provides an interface to select text ranges and select the option
node.
Query
var a = ;a;// -> [0, 2]
Set
var a = ;a;
By entering a single value, the cursor will be placed without selecting.
- Negative values start from the end.
a;
This example selects from the first letter to 3 letters from the end.
a;
select
var a = ; a; // -> will select the first option node
style
top)
El Methods / Dom Manipulation / style.md (An interface to edit the style of a node, it can be used in 2 different ways.
el.style([ String property ], [ String|Number value])
el.style([ Object property and values ])
The property must be the JavaScript named property. Vendor prefixes are not necessary.
Value and property
var a = ; astyle'fontSize' 13;
Object
var a = ; astyle fontSize : 13 fontWeight : 'bold';
Get computed styles
divstyle;// -> [ Object ]
divstyle'fontSize';// -> 13px
text
top)
El Methods / Dom Manipulation / text.md (Sets the text value of a node, uses textContent
as opposed to innerHTML
, this distinction is important since any HTML passed as a string will be converted to text.
var target = ;targettext'my text';
Passing it no arguments will return the value of textContent
var target = ;targettext;// -> 'my text'
uncheck
top)
El Methods / Dom Manipulation / uncheck.md (Uncheck a checkbox and radio
var a = ; a;a;// -> true a;a;// -> false
value
top)
El Methods / Dom Manipulation / value.md (Query
var a = ;avalue;// -> 'My text'
Set
var a = ;avalue'New text';
Events
doubleclick
top)
El Methods / Events / doubleclick.md (A listener which is triggered when the user double clicks on an element.
on('doubleclick', [ Function ])
off
top)
El Methods / Events / off.md (This is an interface for removeEventListener
, with the main difference being that you don't have to pass a function as a second argument. And when no second argument is passed, all functions associated with the event will be removed.
var element = ; { console;} element;
By clicking on element
'click' will be logged to the console.
element;
In this example, we are attaching 3 functions to element
element;element;element;
We will now remove all event listeners attached to the click
event by passing nothing as a second argument.
element;
on
top)
El Methods / Events / on.md (This is an interface for addEventListener
, with the main difference being how functions are tracked internally.
var element = ; element; div;
Now when you click on the element, it will log click
to the console.
once
top)
El Methods / Events / once.md (Will add an event listener which will execute once, then remove the listener.
var element = ; element; div;
Now when you click on the element, it will log click
to the console. Any additional clicks will not trigger the event.
trigger
top)
El Methods / Events / trigger.md (This will trigger all listeners for matching event name.
var node = ; el; el; el;// -> will execute 'myClickHandler' and 'myClickSecondHandler'
Input
top)
El Methods / Events / Input.md (Input has been unified across browsers, so that when you use on('input')
you will have consistent performance on Internet Explorer, Chrome and Firefox.
In this example, we'll write a component to replace creating an input with el('input', { type : 'text' })
with a Component, so that the API becomes el(Editbox)
.
{ var self = this; thisnode = document : ;} Editboxprototype { var f = thisnodedocumentvalue; if !value return ; ;}; var a = ;
Drag And Drop
top)
El Methods / Events / Drag And Drop.md (on('dragstart', [ Function ])
on('dragmove', [ Function ])
on('dragend', [ Function ])
You must access the detail
property to get pageX
and pageY
properties.
Additional properties:
startX
startY
distanceX
distanceY
startX
and startY
The X
and Y
position of where drag started
distanceX
and distanceY
The distance travelled in pixels
between the start position and the current position.
Predicates
contains
top)
El Methods / Predicates / contains.md (var a;var p = ; p;// -> true
Can also accept multiple arguments
var a;var b; var p = ; p;// -> true
Can also accept an array
var a;var b;var c; var p = ; // This is validp;// is is thisp; // They will both return 'true'
hasClass
top)
El Methods / Predicates / hasClass.md (Returns boolean
value for whether a Node
has a className.
var a = ;a// -> true
hasParent
top)
El Methods / Predicates / hasParent.md (var myParent = ; myChild;// -> true
isChecked
top)
El Methods / Predicates / isChecked.md (Returns a [ Boolean ]
value of the checked state of a node.
var a = ;a;a;// -> false
isFocused
top)
El Methods / Predicates / isFocused.md (var myFocus = ; myFocus;// -> false myFocus; myFocus;// -> true
isVisible
top)
El Methods / Predicates / isVisible.md (This one requires a bit of explaining, it doesn't only check for 'visibility'.
- Checks that the node isn't off screen.
- Or that it's
display
property isn't set tonone
. - Or that
overflow
isn't set tohidden
and ensures theheight
andwidth
are larger than 0.
var myNode = ; myFocus; top#methods// -> true myFocusstyle'left' -100000; myFocus;// -> false
Or
var myNode = ; myFocus;// -> true myFocusstyle'display' 'none'; myFocus;// -> false
The idea here is that this check is smart, so it knows whether the node is visible or not in various contexts.
Query
children
top)
El Methods / Query / children.md (Returns an array of direct descendants wrapped in the el
constructor. This is an interface for childNodes
with a filter for a NodeType
equal to 1
(HTMlElement
)
var a = ; achildNodes;
You can also specify an index
a;// -> <div class="child-1"></div>
You can also use negative numbers
a;// -> <div class="child-3"></div>
You can also slice
the child array
a;// -> <div class="child-2"></div>// -> <div class="child-3"></div>
closest
top)
El Methods / Query / closest.md (Returns the closest parent matching the query.
var farthest;var parent = ; farthest; // -> HTML Element : div.closest
find
top)
El Methods / Query / find.md (Returns an array of matches as a result of executing the query.
var parent = ; parent;// -> HTML NodeList : [ div.find, div.find ]
hasClass
top)
El Methods / Query / hasClass.md (var node = document;;// -> true
offset
top)
El Methods / Query / offset.md (Returns the top
, left
, width
, height
relative to the body
's coordinates. It is an interface for this.node.getBoundingClientRect()
var parent = ; parent; parent;/* -> { height : [Number], left : [Number], top : [Number], width : [Number] }*/
parent
top)
El Methods / Query / parent.md (If the node
has a parent, it will return it's parent. Otherwise, it will return false
var child = ; childparent;// -> false child;childparent;// -> HTML Element : document.body
parents
top)
El Methods / Query / parents.md (Returns an array of parents, from first to last.
var child; ; child;// -> [Array]
parentsUntil
top)
El Methods / Query / parentsUntil.md (Takes a predicate as an argument and returns the first truthy
match.
div;
scrollWidth
top)
El Methods / Query / scrollWidth.md (Returns the scrollWidth property of a node
.
node;// -> Number
siblings
top)
El Methods / Query / siblings.md (Returns a selected Node and it's siblings filtered to show only nodes of type 1
, which are HTML element nodes, this excludes text nodes.
var selected; ; selected;
textNodes
top)
El Methods / Query / textNodes.md (Returns all the Text Nodes
which are a child of a selected node.
var selected = ;selected;// -> [Text Node]
Tests
1. addClass............................................................ ✅
2. after............................................................... ✅
3. after_single_child.................................................. ✅
4. append.............................................................. ✅
5. appendTo............................................................ ✅
6. appendTo_onMount.................................................... ✅
7. append_component.................................................... ✅
8. append_single_node.................................................. ✅
9. append_undefined.................................................... ✅
10. attr................................................................ ✅
11. before.............................................................. ✅
12. before_single_child................................................. ✅
13. check............................................................... ✅
14. children............................................................ ✅
15. childrenFirst....................................................... ✅
16. childrenReplace..................................................... ✅
17. childrenSlice....................................................... ✅
18. classList........................................................... ✅
19. classList_svg....................................................... ✅
20. clone............................................................... ✅
21. closest............................................................. ✅
22. component........................................................... ✅
23. componentCheckChildren.............................................. ✅
24. componentOnMount.................................................... ✅
25. componentRefs....................................................... ✅
26. componentWithClassAndChildren....................................... ✅
27. componentWithNames.................................................. ✅
28. componentWithRenderMethod........................................... ✅
29. containsArray....................................................... ✅
30. createElement_with_style............................................ ✅
31. createSVGElement_with_style......................................... ✅
32. disable............................................................. ✅
33. emptyAttr........................................................... ✅
34. find................................................................ ✅
35. find_predicate...................................................... ✅
36. find_tagName........................................................ ✅
37. find_wildcard....................................................... ✅
38. fn.................................................................. ✅
39. focus............................................................... ✅
40. hasClass............................................................ ✅
41. hasClass_array...................................................... ✅
42. is.................................................................. ✅
43. isDisabled.......................................................... ✅
44. isFocused........................................................... ✅
45. isVisible........................................................... ✅
46. is_wildcard......................................................... ✅
47. mapChildren......................................................... ✅
48. name................................................................ ✅
49. off................................................................. ✅
50. offset.............................................................. ✅
51. on.................................................................. ✅
52. onMount............................................................. ✅
53. onMount_component................................................... ✅
54. onUnmount........................................................... ✅
55. once................................................................ ✅
56. parent.............................................................. ✅
57. parents............................................................. ✅
58. prepend............................................................. ✅
59. prependTo........................................................... ✅
60. prepend_component................................................... ✅
61. remove.............................................................. ✅
62. removeChild......................................................... ✅
63. removeClass......................................................... ✅
64. removeClassArray.................................................... ✅
65. removeClass_not_there............................................... ✅
66. replaceWith......................................................... ✅
67. scrollHeight........................................................ ✅
68. scrollTop........................................................... ✅
69. scrollWidth......................................................... ✅
70. select.............................................................. ✅
71. siblings............................................................ ✅
72. style............................................................... ✅
73. style_clear......................................................... ✅
74. style_object........................................................ ✅
75. style_translateY.................................................... ✅
76. svg_addClass........................................................ ✅
77. text................................................................ ✅
78. textNodes........................................................... ✅
79. toggleClass......................................................... ✅
80. trigger............................................................. ✅
81. uncheck............................................................. ✅
82. value............................................................... ✅
83. html_remove-children................................................ ✅
84. hasClass_array_array-is-className................................... ✅