Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

promenu: scroll long titles #3570

Merged
merged 3 commits into from
Sep 13, 2024
Merged

promenu: scroll long titles #3570

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8aa839b
promenu: factor out `drawLine()`
bobrippling Sep 10, 2024
4061b41
promenu: scroll truncated menu lines
bobrippling Sep 12, 2024
aa6e468
promenu: generate js
bobrippling Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 52 additions & 29 deletions apps/promenu/bootb2.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,8 +31,45 @@ E.showMenu = function (items) {
var scroller = {
scroll: selected,
};
var nameScroller = null;
var drawLine = function (name, v, item, idx, x, y, nameScroll) {
if (nameScroll === void 0) { nameScroll = 0; }
var hl = (idx === selected && !selectEdit);
if (g.theme.dark) {
fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
}
else {
fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
}
g.setFont12x20()
.setColor(hl ? g.theme.fgH : g.theme.fg)
.setFontAlign(-1, -1);
var vplain = v.indexOf("\0") < 0;
var truncated = true;
if (vplain && name.length >= 17 - v.length && typeof item === "object") {
g.drawString(name.substring(nameScroll, nameScroll + 12 - v.length) + "...", x + 3.7, y + 2.7);
}
else if (vplain && name.length >= 15) {
g.drawString(name.substring(nameScroll, nameScroll + 15) + "...", x + 3.7, y + 2.7);
}
else {
g.drawString(name, x + 3.7, y + 2.7);
truncated = false;
}
var xo = x2;
if (selectEdit && idx === selected) {
xo -= 24 + 1;
g.setColor(g.theme.fgH)
.drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", xo, y + (fontHeight - 10) / 2, { scale: 2 });
}
g.setFontAlign(1, -1);
g.drawString(v, xo - 2, y + 1);
return truncated;
};
var l = {
draw: function (rowmin, rowmax) {
if (nameScroller)
clearInterval(nameScroller), nameScroller = null;
var rows = 0 | Math.min((y2 - y) / fontHeight, menuItems.length);
var idx = E.clip(selected - (rows >> 1), 0, menuItems.length - rows);
if (idx != lastIdx)
Expand All @@ -55,18 +92,9 @@ E.showMenu = function (items) {
rows = 1 + rowmax - rowmin;
}
}
while (rows--) {
var _loop_1 = function () {
var name = menuItems[idx];
var item = items[name];
var hl = (idx === selected && !selectEdit);
if (g.theme.dark) {
fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
}
else {
fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
}
g.setColor(hl ? g.theme.fgH : g.theme.fg);
g.setFontAlign(-1, -1);
var v = void 0;
if (typeof item === "object") {
v = "format" in item
Expand All @@ -78,29 +106,22 @@ E.showMenu = function (items) {
else {
v = "";
}
{
var vplain = v.indexOf("\0") < 0;
if (vplain && name.length >= 17 - v.length && typeof item === "object") {
g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7);
}
else if (vplain && name.length >= 15) {
g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7);
}
else {
g.drawString(name, x + 3.7, iy + 2.7);
}
var xo = x2;
if (selectEdit && idx === selected) {
xo -= 24 + 1;
g.setColor(g.theme.fgH)
.drawImage("\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@", xo, iy + (fontHeight - 10) / 2, { scale: 2 });
}
g.setFontAlign(1, -1);
g.drawString(v, xo - 2, iy + 1);
var truncated = drawLine(name, v, item, idx, x, iy, 0);
if (truncated && idx === selected) {
var nameScroll_1 = 0;
nameScroller = setInterval(function (name, v, item, idx, x, iy) {
drawLine(name, v, item, idx, x, iy, nameScroll_1);
nameScroll_1 += 1;
if (nameScroll_1 >= name.length - 5)
nameScroll_1 = 0;
}, 300, name, v, item, idx, x, iy);
}
g.setColor(g.theme.fg);
iy += fontHeight;
idx++;
};
while (rows--) {
_loop_1();
}
g.setFontAlign(-1, -1);
g.setColor((idx < menuItems.length) ? g.theme.fg : g.theme.bg).fillPoly([72, 166, 104, 166, 88, 174]);
Expand Down Expand Up @@ -170,6 +191,8 @@ E.showMenu = function (items) {
mode: "updown",
back: back,
remove: function () {
if (nameScroller)
clearInterval(nameScroller);
Bangle.removeListener("swipe", onSwipe);
},
}, function (dir) {
Expand Down
101 changes: 67 additions & 34 deletions apps/promenu/bootb2.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,59 @@ E.showMenu = (items?: Menu): MenuInstance => {
const scroller = {
scroll: selected,
};
let nameScroller: IntervalId | null = null;

const drawLine = (
name: string,
v: string,
item: ActualMenuItem,
idx: number,
x: number,
y: number,
nameScroll: number = 0,
) => {
const hl = (idx === selected && !selectEdit);
if(g.theme.dark){
fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
}else{
fillRectRnd(x, y, x2, y + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
}

g.setFont12x20()
.setColor(hl ? g.theme.fgH : g.theme.fg)
.setFontAlign(-1, -1);

const vplain = v.indexOf("\0") < 0;
let truncated = true;
if(vplain && name.length >= 17 - v.length && typeof item === "object"){
g.drawString(name.substring(nameScroll, nameScroll + 12 - v.length) + "...", x + 3.7, y + 2.7);
}else if(vplain && name.length >= 15){
g.drawString(name.substring(nameScroll, nameScroll + 15) + "...", x + 3.7, y + 2.7);
}else{
g.drawString(name, x + 3.7, y + 2.7);
truncated = false;
}

let xo = x2;
if (selectEdit && idx === selected) {
xo -= 24 + 1;
g.setColor(g.theme.fgH)
.drawImage(
"\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@",
xo,
y + (fontHeight - 10) / 2,
{scale:2},
);
}
g.setFontAlign(1, -1);
g.drawString(v, xo - 2, y + 1);

return truncated;
};

const l = {
draw: (rowmin?: number, rowmax?: number) => {
if (nameScroller) clearInterval(nameScroller), nameScroller = null;
let rows = 0|Math.min((y2 - y) / fontHeight, menuItems.length);
let idx = E.clip(selected - (rows>>1), 0, menuItems.length - rows);

Expand All @@ -66,17 +116,7 @@ E.showMenu = (items?: Menu): MenuInstance => {
const name = menuItems[idx];
const item = items![name]! as ActualMenuItem;

const hl = (idx === selected && !selectEdit);
if(g.theme.dark){
fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg + 40);
}else{
fillRectRnd(x, iy, x2, iy + fontHeight - 3, 7, hl ? g.theme.bgH : g.theme.bg - 20);
}

g.setColor(hl ? g.theme.fgH : g.theme.fg);
g.setFontAlign( - 1, -1);

let v;
let v: string;
if (typeof item === "object") {
v = "format" in item
? (item.format as any)(item.value) // <T>format(), value: T
Expand All @@ -86,29 +126,21 @@ E.showMenu = (items?: Menu): MenuInstance => {
v = "";
}

/*???*/{
const vplain = v.indexOf("\0") < 0;
if(vplain && name.length >= 17 - v.length && typeof item === "object"){
g.drawString(name.substring(0, 12 - v.length) + "...", x + 3.7, iy + 2.7);
}else if(vplain && name.length >= 15){
g.drawString(name.substring(0, 15) + "...", x + 3.7, iy + 2.7);
}else{
g.drawString(name, x + 3.7, iy + 2.7);
}

let xo = x2;
if (selectEdit && idx === selected) {
xo -= 24 + 1;
g.setColor(g.theme.fgH)
.drawImage(
"\x0c\x05\x81\x00 \x07\x00\xF9\xF0\x0E\x00@",
xo,
iy + (fontHeight - 10) / 2,
{scale:2},
);
}
g.setFontAlign(1, -1);
g.drawString(v, xo - 2, iy + 1);
const truncated = drawLine(name, v, item, idx, x, iy, 0);
if (truncated && idx === selected){
let nameScroll = 0;
nameScroller = setInterval((
name: string,
v: string,
item: ActualMenuItem,
idx: number,
x: number,
iy: number,
) => {
drawLine(name, v, item, idx, x, iy, nameScroll);
nameScroll += 1;
if (nameScroll >= name.length - 5) nameScroll = 0;
}, 300, name, v, item, idx, x, iy);
}

g.setColor(g.theme.fg);
Expand Down Expand Up @@ -191,6 +223,7 @@ E.showMenu = (items?: Menu): MenuInstance => {
mode: "updown",
back,
remove: () => {
if (nameScroller) clearInterval(nameScroller);
Bangle.removeListener("swipe", onSwipe);
},
} as SetUIArg<"updown">,
Expand Down
Loading