extract poll js

Signed-off-by: John Rayes <[email protected]>
SimpleMachines · Dec 27, 2023 · 6141af3 · 6141af3
1 parent 98d7f00
commit 6141af3
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 60 deletions.
diff --git a/Sources/Actions/Post.php b/Sources/Actions/Post.php
@@ -375,7 +375,7 @@ public function show(): void
 			Theme::loadJavaScriptFile('drafts.js', ['defer' => false, 'minimize' => true], 'smf_drafts');
 		}
 
-		// quotedText.js
+		Theme::loadJavaScriptFile('post.js', ['defer' => true, 'minimize' => true], 'smf_post');
 		Theme::loadJavaScriptFile('quotedText.js', ['defer' => true, 'minimize' => true], 'smf_quotedText');
 
 		// Knowing the current board ID might be handy.
@@ -954,8 +954,6 @@ protected function showPreview(): void
 					'is_last' => false,
 				];
 			}
-			Utils::$context['last_choice_id'] = $choice_id;
-			Utils::$context['choices'][count(Utils::$context['choices']) - 1]['is_last'] = true;
 		}
 
 		// Are you... a guest?

diff --git a/Sources/Poll.php b/Sources/Poll.php
@@ -1196,10 +1196,8 @@ public static function edit(): void
 		Utils::$context['poll'] = $poll->format();
 		Utils::$context['choices'] = &Utils::$context['poll']['choices'];
 
-		Utils::$context['last_choice_id'] = array_key_last(Utils::$context['poll']['choices']);
-		Utils::$context['poll']['choices'][Utils::$context['last_choice_id']]['is_last'] = true;
-
 		Utils::$context['page_title'] = Utils::$context['is_edit'] ? Lang::$txt['poll_edit'] : Lang::$txt['add_poll'];
+		Theme::loadJavaScriptFile('post.js', ['defer' => true, 'minimize' => true], 'smf_post');
 
 		// Build the link tree.
 		Utils::$context['linktree'][] = [
@@ -1473,15 +1471,11 @@ protected function initNewPoll(): void
 			'guest_vote' => !empty($_POST['poll_guest_vote']),
 		]);
 
-		// Make all five poll choices empty.
-		Utils::$context['last_choice_id'] = 4;
-
-		for ($i = 0; $i <= Utils::$context['last_choice_id']; $i++) {
+		for ($i = 0; $i <= 4; $i++) {
 			$this->addChoice([
 				'id' => $i,
 				'number' => $i + 1,
 				'label' => '',
-				'is_last' => $i === Utils::$context['last_choice_id'],
 			], true);
 		}
 	}

diff --git a/Themes/default/Poll.template.php b/Themes/default/Poll.template.php
@@ -19,27 +19,6 @@
  */
 function template_main()
 {
-	// Some javascript for adding more options.
-	echo '
-	<script>
-		var pollOptionNum = 0;
-		var pollOptionId = ', Utils::$context['last_choice_id'], ';
-
-		function addPollOption()
-		{
-			if (pollOptionNum == 0)
-			{
-				for (var i = 0; i < document.forms.postmodify.elements.length; i++)
-					if (document.forms.postmodify.elements[i].id.substr(0, 8) == "options-")
-						pollOptionNum++;
-			}
-			pollOptionNum++
-			pollOptionId++
-
-			setOuterHTML(document.getElementById("pollMoreOptions"), \'<dt><label for="options-\' + pollOptionId + \'" ', (isset(Utils::$context['poll_error']['no_question']) ? ' class="error"' : ''), '>', Lang::$txt['option'], ' \' + pollOptionNum + \'</label>:</dt><dd><input type="text" name="options[\' + (pollOptionId) + \']" id="options-\' + (pollOptionId) + \'" value="" size="80" maxlength="255"></dd><p id="pollMoreOptions"></p\');
-		}
-	</script>';
-
 	if (!empty(Utils::$context['poll_error']['messages']))
 		echo '
 			<div class="errorbox">
@@ -67,7 +46,7 @@ function addPollOption()
 					<input type="hidden" name="poll" value="', Utils::$context['poll']['id'], '">
 					<fieldset id="poll_main">
 						<legend><span ', (isset(Utils::$context['poll_error']['no_question']) ? ' class="error"' : ''), '>', Lang::$txt['poll_question'], ':</span></legend>
-						<dl class="settings poll_options">
+						<dl class="settings poll_options" data-more-txt="', Lang::$txt['poll_add_option'], '" data-option-txt="', Lang::$txt['option'], '">
 							<dt>', Lang::$txt['poll_question'], ':</dt>
 							<dd><input type="text" name="question" size="80" value="', Utils::$context['poll']['question'], '"></dd>';
 
@@ -89,9 +68,7 @@ function addPollOption()
 	}
 
 	echo '
-							<p id="pollMoreOptions"></p>
 						</dl>
-						<strong><a href="javascript:addPollOption(); void(0);">(', Lang::$txt['poll_add_option'], ')</a></strong>
 					</fieldset>
 					<fieldset id="poll_options">
 						<legend>', Lang::$txt['poll_options'], ':</legend>

diff --git a/Themes/default/Post.template.php b/Themes/default/Post.template.php
@@ -42,28 +42,6 @@ function template_main()
 	echo '
 			};';
 
