├── src
    ├── app
    │   ├── img
    │   │   ├── .gitkeep
    │   │   ├── profile.jpg
    │   │   ├── icon-post.png
    │   │   ├── icon-check.png
    │   │   ├── icon-compose.png
    │   │   ├── icon-cross.png
    │   │   ├── icon-reply.png
    │   │   ├── icon-retwist.png
    │   │   └── icon-check-border.png
    │   ├── svg
    │   │   ├── .gitkeep
    │   │   ├── love.svg
    │   │   ├── eye.svg
    │   │   ├── oval.svg
    │   │   ├── twister.svg
    │   │   ├── mail.svg
    │   │   ├── retwist.svg
    │   │   └── settings.svg
    │   ├── modules
    │   │   └── .gitkeep
    │   ├── templates
    │   │   ├── .gitkeep
    │   │   ├── main-page.html
    │   │   ├── context-mentions.html
    │   │   ├── mentions.html
    │   │   ├── content-posts.html
    │   │   ├── notyetimplemented.html
    │   │   ├── start.html
    │   │   ├── create-account.html
    │   │   ├── content-post.html
    │   │   ├── following.html
    │   │   ├── feed.html
    │   │   ├── content-feed.html
    │   │   ├── overlay-login.html
    │   │   ├── context-feed.html
    │   │   ├── overlay-accounts.html
    │   │   ├── post-detail.html
    │   │   ├── settings.html
    │   │   ├── context-user.html
    │   │   ├── main-menu.html
    │   │   ├── preview-post.html
    │   │   ├── user-detail.html
    │   │   ├── post.html
    │   │   └── status.html
    │   ├── styles
    │   │   ├── section-content.less
    │   │   ├── post-detail.less
    │   │   ├── reset.less
    │   │   ├── section-preview.less
    │   │   ├── feed.less
    │   │   ├── following.less
    │   │   ├── common.less
    │   │   ├── start.less
    │   │   ├── settings.less
    │   │   ├── context-feed.less
    │   │   ├── section-context.less
    │   │   ├── layout.less
    │   │   ├── form.less
    │   │   ├── accounts-overlay.less
    │   │   ├── popup.less
    │   │   ├── context-user.less
    │   │   ├── main-menu.less
    │   │   ├── fonts.less
    │   │   ├── overlay.less
    │   │   ├── user-detail.less
    │   │   ├── main.less
    │   │   ├── preview-post.less
    │   │   ├── status.less
    │   │   └── posts.less
    │   ├── config.js
    │   ├── fonts
    │   │   ├── OpenSans-Bold.ttf
    │   │   ├── OpenSans-Italic.ttf
    │   │   ├── OpenSans-Light.ttf
    │   │   ├── OpenSans-Regular.ttf
    │   │   ├── OpenSans-Semibold.ttf
    │   │   ├── OpenSans-BoldItalic.ttf
    │   │   ├── OpenSans-ExtraBold.ttf
    │   │   ├── OpenSans-LightItalic.ttf
    │   │   ├── OpenSans-ExtraBoldItalic.ttf
    │   │   └── OpenSans-SemiboldItalic.ttf
    │   ├── collections
    │   │   ├── posts.js
    │   │   └── users.js
    │   ├── views
    │   │   ├── MentionsContext.js
    │   │   ├── NotYetImplemented.js
    │   │   ├── Overlay.js
    │   │   ├── Popup.js
    │   │   ├── FeedContext.js
    │   │   ├── PostContent.js
    │   │   ├── Settings.js
    │   │   ├── SlideOverlay.js
    │   │   ├── ConfirmPopup.js
    │   │   ├── UserContext.js
    │   │   ├── Status.js
    │   │   ├── AccountsOverlay.js
    │   │   ├── LoginOverlay.js
    │   │   ├── CreateAccount.js
    │   │   ├── MainMenu.js
    │   │   ├── Mentions.js
    │   │   ├── UserContent.js
    │   │   ├── Following.js
    │   │   ├── PostPreview.js
    │   │   ├── MainPage.js
    │   │   ├── User.js
    │   │   ├── Post.js
    │   │   ├── Start.js
    │   │   ├── FeedContent.js
    │   │   └── Feed.js
    │   ├── app.js
    │   ├── main.js
    │   ├── models
    │   │   ├── Info.js
    │   │   ├── Feed.js
    │   │   ├── User.js
    │   │   └── Post.js
    │   └── router.js
    ├── icon.ico
    ├── favicon.png
    ├── package.json
    └── index.html
├── twister-data
    └── .gitkeep
├── package.json
├── .gitignore
├── LICENSE.txt
├── Gruntfile.js
└── README.md


/src/app/img/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/svg/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/twister-data/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/modules/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/templates/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/styles/section-content.less:
--------------------------------------------------------------------------------
1 | #content-section {
2 |     
3 | }
4 | 


--------------------------------------------------------------------------------
/src/icon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/icon.ico


--------------------------------------------------------------------------------
/src/app/templates/main-page.html:
--------------------------------------------------------------------------------
1 | <section id="main-content"></section> 
2 | 
3 | 


--------------------------------------------------------------------------------
/src/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/favicon.png


--------------------------------------------------------------------------------
/src/app/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |     DEFAULT_AVATAR: 'app/img/profile.jpg'
3 | }
4 | 


--------------------------------------------------------------------------------
/src/app/img/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/profile.jpg


--------------------------------------------------------------------------------
/src/app/img/icon-post.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-post.png


--------------------------------------------------------------------------------
/src/app/templates/context-mentions.html:
--------------------------------------------------------------------------------
1 | <h1>Mentions</h1>
2 | <p>Twists which mentioned you.</p>
3 | 


--------------------------------------------------------------------------------
/src/app/img/icon-check.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-check.png


--------------------------------------------------------------------------------
/src/app/img/icon-compose.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-compose.png


--------------------------------------------------------------------------------
/src/app/img/icon-cross.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-cross.png


--------------------------------------------------------------------------------
/src/app/img/icon-reply.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-reply.png


--------------------------------------------------------------------------------
/src/app/img/icon-retwist.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-retwist.png


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-Bold.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-Italic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-Italic.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-Light.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-Light.ttf


--------------------------------------------------------------------------------
/src/app/img/icon-check-border.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/img/icon-check-border.png


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-Regular.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-Regular.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-Semibold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-Semibold.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-BoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-BoldItalic.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-ExtraBold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-ExtraBold.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-LightItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-LightItalic.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-ExtraBoldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-ExtraBoldItalic.ttf


--------------------------------------------------------------------------------
/src/app/fonts/OpenSans-SemiboldItalic.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ArcoMul/Twisting/HEAD/src/app/fonts/OpenSans-SemiboldItalic.ttf


--------------------------------------------------------------------------------
/src/app/templates/mentions.html:
--------------------------------------------------------------------------------
1 | <div id="mentions">
2 |     <div class="posts line">
3 |     </div>
4 |     <div class="load-animation"></div>
5 | </div>
6 | 


--------------------------------------------------------------------------------
/src/app/templates/content-posts.html:
--------------------------------------------------------------------------------
1 | <div id="content-posts">
2 |     <div class="newpost"></div>
3 |     <div class="posts">
4 |     </div>
5 | </div>
6 | <div class="load-animation"></div>
7 | 


--------------------------------------------------------------------------------
/src/app/templates/notyetimplemented.html:
--------------------------------------------------------------------------------
1 | <div class="notyetimplemented">
2 |     <div>
3 |         <h2>Not yet implemented</h2>
4 |         <p>Sorry, this page is not yet implemented...</p>
5 |     </div>
6 | </div>
7 | 
8 | 


--------------------------------------------------------------------------------
/src/app/templates/start.html:
--------------------------------------------------------------------------------
1 | <div class="start-page">
2 |     <h2 class="status">Starting</h2>
3 |     <span class="more-info">More info</span>
4 |     <span class="info">
5 |         <!-- Network info --> 
6 |     </span>
7 | </div>
8 | 


--------------------------------------------------------------------------------
/src/app/templates/create-account.html:
--------------------------------------------------------------------------------
1 | <form class="login">
2 |     <h2>Create account</h2>
3 |     <input placeholder="Username" name="username" />
4 |     <button>Create Account</button>
5 |     <a class="button-cancel" href="#">Cancel</a>
6 | </form>
7 | 


--------------------------------------------------------------------------------
/src/app/styles/post-detail.less:
--------------------------------------------------------------------------------
 1 | .post-detail > .posts > .post {
 2 | 
 3 | }
 4 | .post-detail .posts .replies {
 5 |     padding-bottom: 0;
 6 |     & > .post {
 7 |         &:last-child {
 8 |             margin-bottom: 0;
 9 |         }
10 |     }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/styles/reset.less:
--------------------------------------------------------------------------------
 1 | * {
 2 |     margin: 0;
 3 |     padding: 0;
 4 | }
 5 | 
 6 | body {
 7 |     font-family: 'Open Sans', sans-serif;
 8 | }
 9 | 
10 | h1 {
11 |     margin-bottom: 20px;
12 |     font-weight: 800;
13 |     color: #fff;
14 | }
15 | 
16 | a {
17 |     color: #005CFF;
18 |     &:visited {
19 |         color: #005CFF;
20 |     }
21 | }
22 | 


--------------------------------------------------------------------------------
/src/app/styles/section-preview.less:
--------------------------------------------------------------------------------
 1 | #preview-section {
 2 |     position: relative;
 3 |     display: flex;
 4 |     overflow: hidden;
 5 |     .content {
 6 |         position: absolute;
 7 |         background-color: @foreground-color;
 8 |         box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.05);
 9 |         width: 100%;
10 |         height: 100%;
11 |         left: 0px;
12 |     }
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app/styles/feed.less:
--------------------------------------------------------------------------------
 1 | .load-animation {
 2 |     width: 68px;
 3 |     height: 68px;
 4 |     -webkit-mask: url(../svg/oval.svg);
 5 |     background-color: #87CDD3;
 6 |     margin-bottom: 50px;
 7 |     margin-left: 23px;
 8 | }
 9 | 
10 | .feed {
11 |     max-width: 800px;
12 |     margin: 0 auto;
13 |     margin-top: 40px;
14 |     .days-ago {
15 |         padding: 20px 30px;
16 |         font-size: 20px;
17 |         color: #888;
18 |     }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Twisting",
 3 |   "description": "",
 4 |   "scripts": {
 5 |     "postinstall": "grunt postinstall",
 6 |     "compile": "grunt compile",
 7 |     "build": "grunt build"
 8 |   },
 9 |   "devDependencies": {
10 |     "grunt": "latest",
11 |     "grunt-auto-install": "^0.2.3",
12 |     "grunt-cli": "^0.1.13",
13 |     "grunt-contrib-copy": "^0.8.0",
14 |     "grunt-contrib-less": "^1.0.1",
15 |     "grunt-node-webkit-builder": "latest"
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/app/templates/content-post.html:
--------------------------------------------------------------------------------
 1 | <div class="post">
 2 |     <div class="posts">
 3 |         <% if (parentPosts) { %>
 4 |             <% _.each(parentPosts, function (post) { %>
 5 |             <%= postTemplate({post: post}) %>
 6 |             <% }) %>
 7 |         <% } %>
 8 |         <%= postTemplate({post: post, className: 'main'}) %>
 9 |         <% _.each(replies, function (post) { %>
10 |             <%= postTemplate({post: post}) %>
11 |         <% }) %>
12 |     </div>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | ### NodeJS ###
 2 | node_modules/
 3 | src/node_modules/
 4 | npm-debug.log
 5 | 
 6 | ### Bower ###
 7 | src/vendor/bower/
 8 | 
 9 | ### Windows ###
10 | .DS_Store
11 | 
12 | ### Executables and data files ###
13 | *.dll
14 | *.exe
15 | *.dat
16 | *.pak
17 | 
18 | ### Vim ###
19 | [._]*.s[a-w][a-z]
20 | [._]s[a-w][a-z]
21 | *.un~
22 | Session.vim
23 | .netrwhist
24 | *~
25 | 
26 | ### Less ###
27 | *.css
28 | 
29 | ### Custom ###
30 | src/app/avatars/
31 | twister-data/
32 | builds/
33 | cache/
34 | 


--------------------------------------------------------------------------------
/src/app/collections/posts.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery");
 5 | var Backbone = require("backbone");
 6 | var PostModel = require("../models/Post");
 7 | 
 8 | Backbone.$ = $;
 9 | 
10 | module.exports = Backbone.Collection.extend({
11 |     model: PostModel,
12 |     comparator: function(model){ return model.get('time') * -1 },
13 |     
14 |     hasPostsAfter: function (time)
15 |     {
16 |         return models.at(models.length).get('time') < time;
17 |     }
18 | });
19 | 


--------------------------------------------------------------------------------
/src/app/templates/following.html:
--------------------------------------------------------------------------------
 1 | <div id="following-page">
 2 |     <% if (following) { %>
 3 |         <% _.each(following, function (data, username) { %>
 4 |             <% if (data.percentage > 0) { %>
 5 |             <div class="user">
 6 |                 <%= data.user.getAvatarImg(username) %><br />
 7 |                 <span class="username"><%= username %></span><br />
 8 |                 <span class="percentage">(<%= data.percentage %>%)</span>
 9 |             </div>
10 |             <% } %>
11 |         <% }) %>
12 |     <% } %>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/app/templates/feed.html:
--------------------------------------------------------------------------------
 1 | <div class="feed">
 2 |     <div class="feed-posts">
 3 |         <div class="days-ago">Today</div>
 4 |         <div class="posts line" data-days-ago="0">
 5 |             <%= postTemplate({post: post, icon: true}) %>
 6 |             <div class="post new" style="display: none;">
 7 |                 <div class="avatar"><span>?</span></div>
 8 |                 <div class="content new">There is something new...</div>
 9 |             </div>
10 |         </div>
11 |     </div>
12 |     <div class="load-animation"></div>
13 | </div>
14 | 


--------------------------------------------------------------------------------
/src/app/templates/content-feed.html:
--------------------------------------------------------------------------------
 1 | <div class="feed">
 2 |     <div class="compose">
 3 |         <span class="replying-to"></span>
 4 |         <div contenteditable="true" placeholder="Let's Twist..."></div>
 5 |         <div class="info">
 6 |             <span>140 characters left</span>
 7 |             <button>Twist it!</button>
 8 |         </div>
 9 |     </div>
10 |     <div id="content-posts">
11 |         <div class="newpost"></div>
12 |         <div class="posts">
13 |         </div>
14 |     </div>
15 |     <div class="load-animation"></div>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/app/views/MentionsContext.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     _ = require("underscore"),
 7 |     mentionsContextTemplate = _.template(require("../templates/context-mentions.html"));
 8 | 
 9 | Backbone.$ = $;
10 | 
11 | module.exports = Backbone.View.extend({
12 | 
13 |     initialize: function() {
14 | 
15 |     },
16 | 
17 |     render: function() {
18 |         this.$el.html(mentionsContextTemplate({user: this.model}));
19 |         return this;
20 |     }
21 | });
22 | 


--------------------------------------------------------------------------------
/src/app/templates/overlay-login.html:
--------------------------------------------------------------------------------
 1 | <form class="login">
 2 |     <h2>Welcome</h2>
 3 |     <input placeholder="Username" name="username" />
 4 |     <input type="password" placeholder="Private key" name="key" />
 5 |     <button>Login</button>
 6 |     <p><i>Creating an account is currently not yet possible, use another Twister client to do so.</i></p>
 7 |     <!-- Written but not thoroughly tested
 8 |     <a class="button-create" href="account/create">No account yet? Create one now</a>
 9 |     -->
10 |     <br />
11 |     <a class="button-cancel" href="#">Cancel</a>
12 | </form>
13 | 


--------------------------------------------------------------------------------
/src/app/views/NotYetImplemented.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     _ = require("underscore"),
 7 |     notYetImplementedTemplate = _.template(require("../templates/notyetimplemented.html"));
 8 | 
 9 | Backbone.$ = $;
10 | 
11 | module.exports = Backbone.View.extend({
12 | 
13 |     initialize: function() {
14 |         this.render();
15 |     },
16 | 
17 |     render: function() {
18 |         this.$el.html(notYetImplementedTemplate());
19 |         return this;
20 |     }
21 | 
22 | });
23 | 
24 | 


--------------------------------------------------------------------------------
/src/app/styles/following.less:
--------------------------------------------------------------------------------
 1 | #following-page {
 2 |     .user {
 3 |         width: 110px;
 4 |         height: 110px;
 5 |         border: 1px solid #eee;
 6 |         border-bottom: 1px solid #CBCBCB;
 7 |         border-radius: 3px;
 8 |         padding: 20px;
 9 |         text-align: center;
10 |         margin: 10px;
11 |         float: left;
12 |         img {
13 |             width: 75px;
14 |             height: 75px;
15 |             border-radius: 100%;
16 |         }
17 |         .percentage {
18 |             color: #999;
19 |             font-size: 15px;
20 |         }
21 |     }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/svg/love.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |   <g id="love">
 4 |     <path  d="M28.186,8.223c-1.192-2.18-3.378-3.429-5.997-3.429c-2.412,0-4.718,1.085-6.188,2.819

 5 | 	c-1.47-1.733-3.775-2.819-6.188-2.819c-2.618,0-4.805,1.25-5.999,3.429c-2.162,3.956,0.358,9.785,3.172,13.575

 6 | 	c1.977,2.659,5.089,5.149,8.542,6.825L16,28.853l0.473-0.229c3.452-1.676,6.565-4.166,8.542-6.825

 7 | 	C27.83,18.008,30.348,12.178,28.186,8.223z"></path>
 8 |   </g>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Twisting",
 3 |   "version": "0.1.0",
 4 |   "main": "index.html",
 5 |   "window": {
 6 |     "title": "Twisting",
 7 |     "icon": "favicon.png",
 8 |     "toolbar": false,
 9 |     "frame": false,
10 |     "width": 1024,
11 |     "height": 768,
12 |     "position": "center",
13 |     "min_width": 800,
14 |     "min_height": 600
15 |   },
16 |   "dependencies": {
17 |     "async": "^0.9.0",
18 |     "backbone": "^1.1.2",
19 |     "connect": "^3.3.5",
20 |     "jquery": "^2.1.3",
21 |     "json-rpc2": "^0.8.1",
22 |     "moment": "^2.9.0",
23 |     "twemoji": "^1.4.1",
24 |     "underscore": "^1.8.2"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/src/app/templates/context-feed.html:
--------------------------------------------------------------------------------
 1 | <div class="feed">
 2 |     <h1>Feed</h1>
 3 |     <p>Live feed of the Twists of all the accounts you follow</p>
 4 | 
 5 |     <h2>Today</h2>
 6 |     <p>There were <span>24 Twists</span> posted in your feed, where <span>2 mentioned</span> you. <span>3 Accounts</span> followed you, and you received <span>5 messages</span></p>
 7 | 
 8 |     <% if (options.tags && _.size(options.tags) > 0) { %>
 9 |     <h2>Top trends</h2>
10 |     <p class="toptrends">
11 |         <% _.each(options.tags, function (tag) { %>
12 |         <a href="/tags/<%= tag %>">#<%= tag %></a>
13 |         <% }) %>
14 |     </p>
15 |     <% } %>
16 | </div>
17 | 


--------------------------------------------------------------------------------
/src/app/svg/eye.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |   <g id="eye">
 4 |       <g>
 5 |         <path d="M16,8.867C8.665,8.867,0.946,11.974,0,16c0.946,4.027,8.665,7.133,16,7.133c7.334,0,15.053-3.105,16-7.133

 6 | 			C31.053,11.974,23.334,8.867,16,8.867z M16,21.066c-2.798,0-5.066-2.269-5.066-5.066s2.269-5.066,5.066-5.066

 7 | 			c2.797,0,5.065,2.269,5.065,5.066S18.797,21.066,16,21.066z"></path>
 8 |       </g>
 9 |       <g>
10 |         <circle cx="16" cy="16" r="3.018"></circle>
11 |       </g>
12 |   </g>
13 | </svg>
14 | 


--------------------------------------------------------------------------------
/src/app/styles/common.less:
--------------------------------------------------------------------------------
 1 | body {
 2 |     background-color: #FFFFFF;
 3 |     font-family: 'Open Sans', sans-serif;
 4 | }
 5 | 
 6 | .username {
 7 |     color: #57575f;
 8 |     font-weight: bold;
 9 |     text-decoration: none;
10 |     &::before {
11 |         content: "@";
12 |         color: #87879D;
13 |         font-weight: lighter;
14 |     }
15 | }
16 | 
17 | .logo {
18 |       -webkit-mask: url(../svg/twister.svg);
19 |       background-color: #09c1d1;
20 |       width: 110px;
21 |       height: 95px;
22 |       display: inline-block;
23 | }
24 | 
25 | h2 {
26 |     color: #333333;
27 |     font-weight: normal;
28 |     font-size: 37px;
29 | }
30 | 
31 | p { 
32 |     color: #333333;
33 | }
34 | 


--------------------------------------------------------------------------------
/src/app/styles/start.less:
--------------------------------------------------------------------------------
 1 | .slide-overlay .start-page {
 2 |       margin-top: 100px;
 3 | }
 4 | 
 5 | .start-page {
 6 |     width: 100%;
 7 |     height: 100%;
 8 |     text-align: center;
 9 |     display: flex;
10 |     flex-direction: column;
11 | 
12 |     h2.status {
13 |         padding: 20px 0;
14 |         color: #194A79;
15 |     }
16 |     span.more-info {
17 |         cursor: pointer;
18 |         color: #999;
19 |     }
20 |     span.info {
21 |         display: none;
22 |         font-size: 14px;
23 |         font-weight: normal;
24 |         width: 50%;
25 |         margin: 0 auto;
26 |         margin-top: 10px;
27 |         border-top: 1px solid #eee;
28 |         padding-top: 10px;
29 |         color: #666;
30 |     }
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/svg/oval.svg:
--------------------------------------------------------------------------------
 1 | <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
 2 | <svg viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
 3 |     <g fill="none" fill-rule="evenodd">
 4 |         <g transform="translate(1 1)" stroke-width="2">
 5 |             <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
 6 |             <path d="M36 18c0-9.94-8.06-18-18-18">
 7 |                 <animateTransform
 8 |                     attributeName="transform"
 9 |                     type="rotate"
10 |                     from="0 18 18"
11 |                     to="360 18 18"
12 |                     dur="1s"
13 |                     repeatCount="indefinite"/>
14 |             </path>
15 |         </g>
16 |     </g>
17 | </svg>
18 | 


--------------------------------------------------------------------------------
/src/app/styles/settings.less:
--------------------------------------------------------------------------------
 1 | #settings-page {
 2 |     padding: 50px;
 3 |     h2 {
 4 |         text-align: center;
 5 |     }
 6 |     div {
 7 |         display: flex;
 8 |         & > div {
 9 |             flex: 1 0 0;
10 |             padding: 20px;
11 |             font-family: Georgia;
12 |             font-size: 20px;
13 |             color: #666;
14 |             &:first-child {
15 |                 border-right: 1px solid #eee;
16 |                 p {
17 |                     text-align: right;
18 |                     width: 100%;
19 |                 }
20 |             }
21 |             a { 
22 |                 color: #333;
23 |                 &:hover {
24 |                     text-decoration: underline;
25 |                 }
26 |             }
27 |         }
28 |     }
29 | }
30 | 


--------------------------------------------------------------------------------
/src/app/styles/context-feed.less:
--------------------------------------------------------------------------------
 1 | #context-section {
 2 |     .feed {
 3 | 
 4 |         p span {
 5 |             font-weight: normal;
 6 |         }
 7 | 
 8 |         .toptrends {
 9 |             display: flex;
10 |             flex-wrap: wrap;
11 |             justify-content: flex-start;
12 | 
13 |             a {
14 |                 padding: 3px 5px;
15 |                 background-color: #8db1d1;
16 |                 margin-right: 5px;
17 |                 cursor: pointer;
18 |                 font-weight: lighter;
19 |                 text-decoration: none;
20 |                 color: rgba(255, 255, 255, 0.8);
21 |                 margin-bottom: 5px;
22 |                 &:hover {
23 |                     color: #fff;
24 |                 }
25 |             }
26 |         }
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/src/app/styles/section-context.less:
--------------------------------------------------------------------------------
 1 | #context-section {
 2 |     background-color: @emphasis-color;
 3 |     box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.2);
 4 |     text-align: center;
 5 | 
 6 |     & > div {
 7 |         position: relative;
 8 |     }
 9 | 
10 |     h1 {
11 |         font-size: 35px;
12 |         font-weight: normal;
13 |         padding: 15px 0;
14 |         color: #fff;
15 |         margin: 0;
16 |     }
17 | 
18 |     h2 {
19 |         font-size: 20px;
20 |         font-weight: normal;
21 |         padding: 15px 0;
22 |         color: #fff;
23 |         margin: 0;
24 |     }
25 | 
26 |     p {
27 |         font-weight: lighter;
28 |         color: #fff;
29 |         font-size: 15px;
30 |         padding: 0 10px 15px 10px;
31 |         line-height: 20px;
32 |         margin: 0;
33 |     }
34 | }
35 | 


--------------------------------------------------------------------------------
/src/app/templates/overlay-accounts.html:
--------------------------------------------------------------------------------
 1 | <div class="accounts">
 2 |     <% if (!users || users.length == 0) { %>
 3 |         <span class="status">Loading accounts</span>
 4 |     <% } else { %>
 5 |     <h2>Who are you?</h2>
 6 |     <div class="users">
 7 |         <% _.each(users, function (user, username) { %>
 8 |         <div class="user" data-user=<%= user.get('username') %>>
 9 |             <% if (user.get('avatar')) { %>
10 |                 <img src="<%= user.get('avatar') %>" />
11 |             <% } else { %>
12 |                 <img src="app/img/profile.jpg" />
13 |             <% } %>
14 |             <div>
15 |                 <span class="username"><%= user.get('username') %></span><br/>
16 |                 <span>Last login: unkown</span>
17 |             </div>
18 |         </div>
19 |         <% }) %>
20 |     </div>
21 |     <% } %>
22 | </div>
23 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <title>Twister</title>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1">
 8 |   <link rel="icon" type="image/png" href="favicon.png" />
 9 |   <link rel="stylesheet" href="app/styles/style.css">
10 | </head>
11 | 
12 | <body>
13 |   <div id="overlay-holder"></div>
14 |   <div id="popup-holder"></div>
15 |   <main role="main" id="main">
16 |     <!-- The main menu, duh -->
17 |     <div id="main-menu"></div>
18 | 
19 |     <!-- The rest of the page (scrollable) -->
20 |     <div id="main-scrollable">
21 |         <div id="main-page">
22 | 
23 |         </div> 
24 |     </div>
25 |   </main>
26 |   <script>
27 |         // Start the app!
28 |         require('./app/main');
29 |   </script>
30 | </body>
31 | </html>
32 | 


--------------------------------------------------------------------------------
/src/app/templates/post-detail.html:
--------------------------------------------------------------------------------
 1 | <div class="post-detail">
 2 |     <div class="posts">
 3 |         <% var top = post.getTopParent(); %>
 4 |         <%= postTemplate({post: top, icon: true}) %>
 5 |         <div class="posts replies line">
 6 |         <%
 7 |         var print = function print (post, printself) {
 8 |             if (printself) {
 9 |                 var html = postTemplate({post: post, icon: true});
10 |             } else {
11 |                 var html = '';
12 |             }
13 |             if (!post.get('replies')) return html;
14 |             post.get('replies').forEach(function (post) {
15 |                 html += print(post, true);
16 |             });
17 |             return html;
18 |         }
19 |         %>
20 |         <%= print(top, false) %>
21 |         <%= postTemplate({post: reply, isReplying: true, overwriteUser: user, icon: true}) %>
22 |         </div>
23 |     </div>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/src/app/svg/twister.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 29 25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |  <g>
 4 |   <rect stroke="#000" id="svg_2" height="2.74415" width="28.87499" y="0" x="0" stroke-width="0" fill="#000000"/>
 5 |   <rect stroke="#000" id="svg_3" height="2.74415" width="19.80796" y="4.37397" x="4.53351" stroke-width="0" fill="#000000"/>
 6 |   <rect stroke="#000" id="svg_4" height="2.74415" width="17.29709" y="8.87397" x="1.32518" stroke-width="0" fill="#000000"/>
 7 |   <rect stroke="#000" id="svg_5" height="2.74415" width="9.90398" y="13.37397" x="7.18388" stroke-width="0" fill="#000000"/>
 8 |   <rect stroke="#000" id="svg_6" height="2.74415" width="8.78803" y="17.87397" x="9.90399" stroke-width="0" fill="#000000"/>
 9 |   <rect stroke="#000" id="svg_7" height="2.74415" width="3.06883" y="22.37397" x="12.69384" stroke-width="0" fill="#000000"/>
10 |  </g>
11 | </svg>
12 | 


--------------------------------------------------------------------------------
/src/app/templates/settings.html:
--------------------------------------------------------------------------------
 1 | <div id="settings-page">
 2 |     <h2>Settings</h2>
 3 |     <div>
 4 |         <div><p>Feed</p></div>
 5 |         <div><p><input type="checkbox" id="hide-replies-and-retwists" <% if (hideRepliesAndRetwists) {%>checked="true"<%}%> /> Hide replies and retwists</p></div>
 6 |     </div>
 7 |     <div>
 8 |         <div><p>Network status</p></div>
 9 |         <div><p><a href="/status">Go to the network status page</a></p></div>
10 |     </div>
11 |     <div>
12 |         <div><p>Account</p></div>
13 |         <div><p>
14 |             @<%= username %><br />
15 |             <a href="/login">Add account</a><br />
16 |             <a href="/choose-account">Switch account</a>
17 |         </p></div>
18 |     </div>
19 |     <div>
20 |         <div><p>Support</p></div>
21 |         <div><p>For support and connection problems, open an issue at the <a href="https://github.com/ArcoMul/Twisting/issues">Twisting Github repository</a></p></div>
22 |     </div>
23 | </div>
24 | 


--------------------------------------------------------------------------------
/src/app/templates/context-user.html:
--------------------------------------------------------------------------------
 1 | <div class="user">
 2 |     <div class="avatar-holder">
 3 |         <img src="<%= user.get('avatar') ? user.get('avatar') : user.getDefaultAvatar() %>" />
 4 |     </div>
 5 |     <img class="avatar" src="<%= user.get('avatar') ? user.get('avatar') : user.getDefaultAvatar() %>" />
 6 |     <% if (user.get('fullname')) { %>
 7 |         <h1><%= user.get('fullname') %></h1>
 8 |     <% } %>
 9 |     <h2><%=user.get('username')%></h2>
10 |     <% if (user.get('following')) { %>
11 |         <p><%= user.get('following').length %> Following</p>
12 |     <% } %>
13 |     <% if (app.user.isFollowing(user.get('username'))) { %>
14 |         <button class="following"></button>
15 |     <% } else { %>
16 |         <button>Follow</button>
17 |     <% } %>
18 |     <% if (user.get('location')) { %>
19 |         <p><%= user.get('location') %></p>
20 |     <% } %>
21 |     <% if (user.get('bio')) { %>
22 |         <p><%= user.get('bio') %></p>
23 |     <% } %>
24 | </div>
25 | 


--------------------------------------------------------------------------------
/src/app/views/Overlay.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     app = require("../app"),
 8 |     _ = require("underscore");
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |     },
16 | 
17 |     initialize: function(options) {
18 |         var self = this;
19 |         this.options = options;
20 |         this.render();
21 |         this.childView = new (this.options.childView)(_.extend({el: this.$content}, this.options.options));
22 |         this.childView.on("close", function () {
23 |             if (self.childView.onClose) {
24 |                 self.childView.onClose();
25 |             }
26 |             self.remove();
27 |         });
28 |     },
29 | 
30 |     render: function() {
31 |         this.$el.html('<div class="overlay"><div class="inner"></div></div>');
32 |         this.$content = this.$el.find('.inner');
33 |         return this;
34 |     }
35 | });
36 | 


