diff --git a/git-tutorial.css b/git-tutorial.css index 1121acb..dac14bc 100644 --- a/git-tutorial.css +++ b/git-tutorial.css @@ -1,29 +1,44 @@ body { font-size: 1.2rem; text-align:justify; } -article#git-tutorial { max-width: 63rem; position: absolute; right:18.4em; top:0; left:0.5em; transition: right, 0.2s; } -#git-tutorial #toc { position: fixed; top: 0; bottom: 0; right:0; width: 17.4em; text-align: left; overflow: scroll; - background: white; border: 1px solid gray; transition: border-width 0.2s, right 0.2s; z-index: 1000; } +article#git-tutorial { position: absolute; top:0; left:0.5em; transition: right, 0.2s; } +#git-tutorial #toc { position: fixed; top: 0; bottom: 0; width: 17.4em; text-align: left; overflow: scroll; + background: white; border-left: 1px solid gray; transition: border-width 0.2s, right 0.2s; z-index: 1000; } #git-tutorial #toc:hover { right: 0; transition: border-width 0.4s, right 0.4s; z-index: 3000; } -#git-tutorial #lines { position: absolute; z-index: 2000; } +#git-tutorial .lines { position: absolute; z-index: 2000; } #git-tutorial textarea, #git-tutorial .CodeMirror { width: 100%; font-size: 1.2rem; border: thin solid black; } #git-tutorial table { table-layout: fixed; width: 100%; font-size: 100%; font-family: monospace; min-width: 41em; } +#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { font-family: monospace; } +article#git-tutorial p, article#git-tutorial h1 { max-width: 63rem; } -/* td.cell-path { } */ -#git-tutorial td.cell-contents { font-family: monospace; width: 36em; } +#git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; } +#git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; } +article#git-tutorial { left: calc(50% - ( 17.4em / 2 ) - ( 63rem / 2 ) ); right:18.4em; max-width: 63rem; } +article#git-tutorial table { width: 77rem; margin-left: calc( ( ( 63rem - 77rem ) / 2 ) ); } +#git-tutorial #toc { right:0; } +#git-tutorial #toc:hover { border-left: 1px solid gray; } -#git-tutorial td { padding-left: 0.3em; padding-right: 0.3em; } +@media (max-width: 100em) { + #git-tutorial td, #git-tutorial th { padding-left: 0.3em; padding-right: 0.3em; } + #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 36em; } + article#git-tutorial { left:0.5em; right:18.4em; max-width: 63rem; } + article#git-tutorial table { width: 100%; margin-left: auto; } + #git-tutorial #toc { right:0; } + #git-tutorial #toc:hover { border-left: 1px solid gray; } +} @media (max-width: 72em) { - #git-tutorial td { padding-left: 0; padding-right: 0; } - #git-tutorial td.cell-contents { width: 34em; } - article#git-tutorial { right: 7em; } + #git-tutorial td, #git-tutorial th { padding-left: 0; padding-right: 0; } + #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 34em; } + article#git-tutorial { left:0.5em; right: 7em; max-width: 63rem; } + article#git-tutorial table { width: 100%; margin-left: auto; } #git-tutorial #toc { right: -11em; } #git-tutorial #toc:hover { border-left: 5px solid gray; } } @media (max-width: 63em) { - #git-tutorial td { padding-left: 0; padding-right: 0; } - #git-tutorial td.cell-contents { width: 30em; } - article#git-tutorial { right:6em; } + #git-tutorial td, #git-tutorial th { padding-left: 0; padding-right: 0; } + #git-tutorial td.cell-contents, #git-tutorial th.cell-contents { width: 30em; } + article#git-tutorial { left:0.5em; right:6em; max-width: 63rem; } + article#git-tutorial table { width: 100%; margin-left: auto; } #git-tutorial #toc { right: -12em; } #git-tutorial #toc:hover { border-left: 5px solid gray; } } @@ -31,7 +46,11 @@ article#git-tutorial { max-width: 63rem; position: absolute; right:18.4em; top:0 #git-tutorial textarea { display:block; height: 18rem; } #git-tutorial .CodeMirror { height: max-content; } #git-tutorial input { display: inline-block; margin-right: 1em; font-size: 1.2rem; } -#git-tutorial table, #git-tutorial td, #git-tutorial th { border:thin solid black; border-collapse: collapse; } +#git-tutorial table, #git-tutorial th { border:thin solid black; border-collapse: collapse; } +#git-tutorial td { opacity: 0.5; border-top:thin solid #aaa; border-left:thin solid #aaa; border-right:thin solid #aaa; border-collapse: collapse; } +#git-tutorial tr:last-child td { border:thin solid #aaa; } +#git-tutorial tr:hover td { opacity: 1; border:thin solid black; } +#git-tutorial tr:last-child.different td, #git-tutorial .different td { border: thin solid black; opacity: 1; background: #f0f6f8; } #git-tutorial .specialchar { color: red; word-wrap: normal; } #git-tutorial .hex-prefix { color: lightgrey; } #git-tutorial .hex { color: brown; } @@ -59,9 +78,15 @@ article#git-tutorial .onlytoc { display: none; } #git-tutorial h1:hover + .permalink, #git-tutorial .permalink:hover { opacity: 1; } #git-tutorial #toc ul { list-style-type: none; padding: 0 !important; /*list-style-type: disc;*/ } #git-tutorial #toc a { color: #666; } +#git-tutorial #toc .function { color: #00f; } +#git-tutorial #toc .assignment { color: #00f; } #git-tutorial #toc a:hover { color: #333; } #git-tutorial .CodeMirror .scrolled-to-line { background: lightcyan; } #git-tutorial #toc > ol { padding-left: 0.7em; } #git-tutorial #toc ol > li > a { text-decoration: none; } #git-tutorial #toc li { padding-top: 0.4em; } #git-tutorial #toc ol, #git-tutorial #toc ul { padding-left: 2.3em; } + +/* Highlight elements when a click on e.g. a hash scrolls to the destination */ +#git-tutorial .scroll-destination-hilite, #git-tutorial .scroll-destination-hilite td { transition: background 0.5s linear 0.5s, opacity 0.4s linear 0.5s; background: #ffd3d3 !important; opacity: 1 !important; } +#git-tutorial .scroll-destination-lolite, #git-tutorial .scroll-destination-lolite td { transition: background linear 0.5s, opacity linear 0.5s; } diff --git a/git-tutorial.js b/git-tutorial.js index f67a8f0..43a15dd 100644 --- a/git-tutorial.js +++ b/git-tutorial.js @@ -22,6 +22,15 @@ function ___to_hex(s) { return hex; } +function ___hex_to_bin(hex) { + var hex = String(hex); + var str = "" + for (var i = 0; i < hex.length; i+=2) { + str += String.fromCharCode(parseInt(hex.substr(i, 2), 16)); + } + return str; +} + // These three functions are accessible in the user scripts. sha1 = function(s) { return Sha1.hash(___to_hex(s), { msgFormat: 'hex-bytes', outFormat: 'hex' }); }; deflate = function(s) { return ___uint8ArrayToString(pako.deflate(___stringToUint8Array(s))); } @@ -75,7 +84,7 @@ function ___getOffset(elt) { return { left: 0, top: 0 }; } } -var global_current_hilite = { src: false, dests: [] }; +var global_current_hilite = { src: false, dests: [], srcid: false, destclass: false, lines: false }; function ___hilite_off() { if (global_current_hilite.src) { global_current_hilite.src.classList.remove('hilite-src'); @@ -83,20 +92,57 @@ function ___hilite_off() { for (var d = 0; d < global_current_hilite.dests.length; d++) { global_current_hilite.dests[d].classList.remove('hilite-dest'); } - global_current_hilite = { src: false, dests: [] }; - document.getElementById('lines').innerHTML = ''; + if (global_current_hilite.lines) { + global_current_hilite.lines.innerHTML = ''; + } + global_current_hilite = { src: false, dests: [], srcid: false, destclass: false, lines: false }; } -function ___hilite(src, dest) { - ___hilite_off(); - var src = document.getElementById(src); +function ___scroll_to_dest(srcid, destclass) { + var src = document.getElementById(srcid); var wrapper = src; while (wrapper && !wrapper.classList.contains('hilite-wrapper')) { wrapper = wrapper.parentElement; } - var dests = (wrapper || document).getElementsByClassName(dest); + var dests = (wrapper || document).getElementsByClassName(destclass); + if (dests.length > 0) { + dest = dests[dests.length - 1]; + while (dest && dest.tagName.toLowerCase() != 'tr') { dest = dest.parentElement; } + if (dest) { + dest.scrollIntoView({ behavior: 'smooth', block: 'center' }); + dest.classList.add('scroll-destination-hilite'); + window.setTimeout(function() { + dest.classList.add('scroll-destination-lolite'); + dest.classList.remove('scroll-destination-hilite'); + window.setTimeout(function() { + dest.classList.remove('scroll-destination-lolite'); + }, 600); + }, 1100); + } + } + return false; +} +function ___hilite(srcid, destclass) { + ___hilite_off(); + var src = document.getElementById(srcid); + var wrapper = src; + while (wrapper && !wrapper.classList.contains('hilite-wrapper')) { wrapper = wrapper.parentElement; } + var dests = (wrapper || document).getElementsByClassName(destclass); - global_current_hilite = { src, dests }; + // circumvent glitch where the codemirror areas seem to resize themselves + // which causes the arrow to be misaligned. Instead of using a global container for lines: + // var lines = document.getElementById('lines'); + // we use a different container for each hilite-wrapper, positionned within it. + var lines = wrapper.getElementsByClassName('lines'); + if (lines.length < 1) { + lines = document.createElement('div'); + lines.className = 'lines'; + wrapper.insertBefore(lines, wrapper.firstChild); + } else { + lines = lines[0]; + } + + global_current_hilite = { src: src, dests: dests, srcid: srcid, destclass: destclass, lines: lines }; src.classList.add('hilite-src'); - var lines = document.getElementById('lines'); + src.setAttribute('onclick', 'event.stopPropagation(); ___scroll_to_dest("'+srcid+'", "'+destclass+'")'); lines.innerHTML = ''; for (var d = 0; d < dests.length; d++) { dests[d].classList.add('hilite-dest'); @@ -117,12 +163,22 @@ function ___hilite(src, dest) { lines.appendChild(l3); l3.style.position = 'absolute'; + var ar = document.createElement('div'); + lines.appendChild(ar); + ar.style.position = 'absolute'; + var op = ___getOffset(l1.offsetParent); + var arrowWidth = 15; + var arrowHeight = 8; + var thickness = 3; + var xa = Math.floor(osrc.left - op.left + src.offsetWidth); var ya = Math.floor(osrc.top - op.top + src.offsetHeight / 2); var xb = Math.floor(otr.left - op.left + tr.offsetWidth); var yb = Math.floor(otr.top - op.top + tr.offsetHeight / 2); + var pdest = { left: xb, top: yb }; + xb += arrowWidth - 1; var x = Math.max(xa, xb) + (50 * (d+1)); if (ya > yb) { var tmpx = xa; @@ -138,8 +194,6 @@ function ___hilite(src, dest) { var p3 = { left: x, top: yb }; var p4 = { left: xb, top: yb }; - var thickness = 3; - // line 1 l1.style.width = p2.left-p1.left; l1.style.height = thickness + 'px'; @@ -153,15 +207,36 @@ function ___hilite(src, dest) { l2.style.top = p2.top; l2.style.left = p2.left; // line 3 - l3.style.width = p3.left-p4.left; + l3.style.width = (p3.left-p4.left)+'px'; l3.style.height = thickness+'px'; l3.style.backgroundColor = 'red'; - l3.style.top = p4.top; - l3.style.left = p4.left; + l3.style.top = p4.top+'px'; + l3.style.left = p4.left+'px'; + // arrow + ar.style.width = '0px'; + ar.style.height = '0px'; + ar.style.borderLeft = arrowWidth+'px solid transparent'; + ar.style.borderTop = arrowHeight+'px solid transparent'; + ar.style.borderRight = arrowWidth+'px solid red'; + ar.style.borderBottom = arrowHeight+'px solid transparent'; + ar.style.top = (pdest.top - arrowHeight + thickness/2)+'px'; + ar.style.left = (pdest.left - arrowWidth)+'px'; } } function ___lolite(src, dest) { + // For now, keep the highlight onmouseout, to help with scrolling while looking for the target of an arrow. } +(function() { + var oldresize = window.onresize; + window.onresize = function () { + if (global_current_hilite.srcid && global_current_hilite.destclass) { + var srcid = global_current_hilite.srcid; + var destclass = global_current_hilite.destclass; + ___hilite(srcid, destclass); + } + if (oldresize) { oldresize(); } + } +})(); function ___hex_hash(s) { var id = ___global_unique_id++; var hash = "object-hash-"+___to_hex(s.substr(0,20)); @@ -281,17 +356,19 @@ function ___specialchars_and_colour_and_hex_and_zlib(s) { } if (inflated) { var id=___global_unique_id++; - return '' - + '' + return { + html: + '' + 'deflated:' + ___specialchars_and_colour_and_hex(___uint8ArrayToString(inflated)) + '' + '' - + ''; + + '', + td: function(td) { td.classList.add('deflate-toggle'); td.setAttribute('onclick', '___deflated_click('+id+')'); } + }; } else { - return ___specialchars_and_colour_and_hex(s); + return { html: ___specialchars_and_colour_and_hex(s), td: function() {} }; } } function ___bytestring_to_printf(bs, trailing_x) { @@ -300,7 +377,7 @@ function ___bytestring_to_printf(bs, trailing_x) { }) + (trailing_x ? 'x' : ''); } function ___filesystem_to_printf(fs) { - var entries = Object.entries(fs) + var entries = ___sort_filesystem_entries(fs) .map(function (x) { if (x[1] === null) { return 'd="$('+___bytestring_to_printf(x[0], true)+')"; mkdir "${d%x}";'; @@ -339,29 +416,81 @@ function ___format_filepath(x) { return ___specialchars_and_colour(x); } } -function ___format_entry(x) { - return '' - + ___format_filepath(x[0]) - + '' - + (x[1] === null - ? 'Directory' - : ("" + ___specialchars_and_colour_and_hex_and_zlib(x[1]) + "")) - + ""; +function ___format_entry(previous_filesystem, x) { + var previous_filesystem = previous_filesystem || {}; + var tr = document.createElement('tr'); + if (! (previous_filesystem.hasOwnProperty(x[0]) && previous_filesystem[x[0]] == x[1])) { + tr.classList.add('different'); + } + + var td_path = document.createElement('td'); + tr.appendChild(td_path); + td_path.classList.add('cell-path'); + + var td_path_code = document.createElement('code'); + td_path.appendChild(td_path_code); + td_path_code.innerHTML = ___format_filepath(x[0]); + + var td_contents = document.createElement('td'); + tr.appendChild(td_contents); + td_contents.classList.add('cell-contents'); + if (x[1] === null) { + td_contents.innerHTML = 'Directory'; + } else { + var specials = ___specialchars_and_colour_and_hex_and_zlib(x[1]); + td_contents.innerHTML = '' + specials.html + ''; + specials.td(td_contents); + } + + return tr; } -function ___filesystem_to_string(fs) { - var entries = Object.entries(fs) - .sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)) - .map(___format_entry); +function ___sort_filesystem_entries(fs) { + return Object.entries(fs) + .sort((a,b) => a[0] < b[0] ? -1 : (a[0] > b[0] ? 1 : 0)); +} +function ___filesystem_to_table(fs, previous_filesystem) { + var table = document.createElement('table'); + + var thead = document.createElement('thead'); + table.appendChild(thead); + + var thead_tr = document.createElement('tr'); + thead.appendChild(thead_tr); + + var thead_tr_th_path = document.createElement('th'); + thead_tr.appendChild(thead_tr_th_path); + thead_tr_th_path.innerText = 'Path'; + + var thead_tr_th_contents = document.createElement('th'); + thead_tr.appendChild(thead_tr_th_contents); + thead_tr_th_contents.classList.add('cell-contents'); + thead_tr_th_contents.innerText = 'Contents'; + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + var entries = ___sort_filesystem_entries(fs); + for (var i = 0; i < entries.length; i++) { + tbody.append(___format_entry(previous_filesystem, entries[i])); + } + return table; +} +function ___filesystem_to_string(fs, just_table, previous_filesystem) { + var entries = ___sort_filesystem_entries(fs); var id = ___global_unique_id++; - return '
Filesystem contents: ' + entries.length + " files and directories. " - + '' - + "Copy commands to recreate in *nix terminal" - + "." - + "
" - + '' - + "" + entries.join('') + "
PathContents
"; + var html = '
'; + if (! just_table) { + html += 'Filesystem contents: ' + entries.length + " files and directories. " + + '' + + "Copy commands to recreate in *nix terminal" + + "." + + "
" + + ''; + } + html += ___filesystem_to_table(fs, previous_filesystem).outerHTML // TODO: use DOM primitives instead. + + '
'; + return html; } function ___textarea_value(elem) { if (elem.getValue) { @@ -389,10 +518,12 @@ var global_filesystem=false; function ___git_eval(current) { document.getElementById('hide-eval-' + current).style.display = ''; var script = ''; - for (i = 0; i <= current; i++) { + for (i = 0; i <= current - 1; i++) { script += ___textarea_value(___global_editors[i]); } - script += "\n document.getElementById('out' + current).innerHTML = ___filesystem_to_string(filesystem); filesystem;"; + script += "\n var ___previous_filesystem = {}; for (k in filesystem) { ___previous_filesystem[k] = filesystem[k]; }\n"; + script += ___textarea_value(___global_editors[current]); + script += "\n document.getElementById('out' + current).innerHTML = ___filesystem_to_string(filesystem, false, ___previous_filesystem); filesystem;"; try { global_filesystem = eval(script); } catch (e) { @@ -402,190 +533,188 @@ function ___git_eval(current) { } function ___level(s) { - if (s) { - return (s.tagName == 'SECTION' ? 1 : 0) + ___level(s.parentElement); - } else { - return 0; - } + if (s) { + return (s.tagName == 'SECTION' ? 1 : 0) + ___level(s.parentElement); + } else { + return 0; } - function ___process_elements() { - var sections = document.getElementsByTagName('section'); - var stack = [[]]; - var previousLevel = 1; - for (var i = 0; i < sections.length; i++) { - var level = ___level(sections[i]); - while (level < previousLevel) { - var p = stack.pop(); - previousLevel--; - } - while (level > previousLevel) { - var top_of_stack = stack[stack.length-1]; - stack.push(top_of_stack[top_of_stack.length-1].subsections); - previousLevel++; - } - stack[stack.length-1].push({ s: sections[i], subsections: [] }); +} +function ___process_elements() { + var sections = document.getElementsByTagName('section'); + var stack = [[]]; + var previousLevel = 1; + for (var i = 0; i < sections.length; i++) { + var level = ___level(sections[i]); + while (level < previousLevel) { + var p = stack.pop(); + previousLevel--; } - var nested = stack[0]; - document.getElementById('toc').appendChild(___sections_to_html(nested)); - } - function ___sections_to_html(sections) { - var ol = document.createElement('ol'); - for (var i = 0; i < sections.length; i++) { - var li = document.createElement('li'); - ol.appendChild(li); - var headers = sections[i].s.getElementsByTagName('h1'); - console.assert(!headers || headers.length >= 1) - var target = sections[i].s.getAttribute('id'); - var a = document.createElement('a'); - li.appendChild(a); - a.innerHTML = headers[0].innerHTML; - if (target) { a.setAttribute('href', '#' + target); } - if (target) { - var a2 = document.createElement('a'); - ___insertAfter(a2, headers[0]); - a2.className = "permalink" - a2.setAttribute('href', '#' + target); - a2.innerText = "🔗" - } - li.appendChild(___functions_to_html(sections[i].s)); - li.appendChild(___sections_to_html(sections[i].subsections)); + while (level > previousLevel) { + var top_of_stack = stack[stack.length-1]; + stack.push(top_of_stack[top_of_stack.length-1].subsections); + previousLevel++; } - return ol; + stack[stack.length-1].push({ s: sections[i], subsections: [] }); } - function ___insertAfter(elt, ref) { - ref.parentElement.insertBefore(elt, ref.nextSibling); - } - function ___ancestor(elem, tag) { - if (! elem) { - return false; + var nested = stack[0]; + document.getElementById('toc').appendChild(___sections_to_html(nested)); +} +function ___sections_to_html(sections) { + var ol = document.createElement('ol'); + for (var i = 0; i < sections.length; i++) { + var li = document.createElement('li'); + ol.appendChild(li); + var headers = sections[i].s.getElementsByTagName('h1'); + console.assert(!headers || headers.length >= 1) + var target = sections[i].s.getAttribute('id'); + var a = document.createElement('a'); + li.appendChild(a); + a.innerHTML = headers[0].innerHTML; + if (target) { a.setAttribute('href', '#' + target); } + if (target) { + var a2 = document.createElement('a'); + ___insertAfter(a2, headers[0]); + a2.className = "permalink" + a2.setAttribute('href', '#' + target); + a2.innerText = "🔗" } - if (elem.tagName.toLowerCase() == tag) { - return elem; - } - return ___ancestor(elem.parentElement, tag); + li.appendChild(___functions_to_html(sections[i].s)); + li.appendChild(___sections_to_html(sections[i].subsections)); } - var ___global_editors = []; - function ___functions_to_html(section) { - var ul = document.createElement('ul'); - var ta = section.getElementsByTagName('textarea'); - for (var j = 0; j < ta.length; j++) { - if (___ancestor(ta[j], 'section') == section) { - var lines = ta[j].value.split('\n'); - - var ret = ___toCodeMirror(ta[j]); - var editor = ret.editor; - var editor_id = ret.editor_id; - - editor.on('keydown', ___clearScrolledToLine); - - for (var i = 0; i < lines.length; i++) { - var text = false; - - var fun = lines[i].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/); - if (fun) { text = fun[1] + '()'; } - var v = lines[i].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/); - if (v) { text = v[1]; } - - if (text) { - var li = document.createElement('li'); - var a = document.createElement('a'); - a.setAttribute('href', 'javascript: ___scrollToLine(___global_editors['+(editor_id)+'], '+i+'); void(0);'); - var code = document.createElement('code'); + return ol; +} +function ___insertAfter(elt, ref) { + ref.parentElement.insertBefore(elt, ref.nextSibling); +} +function ___ancestor(elem, tag) { + if (! elem) { + return false; + } + if (elem.tagName.toLowerCase() == tag) { + return elem; + } + return ___ancestor(elem.parentElement, tag); +} +var ___global_editors = []; +function ___functions_to_html(section) { + var ul = document.createElement('ul'); + var ta = section.getElementsByTagName('textarea'); + for (var j = 0; j < ta.length; j++) { + if (___ancestor(ta[j], 'section') == section) { + var lines = ta[j].value.split('\n'); + var ret = ___toCodeMirror(ta[j]); + var editor = ret.editor; + var editor_id = ret.editor_id; + editor.on('keydown', ___clearScrolledToLine); + for (var i = 0; i < lines.length; i++) { + var text = false; + + var fun = lines[i].match(/^function\s+([a-zA-Z_][a-zA-Z0-9_]*)/); + if (fun) { text = fun[1]; } + var v = lines[i].match(/^var\s+([a-zA-Z_][a-zA-Z0-9_]*)\s*=/); + if (v) { text = v[1]; } + if (text) { + var li = document.createElement('li'); + var a = document.createElement('a'); + a.setAttribute('href', 'javascript: ___scrollToLine(___global_editors['+(editor_id)+'], '+i+'); void(0);'); + var code = document.createElement('code'); + if (fun) { + var spanFunction = document.createElement('span'); + spanFunction.className = 'function'; + spanFunction.innerText = text; + var parens = document.createTextNode('()'); + code.appendChild(spanFunction); + code.appendChild(parens); + } else { + code.className = 'assignment'; code.innerText = text; - a.appendChild(code); - li.appendChild(a); - ul.appendChild(li); } + a.appendChild(code); + li.appendChild(a); + ul.appendChild(li); } } } - return ul; } - var ___global_current_highlighted_editor_and_line = false; - function ___clearScrolledToLine() { - var current = ___global_current_highlighted_editor_and_line; - if (current) { - current.editor.removeLineClass(current.line, 'background', 'scrolled-to-line'); - } - ___global_current_highlighted_editor_and_line = false; + return ul; +} +var ___global_current_highlighted_editor_and_line = false; +function ___clearScrolledToLine() { + var current = ___global_current_highlighted_editor_and_line; + if (current) { + current.editor.removeLineClass(current.line, 'background', 'scrolled-to-line'); } - function ___scrollToLine(editor, line) { - ___clearScrolledToLine(); - ___global_current_highlighted_editor_and_line = { editor: editor, line: line }; - - editor.addLineClass(line, 'background', 'scrolled-to-line'); - - var editorOffset = ___getOffset(editor.getScrollerElement()).top; - var lineOffset = editor.charCoords({line: line, ch: 0}, "local").top; - document.body.scrollTo(0, editorOffset + lineOffset - window.innerHeight/2); + ___global_current_highlighted_editor_and_line = false; +} +function ___scrollToLine(editor, line) { + ___clearScrolledToLine(); + ___global_current_highlighted_editor_and_line = { editor: editor, line: line }; + editor.addLineClass(line, 'background', 'scrolled-to-line'); + var editorOffset = ___getOffset(editor.getScrollerElement()).top; + var lineOffset = editor.charCoords({line: line, ch: 0}, "local").top; + document.body.scrollTo(0, editorOffset + lineOffset - window.innerHeight/2); +} +function ___toCodeMirror(ta) { + var editor = CodeMirror.fromTextArea(ta, { + mode: 'javascript', + lineNumbers: true, + viewportMargin: Infinity + }); + var id = ta.getAttribute('id'); + ta.remove(); + var wrapper = editor.getWrapperElement(); + wrapper.setAttribute('id', id); + var editor_id = ___global_editors.length; + ___global_editors[editor_id] = editor; + var eval_button = document.createElement('input'); + eval_button.setAttribute('type', 'button'); + eval_button.setAttribute('value', 'eval'); + eval_button.setAttribute('onclick', '___git_eval('+editor_id+')'); + ___insertAfter(eval_button, wrapper); + var hide_eval_button = document.createElement('input'); + hide_eval_button.setAttribute('id', 'hide-eval-' + editor_id); + hide_eval_button.setAttribute('type', 'button'); + hide_eval_button.setAttribute('value', 'hide output'); + hide_eval_button.setAttribute('onclick', '___hide_eval('+editor_id+')'); + hide_eval_button.style.display = 'none'; + ___insertAfter(hide_eval_button, eval_button); + var out_div = document.createElement('div'); + out_div.setAttribute('id', 'out' + editor_id); + ___insertAfter(out_div, hide_eval_button); + return { editor: editor, editor_id: editor_id }; +} +function ___hide_eval(editor_id) { + document.getElementById('out' + editor_id).innerHTML = ''; + document.getElementById('hide-eval-' + editor_id).style.display = 'none'; + ___hilite_off(); +} +function ___get_all_code() { + var all = ''; + for (var i = 0; i < ___global_editors.length; i++) { + var val = ___global_editors[i].getValue() + all += val + (val.endsWith('\n') ? '' : '\n') + (val.endsWith('\n\n') ? '' : '\n'); } - function ___toCodeMirror(ta) { - var editor = CodeMirror.fromTextArea(ta, { - mode: 'javascript', - lineNumbers: true, - viewportMargin: Infinity - }); - var id = ta.getAttribute('id'); - ta.remove(); - var wrapper = editor.getWrapperElement(); - wrapper.setAttribute('id', id); - - var editor_id = ___global_editors.length; - ___global_editors[editor_id] = editor; - - var eval_button = document.createElement('input'); - eval_button.setAttribute('type', 'button'); - eval_button.setAttribute('value', 'eval'); - eval_button.setAttribute('onclick', '___git_eval('+editor_id+')'); - ___insertAfter(eval_button, wrapper); - - var hide_eval_button = document.createElement('input'); - hide_eval_button.setAttribute('id', 'hide-eval-' + editor_id); - hide_eval_button.setAttribute('type', 'button'); - hide_eval_button.setAttribute('value', 'hide output'); - hide_eval_button.setAttribute('onclick', '___hide_eval('+editor_id+')'); - hide_eval_button.style.display = 'none'; - ___insertAfter(hide_eval_button, eval_button); - - var out_div = document.createElement('div'); - out_div.setAttribute('id', 'out' + editor_id); - ___insertAfter(out_div, hide_eval_button); - - return { editor: editor, editor_id: editor_id }; + return all.substr(0, all.length-1/*remove last newline in the last \n\n*/); +} +function ___copy_all_code() { + var elem = document.getElementById('copy-all-code'); + if (elem.style.display != "none") { + elem.style.display = "none"; + } else { + elem.style.display = ''; + var elem2 = document.createElement('textarea'); + elem.innerHTML = ''; + elem.appendChild(elem2); + var all_code = ___get_all_code(); + elem2.value = all_code + elem2.focus(); + elem2.disabled = false; + elem2.select(); + elem2.setSelectionRange(0, elem2.value.length * 10); // for mobile devices? + document.execCommand('copy'); + elem2.disabled = true; } - function ___hide_eval(editor_id) { - document.getElementById('out' + editor_id).innerHTML = ''; - document.getElementById('hide-eval-' + editor_id).style.display = 'none'; - ___hilite_off(); - } - function ___get_all_code() { - var all = ''; - for (var i = 0; i < ___global_editors.length; i++) { - var val = ___global_editors[i].getValue() - all += val + (val.endsWith('\n') ? '' : '\n') + (val.endsWith('\n\n') ? '' : '\n'); - } - return all.substr(0, all.length-1/*remove last newline in the last \n\n*/); - } - function ___copy_all_code() { - var elem = document.getElementById('copy-all-code'); - if (elem.style.display != "none") { - elem.style.display = "none"; - } else { - elem.style.display = ''; - var elem2 = document.createElement('textarea'); - elem.innerHTML = ''; - elem.appendChild(elem2); - var all_code = ___get_all_code(); - elem2.value = all_code - elem2.focus(); - elem2.disabled = false; - elem2.select(); - elem2.setSelectionRange(0, elem2.value.length * 10); // for mobile devices? - document.execCommand('copy'); - elem2.disabled = true; - } - } - ___process_elements(); +} function ___loc_count() { var srclines = ___get_all_code().split('\n'); @@ -600,4 +729,8 @@ function ___loc_count() { lct[i].innerText = lctv; } } -___loc_count(); \ No newline at end of file + +function ___git_tutorial_onload() { + ___process_elements(); + ___loc_count(); +} \ No newline at end of file diff --git a/index.html b/index.html index e95ede9..d53b867 100644 --- a/index.html +++ b/index.html @@ -9,12 +9,31 @@ + + +

