flatman-client v1.11.0
Flatman Client 1.10.2
License: MIT
✅ 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
Description.md (top)
- 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
Installation.md (top)
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
Notes.md (top)
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
Component / Initialing A Component.md (top)
The most basic way to initialize a component is like this:
el('Component')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:
el('Component', [
el('div'),
el(Component)
]);Mixing A Component
Component / Mixing A Component.md (top)
Special considerations
Wrapped components cannot share method names which are shared with 'el()' node. They will be excluded.
Component.create('interior', {
myExposedMethod() {
// Do stuff
},
render() {
return el('div', {
name : 'interior',
className : 'component'
});
}
});
Component.create('my-component', Component.wrap('interior', {
constructor(props) {
// Set my stuff
},
thisMethod() {
// do stuff
},
onHover() {
// Do stuff
this.node.name.trigger('hover');
},
render(props) {
el('div', {
onClick : props.onClick,
onHover : () => this.onHover()
}, [
props.component // <-- The 'interior' component
])
}
}));var a = el('my-component');
a.myExposedMethod();
a.thisMethod();The Options Object
Component / The Options Object.md (top)
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
Component / Writing A Component.md (top)
Component.create('my-component', {
constructor(props) {
// Set my stuff
},
onHover() {
// Do stuff
},
touchInner() {
this.node.inner.trigger('touch');
},
render(props) {
el('div', {
onClick : props.onClick,
onHover : () => this.onHover()
}, [
// Names will be added as a reference to 'this.node',
// name : 'inner' becomes this.node.inner
el('div', { name : 'inner' })
])
}
});Examples
Nesting
Examples / Nesting.md (top)
el('div', [
el('div', { className : 'child'}),
el('div', { className : 'child-2'})
]);Basic Usage
Examples / Basic Usage.md (top)
el('div', { className : 'my-class-name' }, ['some text']);Wrapping The Dom
Examples / Wrapping The Dom.md (top)
You can get all the methods and the simplified interface based on ideas in jQuery by wrapping a node in el.
var wrapped = el(document.querySelector('#my-div'));What You Can Pass As An Object
Examples / What You Can Pass As An Object.md (top)
- You can pass it anything which has an
appendTomethod
Functional Methods
Basics
Functional Methods / Basics.md (top)
Functional interfaces
el.containsel.fnel.hasParentel.isComponentel.isCreateNodeel.isElementel.isVisible
el.addClass
Functional Methods / el.addClass.md (top)
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.querySelectorAll('.pizza');
[].forEach.call(pizzas, el.addClass('class-name'));Using the function with 2 arguments:
var pizza = document.querySelector('.pizza');
el.addClass('class-name', pizza);The order of the arguments does not matter
var pizza = document.querySelector('.pizza');
el.addClass(pizza, 'class-name');A curried function which adds class names to the Node
var pizza = document.querySelector('.pizza');
var toppings = el.addClass(pizza);
toppings('peppers');
toppings('mushrooms');el.isComponent
Functional Methods / el.isComponent.md (top)
Returns true or false if the argument is a component
El Methods
Attributes
addClass
El Methods / Attributes / addClass.md (top)
Will add a class to a node, and will check if the class does not exist before adding.
el('div').addClass('this-class-name');attr
El Methods / Attributes / attr.md (top)
var div = el('div');
div.attr('data-attribute', 'value');<div data-attribute="value"></div>el('div').attr({
className : 'some-class-name',
style : 'background: red'
});<div class="some-class-name" style="background: red"></div>className
El Methods / Attributes / className.md (top)
Will set or return value of the attribute class for a Node.
var b = el('div');
a.className('test');
a.className();
//-> testcopy
El Methods / Attributes / copy.md (top)
Will copy a target node's attributes from another node, including it's innerHTML.
var a = el('div');
var b = el('div', { className : 'test' }, 'text');
a.copy(b);
a.className();
//-> test
a.html();
// -> textname
El Methods / Attributes / name.md (top)
Will set or return value of the attribute name for a Node.
var b = el('div');
a.name('test');
a.name();
//-> testremoveClass
El Methods / Attributes / removeClass.md (top)
Will remove the class name from a node.
<div id="copy" class="my-class-name" data-attribute="some-text">var node = el(document.querySelector('#copy'));
node.removeClass('my-class-name');<div id="copy" data-attribute="some-text">scrollHeight
El Methods / Attributes / scrollHeight.md (top)
Will tell you an elements scrollHeight value
myDiv.scrollHeight();
// -> NumberscrollTop
El Methods / Attributes / scrollTop.md (top)
Will tell you an elements scrollTop value when passed nothing. Will set the node scrollTop when passed a number.
myDiv.scrollTop();
// -> NumbermyDiv.scrollTop(20);
// -> [ELEMENT]scrollWidth
El Methods / Attributes / scrollWidth.md (top)
Will tell you an elements scrollWidth value
myDiv.scrollWidth();
// -> NumbertoggleClass
El Methods / Attributes / toggleClass.md (top)
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 = el('div');
myDIV.toggleClass('toggle'); // -> myDIV has class 'toggle'
myDIV.toggleClass('toggle'); // -> myDIV does not have class 'toggle'Dom Manipulation
append
El Methods / Dom Manipulation / append.md (top)
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 = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
parent.append([child]);is the same as
var parent = el('div', { className : 'parent-1' }, [
el('div', { className : 'child-1' })
]);el('div', { className : 'parent-1' }).append([
el('div', { className : 'child-1' })
]);<div class="parent-1">
<div class="child-1"></div>
<div class="child-2"></div>
</div>appendTo
El Methods / Dom Manipulation / appendTo.md (top)
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 = el('div', { className : 'parent-1' });
var child = el('div', { className : 'child-1' });
child.appendTo(parent);<div class="parent-1">
<div class="child-1"></div>
</div>before
El Methods / Dom Manipulation / before.md (top)
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 = el('div', { className : 'parent-1' });
var reference = el('div', { className : 'reference-1' });
var before = el('div', { className : 'before-1' });
parent.append([ref]);
reference.before([before]);<div class="parent-1">
<div class="before-1"></div>
<div class="reference-1"></div>
</div>check
El Methods / Dom Manipulation / check.md (top)
Check a checkbox and radio
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> trueclone
El Methods / Dom Manipulation / clone.md (top)
Clones an element, is an interface for Node.cloneNode(true)
var a = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
var b = a.clone();<!-- b -->
<div>
<div class="child-1"></div>
<div class="child-2"></div>
<div class="child-3"></div>
</div>disable
El Methods / Dom Manipulation / disable.md (top)
Disables an element by setting it's disabled attribute to disabled
var a = el('div').disable();Result
<div disabled="disabled"></div>enable
El Methods / Dom Manipulation / enable.md (top)
Enables an element by removing it's disabled attribute
<div id="disabled" disabled="disabled"></div>var a = el(document.getElementById('disabled')).enable();<div id="disabled"></div>focus
El Methods / Dom Manipulation / focus.md (top)
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 = el('div');
a.appendTo(document.body).focus();html top
Is an interface for innerHTML. When passed no arguments, it will return the value of innerHTML.
var a = el('div');
a.html('test');
// a.node.innerHTML -> 'test'
// a.html() -> 'test'html
El Methods / Dom Manipulation / html.md (top)
Sets the innerHTML value of a node.
var target = el(document.querySelector('.target-node'));
target.html('<div class="my-div"></div>');Passing it no arguments will return the value of innerHTML
var target = el(document.querySelector('.target-node'));
target.html();
// -> '<div class="my-div"></div>'prepend
El Methods / Dom Manipulation / prepend.md (top)
Will append a child element in the first position of the parent node.
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);
var child = el('div', { className : 'second-child' });<div class="parent">
<div class="first-child"></div>
</div>parent.prepend([child]);<div class="parent">
<div class="second-child"></div>
<div class="first-child"></div>
</div>prependTo
El Methods / Dom Manipulation / prependTo.md (top)
Will append a child element in the first position of the parent node.
var child = el('div', { className : 'second-child' });
var parent = el('div', { className : 'parent' }, [
el('div', { 'first-child' })
]);<div class="parent">
<div class="first-child"></div>
</div>child.prependTo(parent);<div class="parent">
<div class="second-child"></div>
<div class="first-child"></div>
</div>remove
El Methods / Dom Manipulation / remove.md (top)
Will remove a Node from it's parent.
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);<div class="parent">
<div class="first-child"></div>
</div>b.remove();<div class="parent">
</div>removeChild
El Methods / Dom Manipulation / removeChild.md (top)
Will remove a child Node.
var a = el('div', { className : 'parent' });
var b = el('div', { className : 'first-child' });
a.append(b);<div class="parent">
<div class="first-child"></div>
</div>a.removeChild(b);<div class="parent">
</div>replaceWith
El Methods / Dom Manipulation / replaceWith.md (top)
Replaces a target node with a new node.
var targetNode = el(document.querySelector('.target-node'));
var newNode = el('div', { className : 'new-node' });
targetNode.replaceWith(newNode);select
El Methods / Dom Manipulation / select.md (top)
Provides an interface to select text ranges and select the option node.
Query
var a = el(document.querySelector('.my-input'));
a.select();
// -> [0, 2]Set
var a = el(document.querySelector('.my-input'));
a.select(0, 2);By entering a single value, the cursor will be placed without selecting.
- Negative values start from the end.
a.select(-1);This example selects from the first letter to 3 letters from the end.
a.select(0, -3);select
var a = el('select', [
el('option'),
el('option')
]);
a.select(0);
// -> will select the first option nodestyle
El Methods / Dom Manipulation / style.md (top)
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 = el('div');
a.style('fontSize', 13);Object
var a = el('div');
a.style({
fontSize : 13,
fontWeight : 'bold'
});Get computed styles
div.style();
// -> [ Object ]div.style('fontSize');
// -> 13pxtext
El Methods / Dom Manipulation / text.md (top)
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 = el(document.querySelector('.target-node'));
target.text('my text');Passing it no arguments will return the value of textContent
var target = el(document.querySelector('.target-node'));
target.text();
// -> 'my text'uncheck
El Methods / Dom Manipulation / uncheck.md (top)
Uncheck a checkbox and radio
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> true
a.uncheck();
a.isChecked();
// -> falsevalue
El Methods / Dom Manipulation / value.md (top)
Query
var a = el(document.querySelector('.my-input'));
a.value();
// -> 'My text'Set
var a = el(document.querySelector('.my-input'));
a.value('New text');Events
doubleclick
El Methods / Events / doubleclick.md (top)
A listener which is triggered when the user double clicks on an element.
on('doubleclick', [ Function ])
off
El Methods / Events / off.md (top)
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 = el('div');
function logToConsole() {
console.log('click');
}
element.on('click', logToConsole);By clicking on element 'click' will be logged to the console.
element.off('click', logToConsole);In this example, we are attaching 3 functions to element
element.on('click', click1);
element.on('click', click2);
element.on('click', click3);We will now remove all event listeners attached to the click event by passing nothing as a second argument.
element.off('click');on
El Methods / Events / on.md (top)
This is an interface for addEventListener, with the main difference being how functions are tracked internally.
var element = el('div');
element.on('click', function () {
console.log('click');
});
div.appendTo(document.body);Now when you click on the element, it will log click to the console.
once
El Methods / Events / once.md (top)
Will add an event listener which will execute once, then remove the listener.
var element = el('div');
element.once('click', function () {
console.log('click');
});
div.appendTo(document.body);Now when you click on the element, it will log click to the console. Any additional clicks will not trigger the event.
trigger
El Methods / Events / trigger.md (top)
This will trigger all listeners for matching event name.
var node = el('div');
el.on('click', function myClickHandler() {
// Do something
});
el.on('click', function myClickSecondHandler() {
// Do something
});
el.trigger('click');
// -> will execute 'myClickHandler' and 'myClickSecondHandler'Input
El Methods / Events / Input.md (top)
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).
function Editbox() {
var self = this;
this.node = {
document : el('input',
{
type : 'text',
onInput : function (e) {
self.trigger('input', e);
}
}
)
};
}
Editbox.prototype.value = function (value) {
var f = this.node.document.value;
if (!value) {
return f();
}
f(value);
};
var a = el(Editbox, {
onInput : function (e) {
console.log(this.value());
}
});Drag And Drop
El Methods / Events / Drag And Drop.md (top)
on('dragstart', [ Function ])on('dragmove', [ Function ])on('dragend', [ Function ])
You must access the detail property to get pageX and pageY properties.
Additional properties:
startXstartYdistanceXdistanceY
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
El Methods / Predicates / contains.md (top)
var a;
var p = el('div', [
a = el('div')
]);
p.contains(a);
// -> trueCan also accept multiple arguments
var a;
var b;
var p = el('div',
a = el('div'),
b = el('div')
);
p.contains(a, b);
// -> trueCan also accept an array
var a;
var b;
var c;
var p = el('div',
a = el('div'),
b = el('div'),
c = el('div')
);
// This is valid
p.contains([a, b, c]);
// is is this
p.contains([a, b] c);
// They will both return 'true'hasClass
El Methods / Predicates / hasClass.md (top)
Returns boolean value for whether a Node has a className.
var a = el('div', { className : 'test' });
a.hasClass('test')
// -> truehasParent
El Methods / Predicates / hasParent.md (top)
var myParent = el('div', [
var myChild = el('div')
]);
myChild.hasParent(myParent);
// -> trueisChecked
El Methods / Predicates / isChecked.md (top)
Returns a [ Boolean ] value of the checked state of a node.
var a = el('input', { type : 'checkbox' });
a.check();
a.isChecked();
// -> falseisFocused
El Methods / Predicates / isFocused.md (top)
var myFocus = el('label', { tabIndex : 0 });
myFocus.isFocused();
// -> false
myFocus.focus();
myFocus.isFocused();
// -> trueisVisible
El Methods / Predicates / isVisible.md (top)
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
displayproperty isn't set tonone. - Or that
overflowisn't set tohiddenand ensures theheightandwidthare larger than 0.
var myNode = el('div', {
style : {
position : 'absolute',
left : 0,
top : 0
}
}).appendTo(document.body);
myFocus.isVisible(); [top](#methods)
// -> true
myFocus.style('left', -100000);
myFocus.isVisible();
// -> falseOr
var myNode = el('div').appendTo(document.body);
myFocus.isVisible();
// -> true
myFocus.style('display', 'none');
myFocus.isVisible();
// -> falseThe idea here is that this check is smart, so it knows whether the node is visible or not in various contexts.
Query
children
El Methods / Query / children.md (top)
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 = el('div', [
el('div', { className : 'child-1' }),
el('div', { className : 'child-2' }),
el('div', { className : 'child-3' })
]);
a.childNodes;<div class="child-1"></div>
<div class="child-2"></div>
<div class="child-3"></div>You can also specify an index
a.children(0);
// -> <div class="child-1"></div>You can also use negative numbers
a.children(-1);
// -> <div class="child-3"></div>You can also slice the child array
a.children(1, -1);
// -> <div class="child-2"></div>
// -> <div class="child-3"></div>closest
El Methods / Query / closest.md (top)
Returns the closest parent matching the query.
var farthest;
var parent = el('div', { className : 'closest' }, [
farthest = el('div', { className : 'farthest' })
]);
farthest.closest('.closest');
// -> HTML Element : div.closestfind
El Methods / Query / find.md (top)
Returns an array of matches as a result of executing the query.
var parent = el('div', { className : 'closest' }, [
el('div', { className : 'find' }),
el('div', { className : 'find' })
]);
parent.find('.find');
// -> HTML NodeList : [ div.find, div.find ]hasClass
El Methods / Query / hasClass.md (top)
var node = document.querySelector('.class-name');
el(node).hasClass('class-name');
// -> trueoffset
El Methods / Query / offset.md (top)
Returns the top, left, width, height relative to the body's coordinates. It is an interface for this.node.getBoundingClientRect()
var parent = el('div');
parent.appendTo(document.body);
parent.offset();
/* -> {
height : [Number],
left : [Number],
top : [Number],
width : [Number]
}
*/parent
El Methods / Query / parent.md (top)
If the node has a parent, it will return it's parent. Otherwise, it will return false
var child = el('div');
child.parent();
// -> false
child.appendTo(document.body);
child.parent();
// -> HTML Element : document.bodyparents
El Methods / Query / parents.md (top)
Returns an array of parents, from first to last.
var child;
el('div', { className : 'parent-1' }, [
el('div', { className : 'parent-2' }, [
child = el('div', { className : 'parent-3 '})
])
]);
child.parents();
// -> [Array]parentsUntil
El Methods / Query / parentsUntil.md (top)
Takes a predicate as an argument and returns the first truthy match.
div.parentsUntil(function (p) { return p.tagName === 'h1' });scrollWidth
El Methods / Query / scrollWidth.md (top)
Returns the scrollWidth property of a node.
node.scrollWidth();
// -> Numbersiblings
El Methods / Query / siblings.md (top)
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;
el('div', { className : 'parent-1' }, [
selected = el('div', { className : 'sibling-1' }),
el('div', { className : 'sibling-2' }),
el('div', { className : 'sibling-3' }),
el('div', { className : 'sibling-4' })
]);
selected.siblings();<div class="siblings-1"></div>
<div class="siblings-2"></div>
<div class="siblings-3"></div>
<div class="siblings-4"></div>textNodes
El Methods / Query / textNodes.md (top)
Returns all the Text Nodes which are a child of a selected node.
var selected = el('div', { className : 'parent-1' }, ['text node']);
selected.textNodes();
// -> [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................................... ✅8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago