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