Skip to content

Commit c449767

Browse files
vagishavagisha
authored
Migrate inline JavaScript event handlers (#412)
* Migrate inline JS event handlers in the panoramapublic and lincs modules
1 parent d14f3bb commit c449767

File tree

8 files changed

+95
-36
lines changed

8 files changed

+95
-36
lines changed

‎lincs/resources/views/CustomGCT.html‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@
77
var url = LABKEY.ActionURL.buildURL("lincs", "createCustomGCT", LABKEY.ActionURL.getContainer());
88
window.location = url;
99
}
10+
LABKEY.Utils.onReady(function()
11+
{
12+
document.getElementById("customGctButton").onclick = function() { showCustomGCTForm(); };
13+
});
1014

1115
</script>
1216

1317
<div style="margin:20px;">
14-
<a class="button" id="customGctButton" onclick="showCustomGCTForm()">Create Custom GCT</a>
18+
<a class="button" id="customGctButton">Create Custom GCT</a>
1519
</div>

‎lincs/src/org/labkey/lincs/view/customGCTForm.jsp‎

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -140,24 +140,33 @@
140140
141141
function onChange(field, newValue, oldValue, eOpts)
142142
{
143-
// console.log(newValue, oldValue);
144-
var comboboxId = field.id ;
145-
var owningDiv = Ext4.get(comboboxId + '_selected');
143+
const comboboxId = field.id ;
144+
const owningDiv = Ext4.get(comboboxId + '_selected');
146145
147146
if(!owningDiv) return;
148147
149-
var selectedHtml = "";
150-
for(var i = 0; i < newValue.length; i += 1)
148+
let selectedHtml = "";
149+
const deleteIconsMap = {}; // map of deleteIconId -> annotation value
150+
for(let i = 0; i < newValue.length; i += 1)
151151
{
152-
var record = field.findRecordByValue(newValue[i]);
153-
var nameValue = newValue[i];
154-
var displayValue = record ? record.get("DisplayName") : nameValue;
155-
var spanId = comboboxId + "_span";
156-
selectedHtml += '<img src="/labkey/_images/delete.png" style="width:10px; height:10px; margin-right:3px" ';
157-
selectedHtml += "onclick=\"deleteSelected('" + comboboxId + "', '" + nameValue + "');\"/>";
158-
selectedHtml += '<span id="' +spanId + '">' + displayValue + '</span><br>';
152+
const record = field.findRecordByValue(newValue[i]);
153+
const nameValue = newValue[i];
154+
const displayValue = record ? record.get("DisplayName") : nameValue;
155+
const deleteIconId = comboboxId + "-delete-icon-" + Ext4.id();
156+
selectedHtml += "<img src='<%=getWebappURL("/_images/delete.png")%>' style='width:10px; height:10px; margin-right:3px' id='" + deleteIconId + "'/>";
157+
selectedHtml += '<span>' + Ext4.util.Format.htmlEncode(displayValue) + '</span><br>';
158+
deleteIconsMap[deleteIconId] = nameValue;
159159
}
160160
owningDiv.dom.innerHTML = selectedHtml;
161+
162+
// Attach event handlers to the delete icons
163+
Object.keys(deleteIconsMap).forEach(iconId => {
164+
const annotationVal = deleteIconsMap[iconId];
165+
document.getElementById(iconId).addEventListener('click', function()
166+
{
167+
deleteSelected(comboboxId, annotationVal);
168+
});
169+
})
161170
}
162171
163172
function deleteSelected(comboBoxId, valToRemove)
@@ -280,7 +289,8 @@
280289
</tr>
281290
<tr>
282291
<td colspan="2" style="text-align:left; font-weight:bold; padding-top:20px;">
283-
<span style="text-decoration:underline;cursor:pointer" onclick="toggleAdvanced()" id="toggleAdvanced">Show all annotations</span>
292+
<span style="text-decoration:underline;cursor:pointer" id="toggleAdvanced">Show all annotations</span>
293+
<% addHandler("toggleAdvanced", "click", "toggleAdvanced()"); %>
284294
</td>
285295
</tr>
286296
<tr id="annotationListAdvanced">