--------------------------------------------------------------------------------
/src/app/styles/layout.less:
--------------------------------------------------------------------------------
 1 | #main {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     height: 100vh;
 5 | }
 6 | 
 7 | #main-menu {
 8 |     flex-basis: 42px;
 9 |     width: 100%;
10 | }
11 | 
12 | #main-scrollable {
13 |     flex-basis: 100%;
14 |     overflow-y: scroll;
15 |     overflow-x: hidden;
16 |     height: 100%;
17 |     position: relative;
18 | 
19 |     &::-webkit-scrollbar {
20 |         width: 9px;
21 |     }
22 |      
23 |     &::-webkit-scrollbar-track {
24 |         background: rgba(0, 134, 255, 0.04);
25 |     }
26 |      
27 |     &::-webkit-scrollbar-thumb {
28 |         border-radius: 9px;
29 |         background: @emphasis-color-dark;
30 |         width: 9px;
31 |     }
32 | }
33 | 
34 | #main-page {
35 |     width: 100%;
36 |     display: flex;
37 |     justify-content: space-between;
38 |     align-items: stretch;
39 |     min-height: 100%;
40 | }
41 | #context-section {
42 |     flex-basis: 22.5%;
43 | }
44 | #content-section {
45 |     flex-basis: 40%;
46 | }
47 | #preview-section {
48 |     flex-basis: 22.5%;
49 | }
50 | 


--------------------------------------------------------------------------------
/src/app/views/Popup.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     app = require("../app"),
 8 |     _ = require("underscore");
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |         'click .close-button': 'onClose',
16 |     },
17 | 
18 |     initialize: function(options) {
19 |         var self = this;
20 |         this.options = options;
21 |         this.render(options);
22 |     },
23 | 
24 |     onClose: function () {
25 |         if(this.options.onClose) this.options.onClose();
26 |         this.remove();
27 |     },
28 | 
29 |     render: function() {
30 |         this.$el.html('<div class="bg"><div class="popup"><div class="top"><p>'
31 |             +this.options.texts.main
32 |             +'</p></div><div class="bottom"><button class="close-button">'
33 |             +this.options.texts.button+'</button></div></div></div>'
34 |         );
35 |         return this;
36 |     }
37 | });
38 | 


--------------------------------------------------------------------------------
/src/app/templates/main-menu.html:
--------------------------------------------------------------------------------
 1 | <ul class="left">
 2 |     <li>
 3 |         <a class="status" href="status"><span></span></a>
 4 |     </li>
 5 | 
 6 |     <% if (user) { %>
 7 |     <li>
 8 |         <a href="feed">Feed</a>
 9 |     </li>
10 |     <li>
11 |         <a href="user/<%= user.get('username') %>">Profile</a>
12 |     </li>
13 |     <li class="mentions">
14 |         <a href="mentions">
15 |             Mentions
16 |             <span class="dot"></span>
17 |         </a>
18 |     </li>
19 |     <li>
20 |         <a href="messages">
21 |             Messages
22 |             <span class="dot"></span>
23 |         </a>
24 |     </li>
25 |     <% } %>
26 | 
27 |     <li>
28 |         <a href="settings">Settings</a>
29 |     </li>
30 | 
31 |     <!-- This has to be in the menu div, outside it is not clickable
32 |          anymore, for some magical reason -->
33 |     <div id="window-controls">
34 |         <div class="window-minimize"><span></span></div>
35 |         <div class="window-scale"><span></span><span></span></div>
36 |         <div class="window-close">&times;</div>
37 |     </div>
38 | </ul>
39 | 


--------------------------------------------------------------------------------
/src/app/styles/form.less:
--------------------------------------------------------------------------------
 1 | form {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     &.login {
 5 |         width: 350px;
 6 |         margin: 30px auto 0 auto;
 7 | 
 8 |         h2 {
 9 |             color: #333333;
10 |             font-weight: normal;
11 |             font-size: 37px;
12 |             text-align: center;
13 |             margin-bottom: 50px;
14 |         }
15 | 
16 |         a {
17 |             text-align: center;
18 |         }
19 |         a.button-cancel {
20 |             display: none;
21 |         }
22 |     }
23 | }
24 | button {
25 |     line-height: 40px;
26 |     font-family: 'Open Sans', serif;
27 |     margin-bottom: 40px;
28 |     background-color: #326de6;
29 |     border: 0;
30 |     color: #fff;
31 |     font-size: 18px;
32 |     padding: 0 20px;
33 |     display: inline-block;
34 |     cursor: pointer;
35 |     margin-top: 20px;
36 | }
37 | input {
38 |     line-height: 30px;
39 |     font-family: 'Open Sans', serif;
40 |     margin-bottom: 40px;
41 |     padding: 0 10px;
42 |     display: inline-block;
43 |     border: 0;
44 |     font-size: 18px;
45 |     border-bottom: 2px solid #c9e9ec;
46 |     outline: 0;
47 | }
48 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Arco Mul
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 
23 | 


--------------------------------------------------------------------------------
/src/app/views/FeedContext.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     app = require("../app"),
 7 |     _ = require("underscore"),
 8 |     Twister = require("../Twister"),
 9 |     feedContextTemplate = _.template(require("../templates/context-feed.html"));
10 | 
11 | Backbone.$ = $;
12 | 
13 | module.exports = Backbone.View.extend({
14 | 
15 |     events: {
16 |         "click a": "navigate",
17 |     },
18 | 
19 |     initialize: function() {
20 |         var self = this;
21 | 
22 |         this.options = {};
23 | 
24 |         Twister.getTrendingHashtags(10, function (err, tags) {
25 |             if (err) return console.error('Error getting hashtags:', err);
26 |             self.options.tags = tags;
27 |             self.render();
28 |         });
29 |     },
30 | 
31 |     navigate: function (e) {
32 |         e.preventDefault();
33 |         app.router.navigate($(e.target).attr('href'), {trigger: true});
34 |     },
35 | 
36 |     render: function() {
37 |         this.$el.html(feedContextTemplate({_: _, options: this.options}));
38 |         return this;
39 |     }
40 | });
41 | 
42 | 


--------------------------------------------------------------------------------
/src/app/views/PostContent.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     _ = require("underscore"),
 8 |     Twister = require("../Twister"),
 9 |     app = require("../app"),
10 |     postContentTemplate = _.template(require("../templates/content-post.html")),
11 |     postTemplate = _.template(require("../templates/post.html"));
12 | 
13 | Backbone.$ = $;
14 | 
15 | module.exports = Backbone.View.extend({
16 | 
17 |     events: {
18 | 
19 |     },
20 | 
21 |     initialize: function(options) {
22 |         var self = this;
23 |         this.options = options;
24 | 
25 |         this.user = options.user;
26 |         this.replies = options.replies;
27 |         this.parentPosts = options.parentPosts;
28 |         
29 |         this.render();
30 |     },
31 | 
32 |     render: function() {
33 |         this.$el.html(postContentTemplate({
34 |             post: this.model,
35 |             parentPosts: this.parentPosts,
36 |             replies: this.replies,
37 |             user: this.user,
38 |             postTemplate: postTemplate
39 |         }));
40 |         return this;
41 |     }
42 | });
43 | 


--------------------------------------------------------------------------------
/src/app/views/Settings.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     _ = require("underscore"),
 7 |     app = require("../app"),
 8 |     settingsTemplate = _.template(require("../templates/settings.html"));
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |         'change #hide-replies-and-retwists': 'onHideRepliesAndRetiwsts'
16 |     },
17 | 
18 |     initialize: function() {
19 |         this.render();
20 |     },
21 | 
22 |     onHideRepliesAndRetiwsts: function () {
23 |         if (this.$el.find('#hide-replies-and-retwists').is(':checked')) {
24 |             window.localStorage[app.user.get('username') + '_hideRepliesAndRetwists'] = true;
25 |         } else {
26 |             window.localStorage[app.user.get('username') + '_hideRepliesAndRetwists'] = false;
27 |         }
28 |     },
29 | 
30 |     render: function() {
31 |         this.$el.html(settingsTemplate({
32 |             username: app.user.get('username'),
33 |             hideRepliesAndRetwists: window.localStorage[app.user.get('username') + '_hideRepliesAndRetwists'] === 'true'
34 |         }));
35 |         return this;
36 |     }
37 | 
38 | });
39 | 


--------------------------------------------------------------------------------
/src/app/views/SlideOverlay.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     app = require("../app"),
 8 |     _ = require("underscore");
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |         'click .close-button': 'onClose'
16 |     },
17 | 
18 |     initialize: function(options) {
19 |         var self = this;
20 |         this.options = options;
21 |         this.render();
22 |         this.childView = new (this.options.childView)(_.extend({el: this.$content}, this.options.options));
23 |     },
24 | 
25 |     onClose: function () {
26 |         var self = this;
27 |         this.$el.one('webkitAnimationEnd', function(e) {
28 |             if (self.childView.onClose) {
29 |                 self.childView.onClose();
30 |             }
31 |             self.remove();
32 |         });
33 |         this.$el.addClass('close');
34 |     },
35 | 
36 |     render: function() {
37 |         this.$el.html('<div><div class="close-button">&times;</div><div class="content-holder"><div class="content"></div></div></div>');
38 |         this.$content = this.$el.find('.content');
39 |         return this;
40 |     }
41 | });
42 | 


--------------------------------------------------------------------------------
/src/app/styles/accounts-overlay.less:
--------------------------------------------------------------------------------
 1 | .accounts {
 2 |     text-align: center;
 3 |     h2 {
 4 |         color: #333333;
 5 |         font-weight: normal;
 6 |         font-size: 37px;
 7 |     }
 8 |     .users {
 9 |         width: 350px;
10 |         margin: 50px auto 0 auto;
11 | 
12 |         .user {
13 |             cursor: pointer;
14 |             display: flex;
15 |             padding: 15px;
16 |             &:hover {
17 |                 background-color: #e4f4f5;
18 |             }
19 | 
20 |             img {
21 |                 width: 100px;
22 |                 border-radius: 100%;
23 |                 flex: 0 0 68px;
24 |                 height: 68px;
25 |                 margin-right: 15px;
26 |             }
27 | 
28 |             div {
29 |                 flex: 1;
30 |                 text-align: left;
31 |                 .username {
32 |                     margin-top: 9px;
33 |                     font-size: 25px;
34 |                     font-weight: normal;
35 |                     &:before {
36 |                         font-size: 20px;
37 |                         font-weight: normal;
38 |                     }
39 |                 }
40 |                 span:nth-child(3) {
41 |                     font-size: 15px;
42 |                     color: #999999;
43 |                 }
44 |             }
45 |         }
46 |     }
47 | }
48 | 


--------------------------------------------------------------------------------
/src/app/views/ConfirmPopup.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     app = require("../app"),
 8 |     _ = require("underscore");
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |         'click .confirm-button': 'onConfirm',
16 |         'click .cancel-button': 'onCancel'
17 |     },
18 | 
19 |     initialize: function(options) {
20 |         var self = this;
21 |         this.options = options;
22 |         this.render(options);
23 |     },
24 | 
25 |     onConfirm: function () {
26 |         if(this.options.onConfirm) this.options.onConfirm();
27 |         this.remove();
28 |     },
29 | 
30 |     onCancel: function () {
31 |         if(this.options.onCancel) this.options.onCancel();
32 |         this.remove();
33 |     },
34 | 
35 |     render: function() {
36 |         this.$el.html('<div class="bg"><div class="popup"><div class="top"><p>'
37 |             +this.options.texts.main
38 |             +'</p></div><div class="bottom"><button class="cancel-button">'
39 |             +this.options.texts.cancel
40 |             +'</button><button class="confirm-button">'
41 |             +this.options.texts.confirm+'</button></div></div></div>'
42 |         );
43 |         return this;
44 |     }
45 | });
46 | 


--------------------------------------------------------------------------------
/src/app/templates/preview-post.html:
--------------------------------------------------------------------------------
 1 | <div class="post-preview">
 2 |     <div class="title">
 3 |         <div>&times;</div>
 4 |         Post of <a class="username" href="<%= post.get('user').getUrl() %>"><%= post.get('user').get('username') %></a>
 5 |     </div>
 6 |     <div class="top">
 7 |         <div class="posts">
 8 |             <% 
 9 |             var html = '';
10 |             var current = post;
11 |             while (current.get('parent')) {
12 |                 html = postTemplate({post: current.get('parent')}) + html;
13 |                 current = current.get('parent');
14 |             }
15 |             %>
16 |             <%= html %>
17 |         </div>
18 |     </div>
19 |     <div class="middle">
20 |         <div class="posts">
21 |             <%= postTemplate({post: post, className: 'main'}) %>
22 |             <div class="preview-actions">
23 |                 3 <span class="retwist"></span>
24 |                 5 <span class="love"></span>
25 |                 <span class="reply">Reply</span>
26 |             </div>
27 |         </div>
28 |     </div>
29 |     <div class="bottom">
30 |         <div class="posts">
31 |             <% _.each(post.get('replies'), function (post) { %>
32 |                 <%= postTemplate({post: post}) %>
33 |             <% }) %>
34 |         </div>
35 |     </div>
36 |     <div class="footer">
37 |         <div>
38 |             <button>More...</button>
39 |         </div>
40 |     </div>
41 | </div>
42 | 


--------------------------------------------------------------------------------
/src/app/templates/user-detail.html:
--------------------------------------------------------------------------------
 1 | <div class="user-detail">
 2 |     <div class="top">
 3 |         <div class="avatar">
 4 |             <div class="<%= (user.isFollowedByActiveUser() ? 'following' : 'follow') %>"></div>
 5 |             <img class="avatar" src="<%= user.get('avatar') ? user.get('avatar') : user.getDefaultAvatar() %>" />
 6 |         </div>
 7 |         <div class="user-info">
 8 |             <h2 class="username"><%=user.get('username')%> <%= (user.get('fullname') ? '<span class="fullname"> - ' + user.get('fullname') + '</span>' : '') %></h2>
 9 |             <p class="stats">
10 |             <% if (user.get('following')) { %>
11 |                 <a href="user/<%= user.get('username') %>/following">Following: <%= user.get('following').length %></a>
12 |             <% } %>
13 |             </p>
14 |             <% if (user.get('bio') || user.get('location')) { %>
15 |                 <p class="about">
16 |                 <% if (user.get('bio')) { %>
17 |                     <%= user.get('bio') %><br />
18 |                 <% } %>
19 |                 <% if (user.get('location')) { %>
20 |                     <%= '<span class="location">' + user.get('location') + '</span>' %>
21 |                 <% } %>
22 |                 </p>
23 |             <% } %>
24 |         </div>
25 |     </div>
26 | 
27 |     <div class="posts line">
28 |         <% feed.get('posts').each(function (post) { %>
29 |         <%= postTemplate({post: post, icon: true}) %>
30 |         <% }); %>
31 |     </div>
32 |     <div class="load-animation"></div>
33 | </div>
34 | 


--------------------------------------------------------------------------------
/src/app/svg/mail.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |   <g id="email-mail" data-iconmelon="Streamline Icon Set:21c7614c681ed3bed89ecd183c1eebe4">
 4 |     <g id="Expanded">
 5 |       <g>
 6 |         <g>
 7 |           <path  d="M29.333,26.667H2.667C1.196,26.667,0,25.471,0,24V8c0-1.471,1.196-2.667,2.667-2.667h26.667
 8 | 				C30.804,5.333,32,6.529,32,8v16C32,25.471,30.804,26.667,29.333,26.667z M2.667,6.666C1.931,6.666,1.333,7.265,1.333,8v16
 9 | 				c0,0.735,0.598,1.333,1.333,1.333h26.667c0.736,0,1.334-0.598,1.334-1.333V8c0-0.735-0.598-1.334-1.334-1.334H2.667z"></path>
10 |         </g>
11 |         <g>
12 |           <path  d="M16,19.461L4.305,11.893c-0.309-0.199-0.398-0.611-0.198-0.922c0.2-0.309,0.612-0.397,0.922-0.197
13 | 				L16,17.872l10.972-7.099c0.309-0.2,0.722-0.111,0.922,0.197c0.2,0.311,0.111,0.723-0.198,0.922L16,19.461z"></path>
14 |         </g>
15 |         <g>
16 |           <path  d="M4,22.667c-0.215,0-0.427-0.104-0.555-0.297c-0.205-0.307-0.122-0.721,0.185-0.925l6-4
17 | 				c0.307-0.204,0.721-0.122,0.925,0.185c0.205,0.307,0.122,0.721-0.185,0.925l-6,4C4.256,22.63,4.127,22.667,4,22.667z"></path>
18 |         </g>
19 |         <g>
20 |           <path  d="M27.999,22.667c-0.127,0-0.255-0.037-0.369-0.112l-6-4c-0.307-0.204-0.389-0.618-0.185-0.925
21 | 				s0.617-0.389,0.925-0.185l6,4c0.307,0.204,0.389,0.618,0.185,0.925C28.427,22.562,28.215,22.667,27.999,22.667z"></path>
22 |         </g>
23 |       </g>
24 |     </g>
25 |   </g>
26 | </svg>
27 | 


--------------------------------------------------------------------------------
/src/app/styles/popup.less:
--------------------------------------------------------------------------------
 1 | #popup-holder {
 2 |     .bg {
 3 |         position: fixed;
 4 |         width: 100%;
 5 |         height: 100%;
 6 |         background-color: rgba(0,0,0,0.3);
 7 |         z-index: 4;
 8 |     }
 9 |     .popup {
10 |         width: 50%;
11 |         height: 50%;
12 |         left: 25%;
13 |         top: 25%;
14 |         background-color: #fff;
15 |         position: absolute;
16 |         text-align: center;
17 |         display: flex;
18 |         flex-direction: column;
19 |         .top {
20 |             flex-basis: 0;
21 |             flex-grow: 4;
22 |             display: flex;
23 |             flex-direction: column;
24 |             justify-content: center;
25 |             padding: 50px;
26 |         }
27 |         .bottom {
28 |             flex-basis: 0;
29 |             flex-grow: 1;
30 |             display: flex;
31 |             align-items: stretch;
32 |             position: relative;
33 |             .cancel-button {
34 |                 width: 50%;
35 |                 height: 100%;
36 |                 margin: 0;
37 |                 position: absolute;
38 |                 background-color: #868686;
39 |             }
40 |             .confirm-button {
41 |                 width: 50%;
42 |                 height: 100%;
43 |                 margin: 0;
44 |                 left: 50%;
45 |                 position: absolute;
46 |                 background-color: #4FB547;
47 |             }
48 |             .close-button {
49 |                 width: 100%;
50 |                 height: 100%;
51 |                 margin: 0;
52 |                 position: absolute;
53 |                 background-color: #326de6;
54 |             }
55 |         }
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/app/styles/context-user.less:
--------------------------------------------------------------------------------
 1 | #context-section .user {
 2 |     .avatar-holder {
 3 |         overflow: hidden;
 4 |         img {
 5 |             width: 104%;
 6 |             -webkit-filter: blur(5px);
 7 |             margin-left: -2%;
 8 |             margin-top: -2%;
 9 |         }
10 |         &::after {
11 |             content: "";
12 |             height: 200px;
13 |             width: 100%;
14 |             margin-top: -220px;
15 |             display: block;
16 |             background: -webkit-linear-gradient(rgba(128, 168, 204, 0), rgb(128, 168, 204));
17 |             z-index: 1;
18 |             position: relative;
19 |         }
20 |     }
21 |     img.avatar {
22 |         border-radius: 100%;
23 |         margin-top: -102px;
24 |         position: relative;
25 |         border: 5px #fff solid;
26 |         z-index: 2;
27 |         width: 120px;
28 |         height: 120px;
29 |         box-shadow: 0 2px 4px 0 rgba(0,0,0,0.2);
30 |         background-color: #fff;
31 |     }
32 |     h1 {
33 |         font-weight: bold;
34 |         padding-top: 0;
35 |         font-size: 30px;
36 |         padding-bottom: 3px;
37 |     }
38 |     h2 {
39 |         font-weight: normal;
40 |         padding-top: 0;
41 |         &::before {
42 |             content: "@";
43 |             font-weight: 200;
44 |             font-size: 17px;
45 |             opacity: 0.8;
46 |         }
47 |     }
48 |     button.following {
49 |         background-color: #14AD21;
50 |         &::after {
51 |             content: "✔ Following";
52 |         }
53 |         &:hover {
54 |             background-color: #AB0101;
55 |             &::after {
56 |                 content: "Unfollow";
57 |             }
58 |         }
59 |     }
60 | }
61 | 
62 | 


--------------------------------------------------------------------------------
/src/app/app.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var _ = require("underscore"),
 5 |     gui = window.require('nw.gui'),
 6 |     $ = require("jquery"),
 7 |     UserModel = require("./models/User"),
 8 |     Backbone = require("backbone"),
 9 |     MainMenuView = require("./views/MainMenu"),
10 |     PopupView = require("./views/Popup"),
11 |     ConfirmPopupView = require("./views/ConfirmPopup"),
12 |     MainPageView = require("./views/MainPage");
13 | 
14 | // Alias the module for easier identification.
15 | var app = module.exports;
16 | 
17 | app.user = undefined;
18 | app.changeUser = function (user) {
19 |     console.log('Change user to:', user);
20 |     app.user = user;
21 |     app.menuView.trigger('userChange', user);
22 |     app.mainView.trigger('userChange', user);
23 | }
24 | 
25 | app.dispatcher = _.clone(Backbone.Events);
26 | app.menuView = new MainMenuView({model: app.user});
27 | app.mainView = new MainPageView();
28 | 
29 | app.dispatcher.on('open-post-detail', function (options) {
30 |     app.mainView.openPostDetail(options);
31 | });
32 | app.dispatcher.on('open-user-profile', function (options) {
33 |     app.mainView.openUserProfile(options);
34 | });
35 | app.dispatcher.on('open-following', function (options) {
36 |     app.mainView.openFollowing(options);
37 | });
38 | app.dispatcher.on('open-mentions', function (options) {
39 |     app.mainView.openMentions(options);
40 | });
41 | app.dispatcher.on('open-popup', function (options) {
42 |     app.mainView.showPopup(PopupView, options);
43 | });
44 | app.dispatcher.on('open-confirm-popup', function (options) {
45 |     app.mainView.showPopup(ConfirmPopupView, options);
46 | });
47 | 
48 | // The root path to run the application through.
49 | app.root = '/';
50 | 


--------------------------------------------------------------------------------
/src/app/main.js:
--------------------------------------------------------------------------------
 1 | // Break out the application running from the configuration definition to
 2 | // assist with testing.
 3 | 
 4 | var fs = require('fs'),
 5 |     gui = window.require('nw.gui');
 6 | 
 7 | require.extensions['.html'] = function (module, filename) {
 8 |     module.exports = fs.readFileSync(filename, 'utf8');
 9 | };
10 | 
11 | global.document = window.document;
12 | global.navigator = window.navigator;
13 | 
14 | var $ = require('jquery'),
15 |     Backbone = require('backbone'),
16 |     Twister = require('./Twister'),
17 |     app = require('./app'),
18 |     Router = require('./router');
19 | 
20 | Backbone.$ = $;
21 | 
22 | // Define your master router on the application namespace and trigger all
23 | // navigation from this instance.
24 | app.router = new Router();
25 | 
26 | // Trigger the initial route and enable HTML5 History API support, set the
27 | // root folder to '/' by default.  Change in app.js.
28 | Backbone.history.start({ root: app.root });
29 | app.router.navigate('/index.html', {trigger: true});
30 | 
31 | // Press <d> to open dev tools
32 | $(window.document).on('keyup', function (e) {
33 |     if (e.keyCode == 123) {
34 |         gui.Window.get().showDevTools();
35 |     }
36 | });
37 | 
38 | var win = gui.Window.get();
39 | win.on('close', function() {
40 |     this.hide(); // Pretend to be closed already
41 |     Twister.stopDeamon(function (err, data) {
42 |         // TODO: application should always quit, no matter what
43 |         //      this is just for debugging
44 |         if (err) return console.log('Error stopping deamon, inspect!', err);
45 |     });
46 | 
47 |     // Quit the application
48 |     gui.App.quit();
49 | });
50 | 
51 | // Enable shadow
52 | // var win = gui.Window.get();
53 | // win.minimize();
54 | // win.restore();
55 | 


