CHContext (https://github.com/psnc-dl/chcontext/) is a JavaScript widget which provides a list of links to cultural heritage resources created on the basis of the results of a search based on the content of a particular element of the website in which the widget is embedded.
The widget supports three data sources:
- the Digital Library Federation (does not require an API key),
- Europeana (requires an API key), and
- Digital Public Library of America (requires an API key).
Examples of use:
- PSCNC Institutional Repository: http://lib.psnc.pl/publication/517
- Europeana 1989 Digital Archive: http://fbc.pionier.net.pl/zbiorki/publication/117
In the case of questions or problems, please contact us at: http://dl.psnc.pl/contact/.
Installing an Instance
Ad the following code snippet to the dlibra-webapp/WEB-INF/layout/templates/simple-inv.vm file, between lines #foreach( $comp in $left) a #if ( ${comp.RenderedTemplate}!= "" )
#if(4 == ${velocityCount} && ${pageId} == "docmetadata")
<div id="chcontext-widget" class="chcontext-widget-wrapper" data-searchProvider="FBC+" data-resultCount="5" data-queryselector="span#Subject a" data-show-img="false">
<h3 id="chc-widget-header" class="leftDiv"> $res.getProperty("CHContext.SeeAlso") <img src="${homepageUrl}/style/dlibra/theme1/l_open.gif" class="sh_button"></h3>
<div class="chcontext-widget-container left_box"></div>
</div>
<script type="text/javascript" src="http://cdn.jsdelivr.net/chcontext/1.1.0/chcontext.min.js"></script>
#end
In the widget configuration shown above, it is assumed that:
- the search will be done through FBC+ (
data-searchProvider="FBC+") - five elements will be displayed (
data-resultCount="5") - the value of the element indicated by selector
span#Subject a(data-queryselector="span#Subject a") – that is, key words – will be displayed, - thumbnails will not be displayed (
data-show-img="false") text labels for the CHContext. SeeAlso- the color theme is
theme1.
Next, text labels for the CHContext.SeeAlso key should be defined. For that purpose, the following content should be added in the dlibra-webapp/WEB-INF/components/resources/WEBAPP_pl.xml dodajemy file:
<entry key="CHContext.SeeAlso">Zobacz także</entry>
Similarly, the following content should be added in the dlibra-webapp/WEB-INF/components/resources/WEBAPP_en.xml file:
<entry key="CHContext.SeeAlso">See also</entry>
We want to find similar objects, based on key words. In order to do that, we have to change the HTML code of the page with the description of the publication, so as to make access to them possible. For that purpose, we have to modify the dispNote macro.
The following content must be added to file dlibra-webapp/WEB-INF/components/templates/custom_library.vm (the content can be found in file custom_library.vm, which is located in archive dlibra-webapp/WEB-INF/lib/dcore-web-components-x.x.x.jar):
#macro ( dispNode $node $info)
<span class="attributeJustify">
#if($documentMetadata.getAttributeValues($info.Id, $metadataLanguage, $valueLangType).size() > 0)
<a href="${homepageUrl}${servletName}/indexsearch?attId=${info.id}" class="attributeInfo">
#set($t = "#printParentsLabels($node 0)")
#if($printAttParents)
${t.trim()}:
#else
${node.Info.Label}:
#end
</a>
<ul>
<li class="attributeValuesListElement">
<span class="attribute" style="margin:0;">
#foreach($value in $documentMetadata.getAttributeValues($info.Id, $metadataLanguage, $valueLangType))
#if($velocityCount > 1); #end
#if($value.toString().startsWith('http://'))
#set($urlName = ${res.getProperty("element_metadata.link")})
#set($urlValue = $value)
#if($value.toString().indexOf(" ") > 0)
#set($urlValue = $value.toString().substring(0,$value.toString().indexOf(" ")))
#set($urlName = $value.toString().substring($value.toString().indexOf(" "), $value.toString().length()))
#end
<a href="${urlValue}" target="_blank">$urlName</a>
<a href="${urlValue}" target="_blank">
<img alt=" " src="${homepageUrl}/style/common/img/popicon.gif"/></a>
#elseif($value.toString().startsWith('oai:'))
#if(${conf.get("use.fbc")})
<a href="${conf.get("fbc.url")}/id/${value}">${value}</a>
#else
<a href="${homepageUrl}${servletName}/docmetadata?id=${value}">${value}</a>
#end
#elseif(!$info.getRoleId().toString().equals("description"))
#set ( $strValue = $value.toString() )
<script type="text/javascript"><!--
function submit${info.Id}_${velocityCount}() {
submitQuery(${info.Id},'\'${escapeUtil.escapeForJS($strValue)}\'');
}
//--> </script>
<a href="javascript:submit${info.Id}_${velocityCount}()">${escapeUtil.escapeHtml("${value}")}</a>
## perform slice of long data but considering only "description" attributes
#else
#set ( $strValue = $value.toString() )
<script type="text/javascript"><!--
function submit${info.Id}_${velocityCount}() {
return '\'${escapeUtil.escapeForJS($strValue)}\'';
}
//--> </script>
<a href="javascript:submit${info.Id}_${velocityCount}()" id="attr_anch_${info.Id}_${velocityCount}">${escapeUtil.escapeHtml("${value}")}</a>
#end
#end
</span>
</li>
</ul>
#end
</span>
#end
next, line:
<span class="attribute" style="margin:0;">
should be changed to:
<span class="attribute" style="margin:0;" id="${info.RDFName}">
The last step is to modify the default look, by adding the following code to file dlibra-webapp/style/dlibra/theme1/simple-inv.css (przy założeniu, że wykorzystywany temat kolorystyczny to theme1):
#chcontext-widget ol {
padding-left: 15px;
margin: 0;
}