dataclips 0.0.1

data/app/assets/javascripts/dataclips/dataclips.js.coffee

@@ -0,0 +1,168 @@
+class Dataclips.View extends Backbone.View
+  events:
+    "input input[type=text]": _.debounce (event) ->
+      @filterArgs.set(event.target.name, $.trim(event.target.value))
+
+    "change input.float[type=number]": _.debounce (event) ->
+      value = parseFloat(event.target.value)
+      if _.isNaN(value)
+        @filterArgs.unset(event.target.name)
+      else
+        @filterArgs.set(event.target.name, value)
+
+    "change input.integer[type=number]": _.debounce (event) ->
+      value = parseInt(event.target.value)
+      if _.isNaN(value)
+        @filterArgs.unset(event.target.name)
+      else
+        @filterArgs.set(event.target.name, value)
+
+    "dp.change .input-group": _.debounce (event) ->
+      value = event.date
+      attrName = $(event.target).attr("rel")
+      if value?
+        @filterArgs.set(attrName, value)
+      else
+        @filterArgs.unset(attrName)
+
+  render: ->
+    @filterArgs = new Backbone.Model
+
+    options =
+      enableColumnReorder: false
+      forceFitColumns: true
+
+    dataView = new Slick.Data.DataView()
+    dataView.setFilterArgs(@filterArgs.toJSON())
+
+    @listenTo @filterArgs, "change", (model, data) ->
+      dataView.setFilterArgs(model.attributes)
+      dataView.refresh()
+
+    columns = []
+
+    _.each Dataclips.config.schema, (options, attr) ->
+      formatter = if options.formatter?
+        options.formatter
+      else
+        options.type
+
+      columns.push
+        focusable:      true
+        field:          attr
+        id:             attr
+        name:           Dataclips.config.headers[attr]
+        sortable:       options.sortable?
+        cssClass:       options.type
+        headerCssClass: options.type
+        formatter:      Dataclips.Formatters[formatter]
+        width:          options.width
+
+    grid = new Slick.Grid("#grid", dataView, columns, options)
+
+    # grid.onSelectedRowsChanged.subscribe (e, args) ->
+    #    console.log(grid.getSelectedRows())
+
+    # grid.setSelectionModel(new Slick.RowSelectionModel)
+
+    grid.onSort.subscribe (e, args) ->
+      sortcol = args.sortCol.field
+
+      compareByColumn = (a, b) ->
+        x = a[sortcol] || ""
+        y = b[sortcol] || ""
+        if x is y
+          0
+        else
+          if x > y then 1 else -1
+
+      dataView.sort(compareByColumn, args.sortAsc)
+
+    textFilter = (item, attr, query) ->
+      return true unless query
+      return true if _.isEmpty query.trim()
+      item[attr]?.toLowerCase().indexOf(query.toLowerCase()) != -1
+
+    numericFilter = (item, attr, range) ->
+      value = item[attr]
+      return true if value is undefined
+      if range.from? || range.to?
+        gte = (from) ->
+          return true if from is undefined
+          value >= from
+
+        lte = (to) ->
+          return true if to is undefined
+          value <= to
+
+        gte(range.from) && lte(range.to)
+      else
+        true
+
+    dateFilter = (item, attr, range) ->
+      value = item[attr]
+      return true if value is undefined
+      if range.from? || range.to?
+        gte = (from) ->
+          return true if from is undefined
+          value >= from
+
+        lte = (to) ->
+          return true if to is undefined
+          value <= to
+
+        gte(range.from) && lte(range.to)
+      else
+        true
+
+    exactMatcher = (item, attr, query) ->
+      return true unless query
+      return true if _.isEmpty query.trim()
+      item[attr] is query
+
+    dataView.setFilter (item, args) ->
+      _.all Dataclips.config.schema, (options, attr) ->
+        switch options.type
+          when "text"
+            textFilter(item, attr, args[attr])
+          when "integer", "float", "decimal"
+            numericFilter(item, attr, {
+              from: args["#{attr}_from"],
+              to:   args["#{attr}_to"]
+            })
+          when "datetime", "date"
+            dateFilter(item, attr, {
+              from: args["#{attr}_from"],
+              to:   args["#{attr}_to"]
+            })
+          else
+            true
+
+    dataView.onRowCountChanged.subscribe (e, args) ->
+      grid.updateRowCount()
+      grid.render()
+
+    dataView.onRowsChanged.subscribe (e, args) ->
+      grid.invalidateRows(args.rows)
+      grid.render()
+
+
+    dataView.onPagingInfoChanged.subscribe (e, args) ->
+      $("span.count").text(args.totalRows)
+
+    updateDataView = (data) ->
+      dataView.beginUpdate()
+      dataView.setItems(data)
+      dataView.endUpdate()
+
+    @listenTo @collection, "batchInsert", ->
+      updateDataView(@collection.toJSON())
+
+Dataclips.run = ->
+  collection = new Dataclips.Records
+  collection.url = @config.url
+
+  view = new Dataclips.View(el: "#dataclip", collection: collection)
+
+  view.render()
+  collection.fetchInBatches(@config.params)

