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

Added nesting highlights, popup notes, and translation links. #3

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Added nesting highlights, popup notes, and translation links. #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6eb34cd
Added nesting highlights, popup notes, and translation links.
Erhannis Jan 2, 2022
caf90e2
Improved (?) nesting-color visibility; made them nest spatially
Erhannis Jan 2, 2022
f3cf99a
Failed tooltip improvement, commented out
Erhannis Jan 2, 2022
d13fb6d
Ok, I think I have a mode switch working - doesn't actually change mo…
Erhannis Jan 3, 2022
838b7b4
Made mode dropdown actually change mode
Erhannis Jan 3, 2022
3d9e2d8
Ok, managed to move the tooltips onto the words to be translated, whe…
Erhannis Jan 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
117 changes: 100 additions & 17 deletions containers/web/src/jboski.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
#
# The actual substitutions we do here came from the original jboski
# https://lojban.org/jboski/index.php.txt by Raphaël Poss <r.poss@online.fr>
def parse(text):
def parse(text, mode):

p = Popen("jbofihe -H", shell=True, stdin=PIPE, stdout=PIPE, stderr=PIPE, close_fds=True)
p.stdin.write(text.encode())
Expand All @@ -29,31 +29,114 @@ def parse(text):

if len(child_stderr) > 0:
return False, '<pre class="translationerror">' + child_stderr.decode() + '</pre>'

if mode == "plain":
# Plain
content = child_stdout.decode()
content = re.sub(r'^.*<BODY>\s*\n', '', content, flags=re.DOTALL)
content = re.sub(r'</BODY>\s*$', '', content, flags=re.DOTALL)
elif mode == "condensed_robust":
# Condensed (robust)
content = child_stdout.decode()
content = re.sub(r'^.*<BODY>\s*\n', '', content, flags=re.DOTALL)
content = re.sub(r'</BODY>\s*$', '', content, flags=re.DOTALL)
content = content.replace('<SUB><FONT SIZE="-3">', '<sub class="parenmark">')
content = content.replace('</FONT></SUB>', '</sub>')

"""
# Tried to move the tooltips onto the words themselves, but some words don't have translation asterisks, so that broke things
content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace tooltip">*<em class="sumtiplace tooltiptext">')
content = content.replace('</FONT></U>', '</em></em>')
content = content.replace('<I>', '<em class="translation tooltiptext">')
content = content.replace('</I>', '</strong></em></em>')
# https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=XYZ
content = re.sub('<B>(.*?)</B>', '<strong class="lojban tooltip"><a href="https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=\\1">\\1</a>', content)
"""

content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace tooltip">*<em class="sumtiplace tooltiptext">')
content = content.replace('</FONT></U>', '</em></em>')
content = content.replace('<I>', '<em class="translation tooltip">*<em class="translation tooltiptext">')
content = content.replace('</I>', '</em></em>')
# https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=XYZ
content = re.sub('<B>(.*?)</B>', '<strong class="lojban"><a href="https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=\\1">\\1</a></strong>', content)


content = content.replace('&gt;&gt;', '&raquo;')
content = content.replace('&lt;&lt;', '&laquo;')
content = content.replace('<P>', '<br />')
content = content.replace('[', '[<span class="colornest colornest_square">')
content = content.replace(']', '</span>]')
content = content.replace('(', '(<span class="colornest colornest_round">')
content = content.replace(')', '</span>)')
content = content.replace('&lt;', '&lt;<span class="colornest colornest_angle">')
content = content.replace('&gt;', '</span>&gt;')
#content = content + "<br/>(mode: " + mode + ")"
elif mode == "condensed":
# Condensed
content = child_stdout.decode()
content = re.sub(r'^.*<BODY>\s*\n', '', content, flags=re.DOTALL)
content = re.sub(r'</BODY>\s*$', '', content, flags=re.DOTALL)
content = content.replace('<SUB><FONT SIZE="-3">', '<sub class="parenmark">')
content = content.replace('</FONT></SUB>', '</sub>')


