kev
/
Onionr
1
0
Fork 0
Code Issues 24 Pull Requests Projects Releases 2 Wiki Activity

Add notifications

This commit is contained in:
Arinerron 2018-09-12 22:30:49 -07:00
parent 0f91bf7018
commit 7738de1c28
6 changed files with 188 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
onionr/static-data/www/ui/dist/index.html vendored
View File

@ -43,13 +43,21 @@
<img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src=""> <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="">
</div> </div>
<div class="col-8 col-lg-12"> <div class="col-8 col-lg-12">
<h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2> <h2 maxlength="25" id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2>
</div> </div>
<div class="col-sm-6 col-lg-12"> <div class="col-12">
<input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="Save" style="display: none" /> <p maxlength="128" id="onionr-profile-description" class="onionr-profile-description" data-editable></p>
</div> </div>
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="Cancel" style="display: none" /> <div class="col-12 onionr-profile-edit" id="onionr-profile-edit" style="display: none">
<div class="row">
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="Save" />
</div>
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="Cancel" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

53
onionr/static-data/www/ui/dist/js/main.js vendored
View File

File diff suppressed because one or more lines are too long

69
onionr/static-data/www/ui/dist/js/timeline.js vendored
View File

@ -58,18 +58,25 @@ function postCreatorChange() {
var content = document.getElementById('onionr-post-creator-content').value; var content = document.getElementById('onionr-post-creator-content').value;
var message = ''; var message = '';
var maxlength = 280;
var disable = true; var disable = true;
var warn = false;
if(content.length !== 0) { if(content.length !== 0) {
if(content.length - content.replaceAll('\n', '').length > 16) { if(content.length - content.replaceAll('\n', '').length > 16) {
// 16 max newlines // 16 max newlines
message = 'Please use less than 16 newlines'; message = 'Please use less than 16 newlines';
} else if(content.length <= 280) { } else if(content.length <= maxlength) {
// 280 max characters // 280 max characters
message = '%s characters remaining'.replaceAll('%s', (280 - content.length)); message = '%s characters remaining'.replaceAll('%s', (280 - content.length));
disable = false; disable = false;
if(maxlength - content.length < maxlength / 4) {
warn = true;
}
} else { } else {
message = '%s characters over maximum'.replaceAll('%s', (content.length - 280)); message = '%s characters over maximum'.replaceAll('%s', (content.length - maxlength));
} }
} }
@ -85,6 +92,8 @@ function postCreatorChange() {
if(disable) if(disable)
element.style.color = 'red'; element.style.color = 'red';
else if(warn)
element.style.color = '#FF8C00';
else else
element.style.color = 'gray'; element.style.color = 'gray';
} }
@ -101,10 +110,11 @@ function viewProfile(id, name) {
User.getUser(id, function(data) { User.getUser(id, function(data) {
if(data !== null) { if(data !== null) {
document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(data.getName());
document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon()); document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon());
document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon()); document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon());
document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(Sanitize.username(data.getName()));
document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
document.getElementById("onionr-profile-description").innerHTML = Sanitize.html(Sanitize.description(data.getDescription()));
} }
}); });
} }
@ -112,24 +122,26 @@ function viewProfile(id, name) {
function updateUser() { function updateUser() {
toggleSaveButton(false); toggleSaveButton(false);
jQuery('#modal').modal('show'); // jQuery('#modal').modal('show');
var name = jQuery('#onionr-profile-username').text(); var name = jQuery('#onionr-profile-username').text();
var id = document.getElementById("onionr-profile-username").title; var id = document.getElementById("onionr-profile-username").title;
var icon = document.getElementById("onionr-profile-user-icon").b64; var icon = document.getElementById("onionr-profile-user-icon").b64;
var description = 'todo'; var description = jQuery("#onionr-profile-description").text();
var user = new User(); var user = new User();
user.setName(name); user.setName(name);
user.setID(id); user.setID(id);
user.setIcon(icon); user.setIcon(icon);
user.setDescription(description); user.setDescription(Sanitize.description(description));
user.remember(); user.remember();
user.save(); user.save(function() {
setCurrentUser(user);
window.location.reload(); window.location.reload();
});
} }
function cancelUpdate() { function cancelUpdate() {
@ -142,8 +154,7 @@ function cancelUpdate() {
} }
function toggleSaveButton(show) { function toggleSaveButton(show) {
document.getElementById("onionr-profile-save").style.display = (show ? 'block' : 'none'); document.getElementById("onionr-profile-edit").style.display = (show ? 'block' : 'none');
document.getElementById("onionr-profile-cancel").style.display = (show ? 'block' : 'none');
} }
function makePost() { function makePost() {
@ -161,38 +172,56 @@ function makePost() {
document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML; document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML;
document.getElementById("onionr-post-creator-content").value = ""; document.getElementById("onionr-post-creator-content").value = "";
document.getElementById("onionr-post-creator-content").focus();
postCreatorChange(); postCreatorChange();
} else { } else {
console.log('Not making empty post.'); console.log('Not making empty post.');
} }
} }
$('body').on('click', '[data-editable]', function() { jQuery('body').on('click', '[data-editable]', function() {
var el = jQuery(this); var el = jQuery(this);
var txt = el.text(); var txt = el.text();
var maxlength = el.attr("maxlength");
var input = jQuery('<input/>').val(txt); var input = jQuery('<input/>').val(txt);
input.attr('maxlength', maxlength);
el.replaceWith(input); el.replaceWith(input);
var save = function() { var save = function() {
var newTxt = input.val(); var newTxt = input.val();
var p = el.text(Sanitize.username(newTxt));
if(el.attr('id') === 'onionr-profile-username')
newTxt = Sanitize.username(newTxt);
if(el.attr('id') === 'onionr-profile-description')
newTxt = Sanitize.description(newTxt);
var p = el.text(newTxt);
input.replaceWith(p); input.replaceWith(p);
if(newTxt !== txt) if(newTxt !== txt)
toggleSaveButton(true); toggleSaveButton(true);
}; };
input.one('blur', save).focus(); var saveEnter = function(event) {
console.log(event);
console.log(event.keyCode);
if (event.keyCode === 13)
save();
};
input.one('blur', save).bind('keyup', saveEnter).focus();
}); });
currentUser = getCurrentUser(); currentUser = getCurrentUser();
if(currentUser !== undefined && currentUser !== null) {
document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName()); document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName());
document.getElementById("onionr-post-creator-user-id").innerHTML = "you"; document.getElementById("onionr-post-creator-user-id").innerHTML = "you";
document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon()); document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon());
document.getElementById("onionr-post-creator-user-id").title = currentUser.getID(); document.getElementById("onionr-post-creator-user-id").title = currentUser.getID();
document.getElementById("onionr-post-creator-content").placeholder = "Enter a message here..."; document.getElementById("onionr-post-creator-content").placeholder = "Enter a message here...";
}
viewCurrentProfile = function() { viewCurrentProfile = function() {
viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName())); viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName()));