data/app/assets/javascripts/dataclips/formatters.js.coffee

@@ -0,0 +1,14 @@
+Dataclips.Formatters =
+  text:      (row, cell, value, columnDef, context) -> value
+  integer:   (row, cell, value, columnDef, context) -> value
+  float:     (row, cell, value, columnDef, context) -> value
+  decimal:   (row, cell, value, columnDef, context) -> value
+  date:      (row, cell, value, columnDef, context) -> value.format('L')
+  time:      (row, cell, value, columnDef, context) -> value.format('h:mm:ss')
+  datetime:  (row, cell, value, columnDef, context) -> value.format('L HH:mm:ss')
+  binary:    (row, cell, value, columnDef, context) -> value
+  boolean:   (row, cell, value, columnDef, context) ->
+    if value is true then "&#9679" else "○"
+
+  email:     (row, cell, value, columnDef, context) ->
+    "<a href='mailto:#{value}'>#{value}</a>"

data/app/assets/javascripts/dataclips/namespace.js.coffee

@@ -0,0 +1 @@
+window.Dataclips = {}

data/app/assets/javascripts/dataclips/record.js.coffee

@@ -0,0 +1,39 @@
+class Dataclips.Record extends Backbone.Model
+  parse: (options) ->
+    attributes = _.reduce options, (memo, value, key) ->
+      memo[key] = switch Dataclips.config.schema[key].type
+        when "datetime", "time", "date"
+          moment(value)
+        else
+          value
+
+      memo
+    , {}
+
+    attributes.id = @cid
+    super(attributes)
+
+
+class Dataclips.Records extends Backbone.Collection
+  model: Dataclips.Record
+  fetchInBatches: (defaultParams = {}) ->
+
+    fetchNextPage = (collection, current_page, total_pages) ->
+      if current_page < total_pages
+        collection.fetch
+          data: _({page: current_page + 1}).extend(defaultParams),
+          remove: false,
+          success: (collection, data) ->
+            collection.trigger "batchInsert", data.orders
+            fetchNextPage(collection, data.page, data.total_pages)
+
+    @fetch
+      data: defaultParams
+      success: (collection, data) ->
+        $("span.total_entries").text(data.total_entries)
+        collection.trigger "batchInsert", data.records
+        fetchNextPage(collection, data.page, data.total_pages)
+      error: (collection, response) ->
+        alert(response.responseText)
+
+  parse: (data) -> data.records

data/app/assets/javascripts/dataclips/slickgrid.js

@@ -0,0 +1,5 @@
+//= require ./slickgrid/jquery.event.drag-2.2
+//= require ./slickgrid/slick.core
+//= require ./slickgrid/slick.grid
+//= require ./slickgrid/slick.dataview
+//= require ./slickgrid/plugins/slick.rowselectionmodel

data/app/assets/javascripts/dataclips/slickgrid/jquery.event.drag-2.2.js

