Skip to content

Remove jQuery dependency and replace with vanilla JavaScript #385

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

Draft
Copilot wants to merge 4 commits into
base: master
Choose a base branch
from
Draft

Remove jQuery dependency and replace with vanilla JavaScript #385

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a845748
Initial plan
Copilot Sep 26, 2025
d560c05
Replace jQuery with vanilla JavaScript - main functionality working
Copilot Sep 26, 2025
807b903
Complete jQuery removal - cleanup old dependencies and final testing
Copilot Sep 26, 2025
dc6ec84
Clean up legacy fallback code - remove jQuery compatibility layers
Copilot Sep 26, 2025
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
2 changes: 0 additions & 2 deletions demo/beer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
<meta name="description" content="Vietos, kur Lietuvoje galima paragauti arba įsigyti Craft alaus: parduotuvėlės, aludės, restoranai ir pan."</meta>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<link rel="stylesheet" href="/vendor/mapbox-gl-v1.12.0.css" integrity="UZ+LVvoKDw3Z1M+G8PTJnK15pz8bkHYawBRgjnu8G6HOF6m1Sswa8NmgIRHBwl6W" />
<link rel="stylesheet" href="/vendor/bootstrap-3.4.1.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" />
<link rel="stylesheet" href="/vendor/font-awesome-4.7.0.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" />
<style>
body { margin:0; padding:0; overflow: hidden; }
Expand Down Expand Up @@ -113,7 +112,6 @@
<div><input type="checkbox" id="label-shop" onChange="changeType('shop')"><label style="border-radius: 0 0 7px 7px;" for="label-shop">Išsinešti</label></div>
</div>
<div id="menu-control" class="menu-control" onClick="showHide()">Slėpti meniu</div>
<script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"></script>
<script src="/vendor/mapbox-gl-v1.12.0.js" integrity="sha384-DhY0JzHtRSi6hVlkcl8pnYDFxtpFPLFknTwdYcCP0K3mDvN9AOIAcEdhU/1OFCPl"></script>
<script src="/vendor/mapbox-gl-supported-v1.4.1.js" integrity="sha384-hkaiLI3qWm+IvWhTurXB7aIuqFl8moxjeF3lc17EPw0Q0fgxrLDWZPHrYxipE8+D"></script>
<script>
Expand Down
2 changes: 0 additions & 2 deletions demo/bicycle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,6 @@
<link rel="icon" type="image/png" href="/logo/openmap-icon-192x192.png" sizes="192x192">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/vendor/mapbox-gl-v1.12.0.css" integrity="sha384-UZ+LVvoKDw3Z1M+G8PTJnK15pz8bkHYawBRgjnu8G6HOF6m1Sswa8NmgIRHBwl6W" />
<link rel="stylesheet" href="/vendor/bootstrap-3.4.1.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" />
<link rel="stylesheet" href="/vendor/font-awesome-4.7.0.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" />
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="bicycle_legend.css">
Expand All @@ -35,7 +34,6 @@
<!-- End Google Tag Manager (noscript) -->
<div id="map" role="main"></div>
<div id='sw_container'></div>
<script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"></script>
<script src="/vendor/mapbox-gl-v1.12.0.js" integrity="sha384-DhY0JzHtRSi6hVlkcl8pnYDFxtpFPLFknTwdYcCP0K3mDvN9AOIAcEdhU/1OFCPl"></script>
<script src="/vendor/mapbox-gl-supported-v1.4.1.js" integrity="sha384-hkaiLI3qWm+IvWhTurXB7aIuqFl8moxjeF3lc17EPw0Q0fgxrLDWZPHrYxipE8+D"></script>
<script>
Expand Down
78 changes: 78 additions & 0 deletions demo/bootstrap-replacement.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
/* Minimal Bootstrap replacement for grid system and form controls */
.container-fluid {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}

.row {
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}

