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