Skip to content

Commit d3ec2b1

Browse files
laurence-ugaldelaurence-ugalde
committed
read and edit/run modes
1 parent 371c9a7 commit d3ec2b1

File tree

3 files changed

+177
-29
lines changed

3 files changed

+177
-29
lines changed

‎formulae.css‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ body, html {
1313
}
1414

1515
#sidebar {
16+
display: none; /* <--- */
1617
background-color: #DBD6B6;
1718

1819
/* float: left; */
@@ -28,6 +29,7 @@ body, html {
2829
}
2930

3031
#dragbar {
32+
display: none; /* <--- */
3133
background-color: #DBD6B6;
3234

3335
position: absolute;
@@ -43,21 +45,25 @@ body, html {
4345
#main {
4446
/* float: right; */
4547
position: absolute;
46-
left: 308px;
48+
/*left: 308px;*/
49+
left: 0px; /* <---- */
4750
right: 0px;
48-
51+
outline: none;
4952
top: 50px;
50-
bottom: 50px;
53+
/*bottom: 50px;*/
54+
bottom: 0px;
5155
overflow: scroll;
5256
border-top: 1px solid black;
5357
border-bottom: 1px solid black;
5458
}
5559

5660
#footer {
61+
display: none;
5762
background-color: #DBD6B6;
5863
width: 100%;
59-
height: 50px;
60-
bottom: 0;
64+
/*height: 50px;*/
65+
height: 0px;
66+
bottom: 0px;
6167
position: absolute;
6268
/* border-top: 1px solid black; */
6369
}

‎formulae/formulae.js‎

Lines changed: 132 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ Formulae.scriptAtStart = true;
66
Formulae.timeZone = null;
77
Formulae.fontSize = null;
88
Formulae.ltr = true;
9+
Formulae.readMode = true;
910
Formulae.parameters = new URL(window.location.href).searchParams;
1011
//Formulae.pathName = new URL(window.location.href).pathname;
1112

