skorotkiewicz/yosup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added URL history paths & loading

Browse source
This commit is contained in:
Thomas Mathews 2023-01-24 12:23:04 -08:00
parent f169ee7bf6
commit 1df924df1b
4 changed files with 128 additions and 82 deletions
Download patch file Download diff file Expand all files Collapse all files

114
index.html
View file

@ -7,36 +7,36 @@
<meta http-equiv="Content-Security-Policy"
content="default-src 'none'; manifest-src 'self'; connect-src 'self' ws: wss:; script-src 'self'; script-src-elem 'self'; script-src-attr 'none'; style-src 'self' fonts.googleapis.com; img-src http: https: data:; media-src *; font-src 'self' fonts.gstatic.com; child-src 'none';" />
<title>Yo, Sup</title>
<link rel="manifest" href="pwa/manifest.json"/>
<link rel="icon" href="icon/icon.svg" type="image/svg+xml"/>
<link rel="apple-touch-icon" href="pwa/icon-256.png"/>
<link rel="stylesheet" href="css/vars.css?v=1">
<link rel="stylesheet" href="css/utils.css?v=1">
<link rel="stylesheet" href="css/styles.css?v=13">
<link rel="stylesheet" href="css/responsive.css?v=10">
<script defer src="js/ui/safe-html.js?v=1"></script>
<script defer src="js/util.js?v=5"></script>
<script defer src="js/ui/util.js?v=8"></script>
<script defer src="js/ui/render.js?v=15"></script>
<script defer src="js/ui/state.js?v=1"></script>
<script defer src="js/ui/fmt.js?v=1"></script>
<script defer src="js/ui/profile.js?v=1"></script>
<script defer src="js/ui/settings.js?v=1"></script>
<script defer src="js/ui/dm.js?v=1"></script>
<script defer src="js/noble-secp256k1.js?v=1"></script>
<script defer src="js/bech32.js?v=1"></script>
<script defer src="js/nostr.js?v=7"></script>
<script defer src="js/core.js?v=1"></script>
<script defer src="js/model.js?v=1"></script>
<script defer src="js/contacts.js?v=1"></script>
<script defer src="js/event.js?v=1"></script>
<script defer src="js/lib.js?v=1"></script>
<script defer src="js/main.js?v=1"></script>
<link rel="manifest" href="/pwa/manifest.json"/>
<link rel="icon" href="/icon/icon.svg" type="image/svg+xml"/>
<link rel="apple-touch-icon" href="/pwa/icon-256.png"/>
<link rel="stylesheet" href="/css/vars.css?v=1">
<link rel="stylesheet" href="/css/utils.css?v=1">
<link rel="stylesheet" href="/css/styles.css?v=13">
<link rel="stylesheet" href="/css/responsive.css?v=10">
<script defer src="/js/ui/safe-html.js?v=1"></script>
<script defer src="/js/util.js?v=5"></script>
<script defer src="/js/ui/util.js?v=8"></script>
<script defer src="/js/ui/render.js?v=15"></script>
<script defer src="/js/ui/state.js?v=1"></script>
<script defer src="/js/ui/fmt.js?v=1"></script>
<script defer src="/js/ui/profile.js?v=1"></script>
<script defer src="/js/ui/settings.js?v=1"></script>
<script defer src="/js/ui/dm.js?v=1"></script>
<script defer src="/js/noble-secp256k1.js?v=1"></script>
<script defer src="/js/bech32.js?v=1"></script>
<script defer src="/js/nostr.js?v=7"></script>
<script defer src="/js/core.js?v=1"></script>
<script defer src="/js/model.js?v=1"></script>
<script defer src="/js/contacts.js?v=1"></script>
<script defer src="/js/event.js?v=1"></script>
<script defer src="/js/lib.js?v=1"></script>
<script defer src="/js/main.js?v=1"></script>
</head>
<body>
<div id="container-busy">
<div class="loader" title="Loading...">
<img class="dark-invert" src="icon/loader-fragment.svg"/>
<img class="dark-invert" src="/icon/loader-fragment.svg"/>
</div>
</div>
<div id="container-welcome" class="hide">
@ -44,12 +44,12 @@
<div class="padded">
<h1>
Yo, Sup?
<img class="icon svg" src="icon/logo-inverted.svg"/>
<img class="icon svg" src="/icon/logo-inverted.svg"/>
</h1>
<p>The blue bird experience for Nostr.</p>
<button class="action" action="sign-in">
Sign In with Key
<img src="./icon/key.svg" class="icon svg small invert"/>
<img src="/icon/key.svg" class="icon svg small invert"/>
</button>
</div>
</div>
@ -58,24 +58,24 @@
<div id="container-app" class="hide">
<nav id="gnav">
<button class="icon" action="toggle-gnav" title="Open Menu">
<img class="icon svg invert" src="icon/logo.svg"/>
<img class="icon svg invert" src="/icon/logo.svg"/>
</button>
<button class="icon" action="open-view" data-view="friends" title="Home">
<img class="icon svg invert" src="icon/home.svg"/>
<img class="icon svg invert" src="/icon/home.svg"/>
</button>
<button class="icon" action="open-view" data-view="explore" title="Explore">
<img class="icon svg invert" src="icon/explore.svg"/>
<img class="icon svg invert" src="/icon/explore.svg"/>
</button>
<button class="icon" action="open-view" data-view="dm" title="Direct Messages">
<img class="icon svg invert" src="icon/messages.svg"/>
<img class="icon svg invert" src="/icon/messages.svg"/>
<div class="new-notifications hide" role="dm"></div>
</button>
<button class="icon" action="open-view" data-view="notifications" title="Notifications">
<img class="icon svg invert" src="icon/notifications.svg"/>
<img class="icon svg invert" src="/icon/notifications.svg"/>
<div class="new-notifications hide" role="activity"></div>
</button>
<button class="icon" action="open-view" data-view="settings" title="Settings">
<img class="icon svg invert" src="icon/settings.svg"/>
<img class="icon svg invert" src="/icon/settings.svg"/>
</button>
</nav>
<div id="container">
@ -83,33 +83,33 @@
<div id="nav" class="flex-noshrink vertical-hide">
<div data-active="home">
<div id="app-icon-logo">
<img class="icon svg" title="Damus" src="icon/logo-inverted.svg"/>
<img class="icon svg" title="Damus" src="/icon/logo-inverted.svg"/>
</div>
<button action="open-view" data-view="friends" class="nav icon"
title="Home">
<img class="icon svg inactive" src="icon/home.svg"/>
<img class="icon svg active" src="icon/home-active.svg"/>
<img class="icon svg inactive" src="/icon/home.svg"/>
<img class="icon svg active" src="/icon/home-active.svg"/>
</button>
<button action="open-view" data-view="explore" class="nav icon"
title="Explore"> <img class="icon svg inactive" src="icon/explore.svg"/>
<img class="icon svg active" src="icon/explore-active.svg"/>
title="Explore"> <img class="icon svg inactive" src="/icon/explore.svg"/>
<img class="icon svg active" src="/icon/explore-active.svg"/>
</button>
<button action="open-view" data-view="dm" class="nav icon"
title="Direct Messages">
<img class="icon svg inactive" src="icon/messages.svg"/>
<img class="icon svg active" src="icon/messages-active.svg"/>
<img class="icon svg inactive" src="/icon/messages.svg"/>
<img class="icon svg active" src="/icon/messages-active.svg"/>
<div class="new-notifications hide" role="dm"></div>
</button>
<button action="open-view" data-view="notifications"
class="nav icon" title="Notifications">
<img class="icon svg inactive" src="icon/notifications.svg"/>
<img class="icon svg active" src="icon/notifications-active.svg"/>
<img class="icon svg inactive" src="/icon/notifications.svg"/>
<img class="icon svg active" src="/icon/notifications-active.svg"/>
<div class="new-notifications hide" role="activity"></div>
</button>
<button action="open-view" data-view="settings"
title="Settings" class="nav icon">
<img class="icon svg inactive" src="icon/settings.svg"/>
<img class="icon svg active" src="icon/settings-active.svg"/>
<img class="icon svg inactive" src="/icon/settings.svg"/>
<img class="icon svg active" src="/icon/settings-active.svg"/>
</button>
</div>
</div>
@ -128,9 +128,9 @@
Mark All Read
</button>
<img class="pfp hide" role="their-pfp" data-pubkey=""
src="icon/no-user.svg"/>
src="/icon/no-user.svg"/>
<img class="pfp hide" role="my-pfp" data-pubkey=""
src="icon/no-user.svg"/>
src="/icon/no-user.svg"/>
</div>
</header>
<div id="newpost">
@ -142,7 +142,7 @@
<button class="cw icon" role="toggle-cw"
title="Mark this message as sensitive.">
<img class="icon svg small"
src="icon/content-warning.svg"/>
src="/icon/content-warning.svg"/>
</button>
<button class="action" role="send"
id="post-button" disabled>Send</button>
@ -154,14 +154,14 @@
<div class="profile-tools">
<button class="icon" role="message-user"
title="Directly Message">
<img class="icon svg" src="icon/message-user.svg"/>
<img class="icon svg" src="/icon/message-user.svg"/>
</button>
<button class="icon hide" role="edit-profile"
title="Edit Profile">
<img class="icon svg" src="icon/edit-profile.svg"/></button>
<img class="icon svg" src="/icon/edit-profile.svg"/></button>
<button class="icon" role="copy-pk"
data-pk="" title="Copy Public Key">
<img class="icon svg" src="icon/pubkey.svg"/></button>
<img class="icon svg" src="/icon/pubkey.svg"/></button>
<button class="action" role="follow-user"
data-pk="">Follow</button>
</div>
@ -173,7 +173,7 @@
</div>
<div class="loading-events">
<div class="loader" title="Loading...">
<img class="dark-invert" src="icon/loader-fragment.svg"/>
<img class="dark-invert" src="/icon/loader-fragment.svg"/>
</div>
</div>
<div id="show-new" class="show-new bottom-border hide">
@ -193,7 +193,7 @@
<header>
<label>Relays</label>
<button id="add-relay" class="btn-text">
<img class="svg icon small" src="icon/add-relay.svg"/>
<img class="svg icon small" src="/icon/add-relay.svg"/>
</button>
</header>
<table id="relay-list" class="row">
@ -218,7 +218,7 @@
<div class="row">
<button class="action" role="sign-out">
Sign Out
<img class="icon svg small invert" src="icon/sign-out.svg"/>
<img class="icon svg small invert" src="/icon/sign-out.svg"/>
</button>
</div>
</section>
@ -260,7 +260,7 @@
<header>
<label>Reply To</label>
<button class="icon" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div id="replying-to"></div>
@ -279,7 +279,7 @@
<header>
<label>Update Profile</label>
<button class="icon" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div>
@ -298,7 +298,7 @@
<header>
<label>Event Details</label>
<button class="icon modal-floating-close-btn" action="close-modal">
<img class="icon svg" src="icon/close-modal.svg"/>
<img class="icon svg" src="/icon/close-modal.svg"/>
</button>
</header>
<div class="max-content">