# Tried to move the tooltips onto the words themselves, but some words don't have translation asterisks, so that broke things
content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace tooltip">*<em class="sumtiplace tooltiptext">')
content = content.replace('</FONT></U>', '</em></em>')
# https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=XYZ
content = re.sub('<B>([^<>]*?)</B>\\n<I>([^<>]*?)</I>', '<strong class="lojban tooltip"><a href="https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=\\1">\\1</a><em class="translation tooltiptext">\\2</em></strong>', content)
content = re.sub('<B>(.*?)</B>', '<strong class="lojban"><a href="https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=\\1">\\1</a></strong>', content)
content = content.replace('<I>', '<em class="translation tooltip">*<em class="translation tooltiptext">')
content = content.replace('</I>', '</em></em>')

"""
content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace tooltip">*<em class="sumtiplace tooltiptext">')
content = content.replace('</FONT></U>', '</em></em>')
content = content.replace('<I>', '<em class="translation tooltip">*<em class="translation tooltiptext">')
content = content.replace('</I>', '</em></em>')
# https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=XYZ
content = re.sub('<B>(.*?)</B>', '<strong class="lojban"><a href="https://la-lojban.github.io/sutysisku/lojban/index.html#sisku=\\1">\\1</a></strong>', content)
"""


content = content.replace('&gt;&gt;', '&raquo;')
content = content.replace('&lt;&lt;', '&laquo;')
content = content.replace('<P>', '<br />')
content = content.replace('[', '[<span class="colornest colornest_square">')
content = content.replace(']', '</span>]')
content = content.replace('(', '(<span class="colornest colornest_round">')
content = content.replace(')', '</span>)')
content = content.replace('&lt;', '&lt;<span class="colornest colornest_angle">')
content = content.replace('&gt;', '</span>&gt;')
#content = content + "<br/>(mode: " + mode + ")"
else:
# Expanded
content = child_stdout.decode()
content = re.sub(r'^.*<BODY>\s*\n', '', content, flags=re.DOTALL)
content = re.sub(r'</BODY>\s*$', '', content, flags=re.DOTALL)
content = content.replace('<SUB><FONT SIZE="-3">', '<sub class="parenmark">')
content = content.replace('</FONT></SUB>', '</sub>')
content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace">')
content = content.replace('</FONT></U>', '</em>')
content = content.replace('<I>', '<em class="translation">')
content = content.replace('</I>', '</em>')
content = content.replace('<B>', '<strong class="lojban">')
content = content.replace('</B>', '</strong>')
content = content.replace('&gt;&gt;', '&raquo;')
content = content.replace('&lt;&lt;', '&laquo;')
content = content.replace('<P>', '<br />')

content = child_stdout.decode()
content = re.sub(r'^.*<BODY>\s*\n', '', content, flags=re.DOTALL)
content = re.sub(r'</BODY>\s*$', '', content, flags=re.DOTALL)
content = content.replace('<SUB><FONT SIZE="-3">', '<sub class="parenmark">')
content = content.replace('</FONT></SUB>', '</sub>')
content = content.replace('<U><FONT SIZE=-1>', '<em class="sumtiplace">')
content = content.replace('</FONT></U>', '</em>')
content = content.replace('<I>', '<em class="translation">')
content = content.replace('</I>', '</em>')
content = content.replace('<B>', '<strong class="lojban">')
content = content.replace('</B>', '</strong>')
content = content.replace('&gt;&gt;', '&raquo;')
content = content.replace('&lt;&lt;', '&laquo;')
content = content.replace('<P>', '<br />')


return True, content

