Blueprint Page Creator

blueprint-page-creator.markdown

Blueprint Page Creator

A Pen by Chase Harrison on CodePen.

License.

index.html

<div id="pageTable">
  <div class="pageInput">
    <div class="parent">
      <span>Parent Page</span>
      <input class="parentText" type="text" placeholder="Parent Page Name" value="" />
      <input class="parentNotes" type="text" placeholder="Parent Page Notes" value="" />
      <a class="removeAll">---</a>
    </div>
    <a class="addSubpage">+ Add Subpage</a> | <a class="removeSubpage">- Remove Subpage</a>
  </div>
  <a class="addParent">+ Add Parent</a> | <a class="removeParent">- Remove Parent</a>
</div>



<button id="test" onclick="assignNames()">Submit</button>

script.js

$(document).ready(function(){
/* Assigns names to textboxes for blueprint wizard */
var parentCount = 0;
var htmlChild = '<div class="child"> <span>Child Page</span> <input type="text" placeholder="Child Page Name" value=""/> <input type="text" placeholder="Child Page Notes" value=""/><a onclick="this.parentNode.remove()" class="removeSpecificSubpage">---</a> </div>';
$("#pageTable a.addSubpage").click(function () {
	$(htmlChild).insertBefore($(this));
});
$("#pageTable a.removeSubpage").click(function () {
	if ($(this).prev().prev().hasClass("parent")) {
		alert("You cannot delete the parent page with this button.");
	} else {
		$(this).prev().prev().remove();
	}
});
$("#pageTable a.addParent").click(function () {
	var parentClone = $(this).prev().clone(true, true).find("input:text").val("").end();
	$(parentClone).find("div.child").remove();
	$(parentClone).insertBefore($(this));
});
$("#pageTable a.removeParent").click(function () {
	if (!$(this).siblings().eq(1).hasClass("pageInput")) {
		alert("You cannot delete the only parent page");
	} else {
		$(this).prev().prev().remove();
	}
});
$("#pageTable a.removeAll").click(function () {
	var countPageInput = $("div.pageInput").length;
	if (countPageInput === 1) {
		alert("You cannot delete the only parent page");
	} else {
		$(this).parent().parent().remove();
	}
});
});
function assignNames() {
	var parentCount = 0;
	var childCount = 0;
  var htmlChild = '<div class="child"> <span>Child Page</span> <input type="text" placeholder="Child Page Name" value=""/> <input type="text" placeholder="Child Page Notes" value=""/><a onclick="this.parentNode.remove()" class="removeSpecificSubpage">---</a> </div>';
	$("#pageTable div.pageInput").each(function () {
		$("#pageTable div.pageInput div.parent").each(function () {
			if (!$(this).next().hasClass("child")) {
				$(htmlChild).insertAfter($(this)).css("display","none");
			}
		});
		childCount = 0;
		$(this).find("input.parentText").attr("name", "blueprint[siteArchitecture][" + parentCount + "][parentPageName]");
		$(this).find("input.parentNotes").attr("name", "blueprint[siteArchitecture][" + parentCount + "][parentPageNotes]");
		$(this).find("div.child").each(function () {
			$(this).find("input:first-of-type").attr("name", "blueprint[siteArchitecture][" + parentCount + "][subpage][" + childCount + "][childPageName]");
			$(this).find("input:last-of-type").attr("name", "blueprint[siteArchitecture][" + parentCount + "][subpage][" + childCount + "][childPageNotes]");
			childCount++;
		});
		parentCount++;
	});
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

#pageTable a {display: inline-block; padding: 5px; border-radius: 6px; margin: 5px 0; cursor: pointer}

#pageTable a.addSubpage {background-color: #4cc500; color: #fff; font-size: 11px;}
#pageTable a.removeSubpage, #pageTable a.removeSpecificSubpage {background-color: #c50000; color: #fff; font-size: 11px;}
#pageTable a.addParent {background-color: #605dff; color: #fff;}
#pageTable a.removeParent, #pageTable a.removeAll {background-color: #1e1d6f; color: #fff;}

#pageTable input {display: inline-block;}
#pageTable div.pageInput {padding: 10px 0;}