Le 25/11/2017 à 14:53, Richard Hipp a écrit :
I notice on diff pages of GitHub (ex:
https://github.com/mackyle/sqlite/commit/028307ebcc953ee944d389fe359d146ab4893d16)
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"?
This label is not made with CCS+JS. It’s just basic HTML.
There is a property ‘title’ on the node: title="Expand"
If you want to display a more complex tooltip, you can have a look here
how it is done:
<http://www.menucool.com/tooltip/css-tooltip>
(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?
This is probably an AJAX request made with XMLHttpRequest:
<https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest>
A basic example:
<https://developer.mozilla.org/fr/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests>
Basically, you sent a request to a server like if it was a normal GET
request (except that you don’t tell to the browser to go to another
page). The server send text as an answer (usually HTML, JSON, XML or
plain text), and when you get the answer, you can process it or just
display it in a node.
A simple way is to send a GET request, the server send an answer in HTML
(not a full page, just what you need), then you set the HTML received in
a empty node with the property innerHTML.
Maybe there is another way to do it. My knowledge in this area is not up
to date.
But the better way, if the file is not too large, is probably to load
the entire file and to hide what is not necessary.
Olivier
_______________________________________________
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
