Permalink
Browse files

ENHANCEMENT Allow selection of items in GridField (via JavaScript only)

  • Loading branch information...
1 parent 5a3242c commit 4126b95cf79c47827ab8959046f9095587d93590 @chillu chillu committed Feb 7, 2012
Showing with 71 additions and 10 deletions.
  1. +2 −0 css/GridField.css
  2. +54 −8 javascript/GridField.js
  3. +15 −2 scss/GridField.scss
View
2 css/GridField.css
@@ -1,5 +1,7 @@
/** Core styles for the basic GridField form field without any specific style. @package sapphire @subpackage scss @todo Add radial gradient to default delete button state @todo Create SASS mixin-function to simply swap the from/to, to to/from colours in grsdient mixins? */
.cms fieldset.ss-gridfield > div { margin-bottom: 35px; }
+.cms fieldset.ss-gridfield[data-selectable] tr.ui-selected, .cms fieldset.ss-gridfield[data-selectable] tr.ui-selecting { background: #FFFAD6 !important; }
+.cms fieldset.ss-gridfield[data-selectable] td { cursor: pointer; }
.cms table.ss-gridfield.field { box-shadow: none; padding: 0; margin: 20px 0 0 0; border-collapse: separate; border-bottom: 0 none; }
.cms table.ss-gridfield.field thead { color: #1d2224; background: transparent; }
.cms table.ss-gridfield.field tbody { background: #FFF; }
View
62 javascript/GridField.js
@@ -1,4 +1,16 @@
jQuery(function($){
+
+ $('fieldset.ss-gridfield').entwine({
+ getItems: function() {
+ return this.find('.ss-gridfield-item');
+ }
+ });
+
+ $('fieldset.ss-gridfield *').entwine({
+ getGridField: function() {
+ return this.parents('fieldset.ss-gridfield:first');
+ }
+ });
$('fieldset.ss-gridfield .action').entwine({
onclick: function(e){
@@ -26,13 +38,6 @@ jQuery(function($){
}
});
- var removeFilterButtons = function() {
- // Remove stuff
- $('th').children('div').each(function(i,v) {
- $(v).remove();
- });
- }
-
/*
* Upon focusing on a filter <input> element, move "filter" and "reset" buttons and display next to the current <input> element
* ToDo ensure filter-button state is maintained after filtering (see resetState param)
@@ -46,8 +51,10 @@ jQuery(function($){
return false;
}
var eleInput = $(this);
+
// Remove existing <div> and <button> elements in-lieu of cloning
- removeFilterButtons();
+ this.getGridField().find('th > div').each(function(i,v) {$(v).remove();});
+
var eleButtonSetFilter = $('#action_filter');
var eleButtonResetFilter = $('#action_reset');
// Retain current widths to ensure <th>'s don't shift widths
@@ -71,4 +78,43 @@ jQuery(function($){
}
});
+ /**
+ * Allows selection of one or more rows in the grid field.
+ * Purely clientside at the moment.
+ */
+ $('fieldset.ss-gridfield[data-selectable]').entwine({
+ /**
+ * @return {jQuery} Collection
+ */
+ getSelectedItems: function() {
+ return this.find('.ss-gridfield-item.ui-selected');
+ },
+ /**
+ * @return {Array} Of record IDs
+ */
+ getSelectedIDs: function() {
+ return $.map(this.getSelectedItems(), function(el) {return $(el).data('id');});
+ }
+ });
+ $('fieldset.ss-gridfield[data-selectable] .ss-gridfield-items').entwine({
+ onmatch: function() {
+ this._super();
+
+ // TODO Limit to single selection
+ this.selectable();
+ },
+ onunmatch: function() {
+ this._super();
+ this.selectable('destroy');
+ }
+
+ });
+
+ $('fieldset.ss-gridfield[data-multiselect] .ss-gridfield-item').entwine({
+ onclick: function() {
+ // this.siblings('selected');
+ this._super();
+ }
+ });
+
});
View
17 scss/GridField.scss
@@ -31,9 +31,22 @@ $gf_border_radius: 7px;
}
.cms {
- fieldset.ss-gridfield>div {
- margin-bottom: 35px;
+ fieldset.ss-gridfield {
+ & > div {
+ margin-bottom: 35px;
+ }
+
+ &[data-selectable] {
+ tr.ui-selected, tr.ui-selecting {
+ background: #FFFAD6 !important;
+ }
+
+ td {
+ cursor: pointer;
+ }
+ }
}
+
table.ss-gridfield.field {
box-shadow: none;
padding: 0;

0 comments on commit 4126b95

Please sign in to comment.