fix commit view JS features, reimplement folding (#9968)

* fix commit view JS features, reimplement folding

File content folding was not working so I reimplemented it in a saner
way. Then I noticed the issue was actually because of missing JS
libraries (seen on the console of every commit with error
'SimpleMDE is not defined').

Fixed the libraries. I think the reimplementation is worth to keep.

* add .closest polyfill

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
tokarchuk/v1.17
silverwind 5 years ago committed by zeripath
parent 8d51f28ba0
commit fd094eea95
  1. 2
      routers/repo/commit.go
  2. 4
      templates/repo/diff/box.tmpl
  3. 18
      web_src/js/index.js
  4. 17
      web_src/js/polyfills.js
  5. 8
      web_src/less/_repository.less

@ -206,6 +206,8 @@ func FileHistory(ctx *context.Context) {
func Diff(ctx *context.Context) {
ctx.Data["PageIsDiff"] = true
ctx.Data["RequireHighlightJS"] = true
ctx.Data["RequireSimpleMDE"] = true
ctx.Data["RequireTribute"] = true
userName := ctx.Repo.Owner.Name
repoName := ctx.Repo.Repository.Name

@ -80,7 +80,7 @@
</div>
{{else}}
<div class="diff-file-box diff-box file-content {{TabSizeClass $.Editorconfig $file.Name}}" id="diff-{{.Index}}">
<h4 class="ui top attached normal header">
<h4 class="diff-file-header ui top attached normal header">
{{$isImage := false}}
{{if $file.IsDeleted}}
{{$isImage = (call $.IsImageFileInBase $file.Name)}}
@ -111,7 +111,7 @@
{{end}}
{{end}}
</h4>
<div class="ui attached unstackable table segment">
<div class="diff-file-body ui attached unstackable table segment">
{{if ne $file.Type 4}}
<div class="file-body file-code code-view has-context-menu code-diff {{if $.IsSplitStyle}}code-diff-split{{else}}code-diff-unified{{end}}">
<table>

@ -3,6 +3,7 @@
/* exported toggleDeadlineForm, setDeadline, updateDeadline, deleteDependencyModal, cancelCodeComment, onOAuthLoginClick */
import './publicPath.js';
import './polyfills.js';
import './gitGraphLoader.js';
import './semanticDropdown.js';
import initContextPopups from './features/contextPopup';
@ -2109,17 +2110,12 @@ function initCodeView() {
}
}).trigger('hashchange');
}
$('.ui.fold-code').on('click', (e) => {
const $foldButton = $(e.target);
if ($foldButton.hasClass('fa-chevron-down')) {
$(e.target).parent().next().slideUp('fast', () => {
$foldButton.removeClass('fa-chevron-down').addClass('fa-chevron-right');
});
} else {
$(e.target).parent().next().slideDown('fast', () => {
$foldButton.removeClass('fa-chevron-right').addClass('fa-chevron-down');
});
}
$('.fold-code').on('click', ({ target }) => {
const box = target.closest('.file-content');
const folded = box.dataset.folded !== 'true';
target.classList.add(`fa-chevron-${folded ? 'right' : 'down'}`);
target.classList.remove(`fa-chevron-${folded ? 'down' : 'right'}`);
box.dataset.folded = String(folded);
});
function insertBlobExcerpt(e) {
const $blob = $(e.target);

@ -0,0 +1,17 @@
// compat: IE11
if (!Element.prototype.matches) {
Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
// compat: IE11
if (!Element.prototype.closest) {
Element.prototype.closest = function (s) {
let el = this;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
}

@ -2524,3 +2524,11 @@ td.blob-excerpt {
.title_wip_desc {
margin-top: 1em;
}
.diff-file-box[data-folded="true"] .diff-file-body {
visibility: hidden;
}
.diff-file-box[data-folded="true"] .diff-file-header {
border-radius: 0.28571429rem !important;
}

Loading…
Cancel
Save