Commit 1d7af6ca authored by MrMan's avatar MrMan

Do some naive bundling

parent 5db072c3
var Badge = {
view: function(vnode) {
var styles = [];
var content = vnode.attrs.content || "";
var bgColor = vnode.attrs.cssBgColor || "gray";
var color = vnode.attrs.cssBgColor || "white";
var emptySquare = vnode.attrs.emptySquare;
var classes = ["component", "badge"];
styles.push("background-color:" + vnode.attrs.cssBgColor);
styles.push("color:" + vnode.attrs.cssColor);
var combinedStyles = styles.join(";");
if (emptySquare) { classes.push("empty-square"); }
return m("div", {class: classes.join(" "), style: combinedStyles}, content);
}
};
var ButtonGroup = {
view: function(vnode) {
return m("span.component.button-group", {class: vnode.attrs.class}, vnode.children);
}
};
var DropDownButton = {
view: function(vnode) {
var title = vnode.attrs.title || "Button";
return m("button.component.drop-down-button.gray-boxed.clickable", [
m("span", title),
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
]);
}
};
var EmailListItem = {
view: function(vnode) {
var email = vnode.attrs.email;
var textContent = email.text || "";
var formattedSendDate = email.sendDate.toLocaleString();
var isSelected = EMAIL_SVC.getEmailSelectedStatusById(email.id);
var isChecked = EMAIL_SVC.getEmailCheckedStatusById(email.id);
var additionalClasses = [];
if (isSelected) { additionalClasses.push("selected"); }
return m(
".component.email-list-item.clickable",
{
class: additionalClasses.join(" "),
onclick: function() { EMAIL_SVC.toggleSelectionStatusById(email.id); }
},
[
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
checked: isChecked,
onclick: function() { EMAIL_SVC.toggleCheckedStatusById(email.id); }
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
]),
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) + "..."),
]),
]);
}
};
var EmailListItem = {
view: function(vnode) {
var email = vnode.attrs.email;
var textContent = email.text || "";
var formattedSendDate = email.sendDate.toLocaleString();
var isSelected = EMAIL_SVC.getEmailSelectedStatusById(email.id);
var isChecked = EMAIL_SVC.getEmailCheckedStatusById(email.id);
var additionalClasses = [];
if (isSelected) { additionalClasses.push("selected"); }
return m(
".component.email-list-item.clickable",
{
class: additionalClasses.join(" "),
onclick: function() { EMAIL_SVC.toggleSelectionStatusById(email.id); }
},
[
m(".header", [
m(".lhs", [
m("input[type=checkbox]", {
checked: isChecked,
onclick: function() { EMAIL_SVC.toggleCheckedStatusById(email.id); }
}),
m("span.sm-margin-left.sender", email.from.name),
m("span.sm-margin-left.tag", email.label),
]),
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) + "..."),
]),
]);
}
};
var EmailList = {
oninit: function() {
this.selectedEmails = {};
......
var HeaderButton = {
view: function(vnode) {
var text = vnode.attrs.title || "Compose Mail";
var iconName = vnode.attrs.iconName || "pencil-white.svg";
var iconPrefix = "static/images/icons/";
return m("button", {class: "component header-button"}, [
m("span", text),
m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
]);
}
};
var LHSNavHeader = {
view: function() {
return m("header", [
m(HeaderButton),
]);
}
};
var LHSNavLabelList = {
view: function() {
var labelItems = LHS_LABEL_ITEMS;
return m(NavItemListing, {items: labelItems});
}
};
var LHSNavPageList = {
view: function() {
// Mark the nav items with the correct selected property
var currentPath = m.route.get();
var navItems = LHS_NAV_ITEMS.map(function(item) {
item.selected = currentPath === item.route;
return item;
});
return m(NavItemListing, {items: navItems});
}
};
var HeaderButton = {
view: function(vnode) {
var text = vnode.attrs.title || "Compose Mail";
var iconName = vnode.attrs.iconName || "pencil-white.svg";
var iconPrefix = "static/images/icons/";
return m("button", {class: "component header-button"}, [
m("span", text),
m("img", {class: "sm-margin-left icon", src: iconPrefix + iconName }),
]);
}
};
var LHSNavHeader = {
view: function() {
return m("header", [
m(HeaderButton),
]);
}
};
var Badge = {
view: function(vnode) {
var styles = [];
var content = vnode.attrs.content || "";
var bgColor = vnode.attrs.cssBgColor || "gray";
var color = vnode.attrs.cssBgColor || "white";
var emptySquare = vnode.attrs.emptySquare;
var classes = ["component", "badge"];
styles.push("background-color:" + vnode.attrs.cssBgColor);
styles.push("color:" + vnode.attrs.cssColor);
var combinedStyles = styles.join(";");
if (emptySquare) { classes.push("empty-square"); }
return m("div", {class: classes.join(" "), style: combinedStyles}, content);
}
};
var NavItem = {
view: function(vnode) {
var data = vnode.attrs.data || {};
var title = data.title || "Placeholder";
var iconImgSrc = data.iconImgSrc;
var badgeContent = data.badgeContent || 0;
var badgeCSSBgColor = data.badgeCSSBgColor;
var badgeEmptySquare = data.badgeEmptySquare;
var children = [title];
var classes = ["component", "nav-item", "md-padding-horiz"];
if (data.selected) { classes.push("selected"); }
// If there's an icon specified display it
if (iconImgSrc) {
children.unshift(m("img", {class: "sm-margin-left sm-margin-right icon", src: iconImgSrc}));
} else {
children.unshift(m("div", {class: "placeholder-1em"}));
}
// If badgeColor and badgeContent are specified then show a badge
if (badgeEmptySquare && badgeCSSBgColor || badgeContent && badgeCSSBgColor) {
children.push(m("div", {class: "badge-container float-right"}, [
m(Badge, {
class: "float-right",
cssBgColor: badgeCSSBgColor,
content: badgeContent,
emptySquare: badgeEmptySquare
})
]));
}
return m("li.clickable", {
class: classes.join(" "),
onclick: function(e) {
// Navigate to the appropriate link for this
m.route.set(data.route);
},
}, children);
}
};
var NavItemListing = {
view: function(vnode) {
var navItems = vnode.attrs.items || [];
var children = navItems.map(function(i) {
return m(NavItem, {data: i});
});
return m("ul", {class: "component nav-item-listing"}, children);
}
};
var LHSNavPageList = {
view: function() {
// Mark the nav items with the correct selected property
var currentPath = m.route.get();
var navItems = LHS_NAV_ITEMS.map(function(item) {
item.selected = currentPath === item.route;
return item;
});
return m(NavItemListing, {items: navItems});
}
};
var LHSNavLabelList = {
view: function() {
var labelItems = LHS_LABEL_ITEMS;
return m(NavItemListing, {items: labelItems});
}
};
var LHSNav = {
view: function() {
return m("div", {class: "component lhs-nav"}, [
......
var LoadingIndicator = {
view: function(vnode) {
var title = vnode.attrs.title || "Loading...";
return m(".component.loading-indicator", [
m("img.icon.loading-icon", {src: "static/images/icons/loader-gray.svg"}),
m(".title", title),
]);
},
};
var MultiSelectCheckbox = {
view: function(vnode) {
var allEmailsChecked = vnode.attrs.allEmailsChecked;
var oneOrMoreEmailsChecked = vnode.attrs.oneOrMoreEmailsChecked;
var dropdownContentClasses = [];
var dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true;
if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); }
var selectionIconSrc = "static/images/icons/square.svg";
if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; }
if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; }
var selectionText = "Select All";
if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
if (allEmailsChecked) { selectionText = "Unselect All"; }
var clickHandler = function() { EMAIL_SVC.checkAllEmails(); };
if (allEmailsChecked || oneOrMoreEmailsChecked) { clickHandler = function() { EMAIL_SVC.clearCheckedEmails(); }; }
return m(
"span.component.multi-select-checkbox.gray-boxed.clickable",
{onclick: clickHandler},
[
m("span", [
m("img.icon", {src: selectionIconSrc}),
m("span.xs-margin-left", selectionText),
]),
]);
}
};
var ButtonGroup = {
view: function(vnode) {
return m("span.component.button-group", {class: vnode.attrs.class}, vnode.children);
}
};
var DropDownButton = {
view: function(vnode) {
var title = vnode.attrs.title || "Button";
return m("button.component.drop-down-button.gray-boxed.clickable", [
m("span", title),
m("img.xs-margin-left.icon", {src: "static/images/icons/chevron-down.svg"}),
]);
}
};
var PaginationControls = {
view: function(vnode) {
var title = vnode.attrs.title || "Button";
var lowerBound = 0;
var upperBound = 50;
var boundStatement = lowerBound + " - " + upperBound;
var total = 100;
return m(".component.pagination-controls", [
m("strong", boundStatement),
m("span", " of "),
m("strong", total),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-left.svg"}),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-right.svg"}),
]);
}
};
var MailPageSubNav = {
view: function(vnode) {
var allEmailsChecked = EMAIL_SVC.allEmailsChecked();
......
var MultiSelectCheckbox = {
view: function(vnode) {
var allEmailsChecked = vnode.attrs.allEmailsChecked;
var oneOrMoreEmailsChecked = vnode.attrs.oneOrMoreEmailsChecked;
var dropdownContentClasses = [];
var dropdownContentHidden = "dropdownContentHidden" in vnode.attrs ? vnode.attrs.dropdownContentHidden : true;
if (dropdownContentHidden) { dropdownContentClasses.push("hidden"); }
var selectionIconSrc = "static/images/icons/square.svg";
if (oneOrMoreEmailsChecked) { selectionIconSrc = "static/images/icons/minus-square.svg"; }
if (allEmailsChecked) { selectionIconSrc = "static/images/icons/check-square.svg"; }
var selectionText = "Select All";
if (oneOrMoreEmailsChecked) { selectionText = "Clear Selection"; }
if (allEmailsChecked) { selectionText = "Unselect All"; }
var clickHandler = function() { EMAIL_SVC.checkAllEmails(); };
if (allEmailsChecked || oneOrMoreEmailsChecked) { clickHandler = function() { EMAIL_SVC.clearCheckedEmails(); }; }
return m(
"span.component.multi-select-checkbox.gray-boxed.clickable",
{onclick: clickHandler},
[
m("span", [
m("img.icon", {src: selectionIconSrc}),
m("span.xs-margin-left", selectionText),
]),
]);
}
};
var NavItemListing = {
view: function(vnode) {
var navItems = vnode.attrs.items || [];
var children = navItems.map(function(i) {
return m(NavItem, {data: i});
});
return m("ul", {class: "component nav-item-listing"}, children);
}
};
var NavItem = {
view: function(vnode) {
var data = vnode.attrs.data || {};
var title = data.title || "Placeholder";
var iconImgSrc = data.iconImgSrc;
var badgeContent = data.badgeContent || 0;
var badgeCSSBgColor = data.badgeCSSBgColor;
var badgeEmptySquare = data.badgeEmptySquare;
var children = [title];
var classes = ["component", "nav-item", "md-padding-horiz"];
if (data.selected) { classes.push("selected"); }
// If there's an icon specified display it
if (iconImgSrc) {
children.unshift(m("img", {class: "sm-margin-left sm-margin-right icon", src: iconImgSrc}));
} else {
children.unshift(m("div", {class: "placeholder-1em"}));
}
// If badgeColor and badgeContent are specified then show a badge
if (badgeEmptySquare && badgeCSSBgColor || badgeContent && badgeCSSBgColor) {
children.push(m("div", {class: "badge-container float-right"}, [
m(Badge, {
class: "float-right",
cssBgColor: badgeCSSBgColor,
content: badgeContent,
emptySquare: badgeEmptySquare
})
]));
}
return m("li.clickable", {
class: classes.join(" "),
onclick: function(e) {
// Navigate to the appropriate link for this
m.route.set(data.route);
},
}, children);
}
};
var PaginationControls = {
view: function(vnode) {
var title = vnode.attrs.title || "Button";
var lowerBound = 0;
var upperBound = 50;
var boundStatement = lowerBound + " - " + upperBound;
var total = 100;
return m(".component.pagination-controls", [
m("strong", boundStatement),
m("span", " of "),
m("strong", total),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-left.svg"}),
m("img.xs-margin-left.icon-lg.gray-boxed.valign-mid", {src: "static/images/icons/chevron-right.svg"}),
]);
}
};
var LoadingIndicator = {
view: function(vnode) {
var title = vnode.attrs.title || "Loading...";
return m(".component.loading-indicator", [
m("img.icon.loading-icon", {src: "static/images/icons/loader-gray.svg"}),
m(".title", title),
]);
},
};
var WithRouteTriggeredLoader = {
oninit: function(vnode) {
this.loadFn = vnode.attrs.loadFn;
......
......@@ -10,30 +10,25 @@
<body>
<script src="static/vendor/mithril/1.1.6/mithril.min.js"></script>
<script src="components/badge.js"></script>
<script src="components/button-group.js"></script>
<script src="components/draft-mail.js"></script>
<script src="components/drop-down-button.js"></script>
<script src="components/email-list-item.js"></script>
<script src="components/email-list.js"></script>
<script src="components/header-button.js"></script>
<script src="components/important-mail.js"></script>
<script src="components/inbox-mail.js"></script>
<script src="components/lhs-nav-header.js"></script>
<script src="components/lhs-nav-label-list.js"></script>
<script src="components/lhs-nav-page-list.js"></script>
<!-- LHS nav -->
<script src="components/lhs-nav.js"></script>
<script src="components/loading-indicator.js"></script>
<!-- Shared by components on the right hand side of the page (i.e. email listing pages) -->
<script src="components/mail-page-subnav.js"></script>
<script src="components/main-layout.js"></script>
<script src="components/multi-select-checkbox.js"></script>
<script src="components/nav-item-listing.js"></script>
<script src="components/nav-item.js"></script>
<script src="components/pagination-controls.js"></script>
<script src="components/loading-indicator.js"></script>
<script src="components/email-list.js"></script>
<script src="components/rhs-header.js"></script>
<script src="components/starred-mail.js"></script>
<script src="components/with-route-triggered-loader.js"></script>
<!-- email listing pages, they're used directly from app.js -->
<script src="components/inbox-mail.js"></script>
<script src="components/draft-mail.js"></script>
<script src="components/important-mail.js"></script>
<script src="components/starred-mail.js"></script>
<!-- layout used directly from app.js, I'd *like* for it to be separate -->
<script src="components/main-layout.js"></script>
<script src="app.js"></script>
</body>
</html>
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