--- a/src/hdalab/templates/renkan_edit.html Thu Nov 20 11:51:09 2014 +0100
+++ b/src/hdalab/templates/renkan_edit.html Thu Nov 20 11:51:29 2014 +0100
@@ -9,14 +9,15 @@
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/ui-lightness/jquery-ui-1.10.4.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'renkanmanager/lib/renkan/css/renkan.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/additionnal_renkan.css' %}" />
+ <link rel="stylesheet" type="text/css" href="{% static 'hdalab/css/help-popup.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'hdalab/lib/bjqs.css' %}" />
{% endblock %}
{% block js_import %}
{{block.super}}
<script src="{% static 'hdalab/lib/bjqs-1.3.min.js' %}"></script>
- <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
- <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
+ <script src="{% static 'renkanmanager/lib/jquery-ui-1.10.4.min.js' %}"></script>
+ <script src="{% static 'renkanmanager/lib/jquery.mousewheel.min.js' %}"></script>
<script src="{% static 'renkanmanager/lib/underscore-min.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone-relational.js' %}"></script>
@@ -79,13 +80,13 @@
$(function() {
var form;
-
+
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true
- });
+ });
function manageLoginForm(e, form){
e.preventDefault();
@@ -118,26 +119,39 @@
});
}
- form = dialog.find( "form" ).on( "submit", function( event ) {
- manageLoginForm(event, this);
- });
-
- // Slider init
- $('#help-slideshow').bjqs({
- animtype: 'slide',
- height: 320,
- width: 960,
- showcontrols: true,
- nexttext: "{% trans 'Next' %}",
- prevtext: "{% trans 'Previous' %}",
- showmarkers : true,
- centermarkers : true,
- automatic: false
- });
- $("#toggle-help").click(function(){
- $('#help-container').toggle();
- });
- });
+ form = dialog.find( "form" ).on( "submit", function( event ) {
+ manageLoginForm(event, this);
+ });
+
+ //help dialog init
+ var help_dialog = $( "#help-container" ).dialog({
+ autoOpen: false,
+ height: 330,
+ width: 880,
+ resizable: false,
+ draggable: false,
+ create: function (event, ui) {
+ var help_slideshow = $('#help-slideshow').bjqs({
+ responsive:false,
+ height: 320,
+ width: 870,
+ animtype: 'slide',
+ showcontrols: true,
+ centercontrols: false,
+ nexttext: "",
+ showmarkers : false,
+ automatic: false
+ });
+
+ $("#toggle-help").click(function(){
+ help_dialog.dialog("open");
+ });
+ $(".img-close").click(function(){
+ help_dialog.dialog("close");
+ });
+ }
+ });
+ });
</script>
{% endblock %}
@@ -148,17 +162,64 @@
</div>
<div class="renkan_help">
<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>
- <span id="toggle-help" class="hand">{% trans 'Need help ?' %}</span>
+ <a id="toggle-help" href="#"></a>
</div>
-<div id="help-container">
+
+<div id="help-container" class="">
<div id="help-slideshow">
- <ul class="bjqs">
- <li>Slide 1</li>
- <li>Slide 2</li>
- <li>Slide 3</li>
- </ul>
+ <a class="img-close" href="#">{% trans 'Fermer<br>ce didacticiel' %}</a>
+ <ul class="bjqs">
+ <li class="slide1">
+ <div class="slideShowTitle">{% trans 'Aide : Bienvenue !' %}</div>
+ <div class="column-left">
+ <p>{% blocktrans %}
+ 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>
+ Vous pouvez déplacer chaque noeud en cliquant dessus et en déplacant votre curseur.
+ {% endblocktrans %}
+ </p>
+ </div>
+ <div class="column-center">
+ <p class="columnTitle">{% trans 'Légende' %}</p>
+ <label class="img-requete">{% trans 'Requête' %}</label>
+ <label class="img-ressource">{% trans 'Ressource' %}</label>
+ <label class="img-tag">{% trans 'Tag' %}</label>
+ </div>
+
+ <div class="column-right">
+ <p>{% blocktrans %}
+ En cliquand sur chaque noeud ou lien vous pouvez les déplacer, éditer, supprimer, agrandir, rétraicir,
+ modifier en utilisant le menu circulaire comme ci dessous.
+ {% endblocktrans %}</p>
+ <img src="{% static 'hdalab/img/menu.png' %}" class="img-menu">
+ </div>
+ </li>
+ <li class="slide2">
+ <div class="slideShowTitle">{% trans 'Aide : Ajouter, Editer, Organiser, Enregistrer !' %}</div>
+ <div class="column-left">
+ <h1 class="columnTitle">{% trans '1. Ajouter' %}</h1>
+ <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>
+ <img src="{% static 'hdalab/img/extend.png' %}" class="img-extend" />
+ <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>
+ </div>
+ <div class="column-center">
+ <h1 class="columnTitle">{% trans '2. Editer et organiser' %}</h1>
+ <p>{% blocktrans %}
+ Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.<br><br>
+ Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500,
+ quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre de texte.
+ {% endblocktrans %}</p>
+ </div>
+ <div class="column-right">
+ <h1 class="columnTitle">{% trans '3. Enregistrer' %}</h1>
+ <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>
+ <img src="{% static 'hdalab/img/save.png' %}" class="img-save" />
+ <p>{% trans 'Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.' %}</p>
+ </div>
+ </li>
+ </ul>
</div>
</div>
+
<div class="rnk-wrapper">
<div class="rnk-container">
<div id="renkan"></div>