r2892 - grid: a few updates the get the branch working again (without having to do a complete che...
Author: joern.zaefferer
Date: Wed Jul 8 05:00:37 2009
New Revision: 2892
Modified:
branches/dev/grid/tests/gridmodel-local.js
branches/dev/grid/tests/gridmodel.html
branches/dev/grid/tests/visual/grid.html
branches/dev/grid/ui/ui.grid.js
branches/dev/grid/ui/ui.gridmodel.js
branches/dev/grid/ui/ui.selectable.js
Log:
grid: a few updates the get the branch working again (without having to do
a complete checkout of everything in the jquery-ui svn); also enabling
local data demo for showing something on the wiki
Modified: branches/dev/grid/tests/gridmodel-local.js
==============================================================================
--- branches/dev/grid/tests/gridmodel-local.js (original)
+++ branches/dev/grid/tests/gridmodel-local.js Wed Jul 8 05:00:37 2009
@@ -21,20 +21,6 @@
expect(11);
stop();
- /*
- if (options.local) {
- return {
- fetch: function(request, success) {
- success({
- totalRecords: options.local.length,
- columns: options.columns,
- records: options.local.slice(request.start, request.start +
request.limit)
- });
- }
- }
- }
- */
-
var model = $.ui.grid.model({
local: emailRecords,
columns: emailColumns
@@ -44,21 +30,21 @@
limit: 3
}, function(response) {
equals( response.totalRecords, 10, "total records" );
- compare( response.columns, emailColumns );
+ same( response.columns, emailColumns );
equals( response.records.length, 3 );
- compare2( response.records[0], emailRecords[0] );
- compare2( response.records[1], emailRecords[1] );
- compare2( response.records[2], emailRecords[2] );
+ same( response.records[0], emailRecords[0] );
+ same( response.records[1], emailRecords[1] );
+ same( response.records[2], emailRecords[2] );
model.fetch({
start: 2,
limit: 2
}, function(response) {
equals( response.totalRecords, 10, "total records" );
- compare( response.columns, emailColumns );
+ same( response.columns, emailColumns );
equals( response.records.length, 2 );
- compare2( response.records[0], emailRecords[2] );
- compare2( response.records[1], emailRecords[3] );
+ same( response.records[0], emailRecords[2] );
+ same( response.records[1], emailRecords[3] );
start();
});
});
Modified: branches/dev/grid/tests/gridmodel.html
==============================================================================
--- branches/dev/grid/tests/gridmodel.html (original)
+++ branches/dev/grid/tests/gridmodel.html Wed Jul 8 05:00:37 2009
@@ -7,6 +7,7 @@
<script type="text/javascript" src="../ui/ui.grid.js"></script>
<script type="text/javascript" src="../ui/ui.gridmodel.js"></script>
<script type="text/javascript" src="qunit/testrunner.js"></script>
+ <script type="text/javascript" src="gridmodel-local.js"></script>
<script type="text/javascript" src="gridmodel.js"></script>
<style type="text/css">
Modified: branches/dev/grid/tests/visual/grid.html
==============================================================================
--- branches/dev/grid/tests/visual/grid.html (original)
+++ branches/dev/grid/tests/visual/grid.html Wed Jul 8 05:00:37 2009
@@ -6,17 +6,12 @@
<link rel="stylesheet" href="../../themes/default/ui.all.css"
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="../../jquery-1.2.6.js"></script>
-<script src="../../../../../trunk/ui/ui.core.js" type="text/javascript"
charset="utf-8"></script>
+ <script src="../../ui/ui.core.js" type="text/javascript"
charset="utf-8"></script>
+ <script type="text/javascript" src="../../ui/ui.grid.js"></script>
<script type="text/javascript" src="../../ui/ui.grid.js"></script>
<script type="text/javascript" src="../../ui/ui.gridmodel.js"></script>
<script type="text/javascript"
src="../../ui/ui.infiniteScrolling.js"></script>
- <script type="text/javascript"
src="../../dev-selectable-ui/ui.selectable.js"></script>
-
-
-
-
-
-
+ <script type="text/javascript" src="../../ui/ui.selectable.js"></script>
<style type="text/css" media="screen">
@@ -74,8 +69,26 @@
<script type="text/javascript">
+var emailColumns = [
+ { id: "name", label: "Name", width: 75 },
+ { id: "to", label: "Address", width: 150 }
+];
+var emailRecords = [
+ { name: "Peter Pan", to: "peter@pan.de" },
+ { name: "Molly", to: "molly@yahoo.com" },
+ { name: "Forneria Marconi", to: "live@japan.jp" },
+ { name: "Master Sync", to: "205bw@samsung.com" },
+ { name: "Dr. Tech de Log", to: "g15@logitech.com" },
+ { name: "Don Corleone", to: "don@vegas.com" },
+ { name: "Mc Chick", to: "info@donalds.org" },
+ { name: "Donnie Darko", to: "dd@timeshift.info" },
+ { name: "Quake The Net", to: "webmaster@quakenet.org" },
+ { name: "Dr. Write", to: "write@writable.com" }
+];
+
$(document).ready(function() {
+
$("#grid").grid({
url: "../data/employees-json.php",
limit: 20,
@@ -96,6 +109,13 @@
limit: 20,
height: 200
});
+
+ $("#grid4").grid({
+ local: emailRecords,
+ columns: emailColumns,
+ limit: 20,
+ height: 200
+ });
});
@@ -105,6 +125,8 @@
</head>
<body>
+ <h2>Grid with loal data</h2>
+ <div id="grid4"></div>
<h2>Grid with finite scrolling</h2>
<div id="grid"></div>
@@ -114,6 +136,5 @@
<h2>Grid with pagination</h2>
<div id="grid3"></div>
-
</body>
</html>
Modified: branches/dev/grid/ui/ui.grid.js
==============================================================================
--- branches/dev/grid/ui/ui.grid.js (original)
+++ branches/dev/grid/ui/ui.grid.js Wed Jul 8 05:00:37 2009
@@ -98,7 +98,9 @@
//Prepare data
this.gridmodel = $.ui.grid.model({
- url: this.options.url
+ url: this.options.url,
+ local: this.options.local,
+ columns: this.options.columns
});
//Call update for the first time
Modified: branches/dev/grid/ui/ui.gridmodel.js
==============================================================================
--- branches/dev/grid/ui/ui.gridmodel.js (original)
+++ branches/dev/grid/ui/ui.gridmodel.js Wed Jul 8 05:00:37 2009
@@ -3,6 +3,17 @@
$.extend($.ui.grid, {
model: function(options) {
options = $.extend({}, $.ui.grid.model.defaults, options);
+ if (options.local) {
+ return {
+ fetch: function(request, success) {
+ success({
+ totalRecords: options.local.length,
+ columns: options.columns,
+ records: options.local.slice(request.start, request.start +
request.limit)
+ });
+ }
+ }
+ }
return {
fetch: function(request, callback) {
$.ajax($.extend(true, {
Modified: branches/dev/grid/ui/ui.selectable.js
==============================================================================
--- branches/dev/grid/ui/ui.selectable.js (original)
+++ branches/dev/grid/ui/ui.selectable.js Wed Jul 8 05:00:37 2009
@@ -1,7 +1,7 @@
/*
* jQuery UI Selectable @VERSION
*
- * Copyright (c) 2008 AUTHORS.txt (http://ui.jquery.com/about)
+ * Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
@@ -12,255 +12,497 @@
*/
(function($) {
-$.widget("ui.selectable", $.extend({}, $.ui.mouse, {
+ $.widget('ui.selectable', $.extend({}, $.ui.mouse, {
- _init: function() {
- var self = this;
+ _init: function() {
- this.element.addClass("ui-selectable");
+ var self = this;
+ this.items = $(this.options.filter, this.element);
+ this.element.addClass("ui-selectable");
+
+ //Set the currentFocus to the first item
+ this.currentFocus = this.items.eq(0);
+
+ //Refresh item positions
+ this.refresh();
- this.dragged = false;
+ //Disable text selection
+ this.element.disableSelection();
- // cache selectee children based on filter
- var selectees;
- this.refresh = function() {
- selectees = $(self.options.filter, self.element[0]);
- selectees.each(function() {
- var $this = $(this);
- var pos = $this.offset();
- $.data(this, "selectable-item", {
- element: this,
- $element: $this,
- left: pos.left,
- top: pos.top,
- right: pos.left + $this.width(),
- bottom: pos.top + $this.height(),
- startselected: false,
- selected: $this.hasClass('ui-selected'),
- selecting: $this.hasClass('ui-selecting'),
- unselecting: $this.hasClass('ui-unselecting')
- });
- });
- };
- this.refresh();
+ //Prepare caret selection
+ if(this.options.lasso) this._mouseInit();
- this.selectees = selectees.addClass("ui-selectee");
+ this.element
+ .bind('mousedown.selectable', function(event) {
- this._mouseInit();
+ var item = self._targetIsItem(event.target);
+ if (!item) return;
+
+ // If item is part of current selection and current
+ // selection is multiple, return and allow mouseup
+ // to fire (Windows gets this right too, OSX doesn't)
+ if(self._selection.length > 1 &&
$(item).hasClass(self.options.selectedClass)) {
+ return (self._listenForMouseUp = 1);
+ }
+
+ if(self._trigger('beforeselect', event) === false)
+ return true;
+
+ self._select(event, item);
+ self.element[0].focus();
+ event.preventDefault();
+
+ })
+ .bind('mouseup.selectable', function(event) {
+ if(self._listenForMouseUp) {
+
+ self._listenForMouseUp = 0;
+ var item = self._targetIsItem(event.target);
+ if (!item) return;
+
+ if(self._trigger('beforeselect', event) === false)
+ return true;
+
+ self._select(event, item);
+ self.element[0].focus();
+ event.preventDefault();
+ }
+ })
+ .bind('focus.selectable', function() {
+ self.currentFocus.addClass('ui-focused');
+ })
+ .bind('blur.selectable', function() {
+ self.currentFocus.removeClass('ui-focused');
+ })
+ .bind('keydown.selectable', function(event) {
+
+ if(!self.options.keyboard)
+ return;
+
+ if(self._trigger('beforeselect', event) === false)
+ return true;
+
+ if(event.keyCode == $.ui.keyCode.DOWN) {
+ self.options.smart ? self.selectClosest('down', event) :
self.selectNext(event);
+ event.preventDefault();
+ }
+
+ if(event.keyCode == $.ui.keyCode.RIGHT) {
+ self.options.smart ? self.selectClosest('right', event) :
self.selectNext(event);
+ event.preventDefault();
+ }
+
+ if(event.keyCode == $.ui.keyCode.UP) {
+ self.options.smart ? self.selectClosest('up', event) :
self.selectPrevious(event);
+ event.preventDefault();
+ }
+
+ if(event.keyCode == $.ui.keyCode.LEFT) {
+ self.options.smart ? self.selectClosest('left', event) :
self.selectPrevious(event);
+ event.preventDefault();
+ }
- this.helper = $(document.createElement('div'))
- .css({border:'1px dotted black'})
- .addClass("ui-selectable-helper");
- },
-
- destroy: function() {
- this.element
- .removeClass("ui-selectable ui-selectable-disabled")
- .removeData("selectable")
- .unbind(".selectable");
- this._mouseDestroy();
- },
-
- _mouseStart: function(event) {
- var self = this;
-
- this.opos = [event.pageX, event.pageY];
-
- if (this.options.disabled)
- return;
-
- var options = this.options;
-
- this.selectees = $(options.filter, this.element[0]);
-
- // selectable START callback
- this.element.triggerHandler("selectablestart", [event, {
- "selectable": this.element[0],
- "options": options
- }], options.start);
-
- $('body').append(this.helper);
- // position helper (lasso)
- this.helper.css({
- "z-index": 100,
- "position": "absolute",
- "left": event.clientX,
- "top": event.clientY,
- "width": 0,
- "height": 0
- });
+ if ((event.ctrlKey || event.metaKey) && event.keyCode ==
$.ui.keyCode.SPACE) {
+ self._toggleSelection(self.currentFocus, event);
+ }
- if (options.autoRefresh) {
- this.refresh();
- }
+ });
- this.selectees.filter('.ui-selected').each(function() {
- var selectee = $.data(this, "selectable-item");
- selectee.startselected = true;
- if (!event.metaKey) {
- selectee.$element.removeClass('ui-selected');
- selectee.selected = false;
- selectee.$element.addClass('ui-unselecting');
- selectee.unselecting = true;
- // selectable UNSELECTING callback
- self.element.triggerHandler("selectableunselecting", [event, {
- selectable: self.element[0],
- unselecting: selectee.element,
- options: options
- }], options.unselecting);
- }
- });
+ this.helper = $(document.createElement('div'))
+ .addClass("ui-selectable-lasso");
- var isSelectee = false;
- $(event.target).parents().andSelf().each(function() {
- if($.data(this, "selectable-item")) isSelectee = true;
- });
- return this.options.keyboard ? !isSelectee : true;
- },
-
- _mouseDrag: function(event) {
- var self = this;
- this.dragged = true;
-
- if (this.options.disabled)
- return;
-
- var options = this.options;
-
- var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 =
event.pageY;
- if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
- if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
- this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
-
- this.selectees.each(function() {
- var selectee = $.data(this, "selectable-item");
- //prevent helper from being selected if appendTo: selectable
- if (!selectee || selectee.element == self.element[0])
+ },
+