‎panoramapublic/src/org/labkey/panoramapublic/query/ExperimentAnnotationsTableInfo.java‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,13 +57,15 @@
5757
import org.labkey.api.settings.AppProps;
5858
import org.labkey.api.util.DOM;
5959
import org.labkey.api.util.HtmlString;
60+
import org.labkey.api.util.Link;
6061
import org.labkey.api.util.PageFlowUtil;
6162
import org.labkey.api.util.SimpleNamedObject;
6263
import org.labkey.api.util.StringExpressionFactory;
6364
import org.labkey.api.util.UniqueID;
6465
import org.labkey.api.view.ActionURL;
6566
import org.labkey.api.view.HttpView;
6667
import org.labkey.api.view.template.ClientDependency;
68+
import org.labkey.api.view.template.PageConfig;
6769
import org.labkey.panoramapublic.PanoramaPublicController;
6870
import org.labkey.panoramapublic.PanoramaPublicManager;
6971
import org.labkey.panoramapublic.PanoramaPublicSchema;
@@ -81,10 +83,10 @@
8183

8284
import static org.labkey.api.util.DOM.Attribute.height;
8385
import static org.labkey.api.util.DOM.Attribute.href;
84-
import static org.labkey.api.util.DOM.Attribute.onclick;
8586
import static org.labkey.api.util.DOM.Attribute.src;
8687
import static org.labkey.api.util.DOM.Attribute.title;
8788
import static org.labkey.api.util.DOM.Attribute.width;
89+
import static org.labkey.api.util.DOM.DIV;
8890
import static org.labkey.api.util.DOM.IMG;
8991
import static org.labkey.api.util.DOM.at;
9092

@@ -149,13 +151,16 @@ public void renderGridCellContents(RenderContext ctx, Writer out) throws IOExcep
149151
if(id != null && container != null)
150152
{
151153
ActionURL detailsPage = PageFlowUtil.urlProvider(ProjectUrls.class).getBeginURL(container); // experiment container
152-
DOM.SPAN(at(onclick, "viewExperimentDetails(this,'" + container.getPath() + "', '" + id + "','" + detailsPage + "')")
154+
PageConfig pageConfig = HttpView.currentPageConfig();
155+
String spanId = pageConfig.makeId("expt_details_");
156+
DOM.SPAN(at(DOM.Attribute.id, spanId)
153157
.data("active", "false") // will be rendered as "data-active" attribute
154158
.data("loaded", "false"), // will be rendered as "data-loaded" attribute
155159
IMG(at(DOM.Attribute.id, "expandcontract-" + id)
156160
.at(src, PageFlowUtil.staticResourceUrl("_images/plus.gif"))),
157161
HtmlString.NBSP)
158162
.appendTo(out);
163+
pageConfig.addHandler(spanId, "click", "viewExperimentDetails(this,'" + container.getPath() + "', '" + id + "','" + detailsPage + "')");
159164
}
160165
super.renderGridCellContents(ctx, out);
161166
}
@@ -204,11 +209,12 @@ public void renderGridCellContents(RenderContext ctx, Writer out) throws IOExcep
204209
}
205210
else
206211
{
207-
String content = "<div><a class=\"button-small button-small-green\" style=\"margin:0px 5px 0px 2px;\""
208-
+ "href=\"\" onclick=\"showShareLink(this, '" + PageFlowUtil.filter(accessUrl) + "');return false;\""
209-
+ ">Share</a>";
210-
content += "</div>";
211-
out.write(content);
212+
var link = new Link.LinkBuilder("Share")
213+
.clearClasses().addClass("button-small button-small-green")
214+
.style("margin:0px 5px 0px 2px;")
215+
.onClick("showShareLink(this, " + PageFlowUtil.jsString(accessUrl) + ");return false;");
216+
DIV(link.build()).appendTo(out);
217+
212218
}
213219
}
214220
});

