Improve UI
This commit is contained in:
Arinerron
parent
0a2fe2a0b1
commit
0b77a88e72
15 changed files with 426 additions and 107 deletions
|
|
@ -7,19 +7,20 @@
|
|||
</div>
|
||||
<div class="col-10">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="col col-auto">
|
||||
<a class="onionr-post-user-name" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')">$user-name</a>
|
||||
<a class="onionr-post-user-id" href="#!" onclick="viewProfile('$user-id-url', '$user-name-url')" data-placement="top" data-toggle="tooltip" title="$user-id">$user-id-truncated</a>
|
||||
</div>
|
||||
<div class="text-right pl-3 pr-3">
|
||||
<div class="onionr-post-date" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>
|
||||
|
||||
<div class="col col-auto text-right ml-auto pl-0">
|
||||
<div class="onionr-post-date text-right" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="onionr-post-content">
|
||||
$content
|
||||
</div>
|
||||
|
||||
|
||||
<div class="onionr-post-controls pt-2">
|
||||
<a href="#!" class="glyphicon glyphicon-heart mr-2">like</a>
|
||||
<a href="#!" class="glyphicon glyphicon-comment mr-2">comment</a>
|
||||
|
|
|
|||
9
onionr/static-data/www/ui/dist/css/main.css
vendored
9
onionr/static-data/www/ui/dist/css/main.css
vendored
|
|
@ -60,6 +60,12 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.h-divider {
|
||||
margin: 5px 15px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* profile */
|
||||
|
||||
.onionr-profile-user-icon {
|
||||
|
|
@ -68,7 +74,6 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.onionr-profile-username {
|
||||
.onionr-profile-username {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
.onionr-post {
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
|
||||
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
|
|
@ -30,3 +30,7 @@ body {
|
|||
border-top: 1px solid black;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.h-divider {
|
||||
border-top:1px solid gray;
|
||||
}
|
||||
|
|
|
|||
12
onionr/static-data/www/ui/dist/index.html
vendored
12
onionr/static-data/www/ui/dist/index.html
vendored
|
|
@ -36,22 +36,24 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="d-none d-lg-block col-lg-3">
|
||||
<div class="col-12 col-lg-3">
|
||||
<div class="onionr-profile">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-4 col-lg-12">
|
||||
<img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h2 id="onionr-profile-username" class="onionr-profile-username">arinerron</h2>
|
||||
<div class="col-8 col-lg-12">
|
||||
<h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left">arinerron</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-divider d-block d-lg-none pb-3"></div>
|
||||
|
||||
<div class="col-sm-12 col-lg-6">
|
||||
<div class="row" id="onionr-timeline-posts">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
153
onionr/static-data/www/ui/dist/js/main.js
vendored
153
onionr/static-data/www/ui/dist/js/main.js
vendored
|
|
@ -1,26 +1,91 @@
|
|||
|
||||
/* handy localstorage functions for quick usage */
|
||||
|
||||
function set(key, val) {
|
||||
return localStorage.setItem(key, val);
|
||||
}
|
||||
|
||||
function get(key, df) { // df is default
|
||||
value = localStorage.getItem(key);
|
||||
if(value == null)
|
||||
value = df;
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function remove(key) {
|
||||
return localStorage.removeItem(key);
|
||||
}
|
||||
|
||||
var usermap = JSON.parse(get('usermap', '{}'));
|
||||
|
||||
function getUserMap() {
|
||||
return usermap;
|
||||
}
|
||||
|
||||
function deserializeUser(id) {
|
||||
var serialized = getUserMap()[id]
|
||||
var user = new User();
|
||||
user.setName(serialized['name']);
|
||||
user.setID(serialized['id']);
|
||||
user.setIcon(serialized['icon']);
|
||||
}
|
||||
|
||||
/* returns a relative date format, e.g. "5 minutes" */
|
||||
function timeSince(date) {
|
||||
function timeSince(date, size) {
|
||||
// taken from https://stackoverflow.com/a/3177838/3678023
|
||||
|
||||
var seconds = Math.floor((new Date() - date) / 1000);
|
||||
var interval = Math.floor(seconds / 31536000);
|
||||
|
||||
if (size === null)
|
||||
size = 'desktop';
|
||||
|
||||
var dates = {
|
||||
'mobile' : {
|
||||
'yr' : 'yrs',
|
||||
'mo' : 'mo',
|
||||
'd' : 'd',
|
||||
'hr' : 'h',
|
||||
'min' : 'm',
|
||||
'secs' : 's',
|
||||
'sec' : 's',
|
||||
},
|
||||
|
||||
'desktop' : {
|
||||
'yr' : ' years',
|
||||
'mo' : ' months',
|
||||
'd' : ' days',
|
||||
'hr' : ' hours',
|
||||
'min' : ' minutes',
|
||||
'secs' : ' seconds',
|
||||
'sec' : ' second',
|
||||
},
|
||||
};
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " years";
|
||||
return interval + dates[size]['yr'];
|
||||
interval = Math.floor(seconds / 2592000);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " months";
|
||||
return interval + dates[size]['mo'];
|
||||
interval = Math.floor(seconds / 86400);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " days";
|
||||
return interval + dates[size]['d'];
|
||||
interval = Math.floor(seconds / 3600);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " hours";
|
||||
return interval + dates[size]['hr'];
|
||||
interval = Math.floor(seconds / 60);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " minutes";
|
||||
|
||||
return Math.floor(seconds) + " seconds";
|
||||
return interval + dates[size]['min'];
|
||||
|
||||
if(Math.floor(seconds) !== 1)
|
||||
return Math.floor(seconds) + dates[size]['secs'];
|
||||
|
||||
return '1' + dates[size]['sec'];
|
||||
}
|
||||
|
||||
/* replace all instances of string */
|
||||
|
|
@ -41,7 +106,7 @@ function encodeURL(url) {
|
|||
}
|
||||
|
||||
/* user class */
|
||||
class User {
|
||||
class User {
|
||||
constructor() {
|
||||
this.name = 'Unknown';
|
||||
this.id = 'unknown';
|
||||
|
|
@ -55,22 +120,35 @@ class User {
|
|||
getName() {
|
||||
return this.name;
|
||||
}
|
||||
|
||||
|
||||
setID(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
|
||||
getID() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
|
||||
setIcon(image) {
|
||||
this.image = image;
|
||||
}
|
||||
|
||||
|
||||
getIcon() {
|
||||
return this.image;
|
||||
}
|
||||
|
||||
serialize() {
|
||||
return {
|
||||
'name' : this.getName(),
|
||||
'id' : this.getID(),
|
||||
'icon' : this.getIcon()
|
||||
};
|
||||
}
|
||||
|
||||
remember() {
|
||||
usermap[this.getID()] = this.serialize();
|
||||
set('usermap', JSON.stringify(usermap));
|
||||
}
|
||||
}
|
||||
|
||||
/* post class */
|
||||
|
|
@ -86,19 +164,20 @@ class Post {
|
|||
</div>\
|
||||
<div class="col-10">\
|
||||
<div class="row">\
|
||||
<div class="col">\
|
||||
<div class="col col-auto">\
|
||||
<a class="onionr-post-user-name" href="#!" onclick="viewProfile(\'$user-id-url\', \'$user-name-url\')">$user-name</a>\
|
||||
<a class="onionr-post-user-id" href="#!" onclick="viewProfile(\'$user-id-url\', \'$user-name-url\')" data-placement="top" data-toggle="tooltip" title="$user-id">$user-id-truncated</a>\
|
||||
</div>\
|
||||
<div class="text-right pl-3 pr-3">\
|
||||
<div class="onionr-post-date" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>\
|
||||
\
|
||||
<div class="col col-auto text-right ml-auto pl-0">\
|
||||
<div class="onionr-post-date text-right" data-placement="top" data-toggle="tooltip" title="$date">$date-relative</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
\
|
||||
\
|
||||
<div class="onionr-post-content">\
|
||||
$content\
|
||||
</div>\
|
||||
\
|
||||
\
|
||||
<div class="onionr-post-controls pt-2">\
|
||||
<a href="#!" class="glyphicon glyphicon-heart mr-2">like</a>\
|
||||
<a href="#!" class="glyphicon glyphicon-comment mr-2">comment</a>\
|
||||
|
|
@ -109,7 +188,9 @@ class Post {
|
|||
</div>\
|
||||
<!-- END POST -->\
|
||||
';
|
||||
|
||||
|
||||
var device = (jQuery(document).width() < 768 ? 'mobile' : 'desktop');
|
||||
|
||||
postTemplate = postTemplate.replaceAll('$user-name-url', encodeHTML(encodeURL(this.getUser().getName())));
|
||||
postTemplate = postTemplate.replaceAll('$user-name', encodeHTML(this.getUser().getName()));
|
||||
postTemplate = postTemplate.replaceAll('$user-id-url', encodeHTML(encodeURL(this.getUser().getID())));
|
||||
|
|
@ -117,54 +198,36 @@ class Post {
|
|||
postTemplate = postTemplate.replaceAll('$user-id', encodeHTML(this.getUser().getID()));
|
||||
postTemplate = postTemplate.replaceAll('$user-image', encodeHTML(this.getUser().getIcon()));
|
||||
postTemplate = postTemplate.replaceAll('$content', encodeHTML(this.getContent()));
|
||||
postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate()) + ' ago');
|
||||
postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate(), device) + (device === 'desktop' ? ' ago' : ''));
|
||||
postTemplate = postTemplate.replaceAll('$date', this.getPostDate().toLocaleString());
|
||||
|
||||
|
||||
return postTemplate;
|
||||
}
|
||||
|
||||
|
||||
setUser(user) {
|
||||
this.user = user;
|
||||
}
|
||||
|
||||
|
||||
getUser() {
|
||||
return this.user;
|
||||
}
|
||||
|
||||
|
||||
setContent(content) {
|
||||
this.content = content;
|
||||
}
|
||||
|
||||
|
||||
getContent() {
|
||||
return this.content;
|
||||
}
|
||||
|
||||
|
||||
setPostDate(date) { // unix timestamp input
|
||||
if(date instanceof Date)
|
||||
this.date = date;
|
||||
else
|
||||
this.date = new Date(date * 1000);
|
||||
}
|
||||
|
||||
|
||||
getPostDate() {
|
||||
return this.date;
|
||||
}
|
||||
}
|
||||
|
||||
/* handy localstorage functions for quick usage */
|
||||
|
||||
function set(key, val) {
|
||||
return localStorage.setItem(key, val);
|
||||
}
|
||||
|
||||
function get(key, df) { // df is default
|
||||
value = localStorage.getItem(key);
|
||||
if(value == null)
|
||||
value = df;
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
function remove(key) {
|
||||
return localStorage.removeItem(key);
|
||||
}
|
||||
|
|
|
|||
84
onionr/static-data/www/ui/dist/js/timeline.js
vendored
84
onionr/static-data/www/ui/dist/js/timeline.js
vendored
|
|
@ -1,20 +1,96 @@
|
|||
/* write a random post to the page, for testing */
|
||||
|
||||
var verbs =
|
||||
[
|
||||
["go to", "goes to", "going to", "went to", "gone to"],
|
||||
["look at", "looks at", "looking at", "looked at", "looked at"],
|
||||
["choose", "chooses", "choosing", "chose", "chosen"],
|
||||
["torrent", "downloads", "downloading", "torrented", "downloaded"],
|
||||
["detonate", "detonates", "detonating", "detonated", "detonated"],
|
||||
["run", "runs", "running", "ran", "running"],
|
||||
["program", "programs", "programming", "coded", "programmed"],
|
||||
["start", "starts", "starting", "started", "started"]
|
||||
];
|
||||
var tenses =
|
||||
[
|
||||
{name:"Present", singular:1, plural:0, format:"%subject %verb %complement"},
|
||||
{name:"Present", singular:1, plural:0, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Present Continues", singular:2, plural:2, format:"%subject %be %verb %complement"}
|
||||
];
|
||||
var subjects =
|
||||
[
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"My cat", be:"is", singular:0},
|
||||
{name:"My cat", be:"is", singular:0},
|
||||
{name:"My dog", be:"is", singular:0},
|
||||
{name:"My dog", be:"is", singular:0},
|
||||
{name:"My mom", be:"is", singular:0},
|
||||
{name:"My dad", be:"is", singular:0},
|
||||
{name:"You", be:"are", singular:0},
|
||||
{name:"He", be:"is", singular:1}
|
||||
];
|
||||
var complementsForVerbs =
|
||||
[
|
||||
["cinema", "Egypt", "home", "concert"],
|
||||
["for a map", "them", "the stars", "the lake"],
|
||||
["a book for reading", "a dvd for tonight"],
|
||||
["the virus", "the malware", "that 0day", "Onionr"],
|
||||
["a bomb", "a nuke", "some C4", "some ammonium nitrate"],
|
||||
["the race", "towards someone", "to the stars", "on top of your roof"],
|
||||
["Onionr", "the malware", "some software", "Onionr"],
|
||||
["Onionr", "Onionr", "the race", "the timer"],
|
||||
]
|
||||
|
||||
Array.prototype.random = function(){return this[Math.floor(Math.random() * this.length)];};
|
||||
|
||||
function generate(){
|
||||
var index = Math.floor(verbs.length * Math.random());
|
||||
var tense = tenses.random();
|
||||
var subject = subjects.random();
|
||||
var verb = verbs[index];
|
||||
var complement = complementsForVerbs[index];
|
||||
var str = tense.format;
|
||||
str = str.replace("%subject", subject.name).replace("%be", subject.be);
|
||||
str = str.replace("%verb", verb[subject.singular ? tense.singular : tense.plural]);
|
||||
str = str.replace("%complement", complement.random());
|
||||
return str;
|
||||
}
|
||||
|
||||
var curDate = new Date()
|
||||
function addRandomPost() {
|
||||
var post = new Post();
|
||||
var user = new User();
|
||||
var items = ['arinerron', 'beardog108', 'samyk', 'snowden', 'aaronswartz'];
|
||||
user.setName(items[Math.floor(Math.random()*items.length)]);
|
||||
user.setID('i-eat-waffles-often-its-actually-crazy-like-i-dont-know-wow');
|
||||
post.setContent('spammm ' + btoa(Math.random() + ' wow'));
|
||||
post.setContent(generate());
|
||||
post.setUser(user);
|
||||
post.setPostDate(new Date(new Date() - (Math.random() * 1000000)));
|
||||
|
||||
|
||||
curDate = new Date(curDate - (Math.random() * 1000000));
|
||||
post.setPostDate(curDate);
|
||||
|
||||
document.getElementById('onionr-timeline-posts').innerHTML += post.getHTML();
|
||||
}
|
||||
|
||||
for(var i = 0; i < Math.round(50 * Math.random()); i++)
|
||||
addRandomPost();
|
||||
|
||||
|
||||
function viewProfile(id, name) {
|
||||
document.getElementById("onionr-profile-username").innerHTML = encodeHTML(decodeURIComponent(name));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -60,6 +60,12 @@ body {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.h-divider {
|
||||
margin: 5px 15px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* profile */
|
||||
|
||||
.onionr-profile-user-icon {
|
||||
|
|
@ -68,7 +74,6 @@ body {
|
|||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.onionr-profile-username {
|
||||
.onionr-profile-username {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ body {
|
|||
.onionr-post {
|
||||
border: 1px solid black;
|
||||
border-radius: 1rem;
|
||||
|
||||
|
||||
background-color: lightgray;
|
||||
}
|
||||
|
||||
|
|
@ -30,3 +30,7 @@ body {
|
|||
border-top: 1px solid black;
|
||||
font-size: 15pt;
|
||||
}
|
||||
|
||||
.h-divider {
|
||||
border-top:1px solid gray;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,22 +6,24 @@
|
|||
<body>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="d-none d-lg-block col-lg-3">
|
||||
<div class="col-12 col-lg-3">
|
||||
<div class="onionr-profile">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="col-4 col-lg-12">
|
||||
<img id="onionr-profile-user-icon" class="onionr-profile-user-icon" src="img/default.png">
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<h2 id="onionr-profile-username" class="onionr-profile-username">arinerron</h2>
|
||||
<div class="col-8 col-lg-12">
|
||||
<h2 id="onionr-profile-username" class="onionr-profile-username text-left text-lg-center text-sm-left">arinerron</h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-divider d-block d-lg-none pb-3"></div>
|
||||
|
||||
<div class="col-sm-12 col-lg-6">
|
||||
<div class="row" id="onionr-timeline-posts">
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ function get(key, df) { // df is default
|
|||
value = localStorage.getItem(key);
|
||||
if(value == null)
|
||||
value = df;
|
||||
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
|
|
@ -32,28 +32,60 @@ function deserializeUser(id) {
|
|||
}
|
||||
|
||||
/* returns a relative date format, e.g. "5 minutes" */
|
||||
function timeSince(date) {
|
||||
function timeSince(date, size) {
|
||||
// taken from https://stackoverflow.com/a/3177838/3678023
|
||||
|
||||
var seconds = Math.floor((new Date() - date) / 1000);
|
||||
var interval = Math.floor(seconds / 31536000);
|
||||
|
||||
if (size === null)
|
||||
size = 'desktop';
|
||||
|
||||
var dates = {
|
||||
'mobile' : {
|
||||
'yr' : 'yrs',
|
||||
'mo' : 'mo',
|
||||
'd' : 'd',
|
||||
'hr' : 'h',
|
||||
'min' : 'm',
|
||||
'secs' : 's',
|
||||
'sec' : 's',
|
||||
},
|
||||
|
||||
'desktop' : {
|
||||
'yr' : ' years',
|
||||
'mo' : ' months',
|
||||
'd' : ' days',
|
||||
'hr' : ' hours',
|
||||
'min' : ' minutes',
|
||||
'secs' : ' seconds',
|
||||
'sec' : ' second',
|
||||
},
|
||||
};
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " years";
|
||||
return interval + dates[size]['yr'];
|
||||
interval = Math.floor(seconds / 2592000);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " months";
|
||||
return interval + dates[size]['mo'];
|
||||
interval = Math.floor(seconds / 86400);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " days";
|
||||
return interval + dates[size]['d'];
|
||||
interval = Math.floor(seconds / 3600);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " hours";
|
||||
return interval + dates[size]['hr'];
|
||||
interval = Math.floor(seconds / 60);
|
||||
|
||||
if (interval > 1)
|
||||
return interval + " minutes";
|
||||
|
||||
return Math.floor(seconds) + " seconds";
|
||||
return interval + dates[size]['min'];
|
||||
|
||||
if(Math.floor(seconds) !== 1)
|
||||
return Math.floor(seconds) + dates[size]['secs'];
|
||||
|
||||
return '1' + dates[size]['sec'];
|
||||
}
|
||||
|
||||
/* replace all instances of string */
|
||||
|
|
@ -74,7 +106,7 @@ function encodeURL(url) {
|
|||
}
|
||||
|
||||
/* user class */
|
||||
class User {
|
||||
class User {
|
||||
constructor() {
|
||||
this.name = 'Unknown';
|
||||
this.id = 'unknown';
|
||||
|
|
@ -88,23 +120,23 @@ class User {
|
|||
getName() {
|
||||
return this.name;
|
||||
}
|
||||
|
||||
|
||||
setID(id) {
|
||||
this.id = id;
|
||||
}
|
||||
|
||||
|
||||
getID() {
|
||||
return this.id;
|
||||
}
|
||||
|
||||
|
||||
setIcon(image) {
|
||||
this.image = image;
|
||||
}
|
||||
|
||||
|
||||
getIcon() {
|
||||
return this.image;
|
||||
}
|
||||
|
||||
|
||||
serialize() {
|
||||
return {
|
||||
'name' : this.getName(),
|
||||
|
|
@ -112,7 +144,7 @@ class User {
|
|||
'icon' : this.getIcon()
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
remember() {
|
||||
usermap[this.getID()] = this.serialize();
|
||||
set('usermap', JSON.stringify(usermap));
|
||||
|
|
@ -124,7 +156,9 @@ class Post {
|
|||
/* returns the html content of a post */
|
||||
getHTML() {
|
||||
var postTemplate = '<$= jsTemplate('onionr-timeline-post') $>';
|
||||
|
||||
|
||||
var device = (jQuery(document).width() < 768 ? 'mobile' : 'desktop');
|
||||
|
||||
postTemplate = postTemplate.replaceAll('$user-name-url', encodeHTML(encodeURL(this.getUser().getName())));
|
||||
postTemplate = postTemplate.replaceAll('$user-name', encodeHTML(this.getUser().getName()));
|
||||
postTemplate = postTemplate.replaceAll('$user-id-url', encodeHTML(encodeURL(this.getUser().getID())));
|
||||
|
|
@ -132,35 +166,35 @@ class Post {
|
|||
postTemplate = postTemplate.replaceAll('$user-id', encodeHTML(this.getUser().getID()));
|
||||
postTemplate = postTemplate.replaceAll('$user-image', encodeHTML(this.getUser().getIcon()));
|
||||
postTemplate = postTemplate.replaceAll('$content', encodeHTML(this.getContent()));
|
||||
postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate()) + ' ago');
|
||||
postTemplate = postTemplate.replaceAll('$date-relative', timeSince(this.getPostDate(), device) + (device === 'desktop' ? ' ago' : ''));
|
||||
postTemplate = postTemplate.replaceAll('$date', this.getPostDate().toLocaleString());
|
||||
|
||||
|
||||
return postTemplate;
|
||||
}
|
||||
|
||||
|
||||
setUser(user) {
|
||||
this.user = user;
|
||||
}
|
||||
|
||||
|
||||
getUser() {
|
||||
return this.user;
|
||||
}
|
||||
|
||||
|
||||
setContent(content) {
|
||||
this.content = content;
|
||||
}
|
||||
|
||||
|
||||
getContent() {
|
||||
return this.content;
|
||||
}
|
||||
|
||||
|
||||
setPostDate(date) { // unix timestamp input
|
||||
if(date instanceof Date)
|
||||
this.date = date;
|
||||
else
|
||||
this.date = new Date(date * 1000);
|
||||
}
|
||||
|
||||
|
||||
getPostDate() {
|
||||
return this.date;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,20 +1,96 @@
|
|||
/* write a random post to the page, for testing */
|
||||
|
||||
var verbs =
|
||||
[
|
||||
["go to", "goes to", "going to", "went to", "gone to"],
|
||||
["look at", "looks at", "looking at", "looked at", "looked at"],
|
||||
["choose", "chooses", "choosing", "chose", "chosen"],
|
||||
["torrent", "downloads", "downloading", "torrented", "downloaded"],
|
||||
["detonate", "detonates", "detonating", "detonated", "detonated"],
|
||||
["run", "runs", "running", "ran", "running"],
|
||||
["program", "programs", "programming", "coded", "programmed"],
|
||||
["start", "starts", "starting", "started", "started"]
|
||||
];
|
||||
var tenses =
|
||||
[
|
||||
{name:"Present", singular:1, plural:0, format:"%subject %verb %complement"},
|
||||
{name:"Present", singular:1, plural:0, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement"},
|
||||
{name:"Past", singular:3, plural:3, format:"%subject just %verb %complement lol"},
|
||||
{name:"Present Continues", singular:2, plural:2, format:"%subject %be %verb %complement"}
|
||||
];
|
||||
var subjects =
|
||||
[
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"I", be:"am", singular:0},
|
||||
{name:"My cat", be:"is", singular:0},
|
||||
{name:"My cat", be:"is", singular:0},
|
||||
{name:"My dog", be:"is", singular:0},
|
||||
{name:"My dog", be:"is", singular:0},
|
||||
{name:"My mom", be:"is", singular:0},
|
||||
{name:"My dad", be:"is", singular:0},
|
||||
{name:"You", be:"are", singular:0},
|
||||
{name:"He", be:"is", singular:1}
|
||||
];
|
||||
var complementsForVerbs =
|
||||
[
|
||||
["the cinema", "Egypt", "the house", "the concert"],
|
||||
["for a map", "them", "the stars", "the lake"],
|
||||
["a book for reading", "a dvd for tonight"],
|
||||
["the virus", "the malware", "that 0day", "Onionr"],
|
||||
["a bomb", "a nuke", "some C4", "some ammonium nitrate"],
|
||||
["the race", "towards someone", "to the stars", "on top of your roof"],
|
||||
["Onionr", "the malware", "some software", "Onionr"],
|
||||
["Onionr", "Onionr", "the race", "the timer"],
|
||||
]
|
||||
|
||||
Array.prototype.random = function(){return this[Math.floor(Math.random() * this.length)];};
|
||||
|
||||
function generate(){
|
||||
var index = Math.floor(verbs.length * Math.random());
|
||||
var tense = tenses.random();
|
||||
var subject = subjects.random();
|
||||
var verb = verbs[index];
|
||||
var complement = complementsForVerbs[index];
|
||||
var str = tense.format;
|
||||
str = str.replace("%subject", subject.name).replace("%be", subject.be);
|
||||
str = str.replace("%verb", verb[subject.singular ? tense.singular : tense.plural]);
|
||||
str = str.replace("%complement", complement.random());
|
||||
return str;
|
||||
}
|
||||
|
||||
var curDate = new Date()
|
||||
function addRandomPost() {
|
||||
var post = new Post();
|
||||
var user = new User();
|
||||
var items = ['arinerron', 'beardog108', 'samyk', 'snowden', 'aaronswartz'];
|
||||
user.setName(items[Math.floor(Math.random()*items.length)]);
|
||||
user.setID('i-eat-waffles-often-its-actually-crazy-like-i-dont-know-wow');
|
||||
post.setContent('spammm ' + btoa(Math.random() + ' wow'));
|
||||
post.setContent(generate());
|
||||
post.setUser(user);
|
||||
post.setPostDate(new Date(new Date() - (Math.random() * 1000000)));
|
||||
|
||||
|
||||
curDate = new Date(curDate - (Math.random() * 1000000));
|
||||
post.setPostDate(curDate);
|
||||
|
||||
document.getElementById('onionr-timeline-posts').innerHTML += post.getHTML();
|
||||
}
|
||||
|
||||
for(var i = 0; i < Math.round(50 * Math.random()); i++)
|
||||
addRandomPost();
|
||||
|
||||
|
||||
function viewProfile(id, name) {
|
||||
document.getElementById("onionr-profile-username").innerHTML = encodeHTML(decodeURIComponent(name));
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue