Skip to content

GitLab

Switch branch/tag
Find file Normal viewHistoryPermalink
example.html 10.2 KB
Newer Older
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
1 
<!DOCTYPE html>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
2
3
4
5 
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
6 
	<title>jvenn</title>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
7 
	<!-- Le styles -->
Jerome Mariette's avatar
reorganise sources    
Jerome Mariette committed
8 
	<link href="css/bootstrap.css" rel="stylesheet" media="screen">
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
9
10
11
12
13
14 
	<style type="text/css">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	</style>
Philippe Bardou's avatar
6 classes    
Philippe Bardou committed
15 
	<link href="css/prettify.css" rel="stylesheet" media="screen">
Jerome Mariette's avatar
reorganise sources    
Jerome Mariette committed
16
17
18 
	<link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
Philippe Bardou's avatar
User doc    
Philippe Bardou committed
19 
	<script type="text/javascript" src="src/jvenn.js"></script>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
20 
	<script language="Javascript">
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
21 
		$(document).ready(function () {
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
22
23
24
25
26
27
28
29
30
31 
		
			function getArrayFromArea(areaID) {
				var lines = $("#"+areaID).val().split("\n");
				var table = new Array();
				for (var lindex in lines) {
					table.push(lines[lindex]);
				}
				return (table);
			}
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
32 
			function updateJvenn() {
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
33 
				var seriesTable = new Array();
Philippe Bardou's avatar
No commit message    
Philippe Bardou committed
34
35
36
37
38
39
40
41 
				var num = 0;
				for(var i=6; i>=1; i--) {
					if($("#area"+i).val() != "") {
						num = i;
						break;
					}
				}
				for(var i=1; i<=num; i++) {
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
42 
					seriesTable.push({
Philippe Bardou's avatar
No commit message    
Philippe Bardou committed
43
44 
						name: $("#name"+i).val(),
						data: getArrayFromArea("area"+i)
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
45
46 
					});
				}
Philippe Bardou's avatar
No commit message    
Philippe Bardou committed
47
48 
		       
			    $("#jvenn-container").jvenn({
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
49 
					series: seriesTable,
Philippe Bardou's avatar
Add edward venn (TODO : 5 and 6 class)    
Philippe Bardou committed
50 
					displayMode: $("#venn-type").val(),
Philippe Bardou's avatar
Update stacked bar color    
Philippe Bardou committed
51 
					displayStat: true,
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69 
					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);
					}
				});
			}
Philippe Bardou's avatar
Add edward venn (TODO : 5 and 6 class)    
Philippe Bardou committed
70
71
72
73 
			$("#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");
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
74
75
76
77 
			$('[id^="clear"]').click(function() {
				var index = $(this).attr("id").split("_")[1];
				$("#area" + index).val("");
				$("#name" + index).val("List " + index);
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
78 
				updateJvenn();
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
79
80
81
82 
			});
			
			// update the view when any fields change
			$("[id^=name]").change(function() {
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
83 
				updateJvenn();
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
84
85 
			});
			$("[id^=area]").change(function() {
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
86 
				updateJvenn();
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
87 
			});
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
88
Philippe Bardou's avatar
Add edward venn (TODO : 5 and 6 class)    
Philippe Bardou committed
89 
			$("#venn-type").change(function() {
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
90 
				updateJvenn();
Philippe Bardou's avatar
Add edward venn (TODO : 5 and 6 class)    
Philippe Bardou committed
91
92 
			});
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
93
94 
			// first init of the jvenn plugin
			updateJvenn();
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
95 
		});
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
96 
	</script>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
97 
	<style type="text/css">
cdjemiel cdjemiel's avatar
add yellow class css control-group    
cdjemiel cdjemiel committed
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136 
		/*add classes control-group*/
		.control-group.yellow .control-label,
		.control-group.yellow .help-block,
		.control-group.yellow .help-inline {
		  color: #f3f300;
		}
		.control-group.yellow .checkbox,
		.control-group.yellow .radio,
		.control-group.yellow input,
		.control-group.yellow select,
		.control-group.yellow textarea {
		  color: #f3f300;
		}
		
		.control-group.yellow input,
		.control-group.yellow select,
		.control-group.yellow textarea {
		  border-color: #f3f300;
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		}
		
		.control-group.yellow input:focus,
		.control-group.yellow select:focus,
		.control-group.yellow textarea:focus {
		  border-color: #c0c000;
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
		     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
		          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #f3f300;
		}
		
		.control-group.yellow .input-prepend .add-on,
		.control-group.yellow .input-append .add-on {
		  color: #f3f300;
		  background-color: #ffff91;
		  border-color: #f3f300;
		}
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
137
138
139
140
141 
		.control-group.orange .control-label,
		.control-group.orange .help-block,
		.control-group.orange .help-inline {
		  color: #ffa54f;
		}
