LewisGet · November 18, 2020 05:28
diff --git a/card.html b/card.html
 <!doctype html>
 <html lang="en">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

        <title>Cards</title>
        <style type="text/css">
            h1
            {
                font-size: 1.35em;
            }
        </style>
    </head>
    <body>
        <template id="card_basic">
            <div class="card">
                <div class="card-body">
                    <div class="row justify-content-between">
                        <h1 class="card-title col-8">title</h1>
                        <span class="card-type badge badge-secondary col-2">type</span>
                    </div>
                    <p class="card-text">content</p>
                </div>
            </div>
        </template>

        <div id="content">
        </div>

        <!-- Optional JavaScript; choose one of the two! -->

        <!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

        <script type="text/javascript">
            var temp = document.getElementById("card_basic").content;

            var content = document.getElementById("content");

            var row = document.createElement("div");
            row.setAttribute("class", "row");

            var col = document.createElement("div");
            col.setAttribute("class", "col");

            var card_type = ["Block"];
            var card_content = [
                ["BlockBreakEvent", "Called when a block is broken by a player."],
                ["BlockBurnEvent", "Called when a block is destroyed as a result of being burnt by fire."],
                ["BlockCanBuildEvent", "Called when we try to place a block, to see if we can build it here or not."],
                ["BlockDamageEvent", "Called when a block is damaged by a player."],
                ["BlockDispenseEvent", "Called when an item is dispensed from a block."],
                ["BlockEvent", "Represents a block related event."],
                ["BlockExpEvent", "An event that's called when a block yields experience."],
                ["BlockFadeEvent", "Called when a block fades, melts or disappears based on world conditions"],
                ["BlockFormEvent", "Called when a block is formed or spreads based on world conditions."],
                ["BlockFromToEvent", "Represents events with a source block and a destination block, currently only applies to liquid (lava and water) and teleporting dragon eggs."],
                ["BlockGrowEvent", "Called when a block grows naturally in the world."],
                ["BlockIgniteEvent", "Called when a block is ignited."],
                ["BlockMultiPlaceEvent", "Fired when a single block placement action of a player triggers the creation of multiple blocks(e.g."],
                ["BlockPhysicsEvent", "Thrown when a block physics check is called"],
                ["BlockPistonEvent", "Called when a piston block is triggered"],
                ["BlockPistonExtendEvent", "Called when a piston extends"],
                ["BlockPistonRetractEvent", "Called when a piston retracts"],
                ["BlockPlaceEvent", "Called when a block is placed by a player."],
                ["BlockRedstoneEvent", "Called when a redstone current changes"],
                ["BlockSpreadEvent", "Called when a block spreads based on world conditions."],
                ["EntityBlockFormEvent", "Called when a block is formed by entities."],
                ["LeavesDecayEvent", "Called when leaves are decaying naturally."],
                ["NotePlayEvent", "Called when a note block is being played through player interaction or a redstone current."],
                ["SignChangeEvent", "Called when a sign is changed by a player."]
            ];

            var row_id = 0;

            for (var i = 0; i < card_content.length; i++)
            {
                var this_card_content = card_content[i];

                var this_card_dom = document.importNode(temp, true);
                this_card_dom.querySelector("h1.card-title").innerText = (this_card_content[0].split(/(?=[A-Z])/)).join(" ");
                this_card_dom.querySelector("span.card-type").innerText = card_type[0];
                this_card_dom.querySelector("p.card-text").innerText = this_card_content[1];

                var card_col = document.importNode(col, true);
                card_col.appendChild(this_card_dom);

                if (i % 6 == 0)
                {
                    row_id++;

                    var card_row = document.importNode(row, true);
                    card_row.setAttribute("id", "row_" + row_id.toString());
                    card_row.appendChild(card_col);

                    content.appendChild(document.importNode(card_row, true));
                }
                else
                {
                    var card_row = document.getElementById("row_" + row_id.toString());
                    card_row.appendChild(card_col);
                }
            }
        </script>
    </body>
 </html>
	<!doctype html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

	<title>Cards</title>
	<style type="text/css">
	h1
	{
	font-size: 1.35em;
	}
	</style>
	</head>
	<body>
	<template id="card_basic">
	<div class="card">
	<div class="card-body">
	<div class="row justify-content-between">
	<h1 class="card-title col-8">title</h1>
	<span class="card-type badge badge-secondary col-2">type</span>
	</div>
	<p class="card-text">content</p>
	</div>
	</div>
	</template>

	<div id="content">
	</div>

	<!-- Optional JavaScript; choose one of the two! -->

	<!-- Option 1: jQuery and Bootstrap Bundle (includes Popper) -->
	<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

	<script type="text/javascript">
	var temp = document.getElementById("card_basic").content;

	var content = document.getElementById("content");

	var row = document.createElement("div");
	row.setAttribute("class", "row");

	var col = document.createElement("div");
	col.setAttribute("class", "col");

	var card_type = ["Block"];
	var card_content = [
	["BlockBreakEvent", "Called when a block is broken by a player."],
	["BlockBurnEvent", "Called when a block is destroyed as a result of being burnt by fire."],
	["BlockCanBuildEvent", "Called when we try to place a block, to see if we can build it here or not."],
	["BlockDamageEvent", "Called when a block is damaged by a player."],
	["BlockDispenseEvent", "Called when an item is dispensed from a block."],
	["BlockEvent", "Represents a block related event."],
	["BlockExpEvent", "An event that's called when a block yields experience."],
	["BlockFadeEvent", "Called when a block fades, melts or disappears based on world conditions"],
	["BlockFormEvent", "Called when a block is formed or spreads based on world conditions."],
	["BlockFromToEvent", "Represents events with a source block and a destination block, currently only applies to liquid (lava and water) and teleporting dragon eggs."],
	["BlockGrowEvent", "Called when a block grows naturally in the world."],
	["BlockIgniteEvent", "Called when a block is ignited."],
	["BlockMultiPlaceEvent", "Fired when a single block placement action of a player triggers the creation of multiple blocks(e.g."],
	["BlockPhysicsEvent", "Thrown when a block physics check is called"],
	["BlockPistonEvent", "Called when a piston block is triggered"],
	["BlockPistonExtendEvent", "Called when a piston extends"],
	["BlockPistonRetractEvent", "Called when a piston retracts"],
	["BlockPlaceEvent", "Called when a block is placed by a player."],
	["BlockRedstoneEvent", "Called when a redstone current changes"],
	["BlockSpreadEvent", "Called when a block spreads based on world conditions."],
	["EntityBlockFormEvent", "Called when a block is formed by entities."],
	["LeavesDecayEvent", "Called when leaves are decaying naturally."],
	["NotePlayEvent", "Called when a note block is being played through player interaction or a redstone current."],
	["SignChangeEvent", "Called when a sign is changed by a player."]
	];

	var row_id = 0;

	for (var i = 0; i < card_content.length; i++)
	{
	var this_card_content = card_content[i];

	var this_card_dom = document.importNode(temp, true);
	this_card_dom.querySelector("h1.card-title").innerText = (this_card_content[0].split(/(?=[A-Z])/)).join(" ");
	this_card_dom.querySelector("span.card-type").innerText = card_type[0];
	this_card_dom.querySelector("p.card-text").innerText = this_card_content[1];

	var card_col = document.importNode(col, true);
	card_col.appendChild(this_card_dom);

	if (i % 6 == 0)
	{
	row_id++;

	var card_row = document.importNode(row, true);
	card_row.setAttribute("id", "row_" + row_id.toString());
	card_row.appendChild(card_col);

	content.appendChild(document.importNode(card_row, true));
	}
	else
	{
	var card_row = document.getElementById("row_" + row_id.toString());
	card_row.appendChild(card_col);
	}
	}
	</script>
	</body>
	</html>