Commit 175374a0 authored by MrMan's avatar MrMan

Add email service and working single email selection

parent 8e0e98a7
/* global m */
var LHS_NAV_ITEMS = [
{
title: "Inbox",
......@@ -62,30 +64,35 @@ function randomPastDate() {
var EMAILS = [
{
id: "QyLruCuUQ4SOy0JTkOuJ3VdOk8HbDuw3",
from: {name: "Victor Erixon", email: "victor.erixon@example.com"},
subject: "Theories of Design",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
id: "KpjgJQT8nIBdLj1NCjCPPvZJBtzhhixn",
from: {name: "Jacob Hubertus", email: "jacob.hubertus@example.com"},
subject: "Street Photography",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
id: "JiTTyuQ2XUakNd6xSeolyoWEpeNjOwJi",
from: {name: "August Berglund", email: "august.berglund@example.com"},
subject: "HTML+CSS Tutorials?",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
id: "XlwnoP5EUNiauVn8anBba1Ui2NeSwUCg",
from: {name: "Rick Brunstedt", email: "rick.brunstedt@example.com"},
subject: "Train Crossing",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
sendDate: randomPastDate(),
},
{
id: "w5smg1YFSo9ANXZQe56bQkNxcX1mJK16",
from: {name: "Webydo Team", email: "team@webydo.com"},
subject: "Does Webydo have what you're looking for? ",
text: "Molestias deserunt veritatis modi ut fugiat sint. Dolorum vel autem sint. Dolores accusamus dolores occaecati tenetur adipisci asperiores",
......@@ -103,6 +110,63 @@ EMAILS = EMAILS.sort(function(a, b) {
var ELLIPSIS_CHAR_LIMIT = 60;
/**
* Email service that will manage checking
*
* Note: Mithril can't redraw subtrees yet (https://github.com/MithrilJS/mithril.js/issues/1907), so m.redraw() is everywhere
*/
function EmailService() {
this.selectedEmailId = null;
this.checkedEmailIds = {};
this.allEmailsChecked = false;
}
EmailService.prototype.selectEmailById = function(id, opts) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
console.log("[email-svc] selected email with id:", id);
this.selectedEmailId = id;
if (opts && opts.redraw) { m.redraw(); }
};
EmailService.prototype.getEmailSelectedStatus = function(id) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
return this.selectedEmailId === id;
};
EmailService.prototype.checkEmailById = function(id, opts) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
console.log("[email-svc] checked email with id:", id);
this.checkedEmailIds[id] = true;
if (opts && opts.redraw) { m.redraw(); }
};
EmailService.prototype.getEmailCheckedStatusById = function(id) {
if (!id) { throw new Error("Invalid email object, ID is missing"); }
return this.allEmailsChecked ? true : id in this.checkedEmailIds;
};
EmailService.prototype.clearCheckedEmails = function(opts) {
this.allEmailsChecked = false;
this.checkedEmailIds = {};
console.log("[email-svc] cleared checked emails");
if (opts && opts.redraw) { m.redraw(); }
};
EmailService.prototype.checkAllEmails = function(opts) {
this.allEmailsChecked = true;
console.log("[email-svc] checked all emails");
if (opts && opts.redraw) { m.redraw(); }
};
var EMAIL_SVC = new EmailService();
////////////////////
// LHS Navigation //
////////////////////
......@@ -302,32 +366,43 @@ var EmailListItem = {
var textContent = email.text || "";
var formattedSendDate = email.sendDate.toLocaleString();
return m(".component.email-list-item", [
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
onclick: function() {
if (vnode.attrs.onSelected) {
vnode.attrs.onSelected(email);
var isSelected = EMAIL_SVC.getEmailSelectedStatus(email.id);
var additionalClasses = [];
if (isSelected) { additionalClasses.push("selected"); }
return m(
".component.email-list-item",
{
class: additionalClasses.join(" "),
onclick: function() { EMAIL_SVC.selectEmailById(email.id); }
},
[
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
onclick: function() {
if (vnode.attrs.onSelected) {
vnode.attrs.onSelected(email);
}
}
}
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
]),
m(".rhs", [
m(".date", formattedSendDate)
])
]),
m(".rhs", [
m(".date", formattedSendDate)
])
]),
m(".blurb.md-margin-top", [
m("p.subject", email.subject),
// This is not a great way to do ellipsis but... it'll work for the demo.
m("p.body-preview", textContent.substring(0, ELLIPSIS_CHAR_LIMIT) + "..."),
]),
m(".blurb.md-margin-top", [
m("p.subject", email.subject),
// This is not a great way to do ellipsis but... it'll work for the demo.
m("p.body-preview", textContent.substring(0, ELLIPSIS_CHAR_LIMIT) + "..."),
]),
]);
]);
}
};
......
......@@ -255,6 +255,11 @@ img.icon-lg { height: 2em; }
color: gray;
}
.component.email-list-item.selected {
background-color: #b4eced;
border-left: .5em solid #02bfc0;
}
/********************/
/* Mail Page Subnav */
/********************/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment