Skip to content

Commit

Permalink
improved UX/UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@ManeraKai
ManeraKai committed Jul 12, 2023
1 parent df1ea69 commit bc370c2
Show file tree
Hide file tree
Showing 5 changed files with 120 additions and 29 deletions.
20 changes: 19 additions & 1 deletion src/pages/lib/lemmy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,8 @@ function isLemmy(url) {
else resolve(false)
}
}
req.send()
try { req.send() }
catch (error) { resolve(false) }
})
}

Expand All @@ -45,6 +46,11 @@ function resolveObject(q, type, options) {
})
}

function can_lemmy_to_lemmy(url, options) {
if (!options.lemmy) return 'credentials'
return true
}

function lemmy_to_lemmy(url, options) {
return new Promise(async resolve => {
const postRegex = url.pathname.match(regex.post)
Expand Down Expand Up @@ -98,6 +104,14 @@ function lemmy_to_lemmy(url, options) {
})
}

function can_lemmy_to_mastodon(url, options) {
if (!options.mastodon) return 'credentials'
for (const regexItem of [regex.userFederated, regex.userLocal, regex.communityFederated, regex.communityLocal]) {
if (url.pathname.match(regexItem)) return true
}
return false
}

function lemmy_to_mastodon(url, options) {
return new Promise(async resolve => {
const userFederatedRegex = url.pathname.match(regex.userFederated)
Expand Down Expand Up @@ -126,7 +140,11 @@ function lemmy_to_mastodon(url, options) {

export default {
isLemmy,

can_lemmy_to_lemmy,
lemmy_to_lemmy,

can_lemmy_to_mastodon,
lemmy_to_mastodon,
regex
}
20 changes: 19 additions & 1 deletion src/pages/lib/mastodon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,19 @@ function isMastodon(url) {
else resolve(false)
}
}
req.send()
try { req.send() }
catch (error) { resolve(false) }
})
}

function can_mastodon_to_lemmy(url, options) {
if (!options.lemmy) return 'credentials'
for (const regexItem of [regex.userFederated, regex.userLocal]) {
if (url.pathname.match(regexItem)) return true
}
return false
}

function mastodon_to_lemmy(url, options) {
return new Promise(async resolve => {
console.log(url.pathname)
Expand All @@ -37,6 +46,11 @@ function mastodon_to_lemmy(url, options) {
})
}

function can_mastodon_to_mastodon(url, options) {
if (!options.lemmy) return 'credentials'
return true
}

function mastodon_to_mastodon(url, options) {
return new Promise(async resolve => {
const localPostRegex = url.pathname.match(regex.postLocal)
Expand Down Expand Up @@ -73,7 +87,11 @@ function mastodon_to_mastodon(url, options) {

export default {
isMastodon,

can_mastodon_to_lemmy,
mastodon_to_lemmy,

can_mastodon_to_mastodon,
mastodon_to_mastodon,
regex
}
14 changes: 7 additions & 7 deletions src/pages/popup/popup.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,20 +9,20 @@
</head>

<body dir="auto">
<div class="block" id="redirect_to_lemmy_div">
<a class="title button prevent" id="redirect_to_lemmy">
<div class="block" id="redirect_to_lemmy_div" style="display: none">
<button class="title button" id="redirect_to_lemmy">
<h4>Redirect => Lemmy</h4>
<img src="/assets/lemmy.svg">
</a>
</button>
</div>
<div class="block" id="redirect_to_mastodon_div">
<a class="title button prevent" id="redirect_to_mastodon">
<div class="block" id="redirect_to_mastodon_div" style="display: none">
<button class="title button" id="redirect_to_mastodon">
<h4>Redirect => Mastodon</h4>
<img src="/assets/mastodon.webp">
</a>
</button>
</div>
<div class="block">
<a class="title button prevent" id="more-options">
<a class="title button" id="more-options">
<h4 data-localise="__MSG_settings__">Settings</h4>
<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="26px" width="26px"
fill="currentColor">
Expand Down
69 changes: 53 additions & 16 deletions src/pages/popup/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,26 +9,63 @@ let options
let url = new URL(tabs[0].url);

if (await lemmy.isLemmy(url)) {
document.getElementById("redirect_to_lemmy").addEventListener("click", async () => {
const newUrl = await lemmy.lemmy_to_lemmy(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
document.getElementById("redirect_to_mastodon").addEventListener("click", async () => {
const newUrl = await lemmy.lemmy_to_mastodon(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
const can_lemmy_to_lemmy = lemmy.can_lemmy_to_lemmy(url, options)
if (can_lemmy_to_lemmy) {
document.getElementById("redirect_to_lemmy_div").style.display = ''
if (can_lemmy_to_lemmy == 'credentials') {
document.getElementById("redirect_to_lemmy").disabled = true
document.getElementById("redirect_to_lemmy").title = 'Requires Credentials'
} else {
document.getElementById("redirect_to_lemmy").addEventListener("click", async () => {
const newUrl = await lemmy.lemmy_to_lemmy(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
}
}
const can_lemmy_to_mastodon = lemmy.can_lemmy_to_mastodon(url, options)
if (can_lemmy_to_mastodon) {
document.getElementById("redirect_to_mastodon_div").style.display = ''
if (can_lemmy_to_mastodon == 'credentials') {
document.getElementById("redirect_to_mastodon").disabled = true
document.getElementById("redirect_to_mastodon").title = 'Requires Credentials'
} else {
document.getElementById("redirect_to_mastodon").addEventListener("click", async () => {
const newUrl = await lemmy.lemmy_to_mastodon(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
}
}
return
}

if (await mastodon.isMastodon(url)) {
document.getElementById("redirect_to_lemmy").addEventListener("click", async () => {
const newUrl = await mastodon.mastodon_to_lemmy(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
document.getElementById("redirect_to_mastodon").addEventListener("click", async () => {
const newUrl = await mastodon.mastodon_to_mastodon(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
const can_mastodon_to_lemmy = mastodon.can_mastodon_to_lemmy(url, options)
if (can_mastodon_to_lemmy) {
document.getElementById("redirect_to_lemmy_div").style.display = ''
if (can_mastodon_to_lemmy == 'credentials') {
document.getElementById("redirect_to_lemmy").disabled = true
document.getElementById("redirect_to_lemmy").title = 'Requires Credentials'
} else {
document.getElementById("redirect_to_lemmy").addEventListener("click", async () => {
const newUrl = await mastodon.mastodon_to_lemmy(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
}
}

const can_mastodon_to_mastodon = mastodon.can_mastodon_to_mastodon(url, options)
if (can_mastodon_to_mastodon) {
document.getElementById("redirect_to_mastodon_div").style.display = ''
if (can_mastodon_to_mastodon == 'credentials') {
document.getElementById("redirect_to_mastodon").disabled = true
document.getElementById("redirect_to_mastodon").title = 'Requires Credentials'
} else {
document.getElementById("redirect_to_mastodon").addEventListener("click", async () => {
const newUrl = await mastodon.mastodon_to_mastodon(url, options)
if (newUrl) browser.tabs.update({ url: newUrl })
})
}
}
return
}
})
Expand Down
26 changes: 22 additions & 4 deletions src/pages/stylesheets/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,10 @@ body {
color: var(--text);
}

body * {
font-family: "Inter";
}

.title {
display: flex;
align-items: center;
Expand Down Expand Up @@ -155,6 +159,7 @@ div.block input[type="checkbox"] {
}

div.block h4 {
text-align: left;
margin: 0;
margin-right: 5px;
width: 80%;
Expand Down Expand Up @@ -207,17 +212,26 @@ div.buttons {
}

.button {
padding: 0;
margin: 0;
color: var(--text);
font-size: 16px;
font-weight: bold;
text-decoration: none;
cursor: pointer;
font-weight: normal;
transition-duration: 0.1s;
cursor: pointer;
}

.button:disabled {
color: var(--dark-grey);
cursor: auto
}

.button:hover {
color: var(--active);
}
.button:disabled:hover {
color: var(--dark-grey);
}

.button svg,
.button img {
Expand Down Expand Up @@ -249,6 +263,11 @@ div.buttons-inline {
transform: translateY(1px);
}

.button:disabled:active {
transform: none;

}

button.default {
margin-left: 30px;
background-color: transparent;
Expand Down Expand Up @@ -295,7 +314,6 @@ button {
padding: 10px 5px;
text-decoration: none;
display: inline-block;
cursor: pointer;
border-radius: 5px;
}

Expand Down

0 comments on commit bc370c2

Please sign in to comment.