7 {% block css_import %} |
7 {% block css_import %} |
8 {{block.super}} |
8 {{block.super}} |
9 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" /> |
9 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" /> |
10 <link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" /> |
10 <link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" /> |
11 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" /> |
11 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" /> |
|
12 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/help-popup.css' %}" /> |
12 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" /> |
13 <link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" /> |
13 {% endblock %} |
14 {% endblock %} |
14 |
15 |
15 {% block js_import %} |
16 {% block js_import %} |
16 {{block.super}} |
17 {{block.super}} |
17 <script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script> |
18 <script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script> |
18 <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script> |
19 <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script> |
19 <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script> |
20 <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script> |
20 <script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script> |
21 <script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script> |
21 <script src="{% static 'renkanmanager/lib/backbone.js' %}"></script> |
22 <script src="{% static 'renkanmanager/lib/backbone.js' %}"></script> |
22 <script src="{% static 'renkanmanager/lib/backbone-relational.js' %}"></script> |
23 <script src="{% static 'renkanmanager/lib/backbone-relational.js' %}"></script> |
23 <script src="{% static 'renkanmanager/lib/paper.js' %}"></script> |
24 <script src="{% static 'renkanmanager/lib/paper.js' %}"></script> |
24 <script type="text/javascript"> |
25 <script type="text/javascript"> |
116 }); |
117 }); |
117 } |
118 } |
118 }); |
119 }); |
119 } |
120 } |
120 |
121 |
121 form = dialog.find( "form" ).on( "submit", function( event ) { |
122 form = dialog.find( "form" ).on( "submit", function( event ) { |
122 manageLoginForm(event, this); |
123 manageLoginForm(event, this); |
123 }); |
124 }); |
124 |
125 |
125 // Slider init |
126 //help dialog init |
126 $('#help-slideshow').bjqs({ |
127 var help_dialog = $( "#help-container" ).dialog({ |
127 animtype: 'slide', |
128 autoOpen: false, |
128 height: 320, |
129 height: 330, |
129 width: 960, |
130 width: 880, |
130 showcontrols: true, |
131 resizable: false, |
131 nexttext: "{% trans 'Next' %}", |
132 draggable: false, |
132 prevtext: "{% trans 'Previous' %}", |
133 create: function (event, ui) { |
133 showmarkers : true, |
134 var help_slideshow = $('#help-slideshow').bjqs({ |
134 centermarkers : true, |
135 responsive:false, |
135 automatic: false |
136 height: 320, |
136 }); |
137 width: 870, |
137 $("#toggle-help").click(function(){ |
138 animtype: 'slide', |
138 $('#help-container').toggle(); |
139 showcontrols: true, |
139 }); |
140 centercontrols: false, |
140 }); |
141 nexttext: "", |
|
142 showmarkers : false, |
|
143 automatic: false |
|
144 }); |
|
145 |
|
146 $("#toggle-help").click(function(){ |
|
147 help_dialog.dialog("open"); |
|
148 }); |
|
149 $(".img-close").click(function(){ |
|
150 help_dialog.dialog("close"); |
|
151 }); |
|
152 } |
|
153 }); |
|
154 }); |
141 |
155 |
142 </script> |
156 </script> |
143 {% endblock %} |
157 {% endblock %} |
144 |
158 |
145 {% block main_content %} |
159 {% block main_content %} |
146 <div id="dialog-form" title="Identification"> |
160 <div id="dialog-form" title="Identification"> |
147 {% include 'ajax_identification/ajax_login.html' %} |
161 {% include 'ajax_identification/ajax_login.html' %} |
148 </div> |
162 </div> |
149 <div class="renkan_help"> |
163 <div class="renkan_help"> |
150 <span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span> |
164 <span id="circle-shape"><a href="{{ switch_shape_url }}">{% if 'shape=circle' in switch_shape_url %}{% trans 'See the graph in circle' %}{% else %}{% trans 'See the graph in lines' %}{% endif %}</a></span> |
151 <span id="toggle-help" class="hand">{% trans 'Need help ?' %}</span> |
165 <a id="toggle-help" href="#"></a> |
152 </div> |
166 </div> |
153 <div id="help-container"> |
167 |
|
168 <div id="help-container" class=""> |
154 <div id="help-slideshow"> |
169 <div id="help-slideshow"> |
155 <ul class="bjqs"> |
170 <a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a> |
156 <li>Slide 1</li> |
171 <ul class="bjqs"> |
157 <li>Slide 2</li> |
172 <li class="slide1"> |
158 <li>Slide 3</li> |
173 <div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div> |
159 </ul> |
174 <div class="column-left"> |
|
175 <p>{% blocktrans %} |
|
176 Cet outil (RENKAN) vous permet de representer, spatialiser et organiser des collections de ressources du portails histoire des arts avec d’autres sites Web.<br><br> |
|
177 Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur. |
|
178 {% endblocktrans %} |
|
179 </p> |
|
180 </div> |
|
181 <div class="column-center"> |
|
182 <p class="columnTitle">{% trans 'Légende' %}</p> |
|
183 <label class="img-requete">{% trans 'Requête' %}</label> |
|
184 <label class="img-ressource">{% trans 'Ressource' %}</label> |
|
185 <label class="img-tag">{% trans 'Tag' %}</label> |
|
186 </div> |
|
187 |
|
188 <div class="column-right"> |
|
189 <p>{% blocktrans %} |
|
190 En cliquand sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, |
|
191 modifier en utilisant le menu circulaire comme ci dessous. |
|
192 {% endblocktrans %}</p> |
|
193 <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu"> |
|
194 </div> |
|
195 </li> |
|
196 <li class="slide2"> |
|
197 <div class="slideShowTitle">{% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}</div> |
|
198 <div class="column-left"> |
|
199 <h1 class="columnTitle">{% trans '1. Ajouter' %}</h1> |
|
200 <p>{% trans 'Une fois ce didacticiel fermer vous pouvez ajouter des ressources en faisant “drag and drop” a partir de n’importe qu’elle fenetre de navigation web.' %}</p><br> |
|
201 <img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" /> |
|
202 <p>{% trans 'En cliquant sur l’icone à gauche vous pouvez ouvrir le panel de recherche sur pour retrouver des ressources du site HDA ou Wikipédia.' %}</p> |
|
203 </div> |
|
204 <div class="column-center"> |
|
205 <h1 class="columnTitle">{% trans '2. Editer et organiser' %}</h1> |
|
206 <p>{% blocktrans %} |
|
207 Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br><br> |
|
208 Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, |
|
209 quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre de texte. |
|
210 {% endblocktrans %}</p> |
|
211 </div> |
|
212 <div class="column-right"> |
|
213 <h1 class="columnTitle">{% trans '3. Enregistrer' %}</h1> |
|
214 <p>{% trans 'En cliquant sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir, modifier en utilisant le menu circulaire comme ci dessous.' %}</p><br> |
|
215 <img src="{% static 'hdalab/img/save.png' %}" class="img-save" /> |
|
216 <p>{% trans 'Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.' %}</p> |
|
217 </div> |
|
218 </li> |
|
219 </ul> |
160 </div> |
220 </div> |
161 </div> |
221 </div> |
|
222 |
162 <div class="rnk-wrapper"> |
223 <div class="rnk-wrapper"> |
163 <div class="rnk-container"> |
224 <div class="rnk-container"> |
164 <div id="renkan"></div> |
225 <div id="renkan"></div> |
165 </div> |
226 </div> |
166 </div> |
227 </div> |