fixing click/toggle behaviour

This commit is contained in:
Philip Sargent 2020-04-13 12:46:57 +01:00
parent 0b90ebdd4e
commit 234f4234bb
2 changed files with 137 additions and 104 deletions

View File

@ -5,24 +5,25 @@
<meta charset="utf-8">
<meta name="keywords" content="NOEDIT">
</head>
<body>
<h1>Expo To-Do List</h1>
<link rel="stylesheet" type="text/css" href="todo-styles.css" />
<body>
<h1>Expo To-Do List</h1>
<link rel="stylesheet" type="text/css" href="todo-styles.css" />
<button onclick="window.location.href = 'todo.html_edit';">Edit this to-do list</button>
<!--
<!--
<button onclick="window.location.href = 'x-todo.html_edit';">Update this to-do list</button>
-->
<!--
<label for="toggle-1">Toggle visibility of all sub-items</label>
<input type="checkbox" id="toggle-1">
-->
<!-- ------------------- Don't touch anything above this line --------------------------->
<!--
<label for="toggle-1">Toggle visibility of all sub-items</label>
<input type="checkbox" id="toggle-1">
-->
<!-- ------------------- Don't touch anything above this line --------------------------->
<h2>How this works</h2>
<p><b>Click twice on a sub-heading to reveal</b> the individual to-do items. Click again to hide.<br />
<p><b>Click on a sub-heading to reveal</b> the individual to-do items. Click again to hide.<br />
If a heading is in italics, then there are hidden items.
<p><b>Click on the main "How this works" heading</b> to toggle reveal/hide <b>everything.</b>
<p>Printing this page uses a much smaller font. Complain to <a href="mailto:expo-tech@lists.wookware.org">the nerd list</a> if you don't like this behaviour.
<p>Edit this page by clicking on the big blue button. It uses the same "Edit this page" function that you may have used before. Just be careful not to touch the code at the top and bottom of the page.
@ -33,19 +34,25 @@ If a heading is in italics, then there are hidden items.
<dl>
<dt><!--2020-03-26 psargent-->Wallets and new-cave</dt>
<dd><!--2020-03-26 psargent-->Explain (in the wallets process) how to view the surveys
<dd><!--2020-03-26 psargent-->Explain (in the wallets process) how to view the surveys
online so that <br>&nbsp;&nbsp;(1) you can see an example of how to do your new one,
and <br>&nbsp;&nbsp;(2) so that you can check that you have done it properly when you
have finished.</dd>
<dd><!--2020-03-26 psargent-->Explain how to link a new cave into the other caves in
<dd><!--2020-03-26 psargent-->Explain how to link a new cave into the other caves in
troggle filesystem</dd>
<dd><!--2020-03-26 psargent-->Explain how to add photos with the correct URL format to sub-HTML files attached to New Caves</dd>
<dt><!--2020-04-11 psargent-->svx check</dt>
<dd><!--2020-03-26 psargent-->Explain how to add photos with the correct URL format to sub-HTML files attached to New Caves</dd>
<dt><!--2020-04-13 psargent-->svx check</dt>
<dd>explain command line to run on newly typed survex file to check for format errors '$cavern xxxx.svx'
<dd>explain when to use svxtrace.py <a href="troggle/scriptscurrent.html">current scripts</a>
<dt><!--2020-04-13 psargent-->QMs check</dt>
<dd>explain when to use svx2qm.py -> qms.csv-> tablize-qms.pl <a href="troggle/scriptscurrent.html">current scripts</a>
<dd>explain when to use find-dead-qms.py and qmreader.pl <a href="troggle/scriptscurrent.html">current scripts</a>
</dl>
<h3>Surveys data entry</h3>
<dl>
<dt><!--2020-04-13 psargent-->QMs check</dt>
<dd>Collect together the old "to do" and "readme" notes and put them in a standard place: expoweb/[year]/TODO.html(with self-edit instructionslike this page)
<dt>Write code to automatically extract ref info about wallets from tunnel xml files
<dd><!--2020-04-03 psargent-->This will replace :drawings:chk-xml.txt as used by :drawings:check-xml.sh
<dd><!--2020-04-03 psargent-->Do similar for Therion files when people start using #REF comments
@ -111,19 +118,19 @@ If a heading is in italics, then there are hidden items.
<dt><!--2020-04-11 psargent-->Wookey Overview presentation
<dd>extract content from <a href="http://wookware.org/talks/expocomputer/#/10">Troggle</a> which does not render properly and extract the HTML not in slide format - correcting things now outdated.
</dl>
<h3>Photos</h3>
<dl>
<dt><!--2020-04-03 psargent-->Fix the BINS package
</dl>
<h3>Photos</h3>
<dl>
<dt><!--2020-04-03 psargent-->Fix the BINS package
<dd><!--2020-04-03 psargent-->set up git on the BINS software? Fix base url sautret.org</dd>
<dd><!--2020-04-03 psargent-->set up a cron / Makefile job to run BINS</dd>
<dd><!--2020-04-03 psargent-->why is 'updatephotos' script in expofiles? </dd>
<dd>Document the ~expo/webphotos/ directory and how it works
<dd>Why does expofiles/photos/xml/ get created containing all the generated xml files? Fix this.
</dl>
</dl>
<h3>System Documentation</h3>
<dl><!-- 2020-04-11 psargent -->
@ -152,7 +159,7 @@ If a heading is in italics, then there are hidden items.
</dl>
<h3>Troggle</h3>
<dl>
<dt>Better import error messages
@ -167,11 +174,11 @@ If a heading is in italics, then there are hidden items.
</dl>
<h3>Expo Server</h3>
<dl>
<dt><!--2020-03-26 psargent--> document directory structure
<dd><!--2020-04-03 psargent-->as per Julian's GitHub list - then close that issue</dd>
<h3>Expo Server</h3>
<dl>
<dt><!--2020-03-26 psargent--> document directory structure
<dd><!--2020-04-03 psargent-->as per Julian's GitHub list - then close that issue</dd>
<dt>permissions
<dd><!--2020-04-03 psargent-->do we need a cron job or has the group membership fix fixed it ? either way, document it.
@ -186,103 +193,129 @@ If a heading is in italics, then there are hidden items.
< <dd><!--2020-04-03 psargent--> BUY A4 plastic boxes for filing cabinet for logbooks getting damp there.
<dd>2017, 2018, 2019 wallet binders are in Philip S.'s house.
</dl>
<h3>
<font color="fuchsia">This to-do-list gadget itself</font>
</h3>
<h3>
<font color="fuchsia">This to-do-list gadget itself</font>
</h3>
<dl>
<dt>Status
<dd>Try the <a href="x-todo.html"><em>Experimental</em> to-do list</a> - no extra display capabilities yet.
<dd>Fix the "click twice" on startup. Make it only click once to change display state of the DT tag
<dt><!--2020-03-26 psargent-->Eventual aim
<dd><!--2020-03-26 psargent-->to replace GitHub <a href="https://github.com/CaveSurveying/CUCCexposurveyissues/issues">
CUCCexposurveyissues</a> for non-tunnel, non-GIS issues.</dd>
<dd><!--2020-03-26 psargent-->We need two of these: <br>1.for expo systems work (troggle & scripts) - the current priority as we have nowhere currently that Wookey is willing to use
<br>2.for survey data progress/issues (though troggle itself can be used for some of this if cleaned up a bit)
</dd>
<dt><!--2020-03-26 psargent-->Try to automate simple functions in javascript
<dd><!--2020-03-26 psargent-->to control this document
in-place (tick, delete) instead of using the <a
href="https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline/">
tinymce</a> HTML editor in Django</dd>
<dt><!--2020-03-26 psargent-->Eventual aim
<dd><!--2020-03-26 psargent-->to replace GitHub <a href="https://github.com/CaveSurveying/CUCCexposurveyissues/issues">
CUCCexposurveyissues</a> for non-tunnel, non-GIS issues.</dd>
<dd><!--2020-03-26 psargent-->We need two of these: <br>1.for expo systems work (troggle & scripts) - the current priority as we have nowhere currently that Wookey is willing to use
<br>2.for survey data progress/issues (though troggle itself can be used for some of this if cleaned up a bit)
</dd>
<dt><!--2020-03-26 psargent-->Try to automate simple functions in javascript
<dd><!--2020-03-26 psargent-->to control this document
in-place (tick, delete) instead of using the <a
href="https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline/">
tinymce</a> HTML editor in Django</dd>
<dd><!--2020-03-26 psargent-->Maybe restructure whole page as JSON and use
javascript editor to create (edit), re-order and demote items. </dd>
<dd><!--2020-03-26 psargent-->if using tinymcs, use the INLINE mode. </dd>
<dd><!--2020-03-26 psargent-->Implement comments on an issue, mimicking GitHub issues wiki</dd>
<dd><!--2020-03-26 psargent-->Use javascript to skip over the _edit page and submit changes
direct to server when updating. Needs direct POST and include the javascript in the posted content.</dd>
<dd><!--2020-03-26 psargent-->Implement comments on an issue, mimicking GitHub issues wiki</dd>
<dd><!--2020-03-26 psargent-->Use javascript to skip over the _edit page and submit changes
direct to server when updating. Needs direct POST and include the javascript in the posted content.</dd>
<dd><!--2020-03-26 psargent-->checkboxes so that items can be ticked (which also does strike-through)</dd>
<dd><!--2020-04-03 psargent-->promotion/demotion options?</dd>
<dd><!--2020-03-26 psargent-->bin icon to delete an item? Better to have an archive process.</dd>
<dd><!--2020-03-26 psargent-->bin icon to delete an item? Better to have an archive process.</dd>
<dt>Local WSL server
<dd><!--2020-04-03 psargent-->Why is it using recuced-capability tinymce, a paths problem ?
<dt>Italics management
<dd><!--2020-04-03 psargent-->Hide ALL DD if any Heading clicked.
<dd><!--2020-04-03 psargent-->Put DL into italics when *any* DD is hidden
</dl>
<hr>
<!-- ------------------- Do not touch anything below here either ------------------------>
<hr>
<!-- ------------------- Do not touch anything below here either ------------------------>
<!--2020-03-26--> Testing area..
<div id="demo">Demonstation text as initially read from disc</div>
<script>
document.getElementById("demo").innerHTML = "Demonstation innerHTML change CONFIRMED";
<script>
document.getElementById("demo").innerHTML = "Demonstation innerHTML change CONFIRMED";
</script>
<!--Bother. The DOM is not carried across to the _edit page. It looks like the _edit page just re-reads
the original file from disc. So storing changes done by js will mean working directly with the POST action and a form. -->
<!--Bother. The DOM is not carried across to the _edit page. It looks like the _edit page just re-reads
the original file from disc. So storing changes done by js will mean working directly with the POST action and a form. -->
<script>
// TO DO - make the <dt> italic when any of the <dd> following it are hidden.
// Set up the click handlers:
var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = hideable;
}
var itemlist = document.getElementsByTagName('dt');
for (i = 0; i < itemlist.length; i++) {
// Set up the click handlers:
var itemlist = document.getElementsByTagName('h2');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = h2toggle;
}
var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = hideable;
}
var itemlist = document.getElementsByTagName('dt');
for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = showable;
}
function showable () {
// When clicking on a <dt> item, show or not all the following <dd> elements
if (this.style.fontStyle !== "italic") {
this.style.fontStyle = "italic";
} else {
this.style.fontStyle = "normal";
}
var ddO = this.nextElementSibling;
while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){
if (this.style.fontStyle === "italic") {
ddO.style.display = 'none';
} else {
ddO.style.display = 'block';
}
ddO = ddO.nextElementSibling;
}
}
function hideable () {
}
function showable () {
// When clicking on a <dt> item, show or not all the following <dd> elements
if (this.style.fontStyle != "italic") {
this.style.fontStyle = "italic";
} else {
this.style.fontStyle = "normal";
}
var ddO = this.nextElementSibling;
while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){
if (this.style.fontStyle != "normal") {
ddO.style.display = 'none';
} else {
ddO.style.display = 'block';
}
ddO = ddO.nextElementSibling;
}
}
function hideable () {
// When clicking on a <dd> item, show or not itself
var x = this;
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
var x = this;
if (x.style.display != "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function h2toggle () {
// When clicking on a <h2> item, toggle the display of absolutely everything
var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) {
x = itemlist[i]
if (x.style.display != "block") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
var dtlist = document.getElementsByTagName('dt');
for (i = 0; i < dtlist.length; i++) {
x = dtlist[i]
if (x.style.fontStyle != "normal") {
x.style.fontStyle = "normal";
} else {
x.style.fontStyle = "italic";
}
}
}
</script>
<hr /></body>
</html>

View File

@ -19,7 +19,7 @@
<li><a href="scriptscurrent.html#area">make-areaindices.py</a> (unmaintained?)
<li><a href="scriptscurrent.html#prosp">make-prospectingguide-new.py</a> and <a href="">prospecting_guide_short.py</a> - (unmaintained?)</li><br />
<li><a href="../bankofexpo.html">boe</a> Bank of Expo (perl) runs the accounts preceding and during expo
<li><a href="scriptscurrent.html#wallets">bierbook.tex</a> LaTeX script for generating the bierbook - a new list of names and dates each year
<li><a href="scriptscurrent.html#latex">bierbook.tex</a> LaTeX script for generating the bierbook - a new list of names and dates each year
<li><a href="scriptscurrent.html#latex">seshbook.tex</a> LaTeX script for generating the seshbook - works from the same list of names
<li><a href="scriptscurrent.html#latex">therionpage.tex</a> LaTeX script anbd makefile for generating therion-style protractors</li><br />
<li><a href="scriptscurrent.html#latex">wallets.py</a> generates statuspages and to-do list pages for survey data production.