Skip to content

Commit f38c89d

Browse files
rvosarvosa
authored
Merge pull request #412 from TreeBASE/copilot/refactor-js-codebase-replace-prototypejs
Replace Prototype.js with jQuery
2 parents 8b935c0 + 73aaf9b commit f38c89d

6 files changed

Lines changed: 320 additions & 320 deletions

File tree

‎treebase-web/src/main/webapp/decorators/defaultTemplate.jsp‎

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,9 @@
1616
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/messages.css'/>" />
1717
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/ajaxProgress.css'/>" />
1818
<link rel="stylesheet" type="text/css" media="all" href="<c:url value='/styles/submissionSummary.css'/>" />
19-
<!-- Phylotree.js stack - MUST load before Prototype.js to avoid Array.prototype pollution -->
19+
<!-- jQuery - replaces Prototype.js -->
20+
<script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
21+
<!-- Phylotree.js stack -->
2022
<script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
2123
<script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
2224
<script type="text/javascript" src="<c:url value='/scripts/underscore.js'/>"></script>
@@ -42,25 +44,46 @@
4244
<script type="text/javascript" src="<c:url value='/scripts/autocomplete.js'/>"></script>
4345
<script type="text/javascript" src="<c:url value='/scripts/ajaxProgress.js'/>"></script>
4446
<script language="Javascript" type="text/javascript">
47+
// Configure DWR to suppress default error alerts for autocomplete
48+
if (typeof dwr !== 'undefined' && dwr.engine) {
49+
dwr.engine.setErrorHandler(function(message, ex) {
50+
// Silently handle DWR errors for autocomplete (e.g., empty database)
51+
if (typeof console !== 'undefined' && console.log) {
52+
console.log('DWR error (suppressed): ' + message);
53+
}
54+
});
55+
}
4556
4657
function updateList(autocompleter, token) {
47-
RemotePersonService.findCompleteEmailAddress(token, function(data) { autocompleter.setChoices(data) });
58+
RemotePersonService.findCompleteEmailAddress(token, {
59+
callback: function(data) { autocompleter.setChoices(data || []); },
60+
errorHandler: function(message, ex) { autocompleter.setChoices([]); }
61+
});
4862
}
4963
function nameValueSelector(tag){
5064
return tag;
5165
}
5266
// nameValueSelctor(tag) method is used by all the four methods related to Auto Suggestion Box
5367
5468
function updateSoftwareNameList(autocompleter, token) {
55-
RemoteSoftwareNameService.findCompleteSoftwareName(token, function(data) { autocompleter.setChoices(data) });
69+
RemoteSoftwareNameService.findCompleteSoftwareName(token, {
70+
callback: function(data) { autocompleter.setChoices(data || []); },
71+
errorHandler: function(message, ex) { autocompleter.setChoices([]); }
72+
});
5673
}
5774
5875
function updateJournalNameList(autocompleter, token) {
59-
RemoteJournalNameService.findCompleteJournalName(token, function(data) { autocompleter.setChoices(data) });
76+
RemoteJournalNameService.findCompleteJournalName(token, {
77+
callback: function(data) { autocompleter.setChoices(data || []); },
78+
errorHandler: function(message, ex) { autocompleter.setChoices([]); }
79+
});
6080
}
6181
6282
function updateUniqueOtherAlgorithmList(autocompleter, token) {
63-
RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, function(data) { autocompleter.setChoices(data) });
83+
RemoteUniqueOtherAlgorithmService.findAllUniqueOtherAlgorithmDescriptions(token, {
84+
callback: function(data) { autocompleter.setChoices(data || []); },
85+
errorHandler: function(message, ex) { autocompleter.setChoices([]); }
86+
});
6487
}
6588
6689
</script>

‎treebase-web/src/main/webapp/decorators/mainTemplate.jsp‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@
1010
<title>TreeBASE Web<decorator:title/></title>
1111
<link rel="stylesheet" type="text/css" href="<c:url value='/styles/styles.css'/>" />
1212
<link rel="stylesheet" type="text/css" href="<c:url value='/styles/menuExpandable2.css'/>" />
13-
<!-- Phylotree.js stack - MUST load before Prototype.js to avoid Array.prototype pollution -->
13+
<!-- jQuery - replaces Prototype.js -->
14+
<script type="text/javascript" src="<c:url value='/scripts/jquery-3.7.1.min.js'/>"></script>
15+
<!-- Phylotree.js stack -->
1416
<script type="text/javascript" src="<c:url value='/scripts/d3.min.js'/>"></script>
1517
<script type="text/javascript" src="<c:url value='/scripts/lodash.js'/>"></script>
1618
<script type="text/javascript" src="<c:url value='/scripts/underscore.js'/>"></script>