18
onionr/static-data/www/ui/src/index.html
View File

@ -13,13 +13,21 @@
<img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src=""> <img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="">
</div> </div>
<div class="col-8 col-lg-12"> <div class="col-8 col-lg-12">
<h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2> <h2 maxlength="25" id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left" data-placement="top" data-toggle="tooltip" title="unknown" data-editable></h2>
</div> </div>
<div class="col-sm-6 col-lg-12"> <div class="col-12">
<input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="<$= LANG.PROFILE_EDIT_SAVE $>" style="display: none" /> <p maxlength="128" id="onionr-profile-description" class="onionr-profile-description" data-editable></p>
</div> </div>
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="<$= LANG.PROFILE_EDIT_CANCEL $>" style="display: none" /> <div class="col-12 onionr-profile-edit" id="onionr-profile-edit" style="display: none">
<div class="row">
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="updateUser()" class="onionr-profile-save text-center" id="onionr-profile-save" value="<$= LANG.PROFILE_EDIT_SAVE $>" />
</div>
<div class="col-sm-6 col-lg-12">
<input type="button" onclick="cancelUpdate()" class="onionr-profile-save text-center" id="onionr-profile-cancel" value="<$= LANG.PROFILE_EDIT_CANCEL $>" />
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

53
onionr/static-data/www/ui/src/js/main.js
View File

