change hash

This commit is contained in:
Alysa Meng 2024-07-23 10:00:01 -07:00
commit 02c82acf8c
3 changed files with 105 additions and 90 deletions

View file

@ -36,6 +36,18 @@ textarea {
user-select: none; user-select: none;
} }
.line {
/* display: block;*/
}
.line:hover {
background-color: #cbd387;
}
.lineHighlight {
background-color: yellow;
}
/* code box when locked */ /* code box when locked */
#box { #box {

View file

@ -47,20 +47,19 @@ haste_document.prototype.load = function(key, callback, lang) {
currentLine <= selectedLines.endLine currentLine <= selectedLines.endLine
) { ) {
highlighted = highlighted =
'<span style="background-color: yellow;">' + highlighted + "</span>"; "<span class='lineHighlight'>" + highlighted + "</span>";
} }
highlighted = "<span onclick='handleLineClick(" + i + ")' class='line' id='line-" + i + "'>" + highlighted + "</span>";
highlighted = "<span id='line-" + i + "'>" + highlighted + "</span>";
high.value += highlighted + "\n"; high.value += highlighted + "\n";
} }
// scroll to position in document after ensuring components have 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) {
document.body.scrollTo(0, $("#line-" + (selectedLines.startLine - 2)).offset().top) document.body.scrollTo(0, $("#line-" + (selectedLines.startLine - 2)).offset().top)
} else { } else {
// if lines 1-2, go to top of file // if lines 1-2, go to top of file
document.body.scrollTop(0); document.body.scrollTo(0, 0);
} }
}, 0); }, 0);
} catch (err) { } catch (err) {
@ -423,5 +422,4 @@ $(function() {
} }
} }
}); });
}); });

View file

@ -1,100 +1,105 @@
<html> <html>
<head> <head>
<title>hastebin</title> <title>hastebin</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="solarized_dark.css"/> <link rel="stylesheet" type="text/css" href="solarized_dark.css" />
<link rel="stylesheet" type="text/css" href="application.css"/> <link rel="stylesheet" type="text/css" href="application.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="highlight.min.js"></script> <script type="text/javascript" src="highlight.min.js"></script>
<script type="text/javascript" src="application.min.js"></script> <script type="text/javascript" src="application.min.js"></script>
<meta name="robots" content="noindex,nofollow"/> <meta name="robots" content="noindex,nofollow" />
<script type="text/javascript"> <script type="text/javascript">
var app = null; var app = null;
// Handle pops // Handle pops
var handlePop = function(evt) { var handlePop = function (evt) {
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]); }
};
// Set up the pop state to handle loads, skipping the first load
// to make chrome behave like others:
// http://code.google.com/p/chromium/issues/detail?id=63040
setTimeout(function () {
window.onpopstate = function (evt) {
try { handlePop(evt); } catch (err) { /* not loaded yet */ }
}; };
// Set up the pop state to handle loads, skipping the first load }, 1000);
// to make chrome behave like others:
// http://code.google.com/p/chromium/issues/detail?id=63040
setTimeout(function() {
window.onpopstate = function(evt) {
try { handlePop(evt); } catch(err) { /* not loaded yet */ }
};
}, 1000);
/** /**
* Function to parse the URL fragment and extract line numbers * Function to parse the URL fragment and extract line numbers
* @returns {Object} Object with parsed startLine, endLine * @returns {Object} Object with parsed startLine, endLine
*/ */
function getSelectedLinesFromURL() { function getSelectedLinesFromURL() {
const urlHash = window.location.hash.substring(1); // Remove the '#' from the hash const urlHash = window.location.hash.substring(1); // Remove the '#' from the hash
if (!urlHash) return {}; // Return an empty object if there's no hash if (!urlHash) return {}; // Return an empty object if there's no hash
// Parse the hash into start and end parts // Parse the hash into start and end parts
const range = urlHash.split("L"); const range = urlHash.split("L");
let start, end; let start, end;
if (range.length > 2) { if (range.length > 2) {
start = parseInt(range[1], 10); start = parseInt(range[1], 10);
end = parseInt(range[2], 10); end = parseInt(range[2], 10);
} else { } else {
start = parseInt(range[1], 10); start = parseInt(range[1], 10);
end = start; end = start;
}
return {
startLine: start,
endLine: end,
};
} }
return {
startLine: start,
endLine: end,
};
}
// Construct app and load initial path // Construct app and load initial path
$(function() { $(function () {
var baseUrl = window.location.href.split('#')[0].split('/'); var baseUrl = window.location.href.split('#')[0].split('/');
baseUrl = baseUrl.slice(0, baseUrl.length - 1).join('/') + '/'; baseUrl = baseUrl.slice(0, baseUrl.length - 1).join('/') + '/';
console.log(baseUrl); console.log(baseUrl);
const selectedLines = getSelectedLinesFromURL(); const selectedLines = getSelectedLinesFromURL();
console.log(selectedLines); console.log(selectedLines);
app = new haste('hastebin', { twitter: true, baseUrl: baseUrl, selectedLines: selectedLines }); app = new haste('hastebin', { twitter: false, baseUrl: baseUrl, selectedLines: selectedLines });
handlePop({ target: window }); handlePop({ target: window });
}); });
</script>
</head> function handleLineClick(lineId) {
/* TODO */
window.location.hash = "#L" + (lineId + 1);
}
</script>
<body> </head>
<ul id="messages"></ul>
<div id="key"> <body>
<div id="pointer" style="display:none;"></div> <ul id="messages"></ul>
<div id="box1">
<a href="about.md" class="logo"></a> <div id="key">
</div> <div id="pointer" style="display:none;"></div>
<div id="box2"> <div id="box1">
<button class="save function button-picture">Save</button> <a href="about.md" class="logo"></a>
<button class="new function button-picture">New</button>
<button class="duplicate function button-picture">Duplicate & Edit</button>
<button class="raw function button-picture">Just Text</button>
<button class="twitter function button-picture">Twitter</button>
</div>
<div id="box3" style="display:none;">
<div class="label"></div>
<div class="shortcut"></div>
</div>
</div> </div>
<div id="box2">
<button class="save function button-picture">Save</button>
<button class="new function button-picture">New</button>
<button class="duplicate function button-picture">Duplicate & Edit</button>
<button class="raw function button-picture">Just Text</button>
<button class="twitter function button-picture">Twitter</button>
</div>
<div id="box3" style="display:none;">
<div class="label"></div>
<div class="shortcut"></div>
</div>
</div>
<div id="linenos"></div> <div id="linenos"></div>
<pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre> <pre id="box" style="display:none;" class="hljs" tabindex="0"><code></code></pre>
<textarea spellcheck="false" style="display:none;"></textarea> <textarea spellcheck="false" style="display:none;"></textarea>
</body> </body>
</html> </html>