rDrama/files/templates/award_modal.html

<script>
	// Voting

	function post_vote(url, callback) {
		var xhr = new XMLHttpRequest();
		xhr.open("POST", url, true);
		var form = new FormData()
		form.append("formkey", formkey());
		xhr.withCredentials=true;
		xhr.send(form);
	}

	var upvote = function(event) {

		var type = event.target.dataset.bsContentType;
		var id = event.target.dataset.bsIdUp;

		var downvoteButton = document.getElementsByClassName(type + '-' + id + '-down');
		var upvoteButton = document.getElementsByClassName(type + '-' + id + '-up');
		var scoreText = document.getElementsByClassName(type + '-score-' + id);

		for (var j = 0; j < upvoteButton.length && j < downvoteButton.length && j < scoreText.length; j++) {

			var thisUpvoteButton = upvoteButton[j];
			var thisDownvoteButton = downvoteButton[j];
			var thisScoreText = scoreText[j];
			var thisScore = Number(thisScoreText.textContent);

			if (thisUpvoteButton.classList.contains('active')) {
				thisUpvoteButton.classList.remove('active')
				thisScoreText.textContent = thisScore - 1
				voteDirection = "0"
			} else if (thisDownvoteButton.classList.contains('active')) {
				thisUpvoteButton.classList.add('active')
				thisDownvoteButton.classList.remove('active')
				thisScoreText.textContent = thisScore + 2
				voteDirection = "1"
			} else {
				thisUpvoteButton.classList.add('active')
				thisScoreText.textContent = thisScore + 1
				voteDirection = "1"
			}

			if (thisUpvoteButton.classList.contains('active')) {
				thisScoreText.classList.add('score-up')
				thisScoreText.classList.remove('score-down')
				thisScoreText.classList.remove('score')
			} else if (thisDownvoteButton.classList.contains('active')) {
				thisScoreText.classList.add('score-down')
				thisScoreText.classList.remove('score-up')
				thisScoreText.classList.remove('score')
			} else {
				thisScoreText.classList.add('score')
				thisScoreText.classList.remove('score-up')
				thisScoreText.classList.remove('score-down')
			}
		}

		post_vote("/vote/" + type + "/" + id + "/" + voteDirection);
		
	}

	var downvote = function(event) {

		var type = event.target.dataset.bsContentType;
		var id = event.target.dataset.bsIdDown;

		var downvoteButton = document.getElementsByClassName(type + '-' + id + '-down');
		var upvoteButton = document.getElementsByClassName(type + '-' + id + '-up');
		var scoreText = document.getElementsByClassName(type + '-score-' + id);

		for (var j = 0; j < upvoteButton.length && j < downvoteButton.length && j < scoreText.length; j++) {

			var thisUpvoteButton = upvoteButton[j];
			var thisDownvoteButton = downvoteButton[j];
			var thisScoreText = scoreText[j];
			var thisScore = Number(thisScoreText.textContent);

			if (thisDownvoteButton.classList.contains('active')) {
				thisDownvoteButton.classList.remove('active')
				thisScoreText.textContent = thisScore + 1
				voteDirection = "0"
			} else if (thisUpvoteButton.classList.contains('active')) {
				thisDownvoteButton.classList.add('active')
				thisUpvoteButton.classList.remove('active')
				thisScoreText.textContent = thisScore - 2
				voteDirection = "-1"
			} else {
				thisDownvoteButton.classList.add('active')
				thisScoreText.textContent = thisScore - 1
				voteDirection = "-1"
			}

			if (thisUpvoteButton.classList.contains('active')) {
				thisScoreText.classList.add('score-up')
				thisScoreText.classList.remove('score-down')
				thisScoreText.classList.remove('score')
			} else if (thisDownvoteButton.classList.contains('active')) {
				thisScoreText.classList.add('score-down')
				thisScoreText.classList.remove('score-up')
				thisScoreText.classList.remove('score')
			} else {
				thisScoreText.classList.add('score')
				thisScoreText.classList.remove('score-up')
				thisScoreText.classList.remove('score-down')
			}
		}

		post_vote("/vote/" + type + "/" + id + "/" + voteDirection);
		
	}


	var upvoteButtons = document.getElementsByClassName('upvote-button')

	var downvoteButtons = document.getElementsByClassName('downvote-button')

	var voteDirection = 0

	for (var i = 0; i < upvoteButtons.length; i++) {
		upvoteButtons[i].addEventListener('click', upvote, false);
		upvoteButtons[i].addEventListener('keydown', function(event) {
			if (event.keyCode === 13) {
				upvote(event)
			}
		}, false)
	};

	for (var i = 0; i < downvoteButtons.length; i++) {
		downvoteButtons[i].addEventListener('click', downvote, false);
		downvoteButtons[i].addEventListener('keydown', function(event) {
			if (event.keyCode === 13) {
				downvote(event)
			}
		}, false)
	};

	// award modal

	function awardModal(link) {
		var target = document.getElementById("awardTarget");
		target.action = link;
	}

	function bruh(kind) {
		document.getElementById('giveaward').disabled=false;
		document.getElementById('kind').value=kind;
		try {document.getElementsByClassName('picked')[0].classList.toggle('picked');} catch(e) {}
		document.getElementById(kind).classList.toggle('picked')
	}
</script>

<div class="modal fade" id="awardModal" tabindex="-1" role="dialog" aria-labelledby="awardModalTitle" aria-hidden="true">
	<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title">Give Award</h5>
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true"><i class="far fa-times"></i></span>
				</button>
			</div>
			<div id="awardModalBody" class="modal-body">
				<form id="awardTarget" class="pt-3 pb-0" action="" method="post">
					<div class="card-columns awards-wrapper">
						{% for award in v.user_awards %}
							{% if award.owned %}
								<a href="javascript:void(0)" id="{{award.kind}}" class="card" onclick="bruh('{{award.kind}}')">
							{% else %}
								<a href="javascript:void(0)" id="{{award.kind}}" class="card disabled">
							{% endif %}
								<i class="{{award.icon}} {{award.color}}"></i><br />
								<span class="d-block pt-2" style="font-weight: bold; font-size: 14px; color:#E1E1E1">{{award.title}}</span>
								<span class="text-muted">{{award.owned}} owned</span>
							</a>
						{% endfor %}
					</div>
					<label for="note" class="pt-4">Note (optional):</label>
					<input id="kind" name="kind" value="" hidden>
					<textarea id="note" name="note" class="form-control" placeholder="Note to include in award notification"></textarea>
					<input id="giveaward" class="btn btn-primary" style="float:right" type="submit" value="Give Award" disabled>
				</form>
			</div>
		</div>
	</div>
</div>

<style>
	.awards-wrapper input[type="radio"] {
		display: none;
	}

	.awards-wrapper a {
		cursor: pointer;
		padding: 15px;
		text-align: center;
		text-transform: none!important;
	}

	.awards-wrapper a i {
		font-size: 45px;
	}

	.awards-wrapper a.disabled {
		opacity: 0.6;
	}

	.awards-wrapper a:hover, .picked {
		background-color: var(--primary)!important;
	}

	.awards-wrapper input[type="radio"]:checked+a {
		background-color: var(--primary)!important;
	}
</style>