-
Notifications
You must be signed in to change notification settings - Fork 10
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
42 changed files
with
12,188 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,3 @@ | ||
Manifest-Version: 1.0 | ||
Created-By: 1.7.0_71 (Oracle Corporation) | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,175 @@ | ||
FacetView_ is a pure javascript frontend for ElasticSearch search | ||
indices. | ||
|
||
(This used to work against SOLR too, but the need to maintain support for that became less, and is now not a priority. So has been removed altogether. If anyone needs it, it could be added back in by writing an alternative to the elasticsearchquery() with a solrsearchquery(), and making sure the returned resultset can be parsed out properly. Used to work fine so it can be done, but as new functionality like nesting and so on was brought in, it became less important.) | ||
|
||
It's been developed as a jQuery plugin and lets you easily embed a faceted | ||
browse front end into any web page. | ||
|
||
.. _FacetView: https://okfnlabs.org/facetview/ | ||
|
||
Development is now taking place in this repo: https://github.com/okfn/facetview | ||
|
||
|
||
Demo | ||
==== | ||
|
||
See https://okfnlabs.org/facetview/ or if you have the source just take a look | ||
at index.html or simple.html | ||
|
||
|
||
Status | ||
====== | ||
|
||
FacetView is pretty new, and still under active development but is already | ||
pretty stable. If you have suggestions or want to make a contribution please | ||
check out the github repo. | ||
|
||
|
||
Using FacetView | ||
=============== | ||
|
||
Add the following code to your web page:: | ||
|
||
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery-1.7.1.min.js"></script> | ||
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> | ||
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> | ||
<script type="text/javascript" src="vendor/linkify/1.0/jquery.linkify-1.0-min.js"></script> | ||
<link rel="stylesheet" href="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.css"> | ||
<script type="text/javascript" src="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.min.js"></script> | ||
<script type="text/javascript" src="jquery.facetview.js"></script> | ||
<link rel="stylesheet" href="css/facetview.css"> | ||
<script type="text/javascript" src="vendor/d3/d3.min.js"></script> | ||
<script type="text/javascript" src="vendor/d3/d3.geom.min.js?2.1.3"></script> | ||
<script type="text/javascript" src="vendor/d3/d3.layout.min.js?2.1.3"></script> | ||
|
||
|
||
* BUT change the src URLs to something sensible depending on where you install | ||
the files; or something different if you have the files available already. | ||
If using your own, NOTE the versions; particularly bootstrap - we are on the 2.x | ||
* d3 scripts can be dropped if you intend to disable filter visualisations. | ||
|
||
|
||
Then add a script somewhere to your page that actually calls and sets up the | ||
facetview on a particular page element: | ||
|
||
<script type="text/javascript"> | ||
jQuery(document).ready(function($) { | ||
$('.facet-view-simple').facetview({ | ||
search_url: 'https://bibsoup.net/query?', | ||
search_index: 'elasticsearch', | ||
facets: [ | ||
{'field': 'publisher.exact', 'size': 100, 'order':'term', 'display': 'publisher'}, | ||
{'field': 'author.name.exact', 'display': 'author'}, | ||
{'field': 'year.exact', 'display': 'year'} | ||
], | ||
}); | ||
}); | ||
</script> | ||
|
||
|
||
Now that you have everything ready, you will probably want to customize to | ||
get it looking the way you want it. | ||
|
||
|
||
Customization | ||
============= | ||
|
||
Once you have FacetView all ready to go, you should probably do some | ||
customisation. There are a few ways to do this: | ||
|
||
Edit the config in jquery.facetview.js | ||
-------------------------------------- | ||
|
||
View the config options near the top of the file to learn more. Some | ||
important points: | ||
|
||
* search_url – you need this. Should be an elasticsearch or SOLR query endpoint | ||
* search_index – your index type, solr or elasticsearch | ||
* result_display - there is a long example of result display. It is a list of | ||
lists; each list represents a line; each line contains objects; the objects | ||
specify the field they should output, and pre and post information to surround | ||
it with | ||
* display_images - if this is set to true, then facetview will attempt to find | ||
the first https://... that ends with .jpg / .jpeg / .png / .gif in each record; | ||
if one is found, it will be displayed in the search result as a 100 x (up to) | ||
150 px thumbnail | ||
* default_url_params – parameters to pass through with every query; should | ||
include “wt”:”json” for SOLR queries to return JSON, and probably | ||
“facet.mincount”:1 for SOLR queries to ignore zero counts on facet values | ||
* predefined_filters – use these to apply some filters that will be appended | ||
to every search. For example, customise a facetview display to only show | ||
records with a particular owner / collection / tag / whatever | ||
|
||
Pass in config settings when calling FacetView | ||
---------------------------------------------- | ||
|
||
All of the settings can also be defined when calling FacetView, and will | ||
overwrite the values set in the file itself. So you can do something like | ||
this:: | ||
|
||
<script type="text/javascript"> | ||
jQuery(document).ready(function() { | ||
jQuery('YOUR-PAGE-PART').facetview({ | ||
"search_index":"elasticsearch", | ||
... | ||
}); | ||
}); | ||
</script> | ||
|
||
Passing config parameters in the URL | ||
------------------------------------ | ||
|
||
Configs can be passed on the URL as query parameters. For example, | ||
?q=blah will set the starting search to "blah". You can add complex | ||
queries as JSON objects, such as ?paging={"size":20,"from":10}. Nice... | ||
|
||
Providing the location of an external config file | ||
------------------------------------------------- | ||
|
||
A file can be made available anywhere on the web (depending, keep reading) | ||
with any of the above listed settings in it (written in the usual way for a | ||
JSON object). Then, just pass the URL of your config file when you call | ||
FacetView - as a parameter called "config_file", and it will attempt to read | ||
that config file for you. | ||
|
||
The first attempt will make a JSONP request to the URL you specify, so if your | ||
file is properly set up on a server that enables it to respond to such a request, | ||
you can make these calls to any address on the internet. | ||
|
||
If JSONP call fails, then a normal GET will be executed. So if the file is under | ||
the same domain, it should be retrievable. In this case, the file must be | ||
normally readable to a GET request - e.g. it should have a .html extension, or | ||
be otherwise set up to return your config as a string to the GET request. The | ||
JSON config object is then parsed and read in. | ||
|
||
Config precedence | ||
----------------- | ||
|
||
When you introduce a new config object, they are merged into earlier configs with | ||
overwrite. So any config you specify in facetview.jquery.js will be overwritten | ||
and appended with newer info from any config passed in when calling facetview, | ||
which is overwritten by config parameters passed in the URL, | ||
and a call to a remote config file will similarly overwrite and append to all | ||
previous. | ||
|
||
Change the layout by making and using a custom CSS file | ||
------------------------------------------------------- | ||
|
||
Facetview uses the latest `twitter bootstrap`_. When you embed facetview in a page, | ||
you need to include the calls to bootstrap js and css files (see the example | ||
index.html here for more info). You could restyle facetview any way you want, | ||
either with or without bootstrap - although it would be a hassle to strip | ||
bootstrap out; recommend working with or around it. | ||
|
||
|
||
Copyright and License | ||
===================== | ||
|
||
Copyright 2011 Open Knowledge Foundation and Cottage Labs. | ||
|
||
Licensed under the `MIT License`_ | ||
|
||
.. _twitter bootstrap: https://twitter.github.com/bootstrap/ | ||
.. _MIT License: https://www.opensource.org/licenses/mit-license.php | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
<?xml version="1.0" encoding="UTF-8"?> | ||
<web-app xmlns="https://java.sun.com/xml/ns/javaee" | ||
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" | ||
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee | ||
https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" | ||
version="2.5"> | ||
|
||
<display-name>FacetView Web Application</display-name> | ||
|
||
<welcome-file-list> | ||
<welcome-file>index.html</welcome-file> | ||
</welcome-file-list> | ||
|
||
<servlet-mapping> | ||
<servlet-name>default</servlet-name> | ||
<url-pattern>/</url-pattern> | ||
</servlet-mapping> | ||
</web-app> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
#facetview_freetext{ | ||
-moz-border-radius: 0px; | ||
-webkit-border-radius: 0px; | ||
border-radius: 0px; | ||
} | ||
#facetview_filters h3{ | ||
margin:40px 0 20px 0; | ||
} | ||
#facetview_advanced{ | ||
float:left; | ||
clear:left; | ||
margin:10px; | ||
padding:3px 5px 5px 5px; | ||
-moz-border-radius: 5px; | ||
-webkit-border-radius: 5px; | ||
border-radius: 5px; | ||
border:1px solid #a1a1a1; | ||
color:#a1a1a1; | ||
overflow:hidden; | ||
width:165px; | ||
} | ||
#facetview_advanced select{ | ||
width:160px; | ||
background:#fff; | ||
border:1px solid #a1a1a1; | ||
color:#a1a1a1; | ||
font-size:11px; | ||
-moz-border-radius: 2px; | ||
-webkit-border-radius: 2px; | ||
border-radius: 2px; | ||
} | ||
#facetview_visualisation{ | ||
border:1px solid #ccc; | ||
margin:10px 0 10px 0; | ||
-moz-border-radius: 5px; | ||
-webkit-border-radius: 5px; | ||
border-radius: 5px; | ||
} | ||
.facetview_rangecontainer{ | ||
border:1px solid #ccc; | ||
padding:5px; | ||
margin-bottom:5px; | ||
-moz-border-radius: 5px; | ||
-webkit-border-radius: 5px; | ||
border-radius: 5px; | ||
} | ||
.node{ | ||
cursor:pointer; | ||
} | ||
.facetview_filterchoice{ | ||
text-decoration:none; | ||
color:#373737; | ||
} | ||
.facetview_filterselected{ | ||
} | ||
.facetview_facetlogic{ | ||
} | ||
.facetview_freetext_filterdiv{ | ||
float:left; | ||
clear:both; | ||
background:#eee; | ||
padding:0; | ||
color:green; | ||
width:100%; | ||
} | ||
.facetview_advancedshow{ | ||
text-decoration:none; | ||
color:#a1a1a1; | ||
} | ||
|
||
.facetview_resultactions a{ | ||
color:#353535; | ||
font-weight:bold; | ||
text-decoration:none; | ||
margin:0 5px 0 5px; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
/********************************************** | ||
* Generic Mods to Bootstrap | ||
*********************************************/ | ||
|
||
html, body { | ||
background-color: #eee; | ||
} | ||
body { | ||
padding-top: 40px; /* 40px to make the container go all the way to the bottom of the topbar */ | ||
} | ||
|
||
.content { | ||
background-color: #fff; | ||
padding: 20px; | ||
margin: 0 -20px; /* negative indent the amount of the padding to maintain the grid system */ | ||
-webkit-border-radius: 0 0 6px 6px; | ||
-moz-border-radius: 0 0 6px 6px; | ||
border-radius: 0 0 6px 6px; | ||
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); | ||
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.15); | ||
box-shadow: 0 1px 2px rgba(0,0,0,.15); | ||
} | ||
|
||
.page-header { | ||
background-color: #f5f5f5; | ||
padding: 20px 20px 10px; | ||
margin: -20px -20px 20px; | ||
} | ||
|
||
.container > footer p { | ||
text-align: center; | ||
} | ||
|
||
/* specific additions for the example index page */ | ||
.nav-logo img { | ||
margin-top: 4px; | ||
} | ||
|
||
h4 { | ||
line-height: 28px; | ||
margin-bottom: 10px; | ||
} | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8" /> | ||
<title>Celgene Facet View</title> | ||
|
||
<script type="text/javascript" src="vendor/jquery/1.7.1/jquery-1.7.1.min.js"></script> | ||
|
||
<link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css"> | ||
<script type="text/javascript" src="vendor/bootstrap/js/bootstrap.min.js"></script> | ||
|
||
<script type="text/javascript" src="vendor/linkify/1.0/jquery.linkify-1.0-min.js"></script> | ||
|
||
<link rel="stylesheet" href="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.css"> | ||
<script type="text/javascript" src="vendor/jquery-ui-1.8.18.custom/jquery-ui-1.8.18.custom.min.js"></script> | ||
|
||
<script type="text/javascript" src="jquery.facetview.js"></script> | ||
|
||
<link rel="stylesheet" href="css/facetview.css"> | ||
|
||
<link rel="stylesheet" href="css/style.css"> | ||
|
||
<script type="text/javascript"> | ||
jQuery(document).ready(function($) { | ||
$('.facet-view-simple').facetview({ | ||
search_url: '', | ||
search_index: 'solr', | ||
facets: [ | ||
{'field':'year.exact', 'display': 'year'}, | ||
{'field':'publisher.exact', 'display': 'publisher'} | ||
], | ||
paging: { | ||
from: 0, | ||
size: 10 | ||
} | ||
|
||
}); | ||
}); | ||
</script> | ||
</head> | ||
|
||
<body> | ||
|
||
<div class="navbar navbar-fixed-top"> | ||
<div class="navbar-inner"> | ||
<div class="container"> | ||
<a class="brand" href="#">FacetView</a> | ||
<ul class="nav"> | ||
<li><a href="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/darth-pr/facetview">Github</a></li> | ||
<li><a href="https://github.com/darth-pr/facetview/issues">Issues</a></li> | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
|
||
<div class="container"> | ||
<div class="content"> | ||
<div class="page-header"> | ||
<h1> | ||
Study Search | ||
</h1> | ||
</div> | ||
|
||
<div class="facet-view-simple"></div> | ||
|
||
</div> | ||
|
||
</div> | ||
</body> | ||
</html> |
Oops, something went wrong.