Browse Source

generic collapsible divs

pull/1/head
Brennen Bearnes 7 years ago
parent
commit
9930cf4f20
6 changed files with 105 additions and 55 deletions
  1. +28
    -9
      footer.html
  2. +51
    -23
      index.html
  3. +16
    -14
      index.md
  4. +5
    -4
      literary_environment/index.md
  5. +3
    -3
      render.pl
  6. +2
    -2
      userland.css

+ 28
- 9
footer.html View File

@ -1,19 +1,38 @@
<script>
$(document).ready(function () {
// TODO: generalize this.
// ☜ ☝ ☞ ☟
// ☆ ✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✩ ✪
var closed_sigil = '⇩';
var open_sigil = '⇧';
var $toc_full = $("#toc-full");
var $clicker = $('<button id=toc-clicker>+/-</button>');
$("#toc").find('h2').append($clicker);
$toc_full.hide();
$clicker.show();
var togglesigil = function (elem) {
var sigil = $(elem).html();
if (sigil === closed_sigil) {
$(elem).html(open_sigil);
} else {
$(elem).html(closed_sigil);
}
};
$clicker.click(function (e) {
$toc_full.toggle({
duration: 550
$(".details").each(function () {
var $this = $(this);
var $button = $('<button class=clicker-button>' + closed_sigil + '</button>');
var $details_full = $(this).find('.full');
$button.click(function (e) {
e.preventDefault();
$details_full.toggle({
duration: 550
});
togglesigil(this);
});
$(this).find('.clicker').append($button);
$button.show();
});
$('.details .full').hide();
});
</script>
</body>


+ 51
- 23
index.html View File

@ -37,18 +37,23 @@ mirror</a>, and welcome feedback there.</p>
<p>&ndash; bpb / <a href="//p1k3.com">p1k3</a> / <a href="https://twitter.com/brennen">@brennen</a></p>
<h2><a name=copying href=#copying>#</a> copying</h2>
<div class=details>
<h2 class=clicker><a name=copying href=#copying>#</a> copying</h2>
<div class=full>
<p>I may eventually dedicate this thing to the public domain, but for the time
being please feel free to use it under the terms of Creative Commons BY-SA
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.</p>
</div>
</div>
<p>I may eventually dedicate this thing to the public domain, but for the time
being please feel free to use it under the terms of Creative Commons BY-SA
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.</p>
<div id=toc>
<h2><a name=contents href=#contents>#</a> contents</h2>
<div id=toc-full>
<div class=contents><ul>
<div class=details>
<h2 class=clicker><a name=contents href=#contents>#</a> contents</h2>
<div class=full>
<div class=contents><ul>
<li><a href="#a-book-about-the-command-line-for-humans">a book about the command line for humans</a>
<ul>
@ -105,7 +110,8 @@ not license it under more restrictive terms than that.</p>
</ul>
</div>
</div></div>
</div>
</div>
<hr />
@ -220,14 +226,15 @@ a container of some sort, but it&rsquo;s an infinitely expandable one which may
contain nested sub-spaces much larger than itself. Directories are frequently
like the TARDIS: Bigger on the inside.</p>
<h2><a name=cat href=#cat>#</a> cat</h2>
<p>When you&rsquo;re in the shell, you have many tools at your disposal - programs that
can be used on many different files, or chained together with other programs.
They tend to have weird, cryptic names, but a lot of them do very simple
things. Tasks that might be a menu item in a big program like Word, like
counting the number of words in a document or finding a particular phrase, are
often programs unto themselves. We&rsquo;ll start with something even simpler.</p>
<h2><a name=cat href=#cat>#</a> cat</h2>
often programs unto themselves. We&rsquo;ll start with something even more basic
than that.</p>
<p>Suppose you have some files, and you&rsquo;re curious what&rsquo;s in them. For example,
suppose you&rsquo;ve got a list of authors you&rsquo;re planning to reference, and you just
@ -2441,19 +2448,40 @@ If you squint, these look kind of like paths to files on your filesystem.</p>
<script>
$(document).ready(function () {
// TODO: generalize this.
var $toc_full = $("#toc-full");
var $clicker = $('<button id=toc-clicker>+/-</button>');
$("#toc").find('h2').append($clicker);
$toc_full.hide();
$clicker.show();
$clicker.click(function (e) {
$toc_full.toggle({
// ☜ ☝ ☞ ☟
// ☆ ✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✩ ✪
var closed_sigil = '⇩';
var open_sigil = '⇧';
var togglesigil = function (elem) {
var sigil = $(elem).html();
if (sigil === closed_sigil) {
$(elem).html(open_sigil);
} else {
$(elem).html(closed_sigil);
}
};
var togglebutton = function (e) {
e.preventDefault();
$details_full.toggle({
duration: 550
});
togglesigil(this);
};
$(".details").each(function () {
var $this = $(this);
var $button = $('<button class=clicker-button>' + closed_sigil + '</button>');
var $details_full = $(this).find('.full');
$button.click(togglebutton);
$(this).find('.clicker').append($button);
$button.show();
});
$('.details .full').hide();
});
</script>
</body>


+ 16
- 14
index.md View File

@ -25,17 +25,19 @@ mirror](https://github.com/brennen/userland-book), and welcome feedback there.
-- bpb / [p1k3](//p1k3.com) / [@brennen](https://twitter.com/brennen)
copying
-------
I may eventually dedicate this thing to the public domain, but for the time
being please feel free to use it under the terms of Creative Commons BY-SA
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.
<div id=toc>
<h2>contents</h2>
<div id=toc-full>
{{contents}}
</div></div>
<div class=details>
<h2 class=clicker>copying</h2>
<div class=full>
<p>I may eventually dedicate this thing to the public domain, but for the time
being please feel free to use it under the terms of Creative Commons BY-SA
(Attribution / Share-Alike), whatever the latest version is. I promise I will
not license it under more restrictive terms than that.</p>
</div>
</div>
<div class=details>
<h2 class=clicker>contents</h2>
<div class=full>
{{contents}}
</div>
</div>

+ 5
- 4
literary_environment/index.md View File

@ -110,15 +110,16 @@ a container of some sort, but it's an infinitely expandable one which may
contain nested sub-spaces much larger than itself. Directories are frequently
like the TARDIS: Bigger on the inside.
cat
---
When you're in the shell, you have many tools at your disposal - programs that
can be used on many different files, or chained together with other programs.
They tend to have weird, cryptic names, but a lot of them do very simple
things. Tasks that might be a menu item in a big program like Word, like
counting the number of words in a document or finding a particular phrase, are
often programs unto themselves. We'll start with something even simpler.
cat
---
often programs unto themselves. We'll start with something even more basic
than that.
Suppose you have some files, and you're curious what's in them. For example,
suppose you've got a list of authors you're planning to reference, and you just


+ 3
- 3
render.pl View File

@ -65,13 +65,13 @@ sub replace_some_stuff {
my @contents;
# insert anchors in headers, accumulate a table of contents
$markup =~ s{<(h[12])>(.*?)</h[12]>}{
my ($tag, $text) = ($1, $2);
$markup =~ s{<(h[12])(.*?)>(.*?)</h[12]>}{
my ($tag, $attributes, $text) = ($1, $2, $3);
my $a_name = $text;
$a_name =~ s/[^a-z]+/-/ig;
$a_name =~ s/^-|-$//g;
push @contents, make_contents_link($tag, $a_name, $text);
"<$tag><a name=$a_name href=#$a_name>#</a> $text</$tag>";
"<$tag$attributes><a name=$a_name href=#$a_name>#</a> $text</$tag>";
}iesg;
my $contents_text = '<div class=contents>'


+ 2
- 2
userland.css View File

@ -18,12 +18,12 @@ ul li {
list-style: square;
}
#toc-clicker {
.details .clicker-button {
margin-left: 20px;
vertical-align: middle;
}
#toc-full {
.details .full {
background-color: white;
border-left: 2px solid #ddc;
border-bottom: 2px solid #ddc;


Loading…
Cancel
Save