@ -51,6 +51,7 @@ function deserializeUser(id) {
user.setName(serialized['name']); user.setName(serialized['name']);
user.setID(serialized['id']); user.setID(serialized['id']);
user.setIcon(serialized['icon']); user.setIcon(serialized['icon']);
user.setDescription(serialized['description']);
return user; return user;
} }
@ -148,6 +149,11 @@ class Sanitize {
static username(username) { static username(username) {
return String(username).replace(/[\W_]+/g, " ").substring(0, 25); return String(username).replace(/[\W_]+/g, " ").substring(0, 25);
} }
/* profile descriptions */
static description(description) {
return String(description).substring(0, 128);
}
} }
/* config stuff */ /* config stuff */
@ -233,6 +239,7 @@ class User {
} }
static getUser(id, callback) { static getUser(id, callback) {
console.log(callback);
var user = deserializeUser(id); var user = deserializeUser(id);
if(user === null) { if(user === null) {
Block.getBlocks({'type' : 'onionr-user-info', 'signed' : true, 'reverse' : true}, function(data) { Block.getBlocks({'type' : 'onionr-user-info', 'signed' : true, 'reverse' : true}, function(data) {
@ -245,10 +252,11 @@ class User {
if(userInfo['id'] === id) { if(userInfo['id'] === id) {
user.setName(userInfo['name']); user.setName(userInfo['name']);
user.setIcon(userInfo['icon']); user.setIcon(userInfo['icon']);
user.setDescription(userInfo['description']);
user.setID(id); user.setID(id);
user.remember(); user.remember();
console.log(callback);
callback(user); callback(user);
return user; return user;
} }
@ -264,6 +272,7 @@ class User {
} }
}); });
} else { } else {
console.log(callback);
callback(user); callback(user);
return user; return user;
} }
@ -615,6 +624,8 @@ if(getWebPassword() === null) {
} }
if(getCurrentUser() === null) { if(getCurrentUser() === null) {
jQuery('#modal').modal('show');
var url = '/client/?action=info&token=' + Sanitize.url(getWebPassword()) + '&timingToken=' + Sanitize.url(getTimingToken()); var url = '/client/?action=info&token=' + Sanitize.url(getWebPassword()) + '&timingToken=' + Sanitize.url(getTimingToken());
console.log(url); console.log(url);
@ -623,32 +634,32 @@ if(getCurrentUser() === null) {
// sync // sync
http.open('GET', url, false); http.addEventListener('load', function() {
http.send(null); var id = JSON.parse(http.responseText)['pubkey'];
var id = JSON.parse(http.responseText)['pubkey']; User.getUser(id, function(data) {
if(data === null || data === undefined) {
var user = new User();
User.getUser(id, function(data) { user.setName('New User');
if(data === null || data === undefined) { user.setID(id);
jQuery('#modal').modal('show'); user.setIcon('<$= Template.jsTemplate("default-icon") $>');
user.setDescription('A new OnionrUI user');
var user = new User(); user.remember();
user.save();
user.setName('New User'); setCurrentUser(user);
user.setID(id); } else {
user.setIcon('<$= Template.jsTemplate("default-icon") $>'); setCurrentUser(data);
user.setDescription('A new OnionrUI user'); }
user.remember();
user.save();
setCurrentUser(user);
window.location.reload(); window.location.reload();
} else { });
setCurrentUser(data); }, false);
}
}); http.open('GET', url, true);
http.send(null);
} }
currentUser = getCurrentUser(); currentUser = getCurrentUser();

69
onionr/static-data/www/ui/src/js/timeline.js
View File

@ -58,18 +58,25 @@ function postCreatorChange() {
var content = document.getElementById('onionr-post-creator-content').value; var content = document.getElementById('onionr-post-creator-content').value;
var message = ''; var message = '';
var maxlength = 280;
var disable = true; var disable = true;
var warn = false;
if(content.length !== 0) { if(content.length !== 0) {
if(content.length - content.replaceAll('\n', '').length > 16) { if(content.length - content.replaceAll('\n', '').length > 16) {
// 16 max newlines // 16 max newlines
message = '<$= LANG.POST_CREATOR_MESSAGE_MAXIMUM_NEWLINES $>'; message = '<$= LANG.POST_CREATOR_MESSAGE_MAXIMUM_NEWLINES $>';
} else if(content.length <= 280) { } else if(content.length <= maxlength) {
// 280 max characters // 280 max characters
message = '<$= LANG.POST_CREATOR_MESSAGE_REMAINING $>'.replaceAll('%s', (280 - content.length)); message = '<$= LANG.POST_CREATOR_MESSAGE_REMAINING $>'.replaceAll('%s', (280 - content.length));
disable = false; disable = false;
if(maxlength - content.length < maxlength / 4) {
warn = true;
}
} else { } else {
message = '<$= LANG.POST_CREATOR_MESSAGE_OVER $>'.replaceAll('%s', (content.length - 280)); message = '<$= LANG.POST_CREATOR_MESSAGE_OVER $>'.replaceAll('%s', (content.length - maxlength));
} }
} }
@ -85,6 +92,8 @@ function postCreatorChange() {
if(disable) if(disable)
element.style.color = 'red'; element.style.color = 'red';
else if(warn)
element.style.color = '#FF8C00';
else else
element.style.color = 'gray'; element.style.color = 'gray';
} }
@ -101,10 +110,11 @@ function viewProfile(id, name) {
User.getUser(id, function(data) { User.getUser(id, function(data) {
if(data !== null) { if(data !== null) {
document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(data.getName());
document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon()); document.getElementById("onionr-profile-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(data.getIcon());
document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon()); document.getElementById("onionr-profile-user-icon").b64 = Sanitize.html(data.getIcon());
document.getElementById("onionr-profile-username").innerHTML = Sanitize.html(Sanitize.username(data.getName()));
document.getElementById("onionr-profile-username").title = Sanitize.html(data.getID());
document.getElementById("onionr-profile-description").innerHTML = Sanitize.html(Sanitize.description(data.getDescription()));
} }
}); });
} }
@ -112,24 +122,26 @@ function viewProfile(id, name) {
function updateUser() { function updateUser() {
toggleSaveButton(false); toggleSaveButton(false);
jQuery('#modal').modal('show'); // jQuery('#modal').modal('show');
var name = jQuery('#onionr-profile-username').text(); var name = jQuery('#onionr-profile-username').text();
var id = document.getElementById("onionr-profile-username").title; var id = document.getElementById("onionr-profile-username").title;
var icon = document.getElementById("onionr-profile-user-icon").b64; var icon = document.getElementById("onionr-profile-user-icon").b64;
var description = 'todo'; var description = jQuery("#onionr-profile-description").text();
var user = new User(); var user = new User();
user.setName(name); user.setName(name);
user.setID(id); user.setID(id);
user.setIcon(icon); user.setIcon(icon);
user.setDescription(description); user.setDescription(Sanitize.description(description));
user.remember(); user.remember();
user.save(); user.save(function() {
setCurrentUser(user);
window.location.reload(); window.location.reload();
});
} }
function cancelUpdate() { function cancelUpdate() {
@ -142,8 +154,7 @@ function cancelUpdate() {
} }
function toggleSaveButton(show) { function toggleSaveButton(show) {
document.getElementById("onionr-profile-save").style.display = (show ? 'block' : 'none'); document.getElementById("onionr-profile-edit").style.display = (show ? 'block' : 'none');
document.getElementById("onionr-profile-cancel").style.display = (show ? 'block' : 'none');
} }
function makePost() { function makePost() {
@ -161,38 +172,56 @@ function makePost() {
document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML; document.getElementById('onionr-timeline-posts').innerHTML = post.getHTML() + document.getElementById('onionr-timeline-posts').innerHTML;
document.getElementById("onionr-post-creator-content").value = ""; document.getElementById("onionr-post-creator-content").value = "";
document.getElementById("onionr-post-creator-content").focus();
postCreatorChange(); postCreatorChange();
} else { } else {
console.log('Not making empty post.'); console.log('Not making empty post.');
} }
} }
$('body').on('click', '[data-editable]', function() { jQuery('body').on('click', '[data-editable]', function() {
var el = jQuery(this); var el = jQuery(this);
var txt = el.text(); var txt = el.text();
var maxlength = el.attr("maxlength");
var input = jQuery('<input/>').val(txt); var input = jQuery('<input/>').val(txt);
input.attr('maxlength', maxlength);
el.replaceWith(input); el.replaceWith(input);
var save = function() { var save = function() {
var newTxt = input.val(); var newTxt = input.val();
var p = el.text(Sanitize.username(newTxt));
if(el.attr('id') === 'onionr-profile-username')
newTxt = Sanitize.username(newTxt);
if(el.attr('id') === 'onionr-profile-description')
newTxt = Sanitize.description(newTxt);
var p = el.text(newTxt);
input.replaceWith(p); input.replaceWith(p);
if(newTxt !== txt) if(newTxt !== txt)
toggleSaveButton(true); toggleSaveButton(true);
}; };
input.one('blur', save).focus(); var saveEnter = function(event) {
console.log(event);
console.log(event.keyCode);
if (event.keyCode === 13)
save();
};
input.one('blur', save).bind('keyup', saveEnter).focus();
}); });
currentUser = getCurrentUser(); currentUser = getCurrentUser();
if(currentUser !== undefined && currentUser !== null) {
document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName()); document.getElementById("onionr-post-creator-user-name").innerHTML = Sanitize.html(currentUser.getName());
document.getElementById("onionr-post-creator-user-id").innerHTML = "<$= LANG.POST_CREATOR_YOU $>"; document.getElementById("onionr-post-creator-user-id").innerHTML = "<$= LANG.POST_CREATOR_YOU $>";
document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon()); document.getElementById("onionr-post-creator-user-icon").src = "data:image/jpeg;base64," + Sanitize.html(currentUser.getIcon());
document.getElementById("onionr-post-creator-user-id").title = currentUser.getID(); document.getElementById("onionr-post-creator-user-id").title = currentUser.getID();
document.getElementById("onionr-post-creator-content").placeholder = "<$= LANG.POST_CREATOR_PLACEHOLDER $>"; document.getElementById("onionr-post-creator-content").placeholder = "<$= LANG.POST_CREATOR_PLACEHOLDER $>";
}
viewCurrentProfile = function() { viewCurrentProfile = function() {
viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName())); viewProfile(encodeURIComponent(currentUser.getID()), encodeURIComponent(currentUser.getName()));