Under construction

-

The main reference for this tutorial is the Pro Git book section on GIT internals.

This tutorial uses three libraries:

@@ -24,8 +43,6 @@
  • pako 2.0.3, released under the MIT and Zlib licenses, see the project page for details.
    • -
    -

    Introduction

    @@ -44,7 +61,7 @@ excluded, a few more in total.

    Model of the filesystem

    -

    We will simulate the Operating System's filesystem with a very +

    The Operating System's filesystem will be simulated by a very simple key-value store. In this very simple filesystem, directories are entries mapped to null and files are entries mapped to strings. The path to the current directory is stored in a separate @@ -124,21 +141,70 @@ function join_paths(a, b) { return (a == "") ? b : (a + "/" + b); } +// git init (partial implementation: create the .git directory) function git_init_mkdir() { mkdir(join_paths(current_directory, '.git')); } git_init_mkdir(); +

    Click on the eval button to see the files and directories that were + created so far.

    git hash-object (storing a copy of a file in .git)

    -

    The most basic element of a GIT repository is an object. It is a -copy of a file that is stored in GIT's database. That copy is -stored under a unique name. The unique name is obtained by hashing the -contents of the file.

    +

    The most basic element of a GIT repository is an object. Objects have a type which can be +blob (individual files), tree (directories), +commit (pointers to a specific version of the root directory, +with a description and some metadata) and tag (named pointers to a specific commit, +with a description and some metadata). + +When a file is added to the git repostitory, a compressed copy is stored in GIT's database, +in the .git/objects/ folder. This copy is a blob object.

    +

    The compressed copy is given a unique filename, which is obtained by hashing the contents of the original file. +Some filesystems have poor performance when a single directory contains a large number of files, and some filesystems +have a limit on the number of files that a directory may contain. To circumvent these issues, the first two characters +of the hash are used as the name of an intermediate directory: if a file's hash is 0a1bd…, its compressed +copy will be stored in .git/objects/0a/1bd…

    + +

    This function creates a file that looks like this:

    + +
    + + +

    The objects stored in the GIT database are compressed with zlib +(using the "deflate" compression method). The filesystem view shows +the marker deflated: followed by the +uncompressed data. Click on the (un)compressed data to toggle between +this pretty-printed view and the raw compressed data.

    + +

    When creating some blob objects, the result could be, for example:

    + +
    + + +

    This function reproduces faithfully the behaviour of (a subset of the options of) +the git hash-object command which can be called on a real git command-line.

    + -

    The objects stored in the GIT database are compressed with zlib -(using the "deflate" compression method). The filesystem view shows -the marker deflated: followed by the -uncompressed data. Click on the file contents to toggle between this -pretty-printed view and the raw compressed data. -

    +

    Click on the eval button to see the file that was +created by this call.

    -

    You will notice that the database does not contain the name of the -file, only its contents, stored under a unique identifier which is -derived by hashing its contents. Let's add the second user file +

    You can notice that the database does not contain the name of the +original file, only its content, stored under a unique identifier which is +derived by hashing that content. Let's add the second user file to the database.

    -

    This function needs a small utility to convert hashes encoded in hexadecimal to a binary form.

    +

    This function needs a small utility to convert hashes encoded in hexadecimal to raw bytes.

    -

    Example use of store_tree

    +

    Example use of store_tree()

    + +

    The following code, once uncommented, stores into the GIT database the trees for src +and for the root directory of the GIT project.

    +

    The store_tree() function needs to be called for the contents of subdirectories +first, and that result can be used to store the trees of upper directories. In the next section, +we will write a function which takes a list of paths, constructs an internal representation of +the hierarchy, and stores the corresponding trees bottom-up.

    Storing a tree from a list of paths

    -

    Making trees out of the subfolders one by one is cumbersome. Here's a utility function which takes a list of paths, and builds a tree from those.

    +

    Making trees out of the subfolders one by one is cumbersome. +The following utility function takes a list of paths, and builds +a tree from those.

    -

    The parse_tree function above needs a small utility to convert hashes in binary form to a hexadecimal representation.

    +

    The parse_tree function above needs a small utility to convert hashes represented using raw bytes to a hexadecimal representation.

    By clicking on "Copy commands to recreate in *nix terminal.", it is possible to copy a series of mkdir … and printf … > … commands that, when executed, will recreate the virtual filesystem on a real system. The resulting -folder is binary-compatible with the official git log, git status, git checkout etc. +folder is bit-compatible with the official git log, git status, git checkout etc. commands.

    @@ -869,6 +1054,26 @@ commands.

    - +