Finished tweet & comment module

.jshintrc

@@ -25,6 +25,7 @@
         "$$": true,
         "Template7": true,
         "Framework7": true,
+        "homeF7View": true,
         "i18n": true,
         "hiApp": true,
         "define": true,

src/api/comments.json

@@ -3,25 +3,25 @@
     "err_msg": "success",
     "data": [
         {
-            "avatar":"01",
+            "avatar":"1",
             "name":"Cory Bergman",
             "text":"wow that's some serious chat action",
             "time":"1404705240"
         },
         {
-            "avatar":"02",
+            "avatar":"2",
             "name":"Rhonda Irvine",
             "text":"what country is covered by your food app?",
             "time":"1404705260"
         },
         {
-            "avatar":"03",
+            "avatar":"3",
             "name":"Nathan Lawson",
             "text":"much  more interesting than a stupid grumpy cat",
             "time":"1404705300"
         },
         {
-            "avatar":"04",
+            "avatar":"4",
             "name":"Vaughn",
             "text":"Signed the petition. Hope it's not too late.",
             "time":"1404705400"

src/modules/app/app.less

@@ -1,5 +1,3 @@
-@import "../../style/less/mixins";
-
-.orange {
-  color: @mainColor !important;
+.views {
+  overflow-y: hidden;
 }

src/modules/comment/comment.js

@@ -0,0 +1,95 @@
+var appFunc = require('../utils/appFunc'),
+    service = require('./service'),
+    template = require('./comment.tpl.html'),
+    popupTpl = require('./commentPopup.tpl.html');
+
+var commentModule = {
+    init: function(){
+        this.getComments();
+    },
+    getComments: function(){
+        service.getComments(function(c){
+            var random = Math.floor(Math.random()*2);
+            if(!random) c = null;
+
+            setTimeout(function(){
+                var renderData = {
+                    comments: c,
+                    rtime: function(){
+                        return appFunc.timeFormat(this.time);
+                    }
+                };
+                var output = appFunc.renderTpl(template, renderData);
+                $$('#commentContent').html(output);
+            },1500);
+        });
+    },
+    commentPopup: function(params){
+        var renderData = {
+            comment: i18n.timeline.comment
+        };
+
+        if(params.name){
+            renderData.title = i18n.comment.reply_comment;
+            renderData.placeholder = i18n.comment.reply + '@' + params.name + ':';
+        }else {
+            renderData.title = i18n.timeline.comment;
+            renderData.placeholder = i18n.comment.placeholder;
+        }
+
+        var output = appFunc.renderTpl(popupTpl, renderData);
+        hiApp.popup(output);
+
+        var bindings = [{
+            element:'#commentBtn',
+            event: 'click',
+            handler: commentModule.sendComment
+        }];
+
+        appFunc.bindEvents(bindings);
+    },
+    sendComment: function(){
+        var text = $$('#commentText').val();
+
+        if(appFunc.getCharLength(text) < 4){
+            hiApp.alert(i18n.index.err_text_too_short);
+            return false;
+        }
+
+        hiApp.showPreloader(i18n.comment.commenting);
+
+        setTimeout(function(){
+            hiApp.hidePreloader();
+            hiApp.closeModal('.comment-popup');
+
+            //Refresh comment content
+        },1500);
+    },
+    createActionSheet: function(){
+        var replyName = $$(this).find('.comment-detail .name').html();
+        var buttons1 = [
+            {
+                text: i18n.comment.reply_comment,
+                bold: true,
+                onClick:function(){
+                    commentModule.commentPopup({name:replyName});
+                }
+            },
+            {
+                text: i18n.comment.copy_comment ,
+                bold: true
+            }
+        ];
+        var buttons2 = [
+            {
+                text: i18n.global.cancel,
+                color: 'red'
+            }
+        ];
+
+        var groups = [buttons1, buttons2];
+        hiApp.actions(groups);
+    }
+};
+
+module.exports = commentModule;

src/modules/comment/comment.tpl.html

@@ -0,0 +1,17 @@
+{{#each comments}}
+<li class="comment-item">
+    <div class="avatar">
+        <img src="http://lorempixel.com/68/68/people/{{avatar}}/" alt="">
+    </div>
+    <div class="comment-detail">
+        <div class="name">{{name}}</div>
+        <div class="text">{{text}}</div>
+        <div class="time">{{rtime}}</div>
+    </div>
+</li>
+{{else}}
+<div class="none-comment">
+    <i class="icon ios7-chatboxes-outline"></i>
+    <p>{{t i18n="i18n.comment.empty_comment"}}</p>
+</div>
+{{/each}}

src/modules/comment/commentPopup.tpl.html

@@ -0,0 +1,27 @@
+<div class="popup comment-popup">
+    <div class="view navbar-fixed">
+        <div class="page">
+            <div class="navbar">
+                <div class="navbar-inner">
+                    <div class="left"><a href="#" class="link close-popup">{{t i18n="global.cancel"}}</a></div>
+                    <div class="center">{{title}}</div>
+                    <div class="right"><a id="commentBtn" href="#" class="link color-orange">{{t i18n="global.send"}}</a></div>
+                </div>
+            </div>
+            <div class="page-content message-content">
+
+                <div class="message-input">
+                    <textarea id="commentText" placeholder="{{placeholder}}"></textarea>
+                </div>
+
+                <div class="message-tools">
+                    <ul>
+                        <li><i class="icon ios7-emotion"></i></li>
+                        <li><i class="icon ios7-at-outline"></i></li>
+                    </ul>
+                </div>
+
+            </div>
+        </div>
+    </div>
+</div>

src/modules/comment/service.js

@@ -0,0 +1,11 @@
+var xhr = require('../utils/xhr');
+
+module.exports = {
+    getComments: function(callback) {
+        xhr.simpleCall({
+            func: 'comments'
+        }, function (res) {
+            callback(res.data);
+        });
+    }
+};

src/modules/home/home.js

@@ -141,6 +141,13 @@ var home = {
             $$('#homeView').find('.home-timeline').html(output);
         }
     },
+    openItemPage: function(e){
+        if(e.target.nodeName === 'A' || e.target.nodeName === 'IMG'){
+            return false;
+        }
+        var itemId = $$(this).data('id');
+        homeF7View.router.loadPage('page/tweet.html?id=' + itemId);
+    },
     bindEvent: function(){
 
         var bindings = [{
@@ -165,9 +172,9 @@ var home = {
             handler: inputModule.openSendPopup
         },{
             element: '#homeView',
-            selector: '.time-line-content .item-content .click-content',
+            selector: '.home-timeline .ks-facebook-card',
             event: 'click',
-            //handler: VM.module('timelineView').openItemPage
+            handler: this.openItemPage
         },{
             element: '#homeView',
             selector:'div.card-content .item-image>img',

src/modules/home/home.less

@@ -15,36 +15,37 @@
 }
 .home-timeline {
   padding-bottom: 15px;
-  .ks-facebook-card {
-    .card-header {
-      display: block;
-      padding: 10px;
-    }
-    .ks-facebook-avatar {
-      float: left;
-    }
-    .ks-facebook-name {
-      margin-left: 44px;
-      font-size: 14px;
+}
+.ks-facebook-card {
+  .card-header {
+    display: block;
+    padding: 10px;
+  }
+  .ks-facebook-avatar {
+    float: left;
+  }
+  .ks-facebook-name {
+    margin-left: 44px;
+    font-size: 14px;
+    font-weight: 500;
+    color: @mainColor;
+  }
+  .ks-facebook-date {
+    margin-left: 44px;
+    font-size: 13px;
+    color: #8e8e93;
+  }
+  .card-footer {
+    background: #fafafa;
+    a {
+      color: #81848b;
       font-weight: 500;
     }
-    .ks-facebook-date {
-      margin-left: 44px;
-      font-size: 13px;
-      color: #8e8e93;
-    }
-    .card-footer {
-      background: #fafafa;
-      a {
-        color: #81848b;
-        font-weight: 500;
-      }
-      img {
-        display: block;
-      }
-    }
-    .card-content-inner {
-      padding: 15px 10px;
+    img {
+      display: block;
     }
   }
-}
+  .card-content-inner {
+    padding: 15px 10px;
+  }
+}

src/modules/home/home.tpl.html

@@ -1,7 +1,7 @@
 {{#timeline}}
 <div data-id="{{id}}" class="card ks-facebook-card">
     <div class="card-header">
-        <div class="ks-facebook-avatar"><img src="http://lorempixel.com/68/68/people/{{avatar}}/" width="34" height="34"></div>
+        <div class="ks-facebook-avatar" data-avatar-id="{{avatar}}"><img src="http://lorempixel.com/68/68/people/{{avatar}}/" width="34" height="34"></div>
         <div class="ks-facebook-name">{{nickname}}</div>
         <div class="ks-facebook-date" data-time="{{created_at}}">{{../time}}</div>
     </div>

src/modules/input/input.tpl.html

@@ -5,7 +5,7 @@
                 <div class="navbar-inner">
                     <div class="left"><a href="#" class="link close-popup">{{t i18n="global.cancel"}}</a></div>
                     <div class="center">{{t i18n="index.sen_tweet"}}</div>
-                    <div class="right"><a id="sendWeiboBtn" href="#" class="link orange">{{t i18n="global.send"}}</a></div>
+                    <div class="right"><a id="sendWeiboBtn" href="#" class="link color-orange">{{t i18n="global.send"}}</a></div>
                 </div>
             </div>
             <div class="page-content message-content">

src/modules/main.js

@@ -1,5 +1,6 @@
 require('framework7');
 require('framework7.ios.css');
+require('framework7.ios.colors.css');
 require('../style/less/app.less');
 
 var appFunc = require('./utils/appFunc'),
@@ -76,10 +77,18 @@ var app = {
             modalTitle: i18n.global.modal_title,
             modalButtonOk: i18n.global.modal_button_ok,
             modalButtonCancel: i18n.global.cancel,
-            preprocess: router.preprocess
+            template7Pages: true,
+            template7Data: {
+                'page:item': {
+                    back: i18n.global.back,
+                    title: i18n.item.title,
+                    comment: i18n.timeline.comment,
+                    forward: i18n.timeline.forward
+                }
+            }
         });
 
-        hiApp.addView('#homeView', {
+        window.homeF7View = hiApp.addView('#homeView', {
             dynamicNavbar: true
         });
 
@@ -92,6 +101,7 @@ var app = {
         });
 
         // init app
+        router.init();
         index.init();
     }
 };