npm install chop-jsChop.JS
====
A Super Light-Weight JavaScript Framework
Browser support
===============
ChopJS supports most major modern browsers, however, for Internet Explorer, only IE9+ is supported.
Usage
=====
Put the following code at the bottom of body tag:
- The ch-main attribute indicates the entry point/script of the web page.
ChopJS Modules
==============
See module page
APIs - HTML attributes
===========
ch-init
-------
Initializes data sources. E.g. ch-init="list = []; msg = {from: 'a', to: 'b'}"
ch-use
----------
Loads Chop.js modules. E.g.: ch-use="event; string; local/module"
ch-view
-------
Sets chop.js view.
ch-keypress, ch-keydown, ch-click, ch-dbclick, ch-change, ch-mouseover, ch-mouseenter, ch-mouseout, ch-mouseleave, ch-mousemove, ch-mouseup, ch-mousedown, ch-mousewheel, ch-drag, ch-dragstart, ch-dragend, ch-dragover, ch-dragenter, ch-drop
--------------------------------------------
Adds event listener. Use $$event for event parameter. To access "data source", use {{sourceName}}. Filter can also be used in data-source expression, e.g. {{users | filter: superUserFilter}}.
ch-source
---------
Defines/adds data sources.
To use inline data source, the DOM element then has to have an ID. E.g.:
~~~html
ch-inline
---------
Turns the enclosed HTML element into an inline chop.js template, and renders the
template according the value chop.js expression.
Each ch-inline element __has to__ have an id.
APIs - $ch
==========
$ch.find(query [, context])
-------------------------------
Returns an HTML element in the form of a chop.js element object. If no elements
found, returns undefined.
context could be an HTML element. E.g. $ch.find('#btn', $ch.find('#context').el).
$ch.findAll(query [, context])
----------------------------------
Returns an chop.js element array that contains all the found elements. If no
elements found, returns an emptry array.
context could be an HTML element. E.g. $ch.findAll('.btn', $ch.find('#context').el).
$ch.chopEl(DOMElement)
------------------------
Converts a DOM element into Chop.js element object, and returns the Chop.js
element object.
DOMElement can be either a DOM element or an element string.
$ch.element(args)
-------------------
Alias function to $ch.chopEl.
$ch.source(source, data)
----------------------------
If only source provided, returns the value of source. Otherwise, sets the value of source to data.
$ch.view(param)
-----------------
Creates and returns a chop.js view object. If no param provided, returns false.
param should at least contains an html property, which can be either
a value or a function with return value. The html represents the HTML of
the chop.js view.
To manually render a view, call render().
$ch.template(template, data)
--------------------------------
Returns a processed string against the template. If no data provided, returns the content of template.
Use type='text/template' to define a template in script elements. Use {{something}} to indicate the place to be processed.
data should be in the form of an object.
$ch.http(url, param)
---------------
Performs an AJAX request.
url: the target URL of the AJAX call.
The object param contains:
- method: HTTP verb (get, post, put, delete)
- header: HTTP request headers to be set in the form of an object (e.g. {'header1': 'value1', 'header2': 'value2'})
- async: asynchronous, default: true (true or false)
- responseType: the response type of the AJAX request
- data: data to be sent in the form of an object
- done: the callback function for async AJAX
- cache: indicates if the AJAX request should be cached. Default false
If async is false, returns the returned AJAX object.
$ch.jsonp(url, callback)
----------------------------
Performs a JSONP request.
url should be in the format of: http://example.com/data.json?jsonp={callback}.
callback is a function and takes a data parameter refers to the loaded JSON.
$ch.define(name[, require], function)
------------------------------
Defines a chop.js module.
- name: the name of the module. __Has to be same with filename, but without extension name (i.e. .js)__
- require: [__optional__] the modules to be synchronously required.
- function: the function of the module. The return value will be stored in $ch.module.module_name.
Each customized module _HAS TO BE_ packed in a module folder.
$ch.module(module)
--------------------
Returns the returned data of module.
$ch.use(module, useLoader[, callback])
---------------------------------
Uses/loads a chop.js module, and returns the returned value of module.
- module: chop.js module name. If multiple modules, then in the form of an array. If a particular version is needed, Use @ to indicate. e.g. $ch.require(['ui@0.2', 'layout']).
For details on module versions, see jsDelivr and search for modules by adding chopjs- before modules' names. E.g. to search event, type chopjs-event.
- useLoader: [__Optional__] either true or false to define if to use
Chop.js online module loader. Default: true.
- callback: if callback presented, load module asynchronously and then fire callback. The parameters to callback are the returned value of each module.
$ch.readFile(src[, callback])
---------------
Reads and returns the content of local file src. If callback presented, read the file asynchronously and fire callback after loading.
$ch.each(obj, callback)
------------------------
Iterates obj call callback. Parameters to callback:
- for array: currentItem, index, obj
- for object: key, value, index, obj
$ch.filter(obj, expression)
-----------------------------
Filters and returns the array in obj according to expression.
expression is a function which takes a parameter representing obj and returns either true or false.
$ch.deserialize(formStr)
--------------------------
Returns an object deserialized from formStr.
APIs - chop.js element
===================
css(style, value)
-------------------------
Sets CSS style. If no parameters, returns CSS text.
html(html)
------------
Sets inner HTML into html. If no html provided, returns inner HTML.
content(html)
----------------
Sets text content to html. If no html presented, returns text content.
append(html)
--------------
Appends html.
prepend(html)
---------------
Prepends html.
appendChild(HTMLElement)
-------------------
Appends HTMLElement as child.
prependChild(HTMLElement)
-----------------------
Prepends HTMLElement as child.
scrollTop(value)
-------------------
If no value presented, set the element's scrollTop to value. Otherwise, returns current scrollTop.
scrollLeft(value)
-------------------
If no value presented, set the element's scrollLeft to value. Otherwise, returns current scrollLeft.
offset()
---------
Returns the offset properties of the element in the form of:
~~~javascript
{
left: offsetLeft,
top: offsetTop,
width: offsetWidth,
height: offsetHeight,
parent: offsetParent
}
~~~
get(property)
----------------
Returns property value of the element.
set(property, value)
----------------
Sets property of the element to value.
addClass(class)
-----------------
Adds class.
removeClass(class)
-------------------
Removes class.
toggleClass(class)
-----------------
Toggles class.
submit()
--------------
Submits the form element, otherwise returns false.
animate(style, options[, callback])
------------------
Performs animation style (in the form of an object) according to options.
options can either be the form of {duration: duration, easing: easing}, or just duration in ms.
If callback presented, fire callback when animation is finished.
val(value)
------------
Sets value to value. If no value provided, returns value.
attr(key, value)
--------------------
Sets attribute key to value. If no parameters, returns all attributes.
hasAttr(key)
----------------
Checks if the element has attribute key.
removeAttr(key)
--------------------
Removes attribute key.
inline(data)
----------------
Renders the inline-tempalte element with object data.
serialize()
---------------
Serializes a form element.
show()
------
Shows the element.
hide()
------
Hides the element.
on(event, callback)
-----------------------
Registers callback to event.
detach(event, callback)
---------------------------
Detaches the subscription of callback on event.
delegate(event, callback, query)
--------------------------------------
Adds callback to all query element on event. Multiple query can present.
E.g.:
~~~javascript
aViewObject.delegate('click', triggerSomething, 'button', 'div.btn');
// all buttons and btn-class divs in 'aViewObject' will fire 'triggersomething'
on click.
~~~
click(callback)
-----------------
Adds event listener on click. If no callback, trigger click event.
keypress(callback)
--------------------
Adds event listener on keypress.
keydown(callback)
-------------------
Adds event listener on keydown.
change(callback)
------------------
Adds event listener on change.
Chop.js global variables
========================
- $ch/$$CHOP -- chop.js main variable.
- $$CHOPEL -- chop.js html element.
- $$CHOPVIEW -- chop.js view.