Enable highlighting feature.
mark.js Source is at https://github.com/captn3m0/minimal-mark.js With license attribution
This commit is contained in:
parent
ad4cc19567
commit
61f3d25deb
|
@ -40,4 +40,30 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||
detailsElement.classList.add('viewed');
|
||||
}
|
||||
});
|
||||
|
||||
// Set highlight words
|
||||
if(hw = document.getElementById('highlight-words')) {
|
||||
hw.value = (JSON.parse(localStorage.getItem("highlightWords"))||[]).join("\n");
|
||||
}
|
||||
|
||||
// Save settings
|
||||
if(document.getElementById('btn-settings-save')) {
|
||||
document.getElementById('btn-settings-save').addEventListener('click', function (e) {
|
||||
val = document.getElementById('highlight-words').value.split("\n").map(function(x){return x.trim()});
|
||||
localStorage.setItem('highlightWords', JSON.stringify(val));
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Enable highlighting
|
||||
if(words = localStorage.getItem('highlightWords')) {
|
||||
var scriptTag = document.createElement('script');
|
||||
scriptTag.setAttribute('src','/assets/mark.min.js');
|
||||
scriptTag.async=scriptTag.defer = true;
|
||||
document.body.appendChild(scriptTag);
|
||||
scriptTag.onload = function() {
|
||||
var markInstance = new Mark(document.querySelector("main"));
|
||||
markInstance.mark(JSON.parse(words), {});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
@ -13,6 +13,7 @@
|
|||
<ul style="display: inline;">
|
||||
<li><a href="/about/">About</a></li>
|
||||
<li><a href="/roadmap/">Roadmap</a></li>
|
||||
<li><a href="/settings/">Settings</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
|
|
|
@ -9,7 +9,6 @@ body {
|
|||
max-width: 550px;
|
||||
margin: 0 auto;
|
||||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
||||
|
||||
}
|
||||
|
||||
main {
|
||||
|
@ -76,7 +75,7 @@ h2 {
|
|||
}
|
||||
|
||||
.button:link,
|
||||
.button:visited {
|
||||
.button:visited, button, input[type=button] {
|
||||
background-color: #660033;
|
||||
color: white;
|
||||
border: 1px solid #660033;
|
||||
|
@ -127,4 +126,10 @@ details .trigger-warning {
|
|||
}
|
||||
details[open] .trigger-warning {
|
||||
display: none;
|
||||
}
|
||||
|
||||
mark {
|
||||
background: #ff0;
|
||||
padding: 0px 2px;
|
||||
color: #000;
|
||||
}
|
|
@ -10,7 +10,7 @@
|
|||
<p>Text-Only
|
||||
<a class="full-version-link button" href="https://apps.apple.com/in/app/beatroot-news/id1618735924">iOS</a>
|
||||
<a class="full-version-link button" href="https://play.google.com/store/apps/details?id=com.beatrootnews.app">Android</a>
|
||||
<a title="Mobile-Web only" class="full-version-link button" href="https://app.beatrootnews.com/">Web</a>
|
||||
<a class="full-version-link button" href="https://app.beatrootnews.com/" title="Mobile-Web only">Web</a>
|
||||
</p>
|
||||
</header>
|
||||
|
||||
|
@ -20,6 +20,6 @@
|
|||
|
||||
<div class="hr-line"></div>
|
||||
{% include_cached footer.html %}
|
||||
<script>{% include_cached app.js %}</script>
|
||||
<script>{% include app.js %}</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,16 @@
|
|||
---
|
||||
layout: article
|
||||
title: Settings
|
||||
permalink: /settings/
|
||||
# Not supported currently
|
||||
# https://github.com/jekyll/jekyll-seo-tag/issues/100
|
||||
noindex: true
|
||||
---
|
||||
|
||||
<form>
|
||||
<section>
|
||||
<label for="highlight-words">Highlight Words (comma-separated):</label><br>
|
||||
<textarea oninput="this.parentNode.dataset.value = this.value" rows="1" id="highlight-words" style="width:100%" rows=3></textarea>
|
||||
</section>
|
||||
<input type=button id="btn-settings-save" value=Save>
|
||||
</form>
|
Loading…
Reference in New Issue