@@ -0,0 +1,402 @@
+/*! 
+ * jquery.event.drag - v 2.2
+ * Copyright (c) 2010 Three Dub Media - http://threedubmedia.com
+ * Open Source MIT License - http://threedubmedia.com/code/license
+ */
+// Created: 2008-06-04 
+// Updated: 2012-05-21
+// REQUIRES: jquery 1.7.x
+
+;(function( $ ){
+
+// add the jquery instance method
+$.fn.drag = function( str, arg, opts ){
+	// figure out the event type
+	var type = typeof str == "string" ? str : "",
+	// figure out the event handler...
+	fn = $.isFunction( str ) ? str : $.isFunction( arg ) ? arg : null;
+	// fix the event type
+	if ( type.indexOf("drag") !== 0 ) 
+		type = "drag"+ type;
+	// were options passed
+	opts = ( str == fn ? arg : opts ) || {};
+	// trigger or bind event handler
+	return fn ? this.bind( type, opts, fn ) : this.trigger( type );
+};
+
+// local refs (increase compression)
+var $event = $.event, 
+$special = $event.special,
+// configure the drag special event 
+drag = $special.drag = {
+	
+	// these are the default settings
+	defaults: {
+		which: 1, // mouse button pressed to start drag sequence
+		distance: 0, // distance dragged before dragstart
+		not: ':input', // selector to suppress dragging on target elements
+		handle: null, // selector to match handle target elements
+		relative: false, // true to use "position", false to use "offset"
+		drop: true, // false to suppress drop events, true or selector to allow
+		click: false // false to suppress click events after dragend (no proxy)
+	},
+	
+	// the key name for stored drag data
+	datakey: "dragdata",
+	
+	// prevent bubbling for better performance
+	noBubble: true,
+	
+	// count bound related events
+	add: function( obj ){ 
+		// read the interaction data
+		var data = $.data( this, drag.datakey ),
+		// read any passed options 
+		opts = obj.data || {};
+		// count another realted event
+		data.related += 1;
+		// extend data options bound with this event
+		// don't iterate "opts" in case it is a node 
+		$.each( drag.defaults, function( key, def ){
+			if ( opts[ key ] !== undefined )
+				data[ key ] = opts[ key ];
+		});
+	},
+	
+	// forget unbound related events
+	remove: function(){
+		$.data( this, drag.datakey ).related -= 1;
+	},
+	
+	// configure interaction, capture settings
+	setup: function(){
+		// check for related events
+		if ( $.data( this, drag.datakey ) ) 
+			return;
+		// initialize the drag data with copied defaults
+		var data = $.extend({ related:0 }, drag.defaults );
+		// store the interaction data
+		$.data( this, drag.datakey, data );
+		// bind the mousedown event, which starts drag interactions
+		$event.add( this, "touchstart mousedown", drag.init, data );
+		// prevent image dragging in IE...
+		if ( this.attachEvent ) 
+			this.attachEvent("ondragstart", drag.dontstart ); 
+	},
+	
+	// destroy configured interaction
+	teardown: function(){
+		var data = $.data( this, drag.datakey ) || {};
+		// check for related events
+		if ( data.related ) 
+			return;
+		// remove the stored data
+		$.removeData( this, drag.datakey );
+		// remove the mousedown event
+		$event.remove( this, "touchstart mousedown", drag.init );
+		// enable text selection
+		drag.textselect( true ); 
+		// un-prevent image dragging in IE...
+		if ( this.detachEvent ) 
+			this.detachEvent("ondragstart", drag.dontstart ); 
+	},
+		
+	// initialize the interaction
+	init: function( event ){ 
+		// sorry, only one touch at a time
+		if ( drag.touched ) 
+			return;
+		// the drag/drop interaction data
+		var dd = event.data, results;
+		// check the which directive
+		if ( event.which != 0 && dd.which > 0 && event.which != dd.which ) 
+			return; 
+		// check for suppressed selector
+		if ( $( event.target ).is( dd.not ) ) 
+			return;
+		// check for handle selector
+		if ( dd.handle && !$( event.target ).closest( dd.handle, event.currentTarget ).length ) 
+			return;
+
+		drag.touched = event.type == 'touchstart' ? this : null;
+		dd.propagates = 1;
+		dd.mousedown = this;
+		dd.interactions = [ drag.interaction( this, dd ) ];
+		dd.target = event.target;
+		dd.pageX = event.pageX;
+		dd.pageY = event.pageY;
+		dd.dragging = null;
+		// handle draginit event... 
+		results = drag.hijack( event, "draginit", dd );
+		// early cancel
+		if ( !dd.propagates )
+			return;
+		// flatten the result set
+		results = drag.flatten( results );
+		// insert new interaction elements
+		if ( results && results.length ){
+			dd.interactions = [];
+			$.each( results, function(){
+				dd.interactions.push( drag.interaction( this, dd ) );
+			});
+		}
+		// remember how many interactions are propagating
+		dd.propagates = dd.interactions.length;
+		// locate and init the drop targets
+		if ( dd.drop !== false && $special.drop ) 
+			$special.drop.handler( event, dd );
+		// disable text selection
+		drag.textselect( false ); 
+		// bind additional events...
+		if ( drag.touched )
+			$event.add( drag.touched, "touchmove touchend", drag.handler, dd );
+		else 
+			$event.add( document, "mousemove mouseup", drag.handler, dd );
+		// helps prevent text selection or scrolling
+		if ( !drag.touched || dd.live )
+			return false;
+	},	
+	
+	// returns an interaction object
+	interaction: function( elem, dd ){
+		var offset = $( elem )[ dd.relative ? "position" : "offset" ]() || { top:0, left:0 };
+		return {
+			drag: elem, 
+			callback: new drag.callback(), 
+			droppable: [],
+			offset: offset
+		};
+	},
+	
+	// handle drag-releatd DOM events
+	handler: function( event ){ 
+		// read the data before hijacking anything
+		var dd = event.data;	
+		// handle various events
+		switch ( event.type ){
+			// mousemove, check distance, start dragging
+			case !dd.dragging && 'touchmove': 
+				event.preventDefault();
+			case !dd.dragging && 'mousemove':
+				//  drag tolerance, x≤ + y≤ = distance≤
+				if ( Math.pow(  event.pageX-dd.pageX, 2 ) + Math.pow(  event.pageY-dd.pageY, 2 ) < Math.pow( dd.distance, 2 ) ) 
+					break; // distance tolerance not reached
+				event.target = dd.target; // force target from "mousedown" event (fix distance issue)
+				drag.hijack( event, "dragstart", dd ); // trigger "dragstart"
+				if ( dd.propagates ) // "dragstart" not rejected
+					dd.dragging = true; // activate interaction
+			// mousemove, dragging
+			case 'touchmove':
+				event.preventDefault();
+			case 'mousemove':
+				if ( dd.dragging ){
+					// trigger "drag"		
+					drag.hijack( event, "drag", dd );
+					if ( dd.propagates ){
+						// manage drop events
+						if ( dd.drop !== false && $special.drop )
+							$special.drop.handler( event, dd ); // "dropstart", "dropend"							
+						break; // "drag" not rejected, stop		
+					}
+					event.type = "mouseup"; // helps "drop" handler behave
+				}
+			// mouseup, stop dragging
+			case 'touchend': 
+			case 'mouseup': 
+			default:
+				if ( drag.touched )
+					$event.remove( drag.touched, "touchmove touchend", drag.handler ); // remove touch events
+				else 
+					$event.remove( document, "mousemove mouseup", drag.handler ); // remove page events	
+				if ( dd.dragging ){
+					if ( dd.drop !== false && $special.drop )
+						$special.drop.handler( event, dd ); // "drop"
+					drag.hijack( event, "dragend", dd ); // trigger "dragend"	
+				}
+				drag.textselect( true ); // enable text selection
+				// if suppressing click events...
+				if ( dd.click === false && dd.dragging )
+					$.data( dd.mousedown, "suppress.click", new Date().getTime() + 5 );
+				dd.dragging = drag.touched = false; // deactivate element	
+				break;
+		}
+	},
+		
+	// re-use event object for custom events
+	hijack: function( event, type, dd, x, elem ){
+		// not configured
+		if ( !dd ) 
+			return;
+		// remember the original event and type
+		var orig = { event:event.originalEvent, type:event.type },
+		// is the event drag related or drog related?
+		mode = type.indexOf("drop") ? "drag" : "drop",
+		// iteration vars
+		result, i = x || 0, ia, $elems, callback,
+		len = !isNaN( x ) ? x : dd.interactions.length;
+		// modify the event type
+		event.type = type;
+		// remove the original event
+		event.originalEvent = null;
+		// initialize the results
+		dd.results = [];
+		// handle each interacted element
+		do if ( ia = dd.interactions[ i ] ){
+			// validate the interaction
+			if ( type !== "dragend" && ia.cancelled )
+				continue;
+			// set the dragdrop properties on the event object
+			callback = drag.properties( event, dd, ia );
+			// prepare for more results
+			ia.results = [];
+			// handle each element
+			$( elem || ia[ mode ] || dd.droppable ).each(function( p, subject ){
+				// identify drag or drop targets individually
+				callback.target = subject;
+				// force propagtion of the custom event
+				event.isPropagationStopped = function(){ return false; };
+				// handle the event	
+				result = subject ? $event.dispatch.call( subject, event, callback ) : null;
+				// stop the drag interaction for this element
+				if ( result === false ){
+					if ( mode == "drag" ){
+						ia.cancelled = true;
+						dd.propagates -= 1;
+					}
+					if ( type == "drop" ){
+						ia[ mode ][p] = null;
+					}
+				}
+				// assign any dropinit elements
+				else if ( type == "dropinit" )
+					ia.droppable.push( drag.element( result ) || subject );
+				// accept a returned proxy element 
+				if ( type == "dragstart" )
+					ia.proxy = $( drag.element( result ) || ia.drag )[0];
+				// remember this result	
+				ia.results.push( result );
+				// forget the event result, for recycling
+				delete event.result;
+				// break on cancelled handler
+				if ( type !== "dropinit" )
+					return result;
+			});	
+			// flatten the results	
+			dd.results[ i ] = drag.flatten( ia.results );	
+			// accept a set of valid drop targets
+			if ( type == "dropinit" )
+				ia.droppable = drag.flatten( ia.droppable );
+			// locate drop targets
+			if ( type == "dragstart" && !ia.cancelled )
+				callback.update(); 
+		}
+		while ( ++i < len )
+		// restore the original event & type
+		event.type = orig.type;
+		event.originalEvent = orig.event;
+		// return all handler results
+		return drag.flatten( dd.results );
+	},
+		
+	// extend the callback object with drag/drop properties...
+	properties: function( event, dd, ia ){		
+		var obj = ia.callback;
+		// elements
+		obj.drag = ia.drag;
+		obj.proxy = ia.proxy || ia.drag;
+		// starting mouse position
+		obj.startX = dd.pageX;
+		obj.startY = dd.pageY;
+		// current distance dragged
+		obj.deltaX = event.pageX - dd.pageX;
+		obj.deltaY = event.pageY - dd.pageY;
+		// original element position
+		obj.originalX = ia.offset.left;
+		obj.originalY = ia.offset.top;
+		// adjusted element position
+		obj.offsetX = obj.originalX + obj.deltaX; 
+		obj.offsetY = obj.originalY + obj.deltaY;
+		// assign the drop targets information
+		obj.drop = drag.flatten( ( ia.drop || [] ).slice() );
+		obj.available = drag.flatten( ( ia.droppable || [] ).slice() );
+		return obj;	
+	},
+	
+	// determine is the argument is an element or jquery instance
+	element: function( arg ){
+		if ( arg && ( arg.jquery || arg.nodeType == 1 ) )
+			return arg;
+	},
+	
+	// flatten nested jquery objects and arrays into a single dimension array
+	flatten: function( arr ){
+		return $.map( arr, function( member ){
+			return member && member.jquery ? $.makeArray( member ) : 
+				member && member.length ? drag.flatten( member ) : member;
+		});
+	},
+	
+	// toggles text selection attributes ON (true) or OFF (false)
+	textselect: function( bool ){ 
+		$( document )[ bool ? "unbind" : "bind" ]("selectstart", drag.dontstart )
+			.css("MozUserSelect", bool ? "" : "none" );
+		// .attr("unselectable", bool ? "off" : "on" )
+		document.unselectable = bool ? "off" : "on"; 
+	},
+	
+	// suppress "selectstart" and "ondragstart" events
+	dontstart: function(){ 
+		return false; 
+	},
+	
+	// a callback instance contructor
+	callback: function(){}
+	
+};
+
+// callback methods
+drag.callback.prototype = {
+	update: function(){
+		if ( $special.drop && this.available.length )
+			$.each( this.available, function( i ){
+				$special.drop.locate( this, i );
+			});
+	}
+};
+
+// patch $.event.$dispatch to allow suppressing clicks
+var $dispatch = $event.dispatch;
+$event.dispatch = function( event ){
+	if ( $.data( this, "suppress."+ event.type ) - new Date().getTime() > 0 ){
+		$.removeData( this, "suppress."+ event.type );
+		return;
+	}
+	return $dispatch.apply( this, arguments );
+};
+
+// event fix hooks for touch events...
+var touchHooks = 
+$event.fixHooks.touchstart = 
+$event.fixHooks.touchmove = 
+$event.fixHooks.touchend =
+$event.fixHooks.touchcancel = {
+	props: "clientX clientY pageX pageY screenX screenY".split( " " ),
+	filter: function( event, orig ) {
+		if ( orig ){
+			var touched = ( orig.touches && orig.touches[0] )
+				|| ( orig.changedTouches && orig.changedTouches[0] )
+				|| null; 
+			// iOS webkit: touchstart, touchmove, touchend
+			if ( touched ) 
+				$.each( touchHooks.props, function( i, prop ){
+					event[ prop ] = touched[ prop ];
+				});
+		}
+		return event;
+	}
+};
+
+// share the same special event configuration with related events...
+$special.draginit = $special.dragstart = $special.dragend = drag;
+
+})( jQuery );