-	// If this is a poll - use some javascript to ensure the user doesn't create a poll with illegal option combinations.
-	if (Utils::$context['make_poll'])
-		echo '
-			var pollOptionNum = 0, pollTabIndex;
-			var pollOptionId = ', Utils::$context['last_choice_id'], ';
-			function addPollOption()
-			{
-				if (pollOptionNum == 0)
-				{
-					for (var i = 0, n = document.forms.postmodify.elements.length; i < n; i++)
-						if (document.forms.postmodify.elements[i].id.substr(0, 8) == \'options-\')
-						{
-							pollOptionNum++;
-							pollTabIndex = document.forms.postmodify.elements[i].tabIndex;
-						}
-				}
-				pollOptionNum++
-				pollOptionId++
-
-				setOuterHTML(document.getElementById(\'pollMoreOptions\'), ', Utils::JavaScriptEscape('<dt><label for="options-'), ' + pollOptionId + ', Utils::JavaScriptEscape('">' . Lang::$txt['option'] . ' '), ' + pollOptionNum + ', Utils::JavaScriptEscape('</label>:</dt><dd><input type="text" name="options['), ' + pollOptionId + ', Utils::JavaScriptEscape(']" id="options-'), ' + pollOptionId + ', Utils::JavaScriptEscape('" value="" size="80" maxlength="255" tabindex="'), ' + pollTabIndex + ', Utils::JavaScriptEscape('"></dd><p id="pollMoreOptions"></p>'), ');
-			}';
-
 	// If we are making a calendar event we want to ensure we show the current days in a month etc... this is done here.
 	if (Utils::$context['make_event'])
 		echo '
@@ -204,7 +182,7 @@ function addPollOption()
 					<div id="edit_poll">
 						<fieldset id="poll_main">
 							<legend><span ', (isset(Utils::$context['poll_error']['no_question']) ? ' class="error"' : ''), '>', Lang::$txt['poll_question'], '</span></legend>
-							<dl class="settings poll_options">
+							<dl class="settings poll_options" data-more-txt="', Lang::$txt['poll_add_option'], '" data-option-txt="', Lang::$txt['option'], '">
 								<dt>', Lang::$txt['poll_question'], '</dt>
 								<dd>
 									<input type="text" name="question" value="', isset(Utils::$context['question']) ? Utils::$context['question'] : '', '" tabindex="', Utils::$context['tabindex']++, '" size="80">
@@ -221,9 +199,7 @@ function addPollOption()
 								</dd>';
 
 		echo '
-								<p id="pollMoreOptions"></p>
 							</dl>
-							<strong><a href="javascript:addPollOption(); void(0);">(', Lang::$txt['poll_add_option'], ')</a></strong>
 						</fieldset>
 						<fieldset id="poll_options">
 							<legend>', Lang::$txt['poll_options'], '</legend>

diff --git a/Themes/default/scripts/post.js b/Themes/default/scripts/post.js
@@ -0,0 +1,25 @@
+function addPollOption(container, e) {
+	var pollOptionNum = 0;
+	var pollOptionId = 0;
+
+	for (const el of e.target.form.elements) {
+		if (el.id.substr(0, 8) == 'options-') {
+			pollOptionNum++;
+			pollOptionId = el.id.match(/\d+/)[0];
+		}
+	}
+
+	pollOptionNum++
+	pollOptionId++
+
+	container.insertAdjacentHTML('beforeend', '<dt><label for="options-' + pollOptionId + '">' + container.dataset.optionTxt + ' ' + pollOptionNum + '</label>:</dt><dd><input type="text" name="options[' + pollOptionId + ']" id="options-' + pollOptionId + '" value="" size="80" maxlength="255"></dd>');
+}
+
+window.addEventListener('load', function () {
+	const el = document.forms.postmodify.poll_main.children[1];
+	const addMoreButton = document.createElement('button');
+	addMoreButton.textContent = el.dataset.moreTxt;
+	addMoreButton.className = 'button';
+	addMoreButton.addEventListener('click', addPollOption.bind(null, el));
+	el.after(addMoreButton);
+});