Skip to content

Commit b884f73

Browse files
RudolfManRudolfMan
committed
front end work
1 parent 4d378f6 commit b884f73

File tree

4 files changed

+114
-5
lines changed

4 files changed

+114
-5
lines changed

‎assets/css/app.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,8 +198,29 @@ input.search-input:focus {
198198
display: none;
199199
}
200200

201+
.ghd-chunk-header {
202+
height: 44px;
203+
}
204+
.ghd-chunk-header:first-child, .ghd-chunk-header:last-child {
205+
height: 0;
206+
}
207+
201208
.ghd-chunk-header .ghd-line-number {
202209
background-color: #f8fafd;
210+
flex-direction: column;
211+
}
212+
213+
.expanded, .expanded .ghd-line-number{
214+
background-color: #f5f5f5;
215+
}
216+
217+
.ghd-chunk-header .ghd-line-number div{
218+
background: #dbedff;
219+
width: 100%;
220+
text-align: center;
221+
}
222+
.ghd-chunk-header .ghd-line-number div:hover{
223+
background: #95c6fe;
203224
}
204225

205226
.ghd-file-status {

‎assets/js/app.js

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,77 @@ fileHeaders.forEach(header => {
5757
const scrollIfNeeded = elem => {
5858
elem.getBoundingClientRect().top < 0 && elem.scrollIntoView(true)
5959
}
60+
61+
const MAX_EXPAND_CONTEXT_LINES = 20
62+
63+
document.addEventListener('DOMContentLoaded', e => {
64+
document.querySelectorAll('.ghd-expand-up').forEach(expandUp => {
65+
expandUp.addEventListener('click', e => {
66+
const {fileName, packageName, version, lineAfter, lineBefore, patch} = gatherInfo(expandUp)
67+
68+
// expandUp always follows by diff line.. so we take the number
69+
const toLine = numberFrom(lineAfter) - 1
70+
71+
const _fromLine = lineBefore ? numberFrom(lineBefore) + 1 : 1
72+
const fromLine = Math.max(toLine - MAX_EXPAND_CONTEXT_LINES, _fromLine)
73+
74+
const _rightLine = lineBefore ? numberTo(lineBefore) + 1 : 1
75+
const rightLine = Math.max(toLine - MAX_EXPAND_CONTEXT_LINES, _rightLine)
76+
77+
fetchChunkAndInsert({target: lineAfter, packageName, version, fromLine, toLine, rightLine, fileName, patch})
78+
})
79+
})
80+
81+
document.querySelectorAll('.ghd-expand-down').forEach(expandDown => {
82+
expandDown.addEventListener('click', e => {
83+
const {fileName, packageName, version, lineAfter, lineBefore, patch} = gatherInfo(expandDown)
84+
85+
const fromLine = numberFrom(lineBefore) + 1
86+
const rightLine = numberTo(lineBefore) + 1
87+
88+
const _toLine = lineAfter ? numberFrom(lineAfter) - 1 : Infinity
89+
const toLine = Math.min(fromLine + MAX_EXPAND_CONTEXT_LINES, _toLine)
90+
91+
fetchChunkAndInsert({target: expandDown.closest('tr'), packageName, version, fromLine, toLine, rightLine, fileName, patch})
92+
93+
})
94+
})
95+
})
96+
97+
const numberFrom = line => parseInt(line.querySelector('.ghd-line-number .ghd-line-number-from').textContent.trim())
98+
const numberTo = line => parseInt(line.querySelector('.ghd-line-number .ghd-line-number-to').textContent.trim())
99+
100+
const gatherInfo = line => {
101+
const patch = line.closest('.ghd-file')
102+
const {fileName, packageName, version} = patch.querySelector('.ghd-file-header').dataset
103+
104+
const lineAfter = line.closest('tr').nextElementSibling
105+
const lineBefore = line.closest('tr').previousElementSibling
106+
107+
return {fileName, packageName, version, lineAfter, lineBefore, patch}
108+
}
109+
110+
const fetchChunkAndInsert = params => {
111+
if( !(params.fromLine && params.toLine) ||
112+
(params.fromLine >= params.toLine) ){
113+
return
114+
}
115+
116+
const path = `/diff/${params.packageName}/${params.version}/expand/${params.fromLine}/${params.toLine}/${params.rightLine}`
117+
const url = new URL(path, window.location)
118+
url.searchParams.append('file_name', params.fileName)
119+
120+
fetch(url)
121+
.then(response => response.json())
122+
.then(({chunk, lines, errors}) => {
123+
if(errors){return}
124+
const context = document.createElement('template')
125+
context.innerHTML = chunk.trim()
126+
const patchBody = params.patch.querySelector('tbody')
127+
128+
Array.prototype.reduceRight.call(context.content.childNodes, (target, line) => {
129+
return patchBody.insertBefore(line, target)
130+
}, params.target)
131+
})
132+
.catch(console.error)
133+
}

‎lib/diff_web/controllers/page_controller.ex

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -179,7 +179,11 @@ defmodule DiffWeb.PageController do
179179
Enum.each(stream, fn
180180
{:ok, patch} ->
181181
html_patch =
182-
Phoenix.View.render_to_iodata(DiffWeb.RenderView, "render.html", patch: patch)
182+
Phoenix.View.render_to_iodata(DiffWeb.RenderView, "render.html",
183+
patch: patch,
184+
package: package,
185+
from_version: from
186+
)
183187

184188
IO.binwrite(file, html_patch)
185189

‎lib/diff_web/templates/render/render.html.eex

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<% status = patch_status(@patch) %>
22
<div class="ghd-file">
3-
<div class="ghd-file-header">
3+
<div class="ghd-file-header" data-file-name="<%= @patch.from %>" data-package-name="<%= @package %>" data-version="<%= @from_version %>" >
44
<span class="ghd-file-status ghd-file-status-<%= status %>">
55
<%= status %>
66
</span>
@@ -10,11 +10,13 @@
1010
</div>
1111
<div class="ghd-diff">
1212
<table class="ghd-diff">
13-
<%= for chunk <- @patch.chunks do %>
13+
<%= for {chunk, index} <- Enum.with_index(@patch.chunks) do %>
1414
<tr class="ghd-chunk-header">
1515
<td class="ghd-line-number">
16-
<div class="ghd-line-number-from">&nbsp;</div>
17-
<div class="ghd-line-number-to"></div>
16+
<%= unless index == 0 do %>
17+
<div class="ghd-expand-down"><svg class="octicon octicon-fold-down" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 11l3 3 3-3H8V5H6v6H4zm-4 0c0 .55.45 1 1 1h2.5l-1-1h-1l2-2H5V8H3.5l-2-2H5V5H1c-.55 0-1 .45-1 1l2.5 2.5L0 11zm10.5-2H9V8h1.5l2-2H9V5h4c.55 0 1 .45 1 1l-2.5 2.5L14 11c0 .55-.45 1-1 1h-2.5l1-1h1l-2-2z"></path></svg></div>
18+
<% end %>
19+
<div class="ghd-expand-up"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 16" width="14" height="16"><path fill-rule="evenodd" d="M10 6L7 3 4 6h2v6h2V6h2zm4 0c0-.55-.45-1-1-1h-2.5l1 1h1l-2 2H9v1h1.5l2 2H9v1h4c.55 0 1-.45 1-1l-2.5-2.5L14 6zM3.5 8H5v1H3.5l-2 2H5v1H1c-.55 0-1-.45-1-1l2.5-2.5L0 6c0-.55.45-1 1-1h2.5l-1 1h-1l2 2z"></path></svg></div>
1820
</td>
1921
<td class="ghd-text">
2022
<div class="ghd-text-internal"><%= chunk.header %></div>
@@ -36,6 +38,14 @@
3638
</tr>
3739
<% end %>
3840
<% end %>
41+
<tr class="ghd-chunk-header">
42+
<td class="ghd-line-number">
43+
<div class="ghd-expand-down"><svg class="octicon octicon-fold-down" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M4 11l3 3 3-3H8V5H6v6H4zm-4 0c0 .55.45 1 1 1h2.5l-1-1h-1l2-2H5V8H3.5l-2-2H5V5H1c-.55 0-1 .45-1 1l2.5 2.5L0 11zm10.5-2H9V8h1.5l2-2H9V5h4c.55 0 1 .45 1 1l-2.5 2.5L14 11c0 .55-.45 1-1 1h-2.5l1-1h1l-2-2z"></path></svg></div>
44+
</td>
45+
<td class="ghd-text">
46+
<div class="ghd-text-internal"></div>
47+
</td>
48+
</tr>
3949
</table>
4050
</div>
4151
</div>

0 commit comments

Comments
 (0)