Alert: This function’s access is marked private. This means it is not intended for use by plugin or theme developers, only in other core functions. It is listed here for completeness.

SHEET_UPDATERECORD::custom_html()

Injects JS to the page when the action is added


Return Return

(String) The string with the JS


Source Source

File: src/integrations/google-sheet/actions/sheet-updaterecord.php

	private function custom_html() {
		// Start output
		ob_start();

		// Add the <script> tag
		?>

		<style>

		/**
		 * Set width of columns
		 */

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table {
			table-layout: auto;
		}

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-heading-cell[data-id="GS_COLUMN_NAME"],
		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows-cell[data-id="GS_COLUMN_NAME"],
		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-heading-cell[data-id="GS_COLUMN_VALUE"],
		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows-cell[data-id="GS_COLUMN_VALUE"] {
			width: 50%;
		}

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-heading-cell[data-id="COLUMN_UPDATE"],
		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows-cell[data-id="COLUMN_UPDATE"] {
			width: 1px;
			white-space: nowrap;
		}

		/**
		 * Hide the "Actions" column
		 */

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-heading-cell--actions,
		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows-cell--actions {
			display: none;
		}

		/**
		 * Hide the actions row of the repeater field
		 */

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__actions {
			display: none;
		}

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows tr:last-child td {
			border-bottom: 0 !important;
		}

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows tr:last-child td:first-child {
			border-bottom-left-radius: var(--uap-border-radius);
		}

		.uap-item[data-id="{{item_id}}"] .form-repeater-fields[data-id="WORKSHEET_FIELDS"] .form-repeater-fields__table-rows tr:last-child td[data-id="GS_COLUMN_VALUE"] {
			border-bottom-right-radius: var(--uap-border-radius);
		}

		</style>

		<script>

		/**
		 * Hide the "Value" field when the "Update?" checkbox is unchecked
		 * 
		 * @return {undefined}
		 */
		window.hideValueFieldDynamically = () => {
			// Get all checkboxes
			// {{item_id}} will be replaced with a real integer
			const $checkboxes = document.querySelectorAll( '.uap-item[data-id="{{item_id}}"] input[name="COLUMN_UPDATE"]' );

			/**
			 * Check the checkbox value
			 * 
			 * @return {undefined}
			 */
			const checkCheckboxValue = ( $checkbox ) => {
				// Get the status
				const shouldUpdate = $checkbox.checked;

				// Get the row
				const $row = $checkbox.closest( 'tr' );

				// Get the value field in the row
				const $field = $row.querySelector( 'td[data-id="GS_COLUMN_VALUE"] .form-element' );

				// Set the visibility dynamically
				if ( shouldUpdate ) {
					$field.style.display = 'block';
				} else {
					$field.style.display = 'none';
				}
			}

			// Iterate checkboxes
			$checkboxes.forEach( ( $checkbox ) => {
				// Check checkbox value
				checkCheckboxValue( $checkbox );

				// Add event listener to check the value on change
				$checkbox.addEventListener( 'change', () => {
					// Check checkbox value
					checkCheckboxValue( $checkbox );
				} );
			} );
		}

		// Listen when the options are rendered
		document.addEventListener( 'automator/item/options/open', ( event ) => {
			// Check if it's the options of our item
			// {{item_id}} will be replaced with a real integer
			if ( event.detail.itemId == '{{item_id}}' ) {
				// Check if the libraries are ready
				if ( event.detail.librariesReady ) {
					// Load our custom function
					hideValueFieldDynamically();
				}
			}
		} );

		// Listen when the call of "Get columns" is completed
		// {{item_id}} will be replaced with a real integer
		document.addEventListener( 'automator/{{item_id}}/get-columns', ( event ) => {
			// Load our custom function
			hideValueFieldDynamically();
		} );

		</script>

		<?php

		// Get output
		$output = ob_get_clean();

		// Return output
		return $output;
	}