cdjemiel cdjemiel's avatar
add yellow class css control-group    
cdjemiel cdjemiel committed
142 
		.control-group.orange .checkbox,
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175 
		.control-group.orange .radio,
		.control-group.orange input,
		.control-group.orange select,
		.control-group.orange textarea {
		  color: #ffa54f;
		}
		
		.control-group.orange input,
		.control-group.orange select,
		.control-group.orange textarea {
		  border-color: #ffa54f;
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
		}
		
		.control-group.orange input:focus,
		.control-group.orange select:focus,
		.control-group.orange textarea:focus {
		  border-color: #b15700;
		  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
		     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
		          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ffa54f;
		}
		
		.control-group.orange .input-prepend .add-on,
		.control-group.orange .input-append .add-on {
		  color: #ffa54f;
		  background-color: #ffe1c5;
		  border-color: #ffa54f;
		}
		
	</style>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
176
177
178
179
180
181
182
183
184
185 
</head>
<body>
	<div class="navbar navbar-inverse navbar-fixed-top">
      	<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
186 
				<a class="brand" href="./index.html">jvenn</a>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
187
188
189 
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li><a href="./index.html">About</a></li>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
190 
						<li class="active"><a href="./example.html">Example</a></li>
Jerome Mariette's avatar
avec un debut de manual    
Jerome Mariette committed
191
192 
						<li><a href="./documentation.html">Plugin documentation</a></li>
						<li><a href="./usermanual.html">User manual</a></li>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
193
194
195
196
197
198
199
200
201
202 
						<li><a target="_blank" href="https://mulcyber.toulouse.inra.fr/plugins/mediawiki/wiki/venny/index.php/Accueil">Sources</a></li>
						<li><a href="mailto:support.genopole@toulouse.inra.fr">Contact</a></li>
					</ul>
				</div><!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="container">
		<!-- Main hero unit for a primary marketing message or call to action -->
		<div class="hero-unit">
Jerome Mariette's avatar
avec un debut de manual    
Jerome Mariette committed
203 
			<h1>Hello jvenn!</h1>
Philippe Bardou's avatar
6 classes    
Philippe Bardou committed
204 
			<p class="bodytext"> Paste up to <strong>six</strong> lists using one row per element, then click
Philippe Bardou's avatar
Update stacked bar color    
Philippe Bardou committed
205
206 
			the numbers in the <select id="venn-type" class="input-small" style="width:110px;margin-top:5px"><option value="classic">classic</option><option value="edwards">Edwards'</option></select> venn to see the results.
			</p>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
207
208
209
210
211
212 
		</div>
		<div class="row-fluid">
			<div class="span12">
				<div class="row-fluid">
					<div class="span7">
						<div class="row-fluid">
Jerome Mariette's avatar
venny > jvenn    
Jerome Mariette committed
213 
							<div id="jvenn-container"></div>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
214
215
216 
						</div>
						<div class="row-fluid">
							<div class="span12">
Philippe Bardou's avatar
minor    
Philippe Bardou committed
217 
								<p> Click on a venn diagram figure to display the linked elements: </p>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
218 
								<textarea readonly id="names" style="width: 100%;" wrap="off" rows="10"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
219
220
221
222
223
224
225 
							</div>
						</div>
					</div>
					<div class="span5"> 
						<div class="row-fluid">
							<div class="span12">
								<div class="control-group success">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
226 
									<input class="span6" id="name1" type="text" style="font-weight: bold;" value="List 1" maxlength="11"/>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
227 
									<div class="controls controls-row">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
228 
										<textarea class="span10" id="area1" wrap="off" rows="4"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
