Creating a format painter button in pure JavaScript

Background:

To create a format painter button, add an event listener to indicate when to copy the formatting of a selected area, and indicate the new are to paste the formatting too. Then bind the selection changed event to the active sheet to invoke copyToOptions for the style and span to copy the formatting.

Steps to Complete:

  1. Create a format painter button

  2. Add an event listener to the format painter button

  3. Create a resetFormatPainting() function

  4. Bind the active sheets to the SelectionChanged event

Getting Started:

Step 1: Create a format painter button

Add an HTML element button

// Format painter button     <div>   <button id="btnFormat">Format Painter</button> </div> // SpreadJS's targeted DOM element  <div id="ss" style="width: 100%; height: 400px; border: 1px solid gray;"></div>

Step 2: Add an event listener to the format painter button

Create two variables, fromRange, and isFormatpainint = False.

Add an event listener to the format painter button to get the sheets selection.

Store the selection in a data array and store the data array in the variable fromRange.

Then have the isFormatPainting variable change to True to indicate that when the button is clicked, formatting is occurring.

Finally, change the text content of the Format Painter button to read ‘Formatting’.

 // define fromRange var fromRange; // define isFormatPainting and set it to False var isFormatPainting = false; document.getElementById("btnFormat").addEventListener("click", function () { var sheet = spread.getActiveSheet(); // Get the selection from the current sheet var selectionRange = sheet.getSelections(); if (selectionRange.length > 1) { alert("Could not apply to multi selection ranges"); return; } if (isFormatPainting) { resetFormatPainting(sheet); return; } fromRange = selectionRange[0]; // set isFormatPainting variable to True to indicate that when the button is clicked for formatting is occuring isFormatPainting = true; // Change buttons text to "Formatting" this.textContent = "Formatting"; });

Step 3: Create a resetFormatPainting() function

Create a function called resetFormatPainting() that will set the variable isFormatPainting to False and change the text content of the Format Painter button to read “Format Painting”

 function resetFormatPainting(sheet) { isFormatPainting = false; document.getElementById("btnFormat").textContent = "Format Painting"; }

Step 4: Bind the active sheets to the SelectionChanged event

Bind the active sheet to the SelectionChanged event that with determine the selected area and the area the formatting will be copied too. This utilizes SpreadJS’s copyToOptions to specify to copy the span and style.

activeSheet.bind(GC.Spread.Sheets.Events.SelectionChanged, function ( e, info ) { // if isformatting is true, if (isFormatPainting) { var sheet = spread.getActiveSheet(); // invoke resetFormatPainting() function resetFormatPainting(sheet); spread.suspendPaint(); // get the selections in the sheet and store in an array var toRange = sheet.getSelections()[0]; //toRange biger than fromRange if (fromRange.rowCount > toRange.rowCount) { toRange.rowCount = fromRange.rowCount; } if (fromRange.colCount > toRange.colCount) { toRange.colCount = fromRange.colCount; } //toRange must in Sheet if (toRange.row + toRange.rowCount > sheet.getRowCount()) { toRange.rowCount = sheet.getRowCount() - toRange.row; } if (toRange.col + toRange.colCount > sheet.getColumnCount()) { toRange.colCount = sheet.getColumnCount() - toRange.col; } var rowStep = fromRange.rowCount, colStep = fromRange.colCount; var endRow = toRange.row + toRange.rowCount - 1, endCol = toRange.col + toRange.colCount - 1; // if toRange bigger than fromRange, repeat paint for ( var startRow = toRange.row; startRow <= endRow; startRow = startRow + rowStep ) { for ( var startCol = toRange.col; startCol <= endCol; startCol = startCol + colStep ) { var rowCount = startRow + rowStep > endRow + 1 ? endRow - startRow + 1 : rowStep; var colCount = startCol + colStep > endCol + 1 ? endCol - startCol + 1 : colStep; sheet.copyTo( fromRange.row, fromRange.col, startRow, startCol, rowCount, colCount, GC.Spread.Sheets.CopyToOptions.style | GC.Spread.Sheets.CopyToOptions.span ); } } spread.resumePaint(); } }

After following these steps you are now able to use the Format Painter button to copy the format of a selected area to a new space in the SpreadJS instance.

Tags:

Mackenzie Albitz