Updated Message

Author: mateon-360

OddJobb/www/indMsg.html

@@ -0,0 +1,43 @@
+<div class="navbar">
+    <div class="navbar-inner">
+        <div class="left">
+            <a href="#" class="back link">
+                <i class="icon icon-back"></i>
+                <span>Back</span>
+            </a>
+        </div>
+        <!---->
+        <div class="center sliding">Messages</div>
+        <div class="right">
+            <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
+        </div>
+    </div>
+</div>
+
+<div class="page toolbar-fixed" data-page="indMsg">
+    <div class="page-content messages-content">
+        <div class="messages">
+            <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
+            <div class="message message-sent">
+                <div class="message-text">Hello</div>
+            </div>
+            <div class="message message-sent">
+                <div class="message-text">How are you?</div>
+            </div>
+            <div class="message message-received">
+                <div class="message-name">Kate</div>
+                <div class="message-text">I am fine, thanks</div>
+                <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
+            </div>
+            <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
+            <div class="message message-sent">
+                <div class="message-text">Nice photo?</div>
+            </div>
+        </div>
+        <div class="toolbar messagebar">
+            <div class="toolbar-inner">
+                <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
+            </div>
+        </div>
+    </div>
+</div>

OddJobb/www/js/my-app.js

@@ -25,9 +25,45 @@ myApp.onPageInit('about', function (page) {
     myApp.alert('Here comes About page');
 })
 
+
+//Each message Page
+myApp.onPageInit('indMsg', function (page) {
+    messagesMain();
+})
+
 //Messages Page
 myApp.onPageInit('messages', function (page) {
-    messagesMain();
+    //messagesMain();
+    /*
+    1. Do AJAX call
+    2. Put data into Array
+    3. Set array
+    */
+    const people = [
+        /*
+        {
+            name: nameOfPerson
+            message: This is a mess...
+            
+        }*/
+    ];
+
+    for (var i = 0; i < 10; i++) {
+        people.push({
+            item: i
+        });
+    }
+
+    const myListOfPeople = myApp.virtualList('.list-block.virtual-list', {
+        items: people,
+        template:
+        '<li>' +
+        '<a href="indMsg.html?messageId={{item}}" class="item-link item-content">' +
+        '<div>{{item}}</div>' +
+        '</a>' +
+        '</div>' +
+        '</li>'
+    });
 })
 
 myApp.onPageInit('post', function (page) {

OddJobb/www/messages.html

@@ -14,30 +14,12 @@
     </div>
 </div>
 
-<div class="page toolbar-fixed" data-page="messages">
-    <div class="page-content messages-content">
-        <div class="messages">
-            <div class="messages-date">Sunday, Feb 9 <span>12:58</span></div>
-            <div class="message message-sent">
-                <div class="message-text">Hello</div>
-            </div>
-            <div class="message message-sent">
-                <div class="message-text">How are you?</div>
-            </div>
-            <div class="message message-received">
-                <div class="message-name">Kate</div>
-                <div class="message-text">I am fine, thanks</div>
-                <div style="background-image:url(http://lorempixel.com/output/people-q-c-100-100-9.jpg)" class="message-avatar"></div>
-            </div>
-            <div class="messages-date">Sunday, Feb 3 <span>11:58</span></div>
-            <div class="message message-sent">
-                <div class="message-text">Nice photo?</div>
+<div class="pages">
+    <div data-page="messages" class="page">
+        <div class="page-content">
+            <div class="list-block virtual-list">
+                <a href="#"></a>
             </div>
         </div>
-        <div class="toolbar messagebar">
-            <div class="toolbar-inner">
-                <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>
-            </div>
-        </div>   
     </div>
 </div>