@app.route('/')
def index():
text = request.args.get('text', "coi pilno mi'e jboski")
mode = request.args.get('mode', "condensed")
grammatical = False
parsed = ''
try:
grammatical, parsed = parse(text)
grammatical, parsed = parse(text, mode)
except Exception as e:
import traceback
return "<pre>Exception thrown: " + "\n".join(traceback.format_exception(None, e, e.__traceback__)) + "</pre>"
Expand Down
23 changes: 18 additions & 5 deletions containers/web/src/static/live.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,18 @@ var ajaxRequest = null;

$(document).ready(function() {

$("#input").keyup( debounce( function() {

let refresh = function() {
if (ajaxRequest) ajaxRequest.abort();

var jboText = $("#input").val();
ajaxRequest = $.getJSON("", { text: jboText, json: true }, function(json) {
var mode = $("#mode").val();
let params;
if (jboText) {
params = { mode: mode, text: jboText, json: true };
} else {
params = { mode: mode, json: true };
}
ajaxRequest = $.getJSON("", params, function(json) {
$("#output").html(json.html);

if (json.grammatical) {
Expand All @@ -40,7 +46,11 @@ $(document).ready(function() {
if (typeof(window.history) !== "undefined") {
var link = $("<a/>")[0];
link.href = window.location.href;
link.search = "?text=" + escape(jboText);
if (jboText) {
link.search = "?mode=" + escape(mode) + "&text=" + escape(jboText);
} else {
link.search = "?mode=" + escape(mode);
}

var title = jboText + " -- jboski";
history.replaceState(null, title, link.href);
Expand All @@ -50,7 +60,10 @@ $(document).ready(function() {
$("#input").removeClass("grammatical");
}
});
}, 500, false));
};

$("#input").keyup(debounce(refresh, 500, false));
$("#mode").change(refresh);
});

})(jQuery);
55 changes: 54 additions & 1 deletion containers/web/src/static/screen.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@

form { position: fixed; }
.ungrammatical { background: #fcc; }
#output { padding-top: 4em; }
#output {
padding-top: 5em;
/* line-height: 1; */
}

/* Unused, from visual-camxes */
.box {
Expand Down Expand Up @@ -30,9 +33,59 @@ em.sumtiplace {
color: maroon;
font-size: small;
}
span.colornest {
display: inline-block;
/* height: 3em; */
padding-top: 0.2em;
padding-bottom: 0.2em;
margin-top: 0.1em;
margin-bottom: 0.1em;
/* transform: translate(0px, 10px); */
}
span.colornest_square {
background-color: #FF000020;
}
span.colornest_round {
background-color: #00FF0020;
}
span.colornest_angle {
background-color: #0000FF20;
}
sub.parenmark {
font-size: xx-small;
}
em.translation {
color: blue;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
visibility: hidden;
white-space: nowrap;
display: inline-block;
/* width: 120px; */
background-color: white;
/* color: black; */
text-align: center;
border-radius: 6px;
border: green;
border-style: solid;
padding: 5px 0;
/* margin-left: 0%; */
/* left: 0em; */
transform: translate(-50% , 0%);
top: 2.75em;
line-height: 1;

/* Position the tooltip */
position: absolute;
z-index: 1;
}

.tooltip:hover .tooltiptext {
visibility: visible;
}
9 changes: 9 additions & 0 deletions containers/web/src/templates/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,15 @@
/>
<a href="static/about.html">About</a>
</p>
<p>
<label for="mode">Mode:</label>
<select name="mode" id="mode" required="required" selected="condensed">
<option value="plain" {{ ('selected' if request.args.get('mode') == 'plain' else '') if request.args.get('mode') else '' }}>plain</option>
<option value="expanded" {{ ('selected' if request.args.get('mode') == 'expanded' else '') if request.args.get('mode') else '' }}>expanded</option>
<option value="condensed" {{ ('selected' if request.args.get('mode') == 'condensed' else '') if request.args.get('mode') else 'selected' }}>condensed</option>
<option value="condensed_robust" {{ ('selected' if request.args.get('mode') == 'condensed_robust' else '') if request.args.get('mode') else '' }}>condensed (robust)</option>
</select>
</p>
</form>


Expand Down