--------------------------------------------------------------------------------
/src/app/styles/main-menu.less:
--------------------------------------------------------------------------------
 1 | #main-menu {
 2 |     margin: 0;
 3 |     background-color: #C9E9EC;
 4 |     z-index: 2;
 5 |     -webkit-user-select: none;
 6 |     display: flex;
 7 |     justify-content: space-between;
 8 |     -webkit-app-region: drag;
 9 | 
10 |     ul {
11 |         list-style: none;
12 |         padding: 0;
13 |         margin: 0;
14 | 
15 |         li {
16 |             float: left;
17 |             a {
18 |                 -webkit-app-region: no-drag;
19 |                 display: block;
20 |                 padding: 12.5px 25px;
21 |                 text-decoration: none;
22 |                 text-align: center;
23 |                 font-size: 15px;
24 |                 line-height: 15px;
25 |                 color: #333333;
26 |                 position: relative;
27 |                 &:hover {
28 |                     padding: 12.5px 25px 9.5px 25px;
29 |                     border-bottom: 3px solid #326de6;
30 |                 }
31 |                 &.status {
32 |                     padding: 12.5px;
33 |                     &:hover {
34 |                         padding: 12.5px;
35 |                         border-bottom: 0;
36 |                     }
37 |                     span {
38 |                         width: 15px;
39 |                         height: 15px;
40 |                         background-color: #44e14b;
41 |                         display: inline-block;
42 |                         border-radius: 100%;
43 |                     }
44 |                 }
45 |                 .dot {
46 |                     display: none;
47 |                     position: absolute;
48 |                     width: 7px;
49 |                     height: 7px;
50 |                     background-color: #E82222;
51 |                     border-radius: 100%;
52 |                     right: 17px;
53 |                     top: 12px;
54 |                 }
55 |             }
56 |         }
57 |     }
58 | }
59 | 


--------------------------------------------------------------------------------
/src/app/styles/fonts.less:
--------------------------------------------------------------------------------
 1 | @OpenSansPath: "../fonts";
 2 | 
 3 | @font-face {
 4 |   font-family: 'Open Sans';
 5 |   src: url('@{OpenSansPath}/OpenSans-Light.ttf') format('truetype');
 6 |   font-weight: 300;
 7 |   font-style: normal;
 8 | }
 9 | 
10 | @font-face {
11 |   font-family: 'Open Sans';
12 |   src: url('@{OpenSansPath}/OpenSans-LightItalic.ttf') format('truetype');
13 |   font-weight: 300;
14 |   font-style: italic;
15 | }
16 | 
17 | @font-face {
18 |   font-family: 'Open Sans';
19 |   src: url('@{OpenSansPath}/OpenSans-Regular.ttf') format('truetype');
20 |   font-weight: normal;
21 |   font-style: normal;
22 | }
23 | 
24 | @font-face {
25 |   font-family: 'Open Sans';
26 |   src: url('@{OpenSansPath}/OpenSans-Italic.ttf') format('truetype');
27 |   font-weight: normal;
28 |   font-style: italic;
29 | }
30 | 
31 | @font-face {
32 |   font-family: 'Open Sans';
33 |   src: url('@{OpenSansPath}/OpenSans-Semibold.ttf') format('truetype');
34 |   font-weight: 600;
35 |   font-style: normal;
36 | }
37 | 
38 | @font-face {
39 |   font-family: 'Open Sans';
40 |   src: url('@{OpenSansPath}/OpenSans-SemiboldItalic.ttf') format('truetype');
41 |   font-weight: 600;
42 |   font-style: italic;
43 | }
44 | 
45 | @font-face {
46 |   font-family: 'Open Sans';
47 |   src: url('@{OpenSansPath}/OpenSans-Bold.ttf') format('truetype');
48 |   font-weight: bold;
49 |   font-style: normal;
50 | }
51 | 
52 | @font-face {
53 |   font-family: 'Open Sans';
54 |   src: url('@{OpenSansPath}/OpenSans-BoldItalic.ttf') format('truetype');
55 |   font-weight: bold;
56 |   font-style: italic;
57 | }
58 | 
59 | @font-face {
60 |   font-family: 'Open Sans';
61 |   src: url('@{OpenSansPath}/OpenSans-ExtraBold.ttf') format('truetype');
62 |   font-weight: 800;
63 |   font-style: normal;
64 | }
65 | 
66 | @font-face {
67 |   font-family: 'Open Sans';
68 |   src: url('@{OpenSansPath}/OpenSans-ExtraBoldItalic.ttf') format('truetype');
69 |   font-weight: 800;
70 |   font-style: italic;
71 | }
72 | 


--------------------------------------------------------------------------------
/src/app/views/UserContext.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     _ = require("underscore"),
 7 |     app = require("../app"),
 8 |     userContextTemplate = _.template(require("../templates/context-user.html"));
 9 | 
10 | Backbone.$ = $;
11 | 
12 | module.exports = Backbone.View.extend({
13 | 
14 |     events: {
15 |         'click button': 'toggleFollow'
16 |     },
17 | 
18 |     initialize: function() {
19 |         var self = this;    
20 | 
21 |         this.model.fetchProfile(function (err) {
22 |             if (err) return console.error('Error fetching profile', err);
23 |             self.render();
24 |         });
25 | 
26 |         app.user.fetchFollowing(function (err) {
27 |             if (err) return console.error('Error fetching following', err);
28 |             self.render();
29 |         });
30 | 
31 |         this.model.fetchFollowing(function (err) {
32 |             if (err) return console.error('Error fetching following', err);
33 |             self.render();
34 |         });
35 | 
36 |         this.model.fetchAvatar(function (err) {
37 |             if (err) return console.error('Error fetch avatar', err);
38 |             self.render();
39 |         });
40 |     },
41 | 
42 |     toggleFollow: function () {
43 |         var self = this;
44 |         if (app.user.isFollowing(this.model.get('username'))) {
45 |             app.user.unfollow(this.model.get('username'), function (err) {
46 |                 if(err) return console.error('Error unfollowing user', err); 
47 |                 self.render();    
48 |             });
49 |         } else {
50 |             app.user.follow(this.model.get('username'), function (err) {
51 |                 if(err) return console.error('Error following user', err); 
52 |                 self.render();    
53 |             });
54 |         }
55 |     },
56 | 
57 |     render: function() {
58 |         this.$el.html(userContextTemplate({app: app, user: this.model}));
59 |         return this;
60 |     }
61 | });
62 | 


--------------------------------------------------------------------------------
/src/app/views/Status.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     moment = require("moment"),
 8 |     app = require("../app"),
 9 |     _ = require("underscore"),
10 |     statusTemplate = _.template(require("../templates/status.html")),
11 |     InfoModel = require("../models/Info"),
12 |     Twister = require("../Twister");
13 | 
14 | Backbone.$ = $;
15 | 
16 | module.exports = Backbone.View.extend({
17 | 
18 |     infoTimer: null,
19 | 
20 |     events: {
21 | 
22 |     },
23 | 
24 |     initialize: function (options) {
25 |         var self = this;
26 | 
27 |         this.options = options;
28 | 
29 |         this.render();
30 | 
31 |         this.gatherInfo();
32 |     },
33 | 
34 |     gatherInfo: function () {
35 |         // Prevent starting the timer twice by accident
36 |         if (this.infoTimer) return;
37 | 
38 |         var self = this;
39 | 
40 |         this.infoTimer = setInterval(this.getInfo.bind(this), 1000);
41 |         this.getInfo();
42 |     },
43 |         
44 |     getInfo: function () {
45 |         var self = this;
46 | 
47 |         // Retrieve latest info
48 |         Twister.getInfo(function (err, data) {
49 |             if (!self.latestInfo) self.latestInfo = new InfoModel();
50 |             self.latestInfo.parse(data);
51 |             self.render();
52 |         });
53 | 
54 |         // Retrieve latest blockchain info
55 |         Twister.getBestBlock(function (err, data) {
56 |             if (!self.latestInfo) self.latestInfo = new InfoModel();
57 |             // Remove version from block data because of conflict
58 |             // with general info 
59 |             data.version = undefined;
60 |             self.latestInfo.parse(data);
61 |         });
62 |     },
63 | 
64 |     /**
65 |      * BE AWARE: Function called by the overlay type using this view
66 |      */
67 |     onClose: function () {
68 |         clearInterval(this.infoTimer); 
69 |     },
70 | 
71 |     render: function() {
72 |         this.$el.html(statusTemplate({info: this.latestInfo}));
73 |         return this;
74 |     }
75 | });
76 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function(grunt) {
 2 | 
 3 |     var target = process.env.npm_config_target || 'all';
 4 | 
 5 |     var platforms;
 6 |     if (target == 'all') {
 7 |         platforms = ['win32', 'win64', 'linux64'];
 8 |     } else {
 9 |         platforms = [target];
10 |     }
11 | 
12 |     console.log('Running Grunt tasks with target "' + target + '" for platforms:', platforms);
13 | 
14 |     // Build up array of destinations for Twister deamon files
15 |     var destinations = {files: []};
16 |     platforms.forEach(function (platform) {
17 |         destinations.files.push({
18 |                 expand: true,
19 |                 cwd: './twister-data/' + platform,
20 |                 src: ['twister-data/**'],
21 |                 dest: './builds/Twisting/' + platform + '/'
22 |         });
23 |     });
24 | 
25 |     // Project configuration.
26 |     grunt.initConfig({
27 |         pkg: grunt.file.readJSON('package.json'),
28 |         nodewebkit: {
29 |             options: {
30 |                 platforms: platforms,
31 |                 version: 'v0.12.2',
32 |                 buildDir: './builds',
33 |                 winIco: './src/icon.ico'
34 |             },
35 |             src: ['./src/**/*', '!./src/twister-data/**/*', '!./src/*.exe', '!./src/*.pak', '!./src/*.dll']
36 |         },
37 |         copy: {
38 |             twister: destinations
39 |         },
40 |         less: {
41 |             development: {
42 |                 files: {
43 |                     "./src/app/styles/style.css": "./src/app/styles/main.less"
44 |                 }
45 |             }
46 |         },
47 |         auto_install: {
48 |             subdir: {
49 |                 options: {
50 |                     cwd: 'src',
51 |                     stdout: true,
52 |                     stderr: true,
53 |                     failOnError: true,
54 |                 }
55 |             }
56 |         },
57 |     });
58 | 
59 |     grunt.loadNpmTasks('grunt-node-webkit-builder');
60 |     grunt.loadNpmTasks('grunt-contrib-copy');
61 |     grunt.loadNpmTasks('grunt-contrib-less');
62 |     grunt.loadNpmTasks('grunt-auto-install');
63 | 
64 |     grunt.registerTask('build', ['less', 'nodewebkit', 'copy:twister']);
65 |     grunt.registerTask('compile', ['less']);
66 |     grunt.registerTask('postinstall', ['auto_install', 'less']);
67 | };
68 | 


--------------------------------------------------------------------------------
/src/app/views/AccountsOverlay.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     moment = require("moment"),
 8 |     app = require("../app"),
 9 |     _ = require("underscore"),
10 |     UserModel = require('../models/User'),
11 |     accountsOverlayTemplate = _.template(require("../templates/overlay-accounts.html")),
12 |     Twister = require("../Twister");
13 | 
14 | Backbone.$ = $;
15 | 
16 | module.exports = Backbone.View.extend({
17 | 
18 |     posts: null,
19 |     users: {},
20 | 
21 |     events: {
22 |         "click a": "navigate",
23 |         "click .user": "choose"
24 |     },
25 | 
26 |     initialize: function() {
27 |         var self = this;
28 | 
29 |         this.render();
30 | 
31 |         // Fetch users from wallet
32 |         Twister.getUsers(function (err, users) {
33 |             _.each(users, function (username) {
34 |                 var user = new UserModel({username: username});
35 |                 self.users[username] = user;
36 | 
37 |                 // Try to get avatar from disk
38 |                 user.fetchAvatarFromDisk(function (err) {
39 |                     if (user.get('avatar')) {
40 |                         self.$el.find('.user[data-user=' + user.get('username') + ']').children('img').attr('src', user.get('avatar'));
41 |                         return;
42 |                     }
43 | 
44 |                     // Couldn't find avatar on disk, try DHT
45 |                     user.fetchAvatar(function (err) {
46 |                         self.$el.find('.user[data-user=' + user.get('username') + ']').children('img').attr('src', user.get('avatar'));
47 |                     });
48 |                 });
49 |             });
50 |             self.render(self.users);
51 |         });
52 |     },
53 | 
54 |     choose: function (e) {
55 |         var username = $(e.currentTarget).attr('data-user');
56 |         app.changeUser(this.users[username]);
57 |         app.router.navigate('start', {trigger: true});
58 |         this.trigger('close');
59 |     },
60 | 
61 |     navigate: function (e) {
62 |         e.preventDefault();
63 |         app.router.navigate($(e.target).attr('href'), {trigger: true});
64 |     },
65 | 
66 |     render: function(users) {
67 |         this.$el.html(accountsOverlayTemplate({_: _, users: users}));
68 |         return this;
69 |     }
70 | });
71 | 


--------------------------------------------------------------------------------
/src/app/templates/post.html:
--------------------------------------------------------------------------------
 1 | <% var className = className %>
 2 | <% var icon = icon || false %>
 3 | <% var isReplying = isReplying || false %>
 4 | <% var overwriteUser = overwriteUser || null %>
 5 | 
 6 | <div class="post <%= (isReplying ? 'compose_reply' : post.getType()) %> <%= className %>" data-id="<%= (isReplying ? '' : post.id) %>">
 7 | 
 8 |     <a class="avatar" href="/user/<%= (overwriteUser ? overwriteUser.get('username') : post.get('user').get('username')) %>">
 9 |         <%= (overwriteUser ? overwriteUser.getAvatarImg() : post.get('user').getAvatarImg()) %>
10 |         <% if (icon) { %>
11 |             <div class="icon"></div>
12 |         <% } %>
13 |     </a>
14 | 
15 |     <% if (post.getType() == 'compose') { %>
16 |         <div class="compose">
17 |             <span class="characters">140 characters left</span>
18 |             <div contenteditable="true" placeholder="Hey @<%=post.get('user').get('username')%>! What's happening?"></div>
19 |         </div>
20 |     <% } else if (isReplying) { %>
21 |         <div class="compose reply">
22 |             <span class="characters">140 characters left</span>
23 |             <div contenteditable="true" placeholder="Reply to @<%= post.get('user').get('username') %>"></div>
24 |         </div>
25 |     <% } else { %>
26 |         <div class="content">
27 |             <div class="top">
28 |                 <a class="username" href="/user/<%= post.get('user').get('username') %>"><%= post.get('user').get('username') %></a>
29 | 
30 |                     <div class="retwisters <%= (post.get('retwisters').length == 0 ? 'empty' : '') %>">
31 |                         <span></span>
32 |                         <% post.get('retwisters').forEach(function (user) { %>
33 |                             <%= user.getAvatarImg(true) %>
34 |                         <% }) %>
35 |                     </div>
36 | 
37 |                     <div class="lovers <%= (post.get('lovers').length == 0 ? 'empty' : '') %>">
38 |                         <span></span>
39 |                         <% post.get('lovers').forEach(function (user) { %>
40 |                             <%= user.getAvatarImg(true) %>
41 |                         <% }) %>
42 |                     </div>
43 |             </div>
44 | 
45 |             <span class="date"><%= post.getTimeAgo() %></span>
46 | 
47 |             <p>
48 |                 <%= post.getMessageRegexed() %><br />
49 |             </p>
50 |         </div>
51 |     <% } %>
52 | </div>
53 | 


--------------------------------------------------------------------------------
/src/app/views/LoginOverlay.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     moment = require("moment"),
 8 |     app = require("../app"),
 9 |     _ = require("underscore"),
10 |     loginOverlayTemplate = _.template(require("../templates/overlay-login.html")),
11 |     UserModel = require("../models/User"),
12 |     Twister = require("../Twister");
13 | 
14 | Backbone.$ = $;
15 | 
16 | module.exports = Backbone.View.extend({
17 | 
18 |     posts: null,
19 | 
20 |     events: {
21 |         "click a": "navigate",
22 |         "click button": "login",
23 |         "click a.button-cancel": "destroy"
24 |     },
25 | 
26 |     initialize: function() {
27 |         var self = this;
28 | 
29 |         this.render();
30 | 
31 |         Twister.getUsers(function (err, users) {
32 |             if (users && users.length > 0) {
33 |                 self.$cancelButton.show();
34 |             }
35 |         });
36 |     },
37 | 
38 |     navigate: function (e) {
39 |         e.preventDefault();
40 |         app.router.navigate($(e.target).attr('href'), {trigger: true});
41 |         // this.destroy();
42 |     },
43 | 
44 |     login: function (e) {
45 |         e.preventDefault();
46 |         var self = this;
47 |         var username = this.$el.find("input[name=username]").val();
48 |         var key = this.$el.find("input[name=key]").val();
49 | 
50 |         // Insert the given details into the wallet
51 |         Twister.importUser(username, key, function (err) {
52 |             if (err) {
53 |                 return console.log('Error importing user');
54 |             }
55 | 
56 |             // Get the followers of this user
57 |             Twister.followFollowersFromDht(username, function (err) {
58 |                 if (err) return console.log('Error following all retrieved users');
59 | 
60 |                 // Followers are followed, let's start!
61 |                 app.changeUser(new UserModel({username: username}));
62 |                 app.router.navigate('feed', {trigger: true});
63 |                 self.destroy();
64 |             });
65 |         });
66 |     },
67 | 
68 |     render: function() {
69 |         this.$el.html(loginOverlayTemplate());
70 |         this.$cancelButton = this.$el.find('.button-cancel');
71 |         return this;
72 |     },
73 | 
74 |     destroy: function () {
75 |         this.trigger('close');
76 |     }
77 | });
78 | 


--------------------------------------------------------------------------------
/src/app/views/CreateAccount.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     Backbone = require("backbone"),
 6 |     async = require("async"),
 7 |     moment = require("moment"),
 8 |     app = require("../app"),
 9 |     _ = require("underscore"),
10 |     createAccountTemplate = _.template(require("../templates/create-account.html")),
11 |     UserModel = require("../models/User"),
12 |     Twister = require("../Twister");
13 | 
14 | Backbone.$ = $;
15 | 
16 | module.exports = Backbone.View.extend({
17 | 
18 |     posts: null,
19 | 
20 |     events: {
21 |         "click button": "create",
22 |         "click a.button-cancel": "destroy"
23 |     },
24 | 
25 |     initialize: function() {
26 |         var self = this;
27 | 
28 |         this.render();
29 | 
30 |         Twister.getUsers(function (users) {
31 | 
32 |         });
33 |     },
34 | 
35 |     create: function (e) {
36 |         e.preventDefault();
37 |         var self = this;
38 |         var username = this.$el.find("input[name=username]").val();
39 | 
40 |         // Insert the given details into the wallet
41 |         Twister.createUser(username, function (err, key) {
42 |             if (err) {
43 |                 return console.log('Error creating user:', err);
44 |             }
45 | 
46 |             app.dispatcher.trigger('open-popup', {
47 |                 texts: {
48 |                     main: 'Below is your private key displayed. This random sequence of letters and numbers is your password. Make sure to store this key somewhere safeley.<br />Select the text and use ctrl+c to copy.<br /><br />' + key,
49 |                     button: 'Close'
50 |                 },
51 |                 onClose: function () {
52 |                     app.changeUser(new UserModel({username: username}));
53 |                     app.user.follow('twister', function (err) {
54 |                         if (err) {
55 |                             return console.log('Error creating following default user:', err);
56 |                         }
57 |                         app.router.navigate('feed', {trigger: true});
58 |                         self.destroy();
59 |                     });
60 |                 }
61 |             });
62 |         });
63 |     },
64 | 
65 |     render: function() {
66 |         this.$el.html(createAccountTemplate());
67 |         return this;
68 |     },
69 | 
70 |     destroy: function () {
71 |         this.trigger('close');
72 |     }
73 | });
74 | 


--------------------------------------------------------------------------------
/src/app/views/MainMenu.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var gui = window.require('nw.gui'),
 5 |     $ = require("jquery"),
 6 |     Backbone = require("backbone"),
 7 |     _ = require("underscore"),
 8 |     app = require("../app"),
 9 |     mainMenuTemplate = _.template(require("../templates/main-menu.html"));
10 | 
11 | Backbone.$ = $;
12 | 
13 | module.exports = Backbone.View.extend({
14 | 
15 |     el: "#main-menu",
16 | 
17 |     maximized: false,
18 | 
19 |     events: {
20 |         "click a": "navigate",
21 |         "click .window-close": "closeWindow",
22 |         "click .window-minimize": "minimizeWindow",
23 |         "click .window-scale": "scaleWindow",
24 |     },
25 | 
26 |     initialize: function() {
27 |         var self = this;
28 |         this.render();
29 | 
30 |         this.on('userChange', function (user) {
31 |             this.model = user;
32 |             this.render();
33 |             this.loadAvatar();
34 |         }, this);
35 | 
36 |         if (this.model) {
37 |             this.loadAvatar();
38 |         }
39 | 
40 |         app.dispatcher.on('new-mentions', function (options) {
41 |             self.showNewMentions();
42 |         });
43 |         app.dispatcher.on('mentions-seen', function (options) {
44 |             self.hideNewMentions();
45 |         });
46 |     },
47 | 
48 |     closeWindow: function () {
49 |         gui.Window.get().close();
50 |     },
51 | 
52 |     minimizeWindow: function () {
53 |         gui.Window.get().minimize();
54 |     },
55 | 
56 |     scaleWindow: function () {
57 |         if (this.maximized) {
58 |             gui.Window.get().unmaximize();
59 |             this.maximized = false;
60 |         } else {
61 |             gui.Window.get().maximize();
62 |             this.maximized = true;
63 |         }
64 |     },
65 | 
66 |     showNewMentions: function () {
67 |         this.$el.find('.mentions .dot').show();
68 |     },
69 |     hideNewMentions: function () {
70 |         this.$el.find('.mentions .dot').hide();
71 |     },
72 | 
73 |     loadAvatar: function () {
74 |         this.model.fetchAvatar(function () {
75 |             this.$el.find('.user-profile').css({'background-image': 'url(' + this.model.get('avatar') + ')'});
76 |         }.bind(this));
77 |     },
78 | 
79 |     navigate: function (e) {
80 |         e.stopImmediatePropagation();
81 |         e.preventDefault();
82 |         app.router.load($(e.currentTarget).attr('href'));
83 |     },
84 | 
85 |     render: function() {
86 |         this.$el.html(mainMenuTemplate({user: this.model}));
87 |         return this;
88 |     }
89 | });
90 | 


--------------------------------------------------------------------------------
/src/app/models/Info.js:
--------------------------------------------------------------------------------
 1 | "use strict";
 2 | 
 3 | // External dependencies.
 4 | var $ = require("jquery"),
 5 |     moment = require("moment"),
 6 |     Backbone = require("backbone");
 7 | 
 8 | Backbone.$ = $;
 9 | 
10 | // Defining the application router.
11 | module.exports = Backbone.Model.extend({
12 | 
13 |     initialize: function () {
14 | 
15 |     },
16 | 
17 |     parse: function (data) {
18 |         this.set(data);
19 |     },
20 | 
21 |     getVersion: function () {
22 |         var v = ("0000000" + this.get('version')).slice(-8);
23 |         if (!v) return -1;
24 |         return v.slice(0,2) + '.'
25 |         + v.slice(2,4) + '.'
26 |         + v.slice(4,6); // + '.'
27 |         // + v.slice(6,8);
28 |     },
29 | 
30 |     getConnectionLevel: function () {
31 |         var level = this.get('connections');;
32 |         if (level < 2) return 'bad';
33 |         if (level < 5) return 'neutral';
34 |         if (level >= 5) return 'good';
35 |     },
36 | 
37 |     getDhtConnectionLevel: function () {
38 |         var level = this.get('dht_nodes');;
39 |         if (level < 5) return 'bad';
40 |         if (level < 10) return 'neutral';
41 |         if (level >= 10) return 'good';
42 |     },
43 | 
44 |     getLastBlockFromNow: function () {
45 |         if(!this.get('time')) return 'unkown';
46 |         return moment(this.get('time') * 1000).fromNow();
47 |     },
48 | 
49 |     getTotalDownload: function () {
50 |         var bytes = this.get('total_download')
51 |             + this.get('total_dht_download')
52 |             + this.get('total_ip_overhead_download')
53 |             + this.get('total_payload_download');
54 |         return parseInt(bytes / 1024 / 1024);
55 |     },
56 | 
57 |     getDownloadSpeed: function () {
58 |         var bytes = this.get('download_rate')
59 |             + this.get('dht_download_rate')
60 |             + this.get('ip_overhead_download_rate')
61 |             + this.get('payload_download_rate');
62 |         return parseInt(bytes / 1024);
63 |     },
64 | 
65 |     getTotalUpload: function () {
66 |         var bytes = this.get('total_upload')
67 |             + this.get('total_dht_upload')
68 |             + this.get('total_ip_overhead_upload')
69 |             + this.get('total_payload_upload');
70 |         return parseInt(bytes / 1024 / 1024);
71 |     },
72 | 
73 |     getUploadSpeed: function () {
74 |         var bytes = this.get('upload_rate')
75 |             + this.get('dht_upload_rate')
76 |             + this.get('ip_overhead_upload_rate')
77 |             + this.get('payload_upload_rate');
78 |         return parseInt(bytes / 1024);
79 |     }
80 | });
81 | 


--------------------------------------------------------------------------------
/src/app/svg/retwist.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |   <g id="rotate">
 4 |         <path d="M30.65,15.393c-0.813-0.07-1.533,0.53-1.606,1.344c-0.272,3.062-1.62,5.947-3.798,8.124
 5 | 			c-2.482,2.482-5.783,3.851-9.294,3.851c-3.126,0-6.082-1.09-8.444-3.081l1.625,0.301c0.091,0.017,0.182,0.025,0.271,0.025
 6 | 			c0.7,0,1.323-0.499,1.456-1.213c0.146-0.805-0.385-1.576-1.188-1.726l-6.408-1.184c-0.036-0.007-0.07-0.004-0.105-0.01
 7 | 			c-0.056-0.006-0.109-0.013-0.165-0.013c-0.053,0-0.104,0.007-0.156,0.013c-0.037,0.005-0.074,0.002-0.111,0.01
 8 | 			c-0.009,0.001-0.017,0.005-0.024,0.007c-0.058,0.011-0.111,0.03-0.165,0.047c-0.039,0.014-0.078,0.023-0.115,0.039
 9 | 			c-0.053,0.022-0.102,0.051-0.15,0.078c-0.033,0.02-0.068,0.035-0.102,0.057c-0.051,0.035-0.098,0.077-0.145,0.117
