fixing click/toggle behaviour

This commit is contained in:
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 charset="utf-8">
<meta name="keywords" content="NOEDIT"> <meta name="keywords" content="NOEDIT">
</head> </head>
<body> <body>
<h1>Expo To-Do List</h1> <h1>Expo To-Do List</h1>
<link rel="stylesheet" type="text/css" href="todo-styles.css" /> <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 = 'todo.html_edit';">Edit this to-do list</button>
<!-- <!--
<button onclick="window.location.href = 'x-todo.html_edit';">Update 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> <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. 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>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. <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> <dl>
<dt><!--2020-03-26 psargent-->Wallets and new-cave</dt> <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, 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 and <br>&nbsp;&nbsp;(2) so that you can check that you have done it properly when you
have finished.</dd> 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> 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> <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> <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 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> </dl>
<h3>Surveys data entry</h3> <h3>Surveys data entry</h3>
<dl> <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 <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-->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 <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 <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. <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> </dl>
<h3>Photos</h3> <h3>Photos</h3>
<dl> <dl>
<dt><!--2020-04-03 psargent-->Fix the BINS package <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 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-->set up a cron / Makefile job to run BINS</dd>
<dd><!--2020-04-03 psargent-->why is 'updatephotos' script in expofiles? </dd> <dd><!--2020-04-03 psargent-->why is 'updatephotos' script in expofiles? </dd>
<dd>Document the ~expo/webphotos/ directory and how it works <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. <dd>Why does expofiles/photos/xml/ get created containing all the generated xml files? Fix this.
</dl> </dl>
<h3>System Documentation</h3> <h3>System Documentation</h3>
<dl><!-- 2020-04-11 psargent --> <dl><!-- 2020-04-11 psargent -->
@@ -152,7 +159,7 @@ If a heading is in italics, then there are hidden items.
</dl> </dl>
<h3>Troggle</h3> <h3>Troggle</h3>
<dl> <dl>
<dt>Better import error messages <dt>Better import error messages
@@ -167,11 +174,11 @@ If a heading is in italics, then there are hidden items.
</dl> </dl>
<h3>Expo Server</h3> <h3>Expo Server</h3>
<dl> <dl>
<dt><!--2020-03-26 psargent--> document directory structure <dt><!--2020-03-26 psargent--> document directory structure
<dd><!--2020-04-03 psargent-->as per Julian's GitHub list - then close that issue</dd> <dd><!--2020-04-03 psargent-->as per Julian's GitHub list - then close that issue</dd>
<dt>permissions <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. <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><!--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. <dd>2017, 2018, 2019 wallet binders are in Philip S.'s house.
</dl> </dl>
<h3> <h3>
<font color="fuchsia">This to-do-list gadget itself</font> <font color="fuchsia">This to-do-list gadget itself</font>
</h3> </h3>
<dl> <dl>
<dt>Status <dt>Status
<dd>Try the <a href="x-todo.html"><em>Experimental</em> to-do list</a> - no extra display capabilities yet. <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 <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 <dt><!--2020-03-26 psargent-->Eventual aim
<dd><!--2020-03-26 psargent-->to replace GitHub <a href="https://github.com/CaveSurveying/CUCCexposurveyissues/issues"> <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> 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 <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) <br>2.for survey data progress/issues (though troggle itself can be used for some of this if cleaned up a bit)
</dd> </dd>
<dt><!--2020-03-26 psargent-->Try to automate simple functions in javascript <dt><!--2020-03-26 psargent-->Try to automate simple functions in javascript
<dd><!--2020-03-26 psargent-->to control this document <dd><!--2020-03-26 psargent-->to control this document
in-place (tick, delete) instead of using the <a in-place (tick, delete) instead of using the <a
href="https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline/"> href="https://www.tiny.cloud/docs/general-configuration-guide/use-tinymce-inline/">
tinymce</a> HTML editor in Django</dd> tinymce</a> HTML editor in Django</dd>
<dd><!--2020-03-26 psargent-->Maybe restructure whole page as JSON and use <dd><!--2020-03-26 psargent-->Maybe restructure whole page as JSON and use
javascript editor to create (edit), re-order and demote items. </dd> 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-->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-->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 <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> 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-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-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 <dt>Local WSL server
<dd><!--2020-04-03 psargent-->Why is it using recuced-capability tinymce, a paths problem ? <dd><!--2020-04-03 psargent-->Why is it using recuced-capability tinymce, a paths problem ?
<dt>Italics management <dt>Italics management
<dd><!--2020-04-03 psargent-->Hide ALL DD if any Heading clicked. <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 <dd><!--2020-04-03 psargent-->Put DL into italics when *any* DD is hidden
</dl> </dl>
<hr> <hr>
<!-- ------------------- Do not touch anything below here either ------------------------> <!-- ------------------- Do not touch anything below here either ------------------------>
<!--2020-03-26--> Testing area.. <!--2020-03-26--> Testing area..
<div id="demo">Demonstation text as initially read from disc</div> <div id="demo">Demonstation text as initially read from disc</div>
<script> <script>
document.getElementById("demo").innerHTML = "Demonstation innerHTML change CONFIRMED"; document.getElementById("demo").innerHTML = "Demonstation innerHTML change CONFIRMED";
</script> </script>
<!--Bother. The DOM is not carried across to the _edit page. It looks like the _edit page just re-reads <!--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. --> the original file from disc. So storing changes done by js will mean working directly with the POST action and a form. -->
<script> <script>
// TO DO - make the <dt> italic when any of the <dd> following it are hidden. // TO DO - make the <dt> italic when any of the <dd> following it are hidden.
// Set up the click handlers: // Set up the click handlers:
var itemlist = document.getElementsByTagName('dd'); var itemlist = document.getElementsByTagName('h2');
for (i = 0; i < itemlist.length; i++) { for (i = 0; i < itemlist.length; i++) {
itemlist[i].onclick = hideable; itemlist[i].onclick = h2toggle;
} }
var itemlist = document.getElementsByTagName('dt'); var itemlist = document.getElementsByTagName('dd');
for (i = 0; i < itemlist.length; i++) { 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; itemlist[i].onclick = showable;
} }
function showable () { function showable () {
// When clicking on a <dt> item, show or not all the following <dd> elements // When clicking on a <dt> item, show or not all the following <dd> elements
if (this.style.fontStyle !== "italic") { if (this.style.fontStyle != "italic") {
this.style.fontStyle = "italic"; this.style.fontStyle = "italic";
} else { } else {
this.style.fontStyle = "normal"; this.style.fontStyle = "normal";
} }
var ddO = this.nextElementSibling; var ddO = this.nextElementSibling;
while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){ while((ddO !== null) && (ddO.nodeName.toLowerCase() == 'dd')){
if (this.style.fontStyle === "italic") { if (this.style.fontStyle != "normal") {
ddO.style.display = 'none'; ddO.style.display = 'none';
} else { } else {
ddO.style.display = 'block'; ddO.style.display = 'block';
} }
ddO = ddO.nextElementSibling; ddO = ddO.nextElementSibling;
} }
} }
function hideable () { function hideable () {
// When clicking on a <dd> item, show or not itself // When clicking on a <dd> item, show or not itself
var x = this; var x = this;
if (x.style.display === "none") { if (x.style.display != "block") {
x.style.display = "block"; x.style.display = "block";
} else { } else {
x.style.display = "none"; x.style.display = "none";
} }
} }
</script> 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> <hr /></body>
</html> </html>

View File

@@ -19,7 +19,7 @@
<li><a href="scriptscurrent.html#area">make-areaindices.py</a> (unmaintained?) <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="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="../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">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">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. <li><a href="scriptscurrent.html#latex">wallets.py</a> generates statuspages and to-do list pages for survey data production.