{% extends "base.html" %}
{% load static %}
{% load i18n %}
{% block title %}{{block.super}} > {{datasheet.title}}{% endblock %}
{% block css_import %}
{{block.super}}
<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/renkan_help.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/jquery-ui.js' %}"></script>
<script src="{% static 'renkanmanager/lib/jquery-mousewheel/jquery.mousewheel.js' %}"></script>
<script src="{% static 'renkanmanager/lib/underscore/underscore.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone/backbone.js' %}"></script>
<script src="{% static 'renkanmanager/lib/backbone-relational/backbone-relational.js' %}"></script>
<script src="{% static 'renkanmanager/lib/paper/paper-full.js' %}"></script>
<script type="text/javascript">
var require = {
baseUrl: "{% static 'renkanmanager/lib/' %}"
};
</script>
<script src="{% static 'renkanmanager/lib/requirejs/require.js' %}"></script>
<script src="{% static 'renkanmanager/lib/renkan/js/renkan.js' %}"></script>
<script src="{% static 'hdalab/js/renkan-manual-save.js' %}"></script>
<script src="{% static 'hdalab/js/hdalab-renkan-bins.js' %}"></script>
<script type="text/javascript">
var io_options = {}, dialog=false;
function startRenkan(){
var _renkan = new Rkns.Renkan({
manual_save: true,
user_color_editable: false,
show_user_color: false,
{% if user.is_authenticated %}
user_id:"{{ user.id }}",
user_name:"{{ user }}",
{% endif %}
static_url : "{% static 'renkanmanager/lib/renkan/' %}",
search: [
{
type: "HdaTags",
lang: "{{LANGUAGE_CODE}}",
image: "http://dbpedia.org/statics/dbpedia_logo.png",
url: "{% url 'tag_search' %}"
},
{
type: "HdaNotices",
lang: "{{LANGUAGE_CODE}}",
image: "http://digital-impulse.com/wp-content/plugins/smilies-themer/digicons/IronMan.png",
url: "{% url 'searchajax' %}"
},
{
type: "Wikipedia",
lang: "{{LANGUAGE_CODE}}"
}
],
bins: [
{
type: "ResourceList",
title: "Ressources",
list: [
{
url: "http://www.histoiredesarts.culture.fr/",
title: "Histoire des arts",
description: "Portail Histoire des arts sur culture.fr",
image: "http://www.culture.fr/extension/culture_fr/design/culture/images/favicon.ico"
}
]
}
],
/*property_files: [ "data/properties.json" ],
node_fill_color: false*/
language: "{{LANGUAGE_CODE}}"
});
//_create_user_//
//_____________//
io_options = { url: "{% url 'renkan_get_put' %}" + window.location.search, user_authenticated: {% if user.is_authenticated %}true{% else %}false{% endif %} };
Rkns.jsonIOSaveOnClick(_renkan, io_options);
};
$(function() {
var form;
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 398,
width: 520,
modal: true,
create: function (event, ui) {
$("#login-popup-close").click(function(){
dialog.dialog("close");
});
}
});
function manageLoginForm(e, form){
e.preventDefault();
f = $(form);
$.ajax({
type: f.attr("method"),
url: f.attr("action"),
data: f.serialize(),
success: function(data, textStatus, jqXHR) {
var d = $(data);
if($(".ok",d).length==1){
$("#dialog-form").html($(".ok",d)[0]);
$(".hello-user").remove();
$("#nav").append($(".username",d).children());
//$("#dialog-form .close").click(function(){
// dialog.dialog( "close" );
//});
io_options.user_authenticated = true;
$(".Rk-Save-Button").addClass("Rk-Save-Online");
dialog.dialog( "close" );
$(".Rk-Save-Button").click();
return true;
}
$("#dialog-form").html(data);
// in case, login failed, we reassign the behaviour
form = dialog.find( "form" ).on( "submit", function( event ) {
manageLoginForm(event, this);
});
}
});
}
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(){
if (help_dialog.dialog("isOpen")){
help_dialog.dialog("close");
}
else{
help_dialog.dialog("open");
}
});
$(".img-close").click(function(){
help_dialog.dialog("close");
});
}
});
});
</script>
{% endblock %}
{% block main_content %}
<div class="all-title">
<h1><strong>RENKAN</strong></h1>
<div class="renkan_help">
<ul>
<li>
{% trans 'Changer de disposition' %}
<p> {% trans '(Indisponible si modification du RENKAN)' %}</p>
<ul>
{% if 'shape=circle' in switch_shape_url %}
<li id="graph-line"><a href="">✓ {% trans 'See the graph in line' %}</a></li>
<li id="graph-circle"><a href="{{ switch_shape_url }}"> {% trans 'See the graph in circle' %}</a></li>
{% else %}
<li id="graph-line"><a href="{{ switch_shape_url }}"> {% trans 'See the graph in line' %}</a></li>
<li id="graph-circle"><a href="">✓ {% trans 'See the graph in circle' %}</a></li>
{% endif %}
</ul>
</li>
</ul>
<a id="toggle-help" href="#"></a>
</div>
</div>
<div id="dialog-form" title="Identification">
{% include 'ajax_identification/ajax_login.html' %}
</div>
<div id="help-container" class="">
<div id="help-slideshow">
<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>{% trans '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.' %}</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>{% 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>
<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 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>{% blocktrans %}Ensuite vous pouvez enregistrer en ciquant sur l’icone representant une disquette.{% endblocktrans %}</p>
</div>
</li>
</ul>
</div>
</div>
<div class="rnk-wrapper">
<div class="rnk-container">
<div id="renkan"></div>
</div>
</div>
{% endblock %}