‎panoramapublic/src/org/labkey/panoramapublic/view/expannotations/experimentDetails.jsp‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -292,7 +292,9 @@
292292
<div class="link">
293293
<strong><%=h(linkText)%>: </strong>
294294
<span id="accessUrl" style="margin-top:5px;"><a href="<%=h(accessUrl)%>"><%=h(accessUrl)%></a></span>
295-
<a class="button-small button-small-green" style="margin:0px 5px 0px 2px;" href="" onclick="showShareLink(this, '<%=h(accessUrl)%>'); return false;">Share</a>
295+
<%=link("Share").clearClasses().addClass("button-small button-small-green")
296+
.style("margin:0px 5px 0px 2px")
297+
.onClick("showShareLink(this, " + q(accessUrl) + "); return false;")%>
296298
<% if (annotDetails.hasVersion()) {%>
297299
<span class="link" id="publishedDataVersion" style="margin-left:10px;"><strong>Version: <span style="color:<%=h(annotDetails.isCurrentVersion() ? "green" : "red")%>;"><%=h(annotDetails.getVersion())%></span>
298300
<% if (annotDetails.hasVersionsLink()) { %>

‎panoramapublic/src/org/labkey/panoramapublic/view/publish/pxValidationStatus.jsp‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -260,21 +260,27 @@
260260
261261
function deleteModInfoLink(modInfoId, skylineModName, experimentAnnotationsId, modType, matchCount) {
262262
if (!modType) return;
263-
const action = isStructuralModType(modType) ? 'deleteStructuralModInfo' : 'deleteIsotopeModInfo';
264263
265264
const linkText = matchCount === 1 ? "Delete Match" : "Delete Matches";
266-
return '<a class="labkey-text-link" style="margin-left:5px;" onClick="deleteModInfo(' + modInfoId + ',' + experimentAnnotationsId
267-
+ ', \'' + skylineModName + '\', \'' + action + '\');">' + linkText + '</a>';
265+
const id = 'delete-assigned-unimod-id-' + Ext4.id();
266+
const html = '<a id="' + id +'" href="#" class="labkey-text-link" style="margin-left:5px;" >' + linkText + '</a>';
267+
const callback = () => {
268+
const action = isStructuralModType(modType) ? 'deleteStructuralModInfo' : 'deleteIsotopeModInfo';
269+
LABKEY.Utils.attachEventHandler(id, "click", function () {
270+
return deleteModInfo(modInfoId, experimentAnnotationsId, skylineModName, action);
271+
});
272+
};
273+
return {"html": html, "callback": callback }
268274
}
269275
270276
function deleteModInfo(modInfoId, experimentAnnotationsId, skylineModName, action) {
271-
const confirmMsg = "Are you sure you want to delete the saved Unimod information for modification " + skylineModName + "?";
277+
const confirmMsg = "Are you sure you want to delete the saved Unimod information for modification '" + skylineModName + "'?";
272278
const params = {
273279
'id': experimentAnnotationsId,
274280
'modInfoId': modInfoId,
275281
'returnUrl': returnUrl
276282
};
277-
var href = LABKEY.ActionURL.buildURL('panoramapublic', action, LABKEY.ActionURL.getContainer(), params);
283+
const href = LABKEY.ActionURL.buildURL('panoramapublic', action, LABKEY.ActionURL.getContainer(), params);
278284
return LABKEY.Utils.confirmAndPost(confirmMsg, href);
279285
}
280286
@@ -331,8 +337,14 @@
331337
sep = isotopic ? '</br>' : '<b> + </b>';
332338
}
333339
if (record.data['modInfoId']) {
334-
ret += deleteModInfoLink(record.data['modInfoId'], record.data['skylineModName'],
340+
const link = deleteModInfoLink(record.data['modInfoId'], record.data['skylineModName'],
335341
<%=experimentAnnotationsId%>, record.data['modType'], matches.length);
342+
ret += link.html;
343+
Ext4.defer(function()
344+
{
345+
// Attach the onclick handler in a deferred function so that it fires after the renderer function is executed.
346+
link.callback();
347+
}, 100);
336348
}
337349
return ret;
338350
}

‎panoramapublic/src/org/labkey/panoramapublic/view/search/panoramaWebSearch.jsp‎

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@
8787
</td>
8888
<td style="width: 25px"></td>
8989
<td>
90-
<button id="clear-all-button-id-experiment" class="clear-all-button" onclick="clearInputFieldsAndResetURL('experiment');">Clear All</button>
90+
<button id="clear-all-button-id-experiment" class="clear-all-button">Clear All</button>
91+
<% addHandler("clear-all-button-id-experiment", "click", "clearInputFieldsAndResetURL('experiment')"); %>
9192
</td>
9293
</tr>
9394
<tr>
@@ -114,7 +115,8 @@
114115

115116
<td style="width: 25px"></td>
116117
<td>
117-
<button id="clear-all-button-id-protein" class="clear-all-button" onclick="clearInputFieldsAndResetURL('protein');">Clear All</button>
118+
<button id="clear-all-button-id-protein" class="clear-all-button">Clear All</button>
119+
<% addHandler("clear-all-button-id-protein", "click", "clearInputFieldsAndResetURL('protein')"); %>
118120
</td>
119121
</tr>
120122
<tr style="height: 10px"></tr>
@@ -138,7 +140,8 @@
138140

139141
<td style="width: 25px"></td>
140142
<td>
141-
<button id="clear-all-button-id-peptide" class="clear-all-button" onclick="clearInputFieldsAndResetURL('peptide');">Clear All</button>
143+
<button id="clear-all-button-id-peptide" class="clear-all-button">Clear All</button>
144+
<% addHandler("clear-all-button-id-peptide", "click", "clearInputFieldsAndResetURL('peptide')"); %>
142145
</td>
143146
</tr>
144147
<tr style="height: 10px"></tr>
@@ -162,15 +165,17 @@
162165

163166
<td style="width: 25px"></td>
164167
<td>
165-
<button id="clear-all-button-id-small-molecule" class="clear-all-button" onclick="clearInputFieldsAndResetURL('smallMolecule');">Clear All</button>
168+
<button id="clear-all-button-id-small-molecule" class="clear-all-button">Clear All</button>
169+
<% addHandler("clear-all-button-id-small-molecule", "click", "clearInputFieldsAndResetURL('smallMolecule')"); %>
166170
</td>
167171
</tr>
168172
<tr style="height: 10px"></tr>
169173
</table>
170174
</div>
171175
</div>
172176
<div>
173-
<button id="search-button-id" class="labkey-button" onclick="handleRendering('true');">Search</button>
177+
<button id="search-button-id" class="labkey-button">Search</button>
178+
<% addHandler("search-button-id", "click", "handleRendering('true')"); %>
174179
</div>
175180
<div id="search-criteria-id"/>
176181

‎panoramapublic/src/org/labkey/panoramapublic/view/viewSlideshow.jsp‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,6 @@
109109
</tr>
110110
</tbody>
111111
</table>
112-
<button style="margin: 15px 0 20px 0" onclick="viewSlideshow()">View</button>
112+
<%=button("View").style("margin:15px 0 20px 0").onClick("viewSlideshow()").build()%>
113113
</div>
114114
<div id="slideshowPlaceholder"></div>

‎panoramapublic/webapp/PanoramaPublic/js/slideshow.js‎

Lines changed: 22 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
let slideIndex;
66
let slides, dots, text;
77
let wait;
8+
const DOT_NAV_ID_PREFIX = "slideshow-dot-";
89

910
function setDescSize(fixed)
1011
{
@@ -76,6 +77,17 @@ function addSlides(json)
7677
appendDot(slideshowDots, i + existingSlideCount + 1);
7778
appendText(entry, slideshowTexts);
7879
}
80+
81+
// Attach the 'onclick' event handlers
82+
for(let i = 0; i < catalog.length; i++)
83+
{
84+
const index = i + existingSlideCount + 1;
85+
const el = document.getElementById(DOT_NAV_ID_PREFIX + index);
86+
if (el)
87+
{
88+
el.onclick = function() { currentSlide(index); };
89+
}
90+
}
7991
showSlides();
8092
}
8193
else
@@ -111,7 +123,7 @@ function appendDot(dotsContainer, index)
111123
const dot = document.createElement('span');
112124
const cls = index === 1 ? "dot active" : "dot";
113125
dot.setAttribute('class', cls);
114-
dot.setAttribute('onclick', 'currentSlide(' + index + ')');
126+
dot.setAttribute('id', DOT_NAV_ID_PREFIX + index);
115127
dotsContainer.appendChild(dot);
116128
dotsContainer.appendChild(document.createTextNode(" ") );
117129
}
@@ -178,6 +190,8 @@ function showSlides()
178190

