james/yarr
4
0
Fork 0
mirror of https://github.com/nkanaev/yarr.git synced 2025-05-24 21:19:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

font listing

Browse Source
This commit is contained in:
Nazar Kanaev 2020-07-31 20:30:41 +01:00
parent 3916360dcc
commit 90fcaf6645
2 changed files with 43 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
template/index.html
View File

@ -187,10 +187,16 @@
</label> </label>
</div> </div>
<div class="mt-2"> <div class="mt-2">
<label class="selectgroup" v-for="font in ['', 'serif', 'sans-serif']"> <label class="selectgroup">
<input type="radio" name="feedToAdd" :value="font" v-model="font"> <input type="radio" name="font" value="" v-model="font">
<div class="selectgroup-label appearance-option"> <div class="selectgroup-label appearance-option">
<div :style="{'font-family': font}">{{ font || 'System' }}</div> System Default
</div>
</label>
<label class="selectgroup" v-for="f in $fonts()" :key="font">
<input type="radio" name="font" :value="f" v-model="font">
<div class="selectgroup-label appearance-option":style="{'font-family': f}">
{{ f }}
</div> </div>
</label> </label>
</div> </div>
@ -208,7 +214,7 @@
<time>{{ formatDate(itemSelectedDetails.date) }}</time> <time>{{ formatDate(itemSelectedDetails.date) }}</time>
</div> </div>
<hr> <hr>
<div class="content"> <div class="content" :style="{'font-family': font,}">
<div v-html="$sanitize(itemSelectedReadability)" v-if="itemSelectedReadability"></div> <div v-html="$sanitize(itemSelectedReadability)" v-if="itemSelectedReadability"></div>
<div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></div> <div v-html="$sanitize(itemSelectedDetails.content)" v-else-if="itemSelectedDetails.content"></div>
<div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div> <div v-html="$sanitize(itemSelectedDetails.description)" v-else-if="itemSelectedDetails.description"></div>

34
template/static/javascripts/app.js
View File

@ -2,6 +2,38 @@
var TITLE = document.title var TITLE = document.title
var FONTS = [
"Arial",
"Courier New",
"Georgia",
"Helvetica Neue",
"Segoe UI",
"Tahoma",
"Times New Roman",
"Verdana",
]
// adapted from https://github.com/darkwing/FontChecker
function fontAvailable(desiredFont) {
var element = document.createElement('span')
element.style.setProperty('position', 'absolute')
element.style.setProperty('top', '-10')
element.style.setProperty('right', '-10')
element.style.setProperty('font-family', '__RUBBISH_FONT__')
element.innerHTML = 'abcdefghijklmnopqrstuvwxyz'
document.body.appendChild(element)
var width = element.offsetWidth;
element.style.setProperty('font-family', desiredFont);
var new_width = element.offsetWidth;
console.log(desiredFont, width !== new_width)
element.remove();
return (width !== new_width);
}
Vue.prototype.$fonts = function() {
return FONTS.filter(fontAvailable)
}
DOMPurify.addHook('afterSanitizeAttributes', function (node) { DOMPurify.addHook('afterSanitizeAttributes', function (node) {
// set all elements owning target to target=_blank // set all elements owning target to target=_blank
if ('target' in node) { if ('target' in node) {
@ -136,7 +168,7 @@ var vm = new Vue({
'items': false, 'items': false,
}, },
'feedStats': {}, 'feedStats': {},
'font': 'sans-serif', 'font': '',
'theme': 'light', 'theme': 'light',
} }
}, },