Make messages from same sender be grouped together, tweak header layout
parent
eedb486cce
commit
09f652df3c
|
|
@ -2,20 +2,21 @@
|
||||||
let options = {
|
let options = {
|
||||||
srcFont: "6x8",
|
srcFont: "6x8",
|
||||||
titleFont: "12x20",
|
titleFont: "12x20",
|
||||||
bodyFont: "12x20",
|
bodyFont: "6x15:2",
|
||||||
headerBgColor: g.theme.bgH,
|
headerBgColor: g.theme.bgH,
|
||||||
headerFgColor: g.theme.fg,
|
headerFgColor: g.theme.fg,
|
||||||
headerHlColor: g.toColor(0, 1, 0),
|
headerHlColor: g.toColor(0, 1, 0),
|
||||||
margin: 3, // space on sides
|
margin: 3, // space on sides
|
||||||
padding: 8, // space between header and body
|
padding: 16, // space between header and body
|
||||||
|
lineSpacing: 0,
|
||||||
fh: 20, // footer height - leave this much space for a footer
|
fh: 20, // footer height - leave this much space for a footer
|
||||||
};
|
};
|
||||||
|
|
||||||
setOptions = function(opts) {
|
let setOptions = function(opts) {
|
||||||
options = Object.assign(options, opts);
|
options = Object.assign(options, opts);
|
||||||
};
|
};
|
||||||
|
|
||||||
setClipRect = function (x, y, x2, y2) {
|
let setClipRect = function (x, y, x2, y2) {
|
||||||
if (y < Bangle.appRect.y) y = Bangle.appRect.y;
|
if (y < Bangle.appRect.y) y = Bangle.appRect.y;
|
||||||
if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
|
if (y2 < Bangle.appRect.y) y2 = Bangle.appRect.y;
|
||||||
if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
|
if (y > Bangle.appRect.y2 - 10) y = Bangle.appRect.y2 - options.fh - 1;
|
||||||
|
|
@ -24,22 +25,20 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
const centerString = (str, x, y, w) => {
|
const centerString = (str, x, y, w) => {
|
||||||
g.setFontAlign(0, -1);
|
g.setFontAlign(0, 0);
|
||||||
g.drawString(str, x + (w / 2), y);
|
g.drawString(str, x + (w / 2), y);
|
||||||
};
|
};
|
||||||
|
|
||||||
HeaderBox = function(msg, messageRect) {
|
HeaderBox = function(msg, messageRect) {
|
||||||
this.icon = require("messageicons").getImage(msg);
|
this.icon = require("messageicons").getImage(msg);
|
||||||
this.color = require("messageicons").getColor(msg, {default:g.theme.fg2});
|
this.color = require("messageicons").getColor(msg, {default:g.theme.fg2});
|
||||||
this.iconSize = 48;
|
this.im = g.imageMetrics(this.icon);
|
||||||
|
this.iconSize = this.im.height;
|
||||||
this.titleW = messageRect.w - this.iconSize;
|
this.titleW = messageRect.w - this.iconSize;
|
||||||
if (!msg.body) this.titleLines = "";
|
|
||||||
else {
|
|
||||||
this.titleLines = (() => {
|
this.titleLines = (() => {
|
||||||
if (msg.title) return g.setFont(options.titleFont).wrapString(msg.title, this.titleW);
|
if (msg.title) return g.setFont(options.titleFont).wrapString(msg.title, this.titleW);
|
||||||
else return "";
|
else return "";
|
||||||
})();
|
})();
|
||||||
}
|
|
||||||
let sw = g.stringWidth(msg.title); // string width
|
let sw = g.stringWidth(msg.title); // string width
|
||||||
let ew = g.stringWidth("..."); // elipsis width
|
let ew = g.stringWidth("..."); // elipsis width
|
||||||
let w = this.titleW - ew - options.margin; // max width for title
|
let w = this.titleW - ew - options.margin; // max width for title
|
||||||
|
|
@ -53,16 +52,16 @@
|
||||||
this.srcH = this.srcLineH * this.srcLines.length;
|
this.srcH = this.srcLineH * this.srcLines.length;
|
||||||
this.srcX = this.x2 - this.iconSize;
|
this.srcX = this.x2 - this.iconSize;
|
||||||
this.srcY = 0;
|
this.srcY = 0;
|
||||||
this.im = g.imageMetrics(this.icon);
|
|
||||||
this.imgX = this.titleW + ((this.iconSize - this.im.width) / 2);
|
this.imgX = this.titleW + ((this.iconSize - this.im.width) / 2);
|
||||||
this.minH = Math.max(this.titleLineH, this.srcH + this.im.height) + options.padding;
|
this.minH = Math.max(this.titleLineH, this.im.height) + options.padding;
|
||||||
this.maxH = Math.max(this.titleLineH * this.titleLines.length, this.iconSize) + options.padding;
|
this.maxH = Math.max(this.titleLineH * this.titleLines.length, this.im.height + this.srcH) + options.padding;
|
||||||
this.h = this.maxH;
|
this.h = this.maxH;
|
||||||
this.new = msg.new ?? false;
|
this.new = msg.new ?? false;
|
||||||
}; // HeaderBox
|
}; // HeaderBox
|
||||||
|
|
||||||
HeaderBox.prototype.draw = function(messageRect) {
|
HeaderBox.prototype.draw = function(messageRect) {
|
||||||
const getImgY = () => (this.h - options.padding - this.im.height + (this.h == this.maxH ? this.srcH : 0)) / 2;
|
//const getImgY = () => (this.h - options.padding - this.im.height + (this.h == this.maxH ? this.srcH : 0)) / 2;
|
||||||
|
const getImgY = () => (this.h - options.padding - (this.im.height / 2)) / 2;
|
||||||
const x = messageRect.x
|
const x = messageRect.x
|
||||||
const x2 = messageRect.x2;
|
const x2 = messageRect.x2;
|
||||||
const y = messageRect.y;
|
const y = messageRect.y;
|
||||||
|
|
@ -70,13 +69,13 @@
|
||||||
else if (this.h > this.maxH) this.h = this.maxH;
|
else if (this.h > this.maxH) this.h = this.maxH;
|
||||||
let y2 = messageRect.y + this.h - 1;
|
let y2 = messageRect.y + this.h - 1;
|
||||||
exports.setClipRect(x, y, x2, y2);
|
exports.setClipRect(x, y, x2, y2);
|
||||||
g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2);
|
g.setBgColor(options.headerBgColor).clearRect(x, y, x2, y2)
|
||||||
g.setBgColor(g.theme.bg2).clearRect(x+3, y+3, x2-3, y2-3);
|
.setBgColor(g.theme.bg2).clearRect(x+3, y+3, x2-3, y2-3);
|
||||||
if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
|
if (this.new) g.setColor(options.headerHlColor).fillPoly([x, y, x + 20, y, x, y + 20]);
|
||||||
g.setColor(options.headerFgColor);
|
g.setColor(options.headerFgColor)
|
||||||
g.setFont(options.titleFont);
|
.setFont(options.titleFont);
|
||||||
if (this.h > this.minH) { // multi-line title
|
if (this.h > this.minH) { // multi-line title
|
||||||
let titleY = Math.floor(((this.h - options.padding - (this.titleLineH * this.titleLines.length)) / 2) + y);
|
let titleY = Math.floor(((this.h + options.padding - (this.titleLineH * this.titleLines.length)) / 2) + y);
|
||||||
if (this.titleLines) {
|
if (this.titleLines) {
|
||||||
for (let line of this.titleLines) {
|
for (let line of this.titleLines) {
|
||||||
centerString(line, x, titleY, this.titleW);
|
centerString(line, x, titleY, this.titleW);
|
||||||
|
|
@ -84,30 +83,38 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else { // single-line title
|
} else { // single-line title
|
||||||
const titleY = Math.floor(((this.h - options.padding - this.titleLineH) / 2) + y);
|
const titleY = Math.floor(((this.h + options.padding - this.titleLineH) / 2) + y);
|
||||||
centerString(this.titleOneLine, x + options.margin, titleY, this.titleW);
|
centerString(this.titleOneLine, x + options.margin, titleY, this.titleW);
|
||||||
}
|
}
|
||||||
g.setFont(options.srcFont);
|
// g.setFont(options.srcFont);
|
||||||
if (this.h == this.maxH) {
|
// if (this.h == this.maxH) {
|
||||||
let srcY = y+4;
|
// let srcY = y+4;
|
||||||
for (let line of this.srcLines) {
|
// for (let line of this.srcLines) {
|
||||||
centerString(line, x2 - this.iconSize, srcY, this.iconSize);
|
// centerString(line, x2 - this.iconSize, srcY, this.iconSize);
|
||||||
srcY += this.srcLineH;
|
// srcY += this.srcLineH;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
g.setColor(this.color).drawImage(this.icon, x + this.imgX, y + getImgY());
|
g.setColor(this.color).drawImage(this.icon, x + this.imgX, y + getImgY());
|
||||||
};
|
};
|
||||||
|
|
||||||
const TextBox = function(msg, messageRect) {
|
const TextBox = function(msgGroup, messageRect) {
|
||||||
if (msg.body) body = msg.body;
|
this.messageGroup = msgGroup;
|
||||||
else body = msg.title;
|
this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + options.lineSpacing;
|
||||||
this.lineH = (g.setFont(options.bodyFont).getFontHeight()) + 2; // plus 2 to add a little spacing between lines
|
this.messages = new Array(this.messageGroup.length);
|
||||||
this.lines = g.wrapString(body, messageRect.w - options.margin);
|
this.numLines = 0;
|
||||||
if (msg.subject) { // If there's a subject, add it to the top
|
let mnum = 0;
|
||||||
lines.splice(0, 0, msg.subject);
|
for (msg of this.messageGroup.bodies) {
|
||||||
|
this.messages[mnum] = g.wrapString(msg, messageRect.w - options.margin);
|
||||||
|
this.numLines += this.messages[mnum].length;
|
||||||
|
mnum++;
|
||||||
}
|
}
|
||||||
this.scrollY = 0;
|
this.scrollY = 0;
|
||||||
this.minY = messageRect.y2 - (this.lineH * (this.lines.length + 3));
|
console.log("options.fh: ", options.fh);
|
||||||
|
console.log("lineH: ", this.lineH);
|
||||||
|
console.log("numLines", this.numLines);
|
||||||
|
console.log("messageRect.y2", messageRect.y2);
|
||||||
|
this.minY = (messageRect.y2 - options.fh - (this.lineH * (this.numLines))); // can't for the life of me figure out why I'm having to +1 the num of lines
|
||||||
|
console.log("minY", this.minY);
|
||||||
if (this.minY > 0) this.minY = 0;
|
if (this.minY > 0) this.minY = 0;
|
||||||
}; // TextBox
|
}; // TextBox
|
||||||
|
|
||||||
|
|
@ -116,19 +123,27 @@
|
||||||
y = messageRect.y + yOffset;
|
y = messageRect.y + yOffset;
|
||||||
x2 = messageRect.x2;
|
x2 = messageRect.x2;
|
||||||
y2 = messageRect.y2;
|
y2 = messageRect.y2;
|
||||||
g.setColor(g.theme.fg).setBgColor(g.theme.bg);
|
|
||||||
exports.setClipRect(x, y, x2, y2);
|
exports.setClipRect(x, y, x2, y2);
|
||||||
g.clearRect(x, y, x2, y2);
|
g.setColor(g.theme.fg).setBgColor(g.theme.bg)
|
||||||
g.setFont(options.bodyFont).setFontAlign(-1, -1);
|
.clearRect(x, y, x2, y2)
|
||||||
|
.setFont(options.bodyFont).setFontAlign(-1, -1);
|
||||||
let lineY = this.scrollY;
|
let lineY = this.scrollY;
|
||||||
for (let line of this.lines) {
|
for (msgNum in this.messages) {
|
||||||
|
g.drawLine(x2-20, y+lineY-5, x2, y+lineY-10)
|
||||||
|
.drawLine(x2-20, y+lineY-5, x2, y+lineY);
|
||||||
|
//.drawLine(x, y+lineY, x, y+(this.lineH*this.messages[msgNum].length));
|
||||||
|
for (let line of this.messages[msgNum]) {
|
||||||
if (y + lineY >= y - this.lineH) g.drawString(line, x + options.margin, y + lineY);
|
if (y + lineY >= y - this.lineH) g.drawString(line, x + options.margin, y + lineY);
|
||||||
lineY += this.lineH;
|
lineY += this.lineH;
|
||||||
}
|
}
|
||||||
|
g.drawLine(x+20, y+lineY-5, x, y+lineY-10)
|
||||||
|
.drawLine(x+20, y+lineY-5, x, y+lineY);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
MessageBox = function(msg, yOffset) {
|
MessageBox = function(msgGroup, yOffset) {
|
||||||
this.msg = msg;
|
this.messageGroup = msgGroup;
|
||||||
|
//if (!Array.isArray(msgGroup)) msgGroup = [msgGroup]; // make sure we have an array
|
||||||
this.yOffset = yOffset ?? 0;
|
this.yOffset = yOffset ?? 0;
|
||||||
this.xOffset = 0;
|
this.xOffset = 0;
|
||||||
this.rect = {
|
this.rect = {
|
||||||
|
|
@ -139,9 +154,9 @@
|
||||||
x2: Bangle.appRect.x2 + this.xOffset,
|
x2: Bangle.appRect.x2 + this.xOffset,
|
||||||
y2: Bangle.appRect.y2 + this.yOffset
|
y2: Bangle.appRect.y2 + this.yOffset
|
||||||
};
|
};
|
||||||
this.headerBox = new HeaderBox(msg, this.rect);
|
this.headerBox = new HeaderBox(msgGroup, this.rect);
|
||||||
this.textBox = new TextBox(msg, this.rect);
|
this.textBox = new TextBox(msgGroup, this.rect);
|
||||||
let messageH = this.textBox.lines.length * this.textBox.lineH;
|
let messageH = this.numLines * this.textBox.lineH;
|
||||||
let boxH = this.rect.h - this.headerBox.maxH - options.fh;
|
let boxH = this.rect.h - this.headerBox.maxH - options.fh;
|
||||||
if (messageH <= boxH) this.oneScreen = true;
|
if (messageH <= boxH) this.oneScreen = true;
|
||||||
else this.oneScreen = false;
|
else this.oneScreen = false;
|
||||||
|
|
@ -190,7 +205,6 @@
|
||||||
this.textBox.draw(this.rect, this.headerBox.h);
|
this.textBox.draw(this.rect, this.headerBox.h);
|
||||||
exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
|
exports.setClipRect(this.rect.x, this.rect.y, this.rect.x2, this.rect.y2);
|
||||||
this.drawScrollbar();
|
this.drawScrollbar();
|
||||||
//this.drawFooter();
|
|
||||||
};
|
};
|
||||||
|
|
||||||
MessageBox.prototype.drawScrollbar = function() {
|
MessageBox.prototype.drawScrollbar = function() {
|
||||||
|
|
@ -201,9 +215,6 @@
|
||||||
|
|
||||||
MessageBox.prototype.scroll = function(dy) {
|
MessageBox.prototype.scroll = function(dy) {
|
||||||
if (this.oneScreen) return;
|
if (this.oneScreen) return;
|
||||||
// if ((dy > 0 && this.top) || (dy < 0 && this.bottom)) {
|
|
||||||
// return;
|
|
||||||
// }
|
|
||||||
if (this.headerBox.h > this.headerBox.minH && dy < 0) {
|
if (this.headerBox.h > this.headerBox.minH && dy < 0) {
|
||||||
this.headerBox.h += dy;
|
this.headerBox.h += dy;
|
||||||
if (this.headerBox.h < this.headerBox.minH) this.headerBox.h = this.headerBox.minH;
|
if (this.headerBox.h < this.headerBox.minH) this.headerBox.h = this.headerBox.minH;
|
||||||
|
|
@ -213,9 +224,9 @@
|
||||||
}
|
}
|
||||||
if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
|
if (this.headerBox.h == this.headerBox.minH && dy < 0) this.textBox.scrollY += dy;
|
||||||
else if (dy > 0) this.textBox.scrollY += dy;
|
else if (dy > 0) this.textBox.scrollY += dy;
|
||||||
if (this.textBox.scrollY <= this.textBox.minY) {
|
if (this.textBox.scrollY <= this.textBox.minY - this.headerBox.h) {
|
||||||
this.bottom = true;
|
this.bottom = true;
|
||||||
this.textBox.scrollY = this.textBox.minY;
|
this.textBox.scrollY = this.textBox.minY - this.headerBox.h;
|
||||||
} else {
|
} else {
|
||||||
this.bottom = false;
|
this.bottom = false;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -21,9 +21,9 @@ let active;
|
||||||
let buzzing;
|
let buzzing;
|
||||||
let events = {};
|
let events = {};
|
||||||
let timeouts = {};
|
let timeouts = {};
|
||||||
let cleanup = function() {}; // we don't want cleanup function to do anything until we actually need it
|
// let cleanup = function() {}; // we don't want cleanup function to do anything until we actually need it
|
||||||
let previous = [];
|
let previous = [];
|
||||||
let textId;
|
let textGid;
|
||||||
let msgId;
|
let msgId;
|
||||||
let call;
|
let call;
|
||||||
let alarm;
|
let alarm;
|
||||||
|
|
@ -36,7 +36,7 @@ let setListener = function(event, callback) {
|
||||||
Bangle.on(event, events[event]);
|
Bangle.on(event, events[event]);
|
||||||
};
|
};
|
||||||
|
|
||||||
let _cleanup = function() {
|
let cleanup = function() {
|
||||||
for (let e in events) if (e) Bangle.removeListener(e, events[e]);
|
for (let e in events) if (e) Bangle.removeListener(e, events[e]);
|
||||||
console.log(timeouts);
|
console.log(timeouts);
|
||||||
for (let t in timeouts) clearTimeout(timeouts[t]);
|
for (let t in timeouts) clearTimeout(timeouts[t]);
|
||||||
|
|
@ -77,10 +77,12 @@ let goBack = function(timedOut) {
|
||||||
backTo = previous.pop();
|
backTo = previous.pop();
|
||||||
clearTimeouts();
|
clearTimeouts();
|
||||||
} else {
|
} else {
|
||||||
if (!timedOut) Bangle.MESSAGES.forEach((m) => {if (!m.new) m.show = false;});
|
if (!timedOut) Bangle.MESSAGES.forEach((m) => {
|
||||||
|
if (m.new) delete m.new;
|
||||||
|
if (m.show) delete m.show;
|
||||||
|
});
|
||||||
require("messages").write(Bangle.MESSAGES);
|
require("messages").write(Bangle.MESSAGES);
|
||||||
cleanup = _cleanup;
|
Bangle.setUI({mode: "custom", remove: cleanup});
|
||||||
cleanup();
|
|
||||||
Bangle.showClock();
|
Bangle.showClock();
|
||||||
}
|
}
|
||||||
switch (backTo) {
|
switch (backTo) {
|
||||||
|
|
@ -88,7 +90,7 @@ let goBack = function(timedOut) {
|
||||||
case "map": return showMap();
|
case "map": return showMap();
|
||||||
case "music": return showMusic();
|
case "music": return showMusic();
|
||||||
case "alarm": return showAlarm();
|
case "alarm": return showAlarm();
|
||||||
case "text": return showText(textId);
|
case "text": return showText(Bangle.MESSAGES, textGid);
|
||||||
}
|
}
|
||||||
}; // goBack
|
}; // goBack
|
||||||
|
|
||||||
|
|
@ -98,10 +100,10 @@ let filterMessages = function() {
|
||||||
map = Bangle.MESSAGES.find(m => m.type === "map");
|
map = Bangle.MESSAGES.find(m => m.type === "map");
|
||||||
music = Bangle.MESSAGES.find(m => m.type === "music");
|
music = Bangle.MESSAGES.find(m => m.type === "music");
|
||||||
Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.type === "text");
|
Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.type === "text");
|
||||||
let newUnhandledTexts = Bangle.MESSAGES.filter(m => m.new && !m.handled);
|
// let newUnhandledTexts = Bangle.MESSAGES.filter(m => m.new && !m.handled);
|
||||||
let newHandledTexts = Bangle.MESSAGES.filter(m => m.new && m.handled);
|
// let newHandledTexts = Bangle.MESSAGES.filter(m => m.new && m.handled);
|
||||||
let otherTexts = Bangle.MESSAGES.filter(m => !m.new);
|
// let otherTexts = Bangle.MESSAGES.filter(m => !m.new && m.show);
|
||||||
Bangle.MESSAGES = [].concat(newUnhandledTexts, newHandledTexts, otherTexts);
|
// Bangle.MESSAGES = [].concat(newUnhandledTexts, newHandledTexts, otherTexts);
|
||||||
};
|
};
|
||||||
|
|
||||||
let showNoMessages = function() {
|
let showNoMessages = function() {
|
||||||
|
|
@ -112,21 +114,21 @@ let showNoMessages = function() {
|
||||||
Bangle.setUI({
|
Bangle.setUI({
|
||||||
mode: "custom",
|
mode: "custom",
|
||||||
btn: _e => goBack(),
|
btn: _e => goBack(),
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
|
|
||||||
goBack();
|
goBack();
|
||||||
};
|
};
|
||||||
|
|
||||||
let showMessage = function(id) {
|
let showMessage = function(textGid) {
|
||||||
if (call) {setActive("call"); return showCall();}
|
if (call) {setActive("call"); return showCall();}
|
||||||
else if (alarm) {setActive("alarm"); return showAlarm();}
|
else if (alarm) {setActive("alarm"); return showAlarm();}
|
||||||
else if (map) {setActive("map"); return showMap();}
|
else if (map) {setActive("map"); return showMap();}
|
||||||
else if (music) {setActive("music"); return showMusic();}
|
else if (music) {setActive("music"); return showMusic();}
|
||||||
else if (Bangle.MESSAGES.length){
|
else if (Bangle.MESSAGES && Bangle.MESSAGES.length){
|
||||||
Bangle.MESSAGES.every(m => m.handled = true); // set all text messages as handled
|
Bangle.MESSAGES.every(m => m.handled = true); // set all text messages as handled
|
||||||
setActive("text");
|
setActive("text");
|
||||||
return showText(id);
|
return showText(Bangle.MESSAGES, textGid);
|
||||||
}
|
}
|
||||||
else goBack();
|
else goBack();
|
||||||
};
|
};
|
||||||
|
|
@ -137,7 +139,7 @@ let showMusic = function() {
|
||||||
Bangle.setUI({
|
Bangle.setUI({
|
||||||
mode: "custom",
|
mode: "custom",
|
||||||
btn: _e => goBack(),
|
btn: _e => goBack(),
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -147,7 +149,7 @@ let showMap = function() {
|
||||||
Bangle.setUI({
|
Bangle.setUI({
|
||||||
mode: "custom",
|
mode: "custom",
|
||||||
btn: _e => goBack(),
|
btn: _e => goBack(),
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -157,7 +159,7 @@ let showAlarm = function() {
|
||||||
Bangle.setUI({
|
Bangle.setUI({
|
||||||
mode: "custom",
|
mode: "custom",
|
||||||
btn: _e => goBack(),
|
btn: _e => goBack(),
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -290,16 +292,53 @@ let showCall = function() {
|
||||||
touch: () => {if (buzzing) return require("messages").stopBuzz()},
|
touch: () => {if (buzzing) return require("messages").stopBuzz()},
|
||||||
swipe: handler,
|
swipe: handler,
|
||||||
btn: goBack,
|
btn: goBack,
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
let showText = function(id) {
|
// let catMessages = function(messageGroup) {
|
||||||
if (!Bangle.MESSAGES.length) return goBack(); // no messages
|
// let msg = "";
|
||||||
|
// let first = true;
|
||||||
|
// messageGroup.forEach((m => {
|
||||||
|
// msg = msg.subject ? msg.subject + "\n" : "";
|
||||||
|
// msg = msg + (first ? "" : "\n>\n") + m.body;
|
||||||
|
// first = false;
|
||||||
|
// }));
|
||||||
|
// return msg;
|
||||||
|
// };
|
||||||
|
|
||||||
|
let gid = m => m.title + m.src; // create unique group id
|
||||||
|
|
||||||
|
let groupMessages = function(messages) {
|
||||||
|
if (!messages || !messages.length) return [];
|
||||||
|
let msgs = [].concat(messages); // don't want to mutate original
|
||||||
|
let messageGroups = [];
|
||||||
|
while (msgs.length) {
|
||||||
|
let currentMessage = msgs[0];
|
||||||
|
let mg = msgs.filter(m => gid(m) === gid(currentMessage)); // put messages into group
|
||||||
|
let messageGroup = Object.assign({}, currentMessage, {id: gid(currentMessage), idList: [], bodies: []});
|
||||||
|
for (msg of mg) {
|
||||||
|
messageGroup.idList.unshift(msg.id);
|
||||||
|
messageGroup.bodies.unshift(msg.body);
|
||||||
|
}
|
||||||
|
messageGroups.push(messageGroup);
|
||||||
|
msgs = msgs.filter(m => gid(m) !== gid(currentMessage));
|
||||||
|
}
|
||||||
|
return messageGroups;
|
||||||
|
};
|
||||||
|
|
||||||
|
let findIndexById = function(messageGroups, id) {
|
||||||
|
return messageGroups.findIndex(groups => groups.messageGroup.some(group => group.id === id));
|
||||||
|
};
|
||||||
|
|
||||||
|
let showText = function(messages, id) {
|
||||||
|
if (!messages.length) return goBack(); // no messages
|
||||||
setBusy(true); // busy until everything is set up
|
setBusy(true); // busy until everything is set up
|
||||||
if (!id) id = Bangle.MESSAGES[0].id;
|
msgGroups = groupMessages(messages);
|
||||||
textId = id; // global text message index
|
textGid = textGid ?? msgGroups[0].id; // global text message group id
|
||||||
let messageNum = Bangle.MESSAGES.findIndex(m => m.id === id);
|
if (!id) id = textGid;
|
||||||
|
let messageNum = msgGroups.findIndex(mg => mg.id === id);
|
||||||
|
if (messageNum < 0) messageNum = 0;
|
||||||
g.reset().clear();
|
g.reset().clear();
|
||||||
Bangle.setUI(); // make sure to clear setUI from anything previous
|
Bangle.setUI(); // make sure to clear setUI from anything previous
|
||||||
let switching = false;
|
let switching = false;
|
||||||
|
|
@ -312,8 +351,8 @@ let showText = function(id) {
|
||||||
// Bangle.setLCDPower(true); // TODO make as option
|
// Bangle.setLCDPower(true); // TODO make as option
|
||||||
let msgBoxes = [];
|
let msgBoxes = [];
|
||||||
let i = 0;
|
let i = 0;
|
||||||
for (let msg of Bangle.MESSAGES) {
|
for (let msgGroup of msgGroups) {
|
||||||
msgBoxes[i] = new MessageBox(msg);
|
msgBoxes[i] = new MessageBox(msgGroup);
|
||||||
if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
|
if (i === messageNum - 1) msgBoxes[i].yOffset = MessageBox.prototype.prevOffset;
|
||||||
else if (i === messageNum) {
|
else if (i === messageNum) {
|
||||||
msgBoxes[i].yOffset = 0;
|
msgBoxes[i].yOffset = 0;
|
||||||
|
|
@ -323,7 +362,7 @@ let showText = function(id) {
|
||||||
i++;
|
i++;
|
||||||
}
|
}
|
||||||
|
|
||||||
let drawFooter = function() {
|
let drawFooter = function() { // adapted from messagelist app
|
||||||
let fh = 20; // footer height
|
let fh = 20; // footer height
|
||||||
// left hint: swipe from left for main menu
|
// left hint: swipe from left for main menu
|
||||||
g.reset().setBgColor(g.theme.bg).clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
|
g.reset().setBgColor(g.theme.bg).clearRect(Bangle.appRect.x, Bangle.appRect.y2-fh, Bangle.appRect.x2, Bangle.appRect.y2)
|
||||||
|
|
@ -344,7 +383,7 @@ let showText = function(id) {
|
||||||
g.setFontAlign(1, 1).setColor(1, 0.25, 0.25) // bottom right
|
g.setFontAlign(1, 1).setColor(1, 0.25, 0.25) // bottom right
|
||||||
.drawString("<<", Bangle.appRect.x2 - 1, Bangle.appRect.y2)
|
.drawString("<<", Bangle.appRect.x2 - 1, Bangle.appRect.y2)
|
||||||
.setColor(g.theme.fg);
|
.setColor(g.theme.fg);
|
||||||
};
|
}; //// drawFooter();
|
||||||
|
|
||||||
let refresh = function() {
|
let refresh = function() {
|
||||||
if (messageNum >= 0 && messageNum < msgBoxes.length) {
|
if (messageNum >= 0 && messageNum < msgBoxes.length) {
|
||||||
|
|
@ -352,13 +391,15 @@ let showText = function(id) {
|
||||||
if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
|
if (messageNum > 0) msgBoxes[messageNum - 1].reset(MessageBox.prototype.prevOffset);
|
||||||
if (messageNum < msgBoxes.length - 1) msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
|
if (messageNum < msgBoxes.length - 1) msgBoxes[messageNum + 1].reset(MessageBox.prototype.nextOffset);
|
||||||
}
|
}
|
||||||
};
|
}; //refresh
|
||||||
|
|
||||||
let removeMessage = function() {
|
let removeMessage = function() {
|
||||||
let removeAndReset = () => {
|
let removeAndReset = () => {
|
||||||
let id = msgBoxes[messageNum].msg.id;
|
// TODO let id = msgBoxes[messageNum].msg.id;
|
||||||
|
for (let id of msgBoxes[messageNum].messageGroup.idList) {
|
||||||
let idx = Bangle.MESSAGES.findIndex(m => m.id === id);
|
let idx = Bangle.MESSAGES.findIndex(m => m.id === id);
|
||||||
Bangle.MESSAGES.splice(idx, 1); // remove from Bangle.MESSAGES
|
Bangle.MESSAGES.splice(idx, 1); // remove from Bangle.MESSAGES
|
||||||
|
}
|
||||||
msgBoxes.splice(messageNum, 1); // remove from msgBoxes
|
msgBoxes.splice(messageNum, 1); // remove from msgBoxes
|
||||||
if (!msgBoxes.length) {
|
if (!msgBoxes.length) {
|
||||||
Bangle.setUI();
|
Bangle.setUI();
|
||||||
|
|
@ -368,7 +409,7 @@ let showText = function(id) {
|
||||||
messageNum--; // we removed the last message, go to previous message
|
messageNum--; // we removed the last message, go to previous message
|
||||||
}
|
}
|
||||||
// otherwise messageNum is automatically the index of the next message now
|
// otherwise messageNum is automatically the index of the next message now
|
||||||
textId = Bangle.MESSAGES[messageNum].id; // update global current message id
|
textGid = msgBoxes[messageNum].messageGroup.id; // update global current message id
|
||||||
refresh();
|
refresh();
|
||||||
msgBoxes[messageNum].draw();
|
msgBoxes[messageNum].draw();
|
||||||
drawFooter();
|
drawFooter();
|
||||||
|
|
@ -391,11 +432,13 @@ let showText = function(id) {
|
||||||
} else {
|
} else {
|
||||||
removeAndReset();
|
removeAndReset();
|
||||||
}
|
}
|
||||||
};
|
}; //removeMessage
|
||||||
|
|
||||||
let dismissOnPhone = function() {
|
let dismissOnPhone = function() {
|
||||||
return Bangle.messageResponse(msgBoxes[messageNum].msg, false); // false to dismiss, true to open on phone
|
for (let id of msgBoxes[messageNum].messageGroup.idList) {
|
||||||
};
|
Bangle.messageResponse({id: id}, false);
|
||||||
|
}
|
||||||
|
}; //dismissOnPhone
|
||||||
|
|
||||||
let toNext = function(removeCurrent) {
|
let toNext = function(removeCurrent) {
|
||||||
if (removeCurrent == undefined) removeCurrent = false;
|
if (removeCurrent == undefined) removeCurrent = false;
|
||||||
|
|
@ -413,7 +456,7 @@ let showText = function(id) {
|
||||||
if (!removeCurrent) {
|
if (!removeCurrent) {
|
||||||
if (messageNum < msgBoxes.length) {
|
if (messageNum < msgBoxes.length) {
|
||||||
messageNum++;
|
messageNum++;
|
||||||
textId = Bangle.MESSAGES[messageNum].id; // update global message index
|
textGid = msgBoxes[messageNum].messageGroup.id; // update global message index
|
||||||
refresh();
|
refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -430,7 +473,7 @@ let showText = function(id) {
|
||||||
};
|
};
|
||||||
animate();
|
animate();
|
||||||
});
|
});
|
||||||
};
|
}; //toNext
|
||||||
|
|
||||||
let toPrev = function(removeCurrent) {
|
let toPrev = function(removeCurrent) {
|
||||||
if (removeCurrent == undefined) removeCurrent = false;
|
if (removeCurrent == undefined) removeCurrent = false;
|
||||||
|
|
@ -448,7 +491,7 @@ let showText = function(id) {
|
||||||
if (!removeCurrent) {
|
if (!removeCurrent) {
|
||||||
if (messageNum > 0) {
|
if (messageNum > 0) {
|
||||||
messageNum--;
|
messageNum--;
|
||||||
textId = Bangle.MESSAGES[messageNum].id; // update global message index
|
textGid = msgBoxes[messageNum].messageGroup.id; // update global message index
|
||||||
refresh();
|
refresh();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -465,7 +508,7 @@ let showText = function(id) {
|
||||||
};
|
};
|
||||||
animate();
|
animate();
|
||||||
});
|
});
|
||||||
};
|
}; //toPrev
|
||||||
|
|
||||||
let drawLeftBackground = function() {
|
let drawLeftBackground = function() {
|
||||||
//g.setBgColor(1, 0.5, 0); // red
|
//g.setBgColor(1, 0.5, 0); // red
|
||||||
|
|
@ -473,7 +516,7 @@ let showText = function(id) {
|
||||||
.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
||||||
.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
||||||
.setBgColor(g.theme.bg);
|
.setBgColor(g.theme.bg);
|
||||||
};
|
}; //drawLeftBackground
|
||||||
|
|
||||||
let drawRightBackground = function() {
|
let drawRightBackground = function() {
|
||||||
//g.setBgColor(0, 0.5, 1); // red
|
//g.setBgColor(0, 0.5, 1); // red
|
||||||
|
|
@ -481,7 +524,7 @@ let showText = function(id) {
|
||||||
.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
.setClipRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
||||||
.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
.clearRect(Bangle.appRect.x, Bangle.appRect.y, Bangle.appRect.x2, Bangle.appRect.y2)
|
||||||
.setBgColor(g.theme.bg);
|
.setBgColor(g.theme.bg);
|
||||||
};
|
}; //drawRightBackground
|
||||||
|
|
||||||
let animateToLeft = function() {
|
let animateToLeft = function() {
|
||||||
if (timeouts["animID"]) {
|
if (timeouts["animID"]) {
|
||||||
|
|
@ -506,7 +549,7 @@ let showText = function(id) {
|
||||||
};
|
};
|
||||||
animate();
|
animate();
|
||||||
});
|
});
|
||||||
};
|
}; //animateToLeft
|
||||||
|
|
||||||
let animateToRight = function() {
|
let animateToRight = function() {
|
||||||
if (timeouts["animID"]) {
|
if (timeouts["animID"]) {
|
||||||
|
|
@ -531,7 +574,7 @@ let showText = function(id) {
|
||||||
};
|
};
|
||||||
animate();
|
animate();
|
||||||
});
|
});
|
||||||
};
|
}; //animateToRight
|
||||||
|
|
||||||
let firstTouch = true;
|
let firstTouch = true;
|
||||||
let dragHandler = function(e) {
|
let dragHandler = function(e) {
|
||||||
|
|
@ -547,9 +590,9 @@ let showText = function(id) {
|
||||||
buzzing = false;
|
buzzing = false;
|
||||||
}
|
}
|
||||||
setBusy(true);
|
setBusy(true);
|
||||||
let idx = Bangle.MESSAGES.findIndex(m => m.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
|
// TODO let idx = msgBoxes.findIndex(mb => mb.msg.id === msgBoxes[messageNum].msg.id); // TODO maybe we don't to do this check every time
|
||||||
if (idx >= 0) delete Bangle.MESSAGES[idx].new;
|
// TODO if (idx >= 0) delete Bangle.MESSAGES[idx].new;
|
||||||
msgBoxes[messageNum].clearNew();
|
// TODO msgBoxes[messageNum].clearNew();
|
||||||
if (Math.abs(e.dy) > Math.abs(e.dx)) {
|
if (Math.abs(e.dy) > Math.abs(e.dx)) {
|
||||||
firstTouch = false;
|
firstTouch = false;
|
||||||
if (e.dy > 0 && msgBoxes[messageNum].top && messageNum > 0) {
|
if (e.dy > 0 && msgBoxes[messageNum].top && messageNum > 0) {
|
||||||
|
|
@ -568,7 +611,7 @@ let showText = function(id) {
|
||||||
if (mode == "scroll") scrollHandler(e);
|
if (mode == "scroll") scrollHandler(e);
|
||||||
else if (mode == "next") nextHandler(e);
|
else if (mode == "next") nextHandler(e);
|
||||||
else if (mode == "prev") prevHandler(e);
|
else if (mode == "prev") prevHandler(e);
|
||||||
};
|
}; //dragHandler
|
||||||
|
|
||||||
let nextHandler = function(e) {
|
let nextHandler = function(e) {
|
||||||
if (e.b == 0) {
|
if (e.b == 0) {
|
||||||
|
|
@ -578,7 +621,7 @@ let showText = function(id) {
|
||||||
toNext().then(() => {
|
toNext().then(() => {
|
||||||
switching = false;
|
switching = false;
|
||||||
});
|
});
|
||||||
};
|
}; //nextHander
|
||||||
|
|
||||||
let prevHandler = function(e) {
|
let prevHandler = function(e) {
|
||||||
if (e.b == 0) {
|
if (e.b == 0) {
|
||||||
|
|
@ -588,13 +631,13 @@ let showText = function(id) {
|
||||||
toPrev().then(() => {
|
toPrev().then(() => {
|
||||||
switching = false;
|
switching = false;
|
||||||
});
|
});
|
||||||
};
|
}; //prevHandler
|
||||||
|
|
||||||
let swipeHandler = function(dir) {
|
let swipeHandler = function(dir) {
|
||||||
if (dir > 0) return rightHandler();
|
if (dir > 0) return rightHandler();
|
||||||
else if (dir < 0) return leftHandler();
|
else if (dir < 0) return leftHandler();
|
||||||
else return;
|
else return;
|
||||||
};
|
}; //swipeHandler
|
||||||
|
|
||||||
let leftHandler = function(e) {
|
let leftHandler = function(e) {
|
||||||
//let msgBox = msgBoxes[messageNum];
|
//let msgBox = msgBoxes[messageNum];
|
||||||
|
|
@ -605,7 +648,7 @@ let showText = function(id) {
|
||||||
removeMessage();
|
removeMessage();
|
||||||
switching = false;
|
switching = false;
|
||||||
});
|
});
|
||||||
};
|
}; //leftHandler
|
||||||
|
|
||||||
let rightHandler = function(e) {
|
let rightHandler = function(e) {
|
||||||
// let msgBox = msgBoxes[messageNum];
|
// let msgBox = msgBoxes[messageNum];
|
||||||
|
|
@ -615,13 +658,13 @@ let showText = function(id) {
|
||||||
removeMessage();
|
removeMessage();
|
||||||
switching = false;
|
switching = false;
|
||||||
});
|
});
|
||||||
};
|
}; //rightHandler
|
||||||
|
|
||||||
let scrollHandler = function(e) {
|
let scrollHandler = function(e) {
|
||||||
if (e.b === 0) {
|
if (e.b === 0) {
|
||||||
}
|
}
|
||||||
msgBoxes[messageNum].scroll(e.dy);
|
msgBoxes[messageNum].scroll(e.dy);
|
||||||
};
|
}; //scrollHandler
|
||||||
|
|
||||||
msgBoxes[messageNum].draw();
|
msgBoxes[messageNum].draw();
|
||||||
drawFooter();
|
drawFooter();
|
||||||
|
|
@ -632,27 +675,27 @@ let showText = function(id) {
|
||||||
drag: e => dragHandler(e),
|
drag: e => dragHandler(e),
|
||||||
swipe: dir => swipeHandler(dir),
|
swipe: dir => swipeHandler(dir),
|
||||||
btn: _e => goBack(),
|
btn: _e => goBack(),
|
||||||
remove: cleanup
|
//remove: cleanup
|
||||||
});
|
});
|
||||||
}; // showText
|
}; // showText
|
||||||
|
|
||||||
let newMessage = (type, msg) => {
|
let newMessage = (type, msg) => {
|
||||||
let handleMessage = () => {
|
let handleMessage = () => {
|
||||||
msgId = msg.id;
|
//msgId = msg.id;
|
||||||
if (type === "call" && msg.t === "remove") require("messages").stopBuzz();
|
if (type === "call" && msg.t === "remove") require("messages").stopBuzz();
|
||||||
if (active === "text" && buzzing && msg.t === "remove" && msg.id === textId) require("messages").stopBuzz(); // if the message being viewed is removed stop buzzing
|
if (active === "text" && buzzing && msg.t === "remove" && msg.id === textGid) require("messages").stopBuzz(); // if the message being viewed is removed stop buzzing
|
||||||
if (type === "text" && msg.t === "remove") {
|
if (type === "text" && msg.t === "remove") { // TODO
|
||||||
let msgIdx = Bangle.MESSAGES.findIndex(m => m.id === msg.id);
|
let msgIdx = Bangle.MESSAGES.findIndex(m => m.id === msg.id);
|
||||||
if (Bangle.MESSAGES.length > 1 && msg.id === msgId) {
|
if (Bangle.MESSAGES.length > 1) {
|
||||||
if (msgIdx === 0) msgId = Bangle.MESSAGES[msgIdx+1].id;
|
if (msgIdx === 0) msgId = Bangle.MESSAGES[msgIdx+1].id;
|
||||||
else if (msgIdx === Bangle.MESSAGES.length - 1) msgId = Bangle.MESSAGES[msgIdx-1].id;
|
else if (msgIdx === Bangle.MESSAGES.length - 1) msgId = Bangle.MESSAGES[msgIdx-1].id;
|
||||||
else msgId = textId;
|
else msgId = textGid;
|
||||||
} else if (Bangle.MESSAGES.length === 1) msgId = 0;
|
} else if (Bangle.MESSAGES.length === 1) msgId = 0;
|
||||||
if (textId === msg.id) msgId = 0; // just removed the message we were viewing
|
if (textGid === msg.id) msgId = 0; // just removed the message we were viewing
|
||||||
}
|
}
|
||||||
require("messagegui").handleMessage(type, msg);
|
require("messagegui").handleMessage(type, msg);
|
||||||
filterMessages();
|
filterMessages();
|
||||||
showMessage(msgId);
|
showMessage();
|
||||||
};
|
};
|
||||||
// Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id); // remove
|
// Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id); // remove
|
||||||
// require("messages").write(Bangle.MESSAGES); // write removal to flash
|
// require("messages").write(Bangle.MESSAGES); // write removal to flash
|
||||||
|
|
@ -693,5 +736,4 @@ if (Bangle.notify) { // notification arrived that opened the app. This is set in
|
||||||
msgId = Bangle.MESSAGES.length ? Bangle.MESSAGES[0].id : 0;
|
msgId = Bangle.MESSAGES.length ? Bangle.MESSAGES[0].id : 0;
|
||||||
filterMessages();
|
filterMessages();
|
||||||
setBusy(false);
|
setBusy(false);
|
||||||
showMessage(msgId);
|
showMessage();
|
||||||
//}
|
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,7 @@
|
||||||
}
|
}
|
||||||
if (msg.t === "remove") {
|
if (msg.t === "remove") {
|
||||||
Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id);
|
Bangle.MESSAGES = Bangle.MESSAGES.filter(m => m.id != msg.id);
|
||||||
require("messages").write(Bangle.MESSAGES); // write removal to flash
|
//require("messages").write(Bangle.MESSAGES); // write removal to flash
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -21,8 +21,12 @@
|
||||||
let inApp = false;
|
let inApp = false;
|
||||||
if (msg.handled) return;
|
if (msg.handled) return;
|
||||||
if (global.__FILE__ === "messagecenter.app.js") inApp = true;
|
if (global.__FILE__ === "messagecenter.app.js") inApp = true;
|
||||||
exports.handleMessage(type, msg);
|
if (msg.t === "remove") { // we want to remove the message from storage right away so message widget will be updated
|
||||||
|
let messages = require("messages").getMessages(msg); // apply removed message
|
||||||
|
require("messages").write(messages); // write back to flash
|
||||||
|
}
|
||||||
if (!inApp) {
|
if (!inApp) {
|
||||||
|
exports.handleMessage(type, msg);
|
||||||
if (loadWillReset()) require("messages").write(Bangle.MESSAGES);
|
if (loadWillReset()) require("messages").write(Bangle.MESSAGES);
|
||||||
if (msg.t !== "remove") Bangle.load("messagecenter.notify.js"); // don't load app if we are just removing a message
|
if (msg.t !== "remove") Bangle.load("messagecenter.notify.js"); // don't load app if we are just removing a message
|
||||||
} else { // in app
|
} else { // in app
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue