Skip to content

Commit

Permalink
UI Autocomplete Rework
Browse files Browse the repository at this point in the history 
This PR rips out the current autocomplete control with its two big
legacy dependencies:

1. `prototype.js`[^1] (no updates since 2015)
2. `scriptalicious.js` (no updates since 2010)

and replaces them with the much much smaller, modern, and actively
maintained https://github.com/kraaden/autocomplete. We use
denis-taran/autocomplete@589da82
which is versioned as 8.0.4 on NPM (https://www.npmjs.com/package/autocompleter/v/8.0.4).
The end result replicates the functionality almost exactly.
Thanks to @reedy, the CSS matches the existing color palette too!

The reason for this change is that the current autocomplete framework
blocks multiple other improvements. `autocomplete.php` currently returns
an HTML fragment as the response which is then embedded into the DOM.

Request payload: `src_ap=new`

Response payload:

```html
<ul class='autocomplete'><li class='autocomplete' origin='src_ap' id='NEW:9188:-90.028297424316:30.042400360107:-6:A'>New Orleans-Lakefront Airp. (NEW), United States</li>
<li class='autocomplete' origin='src_ap' id='EWB:5737:-70.95690155029297:41.67610168457031:-5:A'>New Bedford Regional Airpo. (EWB), United States</li>
<li class='autocomplete' origin='src_ap' id='EWN:3730:-77.04290008539999:35.0730018616:-5:A'>New Bern-Coastal Carolina. (EWN), United States</li>
<li class='autocomplete' origin='src_ap' id='HVN:4006:-72.88680267:41.26369858:-5:A'>New Haven-Tweed New Haven. (HVN), United States</li>
<li class='autocomplete' origin='src_ap' id='MSY:3861:-90.25800323486328:29.99340057373047:-6:A'>New Orleans-Louis Armstron. (MSY), United States</li>
<li class='autocomplete' origin='src_ap' id='NBG:3768:-90.03500366:29.82530022:-6:A'>New Orleans NAS JRB/Alvin. (NBG), United States</li>
</ul>
```

This is super tight coupling between the UI and the server. This UI
dependency has to be removed before we can upgrade the endpoint.

I use `fetch` to send the request to `autocomplete.php` but then process
the response as data instead of embedding it in the DOM. I parse the
response as XML using `DOM.Parser` (this part will become `JSON.parse()`
once the API starts returning JSON) and pass the data to
`autocomplete.js` which deals with showing the list of items.

[^1]: We still need `prototype.js` in the map widget. See #1224.
  • Loading branch information
@chrisrosset
chrisrosset committed Jul 10, 2023
1 parent 3257782 commit e675f0d
Show file tree
Hide file tree
Showing 11 changed files with 154 additions and 1,117 deletions.
4 changes: 1 addition & 3 deletions about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,7 @@ <h2>Credits</h2>

<p>Open-source packages used to create this software include:
<a href="https://openlayers.org">OpenLayers</a>,
<a href="http://www.prototypejs.org">Prototype</a>,
<a href="http://script.aculo.us">script.aculo.us</a>,
<a href="http://www.wiseguysonly.com">WiseGuysOnly Autocompletion</a>,
<a href="https://github.com/kraaden/autocomplete"><tt>kraaden/autocomplete<tt/></a>,
<a href="https://yoast.com/articles/sortable-table/">Sortable Table</a>,
<a href="http://www.garrett.nildram.co.uk/calendar/scw.htm">Simple Calendar Widget</a>,
<a href="http://www.movable-type.co.uk/scripts/latlong.html">Movable Type Scripts (Great Circle)</a>,
Expand Down
1 change: 1 addition & 0 deletions css/autocomplete.min.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion html/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,6 @@ function condOut($arr, $key, $value, $true, $false) {
<link rel="stylesheet" href="/css/signup.css" type="text/css">
<link rel="stylesheet" href="/openflights.css" type="text/css">
<link rel="gettext" type="application/x-po" href="/locale/<?php echo $locale;?>/LC_MESSAGES/messages.po" />
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/utilities.min.js"></script>
<script type="text/javascript" src="/js/greatcircle.js"></script>
<script type="text/javascript" src="/js/Gettext.min.js"></script>
Expand Down
22 changes: 10 additions & 12 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
<meta name="keywords" content="flight,memory,logging,mapping,statistics,sharing">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests; block-all-mixed-content;">
<link rel="stylesheet" href="/css/style_reset.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/autocomplete.min.css">
<link rel="stylesheet" href="<?php echo fileUrlWithDate("/openflights.css") ?>" type="text/css">
<link rel="gettext" type="application/x-po" href="/locale/<?php echo $locale;?>/LC_MESSAGES/messages.po?20090715" />
<link rel="icon" type="image/png" href="/img/icon_favicon.png"/>
Expand All @@ -21,9 +22,7 @@
<script type="text/javascript" src="/js/utilities.min.js"></script>
<script type="text/javascript" src="/js/Gettext.min.js"></script>
<script type="text/javascript" src="/js/scw.min.js"></script>
<script type="text/javascript" src="/js/prototype.js"></script>
<script type="text/javascript" src="/js/scriptaculous.js"></script>
<script type="text/javascript" src="/js/controls.js"></script>
<script type="text/javascript" src="/js/autocomplete.min.js"></script>
<script type="text/javascript" src="<?php echo fileUrlWithDate("/openflights.js"); ?>"></script>
<?php include "./html/analytics.html"; ?>
</head>
Expand All @@ -48,8 +47,7 @@

<div id="quicksearch" style="display: none">
<img src="/img/layer-switcher-minimize.png" height=18 width=18 title="<?php echo _("Hide search bar") ?>" onClick="$('quicksearch').style.display='none'">
<input type="text" name="qs" id="qs" size="60" tabindex="5" onKeyDown='keyPress(event, "qs")' class="hintTextbox" value="<?php echo _("Enter city, airport, airline name or code") ?>"/><div id="qsAC">
</div>
<input type="text" name="qs" id="qs" size="60" tabindex="5" onKeyDown='keyPress(event, "qs")' class="hintTextbox" value="<?php echo _("Enter city, airport, airline name or code") ?>"/>
<input type="hidden" name="qsid" id="qsid"/>
<input type="button" id="qsgo" tabindex="6" value="<?php echo _("Search") ?>" title="<?php echo _("Map of routes from this airport") ?>" align="middle" onclick='JavaScript:goQuickSearch()' DISABLED>
</div>
Expand Down Expand Up @@ -217,7 +215,7 @@
<font color="blue"><?php echo _("From") ?></font><a href="#help" onclick='JavaScript:help("airport")'><img src="/img/icon_help.png" title="Help: How do I enter airports?" height=11 width=10></a>
</td>
<td>
<input type="text" name="src_ap" id="src_ap" size="60" tabindex="14" onKeyDown='keyPress(event, "src_ap")' class="hintTextbox" value="<?php echo _("Enter city name or airport code") ?>"/><div id="src_apAC"></div>
<input type="text" name="src_ap" id="src_ap" size="60" tabindex="14" onKeyDown='keyPress(event, "src_ap")' class="hintTextbox" value="<?php echo _("Enter city name or airport code") ?>"/>
<input type="hidden" name="src_apid" id="src_apid"/>
</td>
<td rowspan=2 valign=middle align=left>
Expand All @@ -227,7 +225,7 @@

<td><?php echo _("Plane") ?></td>
<td>
<input style="width: 180px" type="text" name="plane" id="plane" tabindex="111" onChange="JavaScript:markAsChanged();" onKeyDown='keyPress(event, "plane")' class="hintTextbox" value="<?php echo _("Enter plane model") ?>"><div id="planeAC"></div><input type="hidden" id="plane_id" name="plane_id" />
<input style="width: 180px" type="text" name="plane" id="plane" tabindex="111" onChange="JavaScript:markAsChanged();" onKeyDown='keyPress(event, "plane")' class="hintTextbox" value="<?php echo _("Enter plane model") ?>"><input type="hidden" id="planeid" name="planeid" />
<?php echo _("Reg.") ?> <input type="text" name="registration" size="8" tabindex="112" onChange="JavaScript:markAsChanged();"/>
</td>

Expand All @@ -237,7 +235,7 @@
<font color="blue"><?php echo _("To") ?></font><a href="#help" onclick='JavaScript:help("airport")'><img src="/img/icon_help.png" title="Help: How do I enter airports?" height=11 width=10></a>
</td>
<td>
<input type="text" name="dst_ap" id="dst_ap" size="60" tabindex="15" onKeyDown='keyPress(event, "dst_ap")' class="hintTextbox" value="<?php echo _("Enter city name or airport code") ?>"/><div id="dst_apAC"></div>
<input type="text" name="dst_ap" id="dst_ap" size="60" tabindex="15" onKeyDown='keyPress(event, "dst_ap")' class="hintTextbox" value="<?php echo _("Enter city name or airport code") ?>"/>
<input type="hidden" name="dst_apid" id="dst_apid"/>
</td>

Expand Down Expand Up @@ -283,7 +281,7 @@
<?php echo _("Carrier") ?><a href="#help" onclick='JavaScript:help("airline")'><img src="/img/icon_help.png" title="Help: How do I enter airlines?" height=11 width=10></a>
</td>
<td>
<input type="text" name="airline" id="airline" size="60" tabindex="20" onKeyDown='keyPress(event, "airline")' class="hintTextbox" value="<?php echo _("Enter airline name or code") ?>"/><div id="airlineAC"></div>
<input type="text" name="airline" id="airline" size="60" tabindex="20" onKeyDown='keyPress(event, "airline")' class="hintTextbox" value="<?php echo _("Enter airline name or code") ?>"/>
<input type="hidden" name="airlineid" id="airlineid"/>
</td>
<td>
Expand Down Expand Up @@ -335,7 +333,7 @@
for ($row = 1; $row <= 4; $row++) {
echo "<tr id='row$row' " . ($row > 1 ? "style='display: none;'" : "") . "> <!-- Row $row -->\n";
printf(
"<td><input type='text' name='src_ap%s' id='src_ap%s' size='32' tabindex='1%s1' onKeyDown='keyPress(event, \"src_ap%s\")' class='hintTextbox' value=\"%s\"/><span id='src_ap{$row}AC'></span>\n",
"<td><input type='text' name='src_ap%s' id='src_ap%s' size='32' tabindex='1%s1' onKeyDown='keyPress(event, \"src_ap%s\")' class='hintTextbox' value=\"%s\"/>\n",
$row,
$row,
$row,
Expand All @@ -352,7 +350,7 @@
_("Airport search")
);
printf(
"<td><input type='text' name='dst_ap%s' id='dst_ap%s' size='32' tabindex='1%s2' onKeyDown='keyPress(event, \"dst_ap%s\")' class='hintTextbox' value=\"%s\"/><span id='dst_ap%sAC'></span>\n",
"<td><input type='text' name='dst_ap%s' id='dst_ap%s' size='32' tabindex='1%s2' onKeyDown='keyPress(event, \"dst_ap%s\")' class='hintTextbox' value=\"%s\"/>\n",
$row,
$row,
$row,
Expand All @@ -370,7 +368,7 @@
_("Airport search")
);
printf(
"<td><input type='text' name='airline%s' id='airline%s' size='32' tabindex='1%s3' onKeyDown='keyPress(event, \"airline%s\")' class='hintTextbox' value=\"%s\"/><span id='airline{$row}AC'></span>\n",
"<td><input type='text' name='airline%s' id='airline%s' size='32' tabindex='1%s3' onKeyDown='keyPress(event, \"airline%s\")' class='hintTextbox' value=\"%s\"/>\n",
$row,
$row,
$row,
Expand Down
10 changes: 10 additions & 0 deletions js/autocomplete.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions js/autocomplete.min.js.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e675f0d

Please sign in to comment.