10 | 			C2,22.2,1.974,22.218,1.951,22.24c-0.048,0.047-0.088,0.101-0.129,0.152c-0.018,0.022-0.037,0.042-0.053,0.065
11 | 			c-0.033,0.048-0.058,0.102-0.086,0.154c-0.017,0.033-0.037,0.065-0.053,0.102c-0.017,0.041-0.027,0.086-0.042,0.13
12 | 			c-0.017,0.051-0.034,0.102-0.044,0.153c-0.002,0.009-0.006,0.016-0.008,0.023c-0.006,0.036-0.005,0.072-0.008,0.107
13 | 			c-0.006,0.055-0.014,0.106-0.014,0.162c0,0.055,0.008,0.108,0.014,0.161c0.003,0.036,0.002,0.071,0.008,0.108l1.185,6.407
14 | 			c0.132,0.713,0.755,1.213,1.455,1.213c0.089,0,0.179-0.009,0.271-0.025c0.804-0.149,1.336-0.922,1.188-1.726l-0.334-1.807
15 | 			c2.945,2.609,6.684,4.05,10.651,4.05c4.303,0,8.347-1.675,11.388-4.717c2.668-2.668,4.32-6.203,4.654-9.956
16 | 			C32.066,16.185,31.465,15.465,30.65,15.393z" stroke-width="0" fill="#000"></path>
17 |         <path d="M2.956,15.264c0.271-3.062,1.62-5.946,3.797-8.124c2.482-2.483,5.782-3.851,9.294-3.851c3.127,0,6.082,1.09,8.445,3.081
18 | 			l-1.625-0.301c-0.809-0.149-1.577,0.384-1.725,1.187c-0.148,0.805,0.382,1.577,1.187,1.727l6.407,1.184c0.001,0,0.002,0,0.002,0
19 | 			c0.086,0.017,0.176,0.025,0.266,0.025c0,0,0.001,0,0.002,0h0.001c0.09,0,0.179-0.009,0.266-0.025c0.001,0,0.001,0,0.002,0
20 | 			c0.006-0.001,0.011-0.004,0.018-0.005c0.085-0.017,0.167-0.041,0.247-0.071c0.031-0.013,0.061-0.028,0.092-0.043
21 | 			c0.051-0.024,0.102-0.049,0.15-0.079c0.032-0.021,0.064-0.042,0.094-0.064c0.043-0.031,0.084-0.064,0.123-0.101
22 | 			c0.027-0.024,0.054-0.05,0.079-0.077c0.038-0.04,0.073-0.083,0.108-0.127c0.02-0.027,0.041-0.055,0.059-0.083
23 | 			c0.031-0.048,0.059-0.1,0.084-0.151c0.016-0.031,0.031-0.061,0.045-0.092c0.021-0.051,0.036-0.104,0.051-0.159
24 | 			c0.012-0.036,0.023-0.071,0.031-0.109c0.002-0.009,0.004-0.016,0.006-0.024c0.008-0.036,0.006-0.071,0.01-0.107
25 | 			c0.006-0.053,0.013-0.106,0.013-0.162s-0.007-0.108-0.013-0.162c-0.004-0.035-0.002-0.071-0.01-0.107l-1.184-6.407
26 | 			c-0.148-0.804-0.918-1.337-1.725-1.188c-0.806,0.148-1.336,0.921-1.188,1.727l0.333,1.805c-2.944-2.608-6.683-4.049-10.651-4.049
27 | 			c-4.302,0-8.347,1.674-11.388,4.717c-2.669,2.668-4.321,6.204-4.653,9.956c-0.072,0.816,0.529,1.534,1.344,1.606
28 | 			c0.045,0.004,0.09,0.007,0.133,0.007C2.242,16.614,2.889,16.034,2.956,15.264z" stroke-width="0" fill="#000"></path>
29 |   </g>
30 | </svg>
31 | 


--------------------------------------------------------------------------------
/src/app/styles/overlay.less:
--------------------------------------------------------------------------------
  1 | #overlay-holder {
  2 |     
  3 | }
  4 | 
  5 | .overlay {
  6 |     width: 100%;
  7 |     height: 100%;
  8 |     background-color: #fff;
  9 |     position: fixed;
 10 |     z-index: 2;
 11 |     vertical-align: middle;
 12 |     display: inline-flex;
 13 | 
 14 |     .inner {
 15 |         width: 50%;
 16 |         height: 50%;
 17 |         margin: auto auto;
 18 |         display: inline-block;
 19 | 
 20 |         &.notyetimplemented {
 21 |             h2 {
 22 |                 color: #194A79;
 23 |                 padding: 20px 0;
 24 |             }
 25 |             p {
 26 |                 padding: 20px 0;
 27 |                 color: #001E3A;
 28 |             }
 29 |             button {
 30 |                 margin-top: 20px;
 31 |             }
 32 |         }
 33 | 
 34 |         span.status {
 35 |             font-size: 18px;
 36 |             font-weight: bold;
 37 |             color: #001E3A;
 38 |             text-transform: uppercase;
 39 |             line-height: 50px;
 40 |         }
 41 |         span.info {
 42 |             font-size: 14px;
 43 |             font-weight: normal;
 44 |         }
 45 |     }
 46 | }
 47 | 
 48 | @-webkit-keyframes slide {
 49 |     from {left: 100%;}
 50 |     to {left: 5%;}
 51 | }
 52 | @-webkit-keyframes slide-reverse {
 53 |     from {left: 5%;}
 54 |     to {left: 100%;}
 55 | }
 56 | .slide-overlay {
 57 |     position: fixed;
 58 |     width: 95%;
 59 |     left: 100%;
 60 |     top: 39px;
 61 |     height: calc(~"100% - 39px");
 62 |     background-color: #fff;
 63 |     z-index: 1;
 64 |     vertical-align: middle;
 65 |     display: inline-flex;
 66 |     box-shadow: 6px 0 8px 5px rgb(192, 192, 192);
 67 |     -webkit-animation-name: slide;
 68 |     -webkit-animation-duration: 0.5s;
 69 |     -webkit-animation-fill-mode: forwards;
 70 |     overflow-y: hidden;
 71 |     overflow-x: hidden;
 72 | 
 73 |     &.close {
 74 |         left: 5%;
 75 |         -webkit-animation-name: slide-reverse;
 76 |         -webkit-animation-duration: 0.5s;
 77 |         -webkit-animation-fill-mode: forwards;
 78 |     }
 79 | 
 80 |     & > div {
 81 |         height: 100%; 
 82 |         width: 100%;
 83 | 
 84 |         & > .content-holder {
 85 |             height:100%;
 86 |             overflow-y: scroll;
 87 | 
 88 |             &::-webkit-scrollbar {
 89 |                 width: 9px;
 90 |             }
 91 |              
 92 |             &::-webkit-scrollbar-track {
 93 |                 background: rgba(0, 134, 255, 0.04);
 94 |             }
 95 |              
 96 |             &::-webkit-scrollbar-thumb {
 97 |                 border-radius: 9px;
 98 |                 background: @emphasis-color-dark;
 99 |                 width: 9px;
100 |             }
101 | 
102 |             & > .content {
103 |                 padding: 40px 80px 20px 80px;
104 |                 max-width: 800px;
105 |                 margin: 0 auto;
106 |                 width: 100%;
107 |             }
108 |         }
109 |     }
110 | 
111 |     .close-button {
112 |         position: absolute;
113 |         left: 20px;
114 |         font-size: 30px;
115 |         color: #666;
116 |         cursor: pointer;
117 |     }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/app/styles/user-detail.less:
--------------------------------------------------------------------------------
 1 | .user-detail {
 2 |     padding-left: 80px;
 3 |     .top {
 4 |         display: flex;
 5 |         .avatar {
 6 |             flex: 0 0 68px;
 7 |             margin-right: 15px;
 8 |             position: relative;
 9 |             img {
10 |                 border-radius: 100%;
11 |                 width: 100%;
12 |             }
13 |             .follow, .following {
14 |                 width: 68px;
15 |                 height: 68px;
16 |                 background-color: #4fb547;
17 |                 background-image: url(../img/icon-check.png);
18 |                 margin-left: -78px;
19 |                 background-repeat: no-repeat;
20 |                 border-radius: 100%;
21 |                 background-position: 50%;
22 |                 position: absolute;
23 |                 cursor: pointer;
24 |                 left: 0;
25 |                 top: 0;
26 |                 &.follow {
27 |                     background-color: #ffffff;
28 |                     box-shadow: inset 0 0 0 2px #C8C8C8;
29 |                     background-image: url(../img/icon-check-border.png);
30 |                     &:hover {
31 |                         box-shadow: inset 0 0 0;
32 |                         background-color: #4fb547;
33 |                         background-image: url(../img/icon-check.png);
34 |                         &:after {
35 |                             content: "Follow";
36 |                             color: #4fb547;
37 |                         }
38 |                     }
39 |                 }
40 |                 &.loading {
41 |                     -webkit-mask: url(../svg/oval.svg);
42 |                     background-color: #87CDD3 !important;
43 |                     background-image: none !important;
44 |                 }
45 |                 &:hover {
46 |                     background-color: #e22f2f;
47 |                     background-image: url(../img/icon-cross.png);
48 |                     &:after {
49 |                         content: "Unfollow";
50 |                         margin-top: 78px;
51 |                         text-align: center;
52 |                         display: block;
53 |                         color: #e22f2f;
54 |                     }
55 |                 }
56 |             }
57 |         }
58 |         .user-info {
59 |             flex: 1;
60 |             h2 {
61 |                 .fullname {
62 |                     color: #999999;
63 |                     font-weight: normal;
64 |                 }
65 |             }
66 |             .stats {
67 |                 font-family: Georgia;
68 |                 color: #aeaeae;
69 |                 margin-top: 10px;
70 |                 font-size: 20px;
71 |                 line-height: 26px;
72 |             }
73 |             .about {
74 |                 font-family: Georgia;
75 |                 margin-top: 10px;
76 |                 font-size: 20px;
77 |                 line-height: 26px;
78 |                 color: #666;
79 |                 .location {
80 |                     font-style: italic;
81 |                 }
82 |             }
83 |         }
84 |     }
85 |     .posts {
86 |         margin-left: 82px;
87 |         margin-top: 15px;
88 |     }
89 |     .load-animation {
90 |         margin-left: 82px;
91 |     }
92 | }
93 | 


--------------------------------------------------------------------------------
/src/app/styles/main.less:
--------------------------------------------------------------------------------
  1 | @foreground-color: #FDFDFD;
  2 | @background-color: #F4F4F4;
  3 | @emphasis-color: #80A8CC;
  4 | @emphasis-color-dark: #7B7B7B;
  5 | 
  6 | @import "reset.less";
  7 | @import "fonts.less";
  8 | @import "common.less";
  9 | @import "form.less";
 10 | @import "layout.less";
 11 | @import "overlay.less";
 12 | @import "popup.less";
 13 | @import "accounts-overlay.less";
 14 | @import "main-menu.less";
 15 | @import "section-context.less";
 16 | @import "section-content.less";
 17 | @import "section-preview.less";
 18 | @import "start.less";
 19 | @import "status.less";
 20 | @import "settings.less";
 21 | @import "posts.less";
 22 | @import "feed.less";
 23 | @import "post-detail.less";
 24 | @import "context-feed.less";
 25 | //@import "context-user.less";
 26 | @import "user-detail.less";
 27 | @import "preview-post.less";
 28 | @import "following.less";
 29 | 
 30 | .notyetimplemented {
 31 |     width: 400px;
 32 |     display: flex;
 33 |     align-items: center;
 34 |     justify-content: center;
 35 |     flex-direction: column;
 36 |     text-align: center;
 37 |     width: 100%;
 38 |     height: calc(~"100% - 40px");
 39 |     margin-top: 100px;
 40 | 
 41 |     h2 { margin-bottom: 25px }
 42 | }
 43 | 
 44 | #window-controls {
 45 |     -webkit-app-region: no-drag;
 46 |     position: fixed;
 47 |     right: 3px;
 48 |     width: 100px;
 49 |     display: flex;
 50 |     z-index: 9;
 51 |     top: 0;
 52 |     div {
 53 |         -webkit-app-region: no-drag;
 54 |         height: 40px;
 55 |         margin-right: 3px;
 56 |         cursor: pointer;
 57 |         position: relative;
 58 |         z-index: 10;
 59 |         color: #8d8d8d;
 60 |         text-align: center;
 61 |         line-height: 40px;
 62 |         flex-grow: 1;
 63 |         vertical-align: middle;
 64 |         &:hover {
 65 |             color: #666;
 66 |         }
 67 |         &.window-close {
 68 |             font-size: 33px;
 69 |             width: 0;
 70 |             font-weight: lighter;
 71 |         }
 72 |         &.window-minimize  {
 73 |             &:hover span {
 74 |                 background-color: #666;
 75 |             }
 76 |             span {
 77 |                 height: 2px;
 78 |                 width: 55%;
 79 |                 background-color: #8d8d8d;
 80 |                 display: inline-block;
 81 |                 position: absolute;
 82 |                 bottom: 11px;
 83 |                 left: 22.5%;
 84 |             }
 85 |         }
 86 |         &.window-scale {
 87 |             &:hover {
 88 |                 span {
 89 |                     border-color: #666;
 90 |                     &:nth-child(2) {
 91 |                         border-top: 1px solid #666;
 92 |                     }
 93 |                 }
 94 |             }
 95 |             span {
 96 |                 width: 12px;
 97 |                 height: 11px;
 98 |                 border: 1px solid #8d8d8d;
 99 |                 border-top: 2px solid #8d8d8d;
100 |                 display: inline-block;
101 |                 position: absolute;
102 |                 bottom: 11px;
103 |                 left: 7px;
104 |                 background-color: #C9E9EC;
105 |                 z-index: 1;
106 |                 &:nth-child(2) {
107 |                     background-color: transparent;
108 |                     bottom: 15px;
109 |                     left: 10px;
110 |                     z-index: 0;
111 |                     border-left: 0;
112 |                     border-bottom: 0;
113 |                     border-top: 1px solid #8d8d8d;
114 |                 }
115 |             }
116 |         }
117 |     }
118 | }
119 | 


--------------------------------------------------------------------------------
/src/app/styles/preview-post.less:
--------------------------------------------------------------------------------
  1 | #preview-section .post-preview {
  2 |     .title {
  3 |         height: 20px;
  4 |         padding: 10px;
  5 |         border-bottom: 1px solid #DADADA;
  6 |         color: #737373;
  7 |         div {
  8 |             float: left;
  9 |             width: 22px;
 10 |             text-align: center;
 11 |             margin: -10px 0 -10px -10px;
 12 |             padding: 10px;
 13 |             border-right: 1px solid #DADADA;
 14 |             height: 20px;
 15 |             margin-right: 10px;
 16 |             cursor: pointer;
 17 |             &:hover {
 18 |                 font-weight: bold;
 19 |             }
 20 |         }
 21 |     }
 22 |     .posts {
 23 |         margin: 0 20px;
 24 |         .post {
 25 |             padding: 10px 0;
 26 |             .left {
 27 |                 flex-basis: 36px;
 28 |                 img {
 29 |                     width: 40px;
 30 |                     height: 40px;
 31 |                 }
 32 |             }
 33 |             .right {
 34 |                 & > .username {
 35 |                     font-size: 14px;
 36 |                 }
 37 |                 .date {
 38 |                     top: 14px;
 39 |                     right: 0;
 40 |                     font-size: 12px;
 41 |                 }
 42 |                 p {
 43 |                     font-size: 13px;
 44 |                 }
 45 |             }
 46 |             .actions {
 47 |                 display: none;
 48 |                 &:hover {
 49 |                     display: none;
 50 |                 }
 51 |             }
 52 |         }
 53 |     }
 54 |     .middle .posts {
 55 |           border-top: 1px solid #DADADA;
 56 |   border-bottom: 1px solid #DADADA;
 57 |         .post.main {
 58 |               margin: 0 20px;
 59 |         }
 60 |         .right {
 61 |             & > .username {
 62 |                 font-size: 16px;
 63 |             }
 64 |             p {
 65 |                 font-size: 15px;
 66 |                 line-height: 22px;
 67 |             }
 68 |             .date {
 69 |                 font-size: 14px;
 70 |                 top: 11px;
 71 |             }
 72 |         }
 73 |         .preview-actions {
 74 |             color: #999;
 75 |             border-top: 1px solid rgba(218, 218, 218, 0.49);
 76 |             padding: 10px 10px;
 77 |             vertical-align: middle;
 78 |             line-height: 24px;
 79 |             .love, .retwist {
 80 |                 display: inline-block;
 81 |                 vertical-align: middle;
 82 |             }
 83 |             .retwist {
 84 |                 -webkit-mask: url(../svg/retwist.svg);
 85 |                 background-color: #61c26a;
 86 |                 width: 19px;
 87 |                 height: 19px;
 88 |             }
 89 |             .love {
 90 |                 -webkit-mask: url(../svg/love.svg);
 91 |                 background-color: #f14d4d;
 92 |                 width: 24px;
 93 |                 height: 24px;
 94 |             }
 95 |             .reply {
 96 |                 color: #80A8CC;
 97 |                 float: right;
 98 |             }
 99 |         }
100 |     }
101 |     .top .posts, .bottom .posts {
102 |         overflow: hidden;
103 |         margin: 0 10px;
104 |         border-left: 3px solid #6992B8;
105 |         padding: 0 10px;
106 |         display: inline-block;
107 |     }
108 |     .top .posts {
109 |         margin-top: 10px;
110 |     }
111 |     .bottom .posts {
112 |         margin-bottom: 10px;
113 |     }
114 |     .footer {
115 |         div {
116 |             padding: 20px;
117 |             button {
118 |                 width: 100%;
119 |             }
120 |         }
121 |     }
122 | }
123 | 


--------------------------------------------------------------------------------
/src/app/svg/settings.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 2 | <svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
 3 |   <g id="settings-toolkit">
 4 |     <g id="Expanded">
 5 |       <g>
 6 |         <g>
 7 |           <path  d="M6.551,31.998L6.551,31.998c-0.885,0-1.745-0.175-2.557-0.519c-0.223-0.094-0.384-0.293-0.431-0.53
 8 | 				c-0.046-0.237,0.029-0.481,0.199-0.652l2.571-2.57V25.67H4.276l-2.57,2.569c-0.171,0.171-0.415,0.247-0.653,0.199
 9 | 				c-0.237-0.046-0.436-0.207-0.53-0.431c-1.045-2.469-0.497-5.286,1.396-7.179c1.234-1.236,2.876-1.916,4.623-1.916
10 | 				c0.717,0,1.419,0.115,2.091,0.342L19.252,8.636c-0.794-2.351-0.202-4.939,1.572-6.714c1.235-1.234,2.877-1.914,4.624-1.914
11 | 				c0.885,0,1.745,0.174,2.557,0.518c0.224,0.095,0.385,0.293,0.432,0.53c0.046,0.237-0.028,0.482-0.2,0.653l-2.57,2.571v2.057
12 | 				h2.058l2.569-2.57c0.172-0.171,0.413-0.247,0.653-0.199c0.236,0.045,0.436,0.207,0.529,0.431c1.045,2.469,0.497,5.287-1.396,7.18
13 | 				c-1.233,1.234-2.876,1.914-4.622,1.914c-0.718,0-1.419-0.114-2.091-0.341L12.747,23.369c0.794,2.351,0.202,4.939-1.574,6.715
14 | 				C9.94,31.317,8.297,31.998,6.551,31.998z M5.652,30.465c0.294,0.052,0.595,0.078,0.899,0.078c1.359,0,2.635-0.528,3.595-1.487
15 | 				c1.473-1.473,1.898-3.665,1.085-5.585c-0.116-0.273-0.054-0.589,0.156-0.799L22.669,11.39c0.211-0.209,0.526-0.272,0.798-0.156
16 | 				c0.632,0.267,1.303,0.403,1.99,0.403c1.358,0,2.635-0.528,3.595-1.488c1.199-1.199,1.704-2.876,1.411-4.496l-1.926,1.925
17 | 				C28.4,7.714,28.216,7.79,28.023,7.79h-3.085c-0.4,0-0.727-0.325-0.727-0.727V3.978c0-0.193,0.076-0.377,0.213-0.514l1.924-1.923
18 | 				c-0.295-0.052-0.595-0.079-0.899-0.079c-1.358,0-2.636,0.529-3.596,1.488c-1.472,1.473-1.897,3.665-1.085,5.585
19 | 				c0.115,0.272,0.054,0.588-0.155,0.798L9.33,20.616c-0.209,0.209-0.526,0.271-0.798,0.155c-0.632-0.267-1.301-0.403-1.99-0.403
20 | 				c-1.359,0-2.635,0.528-3.595,1.489c-1.199,1.199-1.705,2.876-1.411,4.496l1.925-1.925c0.137-0.138,0.321-0.213,0.514-0.213h3.085
21 | 				c0.401,0,0.727,0.325,0.727,0.727v3.086c0,0.192-0.076,0.378-0.213,0.514L5.652,30.465z"></path>
22 |         </g>
23 |         <g>
24 |           <path  d="M29.091,31.998c-0.776,0-1.508-0.303-2.057-0.853L20.35,24.46c-0.284-0.283-0.284-0.744,0-1.028
25 | 				l3.085-3.084c0.283-0.284,0.744-0.284,1.028,0l6.685,6.685c0.55,0.549,0.853,1.28,0.853,2.057c0,0.777-0.304,1.509-0.853,2.058
26 | 				S29.868,31.998,29.091,31.998z M21.894,23.946l6.169,6.171c0.549,0.549,1.507,0.55,2.057,0c0.275-0.274,0.426-0.64,0.426-1.028
27 | 				s-0.15-0.754-0.425-1.028l-6.17-6.171L21.894,23.946z"></path>
28 |         </g>
29 |         <g>
30 |           <rect x="4.155" y="9.292" transform="matrix(-0.7071 -0.7071 0.7071 -0.7071 10.024 24.1904)"  width="11.734" height="1.454"></rect>
31 |         </g>
32 |         <g>
33 |           <path  d="M19.321,26.217c-0.187,0-0.373-0.071-0.515-0.213c-0.284-0.284-0.284-0.744,0-1.028l6.17-6.171
34 | 				c0.284-0.284,0.744-0.284,1.028,0c0.284,0.285,0.284,0.744,0,1.028l-6.17,6.171C19.693,26.146,19.507,26.217,19.321,26.217z"></path>
35 |         </g>
36 |         <g>
37 |           <path  d="M4.845,7.626c-0.187,0-0.373-0.071-0.514-0.213L0.217,3.3C0.081,3.164,0.004,2.979,0.004,2.786
38 | 				c0-0.194,0.076-0.378,0.213-0.514l2.057-2.057c0.285-0.285,0.744-0.285,1.028,0l4.113,4.114C7.552,4.466,7.628,4.65,7.628,4.843
39 | 				c0,0.193-0.076,0.378-0.213,0.514L5.359,7.414C5.217,7.556,5.031,7.626,4.845,7.626z M1.76,2.786l3.085,3.085l1.028-1.028
40 | 				L2.788,1.758L1.76,2.786z"></path>
41 |         </g>
42 |         <g>
43 |           <rect x="16.151" y="19.195" transform="matrix(-0.7072 -0.707 0.707 -0.7072 19.9308 48.0993)"  width="7.55" height="1.454"></rect>
44 |         </g>
45 |       </g>
46 |     </g>
47 |   </g>
48 | </svg>
49 | 


--------------------------------------------------------------------------------
/src/app/router.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var Backbone = require("backbone"),
  5 |     $ = require("jquery"),
  6 |     _ = require("underscore"),
  7 |     app = require("./app"),
  8 |     UserModel = require("./models/User"),
  9 |     UserContentView = require("./views/UserContent"),
 10 |     UserContextView = require("./views/UserContext"),
 11 |     PostContentView = require("./views/PostContent"),
 12 |     FeedView = require("./views/Feed"),
 13 |     FeedContentView = require("./views/FeedContent"),
 14 |     FeedContextView = require("./views/FeedContext"),
 15 |     StartView = require("./views/Start"),
 16 |     StatusView = require("./views/Status"),
 17 |     LoginView = require("./views/LoginOverlay"),
 18 |     AccountsView = require("./views/AccountsOverlay"),
 19 |     CreateAccountView = require("./views/CreateAccount"),
 20 |     SettingsView = require("./views/Settings"),
 21 |     NotYetImplementedView = require("./views/NotYetImplemented");
 22 | 
 23 | Backbone.$ = $;
 24 | 
 25 | // Defining the application router.
 26 | module.exports = Backbone.Router.extend({
 27 | 
 28 |     load: function (url) {
 29 |         Backbone.history.loadUrl(url);
 30 |     },
 31 | 
 32 |     routes: {
 33 |         "index.html": "index",
 34 |         "start": "start",
 35 |         "login": "login",
 36 |         "choose-account": "chooseAccount",
 37 |         "account/create": "createAccount",
 38 |         "user/:user": "user",
 39 |         "user/:user/following": "following",
 40 |         "user/:user/posts/:post": "postDetail",
 41 |         "feed": "feed",
 42 |         "status": "status",
 43 |         "mentions": "mentions",
 44 |         "messages": "notYetImplemented",
 45 |         "tags": "notYetImplemented",
 46 |         "tags/:tag": "notYetImplemented",
 47 |         "settings": "settings",
 48 |         "logout": "notYetImplemented"
 49 |     },
 50 | 
 51 |     index: function() {
 52 |         app.router.navigate("start", {trigger: true});
 53 |     },
 54 | 
 55 |     start: function () {
 56 |        app.mainView.showOverlay(StartView, {starting: true});
 57 |     },
 58 | 
 59 |     login: function () {
 60 |        app.mainView.showOverlay(LoginView);
 61 |     },
 62 | 
 63 |     createAccount: function () {
 64 |        app.mainView.showOverlay(CreateAccountView);
 65 |     },
 66 | 
 67 |     chooseAccount: function () {
 68 |        app.mainView.showOverlay(AccountsView);
 69 |     },
 70 | 
 71 |     user: function (u) {
 72 |         var user = new UserModel({username: u});
 73 |         app.dispatcher.trigger('open-user-profile', {
 74 |             user: user
 75 |         });
 76 |     },
 77 | 
 78 |     following: function (u) {
 79 |         var user = new UserModel({username: u});
 80 |         app.dispatcher.trigger('open-following', {
 81 |             user: user
 82 |         });
 83 |     },
 84 | 
 85 |     feed: function () {
 86 |         if (this.contentView) {
 87 |             this.contentView.remove();
 88 |         }
 89 |         $("#main-content").append('<div />');
 90 |         this.contentView = new FeedView({ el: $("#main-content").children().last() });
 91 |     },
 92 | 
 93 |     settings: function () {
 94 |         if (this.contentView) {
 95 |             this.contentView.remove();
 96 |         }
 97 |         $("#main-content").append('<div />');
 98 |         this.contentView = new SettingsView({ el: $("#main-content").children().last()});
 99 |     },
100 | 
101 |     status: function () {
102 |         app.mainView.showSlideOverlay(StatusView);
103 |     },
104 | 
105 |     mentions: function () {
106 |         app.dispatcher.trigger('open-mentions');
107 |     },
108 | 
109 |     notYetImplemented: function () {
110 |         if (this.contentView) {
111 |             this.contentView.remove();
112 |         }
113 |         $("#main-content").append('<div />');
114 |         this.contentView = new NotYetImplementedView({ el: $("#main-content").children().last()});
115 |     }
116 | });
117 | 


