smoother scrolling highlight

This commit is contained in:
Colin 2024-07-23 13:37:50 -07:00
commit 4991b394b0
3 changed files with 66 additions and 24 deletions

View file

@ -25,7 +25,7 @@ textarea {
#linenos {
color: #7d7d7d;
z-index: -1000;
/*z-index: -1000;*/
position: absolute;
top: 20px;
left: 0px;
@ -40,9 +40,9 @@ textarea {
/* display: block;*/
}
.line:hover {
/*.line:hover {
background-color: #cbd387;
}
}*/
.lineHighlight {
background-color: yellow;

View file

@ -42,17 +42,17 @@ haste_document.prototype.load = function(key, callback, lang) {
}
var currentLine = i + 1;
var spanClass = "";
if (
currentLine >= selectedLines.startLine &&
currentLine <= selectedLines.endLine
) {
highlighted =
"<span class='lineHighlight'>" + highlighted + "</span>";
spanClass = "lineHighlight";
}
highlighted = "<span onclick='handleLineClick(event," + i + ")' class='line' id='line-" + i + "'>" + highlighted + "</span>";
highlighted = "<span id='line-" + (i+1) + "' class="+spanClass+">" + highlighted + "</span>";
high.value += highlighted + "\n";
}
// scroll to position in document after ensuring components h"ve had time to render
//// scroll to position in document after ensuring components h"ve had time to render
setTimeout(function() {
// show current line and the one before it
if (selectedLines.startLine >= 3) {
@ -217,11 +217,11 @@ haste.prototype.lookupTypeByExtension = function(ext) {
};
// Add line numbers to the document
// For the specified number of lines
// For the specified number of lines, each with a class and id
haste.prototype.addLineNumbers = function(lineCount) {
var h = '';
for (var i = 0; i < lineCount; i++) {
h += (i + 1).toString() + '<br/>';
h += '<span onclick="handleLineClick(' + i.toString() + ')" onmouseenter="handleMouseEnter(' + i.toString() + ')" onmouseleave="handleMouseLeave(' + i.toString() + ')" onmousedown="handleMouseDown(' + i.toString() + ')" onmouseup="handleMouseUp(' + i.toString() + ')" id="line-number-' + (i + 1) + '">' + (i + 1) + '</span><br/>';
}
$('#linenos').html(h);
};

View file

@ -15,8 +15,16 @@
<script type="text/javascript">
var app = null;
var isHashChange=false;
var isDragging=false;
// Handle pops
var handlePop = function (evt) {
if (isHashChange||isDragging) {
evt.preventDefault();
// reset
isHashChange = false;
return false;
}
var path = evt.target.location.href;
if (path === app.baseUrl) { app.newDocument(true); }
else { app.loadDocument(path.split('#')[0].split('/').slice(-1)[0]); }
@ -66,24 +74,58 @@
app = new haste('hastebin', { twitter: false, baseUrl: baseUrl, selectedLines: selectedLines });
handlePop({ target: window });
});
$(window).on('hashchange', function() {
isHashChange = true;
});
function handleLineClick(event, lineId) {
var lineNumber = lineId + 1;
if (event.shiftKey && app.selectedLines.startLine != undefined && lineNumber != app.selectedLines.startLine) {
if (lineNumber > app.selectedLines.startLine) {
app.selectedLines.endLine = lineNumber;
} else {
app.selectedLines.endLine = this.app.selectedLines.startLine;
app.selectedLines.startLine = lineNumber;
}
window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
} else {
// no shift range to consider
app.selectedLines.startLine = lineNumber;
app.selectedLines.endLine = lineNumber;
window.location.hash = "#L" + (lineNumber);
function updateWindowLineHash(lineId){
console.log('updateWindowLineHash', lineId, app.selectedLines.startLine, app.selectedLines.endLine);
app.selectedLines.startLine = Math.min(lineId,app.selectedLines.startLine);
app.selectedLines.endLine = Math.max(lineId,app.selectedLines.endLine);
window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
}
function handleMouseEnter(lineId) {
lineId = lineId + 1;
console.log('lineId', lineId);
$('#line-number-' + lineId).css('background-color', '#cbd387');
$('#line-' + lineId).css('background-color', '#cbd387');
if(isDragging){
$('#line-' + lineId).addClass("lineHighlight");
updateWindowLineHash(lineId);
}
}
function handleMouseLeave(lineId) {
lineId = lineId + 1;
$('#line-number-' + lineId).css('background-color', '');
$('#line-' + lineId).css('background-color', '');
}
function unHighlightCurrent(){
startLine = app.selectedLines.startLine;
endLine = app.selectedLines.endLine;
for (var i = startLine; i <= endLine; i++) {
$('#line-' + i).removeClass("lineHighlight");
}
app.selectedLines.startLine = Number.MAX_SAFE_INTEGER;
app.selectedLines.endLine = Number.MIN_SAFE_INTEGER;
}
function handleMouseDown(lineId) {
unHighlightCurrent();
lineId = lineId + 1;
$('#line-' + lineId).addClass("lineHighlight");
isDragging = true;
updateWindowLineHash(lineId);
}
function handleMouseUp(lineId) {
lineId = lineId + 1;
isDragging = false;
updateWindowLineHash(lineId);
}
</script>
</head>