.col-xs-12, .col-sm-6, .col-md-4, .col-lg-3 {
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%;
}

/* Bootstrap 3 to 5 class mapping */
@media (min-width: 576px) {
.col-sm-6 {
flex: 0 0 50%;
max-width: 50%;
}
}

@media (min-width: 768px) {
.col-md-4 {
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
}

@media (min-width: 992px) {
.col-lg-3 {
flex: 0 0 25%;
max-width: 25%;
}
}

.form-group {
margin-bottom: 1rem;
}

.form-control {
display: block;
width: 100%;
height: calc(1.5em + 0.75rem + 2px);
padding: 0.375rem 0.75rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #495057;
background-color: #fff;
background-clip: padding-box;
border: 1px solid #ced4da;
border-radius: 0.25rem;
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
color: #495057;
background-color: #fff;
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-container {
/* Custom styles for search container if needed */
}
7 changes: 3 additions & 4 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
<link rel="icon" type="image/png" href="/logo/openmap-icon-192x192.png" sizes="192x192">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="/vendor/mapbox-gl-v1.12.0.css" integrity="sha384-UZ+LVvoKDw3Z1M+G8PTJnK15pz8bkHYawBRgjnu8G6HOF6m1Sswa8NmgIRHBwl6W" />
<link rel="stylesheet" href="/vendor/bootstrap-3.4.1.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" />
<link rel="stylesheet" href="bootstrap-replacement.css" />
<link rel="stylesheet" href="/vendor/font-awesome-4.7.0.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" />
<link rel="stylesheet" href="search/typeahead.css">
<link rel="stylesheet" href="search/search.css">
Expand Down Expand Up @@ -67,11 +67,10 @@
</div>
<div id="i_search_results"></div>

<script src="/vendor/jquery-3.4.1.min.js" integrity="sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh"></script>
<script src="/vendor/mapbox-gl-v1.12.0.js" integrity="sha384-DhY0JzHtRSi6hVlkcl8pnYDFxtpFPLFknTwdYcCP0K3mDvN9AOIAcEdhU/1OFCPl"></script>
<script src="/vendor/mapbox-gl-supported-v1.4.1.js" integrity="sha384-hkaiLI3qWm+IvWhTurXB7aIuqFl8moxjeF3lc17EPw0Q0fgxrLDWZPHrYxipE8+D"></script>
<script src='search/typeahead.bundle.js'></script>
<script src='search/typeahead-openmap.js'></script>
<script src='search/simple-autocomplete.js'></script>
<script src='search/openmap-search-engine.js'></script>
<script src='search/search.js'></script>
<script src="map.js"></script>
<script type="text/javascript">
Expand Down
41 changes: 25 additions & 16 deletions demo/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,14 +88,20 @@ if (!mapboxgl.supported()) {
alert('Jūsų naršyklė nepalaiko Mapbox GL. Prašome atsinaujinti naršyklę.');
} else {
if (hashData = getMapDataFromHashUrl()) {
$.extend(mapData, hashData);
Object.assign(mapData, hashData);
}

if (!hashData && (cookieData = readCookie(cookieName))) {
$.extend(mapData, cookieData);
Object.assign(mapData, cookieData);
}
const activeButton = document.querySelector("button[data-style='" + mapData.type + "']");
if (activeButton) {
activeButton.classList.add('active');
}
const layersElement = document.getElementById('layers');
if (layersElement) {
layersElement.classList.remove('hidden');
}
$("button[data-style='" + mapData.type + "']").addClass('active');
$('#layers').removeClass('hidden');

changeHashUrl();

Expand Down Expand Up @@ -141,7 +147,8 @@ if (!mapboxgl.supported()) {

if (typeof searchEngine !== 'undefined') {
var searchMarker = null;
$(searchEngine).bind('addresspicker:selected', function (event, selectedPlace) {
searchEngine.addEventListener('addresspicker:selected', function (event) {
const selectedPlace = event.detail;
if (!searchMarker) {
searchMarker = new mapboxgl.Marker();
}
Expand All @@ -164,19 +171,21 @@ if (typeof searchEngine !== 'undefined') {
});
}

$('#layers button').on('click', function (e) {
if ($(this).hasClass('active')) {
return false;
}
$('#layers button').removeClass('active');
$(this).addClass('active');
document.querySelectorAll('#layers button').forEach(button => {
button.addEventListener('click', function (e) {
if (this.classList.contains('active')) {
return false;
}
document.querySelectorAll('#layers button').forEach(btn => btn.classList.remove('active'));
this.classList.add('active');

var selectLayer = $(e.target).data('style');
map.setStyle('styles/' + selectLayer + '.json');
var selectLayer = e.target.getAttribute('data-style');
map.setStyle('styles/' + selectLayer + '.json');

mapData.type = selectLayer;
mapData.id = null;
changeHashUrl(mapData);
mapData.type = selectLayer;
mapData.id = null;
changeHashUrl(mapData);
});
});

function getUrlHash(state) {
Expand Down
73 changes: 73 additions & 0 deletions demo/search/openmap-search-engine.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
/**
* OpenMap Search Engine - Vanilla JavaScript version
* Replaces the jQuery-dependent typeahead-openmap.js
*/
class OpenMapSearchEngine extends EventTarget {
constructor(options = {}) {
super();
this.options = {
formatResult: options.formatResult || ((feature) => feature.name),
reqParams: {},
...options
};
}

/**
* Search function compatible with SimpleAutocomplete
*/
search(query, callback) {
if (query.length < 3) {
callback([]);
return;
}

const searchData = {
...this.options.reqParams,
q: query
};

// Convert object to URLSearchParams
const params = new URLSearchParams();
Object.keys(searchData).forEach(key => {
params.append(key, searchData[key]);
});

fetch('/api/search?' + params.toString())
.then(response => response.json())
.then(data => {
const results = data.hits.hits.map(feature => {
const result = feature._source;
result._description = this.options.formatResult(feature._source);
return result;
});

// Trigger predictions event
this.dispatchEvent(new CustomEvent('addresspicker:predictions', {
detail: results
}));

callback(results);
})
.catch(error => {
console.error('Search error:', error);
callback([]);
});
}

/**
* Bind selection event to the autocomplete input
*/
bindSelectionEvent(input) {
input.addEventListener('autocomplete:selected', (event) => {
const selectedPlace = event.detail;

// Trigger addresspicker:selected event
this.dispatchEvent(new CustomEvent('addresspicker:selected', {
detail: selectedPlace
}));
});
}
}

// Export for use in other scripts
window.OpenMapSearchEngine = OpenMapSearchEngine;
31 changes: 17 additions & 14 deletions demo/search/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,19 +226,22 @@ function imgSprite(type) {
'px; background: url(search/sprites/openmaplt.png) -' + sprite[icon].x + 'px -' + sprite[icon].y + 'px;">';
}

$('#searchInput').typeahead({
minLength: 3,
hint: false,
highlight: true,
}, {
limit: 10,
display: '_description',
source: searchEngine.ttAdapter(),
templates: {
suggestion: function (context) {
return '<div>' + imgSprite(context.obj_type) + context._description + '</div>';
// Initialize the autocomplete with vanilla JavaScript
const searchInput = document.getElementById('searchInput');
if (searchInput) {
const autocomplete = new SimpleAutocomplete(searchInput, {
minLength: 3,
limit: 10,
display: '_description',
source: (query, callback) => {
searchEngine.search(query, callback);
},
templates: {
suggestion: function (context) {
return '<div>' + imgSprite(context.obj_type) + context._description + '</div>';
}
}
}
});
});

searchEngine.bindDefaultTypeaheadEvent($('#searchInput'));
searchEngine.bindSelectionEvent(searchInput);
}
Loading