42
js/main.js
View file

@ -1,9 +1,9 @@
let DAMUS = new_model();
// TODO autogenerate these constants with a bash script
const IMG_EVENT_LIKED = "icon/event-liked.svg";
const IMG_EVENT_LIKE = "icon/event-like.svg";
const IMG_NO_USER = "icon/no-user.svg";
const IMG_EVENT_LIKED = "/icon/event-liked.svg";
const IMG_EVENT_LIKE = "/icon/event-like.svg";
const IMG_NO_USER = "/icon/no-user.svg";
const SID_META = "meta";
const SID_HISTORY = "history";
@ -103,10 +103,10 @@ async function webapp_init() {
model_process_event(model, undefined, ev);
});
log_debug("loaded events", Object.keys(model.all_events).length);
*/
// Update our view and apply timer methods once all data is ready to go.
view_timeline_update(model);*/
view_timeline_apply_mode(model, VM_FRIENDS, {hide_replys: true});
var { mode, opts, valid } = parse_url_mode();
view_timeline_apply_mode(model, mode, opts, !valid);
on_timer_timestamps();
on_timer_invalidations();
on_timer_save();
@ -115,6 +115,36 @@ async function webapp_init() {
return pool;
}
function parse_url_mode() {
var mode;
var valid = true;
var opts = {};
var parts = window.location.pathname.split("/").slice(1);
for (var key in VIEW_NAMES) {
if (VIEW_NAMES[key].toLowerCase() == parts[0]) {
mode = key;
break;
}
}
if (!mode) {
mode = VM_FRIENDS;
valid = false;
}
switch (mode) {
case VM_FRIENDS:
opts.hide_replys = true;
break;
case VM_THREAD:
opts.thread_id = parts[1];
break;
case VM_DM_THREAD:
case VM_USER:
opts.pubkey = parts[1];
break;
}
return { mode, opts, valid };
}
function on_timer_timestamps() {
setTimeout(() => {
view_timeline_update_timestamps();

12
js/ui/render.js
View file

@ -198,7 +198,7 @@ function render_action_bar(model, ev, opts={}) {
if (!shared && event_can_reply(ev)) {
str += html`
<button class="icon" title="Reply" action="reply-to" data-evid="${ev.id}">
<img class="icon svg small" src="icon/event-reply.svg"/>
<img class="icon svg small" src="/icon/event-reply.svg"/>
</button>
<button class="icon react heart ${ab(liked, 'liked', '')}"
action="react-like"
@ -212,28 +212,28 @@ function render_action_bar(model, ev, opts={}) {
if (!shared) {
str += html`<button class="icon" title="Share" data-evid="${ev.id}"
action="share">
<img class="icon svg small" src="icon/event-share.svg"/>
<img class="icon svg small" src="/icon/event-share.svg"/>
</button>`;
}
str += `
<button class="icon" title="View Thread" action="open-thread"
data-thread-id="${thread_root}">
<img class="icon svg small" src="icon/open-thread.svg"/>
<img class="icon svg small" src="/icon/open-thread.svg"/>
</button>
<button class="icon" title="View Replies" action="open-thread"
data-thread-id="${ev.id}">
<img class="icon svg small" src="icon/open-thread-here.svg"/>
<img class="icon svg small" src="/icon/open-thread-here.svg"/>
</button>
<button class="icon" title="View Event JSON" action="show-event-json"
data-evid="${ev.id}">
<img class="icon svg small" src="icon/event-details.svg"/>
<img class="icon svg small" src="/icon/event-details.svg"/>
</button>`;
if (can_delete) {
const delete_id = shared ? shared.share_evid : ev.id;
str += html`
<button class="icon" title="Delete" action="confirm-delete"
data-evid="${delete_id}">
<img class="icon svg small" src="icon/event-delete.svg"/>
<img class="icon svg small" src="/icon/event-delete.svg"/>
</button>`
}
return str + "</div>";

42
js/ui/state.js
View file

@ -7,6 +7,16 @@ const VM_THREAD = "thread"; // all events in response to target event
const VM_USER = "user"; // all events by pubkey
const VM_SETTINGS = "settings";
const VIEW_NAMES= {};
VIEW_NAMES[VM_FRIENDS] = "Home";
VIEW_NAMES[VM_EXPLORE] = "Explore";
VIEW_NAMES[VM_NOTIFICATIONS] = "Notifications";
VIEW_NAMES[VM_DM] = "Messages";
VIEW_NAMES[VM_DM_THREAD] = "DM";
VIEW_NAMES[VM_USER] = "Profile";
VIEW_NAMES[VM_THREAD] = "Thread";
VIEW_NAMES[VM_SETTINGS] = "Settings";
function view_get_timeline_el() {
return find_node("#timeline");
}
@ -48,10 +58,6 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
}
}
// Push a new state to the browser history stack
if (push_state)
history.pushState({mode, opts}, '');
// Fetch history for certain views
if (mode == VM_THREAD) {
view_show_spinner(true);
@ -65,18 +71,28 @@ function view_timeline_apply_mode(model, mode, opts={}, push_state=true) {
reset_notifications(model);
}
const names = {};
names[VM_FRIENDS] = "Home";
names[VM_EXPLORE] = "Explore";
names[VM_NOTIFICATIONS] = "Notifications";
names[VM_DM] = "Messages";
names[VM_DM_THREAD] = "Messages";
names[VM_USER] = "Profile";
names[VM_THREAD] = "Thread";
names[VM_SETTINGS] = "Settings";
const names = VIEW_NAMES;
let name = names[mode];
let profile;
// Push a new state to the browser history stack
if (push_state) {
let pieces = [name.toLowerCase()];
switch (mode) {
case VM_FRIENDS:
pieces = [];
break;
case VM_THREAD:
pieces.push(thread_id);
break;
case VM_USER:
case VM_DM_THREAD:
pieces.push(pubkey);
break;
}
history.pushState({mode, opts}, "", "/"+pieces.join("/"));
}
el.dataset.mode = mode;
delete el.dataset.threadId;
delete el.dataset.pubkey;