--------------------------------------------------------------------------------
/src/app/views/Mentions.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     postsContentTemplate = _.template(require("../templates/mentions.html")),
  9 |     postTemplate = _.template(require("../templates/post.html")),
 10 |     PostModel = require("../models/Post"),
 11 |     UserModel = require("../models/User"),
 12 |     FeedModel = require("../models/Feed"),
 13 |     PostPreview = require("../views/PostPreview"),
 14 |     Twister = require("../Twister"),
 15 |     async = require("async");
 16 | 
 17 | Backbone.$ = $;
 18 | 
 19 | module.exports = Backbone.View.extend({
 20 | 
 21 |     isLoading: false,
 22 |     feed: null,
 23 |     $posts: null,
 24 |     $loader: null,
 25 | 
 26 |     events: {
 27 |         "click .post .icon": "openPost",
 28 |         "click .post": "openPost"
 29 |     },
 30 | 
 31 |     initialize: function(options) {
 32 |         var self = this;
 33 |         this.options = options;
 34 |         this.render();
 35 | 
 36 |         this.feed = new FeedModel();
 37 |         this.feed.get('users').add(app.user);
 38 |         this.feed.get('posts').on('add', function (post, posts, info) {
 39 |             self.$posts.append(postTemplate({post: post, icon: true}));
 40 |         });
 41 | 
 42 |         this.fetchMentions();
 43 | 
 44 |         $("#main-scrollable").scrollTop(0);
 45 |     },
 46 | 
 47 |     fetchMentions: function () {
 48 |         if (this.isLoading) return;
 49 |         var self = this;
 50 | 
 51 |         this.feed.fetchMentions(10, null, function (err, mentions) {
 52 |             if (err) return console.error('Error fetching posts in feed:', err);
 53 | 
 54 |             // View is removed while posts where fetched
 55 |             if (!self) return;
 56 | 
 57 |             self.$loader.hide();
 58 | 
 59 |             // Fetch avatars of users of which we don't have one yet
 60 |             self.feed.fetchAvatars(function (err, user, postsToSetAvatar) {
 61 |                 if (!user.get('avatar')) {
 62 |                     return;
 63 |                 }
 64 |                 _.each(postsToSetAvatar, function (post) {
 65 |                     self.$posts.find('.post[data-id=' + post.id + '] img[data-username='+user.get('username')+']').attr('src', user.get('avatar'));
 66 |                 });
 67 |             });
 68 | 
 69 |             window.localStorage[app.user.get('username') + '_lastMention'] = mentions[0].get('time');
 70 |             app.dispatcher.trigger('mentions-seen');
 71 | 
 72 |             // Allowed to load the next page
 73 |             self.isLoading = false;
 74 |         });
 75 |     },
 76 | 
 77 |     openPost: function (e) {
 78 |         // Don't do anything if a link is clicked
 79 |         if ($(e.target).is('a') || $(e.target).is('img')) {
 80 |             return;
 81 |         }
 82 | 
 83 |         var $post;
 84 |         if ($(e.currentTarget).hasClass('post')) {
 85 |             $post = $(e.currentTarget);
 86 |         } else {
 87 |             $post = $(e.currentTarget).parents('.post');
 88 |         }
 89 |         var id = $post.attr('data-id');
 90 |         var post = this.feed.get('posts').get(id);
 91 | 
 92 |         // Couldn't find the post, might be a fake post or something went wrong
 93 |         // anyway, abort mission
 94 |         if (!post) return;
 95 | 
 96 |         e.stopImmediatePropagation();
 97 |         e.preventDefault();
 98 | 
 99 |         // Show original twist, not the retwist itself
100 |         if (post.get('retwist')) {
101 |             post = post.get('retwist');
102 |         }
103 | 
104 |         app.dispatcher.trigger('open-post-detail', {
105 |             post: post,
106 |             feed: this.feed
107 |         });
108 |     },
109 | 
110 |     render: function() {
111 |         this.$el.html(postsContentTemplate());
112 |         this.$loader = this.$el.find('.load-animation');
113 |         this.$posts = this.$el.find('.posts');
114 |         return this;
115 |     }
116 | });
117 | 


--------------------------------------------------------------------------------
/src/app/templates/status.html:
--------------------------------------------------------------------------------
 1 | <div id="status-page">
 2 |     <h2>Status</h2>
 3 | 
 4 |     <% if (info) { %>
 5 |     <h3 class="version">Twister version <%= info.getVersion() %></h2>
 6 |     <div class="grid">
 7 |         <div>
 8 |             <div>
 9 |                 <h3>Connection</h3>
10 |                 <div class="table">
11 |                     <div>
12 |                         <div>Connection <span tooltip="The amount of direct connections to other users. More connection means a faster experience. Currently there are <%= info.get('connections') %> connections." class="icon-info">i</span></div>
13 |                         <div class="healthbar <%= info.getConnectionLevel() %>">
14 |                             <div></div>
15 |                             <div></div>
16 |                             <div></div>
17 |                         </div>
18 |                     </div>
19 |                     <div>
20 |                         <div>DHT Connection <span tooltip="DHT is a collection of special data, like avatars and user profile information. The more DHT connection you have the faster avatars and other special data loads. Currently there are <%= info.get('dht_nodes') %> DHT connections." class="icon-info">i</span></div>
21 |                         <div class="healthbar <%= info.getDhtConnectionLevel() %>">
22 |                             <div></div>
23 |                             <div></div>
24 |                             <div></div>
25 |                         </div>
26 |                     </div>
27 |                     <div>
28 |                         <div>Online Peers <span tooltip="An indication of the amount of people online on the Twister network. Be aware that this is only an estimation." class="icon-info">i</span></div>
29 |                         <div><%= info.get('addrman_total') %></div>
30 |                     </div>
31 |                 </div>
32 |             </div>
33 |             <div>
34 |                 <h3>Data</h3>
35 |                 <div class="table">
36 |                     <div>
37 |                         <div>Download <span tooltip="The speed with which the Twister deamon is downloading data right now, and the total amount of data downloaded since Twisting was started." class="icon-info">i</span></div>
38 |                         <div><%= info.getDownloadSpeed() %> kb/s (<%= info.getTotalDownload() %> mb)</div>
39 |                     </div>
40 |                     <div>
41 |                         <div>Upload <span  tooltip="The speed with which the Twister deamon is uploading data right now, and the total amount of data uploaded since Twisting was started." class="icon-info">i</span></div>
42 |                         <div><%= info.getUploadSpeed() %> kb/s (<%= info.getTotalUpload() %> mb)</div>
43 |                     </div>
44 |                 </div>
45 |             </div>
46 |         </div>
47 |         <div>
48 |             <div>
49 |                 <h3>User Registration Blocks</h3>
50 |                 <div class="table">
51 |                     <div>
52 |                         <div>Current Block <span tooltip="The number of blocks mined since the beginning of Twister regarding Twister user registration." class="icon-info">i</span></div>
53 |                         <div><%= info.get('blocks') %></div>
54 |                     </div>
55 |                     <div>
56 |                         <div>Last Block <span tooltip="Time passed since the last block was mined. About every 30 minutes a new user registration block should be mined." class="icon-info">i</span></div>
57 |                         <div><%= info.getLastBlockFromNow() %></div>
58 |                     </div>
59 |                 </div>
60 |             </div>
61 |             <div>
62 |                 <h3>Support</h3>
63 |                 <div class="table">
64 |                     <div>
65 |                         <p>For support and connection problems, open an issue at the <a href="https://github.com/ArcoMul/Twisting/issues">Twisting Github repository</a></p>
66 |                     </div>
67 |                 </div>
68 |             </div>
69 |         </div>
70 |     </div>
71 |     <% } else { %>
72 |         <p>Loading</p>
73 |     <% } %>
74 | </div>
75 | 


--------------------------------------------------------------------------------
/src/app/views/UserContent.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     async = require("async"),
  7 |     app = require("../app"),
  8 |     _ = require("underscore"),
  9 |     postsContentTemplate = _.template(require("../templates/content-posts.html")),
 10 |     postTemplate = _.template(require("../templates/post.html")),
 11 |     PostsCollection = require("../collections/posts"),
 12 |     UserCollection = require("../collections/users"),
 13 |     PostModel = require("../models/Post"),
 14 |     UserModel = require("../models/User"),
 15 |     FeedModel = require("../models/Feed"),
 16 |     PostPreview = require("../views/PostPreview"),
 17 |     Twister = require("../Twister");
 18 | 
 19 | Backbone.$ = $;
 20 | 
 21 | module.exports = Backbone.View.extend({
 22 | 
 23 |     user: null,
 24 |     feed: null,
 25 | 
 26 |     events: {
 27 |         "click .post": "openPostDetail"
 28 |     },
 29 | 
 30 |     initialize: function(options) {
 31 |         var self = this;
 32 |         this.options = options;
 33 |         
 34 |         this.render();
 35 | 
 36 |         this.user = new UserModel({username: this.model.get('username')});
 37 | 
 38 |         this.feed = new FeedModel();
 39 |         this.feed.get('users').add(this.user);
 40 |         this.feed.get('posts').on('add', function (post) {
 41 |             this.$posts.append(postTemplate({post: post}));
 42 |         }.bind(this));
 43 | 
 44 |         Twister.getFollowing(app.user.get('username'), function (err, usernames) {
 45 |             if (usernames.indexOf(self.user.get('username')) != -1) {
 46 |                 return self.loadPosts();
 47 |             }
 48 |             self.user.set('isFollowing', false);
 49 |             self.loadPosts();
 50 |         });
 51 | 
 52 |         $("#main-scrollable").scrollTop(0);
 53 |         this.options.parent.on('scroll', this.scroll, this);
 54 |     },
 55 | 
 56 |     loadPosts: function () {
 57 |         var self = this;
 58 |         if (this.isLoading) return;
 59 |         this.isLoading = true;
 60 |         this.$loader.show();
 61 |         this.feed.fetchPosts(10, {includeMaxId: true, includeNotFollowers: [this.user]}, function (err) {
 62 | 
 63 |             self.$loader.hide();
 64 | 
 65 |             // Fetch avatars of users of which we don't have one yet
 66 |             self.feed.fetchAvatars(function (err, user, postsToSetAvatar) {
 67 |                 if (!user.get('avatar')) {
 68 |                     console.log(user.get('username'), 'does not have an avatar');
 69 |                     return;
 70 |                 }
 71 |                 _.each(postsToSetAvatar, function (post) {
 72 |                     self.$posts.find('.post[data-id=' + post.id + '] .left img').attr('src', user.get('avatar'));
 73 |                 });
 74 |             });
 75 | 
 76 |             // Allowed to load the next page
 77 |             self.isLoading = false;
 78 |         });
 79 |     },
 80 | 
 81 |     scroll: function (e) {
 82 |         var bottomOfScreen = $("#main-scrollable").height() + $("#main-scrollable").scrollTop();
 83 |         var totalHeight = $("#main-scrollable")[0].scrollHeight;
 84 | 
 85 |         if (bottomOfScreen > totalHeight - 200) {
 86 |             this.loadPosts();
 87 |         }
 88 |     },
 89 | 
 90 |     openPostDetail: function (e) {
 91 |         var id = $(e.currentTarget).attr('data-id'),
 92 |             post = this.feed.get('posts').get(id);
 93 | 
 94 |         // Show original twist, not the retwist itself
 95 |         if (post.get('retwist')) {
 96 |             post = post.get('retwist');
 97 |         }
 98 | 
 99 |         this.options.parent.openPreview(new PostPreview({post: post, feed: this.feed}));
100 |     },
101 | 
102 |     render: function() {
103 |         this.$el.html(postsContentTemplate({user: this.model}));
104 |         this.$loader = this.$el.find('.load-animation');
105 |         this.$posts = this.$el.find('.posts');
106 |         return this;
107 |     },
108 | 
109 |     remove: function () {
110 |         this.options.parent.off(null, null, this);
111 |         Backbone.View.prototype.remove.apply(this, arguments);
112 |     }
113 | });
114 | 


--------------------------------------------------------------------------------
/src/app/views/Following.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     Twister = require("../Twister"),
  9 |     PostModel = require("../models/Post"),
 10 |     FeedModel = require("../models/Feed"),
 11 |     UserModel = require("../models/User"),
 12 |     postTemplate = _.template(require("../templates/post.html")),
 13 |     followingTemplate = _.template(require("../templates/following.html"));
 14 | 
 15 | Backbone.$ = $;
 16 | 
 17 | module.exports = Backbone.View.extend({
 18 | 
 19 |     firstFollowingLoop: true,
 20 | 
 21 |     events: {
 22 |         "scroll": "scroll",
 23 |     },
 24 | 
 25 |     initialize: function(options) {
 26 |         var self = this;
 27 | 
 28 |         this.options = options;
 29 |         this.user = options.user;
 30 |         this.following = {};
 31 | 
 32 |         this.user.fetchFollowing(function (err) {
 33 |             if (err) return console.error('Error fetching following', err);
 34 |             self.user.get('following').forEach(function (u) {
 35 |                 self.following[u] = {
 36 |                     user: new UserModel({username: u})
 37 |                 };
 38 |             });
 39 |             self.loopOverFollowing(0);
 40 |             self.render();
 41 |         });
 42 | 
 43 |         self.render();
 44 | 
 45 |         this.$scrollable = this.$el.parents('.content-holder');
 46 |         this.$scrollable.scroll(function () {
 47 |             self.scroll();
 48 |         });
 49 |     },
 50 | 
 51 |     loopOverFollowing: function (index) {
 52 |         var self = this;
 53 |         var username = this.user.get('following')[index];
 54 |         if (index === this.user.get('following').length) {
 55 |             this.firstFollowingLoop = false;
 56 |             return;
 57 |         }
 58 |         Twister.getTorrentStatus(username, function (err, torrentstatus) {
 59 |             self.following[username].torrentstatus = torrentstatus;
 60 |             var yes = 0, no = 0, firstZeros = true;
 61 |             for (var i = torrentstatus.bitfield.length - 1; i >= 0; i--) {
 62 |                 if(torrentstatus.bitfield[i] === '1') {
 63 |                     firstZeros = false;
 64 |                     yes++;
 65 |                     continue;
 66 |                 }
 67 |                 if (!firstZeros) {
 68 |                     no++;
 69 |                 }
 70 |             }
 71 |             self.following[username].yes = yes;
 72 |             self.following[username].no = no;
 73 |             self.following[username].percentage = (yes === 0 && no === 0 ? 0 : Math.round(100 - (no / (yes + no) * 100)));
 74 |             self.render();
 75 |             self.loopOverFollowing(index+1);
 76 | 
 77 |             self.following[username].user.fetchAvatarFromDisk(function (err) {
 78 |                 if (!self.following[username].user.get('avatar')) return;
 79 |                 console.log('set avatar', username, self.following[username].user.get('avatar'));
 80 |                 self.$el.find('img[data-username=' + username + ']').attr('src', self.following[username].user.get('avatar'));
 81 |             });
 82 |         });
 83 |     },
 84 | 
 85 |     toggleFollow: function () {
 86 |         var self = this;
 87 |         this.$followButton.addClass('loading');
 88 |         if (app.user.isFollowing(this.user.get('username'))) {
 89 |             app.user.unfollow(this.user.get('username'), function (err) {
 90 |                 if(err) return console.error('Error unfollowing user', err);
 91 |                 self.render();
 92 |             });
 93 |         } else {
 94 |             app.user.follow(this.user.get('username'), function (err) {
 95 |                 if(err) return console.error('Error following user', err);
 96 |                 self.render();
 97 |             });
 98 |         }
 99 |     },
100 | 
101 |     render: function() {
102 |         console.log('render', this.following);
103 |         this.$el.html(followingTemplate({
104 |             _: _,
105 |             user: this.user,
106 |             following: this.following
107 |         }));
108 |         return this;
109 |     }
110 | });
111 | 


--------------------------------------------------------------------------------
/src/app/views/PostPreview.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     Twister = require("../Twister"),
  9 |     PostModel = require("../models/Post"),
 10 |     postTemplate = _.template(require("../templates/post.html")),
 11 |     postPreviewTemplate = _.template(require("../templates/preview-post.html"));
 12 | 
 13 | Backbone.$ = $;
 14 | 
 15 | module.exports = Backbone.View.extend({
 16 | 
 17 |     events: {
 18 |         "click button": "openPost"
 19 |     },
 20 | 
 21 |     initialize: function(options) {
 22 |         var self = this;
 23 | 
 24 |         this.options = options;
 25 |         this.post = options.post;
 26 | 
 27 |         if (this.post.get('reply')) {
 28 |             this.addParentPost(options.post);
 29 |         }
 30 | 
 31 |         Twister.getReplies(this.post.get('user').get('username'), this.post.get('twister_id'), function (err, replies) {
 32 |             if (err) return console.error('Error fetching replies', err);
 33 |             if (!replies || replies.length == 0) return;
 34 | 
 35 |             var posts = [];
 36 |             _.each(replies, function (reply) {
 37 |                 posts.push(new PostModel().parse(reply.p.v, options.feed.get('users')));
 38 |             });
 39 |             posts = posts.reverse();
 40 |             self.post.set('replies', posts);
 41 |             self.render();
 42 |         });
 43 |     },
 44 | 
 45 |     addParentPost: function (post) {
 46 |         var self = this;
 47 |         Twister.getPost(post.get('reply').username, post.get('reply').twister_id, function (err, parentPost) {
 48 |             if (err) return console.error('Error getting parent post', err);
 49 | 
 50 |             // Found a parent post
 51 |             parentPost = new PostModel().parse(parentPost[0].p.v, self.options.feed.get('users'));
 52 | 
 53 |             // Tell the parent post the original post is a reply
 54 |             parentPost.set('replies', [post]);
 55 | 
 56 |             // Tell the original post its parent
 57 |             post.set('parent', parentPost);
 58 | 
 59 |             self.render();
 60 | 
 61 |             // Maybe the parent post also has a parent post
 62 |             if (parentPost.get('reply')) {
 63 |                 self.addParentPost(parentPost);
 64 |             }
 65 |         });
 66 |     },
 67 | 
 68 |     openPost: function () {
 69 |         console.log('openPost');
 70 |         app.router.navigate('/users/' + this.post.get('user').get('username') + '/posts/' + this.post.get('twister_id'), {testtest: 123});
 71 |         app.router.postDetail(
 72 |             this.post.get('user'),
 73 |             this.post);
 74 |     },
 75 | 
 76 |     render: function() {
 77 |         this.$el.html(postPreviewTemplate({
 78 |             postTemplate: postTemplate,
 79 |             post: this.post
 80 |         }));
 81 |         var $title = this.$el.find('.title');
 82 |         var $top = this.$el.find('.top');
 83 |         var $middle = this.$el.find('.middle');
 84 |         var $bottom = this.$el.find('.bottom');
 85 |         var $footer = this.$el.find('.footer');
 86 |         var dynamicHeight = this.$el.height() - $title.height() - $middle.height() - $footer.height();
 87 |         this.$el.height($("#main-scrollable").height());
 88 |         var tooManyParents = false,
 89 |             tooManyReplies = false;
 90 |         if ($top.height() > dynamicHeight / 2) {
 91 |             tooManyParents = true;
 92 |         }
 93 |         if ($bottom.height() > dynamicHeight / 2) {
 94 |             tooManyReplies = true;
 95 |         }
 96 | 
 97 |         if (tooManyParents && tooManyReplies) {
 98 |             $top.height(dynamicHeight / 2);
 99 |             $bottom.height(dynamicHeight / 2);
100 |         } else if (tooManyParents && !tooManyReplies) {
101 |             $top.height(dynamicHeight - $bottom.height());
102 |         } else if (!tooManyParents && tooManyReplies) {
103 |             $bottom.height(dynamicHeight - $top.height());
104 |         }
105 | 
106 |         if (!tooManyParents && !tooManyReplies) {
107 |             $footer.hide();
108 |         }
109 | 
110 |         $top.children().children().first().css('marginTop', -$top[0].scrollHeight + $top.height());
111 |         console.log($top, $top.children().first(), -$top[0].scrollHeight + $top.height(), $top[0].scrollHeight, $top.height());
112 |         return this;
113 |     }
114 | });
115 | 


