NIHVIVO-2343 First cut at the Freemarker and Javascript for proxy editing on MyAccount page.
This commit is contained in:
j2blake
parent
9ab85a2bb0
commit
0a951807d3
3 changed files with 256 additions and 0 deletions
15
webapp/web/css/account/proxy.css
Normal file
15
webapp/web/css/account/proxy.css
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||||
|
|
||||||
|
/* -------------------------------------------------> */
|
||||||
|
/* BOGUS STUFF FOR PROXIES ------------------------------------> */
|
||||||
|
/* -------------------------------------------------> */
|
||||||
|
|
||||||
|
.new {
|
||||||
|
background-color: #DDFFDD;
|
||||||
|
}
|
||||||
|
.existing {
|
||||||
|
background-color: #DDDDDD;
|
||||||
|
}
|
||||||
|
.removed {
|
||||||
|
background-color: #FFDDDD;
|
||||||
|
}
|
||||||
187
webapp/web/js/account/accountProxyProxiesPanel.js
Normal file
187
webapp/web/js/account/accountProxyProxiesPanel.js
Normal file
|
|
@ -0,0 +1,187 @@
|
||||||
|
/* $This file is distributed under the terms of the license in /doc/license.txt$ */
|
||||||
|
|
||||||
|
function proxyProxiesPanel(p) {
|
||||||
|
var self = this;
|
||||||
|
|
||||||
|
this.disableFormInUnsupportedBrowsers = function() {
|
||||||
|
var disableWrapper = $('#ie67DisableWrapper');
|
||||||
|
|
||||||
|
// Check for unsupported browsers only if the element exists on the page
|
||||||
|
if (disableWrapper.length) {
|
||||||
|
if (vitro.browserUtils.isIELessThan8()) {
|
||||||
|
disableWrapper.show();
|
||||||
|
$('.noIE67').hide();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
this.parseProxyTemplate = function() {
|
||||||
|
var templateDiv = $("div[name='template']", this.proxyDataDiv)
|
||||||
|
this.templateHtml = templateDiv.html();
|
||||||
|
templateDiv.remove();
|
||||||
|
};
|
||||||
|
|
||||||
|
this.parseProxyData = function() {
|
||||||
|
var datas = $("div[name='data']", this.proxyDataDiv)
|
||||||
|
|
||||||
|
this.proxyData = []
|
||||||
|
for (i = 0; i < datas.length; i++) {
|
||||||
|
var data = datas[i];
|
||||||
|
var uri = $("p[name='uri']", data).text();
|
||||||
|
var label = $("p[name='label']", data).text();
|
||||||
|
var classLabel = $("p[name='classLabel']", data).text();
|
||||||
|
var imageUrl = $("p[name='imageUrl']", data).text();
|
||||||
|
this.proxyData.push(new proxyProxy(this.templateHtml, uri, label, classLabel, imageUrl, true));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.displayProxyData = function() {
|
||||||
|
$("div[name='proxyActual']", this.proxyDataDiv).remove();
|
||||||
|
|
||||||
|
for (i = 0; i < this.proxyData.length; i++) {
|
||||||
|
this.proxyData[i].element().appendTo(this.proxyDataDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setupAutoCompleteFields = function() {
|
||||||
|
this.addAutoCompleteField.autocomplete(new proxyAutocomplete(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.disableFormInUnsupportedBrowsers()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.panel = p;
|
||||||
|
this.proxyDataDiv = $("div[name='proxyData']", this.panel).first();
|
||||||
|
this.addAutoCompleteField = $("input[name='proxySelectorAC']", this.panel).first();
|
||||||
|
|
||||||
|
this.parseProxyTemplate();
|
||||||
|
this.parseProxyData();
|
||||||
|
this.displayProxyData();
|
||||||
|
this.setupAutoCompleteFields();
|
||||||
|
}
|
||||||
|
|
||||||
|
function proxyProxy(template, uri, label, classLabel, imageUrl, existing) {
|
||||||
|
var existed = existing;
|
||||||
|
|
||||||
|
var content = template.replace(/%uri%/g, uri)
|
||||||
|
.replace(/%label%/g, label)
|
||||||
|
.replace(/%classLabel%/g, classLabel)
|
||||||
|
.replace(/%imageUrl%/g, imageUrl);
|
||||||
|
|
||||||
|
this.toString = function() {
|
||||||
|
return "ProxyProxy: " + content;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.element = function() {
|
||||||
|
var element = $("<div name='proxyActual'>" + content + "</div>");
|
||||||
|
var removeLink = $("[name='removeProxy']", element).first();
|
||||||
|
var restoreLink = $("[name='restoreProxy']", element).first();
|
||||||
|
var proxyUriField = $("[name='proxyUri']", element);
|
||||||
|
|
||||||
|
var setClass = function(r) {
|
||||||
|
if (r) {
|
||||||
|
element.removeClass('new existing').addClass('removed')
|
||||||
|
} else if (existed) {
|
||||||
|
element.removeClass('new removed').addClass('existing')
|
||||||
|
} else {
|
||||||
|
element.removeClass('removed existing').addClass('new')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var setRemoved = function(r) {
|
||||||
|
if (r) {
|
||||||
|
removeLink.hide();
|
||||||
|
restoreLink.show();
|
||||||
|
proxyUriField.attr('disabled', 'disabled');
|
||||||
|
setClass(r);
|
||||||
|
} else {
|
||||||
|
removeLink.show();
|
||||||
|
restoreLink.hide();
|
||||||
|
proxyUriField.attr('disabled', '');
|
||||||
|
setClass(r);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
removeLink.click(function(event) {
|
||||||
|
setRemoved(true);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
restoreLink.click(function(event) {
|
||||||
|
setRemoved(false);
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
setRemoved(false);
|
||||||
|
|
||||||
|
return element;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function proxyAutocomplete(parent) {
|
||||||
|
var cache = [];
|
||||||
|
|
||||||
|
var query = "PREFIX fn: <http://www.w3.org/2005/xpath-functions#> \n"
|
||||||
|
+ "PREFIX auth: <http://vitro.mannlib.cornell.edu/ns/vitro/authorization#> \n"
|
||||||
|
+ "\n"
|
||||||
|
+ "SELECT DISTINCT ?uri ?label ?externalAuthId \n"
|
||||||
|
+ "WHERE { \n"
|
||||||
|
+ " ?uri a auth:UserAccount ; \n"
|
||||||
|
+ " auth:firstName ?firstName ; \n"
|
||||||
|
+ " auth:lastName ?lastName . \n"
|
||||||
|
+ " LET ( ?label := fn:concat(?lastName, ', ', ?firstName) )"
|
||||||
|
+ " OPTIONAL { ?uri auth:externalAuthId ?externalAuthId } \n"
|
||||||
|
+ " FILTER (REGEX(?label, '^%term%', 'i')) \n"
|
||||||
|
+ "} \n"
|
||||||
|
+ "ORDER BY ASC(?lastName) ASC(?firstName) \n"
|
||||||
|
+ "LIMIT 25 \n";
|
||||||
|
|
||||||
|
this.minLength = 3,
|
||||||
|
|
||||||
|
this.source = function(request, response) {
|
||||||
|
if (request.term in cache) {
|
||||||
|
response(cache[request.term]);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
url: '../ajax/sparqlQuery',
|
||||||
|
dataType: 'json',
|
||||||
|
data: {
|
||||||
|
query: query.replace("%term%", request.term),
|
||||||
|
model: "userAccounts"
|
||||||
|
},
|
||||||
|
complete: function(xhr, status) {
|
||||||
|
var results = $.parseJSON(xhr.responseText);
|
||||||
|
var parsed = sparqlUtils.parseSparqlResults(results);
|
||||||
|
cache[request.term] = parsed;
|
||||||
|
response(parsed);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.select = function(event, ui) {
|
||||||
|
parent.proxyData.unshift(new proxyProxy(parent.templateHtml, ui.item.uri, ui.item.label, "", "", false));
|
||||||
|
parent.displayProxyData();
|
||||||
|
}
|
||||||
|
|
||||||
|
;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dump(msg, obj) {
|
||||||
|
var out = '';
|
||||||
|
for (var i in obj) {
|
||||||
|
out += i + ": " + obj[i] + "\n";
|
||||||
|
}
|
||||||
|
console.log(msg, out);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
$(document).ready(function() {
|
||||||
|
$("div[name='proxyProxiesPanel']").each(function(i) {
|
||||||
|
var ppp = new proxyProxiesPanel(this);
|
||||||
|
this["ppp"]=ppp;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
@ -0,0 +1,54 @@
|
||||||
|
<#-- $This file is distributed under the terms of the license in /doc/license.txt$ -->
|
||||||
|
|
||||||
|
<#-- Template for setting the account reference field, which can also associate a profile with the user account -->
|
||||||
|
|
||||||
|
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />',
|
||||||
|
'<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
|
||||||
|
${stylesheets.add('<link rel="stylesheet" href="${urls.base}/css/account/proxy.css" />')}
|
||||||
|
|
||||||
|
<div name="proxyProxiesPanel" style="border: solid; padding: 5px; float: right;">
|
||||||
|
Proxy self editors
|
||||||
|
<br><br>
|
||||||
|
<p>Add proxy:</p>
|
||||||
|
<p><input type="text" name="proxySelectorAC" class="acSelector" size="35"></p>
|
||||||
|
<br><br>
|
||||||
|
<p>Selected proxies:</p>
|
||||||
|
|
||||||
|
<#-- Magic div thst holds all of the proxy data and the template that shows how to display it. -->
|
||||||
|
<div name="proxyData">
|
||||||
|
<#list proxies as proxy>
|
||||||
|
<div name="data"" style="display: none">
|
||||||
|
<p name="uri">${proxy.uri}</p>
|
||||||
|
<p name="label">${proxy.label}</p>
|
||||||
|
<p name="classLabel">${proxy.classLabel}</p>
|
||||||
|
<p name="imageUrl">${proxy.imageUrl}</p>
|
||||||
|
</div>
|
||||||
|
</#list>
|
||||||
|
|
||||||
|
<#--
|
||||||
|
Each proxy will be shown using the HTML inside this div.
|
||||||
|
One of the links "removeProxy" and "restoreProxy" will show at a time.
|
||||||
|
The hidden input field named "proxyUri" is required.
|
||||||
|
-->
|
||||||
|
<div name="template" style="display: none">
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<td>
|
||||||
|
<img width="90" alt="%label%" src="%imageUrl%">
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
|
%label% | %classLabel%
|
||||||
|
<br>
|
||||||
|
<a href="." name="removeProxy">remove</a>
|
||||||
|
<a href="." name="restoreProxy">restore</a>
|
||||||
|
<input type="hidden" name="proxyUri" value="%uri%" >
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
${scripts.add('<script type="text/javascript" src="${urls.base}/js/jquery.js"></script>',
|
||||||
|
'<script type="text/javascript" src="${urls.base}/js/sparqlUtils.js"></script>',
|
||||||
|
'<script type="text/javascript" src="${urls.base}/js/account/accountProxyProxiesPanel.js"></script>')}
|
||||||
Loading…
Add table
Reference in a new issue