179191
function plusSlides(position)
180192
{
193+
if (!slides) return;
194+
181195
let i;
182196
setDescSize(true);
183197
slideIndex += position;
@@ -233,14 +247,17 @@ function appendSlidesContainer(parentDivId)
233247
return false;
234248
}
235249

250+
const nextSlideBtnId = "next-slide-btn";
251+
const prevSlideBtnId = "prev-slide-btn";
252+
236253
let slideshowHtml = '';
237254
slideshowHtml += '<div class="banner">' +
238255
'<table style="width: 100%;"><tbody><tr><td height="100%" style="width: 100%">' +
239256
'<table style="width: 100%;"><tbody><tr>' +
240257

241258
'<td height="100%"><div id="slides" style="width:100%;">' +
242259
'<div class="slideshow-container">' +
243-
'<a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a>' +
260+
'<a class="prev" id="' + prevSlideBtnId + '">&#10094;</a> <a class="next" id="' + nextSlideBtnId + '">&#10095;</a>' +
244261
'</div>' +
245262
'<br/><div style="text-align:center" class="slideshow-dots"></div>' +
246263
'</div></td>' +
@@ -259,5 +276,8 @@ function appendSlidesContainer(parentDivId)
259276
'</div>';
260277

261278
parentDiv.innerHTML = slideshowHtml;
279+
document.getElementById(nextSlideBtnId).onclick = function() { plusSlides(-1); };
280+
document.getElementById(prevSlideBtnId).onclick = function() { plusSlides(1); };
281+
262282
return true;
263283
}

0 commit comments

Comments
 (0)