On Thu, 20 Jan 2011 20:29:40 +0100, Dmitry Chestnykh wrote:
> Hello,
>
> I've made a tiny simple diff highlighting for Fossil (well,
> technically, for any HTML page) in JavaScript, and thought I'd share
> it with you.
>
> Just put the following somewhere into Footer (not header!) above
> </body>:
>
> ================================
>
> <script>
> /* Simple diff highlighting */
> var DiffHighlighter = {
>
> isDiff : function(s){
> return (s.match(/^@@.*@@/m) && s.match(/^[+-]/m));
> },
>
> highlightElement : function(el){
> var s = el.innerHTML;
> if (!this.isDiff(s)){
> return;
> }
> el.className += 'diff';
> s = s.replace("<", "<");
> s = s.replace(/^\+.*$/mg, '<span class="diff-mark
> added">$&</span>');
> s = s.replace(/^\-.*$/mg, '<span class="diff-mark
> removed">$&</span>');
> s = s.replace(/^@@.*$/mg, '<span class="diff-mark
> position">$&</span>');
> s = "<pre>" + s + "</pre>"; // workaround for IE
> el.innerHTML = s;
> },
>
> highlightElementsWithTagName : function(tagName){
> var els = document.getElementsByTagName(tagName);
> for (var i=0; i < els.length; i++){
> this.highlightElement(els[i]);
> }
> }
> };
>
> DiffHighlighter.highlightElementsWithTagName('pre');
> </script>
>
> ================================
>
> And add this (or something to your taste) to your CSS:
>
> ================================
>
> .diff-mark {
> display: inline;
> color: #000;
> }
>
> .diff-mark.position {
> display:-moz-inline-stack;
> display:inline-block;
> zoom:1;
> *display:block;
> width: 100%;
> font-style: italic;
> padding: 0.5em 0;
> margin: 0.5em 0;
> border-top: 1px dotted #A2B5CD;
> border-bottom: 1px dotted #A2B5CD;
> color: #A2B5CD;
> }
>
> .diff-mark.added {
> background-color: #CEFBC3;
> }
>
> .diff-mark.removed {
> background-color: #F5C2C1;
> }
>
> ================================
>
> That's it: the script will automatically detect diffs and color them.
>
> You can see it in action here:
> http://codingrobots.org/p/fossil/ci/7ad9a4640a
>
> --
> Dmitry Chestnykh
>
> _______________________________________________
> fossil-users mailing list
> fossil-users@lists.fossil-scm.org
>
> http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
You could define every thing in the head and do
<body
<th1>
if { "fdiff" eq $current_page || "otherdiffed page" eq $current_page
} {
html "
onload='DiffHighlighter.highlightElementsWithTagName(\'pre\')'"
}
</th1>
>
This would have the benefit of running highlighter only on diff pages
and after the page has loaded
--
Rene
_______________________________________________
fossil-users mailing list
fossil-users@lists.fossil-scm.org
http://lists.fossil-scm.org:8080/cgi-bin/mailman/listinfo/fossil-users