229
230
231
232
233
234
235
236 
										<a class="btn btn-link" id="clear_1" href="javascript:void(0)">clear</a>
									</div>
								</div>
			 				</div>
			 			</div>
			 			<div class="row-fluid">
			 				<div class="span12">
			 					<div class="control-group info">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
237 
									<input class="span6" id="name2" type="text" style="font-weight: bold;" value="List 2" maxlength="11"/>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
238 
									<div class="controls controls-row">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
239 
										<textarea class="span10" id="area2" wrap="off" rows="4"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
240
241
242
243
244
245
246
247 
										<a class="btn btn-link" id="clear_2" href="javascript:void(0)">clear</a>
									</div>
								</div>
							</div>
			 			</div>
						<div class="row-fluid">
			 				<div class="span12">
			 					 <div class="control-group error">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
248 
									<input class="span6" id="name3" type="text" style="font-weight: bold;" value="List 3" maxlength="11"/>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
249 
									<div class="controls controls-row">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
250 
										<textarea class="span10" id="area3" wrap="off" rows="4"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
251
252
253
254
255
256
257 
										<a class="btn btn-link" id="clear_3" href="javascript:void(0)">clear</a>
									</div>
			 					</div>
			 				</div>
			 			</div>
			 			<div class="row-fluid">
			 				<div class="span12">
cdjemiel cdjemiel's avatar
add yellow class css control-group    
cdjemiel cdjemiel committed
258 
			 					<div class="control-group yellow">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
259 
									<input class="span6" id="name4" type="text" style="font-weight: bold;" value="List 4" maxlength="11"/>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
260 
									<div class="controls controls-row">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
261 
										<textarea class="span10" id="area4" wrap="off" rows="4"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
262
263
264
265
266
267
268
269 
										<a class="btn btn-link" id="clear_4" href="javascript:void(0)">clear</a>
									</div>
			 					</div>
			 				</div>
			 			</div>
			 			<div class="row-fluid">
			 				<div class="span12">
			 					<div class="control-group orange">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
270 
									<input class="span6" id="name5" type="text" style="font-weight: bold;" value="List 5" maxlength="11"/>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
271 
									<div class="controls controls-row">
cdjemiel cdjemiel's avatar
fix affix and jquery.venny.min.js problem    
cdjemiel cdjemiel committed
272 
										<textarea class="span10" id="area5" wrap="off" rows="4"></textarea>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
273
274
275
276
277 
										<a class="btn btn-link" id="clear_5" href="javascript:void(0)">clear</a>
									</div>
								</div>
							</div>
						</div>
Philippe Bardou's avatar
6 classes    
Philippe Bardou committed
278
279
280
281
282
283
284
285
286
287
288 
						<div class="row-fluid">
			 				<div class="span12">
			 					<div class="control-group warning">
									<input class="span6" id="name6" type="text" style="font-weight: bold;" value="List 6" maxlength="11"/>
									<div class="controls controls-row">
										<textarea class="span10" id="area6" wrap="off" rows="4"></textarea>
										<a class="btn btn-link" id="clear_6" href="javascript:void(0)">clear</a>
									</div>
								</div>
							</div>
						</div>
cdjemiel cdjemiel's avatar
change example table to span    
cdjemiel cdjemiel committed
289 
					</div>
cdjemiel cdjemiel's avatar
change example table to span, affix problem solved    
cdjemiel cdjemiel committed
290 
				</div>
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
291 
			</div>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
292
293 
		</div>
		<hr>
Philippe Bardou's avatar
User doc    
Philippe Bardou committed
294
295
296
297 
		<footer style="text-align: center;">
			<p>Copyright &copy; 2014, INRA | Designed by <a href="http://bioinfo.genotoul.fr" target="_blank">GenoToul Bioinfo</a> and
			   <a href="http://sigenae.org" target="_blank">Sigenae</a> teams.
			</p>
Jerome Mariette's avatar
No commit message    
Jerome Mariette committed
298
299
300
301
302
303
304
305
306
307 
		</footer>
	</div>
	<script>
     	!function ($) {
     		$(function(){
				window.prettyPrint && prettyPrint()   
			})
		}(window.jQuery)
	</script>
</body>
cdjemiel cdjemiel's avatar
bootstrap index + doc +example, css move to jquery.venny.js  
cdjemiel cdjemiel committed
308 
</html>