Skip to content
GitLab
Commit ac7721c7 authored by cdjemiel cdjemiel's avatar cdjemiel cdjemiel
Browse files

bootstrap index + doc +example, css move to jquery.venny.js

parent 259273cc
Expand all Hide whitespace changes
Inline Side-by-side
documentation.html 0 → 100644
View file @ ac7721c7
<!DOCTYPE html>
<html>
<head>
<title>jQuery Venny</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<link href="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script src="http://twitter.github.io/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 60px 0;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
/* Bootstrap code examples
-------------------------------------------------- */
/* Base class */
.bs-docs-example {
position: relative;
margin: 15px 0;
padding: 39px 19px 14px;
*padding-top: 19px;
background-color: #fff;
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* Echo out a label for the example */
.bs-docs-example:after {
content: "Example";
position: absolute;
top: -1px;
left: -1px;
padding: 3px 7px;
font-size: 12px;
font-weight: bold;
background-color: #f5f5f5;
border: 1px solid #ddd;
color: #9da0a4;
-webkit-border-radius: 4px 0 4px 0;
-moz-border-radius: 4px 0 4px 0;
border-radius: 4px 0 4px 0;
}
/* Remove spacing between an example and it's code */
.bs-docs-example + .prettyprint {
margin-top: -20px;
padding-top: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">jQuery Venny</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="./index.html">Home</a></li>
<li class="active"><a href="./documentation.html">Documentation</a></li>
<li><a href="./example.html">Example</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
<!-- Docs nav
================================================== -->
<div class="row">
<div class="span3 bs-docs-sidebar">
<ul class="nav nav-list bs-docs-sidenav">
<li><a href="#plugin-insertion"><i class="icon-chevron-right"></i>Plugin insertion</a></li>
<li><a href="#plugin-options"><i class="icon-chevron-right"></i>Plugin options</a></li>
</ul>
</div>
<div class="span9">
<!-- Plugin Insertion
================================================== -->
<section id="plugin-insertion">
<div class="page-header">
<h1>Plugin insertion</h1>
</div>
<p>In order to use jquery.venny, you need to download tar file and import within your web page: </p>
<ul>
<li>jQuery v1.6.x or higher </li>
<li>jquery.venny.min.js </li>
</ul>
<div class="bs-docs-example">
<p>Take a peek at the code below, a single function call to initialise the venn diagram is all it takes:</p>
</div>
<pre class="prettyprint linenums">
/*
* Example init
*/
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
</pre>
</section id="plugin-options">
<div class="page-header">
<h1>Plugin options</h1>
</div>
<h3>series: the data in json</h3>
<div class="bs-docs-example">
<p> The serie can be a list of value, the plugin will then compute itself the intersections between lists. </p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}]
});
});
</pre>
<div class="bs-docs-example">
<p> The serie can also define the number of occurence for each intersections.</p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'},
data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148}
}]
});
});
</pre>
<div class="bs-docs-example">
<p>Finaly, the serie can define the list values with the number of occurence for each value.</p>
</div>
<pre class="prettyprint">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5"],
values: [5, 15, 250, 20, 23]
},{
name: 'sample2',
data: ["Otu1", "Otu5", "Otu6", "Otu7"],
values: [234, 29, 239, 5]
}]
});
});
</pre>
<h3>fnClickCallback</h3>
<div class="bs-docs-example">
<p>The callback function to execute when the user click on a number.</p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: {A: 'List 1',
B: 'List 2',
C: 'List 3',
D: 'List 4'},
data: {A: 340, B: 562, C: 620, D: 592,
AB: 639, AC: 456, AD: 257, BC: 915,
BD: 354, CD: 143, ABC: 552, ABD: 578,
ACD: 298, BCD: 613, ABCD: 148}
}],
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
alert(value);
}
});
});
</pre>
<h3>disableClick</h3>
<div class="bs-docs-example">
<p>Default is false, if set to true, the click on the number si disabled.</p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'Actors',
data: ["Marilyn Monroe", "Arnold Schwarzenegger", "Jack Nicholson", "Barbra Streisand", "Robert de Niro", "Dean Martin", "Harrison Ford"]
}, {
name: 'Singers',
data: ["Freddy Mercury", "Barbra Streisand", "Dean Martin", "Ricky Martin", "Celine Dion", "Marilyn Monroe"]
}],
disableClick: true
});
});
</pre>
<h3>useValues</h3>
<div class="bs-docs-example">
<p>Default is false, if set to true, the values provided in a mixte serie will be considered as the number of occurence of the element.</p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
useValues: true
});
});
</pre>
<h3>exporting</h3>
<div class="bs-docs-example">
<p>Default is true, an export module is added to the window, if set to false the export module is disabled.</p>
</div>
<pre class="prettyprint linenums">
$(document).ready(function(){
$('#example').venny({
series: [{
name: 'sample1',
data: ["Otu1", "Otu2", "Otu3", "Otu4", "Otu5", "Otu6", "Otu7"],
values: [5, 15, 250, 20, 23, 58, 89]
}],
exporting: false
});
});
</pre>
</section>
</div>
</div>
<footer class="footer" style="background-color:#e5e5e5;">
<script>
!function ($) {
$(function(){
window.prettyPrint && prettyPrint()
})
}(window.jQuery)
</script>
<div class="container">
<p>Copyright &copy; 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Code licensed under ....</p>
<ul class="footer-links" style="list-style-type: none;">
<li><a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.sigenae.org/" target="_blank">Sigenae platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.international.inra.fr/" target="_blank">INRA</a></li>
</ul>
</div>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script> -->
</body>
</html>
\ No newline at end of file
example.html 0 → 100644
View file @ ac7721c7
<!DOCTYPE html>
<html>
<head>
<title>jQuery Venny</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.venny.js"></script>
<script language="Javascript">
$(document).ready(function () {
function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n");
var table = new Array();
for (var lindex in lines) {
table.push(lines[lindex]);
}
return (table);
}
function updateVenny() {
var seriesTable = new Array();
if ($("#area1").val() != "") {
seriesTable.push({
name: $("#name1").val(),
data: getArrayFromArea("area1")
});
}
if ($("#area2").val() != "") {
seriesTable.push({
name: $("#name2").val(),
data: getArrayFromArea("area2")
});
}
if ($("#area3").val() != "") {
seriesTable.push({
name: $("#name3").val(),
data: getArrayFromArea("area3")
});
}
if ($("#area4").val() != "") {
seriesTable.push({
name: $("#name4").val(),
data: getArrayFromArea("area4")
});
}
if ($("#area5").val() != "") {
seriesTable.push({
name: $("#name5").val(),
data: getArrayFromArea("area5")
});
}
$("#venny-container").venny({
series: seriesTable,
fnClickCallback: function() {
var value = "";
if (this.listnames.length == 1) {
value += "Elements only in ";
} else {
value += "Common elements in ";
}
for (name in this.listnames) {
value += this.listnames[name] + " ";
}
value += ":\n";
for (val in this.list) {
value += this.list[val] + "\n";
}
$("#names").val(value);
}
});
}
$("#setexample").click(function() {
$("#name1").val("Actors");
$("#area1").val("Marilyn Monroe\nArnold Schwarzenegger\nJack Nicholson\nBarbra Streisand\nRobert de Niro\nDean Martin\nHarrison Ford");
$("#name2").val("Singers");
$("#area2").val("Freddy Mercury\nBarbra Streisand\nDean Martin\nRicky Martin\nCeline Dion\nMarilyn Monroe");
updateVenny();
});
$('[id^="clear"]').click(function() {
var index = $(this).attr("id").split("_")[1];
$("#area" + index).val("");
$("#name" + index).val("List " + index);
updateVenny();
});
// update the view when any fields change
$("[id^=name]").change(function() {
updateVenny();
});
$("[id^=area]").change(function() {
updateVenny();
});
// first init of the venny plugin
$("#venny-container").venny({ series: [] });
});
</script>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
/* Custom container */
.container {
margin: 0 auto;
max-width: 1000px;
}
.container > hr {
margin: 60px 0;
}
/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
padding: 0;
}
.navbar .nav {
margin: 0;
display: table;
width: 100%;
}
.navbar .nav li {
display: table-cell;
width: 1%;
float: none;
}
.navbar .nav li a {
font-weight: bold;
text-align: center;
border-left: 1px solid rgba(255,255,255,.75);
border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
border-left: 0;
border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
border-right: 0;
border-radius: 0 3px 3px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="masthead">
<h3 class="muted">jQuery Venny</h3>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li><a href="./index.html">Home</a></li>
<li><a href="./documentation.html">Documentation</a></li>
<li class="active"><a href="./example.html">Example</a></li>
<li><a href="#">Downloads</a></li>
<li><a href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div><!-- /.navbar -->
</div>
<div class="row-fluid">
<div class="span12">
<div class="tx-venny-pi1">
<table cellspacing="8" cellpadding="0" border="0">
<tbody>
<tr>
<td id="venny-container" valign="center" height="100%" style="padding: 0px;"></td>
<td valign="bottom">
<p class="bodytext"> Paste up to <strong>five</strong> lists using one row per element, then click the numbers to see the results. <a id="setexample" href="javascript:void(0)"> example </a></p>
<br />
<dt>
<input id="name1" type="textbox" style="color: #228B22; font-weight: bold;" value="List 1" maxlength="11" size="18" />
<br />
<textarea id="area1" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_1" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name2" type="textbox" style="color: #3366BB; font-weight: bold;" value="List 2" maxlength="11" size="18" />
<br />
<textarea id="area2" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_2" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name3" type="textbox" style="color: #99334E; font-weight: bold;" value="List 3" maxlength="11" size="18" />
<br />
<textarea id="area3" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_3" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name4" type="textbox" style="color: #FFD700; font-weight: bold;" value="List 4" maxlength="11" size="18" />
<br />
<textarea id="area4" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_4" href="javascript:void(0)">clear</a> </dt>
<dt>
<input id="name5" type="textbox" style="color: #FFA54F; font-weight: bold;" value="List 5" maxlength="11" size="18" />
<br />
<textarea id="area5" wrap="off" rows="4" style="width: 100%;"></textarea>
</dt>
<dt style="width: 100%; text-align: right;"> <a id="clear_5" href="javascript:void(0)">clear</a> </dt>
</td>
</tr>
<tr>
<td valign="bottom" colspan="2">
<p> Click on a number to show the corresponding elements: </p>
<textarea id="names" wrap="off" style="width: 100%;" rows="8"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="footer" style="background-color:#e5e5e5;">
<div class="container">
<p>Copyright &copy; 2013, INRA | Designed by GenoToul Bioinfo and Sigenae teams.</p>
<p>Code licensed under ....</p>
<ul class="footer-links" style="list-style-type: none;">
<li><a href="http://bioinfo.genotoul.fr/" target="_blank">GenoToul Bioinfo platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.sigenae.org/" target="_blank">Sigenae platform</a></li>
<li class="muted">&middot;</li>
<li><a href="http://www.international.inra.fr/" target="_blank">INRA</a></li>
</ul>
</div>
</footer>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
<script src='http://code.jquery.com/jquery.min.js' type='text/javascript'></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-alert.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-modal.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-scrollspy.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-button.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-collapse.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-typeahead.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-affix.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/holder/holder.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/application.js"></script> -->
</body>
</html>
\ No newline at end of file
index.html
View file @ ac7721c7
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery.venny</title>
<link type="text/css" rel="stylesheet" media="screen" href="css/jquery.venny.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.venny.js"></script>
<script language="Javascript">
$(document).ready(function () {
function getArrayFromArea(areaID) {
var lines = $("#"+areaID).val().split("\n");
var table = new Array();
for (var lindex in lines) {
table.push(lines[lindex]);
<!DOCTYPE html>
<html>
<head>
<title>jQuery Venny</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<style type="text/css">
body {
padding-top: 20px;
padding-bottom: 60px;
}
return (table);
}