--------------------------------------------------------------------------------
/src/app/styles/status.less:
--------------------------------------------------------------------------------
  1 | #status-page {
  2 |     h2 {
  3 |         text-align: center;
  4 |     }
  5 |     h3.version {
  6 |         text-align: center;
  7 |         font-family: Georgia;
  8 |         color: #999;
  9 |         font-weight: normal;
 10 |         font-size: 19px;
 11 |     }
 12 | 
 13 |     .icon-info {
 14 |         width: 16px;
 15 |         height: 16px;
 16 |         border-radius: 16px;
 17 |         background-color: #CFCFCF;
 18 |         display: inline-block;
 19 |         color: #fff;
 20 |         font-family: Georgia;
 21 |         font-size: 15px;
 22 |         text-align: center;
 23 |         padding: 0;
 24 |         line-height: 17px;
 25 |         font-weight: bold;
 26 |         position: relative;
 27 |         cursor: default;
 28 |         &:hover:after {
 29 |             background: rgba(0, 0, 0, 0.8);
 30 |             border-radius: .5em;
 31 |             bottom: 21px;
 32 |             color: #fff;
 33 |             content: attr(tooltip);
 34 |             display: block;
 35 |             left: -12px;
 36 |             padding: 10px 15px;
 37 |             position: absolute;
 38 |             text-shadow: 0 1px 0 #000;
 39 |             z-index: 98;
 40 |             width: 300px;
 41 |             text-align: left;
 42 |             font-family: 'Open Sans';
 43 |             font-weight: normal;
 44 |             font-size: 14px;
 45 |             line-height: 18px;
 46 |         }
 47 |         &:hover:before {
 48 |             border: solid;
 49 |             border-color: rgba(0, 0, 0, 0.8) transparent;
 50 |             border-width: .4em .4em 0 .4em;
 51 |             bottom: 1em;
 52 |             content: "";
 53 |             display: block;
 54 |             left: 2px;
 55 |             position: absolute;
 56 |             z-index: 99;
 57 |         }
 58 |     }
 59 | 
 60 |     .grid {
 61 |         & > div {
 62 |             display: flex;
 63 |             padding-top: 40px;
 64 |             & > div {
 65 |                 flex: 1 0 0;
 66 |                 padding: 0 20px;
 67 |                 &:first-child {
 68 |                     border-right: 1px solid #ddd;
 69 |                 }
 70 |                 h3 {
 71 |                     text-align: center;
 72 |                     font-size: 24px;
 73 |                     font-weight: normal;
 74 |                     padding-bottom: 20px;
 75 |                     color: #666;
 76 |                 }
 77 |             }
 78 |         }  
 79 |     }
 80 | 
 81 |     .table {
 82 |         & > div {
 83 |             display: flex;
 84 |             & > div {
 85 |                 flex: 1 0 0;
 86 |                 font-family: Georgia;
 87 |                 font-size: 20px;
 88 |                 line-height: 40px;
 89 |                 color: #666;
 90 |                 &:first-child {
 91 |                     text-align: right;
 92 |                     padding-right: 15px;
 93 |                 }
 94 |                 &:last-child {
 95 |                     padding-left: 15px;
 96 |                 }
 97 |             }
 98 |             p {
 99 |                 font-family: Georgia;
100 |                 font-size: 19px;
101 |                 color: #666;
102 |                 line-height: 26px;
103 |                 padding: 0 15px;
104 |                 a { 
105 |                     color: #333;
106 |                     text-decoration: none;
107 |                     &:hover {
108 |                         text-decoration: underline;
109 |                     }
110 |                 }
111 |             }
112 |         }
113 |     }
114 | 
115 |     .healthbar {
116 |         display: flex;
117 |         div {
118 |             width: 30%;
119 |             margin: 1%;
120 |             height: 20px;
121 |             margin-top: 11px;
122 |             &:nth-child(1) {
123 |                 border-radius: 20px 0 0 20px;
124 |             }
125 |             &:nth-child(3) {
126 |                 border-radius: 0 20px 20px 0;
127 |             }
128 |         }
129 |         &.bad {
130 |             divnth-child(1) { background-color: #F07777; }
131 |             div:nth-child(2) { background-color: #DDD; }
132 |             div:nth-child(3) { background-color: #DDD; }
133 |         }
134 |         &.neutral {
135 |             div:nth-child(1) { background-color: #F0D85E; }
136 |             div:nth-child(2) { background-color: #F0D85E; }
137 |             div:nth-child(3) { background-color: #DDD; }
138 |         }
139 |         &.good {
140 |             div:nth-child(1) { background-color: #82E782; }
141 |             div:nth-child(2) { background-color: #82E782; }
142 |             div:nth-child(3) { background-color: #82E782; }
143 |         }
144 |     }
145 | }
146 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | Twisting (alpha)
  2 | ==============
  3 | 
  4 | Intro
  5 | -----
  6 | 
  7 | **What is Twisting?**  
  8 | Twisting is a *Twister* client
  9 | 
 10 | **What is Twister?**  
 11 | Twister is a *peer to peer microblogging platform*
 12 | 
 13 | **What is a peer to peer microblogging platform?**  
 14 | It's like *Twitter* without a website, Twists (Tweets) are getting downloaded directly from your friends.
 15 | 
 16 | Status
 17 | ------
 18 | 
 19 | Be aware that Twisting is in Alpha. All the claims being made on this page are still in development. Although the maintainer is confident enough to put it up here, using Twisting is on your own risk.
 20 | 
 21 | Motivation
 22 | ----------
 23 | 
 24 | There are already several good Twister clients. Twisting hopes to improve on those clients with the follow goals:
 25 | 
 26 | - Offer a smooth installation and startup experience. The goal is that every Twitter (or other microblogging user) can use the software. This means that during installation and starting Twisting the user should not be confused with technical messages, having to compile the code, or do other technical things. 
 27 | - Organized codebase, based on recent web technologies. The main Twister client is written in pure HTML/CSS/Javascript, which is fine, but it is hard to maintain and even harder for newcomers to get into the codebase. By using npm/grunt modules, and Backbone as framework the code should be more easy to understand.
 28 | - Have fun developing something new ;-D Yes, I admit that this is the main reason I started working on Twisting
 29 | 
 30 | Missing features
 31 | ----------------
 32 | 
 33 | - Private messages
 34 | - 'Favouriting/loving' posts
 35 | - Connecting over VPN / Tor
 36 | - Changing settings of Twisterd
 37 | 
 38 | Screenshots
 39 | -----------
 40 | 
 41 | ![Feed](https://dl.dropboxusercontent.com/u/1146818/Twister/Screenshots/feed3.png)
 42 | *Feed*
 43 | 
 44 | ![Profile](https://dl.dropboxusercontent.com/u/1146818/Twister/Screenshots/profile3.png)
 45 | *Profile*
 46 | 
 47 | ![Conversation](https://dl.dropboxusercontent.com/u/1146818/Twister/Screenshots/conversation1.png)
 48 | *Conversation*
 49 | 
 50 | ![Status](https://dl.dropboxusercontent.com/u/1146818/Twister/Screenshots/status1.png)
 51 | *(Network) status*
 52 | 
 53 | Technology
 54 | ----------
 55 | 
 56 | **NodeWebkit / nw.js** The application is a web application integrated with nw.js. In the codebase the server-client model of nw.js is highly used, so the application won't run in a browser without a lot of modifications, it makes the code better to read though. Nw.js is chosen because of its fast development speed and web development is the most known technology, and thus is more open for contributors.
 57 | 
 58 | **Backbone** The architecture is based on Backbone Views / Models / Collections. Backbone is one of the most known Javascript frameworks.
 59 | 
 60 | **Less** CSS gets generated by the use of Less. Switching to SASS is in the planning, because of it being more famous at the moment.
 61 | 
 62 | **Grunt** Grunt is used to build shippable executables and do other compile related tasks.
 63 | 
 64 | Installation
 65 | ------------
 66 | 
 67 | Installation will be possible from on the first Beta release. For now it is only possible to run Twisting by installing from source.
 68 | 
 69 | Development setup
 70 | -----------------
 71 | 
 72 | **Warning:** this installation is still work in progress! There is no guarantee this works for everybody.
 73 | 
 74 | - Make sure you have NodeJS/IO.js, NPM and Git installed
 75 | - Download the repository using git
 76 | - Run `$ npm install` in the Twisting folder
 77 | - Grunt will be installed and start running some tasks
 78 | - Download [this zip file](https://dl.dropboxusercontent.com/u/1146818/Twister/twisting-twister-data.zip "Twisting Twister Data") with a Twister Windows and Linux build, or use your own
 79 | - Unpack the zip file and put the contents in the <repo>/twister-data folder; so that the folder structure looks like this:
 80 |     - \<repo root>
 81 |         - twister-data
 82 |             - linux64
 83 |                 - twister-data
 84 |                     - twisterd
 85 |                     - data/
 86 |                         - twister.conf
 87 |                     - avatars/
 88 |             - win64
 89 |                 - twister-data
 90 |                     - twisterd.exe
 91 |                     - \<other DLL files>
 92 |                     - data/
 93 |                         - twister.conf
 94 |                     - avatars/
 95 | - See next steps at **Development**
 96 | 
 97 | Development 
 98 | -----------
 99 | 
100 | The following targets are possible at the moment: `win64`, `linux64`
101 | 
102 | - `$ npm run-script build` builds all targets (`win64`, `linux64`)
103 | - `$ npm --target=<target> run-script build` builds for a specific target, for example: `$ npm --target=linux64 run-script build`
104 | 


--------------------------------------------------------------------------------
/src/app/models/Feed.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery");
  5 | var _ = require("underscore");
  6 | var Backbone = require("backbone");
  7 | var async = require("async");
  8 | var Twister = require("../Twister");
  9 | var PostsCollection = require("../collections/posts");
 10 | var UserCollection = require("../collections/users");
 11 | var PostModel = require("../models/Post");
 12 | var UserModel = require("../models/User");
 13 | 
 14 | Backbone.$ = $;
 15 | 
 16 | // Defining the application router.
 17 | module.exports = Backbone.Model.extend({
 18 |     defaults: {
 19 |         users: null,
 20 |         posts: null
 21 |     },
 22 | 
 23 |     initialize: function () {
 24 |         this.set('users', new UserCollection());
 25 |         this.set('posts', new PostsCollection());
 26 |     },
 27 | 
 28 |     // Get posts
 29 |     fetchPosts: function (amount, options, callback) {
 30 | 
 31 |         options.sortDirection = options.sortDirection ? options.sortDirection : -1;
 32 | 
 33 |         // Get all the posts of the users in this feed
 34 |         this.get('users').fetchPosts(amount, options, function (err, posts) {
 35 |             if (err) return callback(err);
 36 | 
 37 |             // Sort before adding so that the 'add' events are called
 38 |             // in the right order
 39 |             posts = _.sortBy(posts, function (post) {
 40 |                 return post.get('last_time') * options.sortDirection;
 41 |             });
 42 |             this.get('posts').add(posts);
 43 | 
 44 |             callback();
 45 |         }.bind(this));
 46 |     },
 47 | 
 48 |     fetchMentions: function (amount, options, callback) {
 49 |         var self = this;
 50 |         this.get('users').fetchMentions(amount, options, function (err, mentions) {
 51 |             if (err) return callback(err);
 52 | 
 53 |             // Sort before adding so that the 'add' events are called
 54 |             // in the right order
 55 |             mentions = _.sortBy(mentions, function (post) {
 56 |                 return post.get('time') * -1;
 57 |             });
 58 |             self.get('posts').add(mentions);
 59 | 
 60 |             callback(null, mentions);
 61 |         });
 62 |     },
 63 | 
 64 |     getOrignalPostsOfUser: function (user) {
 65 |         return user.get('posts').filter(function (post) { return !post.get('retwist') });
 66 |     },
 67 | 
 68 |     getRetwistsOfUser: function (user) {
 69 |         return this.get('posts').filter(function (post) { return post.get('retwisters').indexOf(user) != -1});
 70 |     },
 71 | 
 72 |     // Get all users which don't have an avatar yet in memory. The others
 73 |     // will already be rendered on the page so don't need fetching
 74 |     fetchAvatars: function (avatarLoadedForUserCallback) {
 75 |         var self = this;
 76 | 
 77 |         // First get avatar from disk for every user
 78 |         //  then check for users which didn't have an avatar on disk
 79 |         //  for an avatar in DHT
 80 |         async.waterfall([
 81 |             function (callback) {
 82 |                 // Try to get avatars from disk
 83 |                 var usersWithoutAvatar = self.get('users').filter(function (user) { return user.get('avatar') == null && user.hasPost() });
 84 |                 async.each(usersWithoutAvatar, function (user, callback) {
 85 |                     user.fetchAvatarFromDisk(function (err) {
 86 |                         if (err) return callback(err);
 87 |                         var posts = self.getOrignalPostsOfUser(user);
 88 |                         posts = posts.concat(self.getRetwistsOfUser(user));
 89 |                         avatarLoadedForUserCallback(null, user, posts);
 90 |                         callback();
 91 |                     });
 92 |                 }, function (err) {
 93 |                     // Next waterfall item
 94 |                     callback();
 95 |                 });
 96 |             },
 97 |             function (callback) {
 98 |                 // If not fetched from disk, fetch from DHT and save to disk
 99 |                 var usersWithoutAvatar = self.get('users').filter(function (user) { return user.get('avatar') == null  && user.hasPost() });
100 |                 async.eachSeries(usersWithoutAvatar, function (user, callback) {
101 |                     user.fetchAvatar(function (err) {
102 |                         if (err) return callback(err);
103 |                         var posts = self.getOrignalPostsOfUser(user);
104 |                         posts = posts.concat(self.getRetwistsOfUser(user));
105 |                         avatarLoadedForUserCallback(null, user, posts);
106 |                         callback();
107 |                     });
108 |                 },
109 |                 function () {
110 |                     console.log('All avatars fetched for feed model');
111 |                 });
112 |             }
113 |         ]);
114 |     }
115 | });
116 | 


--------------------------------------------------------------------------------
/src/app/collections/users.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     _ = require("underscore"),
  6 |     async = require("async"),
  7 |     Backbone = require("backbone"),
  8 |     Twister = require("../Twister"),
  9 |     PostsCollection = require("../collections/posts"),
 10 |     UserModel = require("../models/User"),
 11 |     PostModel = require("../models/Post");
 12 | 
 13 | Backbone.$ = $;
 14 | 
 15 | module.exports = Backbone.Collection.extend({
 16 |     model: UserModel,
 17 | 
 18 |     /**
 19 |      * Recursive function to retrieve an amount of Twists of a user using DHT
 20 |      * All the time retrieves a Twist and then based on lastk retrieves the
 21 |      * next one
 22 |      */
 23 |     fetchPostFromDht: function (user, posts, till, callback) {
 24 |         var self = this;
 25 | 
 26 |         // If we don't know the last post of this user, get its status
 27 |         if (_.isUndefined(user.get('last_twister_id'))) {
 28 |             user.getStatus(function (err, post) {
 29 |                 var post = new PostModel().parse({userpost: post}, self);
 30 |                 posts.push(post);
 31 |                 self.fetchPostFromDht(user, posts, till, callback);
 32 |             });
 33 |             return;
 34 |         }
 35 | 
 36 |         // Get the next post
 37 |         Twister.getPostFromDht(user.get('username'), user.get('last_twister_id'), function (err, item) {
 38 |             if (!item) return callback();
 39 |             var post = new PostModel().parse(item, self);
 40 |             posts.push(post);
 41 | 
 42 |             // No more posts in DHT? Or the last post of this user?
 43 |             if (posts.length == till || user.get('last_twister_id') === 0) {
 44 |                 callback();
 45 |             } else {
 46 |                 self.fetchPostFromDht(user, posts, till, callback);
 47 |             }
 48 |         });
 49 |     },
 50 | 
 51 |     /**
 52 |      * Get a certain amount of all the users the active users doens't follow using DHT
 53 |      */
 54 |     fetchPostsFromDht: function (amount, options, callback) {
 55 |         var self = this,
 56 |             posts = [];
 57 | 
 58 |         // All the users in this collection which are NOT followed
 59 |         var notFollowing = this.filter(function (user) { return user.get('isFollowing') == false });
 60 | 
 61 |         // Loop through the users which should still be included
 62 |         // although they are not followed. Only include them
 63 |         // if they indeed are not followed
 64 |         var notFollowingFiltered = [];
 65 |         _.each(options.includeNotFollowers, function (user) {
 66 |             if (notFollowing.indexOf(user) != -1) {
 67 |                 notFollowingFiltered.push(user);
 68 |             }
 69 |         });
 70 | 
 71 |         // Loop one by one, because DHT can't handle too many calls at once
 72 |         async.eachSeries(notFollowingFiltered, function (user, callback) {
 73 |             self.fetchPostFromDht(user, posts, amount, callback);
 74 |         }, function (result) {
 75 |             callback(null, posts);
 76 |         });
 77 |     },
 78 | 
 79 |     /**
 80 |      * Gets a certain amount of posts for the users in this collection
 81 |      * options:
 82 |      *      includeNotFollowers: If posts of users we don't follow also should be retrieved using DHT
 83 |      *      includeMaxId: If the last post we have of the user should be taken in account to retrieve the rest of the posts
 84 |      *                    so that only posts after a certain point get fetched (for lazy loading purposes)
 85 |      */
 86 |     fetchPosts: function (amount, options, callback) {
 87 | 
 88 |         // Get the posts of the users we don't follow using DHT
 89 |         if (options.includeNotFollowers) {
 90 |             this.fetchPostsFromDht(amount, options, callback);
 91 |         }
 92 | 
 93 |         // Build request object array
 94 |         var users = [];
 95 |         var following = this.filter(function (user) { return user.get('isFollowing') });
 96 | 
 97 |         // Probably only fetching posts using DHT
 98 |         if (following.length == 0) return;
 99 | 
100 |         _.each(following, function (user) {
101 |             var data = {};
102 |             data.username = user.get('username');
103 |             if (options.includeMaxId && user.get('lowest_id')) {
104 |                 data.max_id = user.get('lowest_id') - 1;
105 |             }
106 |             users.push(data);
107 |         });
108 | 
109 |         // Request!
110 |         Twister.getPosts(users, amount, function (err, posts_data) {
111 |             if (err) {
112 |                 console.error('Error getting user posts for user collection', err);
113 |                 callback(err);
114 |                 return;
115 |             }
116 |             var posts = [];
117 |             _.each(posts_data, function (item) {
118 |                 var post = new PostModel().parse(item, this);
119 |                 posts.push(post);
120 |             }, this);
121 |             callback(null, posts);
122 |         }.bind(this));
123 |     },
124 | 
125 |     fetchMentions: function (amount, options, callback) {
126 |         var self = this;
127 |         this.each(function (user) {
128 |             user.fetchMentions(amount, self, function (err, mentions) {
129 |                 if (err) return console.error('Error fetching mentions for user', err);
130 |                 callback (null, mentions);
131 |             });
132 |         });
133 |     },
134 | 
135 |     newUser: function (data) {
136 |         var user = new UserModel(data);
137 |         this.add(user);
138 |         return user;
139 |     }
140 | 
141 | });
142 | 


--------------------------------------------------------------------------------
/src/app/views/MainPage.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var gui = window.require('nw.gui'),
  5 |     $ = require("jquery"),
  6 |     Backbone = require("backbone"),
  7 |     Twister = require("../Twister"),
  8 |     app = require("../app"),
  9 |     _ = require("underscore"),
 10 |     OverlayView = require("../views/Overlay"),
 11 |     SlideOverlayView = require("../views/SlideOverlay"),
 12 |     PostView = require("../views/Post"),
 13 |     UserView = require("../views/User"),
 14 |     FollowingView = require("../views/Following"),
 15 |     MentionsView = require("../views/Mentions"),
 16 |     mainPageTemplate = _.template(require("../templates/main-page.html"));
 17 | 
 18 | Backbone.$ = $;
 19 | 
 20 | module.exports = Backbone.View.extend({
 21 | 
 22 |     el: '#main-scrollable',
 23 | 
 24 |     fetchUserMentionsInterval: undefined,
 25 | 
 26 |     events: {
 27 |         "click a": "navigate",
 28 |         "scroll": "scroll",
 29 |     },
 30 | 
 31 |     initialize: function() {
 32 |         var self = this;
 33 |         this.render();
 34 |         this.on('userChange', this.userChange.bind(this));
 35 |     },
 36 | 
 37 |     userChange: function (e) {
 38 |         if (this.fetchUserMentionsInterval) clearInterval(this.fetchUserMentionsInterval);
 39 |         this.fetchUserMentionsInterval = setInterval(function () {
 40 |             Twister.getMentionsCombined(app.user.get('username'), 10, function (err, posts) {
 41 |                 if (err) return console.error('Error fetching mentions:', err);
 42 |                 posts = _.sortBy(posts, function (post) {
 43 |                     if (post.userpost) {
 44 |                         return post.userpost.time * -1;
 45 |                     } else if (post.p) {
 46 |                         return post.p.time * -1;
 47 |                     }
 48 |                 });
 49 |                 var lastMention = posts[0].userpost? posts[0].userpost.time : posts[0].p.time;
 50 |                 if (lastMention > (window.localStorage[app.user.get('username') + '_lastMention'] || 0)) {
 51 |                     app.dispatcher.trigger('new-mentions');
 52 |                 }
 53 |             });
 54 |         }, 5000);
 55 |     },
 56 | 
 57 |     navigate: function (e) {
 58 |         e.stopImmediatePropagation();
 59 |         e.preventDefault();
 60 |         var url = $(e.currentTarget).attr('href');
 61 |         if (this.isExternal(url)) {
 62 |             gui.Shell.openExternal(url);
 63 |         } else {
 64 |             app.router.load(url);
 65 |         }
 66 |     },
 67 | 
 68 |     isExternal: function (url) {
 69 |         var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
 70 |         if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== window.location.protocol) return true;
 71 |         if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":("+{"http:":80,"https:":443}[window.location.protocol]+")?$"), "") !== window.location.host) return true;
 72 |         return false;
 73 |     },
 74 | 
 75 |     scroll: function () {
 76 |         this.trigger('scroll');
 77 |     },
 78 | 
 79 |     /**
 80 |      * If the user can actually scroll the window
 81 |      * without a scrollable window the scroll event
 82 |      * can never be called
 83 |      */
 84 |     isScrollable: function () {
 85 |         if (this.$el[0].scrollHeight > this.$el.height()) {
 86 |             return true;
 87 |         }
 88 |         return false;
 89 |     },
 90 | 
 91 |     openPostDetail: function (options) {
 92 |         this.$el.append('<div class="slide-overlay"></div>');
 93 |         new SlideOverlayView({
 94 |             el: this.$el.children().last(),
 95 |             childView: PostView,
 96 |             options: {
 97 |                 post: options.post,
 98 |                 feed: options.feed
 99 |             }
100 |         });
101 |     },
102 | 
103 |     openUserProfile: function (options) {
104 |         this.$el.append('<div class="slide-overlay"></div>');
105 |         new SlideOverlayView({
106 |             el: this.$el.children().last(),
107 |             childView: UserView,
108 |             options: {
109 |                 user: options.user
110 |             }
111 |         });
112 |     },
113 | 
114 |     openFollowing: function (options) {
115 |         this.$el.append('<div class="slide-overlay"></div>');
116 |         new SlideOverlayView({
117 |             el: this.$el.children().last(),
118 |             childView: FollowingView,
119 |             options: {
120 |                 user: options.user
121 |             }
122 |         });
123 |     },
124 | 
125 |     openMentions: function (options) {
126 |         this.$el.append('<div class="slide-overlay"></div>');
127 |         new SlideOverlayView({
128 |             el: this.$el.children().last(),
129 |             childView: MentionsView,
130 |         });
131 |     },
132 | 
133 |     showPopup: function (View, options) {
134 |         this.$popup.append('<div />');
135 |         options.el = this.$popup.children().last();
136 |         new View(options);
137 |     },
138 | 
139 |     showOverlay: function (View, options) {
140 |         console.log('main page ', View, options);
141 |         this.$overlay.append('<div />');
142 |         new OverlayView({
143 |             el: this.$overlay.children().last(),
144 |             childView: View,
145 |             options: options
146 |         });
147 |     },
148 | 
149 |     showSlideOverlay: function (View, options) {
150 |         this.$el.append('<div class="slide-overlay"></div>');
151 |         new SlideOverlayView({
152 |             el: this.$el.children().last(),
153 |             childView: View,
154 |             options: options
155 |         });
156 |     },
157 | 
158 |     render: function() {
159 |         this.$el.html(mainPageTemplate());
160 |         this.$overlay = $("#overlay-holder");
161 |         this.$popup = $("#popup-holder");
162 |         return this;
163 |     }
164 | });
165 | 


--------------------------------------------------------------------------------
/src/app/views/User.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     Twister = require("../Twister"),
  9 |     PostModel = require("../models/Post"),
 10 |     FeedModel = require("../models/Feed"),
 11 |     postTemplate = _.template(require("../templates/post.html")),
 12 |     userDetailTemplate = _.template(require("../templates/user-detail.html"));
 13 | 
 14 | Backbone.$ = $;
 15 | 
 16 | module.exports = Backbone.View.extend({
 17 | 
 18 |     events: {
 19 |         "scroll": "scroll",
 20 |         "click .avatar .follow": "toggleFollow",
 21 |         "click .avatar .following": "toggleFollow",
 22 |         "click .post .avatar .icon": "openPost",
 23 |         "click .post": "openPost"
 24 |     },
 25 | 
 26 |     initialize: function(options) {
 27 |         var self = this;
 28 | 
 29 |         this.options = options;
 30 |         this.user = options.user;
 31 | 
 32 |         this.feed = new FeedModel();
 33 |         this.feed.get('users').add(this.user);
 34 |         this.feed.get('posts').on('add', function (post) {
 35 |             this.$posts.append(postTemplate({post: post, icon: true}));
 36 |         }.bind(this));
 37 | 
 38 |         this.user.fetchProfile(function (err) {
 39 |             if (err) return console.error('Error fetching profile', err);
 40 |             self.render();
 41 |         });
 42 | 
 43 |         app.user.fetchFollowing(function (err) {
 44 |             if (err) return console.error('Error fetching following', err);
 45 |             self.render();
 46 |             if (app.user.get('following').indexOf(self.user.get('username')) != -1) {
 47 |                 return self.loadPosts();
 48 |             }
 49 |             self.user.set('isFollowing', false);
 50 |             self.loadPosts();
 51 |         });
 52 | 
 53 |         this.user.fetchFollowing(function (err) {
 54 |             if (err) return console.error('Error fetching following', err);
 55 |             self.render();
 56 |         });
 57 | 
 58 |         this.user.fetchAvatar(function (err) {
 59 |             if (err) return console.error('Error fetch avatar', err);
 60 |             self.render();
 61 |         });
 62 | 
 63 |         self.render();
 64 | 
 65 |         this.$scrollable = this.$el.parents('.content-holder');
 66 |         this.$scrollable.scroll(function () {
 67 |             self.scroll();
 68 |         });
 69 |     },
 70 | 
 71 |     loadPosts: function () {
 72 |         var self = this;
 73 |         if (this.isLoading) return;
 74 |         this.isLoading = true;
 75 |         this.$loader.show();
 76 |         this.feed.fetchPosts(10, {includeMaxId: true, includeNotFollowers: [this.user]}, function (err) {
 77 | 
 78 |             self.$loader.hide();
 79 | 
 80 |             // Fetch avatars of users of which we don't have one yet
 81 |             self.feed.fetchAvatars(function (err, user, postsToSetAvatar) {
 82 |                 if (!user.get('avatar')) {
 83 |                     console.log(user.get('username'), 'does not have an avatar');
 84 |                     return;
 85 |                 }
 86 |                 _.each(postsToSetAvatar, function (post) {
 87 |                     self.$posts.find('.post[data-id=' + post.id + '] .avatar img').attr('src', user.get('avatar'));
 88 |                 });
 89 |             });
 90 | 
 91 |             // Allowed to load the next page
 92 |             self.isLoading = false;
 93 |         });
 94 |     },
 95 | 
 96 |     scroll: function (e) {
 97 |         var bottomOfScreen = this.$scrollable.height() + this.$scrollable.scrollTop();
 98 |         var totalHeight = this.$scrollable[0].scrollHeight;
 99 | 
100 |         if (bottomOfScreen > totalHeight - 200 && this.feed.get('posts').length > 0) {
101 |             this.loadPosts(true);
102 |         }
103 |     },
104 | 
105 |     toggleFollow: function () {
106 |         var self = this;
107 |         this.$followButton.addClass('loading');
108 |         if (app.user.isFollowing(this.user.get('username'))) {
109 |             app.user.unfollow(this.user.get('username'), function (err) {
110 |                 if(err) return console.error('Error unfollowing user', err);
111 |                 self.render();
112 |             });
113 |         } else {
114 |             app.user.follow(this.user.get('username'), function (err) {
115 |                 if(err) return console.error('Error following user', err);
116 |                 self.render();
117 |             });
118 |         }
119 |     },
120 | 
121 |     openPost: function (e) {
122 |         // Don't do anything if a link is clicked
123 |         if ($(e.target).is('a') || $(e.target).is('img')) {
124 |             return;
125 |         }
126 | 
127 |         var $post;
128 |         if ($(e.currentTarget).hasClass('post')) {
129 |             $post = $(e.currentTarget);
130 |         } else {
131 |             $post = $(e.currentTarget).parents('.post');
132 |         }
133 |         var id = $post.attr('data-id');
134 |         var post = this.feed.get('posts').get(id);
135 | 
136 |         // Couldn't find the post, might be a fake post or something went wrong
137 |         // anyway, abort mission
138 |         if (!post) return;
139 | 
140 |         e.stopImmediatePropagation();
141 |         e.preventDefault();
142 | 
143 |         // Show original twist, not the retwist itself
144 |         if (post.get('retwist')) {
145 |             post = post.get('retwist');
146 |         }
147 | 
148 |         app.dispatcher.trigger('open-post-detail', {
149 |             post: post,
150 |             feed: this.feed
151 |         });
152 |     },
153 | 
154 |     render: function() {
155 |         this.$el.html(userDetailTemplate({
156 |             postTemplate: postTemplate,
157 |             user: this.user,
158 |             feed: this.feed
159 |         }));
160 |         this.$loader = this.$el.find('.load-animation');
161 |         this.$posts = this.$el.find('.posts');
162 |         this.$followButton = this.$el.find('.avatar div');
163 |         return this;
164 |     }
165 | });
166 | 


--------------------------------------------------------------------------------
/src/app/views/Post.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     Twister = require("../Twister"),
  9 |     PostModel = require("../models/Post"),
 10 |     postTemplate = _.template(require("../templates/post.html")),
 11 |     postDetailTemplate = _.template(require("../templates/post-detail.html"));
 12 | 
 13 | Backbone.$ = $;
 14 | 
 15 | module.exports = Backbone.View.extend({
 16 | 
 17 |     events: {
 18 |         "click .compose.reply div": "onReplyClick",
 19 |         "keypress .compose.reply div": "onTyping",
 20 |         "input .compose.reply div": "onTyping",
 21 |         "click .post .avatar .icon": "openPost",
 22 |     },
 23 | 
 24 |     initialize: function(options) {
 25 |         var self = this;
 26 | 
 27 |         this.options = options;
 28 |         this.post = options.post;
 29 | 
 30 |         if (this.post.get('reply')) {
 31 |             this.addParentPost(options.post);
 32 |         }
 33 | 
 34 |         Twister.getReplies(this.post.get('user').get('username'), this.post.get('twister_id'), function (err, replies) {
 35 |             if (err) return console.error('Error fetching replies', err);
 36 |             if (!replies || replies.length == 0) return;
 37 | 
 38 |             var posts = [];
 39 |             _.each(replies, function (reply) {
 40 |                 posts.push(new PostModel().parse(reply.p.v, options.feed.get('users')));
 41 |             });
 42 |             posts = posts.reverse();
 43 |             self.post.set('replies', posts);
 44 |             self.render();
 45 |         });
 46 | 
 47 |         this.render();
 48 |     },
 49 | 
 50 |     addParentPost: function (post) {
 51 |         var self = this;
 52 |         Twister.getPost(post.get('reply').username, post.get('reply').twister_id, function (err, parentPost) {
 53 |             if (err) return console.error('Error getting parent post', err);
 54 | 
 55 |             if (!parentPost || parentPost.length === 0) return;
 56 | 
 57 |             // Found a parent post
 58 |             parentPost = new PostModel().parse(parentPost[0].p.v, self.options.feed.get('users'));
 59 | 
 60 |             // Tell the parent post the original post is a reply
 61 |             parentPost.set('replies', [post]);
 62 | 
 63 |             // Tell the original post its parent
 64 |             post.set('parent', parentPost);
 65 | 
 66 |             self.render();
 67 | 
 68 |             // Maybe the parent post also has a parent post
 69 |             if (parentPost.get('reply')) {
 70 |                 self.addParentPost(parentPost);
 71 |             }
 72 |         });
 73 |     },
 74 | 
 75 |     onReplyClick: function (e) {
 76 |         if (!_.isEmpty(this.$input.text())) return;
 77 |         var replyingToUsername = this.replyingTo.get('user').get('username');
 78 | 
 79 |         // Get the usernames mentioned in the post we are replying to
 80 |         var usernames = this.replyingTo.getMentionedUsernames();
 81 | 
 82 |         // See if the active user is mentioned too,
 83 |         // if so, remove the username
 84 |         var index = usernames.indexOf(app.user.get('username'));
 85 |         if (index != -1) {
 86 |             usernames.splice(index, 1);
 87 |         }
 88 | 
 89 |         // See if the user of the post is not the active user and if
 90 |         // the user is already in there, otherwise add this user too
 91 |         if (replyingToUsername != app.user.get('username') && usernames.indexOf(replyingToUsername) == -1) {
 92 |             usernames.push(replyingToUsername);
 93 |         }
 94 | 
 95 |         // Build up the precomposed reply with the right mentions
 96 |         var html = '';
 97 |         usernames.forEach(function (username) {
 98 |             html += "@" + username + "&nbsp;";
 99 |         });
100 | 
101 |         // Render and set the cursor to the end, ready for typing
102 |         this.$input.html(html).keypress();
103 |         if (html.length === 0) return;
104 |         this.setCursorToEnd(this.$input[0]);
105 |     },
106 | 
107 |     setCursorToEnd: function (ele)
108 |     {
109 |         var range = document.createRange();
110 |         var sel = window.getSelection();
111 |         range.setStart(ele, 1);
112 |         range.collapse(true);
113 |         sel.removeAllRanges();
114 |         sel.addRange(range);
115 |         ele.focus();
116 |     },
117 | 
118 |     onTyping: function (e) {
119 |         if (e) e.stopPropagation();
120 |         if (e && e.keyCode == 13) {
121 |             e.preventDefault();
122 |             this.submitReply();
123 |             return;
124 |         }
125 |         var charcount = this.$input.text().length;
126 |         this.$charcount.text(140 - charcount + ' charachters left');
127 |         if (charcount > 0) {
128 |             this.$charcount.show();
129 |             this.$input.parent().parent().addClass('editing');
130 |         } else {
131 |             this.$charcount.hide();
132 |             this.$input.parent().parent().removeClass('editing');
133 |         }
134 |     },
135 | 
136 |     submitReply: function () {
137 |         var self = this;
138 |         var $icon = this.$input.parent().parent().find('.icon');
139 | 
140 |         // Already submitting
141 |         if ($icon.hasClass('loading')) return;
142 | 
143 |         $icon.addClass('loading');
144 | 
145 |         this.replyingTo.reply(app.user, this.$input.text(), function (err, reply) {
146 |             if (err) {
147 |                 return console.error('Error posting reply:', err);
148 |             }
149 |             $icon.removeClass('loading');
150 |             self.$input.text("");
151 |             self.onTyping();
152 |             self.render();
153 |         });
154 |     },
155 | 
156 |     openPost: function (e) {
157 |         var $post = $(e.currentTarget).parents('.post');
158 |         var id = $post.attr('data-id');
159 |         var post = this.options.feed.get('posts').get(id);
160 | 
161 |         // Couldn't find the post, might be a fake post or something went wrong
162 |         // anyway, abort mission
163 |         if (!post) return;
164 | 
165 |         e.stopImmediatePropagation();
166 |         e.preventDefault();
167 | 
168 |         // Show original twist, not the retwist itself
169 |         if (post.get('retwist')) {
170 |             post = post.get('retwist');
171 |         }
172 | 
173 |         app.dispatcher.trigger('open-post-detail', {
174 |             post: post,
175 |             feed: this.options.feed
176 |         });
177 |     },
178 | 
179 |     render: function() {
180 |         this.replyingTo = this.post.getLastChild();
181 |         this.$el.html(postDetailTemplate({
182 |             reply: this.replyingTo,
183 |             postTemplate: postTemplate,
184 |             post: this.post,
185 |             user: app.user
186 |         }));
187 |         this.$charcount = this.$el.find('.characters');
188 |         this.$input = this.$el.find('.compose.reply div[contenteditable=true]');
189 |         return this;
190 |     }
191 | });
192 | 


--------------------------------------------------------------------------------
/src/app/styles/posts.less:
--------------------------------------------------------------------------------
  1 | .posts {
  2 |     position: relative;
  3 |     padding: 20px 0;
  4 | 
  5 |     &.line::before {
  6 |         content: "";
  7 |         height: 100%;
  8 |         width: 4px;
  9 |         position: absolute;
 10 |         left: 55px;
 11 |         top: 0;
 12 |         background-color: #c9e9ec;
 13 |         border-radius: 4px 4px 0 0;
 14 |     }
 15 | 
 16 |     .post {
 17 |         color: #605e58;
 18 |         position: relative;
 19 |         display: flex;
 20 |         font-size: 20px;
 21 |         line-height: 26px;
 22 |         padding: 15px 20px;
 23 |         border-radius: 5px;
 24 |         cursor: pointer;
 25 | 
 26 |         &:hover {
 27 |             background-color: rgba(201, 233, 236, 0.5);
 28 |             .content {
 29 |                 .top {
 30 |                     .lovers.empty { display: inline-block }
 31 |                     .retwisters.empty { display: inline-block }
 32 |                 }
 33 |                 .date { display: block }
 34 |             }
 35 |         }
 36 | 
 37 |         &.retwist span.retwist-icon {
 38 |           width: 15px;
 39 |           height: 15px;
 40 |           display: inline-block;
 41 |           -webkit-mask: url(../svg/retwist.svg);
 42 |           background-color: #91C348;
 43 |           vertical-align: middle;
 44 |           margin-right: 5px;
 45 |           margin-top: -1px;
 46 |         }
 47 | 
 48 |         .icon {
 49 |             background-color: #09c1d1;
 50 |             border-radius: 100%;
 51 |             cursor: pointer;
 52 |             background-repeat: no-repeat;
 53 |             background-position: 50% 50%;
 54 |             right: -5px;
 55 |             bottom: -5px;
 56 |             width: 35px;
 57 |             height: 35px;
 58 |             background-size: 21px 21px;
 59 |             position: absolute;
 60 |             margin: 0;
 61 |             &.loading {
 62 |                 background-color: #fff !important;
 63 |                 &::before {
 64 |                     content: "";
 65 |                     width: 100%;
 66 |                     height: 100%;
 67 |                     -webkit-mask: url(../svg/oval.svg);
 68 |                     background-color: #87CDD3;
 69 |                     display: inline-block;
 70 |                 }
 71 |             }
 72 |         }
 73 |         &.post .icon {
 74 |             background-color: #09c1d1;
 75 |             background-image: url(../img/icon-post.png);
 76 |         }
 77 |         &.new .avatar {
 78 |             background-color: #e82222;
 79 |             font-size: 38px;
 80 |             line-height: 38px;
 81 |             display: flex;
 82 |             align-items: center;
 83 |             color: #fff;
 84 |             font-family: 'Open Sans';
 85 |             background-image: none;
 86 |             justify-content: space-around;
 87 |             border-radius: 100%;
 88 |             span { padding-bottom: 3px }
 89 |         }
 90 |         &.reply .icon, &.compose_reply .icon {
 91 |             background-color: #7e50bd;
 92 |             background-image: url(../img/icon-reply.png);
 93 |         }
 94 |         &.compose_reply:hover {
 95 |             background-color: transparent;
 96 |         }
 97 |         &.retwist .icon {
 98 |             background-color: #4fb547;
 99 |             background-image: url(../img/icon-retwist.png);
100 |         }
101 |         &.compose {
102 |             &:hover { background-color: transparent; }
103 |             .icon {
104 |                 background-color: #BABABA;
105 |                 background-image: url(../img/icon-compose.png);
106 |             }
107 |         }
108 |         .avatar {
109 |             flex: 0 0 75px;
110 |             margin-right: 20px;
111 |             height: 75px;
112 |             cursor: pointer;
113 |             position: relative;
114 |             img {
115 |                 width: 100%;
116 |                 height: 100%;
117 |                 border-radius: 100%;
118 |             }
119 |         }
120 |         .content, .compose {
121 |             font-family: Georgia;
122 |             flex: 1;
123 |             word-wrap: break-word;
124 |             &.compose {
125 |                 display: flex;
126 |                 align-items: center;
127 |             }
128 |             &.new {
129 |                 display: flex;
130 |                 align-items: center;
131 |                 font-style: italic;
132 |             }
133 |             .top {
134 |                 display: flex;
135 |                 align-items: stretch;
136 |                 height: 27px;
137 |                 .username {
138 |                     font-family: 'Open Sans';
139 |                     font-size: 20px;
140 |                     color: #444444;
141 |                     font-weight: 500;
142 |                     &::before {
143 |                         font-size: 18px;
144 |                     }
145 |                 }
146 |                 .retwisters, .lovers {
147 |                     margin-left: 17px;
148 |                     &.empty { display: none }
149 |                     span:nth-child(1) {
150 |                         cursor: pointer;
151 |                         -webkit-mask: url(../svg/retwist.svg);
152 |                         background-color: #4fb547;
153 |                         width: 17px;
154 |                         height: 17px;
155 |                         display: inline-block;
156 |                         z-index: 1;
157 |                     }
158 |                     img {
159 |                         width: 17px;
160 |                         height: 17px;
161 |                         border-radius: 100%;
162 |                     }
163 |                 }
164 |                 .lovers {
165 |                     span:nth-child(1) {
166 |                         -webkit-mask: url(../svg/love.svg);
167 |                         background-color: #FF4747;
168 |                         height: 21px;
169 |                         width: 21px;
170 |                     }
171 |                 }
172 |             }
173 |             .date, .characters {
174 |                 display: none;
175 |                 font-size: 16px;
176 |                 position: absolute;
177 |                 font-weight: lighter;
178 |                 right: 20px;
179 |                 top: 8px;
180 |                 float: right;
181 |                 color: #8C8C8C;
182 |                 font-family: 'Open Sans';
183 |                 &.characters {
184 |                     top: -20px;
185 |                 }
186 |             }
187 |             p {
188 |                 color: #666;
189 |                 a {
190 |                     color: #444;
191 |                     text-decoration: none;
192 |                     font-weight: normal;
193 |                 }
194 |             }
195 |             .emoji {
196 |                 width: 20px;
197 |                 margin-bottom: -5px;
198 |             }
199 | 
200 |             [contenteditable=true]:empty:before{
201 |                 content: attr(placeholder);
202 |             }
203 | 
204 |             div[placeholder] {
205 |                 color: #bcbcbc;
206 |                 cursor: text;
207 |                 &:focus {
208 |                     outline: 0;
209 |                 }
210 |                 &:not(:empty) {
211 |                     color: #666;
212 |                 }
213 |             }
214 |         }
215 |     }
216 | 
217 |     .replies.posts {
218 |         margin-left: 40px;
219 |         margin-top: -10px;
220 |         &.line::before {
221 |             left: 41px;
222 |             height: calc(~"100% - 41px");
223 |             border-radius: 0;
224 |         }
225 |         .post {
226 |             font-size: 18px;
227 |             line-height: 24px;
228 |             padding: 10px 15px;
229 |             .avatar {
230 |                 flex: 0 0 56px;
231 |                 height: 56px;
232 |             }
233 |             .icon {
234 |                 height: 28px;
235 |                 width: 28px;
236 |                 background-size: 15px;
237 |                 right: -3px;
238 |                 bottom: -3px;
239 |             }
240 |         }
241 |     }
242 | 
243 |     .load-animation {
244 |         width: 68px;
245 |         height: 68px;
246 |         -webkit-mask: url(../svg/oval.svg);
247 |         background-color: #87CDD3;
248 |         margin-bottom: 50px;
249 |     }
250 | }
251 | 


--------------------------------------------------------------------------------
/src/app/views/Start.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     async = require("async"),
  7 |     moment = require("moment"),
  8 |     app = require("../app"),
  9 |     _ = require("underscore"),
 10 |     statusOverlayTemplate = _.template(require("../templates/start.html")),
 11 |     UserModel = require("../models/User"),
 12 |     Twister = require("../Twister");
 13 | 
 14 | Backbone.$ = $;
 15 | 
 16 | module.exports = Backbone.View.extend({
 17 | 
 18 |     infoTimer: null,
 19 |     deamonTimer: null,
 20 | 
 21 |     events: {
 22 |         'click .more-info': 'showMoreInfo'
 23 |     },
 24 | 
 25 |     initialize: function(options) {
 26 |         var self = this;
 27 | 
 28 |         this.options = options;
 29 | 
 30 |         this.render();
 31 |         this.renderInfo();
 32 | 
 33 |         this.setText("Requesting status");
 34 | 
 35 |         Twister.getStatus(function (status) {
 36 |             if (status == Twister.status.NOCONNECTION) {
 37 |                 self.startDeamon();
 38 |             } else {
 39 |                 self.gatherInfo();
 40 |             }
 41 |         });
 42 |     },
 43 | 
 44 |     showMoreInfo: function () {
 45 |         this.$info.show();
 46 |     },
 47 | 
 48 |     startDeamon: function () {
 49 |         // Tell the user we are starting Twister
 50 |         this.setText("Starting");
 51 | 
 52 |         // Start the deamon
 53 |         Twister.startDeamon();
 54 | 
 55 |         // Keep checking if it is started
 56 |         this.deamonTimer = setInterval (this.getStatus.bind(this), 1000);
 57 |         this.getStatus();
 58 |     },
 59 | 
 60 |     getStatus: function () {
 61 |         var self = this;
 62 |         Twister.getStatus(function (status) {
 63 |             if (status != Twister.status.NOCONNECTION) {
 64 |                 clearInterval(self.deamonTimer);
 65 |                 self.gatherInfo();
 66 |             }
 67 |         });
 68 |     },
 69 | 
 70 |     gatherInfo: function () {
 71 |         // Prevent starting the timer twice by accident
 72 |         if(this.infoTimer) return;
 73 | 
 74 |         var self = this;
 75 | 
 76 |         this.setText("Fetching network information");
 77 | 
 78 |         this.infoRetrievalCount = 0;
 79 | 
 80 |         // Twister is started, let's gather info on its status
 81 |         this.infoTimer = setInterval(this.getInfo.bind(this), 1000);
 82 |         this.getInfo();
 83 |     },
 84 |         
 85 |     getInfo: function () {
 86 |         var self = this;
 87 | 
 88 |         // Retrieve latest info
 89 |         Twister.getInfo(function (err, info) {
 90 |             if(!self) return;
 91 |             self.latestInfo = info;
 92 |             self.renderInfo();
 93 |         });
 94 | 
 95 |         // Retrieve latest blockchain info
 96 |         Twister.getBestBlock(function (err, block) {
 97 |             if(!self) return;
 98 |             self.latestBlock = block;
 99 |             self.renderInfo();
100 | 
101 |             // Increase the counter only when we actually get a response
102 |             // otherwise it might not be the connection, but the deamon
103 |             // unresponsive
104 |             self.infoRetrievalCount++;
105 |         });
106 | 
107 |         // If the purpose of this view is NOT to show
108 |         // startup status, just keep displaying the latest 
109 |         // information
110 |         if (!self.options.starting) return;
111 | 
112 |         // After 10, 30, and 60 seconds force a connection to the offical Twister seeders
113 |         // in case this client can't find a connection
114 |         if (this.latestInfo && this.latestInfo.connections === 0) {
115 |             if (this.infoRetrievalCount == 10) {
116 |                 Twister.addNode('seed.twister.net.co', 'onetry');
117 |             } else if (this.infoRetrievalCount == 30) {
118 |                 Twister.addNode('seed2.twister.net.co', 'onetry');
119 |             } else if (this.infoRetrievalCount == 60) {
120 |                 Twister.addNode('seed3.twister.net.co', 'onetry');
121 |             }
122 |         }
123 | 
124 |         self.checkStatus();
125 |     },
126 | 
127 |     checkStatus: function () {
128 |         var self = this;
129 |         var time = new Date().getTime() / 1000;
130 |         if (!this.latestInfo.connections) {
131 |             this.setText("Fetching network information");
132 |         } else if (this.latestInfo.connections === 0) {
133 |             this.setText("Waiting for a connection");
134 |         } else if (this.latestInfo.dht_nodes === 0) {
135 |             this.setText("Waiting for DHT nodes");
136 |         } else if (!this.latestBlock.time) {
137 |             this.setText("Fetching blockchain information");
138 |         } else if (this.latestBlock.time < time - (2 * 3600)) {
139 |             this.setText("Downloading latest blocks");
140 |         } else {
141 |             // Everything is fine, stop checking for new info
142 |             clearInterval(this.infoTimer); 
143 | 
144 |             // See if there is already an account
145 |             this.checkAccounts(function () {
146 |                 // Seems like we are good to go    
147 |                 
148 |                 self.setText("Updating followers");
149 | 
150 |                 // First tell Twister to follow all the followers from DHT
151 |                 //  so that we are sure new followers added in other clients
152 |                 //  are also followed here
153 |                 Twister.followFollowersFromDht(app.user.get('username'), function (err) {
154 |                     if (err) console.error('Error follow followers from DHT');
155 |                     // Go to the feed of this user
156 |                     app.router.navigate('feed', {trigger: true});
157 | 
158 |                     // Remove the overlay 
159 |                     self.trigger('close');
160 |                 });
161 |             });
162 |         }
163 |     },
164 | 
165 |     /**
166 |      * Checks if there are known users
167 |      * If there are multiple a dialog will be shown to choose one
168 |      * If there is one user that one is used immideately
169 |      * 
170 |      * callback: will be executed if there is only one user so that 
171 |      * t         the next step can be executed immideately
172 |      */
173 |     checkAccounts: function (callback) {
174 |         var self = this;
175 | 
176 |         // If there is already an user choosen, nothing to do here
177 |         if (app.user) return callback();
178 | 
179 |         self.setText("Looking for accounts");
180 | 
181 |         // Get the users from the Twister wallet
182 |         Twister.getUsers(function (err, accounts) {
183 |             // No accounts? Login so that we get one
184 |             if (accounts.length == 0) {
185 |                 app.router.navigate('login', {trigger: true});
186 |                 self.trigger('close');
187 |             // More than one account? Make the user choose one
188 |             } else if (accounts.length > 1) {
189 |                 app.router.navigate('choose-account', {trigger: true});
190 |                 self.trigger('close');
191 | 
192 |             // Only one account? Choose that one directly
193 |             } else {
194 |                 app.changeUser(new UserModel({username: accounts[0]}));
195 |                 callback();
196 |             }
197 |         });
198 |     },
199 | 
200 |     renderInfo: function () {
201 |         if (!this.latestInfo) this.latestInfo = {}
202 |         if (!this.latestBlock) this.latestBlock = {}
203 |         this.$info.html([
204 |             'DHT nodes: ' + (this.latestInfo.dht_nodes === undefined ? 'unkown' : this.latestInfo.dht_nodes),
205 |             'Connections: ' + (this.latestInfo.connections === undefined ? 'unkown' : this.latestInfo.connections),
206 |             'Peers: ' + (this.latestInfo.addrman_total === undefined ? 'unkown' : this.latestInfo.addrman_total),
207 |             'Blocks: ' + (this.latestInfo.blocks === undefined ? 'unkown' : this.latestInfo.blocks),
208 |             '',
209 |             'Latest block: ' + (this.latestBlock.time ? moment(this.latestBlock.time * 1000).fromNow() : 'unkown'),
210 |         ].join('<br />'));
211 |     },
212 | 
213 |     setText: function (text) {
214 |         this.$status.html(text);
215 |     },
216 | 
217 |     /**
218 |      * BE AWARE: Function called by the overlay type using this view
219 |      */
220 |     onClose: function () {
221 |         clearInterval(this.infoTimer); 
222 |         clearInterval(this.deamonTimer);
223 |     },
224 | 
225 |     render: function() {
226 |         this.$el.html(statusOverlayTemplate());
227 |         this.$status = this.$el.find('h2.status');
228 |         this.$info = this.$el.find('span.info');
229 |         return this;
230 |     }
231 | });
232 | 


--------------------------------------------------------------------------------
/src/app/models/User.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     _ = require("underscore"),
  6 |     Backbone = require("backbone"),
  7 |     async = require("async"),
  8 |     Twister = require("../Twister"),
  9 |     app = require("../app"),
 10 |     PostsCollection = require("../collections/posts"),
 11 |     config = require("../config"),
 12 |     PostModel = require("../models/Post");
 13 | 
 14 | Backbone.$ = $;
 15 | 
 16 | // Defining the application router.
 17 | module.exports = Backbone.Model.extend({
 18 |     defaults: {
 19 |         username: null,
 20 |         posts: null,
 21 |         avatar: null,
 22 |         lowest_id: null,
 23 |         isFollowing: true,
 24 |     },
 25 | 
 26 |     initialize: function () {
 27 |         this.set('posts', new PostsCollection());
 28 |         this.set('retwists', new PostsCollection());
 29 |         this.get('posts').on('add', this.onAddPost.bind(this));
 30 |     },
 31 | 
 32 |     getUrl: function () {
 33 |         return '/users/' + this.get('username');
 34 |     },
 35 | 
 36 |     addPost: function (post) {
 37 |         this.get('posts').add(post);
 38 |     },
 39 | 
 40 |     addRetwist: function (post) {
 41 |         this.get('retwists').add(post);
 42 |     },
 43 | 
 44 |     addPosts: function (posts) {
 45 |         // Add posts to user
 46 |         this.get('posts').add(posts);
 47 | 
 48 |         // Add user to posts
 49 |         _.each(posts, function (post) {
 50 |             post.set('user', this);
 51 |         }, this);
 52 |     },
 53 | 
 54 |     hasPost: function () {
 55 |         return this.get('posts').length > 0 || this.get('retwists').length > 0;
 56 |     },
 57 | 
 58 |     onAddPost: function (post) {
 59 |         this.processTwisterIdsOfPost(post.get('twister_id'), post.get('last_twister_id'));
 60 |     },
 61 | 
 62 |     processTwisterIdsOfPost: function (twister_id, last_twister_id) {
 63 |         var lowest_id = this.get('lowest_id');
 64 |         if (!lowest_id || twister_id < lowest_id) {
 65 |             this.set('lowest_id', twister_id);
 66 |         }
 67 | 
 68 |         // TODO: dont assume twister_ids are in the right order
 69 |         if (!this.get('last_twister_id') || last_twister_id < this.get('last_twister_id')) {
 70 |             this.set('last_twister_id', last_twister_id);
 71 |         }
 72 |     },
 73 | 
 74 |     getDefaultAvatar: function () {
 75 |         return config.DEFAULT_AVATAR;
 76 |     },
 77 | 
 78 |     isFollowing: function (username) {
 79 |         if (!this.get('following')) {
 80 |             return false;
 81 |         }
 82 |         return this.get('following').indexOf(username) != -1;
 83 |     },
 84 | 
 85 |     isFollowedByActiveUser: function () {
 86 |         return app.user.isFollowing(this.get('username'));
 87 |     },
 88 | 
 89 |     follow: function (username, callback) {
 90 |         var self = this;
 91 |         Twister.follow(this.get('username'), [username], true, function (err) {
 92 |             if (err) return callback(err);
 93 | 
 94 |             var following = self.get('following');
 95 |             following.push(username);
 96 |             self.set('following', following);
 97 |             callback();
 98 |         });
 99 |     },
100 | 
101 |     unfollow: function (username, callback) {
102 |         var self = this;
103 |         Twister.unfollow(this.get('username'), [username], true, function (err) {
104 |             if (err) return callback(err);
105 | 
106 |             var following = self.get('following');
107 |             var index = following.indexOf(username);
108 |             if (index == -1) return callback();
109 | 
110 |             following.splice(index, 1);
111 |             self.set('following', following);
112 | 
113 |             callback();
114 |         });
115 |     },
116 | 
117 |     fetchFollowing: function (callback) {
118 |         if (this.get('following')) return callback();
119 | 
120 |         var self = this;
121 |         Twister.getFollowing(this.get('username'), function (err, usernames) {
122 |             if (err) return callback(err);
123 | 
124 |             if (usernames.length == 0) {
125 |                 Twister.getFollowingFromDht(self.get('username'), function (err, usernames) {
126 |                     if (err) return callback(err);
127 |                     self.set('following', usernames);
128 |                     callback(null, self);
129 |                 });
130 |                 return;
131 |             }
132 | 
133 |             self.set('following', usernames);
134 |             callback(null, self);
135 |         });
136 |     },
137 | 
138 |     fetchPosts: function (amount, callback) {
139 |         var self = this;
140 |         Twister.getPosts(this.get('username'), amount, function (err, data) {
141 |             if (err) {
142 |                 console.error('Error getting user posts for user:', self.get('username'), err);
143 |                 callback(err);
144 |                 return;
145 |             }
146 |             var posts = self.get('posts');
147 |             _.each(data, function (item) {
148 |                 posts.add([new PostModel({message: item.msg, username: item.n, time: item.time})]);
149 |             });
150 |             self.set('posts', posts);
151 |             callback(null, self);
152 |         });
153 |     },
154 | 
155 |     fetchAvatarFromDisk: function (callback) {
156 |         var self = this;
157 |         Twister.getAvatarFromDisk(this.get('username'), function (err, avatar) {
158 |             if (err) {
159 |                 console.error('Error getting avatar for user:', self.get('username'), err);
160 |                 return callback(err);
161 |             }
162 |             self.set('avatar', avatar);
163 |             if (callback) callback();
164 |         });
165 |     },
166 | 
167 |     fetchAvatar: function (callback) {
168 |         var self = this;
169 |         Twister.getAvatarFromDHT(this.get('username'), function (err, avatar) {
170 |             if (err) {
171 |                 console.error('Error getting avatar for user:', self.get('username'), err);
172 |                 return callback(err);
173 |             }
174 |             self.set('avatar', avatar);
175 |             callback();
176 |         });
177 |     },
178 | 
179 |     fetchProfile: function (callback) {
180 |         var self = this;
181 |         Twister.getProfile(this.get('username'), function (err, data) {
182 |             if (err) return callback(err);
183 |             if (!data) {
184 |                 console.error('No profile data found');
185 |                 return callback();
186 |             }
187 |             self.set(data[0].p.v);
188 |             callback();
189 |         });
190 |     },
191 | 
192 |     fetchMentions: function (amount, users, callback) {
193 |         var self = this;
194 |         async.parallel([
195 |             function (callback) {
196 |                 Twister.getMentions(self.get('username'), amount, null, function (err, mentions_data) {
197 |                     if (err) {
198 |                         console.error('Error getting mentions for user ', err);
199 |                         return callback(err);
200 |                     }
201 |                     var posts = [];
202 |                     _.each(mentions_data, function (item) {
203 |                         var post = new PostModel().parse(item, users ? users : null);
204 |                         posts.push(post);
205 |                     });
206 |                     callback(null, posts);
207 |                 });
208 |             },
209 |             function (callback) {
210 |                 Twister.getMentionsFromDHT(self.get('username'), function (err, mentions_data) {
211 |                     if (err) {
212 |                         console.error('Error getting mentions for user ', err);
213 |                         return callback(err);
214 |                     }
215 |                     var posts = [];
216 |                     _.each(mentions_data, function (item) {
217 |                         var post = new PostModel().parse(item.p.v, users ? users : null);
218 |                         posts.push(post);
219 |                     });
220 |                     callback(null, posts);
221 |                 });
222 |             }
223 |         ], function (err, results) {
224 |             if (err) return callback(err);
225 |             callback(null, results[0].concat(results[1]));
226 |         });
227 |     },
228 | 
229 |     getStatus: function (callback) {
230 |         Twister.getUserStatus(this.get('username'), function (err, post) {
231 |             // Just return the post, it has to be added to the user from the user collection
232 |             callback(err, post);
233 |         });
234 |     },
235 | 
236 |     getAvatarImg: function (title) {
237 |         if (this.get('avatar')) {
238 |             return '<img data-username="'+this.get('username')+'" ' + (title ? 'title="@'+this.get('username')+'"' : '') + ' src="' + this.get('avatar') + '" />';
239 |         } else {
240 |             return '<img data-username="'+this.get('username')+'" ' + (title ? 'title="@'+this.get('username')+'"' : '') + ' src="app/img/profile.jpg" />';
241 |         }
242 |     }
243 | });
244 | 


--------------------------------------------------------------------------------
/src/app/models/Post.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     _ = require("underscore"),
  7 |     Twister = require("../Twister"),
  8 |     app = require("../app"),
  9 |     twemoji = require('twemoji'),
 10 |     moment = require("moment");
 11 | 
 12 | Backbone.$ = $;
 13 | 
 14 | var TYPES = {
 15 |     RETWIST: 'retwist',
 16 |     REPLY: 'reply',
 17 |     POST: 'post',
 18 |     COMPOSE: 'compose',
 19 |     COMPOSE_REPLY: 'compose_reply',
 20 | };
 21 | 
 22 | // Defining the application router.
 23 | var PostModel = module.exports = Backbone.Model.extend({
 24 |     defaults: {
 25 |         twister_id: null,
 26 |         message: null,
 27 |         time: null,
 28 |         last_time: null,
 29 |         user: null,
 30 |         retwist: null,
 31 |         retwisters: [],
 32 |         replies: [],
 33 |         lovers: []
 34 |     },
 35 | 
 36 |     initialize: function (properties) {
 37 |         if (!properties || !properties.retwisters) this.set('retwisters', []);
 38 |         if (!properties || !properties.replies) this.set('replies', []);
 39 |         if (!properties || !properties.lovers) this.set('lovers', []);
 40 |     },
 41 | 
 42 |     /**
 43 |      * data = Twister post data
 44 |      * users = user collection to retrieve users from
 45 |      */
 46 |     parse: function (data, users) {
 47 |         var item = data.userpost,
 48 |             user;
 49 | 
 50 |         if (!users.findWhere) {
 51 |             user = users;
 52 |         } else {
 53 |             user = users.findWhere({username: item.n});
 54 |         }
 55 | 
 56 |         // Maybe the user doens't excist yet when we are parsing a
 57 |         // parent post of a reply for example
 58 |         if (!user) {
 59 |             user = users.newUser({username: item.n, isFollowing: false});
 60 |         }
 61 | 
 62 |         if(item.rt) {
 63 |             var retwistUser = users.findWhere({username: item.rt.n});
 64 | 
 65 |             // Update the lowest_id and last_twister_id of the retwisting user,
 66 |             // since there is further no trace of this 'post' of the retwisting user
 67 |             user.processTwisterIdsOfPost(item.k, item.lastk);
 68 | 
 69 |             // If this is a retwist we might not know the user
 70 |             // in that case add it to the list of users
 71 |             if (!retwistUser) {
 72 |                 retwistUser = users.newUser({username: item.rt.n, isFollowing: false});
 73 |             } else {
 74 |                 // Check if post is already known
 75 |                 var post = retwistUser.get('posts').findWhere({id: retwistUser.get('username') + '_' + item.rt.k});
 76 |                 if (post) {
 77 |                     user.addRetwist(post);
 78 |                     post.setLastTime(item.time);
 79 |                     post.addRetwister(user);
 80 |                     return post;
 81 |                 }
 82 |             }
 83 | 
 84 |             // Build the retwist post model
 85 |             var retwist = new PostModel({
 86 |                 id: retwistUser.get('username') + '_' + item.rt.k,
 87 |                 signature: item.sig_rt,
 88 |                 height: item.rt.height,
 89 |                 user: retwistUser,
 90 |                 message: item.rt.msg,
 91 |                 time: item.rt.time,
 92 |                 last_time: item.time,
 93 |                 last_rt_time: item.time,
 94 |                 twister_id: item.rt.k,
 95 |                 last_twister_id: item.rt.lastk,
 96 |                 retwisters: [user]
 97 |             });
 98 | 
 99 |             // The the post as an post of the original poster
100 |             retwistUser.addPost(retwist);
101 | 
102 |             user.addRetwist(retwist);
103 | 
104 |             // Return the retwist as if it is an original twist
105 |             return retwist;
106 |         }
107 | 
108 |         this.set({
109 |             id: user.get('username') + '_' + item.k,
110 |             signature: data.sig_userpost,
111 |             height: item.height,
112 |             user: user,
113 |             message: item.msg,
114 |             time: item.time,
115 |             last_time: item.time,
116 |             retwist: retwist,
117 |             reply: item.reply ? {username: item.reply.n, twister_id: item.reply.k} : undefined,
118 |             twister_id: item.k,
119 |             last_twister_id: item.lastk
120 |         });
121 | 
122 |         user.addPost(this);
123 | 
124 |         return this;
125 |     },
126 | 
127 | 
128 |     reply: function (user, msg, callback) {
129 |         var self = this;
130 |         Twister.reply(user.get('username'), msg, this.get('user').get('username'), this.get('twister_id'), function (err, data) {
131 |             if (err) return callback (err);
132 |             var reply = new PostModel().parse(data, user);
133 |             var replies = self.get('replies');
134 |             replies.push(reply);
135 |             self.set('replies', replies);
136 |             callback(null, reply);
137 |         });
138 |     },
139 | 
140 |     addRetwister: function (user) {
141 |         var retwisters = this.get('retwisters');
142 |         if (retwisters.indexOf(user) !== -1) {
143 |             return;
144 |         }
145 |         user.fetchAvatarFromDisk();
146 |         retwisters.push(user);
147 |         this.set('retwisters', retwisters);
148 |     },
149 | 
150 |     setLastTime: function (time) {
151 |         if (time > this.get('last_time')) {
152 |             this.set('last_time', time);
153 |         }
154 |     },
155 | 
156 |     getMessageRegexed: function () {
157 |         if (!this.get('message')) return "";
158 |         var msg = this.get('message');
159 |         // Html
160 |         msg = msg.replace(/</g, "&lt;").replace(/>/g, "&gt;");
161 |         // Urls
162 |         msg = msg.replace( /(https?:\/\/[^\s]+)/g, function(url) { return '<a href="'+url+'">'+url+'</a>' });
163 |         // Hashtags
164 |         msg = msg.replace( /(^|[^#\w])#(\w{1,30})\b/g, '$1<a href="hashtag/$2">#$2</a>' );
165 |         // Mentions
166 |         msg = msg.replace( /(^|[^@\w])@(\w{1,30})\b/g, '$1<a class="username" href="user/$2">$2</a>' );
167 |         // Emojis
168 |         msg = twemoji.parse(msg, {
169 |             base: '',
170 |             folder: 'node_modules/twemoji/svg',
171 |             ext: '.svg'
172 |         });
173 |         // Breaks / enters
174 |         msg = msg.replace(/(?:\r\n|\r|\n)/g, '<br />');
175 |         return msg;
176 |     },
177 | 
178 |     getTimeAgo: function ()
179 |     {
180 |         return moment(this.get('time') * 1000).fromNow();
181 |     },
182 | 
183 |     getDaysAgo: function ()
184 |     {
185 |         var now = moment(new Date());
186 |         var date = moment(this.get('last_time') * 1000);
187 |         return now.diff(date, 'days');
188 |     },
189 | 
190 |     getAsUserpost: function ()
191 |     {
192 |         var data = {
193 |             height: this.get('height'),
194 |             k: this.get('twister_id'),
195 |             lastk: this.get('last_twister_id'),
196 |             msg: this.get('message'),
197 |             n: this.get('user').get('username'),
198 |             time: this.get('time')
199 |         };
200 |         if (this.get('reply')) {
201 |             data.reply = {
202 |                 k: this.get('reply').twister_id,
203 |                 n: this.get('reply').username
204 |             };
205 |         }
206 |         return data;
207 |     },
208 | 
209 |     toRetwist: function ()
210 |     {
211 |         var sig_userpost = this.get('signature');
212 |         var userpost = this.getAsUserpost();
213 |         return {
214 |             sig_userpost: sig_userpost,
215 |             userpost: userpost
216 |         };
217 |     },
218 | 
219 |     getTopParent: function ()
220 |     {
221 |         var t = this;
222 |         // This is the top parent
223 |         if (!t.get('parent')) return t;
224 |         // Treverse to top
225 |         while(t.get('parent')) {
226 |             t = t.get('parent');
227 |         }
228 |         return t;
229 |     },
230 | 
231 |     getLastChild: function ()
232 |     {
233 |         var t = this;
234 | 
235 | 
236 |         if (t.get('replies').length == 0) return t;
237 | 
238 |         while(t.get('replies').length > 0) {
239 |             t = t.get('replies')[t.get('replies').length - 1];
240 |         }
241 |         return t;
242 |     },
243 | 
244 |     getType: function ()
245 |     {
246 |         if (this.get('twister_id') == null && this.get('reply')) {
247 |             return TYPES.COMPOSE_REPLY;
248 |         } else if (this.get('twister_id') == null) {
249 |             return TYPES.COMPOSE;
250 |         } else if (this.get('last_time') != this.get('time')) {
251 |             return TYPES.RETWIST;
252 |         } else if (this.get('reply')) {
253 |             return TYPES.REPLY;
254 |         }
255 |         return TYPES.POST;
256 |     },
257 | 
258 |     /**
259 |      * Returns the usernames of the users mentioned in this post
260 |      * without the '@'
261 |      */
262 |     getMentionedUsernames: function ()
263 |     {
264 |         var text = this.get('message');
265 |         var usernames = text.match( /(^|[^@\w])@(\w{1,30})\b/g);
266 |         if (!usernames) return [];
267 |         for (var i = 0; i < usernames.length; i++) {
268 |             usernames[i] = usernames[i].trim().substr(1);
269 |         }
270 |         return usernames;
271 |     }
272 | });
273 | 
274 | // TODO: not the best way to do this; saving a property on a backbone model
275 | module.exports.TYPES = TYPES;
276 | 


--------------------------------------------------------------------------------
/src/app/views/FeedContent.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     postsContent = _.template(require("../templates/content-feed.html")),
  9 |     postTemplate = _.template(require("../templates/post.html")),
 10 |     PostsCollection = require("../collections/posts"),
 11 |     UserCollection = require("../collections/users"),
 12 |     PostModel = require("../models/Post"),
 13 |     UserModel = require("../models/User"),
 14 |     FeedModel = require("../models/Feed"),
 15 |     PostPreview = require("../views/PostPreview"),
 16 |     Twister = require("../Twister"),
 17 |     async = require("async");
 18 | 
 19 | Backbone.$ = $;
 20 | 
 21 | module.exports = Backbone.View.extend({
 22 | 
 23 |     isLoading: false,
 24 |     dateOfLastPost: null,
 25 |     feed: null,
 26 |     pollingTimer: null,
 27 |     timeUpdateTimer: null,
 28 | 
 29 |     events: {
 30 |         "keypress .compose": "onTyping",
 31 |         "input .compose": "onTyping",
 32 |         "click button": "onSubmit",
 33 |         "click .newpost": "onNewPost",
 34 |         "click .post": "onPostClick",
 35 |         "click .post .actions .retwist": "retwist",
 36 |         "click .post .actions .reply": "reply",
 37 |         "click .post .actions .preview": "preview"
 38 |     },
 39 | 
 40 |     initialize: function(options) {
 41 |         var self = this;
 42 |         this.options = options;
 43 | 
 44 |         this.render();
 45 | 
 46 |         this.feed = new FeedModel();
 47 |         this.feed.get('posts').on('add', function (post, posts, info) {
 48 | 
 49 |             // The first post defines the time of the lastest posted post
 50 |             if (!self.dateOfLastPost) {
 51 |                 self.dateOfLastPost = post.get('time');
 52 |             }
 53 |             
 54 |             // When a post is younger than the youngest post, show notification
 55 |             if (post.get('time') > self.dateOfLastPost) {
 56 |                 self.$posts.prepend(postTemplate({post: post})).children().first().hide();
 57 |                 self.setNewPost(self.$posts.find('.post:hidden').length);
 58 |             } else {
 59 |                 // Otherwise just add it
 60 |                 self.$posts.append(postTemplate({post: post}));
 61 |             }
 62 |         });
 63 | 
 64 |         Twister.getFollowing(app.user.get('username'), function (err, usernames) {
 65 |             _.each(usernames, function (u) {
 66 |                 self.feed.get('users').add(new UserModel({username: u}));
 67 |             });
 68 | 
 69 |             // Get the first 10 posts
 70 |             self.loadPosts(true);
 71 | 
 72 |             // Every 30 seconds get latest posts
 73 |             if(!self.pollingTimer) self.pollingTimer = setInterval(self.loadPosts.bind(self, false, true), 30000);
 74 |         });
 75 | 
 76 |         if (!this.timeUpdateTimer) this.timeUpdateTimer = setInterval(this.updateTime.bind(this), 60000);
 77 | 
 78 |         $("#main-scrollable").scrollTop(0);
 79 |         this.options.parent.on('scroll', this.scroll, this);
 80 |     },
 81 | 
 82 |     setNewPost: function (n) {
 83 |         this.$newpost.text(n + ' new post' + (n > 1 ? 's' : ''));
 84 |         this.$newpost.show();
 85 |     },
 86 | 
 87 |     onNewPost: function () {
 88 |         this.$posts.find(".post:hidden").show();
 89 |         this.$newpost.hide();
 90 |     },
 91 | 
 92 |     onPostClick: function (e) {
 93 |         var id = $(e.currentTarget).attr('data-id');
 94 |         this.openPostDetail(id);
 95 |     },
 96 |     
 97 |     openPostDetail: function (id) {
 98 |         var post = this.feed.get('posts').get(id);
 99 | 
100 |         // Show original twist, not the retwist itself
101 |         if (post.get('retwist')) {
102 |             post = post.get('retwist');
103 |         }
104 | 
105 |         this.options.parent.openPreview(new PostPreview({post: post, feed: this.feed}));
106 |     },
107 | 
108 |     preview: function (e) {
109 |         e.stopPropagation();
110 |         var id = $(e.currentTarget).parents('.post').attr('data-id');
111 |         this.openPostDetail(id);
112 |     },
113 | 
114 |     retwist: function (e) {
115 |         e.stopPropagation();
116 |         var id = $(e.currentTarget).parents('.post').attr('data-id'),
117 |             post = this.feed.get('posts').get(id);
118 | 
119 |         // Retwist the original twist
120 |         if (post.get('retwist')) {
121 |             post = post.get('retwist');
122 |         }
123 | 
124 |         Twister.retwist(app.user.get('username'), post.toRetwist(), function (err, data) {
125 |             if (err) return console.error('Error retwisting twist', err);    
126 |         });
127 |     },
128 | 
129 |     reply: function (e) {
130 |         e.stopPropagation();
131 |         var id = $(e.currentTarget).parents('.post').attr('data-id'),
132 |             post = this.feed.get('posts').get(id);
133 | 
134 |         // Reply to the original twist
135 |         if (post.get('retwist')) {
136 |             post = post.get('retwist');
137 |         }
138 | 
139 |         this.$replyingTo.text("Replying to @" + post.get('user').get('username')).show();
140 |         this.replyingTo = post;
141 | 
142 |         $("#main-scrollable").scrollTop(0);
143 |         this.$input
144 |             .focus()
145 |             .html("@" + post.get('user').get('username') + "&nbsp;")
146 |             .keypress();
147 | 
148 |         this.setCursorToEnd(this.$input[0]);
149 | 
150 |         console.log('Reply to', post);
151 |     },
152 | 
153 |     setCursorToEnd: function (ele)
154 |     {
155 |         var range = document.createRange();
156 |         var sel = window.getSelection();
157 |         range.setStart(ele, 1);
158 |         range.collapse(true);
159 |         sel.removeAllRanges();
160 |         sel.addRange(range);
161 |         ele.focus();
162 |     },
163 | 
164 |     loadPosts: function (includeMaxId, isPolling) {
165 |         if (this.isLoading) return;
166 |         var self = this;
167 | 
168 |         // Polling call can be done at the same time as a scroll call
169 |         if (!isPolling) {
170 |             this.isLoading = true;
171 |             this.$loader.show();
172 |         }
173 | 
174 |         var sortDirection = isPolling ? 1 : -1;
175 |         this.feed.fetchPosts(10, {includeMaxId: includeMaxId, includeNotFollowers: false, sortDirection: sortDirection}, function (err) {
176 |             if (err) return console.error('Error fetching posts in feed:', err);
177 | 
178 |             // View is removed while posts where fetched
179 |             if (!self) return;
180 | 
181 |             if(!isPolling) self.$loader.hide();
182 | 
183 |             // Fetch avatars of users of which we don't have one yet
184 |             self.feed.fetchAvatars(function (err, user, postsToSetAvatar) {
185 |                 if (!user.get('avatar')) {
186 |                     console.log(user.get('username'), 'does not have an avatar');
187 |                     return;
188 |                 }
189 |                 _.each(postsToSetAvatar, function (post) {
190 |                     self.$posts.find('.post[data-id=' + post.id + '] .left img').attr('src', user.get('avatar'));
191 |                 });
192 |             });
193 | 
194 |             // Allowed to load the next page
195 |             if (!isPolling) self.isLoading = false;
196 |         });
197 |     },
198 | 
199 |     onTyping: function (e) {
200 |         e.stopPropagation();
201 |         var charcount = this.$input.text().length;
202 |         this.$charcount.text(140 - charcount + ' charachters left');
203 |         if (charcount > 0) {
204 |             this.$info.show();
205 |         } else {
206 |             this.replyingTo = null;
207 |             this.$replyingTo.text("").hide();
208 |             this.$info.hide();
209 |         }
210 |     },
211 | 
212 |     onSubmit: function (e) {
213 |         var self = this;
214 |         if (this.replyingTo) {
215 |             Twister.reply(app.user.get('username'), this.$input.text(), this.replyingTo.get('user').get('username'), this.replyingTo.get('twister_id'), function (err, data) {
216 |                 if (err) {
217 |                     return console.log('Error posting:', err);
218 |                 }
219 |                 self.$input.text("");
220 |                 self.$info.hide();
221 |                 self.replyingTo = null;
222 |             }.bind(this));
223 |         } else {
224 |             Twister.post(app.user.get('username'), this.$input.text(), function (err, data) {
225 |                 if (err) {
226 |                     return console.log('Error posting:', err);
227 |                 }
228 |                 self.$input.text("");
229 |                 self.$info.hide();
230 |             }.bind(this));
231 |         }
232 |     },
233 | 
234 |     scroll: function (e) {
235 |         var bottomOfScreen = $("#main-scrollable").height() + $("#main-scrollable").scrollTop();
236 |         var totalHeight = $("#main-scrollable")[0].scrollHeight;
237 | 
238 |         if (bottomOfScreen > totalHeight - 200 && this.feed.get('posts').length > 0) {
239 |             this.loadPosts(true);
240 |         }
241 |     },
242 | 
243 |     updateTime: function () {
244 |         var self = this;
245 |         this.$posts.children().each(function () {
246 |             var id = $(this).attr('data-id'),
247 |                 post = self.feed.get('posts').get(id);
248 | 
249 |             $(this).find('.date').text(post.getTimeAgo());
250 |         });
251 |     },
252 | 
253 |     render: function() {
254 |         // Render
255 |         this.$el.html(postsContent());
256 | 
257 |         // Save references to certain elements
258 |         this.$input = this.$el.find('.compose [contenteditable=true]');
259 |         this.$replyingTo = this.$el.find('.compose .replying-to');
260 |         this.$info = this.$el.find('.info');
261 |         this.$charcount = this.$el.find('.info span');
262 |         this.$loader = this.$el.find('.load-animation');
263 |         this.$newpost = this.$el.find('.newpost');
264 |         this.$posts = this.$el.find('.posts');
265 |         return this;
266 |     },
267 | 
268 |     remove: function() {
269 |         this.options.parent.off(null, null, this);
270 |         clearInterval(this.pollingTimer);
271 |         clearInterval(this.timeUpdateTimer);
272 |         Backbone.View.prototype.remove.apply(this, arguments);
273 |     }
274 | });
275 | 
276 | 


--------------------------------------------------------------------------------
/src/app/views/Feed.js:
--------------------------------------------------------------------------------
  1 | "use strict";
  2 | 
  3 | // External dependencies.
  4 | var $ = require("jquery"),
  5 |     Backbone = require("backbone"),
  6 |     app = require("../app"),
  7 |     _ = require("underscore"),
  8 |     postsContent = _.template(require("../templates/feed.html")),
  9 |     postTemplate = _.template(require("../templates/post.html")),
 10 |     PostsCollection = require("../collections/posts"),
 11 |     UserCollection = require("../collections/users"),
 12 |     PostModel = require("../models/Post"),
 13 |     UserModel = require("../models/User"),
 14 |     FeedModel = require("../models/Feed"),
 15 |     PostPreview = require("../views/PostPreview"),
 16 |     SlideOverlayView = require("../views/SlideOverlay"),
 17 |     PostView = require("../views/Post"),
 18 |     UserView = require("../views/User"),
 19 |     Twister = require("../Twister"),
 20 |     async = require("async");
 21 | 
 22 | Backbone.$ = $;
 23 | 
 24 | module.exports = Backbone.View.extend({
 25 | 
 26 |     isLoading: false,
 27 |     dateOfLastPost: null,
 28 |     feed: null,
 29 |     pollingTimer: null,
 30 |     timeUpdateTimer: null,
 31 |     getPostsToScrollRequests: 0,
 32 | 
 33 |     events: {
 34 |         "keyup .compose div": "onTyping",
 35 |         "click .post.new": "onNewPost",
 36 |         "click .retwisters span:nth-child(1)": "retwist",
 37 |         "click .post .avatar .icon": "openPost",
 38 |         "click .post": "openPost"
 39 |     },
 40 | 
 41 |     initialize: function(options) {
 42 |         var self = this;
 43 |         this.options = options;
 44 | 
 45 |         this.render();
 46 | 
 47 |         this.feed = new FeedModel();
 48 |         this.feed.get('posts').on('add', function (post, posts, info) {
 49 | 
 50 |             var ago = post.getDaysAgo();
 51 |             var $day = self.$feed.children('.posts[data-days-ago=' + ago + ']');
 52 |             if ($day.length == 0) {
 53 |                 self.$feed.append(
 54 |                     '<div class="days-ago">'
 55 |                     + post.getTimeAgo()
 56 |                     + '</div>'
 57 |                     + '<div class="posts line" data-days-ago="'+ago+'">'
 58 |                     + '</div>'
 59 |                 );
 60 |                 $day = self.$feed.children().last();
 61 |             }
 62 | 
 63 |             // The first post defines the time of the lastest posted post
 64 |             if (!self.dateOfLastPost) {
 65 |                 self.dateOfLastPost = post.get('last_time');
 66 |             }
 67 | 
 68 |             // When a post is younger than the youngest post, show notification
 69 |             if (post.getType() !== PostModel.TYPES.POST && window.localStorage[app.user.get('username') + '_hideRepliesAndRetwists'] === 'true') {
 70 |                 return;
 71 |             } else if (post.get('last_time') > self.dateOfLastPost) {
 72 |                 $day.first().children().first().after(postTemplate({post: post, icon: true})).next().hide();
 73 |                 self.setNewPost(self.$posts.find('.post:hidden').not(self.$newpost).length);
 74 |             } else {
 75 |                 // Otherwise just add it
 76 |                 $day.first().append(postTemplate({post: post, icon: true}));
 77 |             }
 78 |         });
 79 | 
 80 |         Twister.getFollowing(app.user.get('username'), function (err, usernames) {
 81 |             _.each(usernames, function (u) {
 82 |                 self.feed.get('users').add(new UserModel({username: u}));
 83 |             });
 84 | 
 85 |             // Get the first 10 posts
 86 |             self.loadPosts(true);
 87 | 
 88 |             // Every 30 seconds get latest posts
 89 |             if(!self.pollingTimer) self.pollingTimer = setInterval(self.poll.bind(self), 30000);
 90 |         });
 91 | 
 92 |         if (!this.timeUpdateTimer) this.timeUpdateTimer = setInterval(this.updateTime.bind(this), 60000);
 93 | 
 94 |         this.$el.scrollTop(0);
 95 | 
 96 |         app.mainView.on('scroll', this.scroll, this);
 97 |     },
 98 | 
 99 |     setNewPost: function (n) {
100 |         this.$newpost.children(".avatar").children("span").text(n);
101 |         this.$newpost.show();
102 |     },
103 | 
104 |     onNewPost: function () {
105 |         this.$posts.find(".post:hidden").show();
106 |         this.$posts.children().first().after(this.$newpost);
107 |         this.$newpost.hide();
108 |     },
109 | 
110 |     openPost: function (e) {
111 |         // Don't do anything if a link is clicked
112 |         if ($(e.target).is('a') || $(e.target).is('img')) {
113 |             return;
114 |         }
115 | 
116 |         var $post;
117 |         if ($(e.currentTarget).hasClass('post')) {
118 |             $post = $(e.currentTarget);
119 |         } else {
120 |             $post = $(e.currentTarget).parents('.post');
121 |         }
122 |         var id = $post.attr('data-id');
123 |         var post = this.feed.get('posts').get(id);
124 | 
125 |         // Couldn't find the post, might be a fake post or something went wrong
126 |         // anyway, abort mission
127 |         if (!post) return;
128 | 
129 |         e.stopImmediatePropagation();
130 |         e.preventDefault();
131 | 
132 |         // Show original twist, not the retwist itself
133 |         if (post.get('retwist')) {
134 |             post = post.get('retwist');
135 |         }
136 | 
137 |         app.dispatcher.trigger('open-post-detail', {
138 |             post: post,
139 |             feed: this.feed
140 |         });
141 |     },
142 | 
143 |     retwist: function (e) {
144 |         e.stopPropagation();
145 |         e.preventDefault();
146 | 
147 |         var id = $(e.currentTarget).parents('.post').attr('data-id'),
148 |             post = this.feed.get('posts').get(id);
149 | 
150 |         // Retwist the original twist
151 |         if (post.get('retwist')) {
152 |             post = post.get('retwist');
153 |         }
154 | 
155 |         app.dispatcher.trigger('open-confirm-popup', {
156 |             texts: {
157 |                 main: 'Are you sure you want to retwist this twist?',
158 |                 confirm: 'Yes',
159 |                 cancel: 'Cancel'
160 |             },
161 |             onConfirm: function () {
162 |                 Twister.retwist(app.user.get('username'), post.toRetwist(), function (err, data) {
163 |                     if (err) return console.error('Error retwisting twist', err);
164 |                 });
165 |             },
166 |             onCancel: function () {
167 |                 // Nothing to do
168 |             }
169 |         });
170 |     },
171 | 
172 |     reply: function (e) {
173 |         e.stopPropagation();
174 |         var id = $(e.currentTarget).parents('.post').attr('data-id'),
175 |             post = this.feed.get('posts').get(id);
176 | 
177 |         // Reply to the original twist
178 |         if (post.get('retwist')) {
179 |             post = post.get('retwist');
180 |         }
181 | 
182 |         this.$replyingTo.text("Replying to @" + post.get('user').get('username')).show();
183 |         this.replyingTo = post;
184 | 
185 |         $("#main-scrollable").scrollTop(0);
186 |         this.$input
187 |             .focus()
188 |             .html("@" + post.get('user').get('username') + "&nbsp;")
189 |             .keypress();
190 | 
191 |         this.setCursorToEnd(this.$input[0]);
192 |     },
193 | 
194 |     setCursorToEnd: function (ele)
195 |     {
196 |         var range = document.createRange();
197 |         var sel = window.getSelection();
198 |         range.setStart(ele, 1);
199 |         range.collapse(true);
200 |         sel.removeAllRanges();
201 |         sel.addRange(range);
202 |         ele.focus();
203 |     },
204 | 
205 |     poll: function (dontHide)
206 |     {
207 |         this.loadPosts(false, true, dontHide);
208 |     },
209 | 
210 |     loadPosts: function (includeMaxId, isPolling, dontHide) {
211 |         if (this.isLoading) return;
212 |         var self = this;
213 | 
214 |         // Polling call can be done at the same time as a scroll call
215 |         if (!isPolling) {
216 |             this.isLoading = true;
217 |             this.$loader.show();
218 |         }
219 | 
220 |         var sortDirection = isPolling ? 1 : -1;
221 |         this.feed.fetchPosts(10, {includeMaxId: includeMaxId, includeNotFollowers: false, sortDirection: sortDirection}, function (err) {
222 |             if (err) return console.error('Error fetching posts in feed:', err);
223 | 
224 |             // View is removed while posts where fetched
225 |             if (!self) return;
226 | 
227 |             // Hide the loader if the user was scrolling downwards
228 |             if(!isPolling) self.$loader.hide();
229 | 
230 |             // Immediately show new posts if this is prefered
231 |             if (dontHide) self.onNewPost();
232 | 
233 |             // Fetch avatars of users of which we don't have one yet
234 |             self.feed.fetchAvatars(function (err, user, postsToSetAvatar) {
235 |                 if (!user.get('avatar')) {
236 |                     console.log(user.get('username'), 'does not have an avatar');
237 |                     return;
238 |                 }
239 |                 // Healthier approach to the above, but doesn't handle retwists really well
240 |                 _.each(postsToSetAvatar, function (post) {
241 |                    self.$el.find('.post[data-id=' + post.id + '] img[data-username='+user.get('username')+']').attr('src', user.get('avatar'));
242 |                 });
243 |             });
244 | 
245 |             // Allowed to load the next page
246 |             if (!isPolling) self.isLoading = false;
247 | 
248 |             if (!app.mainView.isScrollable() && self.getPostsToScrollRequests < 10) {
249 |                 self.getPostsToScrollRequests += 1;
250 |                 self.loadPosts(true, false);
251 |             }
252 |         });
253 |     },
254 | 
255 |     onTyping: function (e) {
256 |         if (e) e.stopPropagation();
257 |         if (e && e.keyCode == 13) {
258 |             e.preventDefault();
259 |             this.submitPost();
260 |             return;
261 |         }
262 |         if (e && e.keyCode == 27) {
263 |             e.preventDefault();
264 |             this.$input.text("");
265 |         }
266 |         var charcount = this.$input.text().length;
267 |         this.$charcount.text(140 - charcount + ' charachters left');
268 |         if (charcount > 0) {
269 |             this.$charcount.show();
270 |             this.$input.parent().parent().addClass('editing');
271 |         } else {
272 |             this.$charcount.hide();
273 |             this.$input.parent().parent().removeClass('editing');
274 |         }
275 |     },
276 | 
277 |     submitPost: function () {
278 |         var self = this;
279 |         var $icon = this.$input.parent().parent().find('.icon');
280 | 
281 |         // Already submitting
282 |         if ($icon.hasClass('loading')) return;
283 | 
284 |         // Show that we are processing the post
285 |         $icon.addClass('loading');
286 | 
287 |         // Post
288 |         Twister.post(app.user.get('username'), this.$input.text(), function (err, data) {
289 |             if (err) {
290 |                 return console.log('Error posting:', err);
291 |             }
292 | 
293 |             // Posting done, reset everything
294 |             $icon.removeClass('loading');
295 |             self.$input.text("");
296 |             self.onTyping();
297 |             self.poll(true);
298 |         }.bind(this));
299 |     },
300 | 
301 |     scroll: function (e) {
302 |         var bottomOfScreen = $("#main-scrollable").height() + $("#main-scrollable").scrollTop();
303 |         var totalHeight = $("#main-scrollable")[0].scrollHeight;
304 | 
305 |         if (bottomOfScreen > totalHeight - 200 && this.feed.get('posts').length > 0) {
306 |             this.loadPosts(true);
307 |         }
308 |     },
309 | 
310 |     updateTime: function () {
311 |         var self = this;
312 |         // TODO
313 |         return;
314 |         this.$posts.children().each(function () {
315 |             var id = $(this).attr('data-id'),
316 |                 post = self.feed.get('posts').get(id);
317 | 
318 |             $(this).find('.date').text(post.getTimeAgo());
319 |         });
320 |     },
321 | 
322 |     render: function() {
323 |         // Render
324 |         this.$el.html(postsContent({
325 |             postTemplate: postTemplate,
326 |             post: new PostModel({type: 'compose', user: app.user})
327 |         }));
328 | 
329 |         // Save references to certain elements
330 |         this.$replyingTo = this.$el.find('.compose .replying-to');
331 |         this.$info = this.$el.find('.info');
332 |         this.$loader = this.$el.find('.load-animation');
333 |         this.$newpost = this.$el.find('.post.new');
334 |         this.$posts = this.$el.find('.posts');
335 |         this.$feed = this.$el.find('.feed .feed-posts');
336 |         this.$charcount = this.$feed.find('.characters');
337 |         this.$input = this.$feed.find('.compose div[contenteditable=true]');
338 |         return this;
339 |     },
340 | 
341 |     remove: function() {
342 |         this.$el.off(null, null, this);
343 |         app.mainView.off(null, null, this);
344 |         clearInterval(this.pollingTimer);
345 |         clearInterval(this.timeUpdateTimer);
346 |         Backbone.View.prototype.remove.apply(this, arguments);
347 |     }
348 | });
349 | 


--------------------------------------------------------------------------------