# Make HTML Page List script
# Author: Theodore Zacharia
# V1.0 - initial release
# April 2019
# simple script to create a hierarchical list of all pages in the site

TARGETPAGE="pagelist.html"
T1=flist

ADIRSET="../* ../sw ../trips"			# predefined list
ADIRSET=$(find ../* -type d -maxdepth 1)	# all dirs


cat << EOF > $TARGETPAGE
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}


button.collapsible.active, button.collapsible:hover {
    background-color: #555;
}

button.collapsible:after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

button.collapsible.active:after {
    content: "\2212";
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
    transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
This is just a dump of all html pages on the site, some will definetly NOT work as they are old
or need to be called in a certain context
<p>
<p>Page Sections:</p>
EOF

for ADIR in $(ls -d $ADIRSET) ../*.html
do
	echo "checking $ADIR"
	if [ -d $ADIR ]
	then
		find $ADIR -maxdepth 1 -name "*.html" > $T1
	else
		echo $ADIR > $T1
	fi
	CT=`wc -l $T1 | awk '{print $1}'`
	if [ $CT -eq 0 ]
	then
		continue
	fi
	
	if [ -d $ADIR ]
	then
		echo "<button class=\"collapsible\">Open $ADIR</button>" >> $TARGETPAGE
		echo "<div class=\"content\">" >> $TARGETPAGE
	fi
	
	# create a layer which can open and close
	while IFS= read -r APAGE
	do
		echo "APAGE=$APAGE"
		echo "<br><a href="$APAGE">$APAGE</a>" >> $TARGETPAGE
	done<"$T1"

	if [ -d $ADIR ]
	then
		echo "</div>" >> $TARGETPAGE
	fi
done


cat << EOF1 >> $TARGETPAGE


<script>
var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
</script>


</body>
</html>
EOF1

# now make the colour version of this script for the page
#pygmentize -l shell -f html -o makeall.colour.html  makeall.sh
highlight makeall.sh > makeall.colour.html

rm -f $T1