fdom
A set of DOM utilities, which were first created in
cog but have been extracted as cog
is more a JS language toolset, and fdom
is it's DOM counterpart.
As per cog
it is designed to be used as in a cherry-picking way rather
than by simply requiring fdom
as a whole module.
Modules
The following is a list of modules that fdom
provides. Examples demonstrate
how to require
and use them in your code.
append
var append = ;
append.to(target, => child) => child
Append the specified child
element to the target
element using the
familiar appendChild
method of the target.
var append = ;var crel = ; // create a list container, appending it to the document bodyvar list = append; // create items in the list for each of the fruits in the list'apple' 'banana' 'pear' 'orange' ;
attrib(name, value) => fn(el)
Set an attribute value for an element.
var attrib = ;var qsa = ; // change all elements with a data-name="Fred" to "Bob";
classtweak(operations, => el)
A functional helper for making classList modifications to elements, supporting partial application.
var tweak = ;var qsa = ; // add a class to the document body; // remove the class; // toggle a class (! operator also works); // apply an active class to all matching section tags;
css
f(el) => fn(valueKeyPair)
The css
function can be used to pass through keys and values that should be
applied to a particular dom element.
var css = ; 'margin' 0 'backgroundColor' 'red' ;
get-attributes
f(regex, => el) => { attr1: val, attr2: val }
This is a simple but useful attribute extractor that can be used to pull
attributes that match a particular pattern from an element. The primary
use case is around custom attributes (such as those used in
AngularJS) but could also be used to extract
your own dataset
attribute collection from an element.
/*imagine we have the following html: <html><body><video id="test" rtc-remote="customer" rtc-stream="main"></video></body></html>*/ var getAttributes = ;var el = document; console;// --> { remote: 'customer', stream: 'main' }
loader(urls, opts?, callback)
This is a simple script loader that will load the urls specified and trigger the callback once all those scripts have been loaded (or loading has failed in one instance).
var loader = ;var scripts = '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js' '//cdnjs.cloudflare.com/ajax/libs/chainvas/2.1/chainvas.js'; ;
meta(regex?)
Find all the <meta>
tags that have a name attribute and collate as a
simple JS objects whether the content of the tag is the value.
/*given the following html: <html><head><meta name="foo" content="bar"><meta name="app" content="wonderful"><meta name="fdom-name" content="fred"><meta name="fdom-title" content="sir"></head><body></body></html>*/ var meta = ; // get all the attributesconsole;// --> { foo: 'bar', app: 'wonderful', 'fdom-name': 'fred', 'fdom-title': 'sir' } // get only attributes matching a regexconsole;// --> { foo: 'bar' } // get capture group 1 matchedconsole;// --> { name: 'fred', title: 'sir' }
next
f(name, el) => fn
The next
function is used to pull event data from el
for the event
named name
. This can be useful when combined with a
pull-stream to capture
a stream of events from a DOM elements.
var pull = ;var next = ; ;
on
f(name, => el, => cb)
The on
helper assists with working with DOM events and being able to map
those to a node callback style function in the form:
{}
When the event is triggered by the el
the callback is fired passing
a null value to the err
argument.
var async = ;var crel = ;var waitLoad = 'load';var scripts = '//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js' '//cdnjs.cloudflare.com/ajax/libs/chainvas/2.1/chainvas.js'; // create the script elementsscripts = scripts async;
qsa(selector, scope?)
This function is used to get the results of the querySelectorAll output in the fastest possible way. This code is very much based on the implementation in zepto, but perhaps not quite as terse.
var qsa = ;
raf(callback)
Request animation frame helper.
var raf = ; { console; ; // go again} ;
remove(el)
Remove the specified target element from the DOM.
License(s)
MIT
Copyright (c) 2014 Damon Oehlman damon.oehlman@gmail.com
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.