|
1 <!doctype html> |
|
2 <html> |
|
3 <head> |
|
4 <meta charset="utf-8"> |
|
5 <title>SPEL : Recherche dans spectacles</title> |
|
6 <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css"> |
|
7 <link rel="stylesheet" href="lib/bootstrap-multiselect.css" type="text/css"/> |
|
8 <link rel="stylesheet" href="css/spel.css"> |
|
9 </head> |
|
10 <body> |
|
11 <div class="container"> |
|
12 <header class="navbar navbar-inverse" role="banner"> |
|
13 <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation"> |
|
14 <ul class="nav navbar-nav"> |
|
15 <li><a href="index.html">Spectacle en Ligne(s)</a></li> |
|
16 </ul> |
|
17 <ul class="nav navbar-nav navbar-right"> |
|
18 <li><a href="#" >Se connecter</a></li> |
|
19 </ul> |
|
20 </nav> |
|
21 </header> |
|
22 <div class="spel-content"> |
|
23 <h3>Page Spectacle</h3> |
|
24 <div class="row"> |
|
25 <div class="col-md-6 chapters"> |
|
26 <h4 class="text-center">CHAPITRES</h4> |
|
27 <div class="row"> |
|
28 <div class="col-md-4"> |
|
29 <select id="mulsel1" class="multiselect" multiple="multiple" data-title="Types de contenus"> |
|
30 </select> |
|
31 </div> |
|
32 <div class="col-md-4"> |
|
33 <select id="mulsel2" class="multiselect" multiple="multiple" data-title="Conditions de travail"> |
|
34 </select> |
|
35 </div> |
|
36 <div class="col-md-4"> |
|
37 <select id="mulsel3" class="multiselect" multiple="multiple" data-title="Personnages"> |
|
38 </select> |
|
39 </div> |
|
40 </div> |
|
41 <div class="row"> |
|
42 |
|
43 </div> |
|
44 <div class="row text-center"> |
|
45 <button id="btn-filter-chapters" class="btn btn-success" disabled="disabled">FILTRER</button> |
|
46 </div> |
|
47 </div> |
|
48 <div class="col-md-6 annotations"> |
|
49 <h4 class="text-center">ANNOTATIONS</h4> |
|
50 <form class="form-horizontal" role="form"> |
|
51 <div class="form-group"> |
|
52 <div class="col-md-8 col-md-offset-1"> |
|
53 <input type="text" class="form-control" id="search-input"> |
|
54 </div> |
|
55 <div class="col-md-3"> |
|
56 <button id="btn-search-annotations" class="btn btn-success" disabled="disabled"> |
|
57 <span class="glyphicon glyphicon-search form-control-feedback"></span> |
|
58 </button> |
|
59 </div> |
|
60 </div> |
|
61 </form> |
|
62 <div class="col-md-8 col-md-offset-1"> |
|
63 <select id="mulsel4" class="multiselect" multiple="multiple" data-title="Catégories d'annotations"> |
|
64 </select> |
|
65 </div> |
|
66 <div class="col-md-3"> |
|
67 <button id="btn-filter-annotations" class="btn btn-success" disabled="disabled">FILTRER</button> |
|
68 </div> |
|
69 </div> |
|
70 </div> |
|
71 </div> |
|
72 <footer> |
|
73 <div class="row"> |
|
74 <div class="footer-img col-md-6"> |
|
75 <a href="http://www.iri.centrepompidou.fr" target="_blank"><img src="img/logo_IRI_footer.png" alt="Logo IRI" /></a> |
|
76 </div> |
|
77 <div class="col-md-6 text-right"> |
|
78 SPEL - ©2014 |
|
79 </div> |
|
80 </div> |
|
81 </footer> |
|
82 </div> |
|
83 <script type="text/javascript" src="lib/jquery-2.1.0.min.js"></script> |
|
84 <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script> |
|
85 <script type="text/javascript" src="lib/bootstrap-multiselect.js"></script> |
|
86 <script type="text/javascript"> |
|
87 |
|
88 $(document).ready(function () { |
|
89 |
|
90 $('.chapters .multiselect').multiselect({ |
|
91 buttonText: function(options, select) { |
|
92 return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>'; |
|
93 }, |
|
94 onChange: function(element, checked) { |
|
95 var filter_enabled = false; |
|
96 var chbs = $(".chapters input:checkbox"); |
|
97 for (var i = chbs.length - 1; i >= 0; i--) { |
|
98 filter_enabled = filter_enabled || $(chbs[i]).is(":checked"); |
|
99 }; |
|
100 if(filter_enabled){ |
|
101 $("#btn-filter-chapters").removeAttr('disabled'); |
|
102 } |
|
103 else{ |
|
104 $("#btn-filter-chapters").attr('disabled','disabled'); |
|
105 } |
|
106 } |
|
107 }); |
|
108 $('.annotations .multiselect').multiselect({ |
|
109 buttonText: function(options, select) { |
|
110 return $(select).attr("data-title") + ' (' + options.length + ') <b class="caret"></b>'; |
|
111 }, |
|
112 buttonContainer: '<div class="btn-group width100percent" />', |
|
113 buttonClass: 'btn btn-default width100percent disabled', |
|
114 onChange: function(element, checked) { |
|
115 var filter_enabled = false; |
|
116 var chbs = $(".annotations input:checkbox"); |
|
117 for (var i = chbs.length - 1; i >= 0; i--) { |
|
118 filter_enabled = filter_enabled || $(chbs[i]).is(":checked"); |
|
119 }; |
|
120 if(filter_enabled){ |
|
121 $("#btn-filter-annotations").removeAttr('disabled'); |
|
122 } |
|
123 else{ |
|
124 $("#btn-filter-annotations").attr('disabled','disabled'); |
|
125 } |
|
126 } |
|
127 }); |
|
128 |
|
129 |
|
130 var data1 = [ |
|
131 {label: "Performance", value: "Performance"}, |
|
132 {label: "Discussion", value: "Discussion"} |
|
133 ]; |
|
134 $("#mulsel1").multiselect('dataprovider', data1); |
|
135 var data2 = [ |
|
136 {label: "Lumière", value: "Lumière"}, |
|
137 {label: "Son", value: "Son"}, |
|
138 {label: "Musique", value: "Musique"}, |
|
139 {label: "Décor", value: "Décor"} |
|
140 ]; |
|
141 $("#mulsel2").multiselect('dataprovider', data2); |
|
142 var data3 = [ |
|
143 {label: "PA", value: "Lumière"}, |
|
144 {label: "PB", value: "Son"}, |
|
145 {label: "PC", value: "Musique"}, |
|
146 {label: "PD", value: "Décor"}, |
|
147 {label: "PE", value: "Décor"} |
|
148 ]; |
|
149 $("#mulsel3").multiselect('dataprovider', data3); |
|
150 |
|
151 // Annotations : |
|
152 $("#mulsel4").multiselect('disable'); |
|
153 $(document).on('input', "#search-input", function(){ |
|
154 if($(this).val()!=""){ |
|
155 $("#btn-search-annotations").removeAttr('disabled'); |
|
156 } |
|
157 else{ |
|
158 $("#btn-search-annotations").attr('disabled','disabled'); |
|
159 } |
|
160 }); |
|
161 |
|
162 $("#btn-search-annotations").click(function(e){ |
|
163 e.preventDefault(); |
|
164 var data4 = [ |
|
165 {label: "Intervention MES", value: "Intervention MES"}, |
|
166 {label: "Filage de la scène", value: "Filage de la scène"}, |
|
167 {label: "Parole à l'acteur/actrice", value: "Parole à l'acteur/actrice"}, |
|
168 {label: "Interprétation du texte", value: "Interprétation du texte"}, |
|
169 {label: "Décision", value: "Décision"} |
|
170 ]; |
|
171 $("#mulsel4").multiselect('dataprovider', data4); |
|
172 $("#mulsel4").multiselect('enable'); |
|
173 }); |
|
174 |
|
175 |
|
176 }); |
|
177 |
|
178 </script> |
|
179 </body> |
|
180 </html> |