Commit 47dc90c6 authored by Mohammed Niyas's avatar Mohammed Niyas

added es6 modules

parent d1e458aa
let version = "0.0.10";
/*JS modules are imported here.*/
import * as url from "./lib/url.js"
export {csv} from "./lib/csv.js"
export {style, styles} from "./lib/style.js"
export {download} from "./lib/download.js"
export {wrap} from "./lib/wrap.js"
export {zoom} from "./lib/zoom.js"
import * as network from "./lib/chart/network.js"
export {version, url, network}
export {unpack} from './lib/chart/unpack.js'
export {map} from './lib/chart/map.js'
export {url}
/*jQuery modules are imported here*/
import {dispatch} from "./lib/jquery/dispatch.js"
import {findall, notall, getSize} from './lib/jquery/start.js'
import {addClass, removeClass, toggleClass, hasClass} from './lib/jquery/svgdom.js'
import {aspect} from './lib/jquery/aspect.js'
import {urlfilter} from './lib/jquery/urlfilter.js'
import {search} from './lib/jquery/search.js'
import {highlight} from './lib/jquery/highlight.js'
import {panzoom} from './lib/jquery/panzoom.js'
import {reveal} from './lib/jquery/reveal.js'
import {template} from './lib/jquery/template.js'
import {doodle} from './lib/jquery/doodle.js'
if (typeof jQuery != 'undefined') {
jQuery.extend(jQuery.fn, {
dispatch: dispatch,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
hasClass: hasClass,
findall: findall,
notall: notall,
getSize: getSize,
aspect: aspect,
urlfilter: urlfilter,
search: search,
highlight: highlight,
panzoom: panzoom,
reveal: reveal,
template: template,
doodle: doodle
});
}
\ No newline at end of file
G.map = function() {
import {unpack} from './unpack.js'
let map = function() {
var shape, // GeoJSON shape
width,
height,
force,
projection,
path,
unpack,
......@@ -107,7 +109,7 @@ G.map = function() {
.remove()
if (!unpack) {
unpack = G.unpack()
unpack = unpack()
.width(width)
.height(height)
}
......@@ -140,3 +142,5 @@ G.map = function() {
.gravity(0.01)
)
}
export {map}
\ No newline at end of file
var _G_network = G.network = {}
/*var _G_network = G.network = {}*/
var _G_network = {}
// A k-partite graph has k sets of nodes.
// Each node represents a unique value for one key.
// For example, with cricket data, I could use ['Player', 'Country', 'Ground'] as the keys.
// Each unique player, country or ground becomes a distinct node.
// Each node has a key, value, id=key|value, rows=[indices into data]
// Each link has a source, target, rows=[indices into data]
_G_network.kpartite = function() {
let kpartite = function() {
var nodes = [],
links = [],
self = {nodes: nodes, links: links},
......@@ -167,7 +167,7 @@ G.network.relation()
.add([source], [target]) // Connect each source to each target
.remove([], [])
*/
_G_network.relation = function() {
let relation = function() {
var nodes = [],
links = [],
max_id = 0,
......@@ -194,8 +194,8 @@ _G_network.relation = function() {
}
self.add = function(source, target) {
if (!_is_array(source)) source = [source]
if (!_is_array(target)) target = [target]
if (!Array.isArray(source)) source = [source]
if (!Array.isArray(target)) target = [target]
var source_length = source.length,
target_length = target.length,
......@@ -229,7 +229,7 @@ _G_network.relation = function() {
// The following node attributes are reserved:
// By D3: index, x, y, px, py, fixed, weight
// By G: selected
_G_network.force = function() {
let force = function() {
var data, // G.network data structure with .nodes and .links
node_filter = {}, // Node filter function
link_filter = {}, // Link filter function
......@@ -504,7 +504,7 @@ _G_network.force = function() {
4 // and a 4px (optional) padding
))
*/
_G_network.collide = {
var collide = {
circle: function(radius_function, padding) {
padding = padding || 0
return function(node) {
......@@ -532,7 +532,7 @@ _G_network.collide = {
}
}
}
export {kpartite, relation, force, collide}
// TODO: arrows (how to do bi-directional relations?)
// - http://www.jansipke.nl/creating-network-diagrams-with-d3-js/
// - http://jsfiddle.net/tk7Wv/2/
// - http://jsfiddle.net/tk7Wv/2/
\ No newline at end of file
G.unpack = function() {
import * as network from './network.js'
let unpack = function() {
var force,
width,
height
......@@ -21,7 +22,7 @@ G.unpack = function() {
}
}
var collide = G.network.collide.circle(function(node) { return node.r })
var collide = network.collide.circle(function(node) { return node.r })
force
.size([width, height])
.nodes(nodes)
......@@ -45,3 +46,4 @@ G.unpack = function() {
.gravity(0.01)
)
}
export {unpack}
\ No newline at end of file
......@@ -12,7 +12,7 @@
])
*/
G.csv = function(array, dialect) {
let csv = function(array, dialect) {
dialect = dialect || {}
var lineterminator = dialect.lineterminator || '\n',
delimiter = dialect.delimiter || ',',
......@@ -31,7 +31,7 @@ G.csv = function(array, dialect) {
if (!nrows) {
// Ignore empty arrays
}
else if (_is_array(array[0])) {
else if (Array.isArray(array[0])) {
// Array of arrays
for (; row < nrows; row++) {
row_data = array[row]
......@@ -71,3 +71,5 @@ G.csv = function(array, dialect) {
return output.join('')
}
export {csv}
\ No newline at end of file
......@@ -16,7 +16,7 @@
See [Drawing DOM objects into a canvas](https://developer.mozilla.org/en/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas)
to understand how PNG download works.
*/
import {csv} from './csv.js'
function getStyle(sheet, output) {
var i = -1, rule, nrules
if (!sheet.cssRules) return
......@@ -33,7 +33,7 @@ function getStyle(sheet, output) {
}
function download_blob(blob, options) {
var nav = global.navigator,
var nav = navigator,
url, $a
// IE >= 10 natively support downloading a blob
......@@ -58,16 +58,17 @@ function download_blob(blob, options) {
// Ensure that the SVG element has xmlns specified
// This is required to create valid blobs, without with img.onload for png is not triggered
function svgize(node) {
var _xmlns = 'http://www.w3.org/2000/xmlns/'
if (!node.hasAttributeNS(_xmlns, 'xmlns'))
node.setAttributeNS(_xmlns, 'xmlns', _xmlns_svg)
node.setAttributeNS(_xmlns, 'xmlns', 'http://www.w3.org/2000/svg')
if (!node.hasAttributeNS(_xmlns, 'xmlns:xlink'))
node.setAttributeNS(_xmlns, 'xmlns:xlink', _xmlns_xlink)
node.setAttributeNS(_xmlns, 'xmlns:xlink', 'http://www.w3.org/1999/xlink')
return node
}
G.download = function(options) {
let download = function(options) {
var mime = options.mime,
source = options.source,
i = -1,
......@@ -82,7 +83,7 @@ G.download = function(options) {
source = (new XMLSerializer()).serializeToString(node)
if (!options.nostyle) {
sheets = global.document.styleSheets || []
sheets = document.styleSheets || []
style = []
nsheets = sheets.length
i = -1; while (++i < nsheets)
......@@ -138,7 +139,7 @@ G.download = function(options) {
else if (options.csv) {
mime = mime || 'text/csv;charset-utf-8'
source = G.csv(options.csv)
source = csv(options.csv)
download_blob(new Blob([source], {type : mime}), options)
}
......@@ -147,3 +148,5 @@ G.download = function(options) {
download_blob(new Blob([options.source], {type : mime}), options)
}
}
export {download}
\ No newline at end of file
......@@ -14,8 +14,8 @@ Set the aspect ratio of the selector based on the options.
Note: Shawn Allen has an alternate mechanism at
https://github.com/shawnbot/svg-aspect-ratio/blob/master/svg-autosize.js
*/
$.fn.aspect = function(options) {
import {getSize, findall} from './start.js'
let aspect = function(options) {
options = options || {}
var resize,
self = this,
......@@ -48,3 +48,4 @@ $.fn.aspect = function(options) {
resize()
return self
}
export {aspect}
\ No newline at end of file
......@@ -32,7 +32,7 @@ try {
return evt;
};
}
$.fn.dispatch = function(name, options) {
var dispatch = function(name, options) {
return this.each(function() {
this.dispatchEvent(_event(name, $.extend({
bubbles: true,
......@@ -40,3 +40,5 @@ $.fn.dispatch = function(name, options) {
}, options)));
});
};
export {dispatch}
\ No newline at end of file
/* Animates a set of paths */
$.fn.doodle = function(options) {
let doodle = function(options) {
options = options || {}
// By default, options.fill is true
......@@ -49,9 +49,9 @@ $.fn.doodle = function(options) {
start_pos = pos
}
// Cancel ticks as well as loop
request_id = global.cancelAnimationFrame(request_id)
request_id = cancelAnimationFrame(request_id)
if (timeout_id)
timeout_id = global.clearTimeout(timeout_id)
timeout_id = clearTimeout(timeout_id)
})
.on('start.g.doodle', function(e, position) {
if (request_id)
......@@ -132,10 +132,12 @@ $.fn.doodle = function(options) {
function tick() {
if (draw())
request_id = global.requestAnimationFrame(tick)
request_id = requestAnimationFrame(tick)
}
if (typeof options.start === 'undefined' || options.start)
self.last().trigger('start.g.doodle', [0])
return self
}
export {doodle}
\ No newline at end of file
$.fn.highlight = function(options) {
import {findall, notall} from './start.js'
let highlight = function(options) {
options = options || {}
var self = this,
attr = options.attr || 'data-highlight',
......@@ -86,3 +87,4 @@ $.fn.highlight = function(options) {
return self
};
export {highlight}
\ No newline at end of file
$.fn.panzoom = function(options) {
let panzoom = function(options) {
options = options || {}
var self = this,
attr = options.attr || 'data-zoom',
......@@ -20,7 +20,7 @@ $.fn.panzoom = function(options) {
function clearZoom() {
$target.each(function() {
var newbox = $(this).data(viewBox)
if (global.d3)
if (d3)
d3.select(this).transition().duration(100).attr(viewBox, newbox)
else
this.setAttribute(viewBox, newbox)
......@@ -40,7 +40,7 @@ $.fn.panzoom = function(options) {
y = e.pageY - offset.top,
newbox = [x, y, width / zoom, height / zoom].join(' ')
if (global.d3 && !e.type.match(/move/)) {
if (d3 && !e.type.match(/move/)) {
$this.data(animdata, true)
d3.select(this)
.transition()
......@@ -69,3 +69,4 @@ $.fn.panzoom = function(options) {
return self
}
export {panzoom}
\ No newline at end of file
$.fn.reveal = function(options) {
let reveal = function(options) {
options = options || {}
var self = this,
attr = options.attr || 'data-reveal',
......@@ -115,3 +115,4 @@ $.fn.reveal = function(options) {
})
})
}
export {reveal}
\ No newline at end of file
......@@ -9,7 +9,7 @@ var _G_search_transform = function(s) {
// data- attribute to store granular search results
_G_search_results = 'search-results'
$.fn.search = function(options) {
let search = function(options) {
options = options || {}
var self = this,
attr = options.attr || 'data-search',
......@@ -98,3 +98,4 @@ $.fn.search = function(options) {
run_search(e)
})
}
export {search}
\ No newline at end of file
// jQuery plugins are added to this folder
// Include them only if jQuery exists
var $ = global.jQuery,
jQuery = $,
// Return all values that match the selector
// AMONG and UNDER the node
findall = function (node, selector) {
return node.filter(selector).add(node.find(selector))
},
// Return all values that DO NOT match the selector
// AMONG and UNDER the node. Complement of findall
notall = function (node, selector) {
return node.not(selector).add(node.not(selector))
}
// Return the {width:..., height:...} of the node
getSize = function(node) {
// Ideally, this is just one line:
// return node.getBoundingClientRect()
// But see http://stackoverflow.com/q/18153989/100904
// and https://bugzilla.mozilla.org/show_bug.cgi?id=530985
// If the contents exceed the bounds of an element,
// getBoundingClientRect() failes in Firefox.
// So set display:block, get $().width(), and unset display:block
var $node = $(node),
old_display = $node.css('display'),
result = {}
if (old_display != 'block')
$node.css('display', 'block')
result.width = $node.width()
result.height = $node.height()
if (old_display != 'block')
$node.css('display', old_display)
return result
}
if ($) {
/*var $ = jQuery,
jQuery = $;
*/
// Return all values that match the selector
// AMONG and UNDER the node
var findall = function (node, selector) {
return node.filter(selector).add(node.find(selector))
};
// Return all values that DO NOT match the selector
// AMONG and UNDER the node. Complement of findall
var notall = function (node, selector) {
return node.not(selector).add(node.not(selector))
};
// Return the {width:..., height:...} of the node
var getSize = function(node) {
// Ideally, this is just one line:
// return node.getBoundingClientRect()
// But see http://stackoverflow.com/q/18153989/100904
// and https://bugzilla.mozilla.org/show_bug.cgi?id=530985
// If the contents exceed the bounds of an element,
// getBoundingClientRect() failes in Firefox.
// So set display:block, get $().width(), and unset display:block
var $node = $(node),
old_display = $node.css('display'),
result = {}
if (old_display != 'block')
$node.css('display', 'block')
result.width = $node.width()
result.height = $node.height()
if (old_display != 'block')
$node.css('display', old_display)
return result
};
export {findall, notall, getSize}
......@@ -23,7 +23,7 @@ var rclass = /[\t\r\n\f]/g,
// Used for splitting on whitespace
core_rnotwhite = /\S+/g;
$.fn.addClass = function( value ) {
let addClass = function( value ) {
var classes, elem, cur, clazz, j,
hasBaseVal, cls,
i = 0,
......@@ -71,7 +71,7 @@ $.fn.addClass = function( value ) {
};
$.fn.removeClass = function( value ) {
let removeClass = function( value ) {
var classes, elem, cur, clazz, j,
hasBaseVal, cls,
i = 0,
......@@ -117,7 +117,7 @@ $.fn.removeClass = function( value ) {
};
$.fn.toggleClass = function( value, stateVal ) {
let toggleClass = function( value, stateVal ) {
var type = typeof value;
if ( typeof stateVal === "boolean" && type === "string" ) {
......@@ -171,7 +171,7 @@ $.fn.toggleClass = function( value, stateVal ) {
};
$.fn.hasClass = function( selector ) {
let hasClass = function( selector ) {
var className = " " + selector + " ",
cls,
i = 0,
......@@ -185,3 +185,4 @@ $.fn.hasClass = function( selector ) {
return false;
};
export {addClass, removeClass, toggleClass, hasClass}
\ No newline at end of file
......@@ -8,7 +8,7 @@ Requires underscore.js
var _template_fn = 'G.template.fn',
_template_node = 'G.template.node'
$.fn.template = function(data) {
let template = function(data) {
var $result
// Pre-create the template rendering function
this.each(function() {
......@@ -37,3 +37,4 @@ $.fn.template = function(data) {
}
return $result
};
export {template}
\ No newline at end of file
$.fn.urlfilter = function(options) {
import {parse} from './../url.js'
var _url_parse_qname = ['searchKey', 'searchList']
let urlfilter = function(options) {
options = options || {}
var self = this,
attr = options.attr || 'href',
......@@ -24,11 +26,12 @@ $.fn.urlfilter = function(options) {
'#' location.hash
anything else $(target).data('src')
*/
var $this = $(this),
toggle = $this.data('toggle') || default_toggle,
target = $this.data('target') || default_target,
href = $this.attr(attr),
q = G.url.parse(href)[_url_parse_qname[0]],
q = parse(href)[_url_parse_qname[0]],
trigger = {type: 'loaded.g.urlfilter', q: q},
url, key
......@@ -38,7 +41,7 @@ $.fn.urlfilter = function(options) {
q[key] = null
function target_url(url) {
return G.url.parse(url)
return parse(url)
.join(href, {query: false, hash: false})
.update(q, toggle)
}
......@@ -67,3 +70,5 @@ $.fn.urlfilter = function(options) {
}
})
}
export {urlfilter}
\ No newline at end of file
......@@ -2,15 +2,15 @@
// e.g. G.style(/^\.item$/i) returns last rule matching '.item'
// e.g. G.style('.item') returns last rule exactly matching '.item'
G.style = function(selector) {
let style = function(selector) {
var styles = G.styles(selector)
return styles[styles.length - 1]
}
// e.g. G.styles(/^\.item$/i) returns all rules matching '.item'
// e.g. G.styles('.item') returns all rules exactly matching '.item'
G.styles = function(selector) {
var stylesheets = global.document.styleSheets,
let styles = function(selector) {
var stylesheets = document.styleSheets,
matches = [],
string_selector = typeof selector == 'string'
for (var i=0, stylesheet; stylesheet=stylesheets[i]; i++)
......@@ -21,3 +21,5 @@ G.styles = function(selector) {
}
return matches
}
export {style, styles}
\ No newline at end of file
......@@ -17,7 +17,7 @@
- Set textContent to empty a node
*/
G.wrap = function(node) {
let wrap = function(node) {
var text = node.textContent,
width = +node.getAttributeNS(null, 'width') || node.getComputedTextLength(),
height = +node.getAttributeNS(null, 'height'),
......@@ -45,7 +45,7 @@ G.wrap = function(node) {
node.textContent = ''
function new_tspan() {
var tspan = global.document.createElementNS(_xmlns_svg, 'tspan')
var tspan = document.createElementNS('http://www.w3.org/2000/svg', 'tspan')
tspan.setAttributeNS(null, 'x', x)
tspan.setAttributeNS(null, 'y', y)
if (dx) tspan.setAttributeNS(null, 'dx', dx)
......@@ -78,3 +78,5 @@ G.wrap = function(node) {
}
return node
}
export {wrap}
\ No newline at end of file
G.zoom = function(options) {
let zoom = function(options) {
options = options || {}
var selector = options.selector,
speed = options.speed || 50,
......@@ -73,3 +73,5 @@ G.zoom = function(options) {
return self
}
export {zoom}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment