API: creating GridFieldBulkManager basic elements

Create component's files and initial UI styles and behaviours

code/GridFieldBulkManager.php

@@ -0,0 +1,100 @@
+<?php
+/**
+ * GridField component for editing attached models in bulk
+ *
+ * @author colymba
+ * @package GridFieldBulkEditingTools
+ */
+class GridFieldBulkManager implements GridField_HTMLProvider, GridField_ColumnProvider, GridField_URLHandler {
+	
+	public function __construct()
+	{				
+	}
+	
+	/* GridField_ColumnProvider */
+	
+	function augmentColumns($gridField, &$columns)
+	{
+		if(!in_array('BulkSelect', $columns)) $columns[] = 'BulkSelect';
+	}
+	
+	function getColumnsHandled($gridField)
+	{
+		return array('BulkSelect');
+	}
+	
+	function getColumnContent($gridField, $record, $columnName)
+	{
+		$cb = CheckboxField::create('bulkSelect_'.$record->ID)
+			->addExtraClass('bulkSelect');
+		return $cb->Field();
+	}
+	
+	function getColumnAttributes($gridField, $record, $columnName)
+	{
+		return array('class' => 'col-bulkSelect');
+	}
+	
+	function getColumnMetadata($gridField, $columnName)
+	{
+		return array('title' => null);
+	}
+		
+	/* // GridField_ColumnProvider */
+	
+	/**
+	 *
+	 * @param GridField $gridField
+	 * @return array 
+	 */
+	public function getHTMLFragments($gridField) {		
+		
+		Requirements::css(BULK_EDIT_TOOLS_PATH . '/css/GridFieldBulkManager.css');
+		Requirements::javascript(BULK_EDIT_TOOLS_PATH . '/javascript/GridFieldBulkManager.js');
+		
+		$dropDownActionList = DropdownField::create('bulkActionName', '')
+			->setSource( array('Edit','UnLink','Delete') );
+		
+		$actionButton = FormAction::create('doBulkAction', 'GO')
+				->setAttribute('id', 'doBulkActionButton')
+				->addExtraClass('ss-ui-action-constructive cms-panel-link')
+				->setAttribute('data-icon', 'accept')
+				->setAttribute('data-url', 'bulkEdit')
+				->setUseButtonTag(true);
+		
+		$html = '<div id="bulkManagerOptions">'.
+								$dropDownActionList->FieldHolder().
+								$actionButton->Field().
+						'</div>';
+		
+		return array(
+			'bulk-edit-tools' => $html
+		);
+	}
+	
+	/**
+	 *
+	 * @param GridField $gridField
+	 * @return array 
+	 */
+	public function getURLHandlers($gridField) {
+			return array(
+				'bulkEdit' => 'handlebulkEdit'
+			);
+	}
+	
+	/**
+	 * Pass control over to the RequestHandler
+	 * 
+	 * @param GridField $gridField
+	 * @param SS_HTTPRequest $request
+	 * @return mixed 
+	 */
+	public function handleBulkUpload($gridField, $request)
+	{				
+		$controller = $gridField->getForm()->Controller();
+		$handler = new GridFieldBulkImageUpload_Request($gridField, $this, $controller);
+		
+		return $handler->handleRequest($request, DataModel::inst());		
+	}
+}

css/GridFieldBulkManager.css

@@ -0,0 +1,31 @@
+/* ************************************************************************
+ * GRIDFIELD
+ */
+ 
+.cms table.ss-gridfield-table tbody .col-bulkSelect {
+	width: 25px;
+	padding: 0 10px;
+	text-align: center;
+}
+
+#bulkManagerOptions
+{
+	float: right;
+	margin: 0 0 0 20px;
+}
+
+#bulkActionName
+{
+	display: inline-block;
+	border: none;
+	box-shadow: none;
+}
+
+#bulkActionName #bulkActionName_chzn
+{
+	width: auto !important;
+}
+
+/* ************************************************************************
+ * EDITING
+ */

javascript/GridFieldBulkManager.js

@@ -0,0 +1,39 @@
+(function($) {
+	
+	$.entwine('colymba', function($) {
+		
+		$('td.col-bulkSelect').entwine({
+			onmatch: function(){
+			},
+			onunmatch: function(){				
+			},
+			onmouseover: function(){
+				//disable default row click behaviour -> avoid navigation to edit form when clicking the checkbox
+				$(this).parents('.ss-gridfield-item').find('.edit-link').addClass('tempDisabledEditLink').removeClass('edit-link').css('display','none');
+			},
+			onmouseout: function(){
+				//re-enable default row click behaviour
+				$(this).parents('.ss-gridfield-item').find('.tempDisabledEditLink').addClass('edit-link').removeClass('tempDisabledEditLink').css('display','inline-block');
+			},
+			onclick: function(e) {
+				//check/uncheck checkbox when clicking cell
+				var cb = $(e.target).find('input');
+				if ( !$(cb).prop('checked') ) $(cb).prop('checked', true);
+				else $(cb).prop('checked', false);
+			}
+		});
+		
+		$('td.col-bulkSelect input').entwine({
+			onmatch: function(){
+			},
+			onunmatch: function(){				
+			},
+			onclick: function(e) {		
+							
+				
+			} 
+		});
+		
+	});
+	
+}(jQuery));