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

feat: goto feature; hit g to open a menu with locations to go to #629

Merged
merged 1 commit into from
Jan 21, 2025
Merged

feat: goto feature; hit g to open a menu with locations to go to #629

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions galleries/bar_plot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1154,6 +1154,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/boxplot_horizontal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1684,6 +1684,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
<html></html>
Expand Down
1 change: 1 addition & 0 deletions galleries/boxplot_vertical.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1802,6 +1802,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/dodged_bar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -824,6 +824,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/heatmap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1656,6 +1656,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/histogram.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1548,6 +1548,7 @@
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/histogram.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/lineplot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1003,6 +1003,7 @@
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/lineplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/scatterplot.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5885,6 +5885,7 @@
<script src="../src/js/heatmap.js"></script>
<script src="../src/js/scatterplot.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/stacked.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,6 +756,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions galleries/stacked_normalized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -789,6 +789,7 @@
<script src="../src/js/histogram.js"></script>
<script src="../src/js/segmented.js"></script>
<script src="../src/js/controls.js"></script>
<script src="../src/js/goto.js"></script>
<script src="../src/js/init.js"></script>
</body>
</html>
1 change: 1 addition & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ gulp.task('scripts', function () {
'./src/js/lineplot.js',
'./src/js/segmented.js',
'./src/js/controls.js',
'./src/js/goto.js',
'./src/js/init.js',
]) // order matters here
.pipe(concat('maidr.js'))
Expand Down
30 changes: 30 additions & 0 deletions src/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,36 @@
/* pointer-events: none; */
}

.btn {
display: inline-block;
font-weight: 400;
color: #212529;
text-align: center;
vertical-align: middle;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: 0.375rem 0.75rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.25rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn-link {
font-weight: 400;
color: #007bff;
background-color: transparent;
}

.btn-link.active {
color: #0056b3;
border: 2px solid #0056b3;
}

/* Menu stuff */
.modal {
position: fixed;
Expand Down
178 changes: 90 additions & 88 deletions src/js/controls.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -200,95 +200,97 @@ class Control {
SetPrefixControls() {
// prefix events, l + x, where x is a key for the title, axis, etc
// we listen for a moment when l is hit for a key to follow
constants.events.push([
document,
'keydown',
function (e) {
// init
let pressedTimeout = null;

// enable / disable prefix mode
if (e.key == 'l') {
control.pressedL = true;
if (pressedTimeout != null) {
clearTimeout(pressedTimeout);
pressedTimeout = null;
}
pressedTimeout = setTimeout(function () {
control.pressedL = false;
}, constants.keypressInterval);
}

// Prefix mode stuff: L is enabled, look for these keys
if (control.pressedL) {
if (e.key == 'x') {
// X: x label
let xlabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
xlabel = plot.plotLegend.x;
} else if (singleMaidr.type == 'hist') {
xlabel = plot.legendX;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type.includes('point')
) {
xlabel = plot.x_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
xlabel = plot.plotLegend.x;
}
display.displayInfo('x label', xlabel);
control.pressedL = false;
} else if (e.key == 'y') {
// Y: y label
let ylabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
ylabel = plot.plotLegend.y;
} else if (singleMaidr.type == 'hist') {
ylabel = plot.legendY;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type == 'line' ||
singleMaidr.type.includes('point')
) {
ylabel = plot.y_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
ylabel = plot.plotLegend.y;
}
display.displayInfo('y label', ylabel);
control.pressedL = false;
} else if (e.key == 't') {
// T: title
display.displayInfo('title', plot.title);
control.pressedL = false;
} else if (e.key == 's') {
// subtitle
display.displayInfo('subtitle', plot.subtitle);
control.pressedL = false;
} else if (e.key == 'c') {
// caption
display.displayInfo('caption', plot.caption);
control.pressedL = false;
} else if (e.key == 'f') {
display.displayInfo('fill', plot.fill);
control.pressedL = false;
} else if (e.key != 'l') {
control.pressedL = false;
for (let i = 0; i < this.allControlElements.length; i++) {
constants.events.push([
this.allControlElements[i],
'keydown',
function (e) {
// init
let pressedTimeout = null;

// enable / disable prefix mode
if (e.key == 'l') {
control.pressedL = true;
if (pressedTimeout != null) {
clearTimeout(pressedTimeout);
pressedTimeout = null;
}
pressedTimeout = setTimeout(function () {
control.pressedL = false;
}, constants.keypressInterval);
}

// Prefix mode stuff: L is enabled, look for these keys
if (control.pressedL) {
if (e.key == 'x') {
// X: x label
let xlabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
xlabel = plot.plotLegend.x;
} else if (singleMaidr.type == 'hist') {
xlabel = plot.legendX;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type.includes('point')
) {
xlabel = plot.x_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
xlabel = plot.plotLegend.x;
}
display.displayInfo('x label', xlabel);
control.pressedL = false;
} else if (e.key == 'y') {
// Y: y label
let ylabel = '';
if (singleMaidr.type == 'bar' || singleMaidr.type == 'line') {
ylabel = plot.plotLegend.y;
} else if (singleMaidr.type == 'hist') {
ylabel = plot.legendY;
} else if (
singleMaidr.type == 'heat' ||
singleMaidr.type == 'box' ||
singleMaidr.type == 'point' ||
singleMaidr.type == 'line' ||
singleMaidr.type.includes('point')
) {
ylabel = plot.y_group_label;
} else if (
singleMaidr.type == 'stacked_bar' ||
singleMaidr.type == 'stacked_normalized_bar' ||
singleMaidr.type == 'dodged_bar'
) {
ylabel = plot.plotLegend.y;
}
display.displayInfo('y label', ylabel);
control.pressedL = false;
} else if (e.key == 't') {
// T: title
display.displayInfo('title', plot.title);
control.pressedL = false;
} else if (e.key == 's') {
// subtitle
display.displayInfo('subtitle', plot.subtitle);
control.pressedL = false;
} else if (e.key == 'c') {
// caption
display.displayInfo('caption', plot.caption);
control.pressedL = false;
} else if (e.key == 'f') {
display.displayInfo('fill', plot.fill);
control.pressedL = false;
} else if (e.key != 'l') {
control.pressedL = false;
}
}
}
},
]);
},
]);
}
}

/**
Expand Down
Loading
Loading