Skip to content

Commit

Permalink
Add contenteditable sections and url saving
Browse files Browse the repository at this point in the history
* Add contenteditable sections and url saving

This allows for editing inline various pieces of content which will then
save the content to the url which allows it to be shared with the url
with the new content on the page. This does not actually save data
anywhere.
  • Loading branch information
mkly committed Feb 16, 2024
1 parent ac1bdb4 commit e3a5275
Show file tree
Hide file tree
Showing 7 changed files with 55 additions and 13 deletions.
1 change: 1 addition & 0 deletions src/coffee/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -148,5 +148,6 @@
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"></script>
<script src="static/editable.js"></script>
</body>
</html>
6 changes: 3 additions & 3 deletions src/coffee/templates/benchmark.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
<div class="text-start mb-5">
<h1>{{ benchmark_definition.name() }} <span class="btn beta ms-4 mb-2">Provisional</span></h1>
<div class="col-8">
<p class="fs-4 mt-4 fw-light">What does the benchmark do to test my use case explanation and context
<p class="fs-4 mt-4 fw-light" data-mlcedit="benchmark-description">What does the benchmark do to test my use case explanation and context
goes here
lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
Expand All @@ -27,7 +27,7 @@ <h1>{{ benchmark_definition.name() }} <span class="btn beta ms-4 mb-2">Provision

<div class="text-start my-5">
<h2 class="mb-3">AI Systems Evaluated</h2>
<p>Description goes here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
<p data-mlcedit="ai-systems-evaluated-description">Description goes here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
Expand Down Expand Up @@ -73,7 +73,7 @@ <h2 class="mb-3">AI Systems Evaluated</h2>
<h4 class="mb-3 mt-5">
Don't see the AI system you are looking for?
</h4>
<div class="mb-5">
<div class="mb-5" data-mlcedit="how-to-add-benchmarks">
Explain how are new benchmarks are added. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim. <a href="">Learn more</a>
Expand Down
4 changes: 2 additions & 2 deletions src/coffee/templates/benchmarks.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<div class="text-start mb-5">
<h1>AI Safety Benchmarks <span type="button" class="btn beta ms-4 mb-2">Provisional</span></h1>
<div class="row mt-3">
<div class="col-10 fs-3 fw-light">
<div class="col-10 fs-3 fw-light" data-mlcedit="benchmarks-intro">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore quis nostrud exercitation ullamcaz.
</div>
Expand All @@ -34,7 +34,7 @@ <h1>AI Safety Benchmarks <span type="button" class="btn beta ms-4 mb-2">Provisio
<h4 class="mb-3 mt-5">
Don't see the benchmark you are looking for?
</h4>
<div class="mb-5">
<div class="mb-5" data-mlcedit="how-to-add-benchmarks">
Explain how are new benchmarks are added. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim. <a href="">Learn more</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/coffee/templates/macros/benchmark_card.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ <h2 class="mb-0">{{ benchmark_definition.name() }} Benchmark</h2>
</div>
{% endif %}
<div class="row">
<div class="col-10 fs-6">
<div class="col-10 fs-6" data-mlcedit="benchmark-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua. Ut enim ad minim veniam, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Expand Down
2 changes: 1 addition & 1 deletion src/coffee/templates/macros/interpret_safety_ratings.html
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{% macro interpret_safety_ratings(stars_description) %}
<div class="text-start mt-5" id="benchmark-legend">
<h2 class="mb-4">How to Interpret Safety Ratings?</h2>
<p>Description goes here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
<p data-mlcedit="how-to-interpret-safety-ratings">Description goes here lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.</p>
Expand Down
17 changes: 11 additions & 6 deletions src/coffee/templates/macros/use_harms_limitations.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<div class="row text-start mb-5">
<div class="col">
<h2>Use Case</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
<p data-mlcedit="use-case-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore quis nostrud exercitation ullamco laboris magna aliqua.</p>
<ul class="list-group">
<li class="list-group-item border-0 p-0 pb-1"><strong>Application:</strong> Lorem ipsum dolor sit
Expand All @@ -16,7 +16,7 @@ <h2>Use Case</h2>
<div class="col-2"></div>
<div class="col">
<h2>Harms Tested</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
<p data-mlcedit="harms-tested-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore
et dolore quis nostrud exercitation ullamco laboris magna aliqua.</p>
<ul class="list-group">
{% for harm in benchmark_definition.harms() %}
Expand All @@ -35,12 +35,17 @@ <h3 class="mb-3 mt-5">
</h3>
<ul class="list-group mb-5">
<li class="list-group-item bg-darker border-0 p-0 pb-1"><strong>Tests are not comprehensive:</strong>
Explain what this means in a line here lorem ipsum
dolor sit amet.
<span data-mlcedit="limitations-not-comprehensive">
Explain what this means in a line here lorem ipsum
dolor sit amet.
</span>
</li>
<li class="list-group-item bg-darker border-0 p-0 pb-1"><strong>This is not a production
testing:</strong> Explain what this means in a line here lorem ipsum
dolor sit amet.
testing:</strong>
<span data-mlcedit="limitations-not-production">
Explain what this means in a line here lorem ipsum
dolor sit amet.
</span>
</li>
</ul>
</div>
Expand Down
36 changes: 36 additions & 0 deletions src/coffee/templates/static/editable.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("[data-mlcedit]").forEach(function (el) {
const isEditable = el.isContentEditable;
el.contentEditable = !isEditable;
});

function updateURL() {
const edits = {};
document.querySelectorAll("[data-mlcedit]").forEach((el) => {
const id = el.getAttribute("data-mlcedit");
edits[id] = encodeURIComponent(el.innerHTML);
});
const newUrl = `${location.pathname}?${new URLSearchParams(
edits,
).toString()}`;
history.pushState({}, "", newUrl);
}

document.querySelectorAll("[data-mlcedit]").forEach((el) => {
["blur", "change", "keyup"].forEach((event) => {
el.addEventListener(event, updateURL);
});
});

function loadEdits() {
const params = new URLSearchParams(window.location.search);
params.forEach((value, key) => {
const el = document.querySelector(`[data-mlcedit="${key}"]`);
if (el) {
el.innerHTML = decodeURIComponent(value);
}
});
}

loadEdits();
});

0 comments on commit e3a5275

Please sign in to comment.