To extract the relevant bits:
HTML:
<li onclick="toggleExpand(this,'shrink')" title="Click to expand"
class="shrink">
JS:
function toggleExpand(node,shrink,expand) {
if (node.classList.contains(shrink)) {
node.classList.remove(shrink);
expand && node.classList.add(expand);
node.setAttribute('title','Click to '+shrink);
} else {
expand && node.classList.remove(expand);
node.classList.add(shrink);
node.setAttribute('title','Click to '+(expand || 'expand'));
}
}
CSS:
.shrink > :nth-child(n+1) {
display: none;
}
.shrink {
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
The optional expand parameter to toggleExpand is if you want to add a
different class when it's expanded. I use it elsewhere, but not here.
../Dave
On 25 November 2017 at 09:38, David Mason <[email protected]> wrote:
> 1) Add/remove a class to an enclosing DIV. You can see a very simple
> version that I wrote in action on https://programmingfortherestofus.com
> click on the bullets under Elevator Pitch.
>
> 2) Include all the content, just don't display it by default...
> dynamically downloading additional content is almost certainly not worth it.
>
> ../Dave
>
> On 25 November 2017 at 08:53, Richard Hipp <[email protected]> wrote:
>
>> I notice on diff pages of GitHub (ex:
>> https://github.com/mackyle/sqlite/commit/028307ebcc953ee944d
>> 389fe359d146ab4893d16)
>> that above and below each diff chunk there is a light-blue block on
>> the left with an icon in the middle. If you hover over this area, you
>> get a pop-up hint that says "Expand". If you click, it adds more
>> context to the diff.
>>
>> Questions:
>>
>> (1) What's the best way to add mouse-over pop-up hints, in raw CSS+JS,
>> without using a "framework"?
>>
>> (2) How do they implement this "expand the diff context" feature?
>> Surely this is something that needs to be added to Fossil, don't you
>> think?
>>
>> --
>> D. Richard Hipp
>> [email protected]
>> _______________________________________________
>> fossil-users mailing list
>> [email protected]
>> http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
>>
>
>
_______________________________________________
fossil-users mailing list
[email protected]
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
