Toggle mobile classes

This commit is contained in:
Alan Grainger 2023-09-17 13:15:17 +02:00
parent 59cfe11a6b
commit e39b0b0e80
6 changed files with 29 additions and 13 deletions

View file

@ -17,6 +17,7 @@
"rules": {
"no-new": 0,
"no-unused-vars": "off",
"@typescript-eslint/no-var-requires": "off",
"@typescript-eslint/no-unused-vars": ["error", { "args": "none" }],
"@typescript-eslint/ban-ts-comment": "off",
"no-prototype-builtins": "off",

View file

@ -1,7 +1,7 @@
{
"id": "share-note",
"name": "Share Note",
"version": "0.2.11",
"version": "0.2.12",
"minAppVersion": "0.15.0",
"description": "Share a note publicly with full styling. Data is stored encrypted on the server and only you have the key.",
"author": "Alan Grainger",

View file

@ -1,6 +1,6 @@
{
"name": "share-note",
"version": "0.2.11",
"version": "0.2.12",
"description": "Share a note publicly with full styling. Data is stored encrypted on the server and only you have the key.",
"main": "main.js",
"scripts": {

View file

@ -91,7 +91,11 @@ export default class Note {
// Make template value replacements
this.outputFile.setReadingWidth(this.plugin.settings.noteWidth)
this.outputFile.setPreviewViewClasses(this.previewViewEl.classList || [])
this.outputFile.setBodyClasses(document.body.classList)
const bodyClasses = document.body.classList
// Remove any mobile classes if present.
// They will be toggled by the template depending on viewport size.
bodyClasses.remove('is-mobile', 'is-android', 'is-phone')
this.outputFile.setBodyClasses(bodyClasses)
this.outputFile.setBodyStyle(document.body.style.cssText.replace(/"/g, '\''))
if (!this.plugin.settings.showFooter) {
this.outputFile.removeFooter()
@ -197,7 +201,7 @@ export default class Note {
}
this.status.hide()
new StatusMessage(shareMessage, StatusType.Info, 6000)
new StatusMessage(shareMessage, StatusType.Success)
}
async upload (data: UploadData) {

View file

@ -25,12 +25,6 @@ const html = `
.status-bar {
position: fixed !important;
}
@media all and (max-width: 768px) {
#template-preview-view {
padding: 16px 8px;
}
}
</style>
</head>
<body>
@ -64,6 +58,21 @@ const html = `
</div>
<div id="encrypted-data" style="display: none;"></div>
<script>
// Add/remove mobile classes depending on viewport size
function toggleMobileClasses () {
const mobileClasses = ['is-mobile', 'is-phone']
if (window.innerWidth <= 768) {
// Is mobile
document.body.classList.add(...mobileClasses)
} else {
document.body.classList.remove(...mobileClasses)
}
}
window.addEventListener('resize', () => {
toggleMobileClasses()
})
toggleMobileClasses()
function base64ToArrayBuffer(base64) {
const binaryString = atob(base64)
const bytes = new Uint8Array(binaryString.length)
@ -93,9 +102,10 @@ const html = `
/*
* Decrypt the original note content
*/
const payload = JSON.parse(document.getElementById('encrypted-data').innerText)
const encryptedData = document.getElementById('encrypted-data').innerText.trim()
const payload = encryptedData ? JSON.parse(encryptedData) : ''
const secret = window.location.hash.slice(1) // Taken from the URL # parameter
if (secret) {
if (payload && secret) {
decryptString({ ciphertext: payload.ciphertext, iv: payload.iv }, secret)
.then(text => {
// Inject the user's data

View file

@ -17,5 +17,6 @@
"0.2.8": "0.15.0",
"0.2.9": "0.15.0",
"0.2.10": "0.15.0",
"0.2.11": "0.15.0"
"0.2.11": "0.15.0",
"0.2.12": "0.15.0"
}