me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

applying compatability changes from new-website to this

Browse source
This commit is contained in:
Andrew Gundersen 2022-02-11 11:18:58 -06:00
commit ead81883b2
13 changed files with 232 additions and 190 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/render/components/app.js
View file

@ -20,14 +20,14 @@ const App =
},
template: `
<main id="app" v-if="account !== null">
<div id="app" v-if="account !== null">
<Header />
<Messenger v-if="account"/>
<Login v-else />
</main>
</div>
<Splash v-else />`
}

43
src/render/components/control/draggify.js
View file

@ -1,5 +1,5 @@
const saveLocation = "input_item_position";
const defaultPosition = { x: 15, y: window.innerHeight - 300 };
const defaultPosition = { x: 15, y: 400 };
//---Dragabble Helper Funcs--------------------------------------
@ -33,9 +33,10 @@ function calcPosition (elementPosition, elementLength, percent, short, win) {
return elementPosition
}
function draggify(elementId, margin) {
function draggify(elementId, parentId, margin) {
let element;
let parent;
/* only compatible with elements having equal width and height */
let elementLength;
@ -52,14 +53,11 @@ function draggify(elementId, margin) {
let xShort;
let yShort;
// Keep track of window size;
let winW = window.innerWidth;
let winH = window.innerHeight;
//---Reposition Anime-----------------------------------------------
// Move element to target smoothly.
const repositionAnime = (xChange, yChange) => {
const xStep = xChange / 6000;
const yStep = yChange / 6000;
@ -79,9 +77,8 @@ function draggify(elementId, margin) {
const onMouseMove = (e) => {
e.preventDefault();
const inputItemRect = element.getBoundingClientRect();
elementX.value = inputItemRect.left + e.movementX;
elementY.value = inputItemRect.top + e.movementY;
elementX.value = element.offsetLeft + e.movementX;
elementY.value = element.offsetTop + e.movementY;
}
// Add an event listener for dragging.
@ -102,6 +99,9 @@ function draggify(elementId, margin) {
let x = 0; // vector change
let y = 0;
const winW = parent.clientWidth;
const winH = parent.clientHeight;
if (elementX.value < 0) {
x = (elementX.value - margin)*-1
}
@ -138,12 +138,8 @@ function draggify(elementId, margin) {
// Update position of targetEl on windowResize.
const onWindowResize = (_e) => {
// Update window dimensions.
winW = window.innerWidth;
winH = window.innerHeight;
elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, winW);
elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, winH);
elementX.value = calcPosition(elementX.value, elementLength, percentX, xShort, parent.clientWidth);
elementY.value = calcPosition(elementY.value, elementLength, percentY, yShort, parent.clientHeight);
savePosition();
}
@ -160,27 +156,28 @@ function draggify(elementId, margin) {
Vue.onMounted(() => {
element = document.getElementById(elementId);
parent = document.getElementById(parentId);
elementLength = element.offsetWidth;
// Initialize the positional references.
percentX = elementX.value / window.innerWidth;
percentY = elementY.value / window.innerHeight;
percentX = elementX.value / parent.clientWidth;
percentY = elementY.value / parent.clientHeight;
xShort = calcSideProximity(elementX.value, elementLength, window.innerWidth);
yShort = calcSideProximity(elementX.value, elementLength, window.innerHeight);
xShort = calcSideProximity(elementX.value, elementLength, parent.clientWidth);
yShort = calcSideProximity(elementX.value, elementLength, parent.clientHeight);
// Then, we can listen for window resize (and mousedown).
element.addEventListener("mousedown", onMouseDown);
window.addEventListener('resize', onWindowResize)
parent.addEventListener('resize', onWindowResize)
});
// remove event listeners on component dismount.
Vue.onUnmounted(() => {
element.removeEventListener('mousedown', onMouseDown);
window.removeEventListener('resize', onWindowResize)
window.removeEventListener('mouseup', onMouseUp)
window.removeEventListener('mousemove', onMouseMove);
parent.removeEventListener('resize', onWindowResize)
parent.removeEventListener('mouseup', onMouseUp)
parent.removeEventListener('mousemove', onMouseMove);
});
// Try loading initPosition, otherwise set default values

78
src/render/components/form.js Normal file
View file

@ -0,0 +1,78 @@
const debounce = (fn, delay) => {
let timeoutId;
const wrapper = (...args) => {
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(() => {
fn(...args);
}, delay);
}
return wrapper;
}
const SmartForm =
{
props: ["fields", "channel", "modifier"],
setup(props)
{
let logsEl;
const submit = debounce(async (data) => {
const err = await fetch(props.channel, data);
if (err) {
logsEl.style.color == "red";
logsEl.innerText = err;
return;
}
logsEl.style.color = "green";
logsEl.innerText = props.modifier;
}, 2000);
Vue.onMounted(() => {
const el = document.getElementById("smart-form");
logsEl = el.querySelector(".smart-form-logs");
logsEl.innerText = props.modifier;
el.addEventListener("input", () => {
submit(new FormData(el))
});
});
},
template: `
<form id="smart-form" class="smart-form">
<div v-for="field in fields" style="display:flex">
<input type="text" class="text-field"
:name="field.name"
:value="field.value"
:placeholder="field.placeholder"
/>
</div>
<div class="smart-form-logs"></div>
</form>`
}
export default SmartForm;

2
src/render/components/input.js
View file

@ -11,7 +11,7 @@ const Input =
const recording = Vue.ref(false);
const { elementX, elementY } = draggify("input", 15);
const { elementX, elementY } = draggify("input", "app", 15);
const { leftSide, show } = useText("input-text", elementX);

74
src/render/components/login.js
View file

@ -1,58 +1,40 @@
import SmartForm from "./form.js";
const Login =
{
components: {
SmartForm
},
setup()
{
const usr = Vue.ref("");
const pwd = Vue.ref("");
const submitForm = async () => {
const success = await window.mainApi.invoke("login", usr.value, pwd.value);
if (!success) shake("login-form");
}
return { usr, pwd, submitForm };
return;
},
template: `
<form id="login" @submit.prevent="submitForm">
<div id="login">
<!-- username and password forms -->
<div id="login-form">
<!-- username -->
<div class="login-input-box">
<input class="login-input" type="text" v-model="usr" />
<div class="login-input-modifier">Email</div>
</div>
<!-- <SmartForm
:fields="[{
name: 'email',
value: null,
placeholder: 'Email',
},
{
name: 'password',
value: null,
placeholder: 'Password'
},
{
name: 'repassword',
value: null,
placeholder: 'Re-Password'
}]"
:channel="'auth'"
:modifier="'Login or re-enter password to register.'"
/> -->
<!-- password -->
<div class="login-input-box">
<input class="login-input" type="password" v-model="pwd" />
<div class="login-input-modifier">Password</div>
</div>
</div>
<!-- submit button; position: fixed -->
<button
class="login-submit-button button"
type="submit"
>
Login
</button>
</form> `
}
/** Shake a div to indicate incorrect credentials */
const shake = (elementId) =>
{
const el = document.getElementById(elementId);
if (el)
el.classList.remove("shake");
setTimeout(() => {
if (el) el.classList.add("shake");
}, 250);
</div>`
}
export default Login;

3
src/render/components/message.js
View file

@ -18,8 +18,9 @@ const Message =
template: `
<div :id="id" :class="'message ' + modifier + '-message'">
<Bubble
<Bubble
v-for="(c, index) in content"
:id="'bubble-' + id + '-' + index"
:category="c.category"
:text="c.text"
:html="c.html"

12
src/render/components/messenger.js
View file

@ -71,14 +71,12 @@ const Messenger = {
@dragover.prevent
@dragenter.prevent
>
<Message
v-for="message in messages"
:modifier="message.modifier"
:content="message.content"
:context="message.context"
:avatar="message.avatar"
:id="message.id"
<Message
v-for="message in messages"
v-bind="message"
/>
</div> `
}

4
src/render/components/settings.js
View file

@ -20,7 +20,7 @@ const Settings =
await window.mainApi.send("logout");
}
return { showSettings, active, logout };
return { showSettings, active, logout, window };
},
template: `
@ -33,7 +33,7 @@ const Settings =
</div>
<button v-else class="settings-icon" @click="showSettings">
<img src="./assets/settingsIcon.svg">
<img :src="window.path + 'assets/settingsIcon.svg'">
</button>`
}

4
src/render/components/ws.js
View file

@ -13,13 +13,13 @@ const WS =
});
return { status }
return { status, window }
},
template: `
<div id="ws">
<img id="ws-logo" src="./assets/connectLogo.svg"
<img id="ws-logo" :src="window.path + 'assets/connectLogo.svg'"
:class="{ move: status }"
>