From 4181d386d3132c7d699e95b96b750e323474fc08 Mon Sep 17 00:00:00 2001
From: Jon Spriggs <jon@sprig.gs>
Date: Tue, 30 Jun 2020 10:26:13 +0100
Subject: [PATCH] Added Data Field options as a combobox * Added datalist to
 the "new" field. * Added link to revealjs documentation.

---
 js/edit-slide-admin.js | 9 ++++++++-
 presenter.php          | 6 ++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/js/edit-slide-admin.js b/js/edit-slide-admin.js
index 84c24b6..cc5cbd6 100644
--- a/js/edit-slide-admin.js
+++ b/js/edit-slide-admin.js
@@ -61,7 +61,14 @@ jQuery( document ).ready( function( $ ) {
 	$( '#slides' ).on( 'click.add-data', '.button.add-data', function( e ) {
 		var table_body = $(this).closest( 'table.slide-data-attributes-table' ).find( 'tbody' );
 		var slide_index = $(this).closest( '.stuffbox' ).find( 'input[name="slide-index"]' ).val();
-		var data_row = '<tr><td class="left newdataleft"><input type="text" name="slide-data[' + slide_index + '][]"></td><td><input type="text" name="slide-data-value[' + slide_index + '][]"></td></tr>';
+		var data_row = '<tr>';
+		data_row += '<td class="left newdataleft">';
+		data_row += '<input type="text" name="slide-data[' + slide_index + '][]" list="slide-data-options">';
+		data_row += '</td>';
+		data_row += '<td>';
+		data_row += '<input type="text" name="slide-data-value[' + slide_index + '][]">';
+		data_row += '</td>';
+		data_row += '</tr>';
 
 		table_body.append( data_row );
 	} );
diff --git a/presenter.php b/presenter.php
index e9fccfd..3f0186c 100644
--- a/presenter.php
+++ b/presenter.php
@@ -538,6 +538,12 @@ public function slides_meta_box( $post ) {
 						</p>
 						<div class="data-attributes" id="slide-data-attributes-<?php echo $slide->number; ?>">
 							<p><strong>Slide Data Attributes</strong></p>
+							<p>See <a href="https://github.com/hakimel/reveal.js#image-backgrounds" target="_blank">the revealjs readme for your options</a>. If you don't see a list of options when selecting the "name" box, double click or tap the box again.</p>
+							<datalist id="slide-data-options">
+							<?php foreach (['background-image','background-size','background-position','background-repeat','background-opacity','background-video','background-video-loop','background-video-muted','transition','transition-speed'] as $item) {
+								echo "<option value=\"$item\">$item</option>";
+							} ?>
+							</datalist>
 							<table class="slide-data-attributes-table">
 								<thead>
 									<tr>