@@ -315,7 +316,23 @@ Formulae.mouseMove = function(handler, mouseEvent) {
315316
if (!Formulae.ltr) x = handler.context.canvas.width - x;
316317
let test = handler.fromPoint(x, mouseEvent.offsetY);
317318

318-
if (test != Formulae.hExpression) {
319+
if (test !== Formulae.hExpression) { // current expression (test) has changed
320+
if (Formulae.readMode) {
321+
if (test !== null) {
322+
if (test.getTag() === "Internet.UniformResourceLocator") {
323+
document.body.style.cursor = "pointer";
324+
}
325+
else {
326+
//if (Formulae.hExpression !== null && Formulae.hExpression.getTag() === "Internet.UniformResourceLocator") {
327+
document.body.style.cursor = "default";
328+
//}
329+
}
330+
}
331+
332+
Formulae.hExpression = test;
333+
return;
334+
}
335+
319336
let context = handler.context;
320337

321338
let bkpOperation = context.globalCompositeOperation;
@@ -349,6 +366,12 @@ Formulae.mouseMove = function(handler, mouseEvent) {
349366
};
350367

351368
Formulae.mouseOut = function(handler) {
369+
if (Formulae.readMode) {
370+
Formulae.hExpression = null;
371+
document.body.style.cursor = "default";
372+
return;
373+
}
374+
352375
if (Formulae.hExpression != null) {
353376
let context = handler.context;
354377

@@ -371,10 +394,25 @@ Formulae.mouseOut = function(handler) {
371394
}
372395

373396
Formulae.mouseWheel = function() {
397+
if (Formulae.readMode) {
398+
Formulae.hExpression = null;
399+
document.body.style.cursor = "default";
400+
return;
401+
}
402+
374403
Formulae.clearHighlightedExpression();
375404
}
376405

377406
Formulae.mouseClick = function(handler, mouseEvent) {
407+
if (Formulae.readMode) {
408+
if (Formulae.hExpression !== null && Formulae.hExpression.getTag() === "Internet.UniformResourceLocator") {
409+
let win = window.open(Formulae.hExpression.get("Value"), "_blank");
410+
win.focus();
411+
}
412+
413+
return;
414+
}
415+
378416
if (Formulae.menu.style.visibility == "visible") {
379417
Formulae.menu.style.visibility = "hidden";
380418
return;
@@ -385,6 +423,25 @@ Formulae.mouseClick = function(handler, mouseEvent) {
385423
}
386424
}
387425

426+
Formulae.clearSelected = function() {
427+
if (Formulae.sExpression === null) return;
428+
429+
let context = Formulae.sHandler.context;
430+
431+
let bkpOperation = context.globalCompositeOperation;
432+
context.globalCompositeOperation = "difference";
433+
434+
let bkpFillStyle = context.fillStyle;
435+
context.fillStyle = "white";
436+
437+
Formulae.sExpression.drawSelecionShape(context);
438+
439+
context.fillStyle = bkpFillStyle;
440+
context.globalCompositeOperation = bkpOperation;
441+
442+
Formulae.sExpression = null;
443+
};
444+
388445
Formulae.setSelected = function(handler, expression, removePrevious) {
389446
Formulae.clearHighlightedExpression();
390447

@@ -490,6 +547,10 @@ Formulae.editionEscape = function() {
490547
}
491548

492549
Formulae.editionArrow = function(direction) {
550+
if (Formulae.readMode) {
551+
return;
552+
}
553+
493554
let test = Formulae.sExpression.moveOut(direction);
494555

495556
if (test != null && test != Formulae.sExpression) {
@@ -1795,7 +1856,13 @@ Formulae.newFile = function() {
17951856
let handler = Formulae.addExpression(expression, Formulae.ROW_INPUT);
17961857
handler.prepareDisplay();
17971858
handler.display();
1798-
Formulae.setSelected(handler, expression, false);
1859+
1860+
if (Formulae.readMode) {
1861+
Formulae.toggleMode();
1862+
}
1863+
else {
1864+
Formulae.setSelected(handler, expression, false);
1865+
}
17991866
}
18001867

18011868
Formulae.openFile = function(e) {
@@ -1820,7 +1887,10 @@ Formulae.openFile = function(e) {
18201887
//}
18211888

18221889
let newPackagesLoaded = await Formulae.xmlToScript(e.target.result);
1823-
Formulae.setSelected(Formulae.handlers[0], Formulae.handlers[0].expression.moveTo(Expression.DOWN), false);
1890+
1891+
if (!Formulae.readMode) {
1892+
Formulae.setSelected(Formulae.handlers[0], Formulae.handlers[0].expression.moveTo(Expression.DOWN), false);
1893+
}
18241894

18251895
if (newPackagesLoaded) {
18261896
Formulae.loadReloadEditions();
@@ -1901,6 +1971,8 @@ Formulae.fillFileInfo = function() {
19011971

19021972
Formulae.fileName = f + '.formulae?' + (new Date()).getTime();
19031973
Formulae.fileTitle = f.substring(f.indexOf("/") + 1);
1974+
1975+
document.title = Formulae.fileTitle;
19041976
}
19051977

19061978
Formulae.loadFile = async () => {
@@ -1913,7 +1985,9 @@ Formulae.loadFile = async () => {
19131985
let xml = await response.text();
19141986
let newPackagesLoaded = await Formulae.xmlToScript(xml);
19151987

1916-
Formulae.setSelected(Formulae.handlers[0], Formulae.handlers[0].expression.moveTo(Expression.DOWN), false);
1988+
if (!Formulae.readMode) {
1989+
Formulae.setSelected(Formulae.handlers[0], Formulae.handlers[0].expression.moveTo(Expression.DOWN), false);
1990+
}
19171991

19181992
if (newPackagesLoaded) {
19191993
Formulae.loadReloadEditions();
@@ -1922,7 +1996,7 @@ Formulae.loadFile = async () => {
19221996
if (Formulae.fileName != "Main page.formulae") {
19231997
let description = "Fōrmulæ - " + Formulae.fileTitle;
19241998
document.title = description;
1925-
document.head. children.namedItem('description').content = description;
1999+
document.head.children.namedItem('description').content = description;
19262000
}
19272001

19282002
/*
@@ -2042,6 +2116,40 @@ Formulae.outputForCrawling = function() {
20422116
});
20432117
}
20442118

2119+
Formulae.toggleMode = function() {
2120+
Formulae.readMode = !Formulae.readMode;
2121+
let display = Formulae.readMode ? "none" : "block";
2122+
2123+
[
2124+
"button-home", "button-save", "button-cut", "button-copy", "button-paste", "button-ins-after", "button-ins-before", "button-delete",
2125+
"button-change-type", "button-execute_sticky", "button-tools", "button-settings"
2126+
].forEach(element => {
2127+
document.getElementById(element).style.display = display;
2128+
});
2129+
2130+
document.getElementById("sidebar").style.width = Formulae.readMode ? "0px" : "300px";
2131+
document.getElementById("dragbar").style.left = Formulae.readMode ? "0px" : "301px";
2132+
document.getElementById("main").style.left = Formulae.readMode ? "0px" : "308px";
2133+
2134+
document.getElementById("main").style.bottom = Formulae.readMode ? "0px" : "50px";
2135+
document.getElementById("footer").style.height = Formulae.readMode ? "0px" : "50px";
2136+
2137+
document.getElementById("sidebar").style.display = display;
2138+
document.getElementById("dragbar").style.display = display;
2139+
document.getElementById("footer").style.display = display;
2140+
2141+
document.getElementById("button-mode").innerHTML = Formulae.readMode ? "Edit&nbsp;/&nbsp;run" : "Exit&nbsp;edit&nbsp;/&nbsp;run";
2142+
2143+
if (Formulae.readMode) {
2144+
Formulae.clearSelected();
2145+
}
2146+
else {
2147+
Formulae.setSelected(Formulae.handlers[0], Formulae.handlers[0].expression.moveTo(Expression.DOWN), false);
2148+
}
2149+
2150+
document.getElementById("main").focus();
2151+
};
2152+
20452153
Formulae.start = async function() {
20462154
Formulae.fillFileInfo();
20472155

@@ -2080,8 +2188,11 @@ Formulae.start = async function() {
20802188
// preventing scroll using arrow keys
20812189
// direction keys
20822190

2083-
//window.addEventListener("keydown", function(e) {
20842191
document.addEventListener("keydown", function(e) {
2192+
if (Formulae.readMode) {
2193+
return;
2194+
}
2195+
20852196
if([37, 38, 39, 40].indexOf(e.keyCode) > -1) {
20862197
e.preventDefault();
20872198
}
@@ -2134,6 +2245,8 @@ Formulae.start = async function() {
21342245
document.getElementById("button-tools") .addEventListener("click", () => Formulae.Tools.showTools());
21352246
document.getElementById("button-settings").addEventListener("click", () => Formulae.Settings.showSettings());
21362247

2248+
document.getElementById("button-mode").addEventListener("click", () => Formulae.toggleMode());
2249+
21372250
//////////////
21382251
// drag bar //
21392252
//////////////
@@ -2190,6 +2303,10 @@ Formulae.start = async function() {
21902303
Formulae.main.addEventListener(
21912304
'contextmenu',
21922305
function(e) {
2306+
if (Formulae.readMode) {
2307+
return;
2308+
}
2309+
21932310
if (Formulae.menu.style.visibility == "visible") {
21942311
Formulae.menu.style.visibility = "hidden";
21952312
}
@@ -2243,6 +2360,10 @@ Formulae.start = async function() {
22432360
document.addEventListener(
22442361
'dblclick',
22452362
function(e) {
2363+
if (Formulae.readMode) {
2364+
return;
2365+
}
2366+
22462367
if (Formulae.menu.style.visibility == "visible") {
22472368
Formulae.menu.style.visibility = "hidden";
22482369
}
@@ -2283,7 +2404,6 @@ Formulae.start = async function() {
22832404
//await Formulae.loadRefreshLocalization(true); // first time
22842405

22852406
Formulae.setOrientation();
2286-
22872407

22882408
Formulae.messages = await Formulae.loadMessages(null);
22892409
Formulae.setLocalizationCodes();
@@ -2301,6 +2421,8 @@ Formulae.start = async function() {
23012421
//if (!Formulae.supportsMouse()) {
23022422
// alert("x");
23032423
//}
2424+
2425+
document.getElementById("main").focus();
23042426
}
23052427

23062428
/*
@@ -2781,7 +2903,9 @@ Formulae.refreshTypesettingHandlers = function() {
27812903
Formulae.handlers[i].display();
27822904

27832905
if (Formulae.sHandler == Formulae.handlers[i]) { // restore selected expression
2784-
Formulae.setSelected(Formulae.sHandler, Formulae.sExpression, false);
2906+
if (!Formulae.readMode) {
2907+
Formulae.setSelected(Formulae.sHandler, Formulae.sExpression, false);
2908+
}
27852909
}
27862910
}
27872911
}

‎index.html‎

Lines changed: 34 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -29,24 +29,42 @@
2929
<div id="header">
3030

3131
<table border=0 cellspacing=0 cellpadding=0><tr>
32-
<td><img src='img/logo.png'>
32+
<td>
33+
<img src='img/logo.png'>
3334
<td>&nbsp;
34-
<td style='vertical-align: middle;'>
35-
<button id="button-home" title="Home" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/home.png'></button>
35+
<td style="vertical-align: middle;">
36+
<button id="button-home" title="Home" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/home.png'></button>
37+
<td style="vertical-align: middle;">
3638
<button id="button-new" title="New" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/new.png'></button>
39+
<td style="vertical-align: middle;">
3740
<button id="button-open" title="Open..." style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/open.png'></button>
38-
<input id="file-input" type="file" accept=".formulae" style="display: none;"/>
39-
<button id="button-save" title="Save..." style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/save.png'></button>
40-
<button id="button-cut" title="Cut" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/cut.png'></button>
41-
<button id="button-copy" title="Copy" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/copy.png'></button>
42-
<button id="button-paste" title="Paste" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/paste.png'></button>
43-
<button id="button-ins-after" title="Insert row below" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/ins_row_after.png'></button>
44-
<button id="button-ins-before" title="Inser row above" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/ins_row_before.png'></button>
45-
<button id="button-delete" title="Delete row" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/del_row.png'></button>
46-
<button id="button-change-type" title="Change type" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/pin.png'></button>
47-
<button id="button-execute_sticky" title="Execute sticky rows" type" style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/pin_run.png'></button>
48-
<button id="button-tools" title="Tools..." style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/tools.png'></button>
49-
<button id="button-settings" title="Settings..." style="border: none; background: none; cursor:pointer; outline: none;"><img src='img/settings.png'></button>
41+
<input id="file-input" type="file" accept=".formulae" style="display: none;"/>
42+
<td style="vertical-align: middle;">
43+
<button id="button-save" title="Save..." style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/save.png'></button>
44+
<td style="vertical-align: middle;">
45+
<button id="button-cut" title="Cut" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/cut.png'></button>
46+
<td style="vertical-align: middle;">
47+
<button id="button-copy" title="Copy" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/copy.png'></button>
48+
<td style="vertical-align: middle;">
49+
<button id="button-paste" title="Paste" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/paste.png'></button>
50+
<td style="vertical-align: middle;">
51+
<button id="button-ins-after" title="Insert row below" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/ins_row_after.png'></button>
52+
<td style="vertical-align: middle;">
53+
<button id="button-ins-before" title="Inser row above" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/ins_row_before.png'></button>
54+
<td style="vertical-align: middle;">
55+
<button id="button-delete" title="Delete row" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/del_row.png'></button>
56+
<td style="vertical-align: middle;">
57+
<button id="button-change-type" title="Change type" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/pin.png'></button>
58+
<td style="vertical-align: middle;">
59+
<button id="button-execute_sticky" title="Execute sticky rows" type" style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/pin_run.png'></button>
60+
<td style="vertical-align: middle;">
61+
<button id="button-tools" title="Tools..." style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/tools.png'></button>
62+
<td style="vertical-align: middle;">
63+
<button id="button-settings" title="Settings..." style="border: none; background: none; cursor:pointer; outline: none;" hidden><img src='img/settings.png'></button>
64+
<td style="width: 100%;">
65+
<td style="vertical-align: float:right;">
66+
<button id="button-mode">Edit&nbsp;/&nbsp;run</button>
67+
<td>&nbsp;
5068
</table>
5169

5270
</div> <!-- header -->
@@ -59,7 +77,7 @@
5977

6078
<div id="dragbar"></div>
6179

62-
<div id="main">
80+
<div id="main" tabindex="0">
6381

6482
<div class="container" id="container">
6583
</div>

0 commit comments

Comments
 (0)