Collapse nested lists, minor style changes

You can collapse nested lists now. And there were some minor style changes to the list bar.
digiwombat · Dec 24, 2016 · efb827f · efb827f
1 parent f824219
commit efb827f
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 48 deletions.
diff --git a/README.md b/README.md
@@ -6,4 +6,4 @@ Fork it, fix it, do whatever. I'll gladly roll in code changes.
 There is no ideological or political stance requirement to contribute to this project.  
 There is [no Code of Conduct](https://github.com/domgetter/NCoC) for this project.
 
-![Person Editing Screenshot](http://i.imgur.com/JhvrwMR.png)
+![UI Screenshot](https://i.imgur.com/6k80wAg.png)
diff --git a/index.html b/index.html
@@ -72,6 +72,11 @@
 		<div id="list-bar">
 			<div id="list-tools">
 				<div id="list-type"><input type="text" id="filter" placeholder="People" /></div>
+				<div id="collapse-all" title="Collapse All">
+					<span class="fa-stack fa-fw fa-lg">
+						<i class="fa fa-compress fa-stack-1x"></i>
+					</span>
+				</div>
 				<div id="add-item">
 					<span class="fa-stack fa-fw fa-lg">
 						<i class="fa fa-plus-square fa-stack-1x"></i>
@@ -82,6 +87,7 @@
 						<i class="fa fa-trash fa-stack-1x"></i>
 					</span>
 				</div>
+
 			</div>
 			<ol id="list-holder">
 			</ol>

diff --git a/lib/functions.js b/lib/functions.js
@@ -134,6 +134,11 @@ function init()
 		newWorld(false);
 	});
 
+	$('#collapse-all').on('click', function(){
+		$('#list-holder li').removeClass('expanded');
+		$('#list-holder li').addClass('collapsed');
+	});
+
 	document.getElementById("people-sel").addEventListener("click", function (e) {
 		loadList('person');
 	});
@@ -178,20 +183,16 @@ function init()
 	});
 
 	$('#filter').on('keyup', function(){
-		var li, i, name;
-		input = document.getElementById('filter');
-		filter = input.value.toUpperCase();
-		li = document.getElementById('list-holder').getElementsByTagName('li');
-
-		// Loop through all list items, and hide those who don't match the search query
-		for (i = 0; i < li.length; i++) {
-			name = li[i].getElementsByTagName("h3")[0];
-			if (name.innerHTML.toUpperCase().indexOf(filter) > -1) {
-				li[i].style.display = "";
+		var filter = jQuery(this).val();
+		jQuery("#list-holder li").each(function () {
+			if (jQuery(this).text().search(new RegExp(filter, "i")) < 0) {
+				jQuery(this).hide();
 			} else {
-				li[i].style.display = "none";
+				jQuery(this).show();
+				jQuery(this).children().show();
 			}
-		}
+		});
+
 	});
 
 	$('#main-area').on("click", "a", function(e) {
@@ -361,6 +362,7 @@ function loadList(type)
 			var li = document.createElement('li');
 			li.setAttribute('id', type + '-' + row[type + '_id']);
 			li.classList.add(type);
+			li.classList.add('expanded');
 			switch(type)
 			{
 				case 'person':
@@ -372,11 +374,11 @@ function loadList(type)
 						<p>
 							<span><strong>Age: </strong>` + row.person_age + `</span>
 							<span><strong>Gender: </strong>` + row.person_gender + `</span>
-						</p></div>`;
+						</p><div class="disclose fa fa-fw fa-chevron-circle-right"></div></div>`;
 					break;
 				default:
 					li.innerHTML = `<div class="li-color"><div class="` + type + `-image"><div></div></div>
-					<h3>` + row[type + '_name'] + `</h3></div>`;
+					<h3>` + row[type + '_name'] + `</h3><div class="disclose fa fa-fw fa-chevron-circle-right"></div></div>`;
 					break;
 
 			}
@@ -385,18 +387,34 @@ function loadList(type)
 	}
 
 
-	var sortable = $('#list-holder').nestedSortable({
+	$('#list-holder').nestedSortable({
 		handle: 'h3',
 		items: 'li',
 		toleranceElement: '> div',
+		isTree: true,
 		forcePlaceholderSize: true,
 		scroll: true,
+		startCollapsed: true,
+		branchClass: 'has-children',
+		collapsedClass: 'collapsed',
+		expandedClass: 'expanded',
 		relocate: function(){
 			worlddb[type + '_order'] = $('#list-holder').nestedSortable('toHierarchy', { attribute: 'id'});
+			$('.disclose').off();
+			$('.disclose').on('click', function() {
+				$(this).closest('li').toggleClass('collapsed').toggleClass('expanded');
+				$(this).toggleClass('right');
+			});
 			saveZip();
 		}
 	});
 
+	$('.disclose').off();
+	$('.disclose').on('click', function() {
+		$(this).closest('li').toggleClass('collapsed').toggleClass('expanded');
+		$(this).toggleClass('right');
+	});
+
 	var anchors = document.querySelectorAll('li.' + type + ' div.li-color');
 	for (var i = 0; i < anchors.length; i++) {
 		var current = anchors[i];
@@ -1098,6 +1116,7 @@ function parseNode(node, type)
 	var li = document.createElement('li');
 	li.setAttribute('id', type + '-' + row[type + '_id']);
 	li.classList.add(type);
+	li.classList.add('expanded');
 	switch(type)
 	{
 		case 'person':
@@ -1109,11 +1128,11 @@ function parseNode(node, type)
 				<p>
 					<span><strong>Age: </strong>` + row.person_age + `</span>
 					<span><strong>Gender: </strong>` + row.person_gender + `</span>
-				</p></div>`;
+				</p><div class="disclose fa fa-fw fa-chevron-circle-right"></div></div>`;
 			break;
 		default:
 			li.innerHTML = `<div class="li-color"><div class="` + type + `-image"><div></div></div>
-			<h3>` + row[type + '_name'] + `</h3></div>`;
+			<h3>` + row[type + '_name'] + `</h3><div class="disclose fa fa-fw fa-chevron-circle-right"></div></div>`;
 			break;
 
 	}

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "WorldMuncher",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "A cross-platform World Building program.",
   "repository": "https://github.com/digiwombat/world-muncher.git",
   "main": "index.js",

diff --git a/styles/style.css b/styles/style.css
@@ -294,7 +294,7 @@ hr.separator
 	box-sizing: border-box;
 }
 
-#add-item, #remove-item
+#add-item, #remove-item, #collapse-all
 {
 	cursor: pointer;
 }
@@ -306,6 +306,25 @@ hr.separator
 	padding: 10px;
 }
 
+.li-color:only-child .disclose
+{
+	visibility: hidden;
+}
+
+.disclose
+{
+	visibility: visible;
+	position:absolute;
+	bottom: 5px;
+	left: 45px;
+	transition: all 0.1s linear;
+}
+
+.expanded .disclose
+{
+	transform:rotate(90deg);
+}
+
 #list-holder, #list-holder ol
 {
 	display: block;
@@ -318,11 +337,21 @@ hr.separator
 	max-width: 350px;
 }
 
+#list-holder > li:last-child
+{
+	margin-bottom: 51px;
+}
+
 #list-holder ol
 {
 	overflow: hidden;
 }
 
+#list-holder .collapsed ol
+{
+	display: none;
+}
+
 #list-holder h3
 {
 	font: bold 20px "Open Sans";
@@ -363,6 +392,7 @@ hr.separator
 	border-bottom: 1px #3c3F41 solid;
 	-webkit-user-select: none;
 	overflow: hidden;
+	position: relative;
 }
 
 #list-holder ol li
@@ -387,32 +417,6 @@ li.ui-sortable-placeholder
 	visibility: visible !important;
 }
 
-/*
-#list-holder li.place-child
-{
-	box-sizing: border-box;
-	border-left: 15px #222 solid;
-}
-
-#list-holder li.place-second-child
-{
-	box-sizing: border-box;
-	border-left: 25px #222 solid;
-}
-
-#list-holder li.place-third-child
-{
-	box-sizing: border-box;
-	border-left: 35px #222 solid;
-}*/
-
-
-
-#list-holder li:last-of-type
-{
-	border-bottom: 0;
-}
-
 #list-holder .li-color:hover
 {
 	background: #2B303B;
@@ -459,9 +463,10 @@ li.ui-sortable-placeholder
 	background-color: transparent;
 	color: #EEEEEE;
 	border: 0;
-	border-bottom: 2px solid #90B0AE;
+	border-bottom: 1px solid #90B0AE;
+	border-right: 1px solid #90B0AE;
 	height: 100%;
-	width: 75%;
+	width: 95%;
 	font-size: 16px;
 	padding: 0 5px;
 	outline: 0;