OSDN -- 開發和下載開源軟體
繁體中文翻譯狀態 translation status for zh-tw
  • R/O
  • HTTP
  • SSH
  • HTTPS
Fork

提交

標籤
無標籤

Frequently used words (click to add to your profile)

javac++androidlinuxc#windowsobjective-ccocoa誰得qtpythonphprubygameguibathyscaphec計画中(planning stage)翻訳omegatframeworktwitterdomtestvb.netdirectxゲームエンジンbtronarduinopreviewer

electron based twitter client


Commit MetaInfo

修訂5d666386c965200b672989aa5199d4f1d93784ca (tree)
時間2016-02-08 18:34:22
作者hylom <hylom@user...>
Commiterhylom

Log Message

use EJS template engine for formatting tweet, and add user icon for each tweet

Change Summary

差異

--- a/index.html
+++ b/index.html
@@ -1,19 +1,18 @@
1-<!DOCTYPE html>
2-<html>
3- <head>
4- <meta charset="UTF-8">
5- <title>Sprnkr</title>
6- <script src="./jquery.min.js"></script>
7- <link type="text/css" rel="stylesheet" href="./main.css" />
8- </head>
9- <body>
10- <div id="page-header">
11- <h1>Sprnkr</h1>
12- </div>
13- <div id="sprnkr-main">
14- <ul id="sprnkr-items">
15- </ul>
16- </div>
17- </body>
18- <script src="./view.js"></script>
19-</html>
1+<!DOCTYPE html>
2+<html>
3+ <head>
4+ <meta charset="UTF-8">
5+ <title>Sprnkr</title>
6+ <link type="text/css" rel="stylesheet" href="./main.css" />
7+ </head>
8+ <body>
9+ <div id="page-header">
10+ <h1>Sprnkr</h1>
11+ </div>
12+ <div id="sprnkr-main">
13+ <ul id="sprnkr-items">
14+ </ul>
15+ </div>
16+ </body>
17+ <script src="./view.js"></script>
18+</html>
--- a/main.css
+++ b/main.css
@@ -1,33 +1,51 @@
1-* {
2- marigin: 0;
3- padding: 0;
4-}
5-
6-#page-header h1 {
7- margin: 0 0 4px;
8- padding: 0;
9- background: black;
10- color: white;
11-}
12-#sprnkr-items {
13- list-style: none;
14-}
15-
16-#sprnkr-items li {
17- margin: 0 0 4px;
18- padding: 0 0 4px;
19- border-bottom: 1px solid #AAA;
20-}
21-#sprnkr-items .header {
22- font-size: 90%;
23-}
24-
25-#sprnkr-items .header .username {
26- font-weight: bold;
27-}
28-
29-#sprnkr-items .header .timestamp {
30- color: gray;
31- margin-left: 16px;
32-}
33-
1+* {
2+ marigin: 0;
3+ padding: 0;
4+}
5+
6+#page-header h1 {
7+ margin: 0 0 4px;
8+ padding: 0;
9+ background: black;
10+ color: white;
11+}
12+#sprnkr-items {
13+ list-style: none;
14+}
15+
16+#sprnkr-items li {
17+ margin: 0 0 8px;
18+ padding: 0 0 8px;
19+ border-bottom: 1px solid #E1E8ED;
20+ clear: left;
21+ min-height: 48px;
22+}
23+#sprnkr-items .icon {
24+ float: left;
25+ width: 48px;
26+ height: 48px;
27+}
28+
29+#sprnkr-items .header,
30+#sprnkr-items .body,
31+#sprnkr-items .footer {
32+ margin-left: 58px;
33+}
34+
35+#sprnkr-items .header {
36+ font-size: 90%;
37+}
38+
39+#sprnkr-items .header .username {
40+ font-weight: bold;
41+}
42+
43+#sprnkr-items .header .timestamp {
44+ color: gray;
45+ margin-left: 16px;
46+}
47+
48+#sprnkr-items .body {
49+ font-size: 90%;
50+ line-height: 1.4;
51+}
--- a/package.json
+++ b/package.json
@@ -1,27 +1,28 @@
1-{
2- "name": "sprnkr",
3- "version": "0.1.0",
4- "description": "A Twitter client",
5- "main": "main.js",
6- "scripts": {
7- "start": "electron main.js"
8- },
9- "repository": {
10- "type": "git",
11- "url": ""
12- },
13- "keywords": [
14- "Twitter"
15- ],
16- "author": "hylom",
17- "license": "GPLv3",
18- "bugs": {
19- "url": ""
20- },
21- "homepage": "",
22- "devDependencies": {
23- "electron-prebuilt": "^0.36.0",
24- "jquery": "2.2.0",
25- "twitter": "1.2.5"
26- }
27-}
1+{
2+ "name": "sprnkr",
3+ "version": "0.1.0",
4+ "description": "A Twitter client",
5+ "main": "main.js",
6+ "scripts": {
7+ "start": "electron main.js"
8+ },
9+ "repository": {
10+ "type": "git",
11+ "url": ""
12+ },
13+ "keywords": [
14+ "Twitter"
15+ ],
16+ "author": "hylom",
17+ "license": "GPLv3",
18+ "bugs": {
19+ "url": ""
20+ },
21+ "homepage": "",
22+ "devDependencies": {
23+ "electron-prebuilt": "^0.36.0",
24+ "jquery": "2.2.0",
25+ "twitter": "1.2.5",
26+ "ejs": "2.4.1"
27+ }
28+}
--- a/view.js
+++ b/view.js
@@ -1,41 +1,48 @@
1-var util = require('util');
2-var $ = require('jquery');
3-
4-function sprnkrViewMain () {
5- var tweetWriter = {};
6- tweetWriter.put = function write(tweet) {
7- if (tweet.user === undefined) {
8- return;
9- }
10- var name = tweet.user.name + ' (@' + tweet.user.screen_name + ')';
11- var timestamp = tweet.created_at;
12- var text = tweet.text;
13- var content = '<div class="header"><span class="username">' + name + '</span><span class="timestamp">' + timestamp + '</span></div>';
14- content += '<div class="body">'+ text + '</div>';
15- var elem = $("<li>" + content + "</li>");
16- $("#sprnkr-items").prepend(elem);
17- }
18- tweetWriter.write = function (tweet) {
19- if (util.isArray(tweet)) {
20- tweet.reverse();
21- tweet.forEach(this.put);
22- } else {
23- this.put(tweet);
24- }
25- };
26-
27- const remote = require('electron').remote;
28- var models = remote.require('./models');
29- models.getHomeTimeline(initTimeline);
30-
31- function initTimeline(err, tweets, resp) {
32- if (err) throw err;
33- tweetWriter.write(tweets);
34- models.stream(function(tweets) {
35- tweetWriter.write(tweets);
36- });
37- };
38-
39-}
40-
41-sprnkrViewMain();
1+var util = require('util');
2+var $ = require('jquery');
3+var ejs = require('ejs');
4+
5+function sprnkrViewMain () {
6+ var tweetWriter = {};
7+ tweetWriter.put = function write(tweet) {
8+ if (tweet.user === undefined) {
9+ return;
10+ }
11+ var tweetData = {
12+ name: tweet.user.name + ' (@' + tweet.user.screen_name + ')',
13+ timestamp: tweet.created_at,
14+ text: tweet.text,
15+ iconUrl: tweet.user.profile_image_url
16+ }
17+ var templ = '';
18+ templ += '<div class="icon"><img src="<%= iconUrl %>"/></div>';
19+ templ += '<div class="header"><span class="username"><%= name %></span><span class="timestamp"><%= timestamp %></span></div>';
20+ templ += '<div class="body"><%= text %></div>';
21+ var content = ejs.render(templ, tweetData);
22+ var elem = $("<li>" + content + "</li>");
23+ $("#sprnkr-items").prepend(elem);
24+ }
25+ tweetWriter.write = function (tweet) {
26+ if (util.isArray(tweet)) {
27+ tweet.reverse();
28+ tweet.forEach(this.put);
29+ } else {
30+ this.put(tweet);
31+ }
32+ };
33+
34+ const remote = require('electron').remote;
35+ var models = remote.require('./models');
36+ models.getHomeTimeline(initTimeline);
37+
38+ function initTimeline(err, tweets, resp) {
39+ if (err) throw err;
40+ tweetWriter.write(tweets);
41+ models.stream(function(tweets) {
42+ tweetWriter.write(tweets);
43+ });
44+ };
45+
46+}
47+
48+sprnkrViewMain();