github/haste-server
1
0
Fork 0
mirror of https://github.com/seejohnrun/haste-server synced 2025-08-21 06:43:11 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

smoother scrolling highlight

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

6
static/application.css
View file

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

12
static/application.js
View file

@ -42,17 +42,17 @@ haste_document.prototype.load = function(key, callback, lang) {
} }
var currentLine = i + 1; var currentLine = i + 1;
var spanClass = "";
if ( if (
currentLine >= selectedLines.startLine && currentLine >= selectedLines.startLine &&
currentLine <= selectedLines.endLine currentLine <= selectedLines.endLine
) { ) {
highlighted = spanClass = "lineHighlight";
"<span class='lineHighlight'>" + highlighted + "</span>";
} }
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"; 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() { setTimeout(function() {
// show current line and the one before it // show current line and the one before it
if (selectedLines.startLine >= 3) { if (selectedLines.startLine >= 3) {
@ -217,11 +217,11 @@ haste.prototype.lookupTypeByExtension = function(ext) {
}; };
// Add line numbers to the document // 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) { haste.prototype.addLineNumbers = function(lineCount) {
var h = ''; var h = '';
for (var i = 0; i < lineCount; i++) { 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); $('#linenos').html(h);
}; };

72
static/index.html
View file

@ -15,8 +15,16 @@
<script type="text/javascript"> <script type="text/javascript">
var app = null; var app = null;
var isHashChange=false;
var isDragging=false;
// Handle pops // Handle pops
var handlePop = function (evt) { var handlePop = function (evt) {
if (isHashChange||isDragging) {
evt.preventDefault();
// reset
isHashChange = false;
return false;
}
var path = evt.target.location.href; var path = evt.target.location.href;
if (path === app.baseUrl) { app.newDocument(true); } if (path === app.baseUrl) { app.newDocument(true); }
else { app.loadDocument(path.split('#')[0].split('/').slice(-1)[0]); } else { app.loadDocument(path.split('#')[0].split('/').slice(-1)[0]); }
@ -67,23 +75,57 @@
handlePop({ target: window }); handlePop({ target: window });
}); });
function handleLineClick(event, lineId) { $(window).on('hashchange', function() {
var lineNumber = lineId + 1; isHashChange = true;
if (event.shiftKey && app.selectedLines.startLine != undefined && lineNumber != app.selectedLines.startLine) { });
if (lineNumber > app.selectedLines.startLine) {
app.selectedLines.endLine = lineNumber; function updateWindowLineHash(lineId){
} else { console.log('updateWindowLineHash', lineId, app.selectedLines.startLine, app.selectedLines.endLine);
app.selectedLines.endLine = this.app.selectedLines.startLine; app.selectedLines.startLine = Math.min(lineId,app.selectedLines.startLine);
app.selectedLines.startLine = lineNumber; app.selectedLines.endLine = Math.max(lineId,app.selectedLines.endLine);
} window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine);
window.location.hash = "#L" + (app.selectedLines.startLine) + "-L" + (app.selectedLines.endLine); }
} else {
// no shift range to consider function handleMouseEnter(lineId) {
app.selectedLines.startLine = lineNumber; lineId = lineId + 1;
app.selectedLines.endLine = lineNumber; console.log('lineId', lineId);
window.location.hash = "#L" + (lineNumber); $('#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> </script>
</head> </head>