<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SPEL : Recherche dans spectacles</title>
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="lib/bootstrap-multiselect.css" type="text/css"/>
<link rel="stylesheet" href="css/spel.css">
</head>
<body>
<div class="container">
<header class="navbar navbar-inverse" role="banner">
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="index.html">Spectacle en Ligne(s)</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#" >Se connecter</a></li>
</ul>
</nav>
</header>
<div class="spel-content">
<h3>Page Spectacle</h3>
<div class="row">
<div class="col-md-6 chapters">
<h4 class="text-center">CHAPITRES</h4>
<div class="row">
<div class="col-md-4">
<select id="mulsel1" class="multiselect" multiple="multiple" data-title="Types de contenus">
</select>
</div>
<div class="col-md-4">
<select id="mulsel2" class="multiselect" multiple="multiple" data-title="Conditions de travail">
</select>
</div>
<div class="col-md-4">
<select id="mulsel3" class="multiselect" multiple="multiple" data-title="Personnages">
</select>
</div>
</div>
<div class="row">
</div>
<div class="row text-center">
<button id="btn-filter-chapters" class="btn btn-success" disabled="disabled">FILTRER</button>
</div>
</div>
<div class="col-md-6 annotations">
<h4 class="text-center">ANNOTATIONS</h4>
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="col-md-8 col-md-offset-1">
<input type="text" class="form-control" id="search-input">
</div>
<div class="col-md-3">
<button id="btn-search-annotations" class="btn btn-success" disabled="disabled">
<span class="glyphicon glyphicon-search form-control-feedback"></span>
</button>
</div>
</div>
</form>
<div class="col-md-8 col-md-offset-1">
<select id="mulsel4" class="multiselect" multiple="multiple" data-title="Catégories d'annotations">
</select>
</div>
<div class="col-md-3">
<button id="btn-filter-annotations" class="btn btn-success" disabled="disabled">FILTRER</button>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="footer-img col-md-6">
<a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="img/logo_IRI_footer.png" alt="Logo IRI" /></a>
</div>
<div class="col-md-6 text-right">
SPEL - ©2014
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="lib/bootstrap-multiselect.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.chapters .multiselect').multiselect({
buttonText: function(options, select) {
return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>';
},
onChange: function(element, checked) {
var filter_enabled = false;
var chbs = $(".chapters input:checkbox");
for (var i = chbs.length - 1; i >= 0; i--) {
filter_enabled = filter_enabled || $(chbs[i]).is(":checked");
};
if(filter_enabled){
$("#btn-filter-chapters").removeAttr('disabled');
}
else{
$("#btn-filter-chapters").attr('disabled','disabled');
}
}
});
$('.annotations .multiselect').multiselect({
buttonText: function(options, select) {
return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>';
},
buttonContainer: '<div class="btn-group width100percent" />',
buttonClass: 'btn btn-default width100percent disabled',
onChange: function(element, checked) {
var filter_enabled = false;
var chbs = $(".annotations input:checkbox");
for (var i = chbs.length - 1; i >= 0; i--) {
filter_enabled = filter_enabled || $(chbs[i]).is(":checked");
};
if(filter_enabled){
$("#btn-filter-annotations").removeAttr('disabled');
}
else{
$("#btn-filter-annotations").attr('disabled','disabled');
}
}
});
var data1 = [
{label: "Performance", value: "Performance"},
{label: "Discussion", value: "Discussion"}
];
$("#mulsel1").multiselect('dataprovider', data1);
var data2 = [
{label: "Lumière", value: "Lumière"},
{label: "Son", value: "Son"},
{label: "Musique", value: "Musique"},
{label: "Décor", value: "Décor"}
];
$("#mulsel2").multiselect('dataprovider', data2);
var data3 = [
{label: "PA", value: "Lumière"},
{label: "PB", value: "Son"},
{label: "PC", value: "Musique"},
{label: "PD", value: "Décor"},
{label: "PE", value: "Décor"}
];
$("#mulsel3").multiselect('dataprovider', data3);
// Annotations :
$("#mulsel4").multiselect('disable');
$(document).on('input', "#search-input", function(){
if($(this).val()!=""){
$("#btn-search-annotations").removeAttr('disabled');
}
else{
$("#btn-search-annotations").attr('disabled','disabled');
}
});
$("#btn-search-annotations").click(function(e){
e.preventDefault();
var data4 = [
{label: "Intervention MES", value: "Intervention MES"},
{label: "Filage de la scène", value: "Filage de la scène"},
{label: "Parole à l'acteur/actrice", value: "Parole à l'acteur/actrice"},
{label: "Interprétation du texte", value: "Interprétation du texte"},
{label: "Décision", value: "Décision"}
];
$("#mulsel4").multiselect('dataprovider', data4);
$("#mulsel4").multiselect('enable');
});
});
</script>
</body>
</html>