‎treebase-web/src/main/webapp/scripts/common.js‎

Lines changed: 68 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -17,9 +17,11 @@ function popupWithSizes(url, width, height) {
1717
}
1818
function openHelp(tag) {
1919
var url = '/treebase-web/help.html?helpTag=' + tag;
20-
var req = new Ajax.Request(url, {
21-
'method':'get',
22-
'onSuccess':function(response){
20+
$.ajax({
21+
url: url,
22+
method: 'GET',
23+
dataType: 'text',
24+
success: function(response){
2325
top.consoleRef=window.open('','help',
2426
'width=400,height=350'
2527
+',menubar=no'
@@ -33,7 +35,7 @@ function openHelp(tag) {
3335
if ( top.consoleRef == null || top.consoleRef.closed ) {
3436
alert("Couldn't open window! The help system requires that popups are allowed for the TreeBASE site.");
3537
}
36-
top.consoleRef.document.writeln(response.responseText);
38+
top.consoleRef.document.writeln(response);
3739
top.consoleRef.document.close();
3840
}
3941
});
@@ -95,81 +97,58 @@ TreeBASE.register(
9597

9698
TreeBASE.register(
9799
function() {
98-
var inputs = $$('.textCell');
99-
for ( var i = 0; i < inputs.length; i++ ) {
100-
if ( inputs[i] ) {
101-
var currentColor = inputs[i].style.borderColor;
102-
inputs[i].onfocus = function () {
103-
this.style.borderColor = '#3863A4';
104-
this.select();
105-
}
106-
inputs[i].onblur = function () {
107-
this.style.borderColor = currentColor;
108-
}
109-
}
110-
}
100+
$('.textCell').each(function() {
101+
var currentColor = $(this).css('borderColor');
102+
$(this).on('focus', function () {
103+
$(this).css('borderColor', '#3863A4');
104+
this.select();
105+
});
106+
$(this).on('blur', function () {
107+
$(this).css('borderColor', currentColor);
108+
});
109+
});
111110
}
112111
);
113112

114113
TreeBASE.register(
115114
function () {
116115
if ( document.getElementsByClassName ) {
117-
var checkBoxCells = $$('.checkBoxColumn');
118-
var buttonContainer = $('buttonContainer');
119-
if ( checkBoxCells.length > 0 && buttonContainer ) {
120-
var checkButton = new Element('input',{'type':'button','value':'Check all'});
121-
checkButton.observe('click',function () {
122-
for ( var i = 0; i < checkBoxCells.length; i++ ) {
123-
if ( checkBoxCells[i] ) {
124-
var checkBoxes = $(checkBoxCells[i]).select('input');
125-
for ( var j = 0; j < checkBoxes.length; j++ ) {
126-
if ( checkBoxes[j] && checkBoxes[j].type == 'checkbox' || checkBoxes[j].type == 'radio' ) {
127-
if ( ! checkBoxes[j].disabled ) {
128-
checkBoxes[j].checked = 'checked';
129-
}
130-
}
131-
}
132-
}
133-
}
116+
var $checkBoxCells = $('.checkBoxColumn');
117+
var $buttonContainer = $('#buttonContainer');
118+
if ( $checkBoxCells.length > 0 && $buttonContainer.length > 0 ) {
119+
var $checkButton = $('<input>', {type: 'button', value: 'Check all'});
120+
$checkButton.on('click', function () {
121+
$checkBoxCells.each(function() {
122+
$(this).find('input').each(function() {
123+
if ( (this.type == 'checkbox' || this.type == 'radio') && !this.disabled ) {
124+
$(this).prop('checked', true);
125+
}
126+
});
127+
});
134128
});
135-
var uncheckButton = new Element('input',{'type':'button','value':'Uncheck all'});
136-
uncheckButton.observe('click',function () {
137-
for ( var i = 0; i < checkBoxCells.length; i++ ) {
138-
if ( checkBoxCells[i] ) {
139-
var checkBoxes = $(checkBoxCells[i]).select('input');
140-
for ( var j = 0; j < checkBoxes.length; j++ ) {
141-
if ( checkBoxes[j] && checkBoxes[j].type == 'checkbox' || checkBoxes[j].type == 'radio' ) {
142-
if ( ! checkBoxes[j].disabled ) {
143-
checkBoxes[j].checked = null;
144-
}
145-
}
146-
}
147-
}
148-
}
129+
var $uncheckButton = $('<input>', {type: 'button', value: 'Uncheck all'});
130+
$uncheckButton.on('click', function () {
131+
$checkBoxCells.each(function() {
132+
$(this).find('input').each(function() {
133+
if ( (this.type == 'checkbox' || this.type == 'radio') && !this.disabled ) {
134+
$(this).prop('checked', false);
135+
}
136+
});
137+
});
149138
});
150-
var invertButton = new Element('input',{'type':'button','value':'Invert'});
151-
invertButton.observe('click',function () {
152-
for ( var i = 0; i < checkBoxCells.length; i++ ) {
153-
if ( checkBoxCells[i] ) {
154-
var checkBoxes = $(checkBoxCells[i]).select('input');
155-
for ( var j = 0; j < checkBoxes.length; j++ ) {
156-
if ( checkBoxes[j] && checkBoxes[j].type == 'checkbox' || checkBoxes[j].type == 'radio' ) {
157-
if ( ! checkBoxes[j].disabled ) {
158-
if ( checkBoxes[j].checked ) {
159-
checkBoxes[j].checked = null;
160-
}
161-
else {
162-
checkBoxes[j].checked = 'checked';
163-
}
164-
}
165-
}
166-
}
167-
}
168-
}
139+
var $invertButton = $('<input>', {type: 'button', value: 'Invert'});
140+
$invertButton.on('click', function () {
141+
$checkBoxCells.each(function() {
142+
$(this).find('input').each(function() {
143+
if ( (this.type == 'checkbox' || this.type == 'radio') && !this.disabled ) {
144+
$(this).prop('checked', !$(this).prop('checked'));
145+
}
146+
});
147+
});
169148
});
170-
buttonContainer.insertBefore(invertButton,buttonContainer.firstChild);
171-
buttonContainer.insertBefore(uncheckButton,buttonContainer.firstChild);
172-
buttonContainer.insertBefore(checkButton,buttonContainer.firstChild);
149+
$buttonContainer.prepend($invertButton);
150+
$buttonContainer.prepend($uncheckButton);
151+
$buttonContainer.prepend($checkButton);
173152
}
174153
}
175154
}
@@ -178,15 +157,11 @@ TreeBASE.register(
178157
/* add a tooltip for the help buttons */
179158
TreeBASE.register(
180159
function() {
181-
var links = document.getElementsByTagName('a');
182-
for ( var i = 0; i < links.length; i++ ) {
183-
var link = $(links[i]);
184-
if ( link.hasClassName('openHelp') ) {
185-
if ( link.title == null || link.title == '' ) {
186-
link.title = 'Open help popup';
187-
}
160+
$('a.openHelp').each(function() {
161+
if ( !this.title || this.title == '' ) {
162+
this.title = 'Open help popup';
188163
}
189-
}
164+
});
190165
}
191166
);
192167

@@ -203,28 +178,28 @@ TreeBASE.register(
203178
</div>
204179
*/
205180
TreeBASE.collapseExpand = function(id,displayAs,link) {
206-
var objToExpand = $(id);
207-
var img = $(link).firstDescendant();
208-
if ( img == null ) {
209-
img = document.createElement(img);
210-
link.appendChild(img);
181+
var $objToExpand = $('#' + id);
182+
var $img = $(link).children().first();
183+
if ( $img.length == 0 ) {
184+
$img = $('<img>');
185+
$(link).append($img);
211186
}
212-
if ( objToExpand.style.display == 'none' ) {
213-
objToExpand.style.display = displayAs;
214-
img.src='/treebase-web/images/minus.gif';
215-
img.alt='collapse'
187+
if ( $objToExpand.css('display') == 'none' ) {
188+
$objToExpand.css('display', displayAs);
189+
$img.attr('src', '/treebase-web/images/minus.gif');
190+
$img.attr('alt', 'collapse');
216191
link.title='collapse';
217192
}
218193
else {
219-
objToExpand.style.display = 'none';
220-
img.src='/treebase-web/images/plus.gif';
221-
img.alt='expand';
194+
$objToExpand.css('display', 'none');
195+
$img.attr('src', '/treebase-web/images/plus.gif');
196+
$img.attr('alt', 'expand');
222197
link.title='expand';
223198
}
224199
}
225200
//expands what a user types in the text box into a PhyloWS query
226201
TreeBASE.expandQuery = function () {
227-
var query = $('query').value;
202+
var query = $('#query').val();
228203
var split = TreeBASE.splitWords(query);
229204
var terms = new Array();
230205
for ( var i = 0; i < split.length; i++ ) {
@@ -235,10 +210,10 @@ TreeBASE.expandQuery = function () {
235210
}
236211
}
237212
var joiner = ' or ';
238-
if ( $('all').checked ) {
213+
if ( $('#all').prop('checked') ) {
239214
joiner = ' and ';
240215
}
241-
$('expanded').value = terms.join(joiner);
216+
$('#expanded').val(terms.join(joiner));
242217
return false;
243218
};
244219

‎treebase-web/src/main/webapp/scripts/jquery-3.7.1.min.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)