Skip to content

gargantext
gargantext
Commit 6827c1f7 authored by c24b's avatar c24b
Browse files
Options

A specific demo on demo project

parent 5490ac1f
Hide whitespace changes
Inline Side-by-side
Showing with 229 additions and 119 deletions
static/lib/gargantext/demo.js 0 → 100644
View file @ 6827c1f7
// DEMO
var page = window.location.href
var storage = window.localStorage;
var steps = [];
var min = 0;
var max = this.steps.length;
var pos = undefined;
var step = undefined;
var start_element = "a#guided_tour"
//here is the targeted_element we want to show
//this.targeted_el = undefined;
//html template
var controller = '<div class="btn-group col-xs-12">'+
'<div class="col-xs-2"></div>'+
'<button class="btn btn-sm btn-warning col-xs-3" onclick=end()(storage.pos)><span class="glyphicon glyphicon-step-backward"></span></button>'+
'<button class="btn btn-sm btn-success col-xs-3" onclick=goNext(storage.pos)><span class="glyphicon glyphicon-step-forward"></span></button>'+
'<button class="btn btn-sm btn-danger col-xs-3" onclick="endTour();"><span class="glyphicon glyphicon-stop"></span></button>'+
'<div class="col-xs-1"></div>'+
'</div>'
//this.popover_template = 0;
//this.modal_template = 0;
//this.toogle_template = 0;
//this.tooltip_template = 0;
//var match = /^([0-9]{4})-([0-9]{2})-([0-9]{2})$/.exec(str);
//alert(page)
function addStep(step) {
console.log("addstep steps", steps);
console.log("addstep", step["pos"]);
//steps.splice(steps, step["pos"], step)
//step["element"] = $(document).find(step["element")
//console.log($this);
steps.push(step);
console.log("addstep steps", steps);
return steps
}
function buildTour(from_pos) {
pos = from_pos
$( ".tour" ).each(function(i) {
pos++
console.log(i)
step = {
"element": $(this),
"type": "popover",
"title": $(this).attr("title"),
"content": $(this).attr("content"),
"placement": "left",
"pos": pos,
"page": window.location.href
}
steps = addStep(step);
});
console.log(steps)
max = steps.length
return steps
}
function removeStep(step) {
var step_pos = steps.indexOf(step);
alert(step_pos)
steps.splice(step, step_pos);
return steps
}
function showStep(pos){
step = steps[pos]
//curr_el = this.steps[pos]["element"];
//cache position
storage.pos = pos
storage.page = page
storage.element = step["element"]
//create popover defining it's type
pop = createPopover(step, "popover")
step["element"].popover("show")
$(step["element"]).addClass("active")
return step
}
function goNext(pos){
if (pos >= steps.length){
return endTour();
}
else {
//get current step
previous = steps[pos];
$(previous["element"]).popover("hide")
//this.curr.removeClass("curr-step")
//this.previous.addClass("prev-step")
console.log(steps)
pos++
if (pos >= steps.length){
return endTour();
}
else{
console.log(pos)
console.log(steps.length)
step = steps[pos];
console.log("curr", step)
storage.pos = pos
//this.curr.removeClass("prev-step")
//storage.element = step["element"]
$(step["element"]).addClass("curr-step")
createPopover(step);
$(step["element"]).popover("show")
//var this.next = this.steps[pos+1];
//this.curr.addClass("next-step")
return step
}
}
}
function goPrev(pos){
if (this.curr >= this.min){
return end()
}
next = steps[pos];
next["element"].popover("hide")
//this.next.removeClass("curr-step")
//this.next.addClass("next-step")
pos = pos-1
step = steps[pos];
storage.pos = pos
storage.element = step["element"]
//this.curr.removeClass("prev-step")
$(step["element"]).addClass("curr-step")
createPopover(this.curr)
step["element"].popover("show")
// var this.previous = this.steps[pos+1];
//this.next.removeClass("curr-step")
//this.curr.addClass("next-step")
return this.curr
}
function createPopover(step) {
//this.type = step["type"]
if (step["type"] == "popover"){
step["element"].popover({
html:true,
title : step["title"],
content: '<p class="text-center">'+step["content"]+'</p>'+ controller,
container: 'body',
trigger:"focus",
placement: step["placement"]
});
}
//console.log("pop", step["popover"])
return step
}
function initTour(){
$(document).on("click", this.start_element, function () {
if ($(this).parent().hasClass("active")){
$(this).parent().removeClass("active");
endTour();
}
else {
$(this).parent().addClass("active");
console.log(start_element)
addStep({
"element": $(start_element),
"type": "popover",
"title": $(start_element).attr("title"),
"content": $(start_element).attr("content"),
"placement": "bottom",
"pos": 0,
"page": window.location.href
});
pos = 0;
console.log(steps);
showStep(pos);
pos = storage.pos
if (pos == undefined){
return endTour()
}
else{
console.log("start")
};
steps = buildTour(pos);
}
});
//$(document).on("click", , function () {
return steps
}
function endTour() {
storage.pos = undefined
storage.element = undefined
$('.popover').popover('hide');
steps = []
}
function startTour(){
pos = storage.pos
if (pos == undefined){
return endTour()
}
else{
console.log("start")
};
steps = buildTour(pos);
// $(document).on("click", "button [data-role='next']", function(e){
// alert(pos);
// goNext(storage.pos);
// });
// $(document).on("click", "button [data-role='prev']", function(e){
// alert(pos);
// goPrev(storage.pos);
// });
// $(document).on("click", "button [data-role='stop']", function(e){
// endTour();
// });
return steps;
}
static/lib/gargantext/guided_tour.js deleted 100644 → 0
View file @ 5490ac1f
function popOverFactory(selector, step, pos){
//Factory for popover indicated by class tour
var title = $(selector).attr('name');
var placement = $(selector).attr('placement');
console.log(title)
console.log(placement)
if (title == false || title == undefined) {
title = "<h1>STEP"+ step +"</h1>"
}
if (placement == false || placement == undefined) {
placement: pos
}
$(selector).popover({
html:true,
title : title,
content: '<p class="text-center">'+$(selector).attr("content")+'</p>'+
'<div class="btn-group col-sm-12">'+
'<button class="col-sm-6 btn btn-sm btn-danger" data-role="prev">&laquo; Prev</button>'+
'<button class="col-sm-6 btn btn-sm btn-success" data-role="next">Next &raquo;</button>'+
'</div><br>',
container: 'body',
trigger:"toogle",
placement: placement
});
//$('.btn').not(this).popover('hide');
//$(selector).popover('toggle');
}
function nextStep(element, i){
steps = $(document).find(".tour")
$(document).on("click", "button[data-role='next']", function(e){
console.log("curr", element);
$("div.jumbotron" > "button.popover")
native_pop = $(element).children()
//native_pop.addClass("tour")
native_pop.popover("show");
//$("div.status-form").appendTo("Enter a name and click on add project")
//addFormStatus("success","div#createForm", "Enter a name and click on add project")
$(element).popover("hide");
active = $.find(".in")
submit = $(active).find("button")
if (submit.length >= 1){
$(document).on("click", submit, function(e){
i = i+1
alert("clicked")
})
}
else{
i = i+1
}
// if (active.length > 0){
// $("button")
// i = i+2
//native_pop.popover("hide")
//return [native_pop, i]
//$(document).on("change keyup paste", function(){
// alert("typing...")
//})
// }
// else{
// i = i+2
// }
element = steps[i]
console.log("next", element);
popOverFactory(element, i, "right");
$(element).popover("show");
return [element, i];
});
}
function activateTour(){
$(document).on("click", "a#guided_tour", function(e){
if ($(this).parent().hasClass("active")){
$(this).parent().removeClass("active");
$(this).popover("hide");
//$('.popover').popover('hide');
//$(this).popover("destroy");
}
else {
$(this).parent().addClass("active");
curr = $(this)
i = -1
//create the popover
popOverFactory(curr, i, "bottom");
//hide the other popover
$('.popover').not(this).popover('hide');
//show the popover
$(this).popover('toggle');
//buildTour
curr, i = nextStep(curr, i)
console.log(i, curr)
if (i > steps.lenght){
return false
}
}
})
}
templates/pages/menu.html
View file @ 6827c1f7
......@@ -5,7 +5,7 @@
<script type="text/javascript" src="{% static "lib/jquery/1.11.1/jquery.min.js" %}"></script>
<link rel="stylesheet" type="text/css" href="{% static "lib/bootstrap/3.0.2/bootstrap.css" %}">
<link rel="stylesheet" type="text/css" href="{% static "lib/gargantext/menu.css"%}"/>
<script type="text/javascript" src="{% static "lib/gargantext/guided_tour.js" %}"></script>
{% block css %}
{% endblock %}
......@@ -69,10 +69,10 @@
{% endif %}
</ul>
<ul class="nav navbar-nav pull-right">
<li>
<a id="guided_tour" role="button" title="Guided Tour" content="Welcome to Guided Tour of Gargantext plateform. Deactivate the tour by clicking on the main nav button. Navigate throught step using previous and next">
<li {% if not project %} class="disabled"{% endif %}>
<a id="guided_tour" role="tooltip" title="Demo of Gargantext" content="Welcome to the demo Tour! Let's have a look on Gargantext plateform.">
<i class="glyphicon glyphicon-question-sign" aria-hidden="true"></i>
Guided Tour
Demo
</a>
</li>
<ul class="nav navbar-nav pull-right">
......@@ -115,7 +115,7 @@
{% if corpus %}
<div class="container">
<ul id="corporatop" class="nav nav-tabs navbar-static-top nav-justified">
<li">
<li>
<a type="button" class="btn btn-default {% if view == 'titles' %} active {% endif %}"
onclick="javascript:location.href='/projects/{{project.id}}/corpora/{{ corpus.id }}/'"
data-target='#' href='#'>
......@@ -338,7 +338,7 @@
-->
<script type="text/javascript" src="{% static "lib/bootstrap/3.2.0/bootstrap.min.js" %}"></script>
<script type="text/javascript" src="{% static "lib/gargantext/demo.js" %}"></script>
<script type="text/javascript">
// initializes the popover elements with jquery
$(function () { $("[data-toggle='popover']").popover({
......@@ -350,7 +350,10 @@
return $("#popover-content").html();
}
});});
activateTour();
initTour();
</script>
......
templates/pages/projects/overview.html
View file @ 6827c1f7
{% extends "pages/menu.html" %}
{% block css %}
......
templates/pages/projects/project.html
View file @ 6827c1f7
......@@ -54,7 +54,7 @@
<div id="hero-donut" style="height: 200px;"></div>
{% endif %}
<center>
<p class="tour" title="CORPUS" content="add a corpus to your project">
<p class="tour" title="CORPUS" content="add a corpus to your project by clicking on +Add Corpus">
<a data-toggle="modal" href="#addcorpus">
<button
type="button"
......@@ -84,10 +84,14 @@
<div class="container">
{% if list_corpora %}
{% for key, corpora in list_corpora.items %}
<h2>
<div class="row">
<div class="col-md-1 content"></div>
<span class="glyphicon glyphicon-cd" aria-hidden="true"></span>
{{ key }}
......@@ -95,6 +99,7 @@
{% for corpus in corpora %}
<div id="corpus_{{corpus.id}}" class="corpusElt">
<div class="row">
<h4>
<div class="col-md-1 content"></div>
<div class="col-md-5 content">
......@@ -105,6 +110,7 @@
</a>
</div>
<div class="col-md-3 content" id="corpus_{{corpus.id}}_tools">
<span class="tour" placement="left" type="popover" title="Corpus Detail" content="Here you can see, edit or delete your corpus"></span>
{% if corpus.hyperdata.statuses %}
{% for state in corpus.hyperdata.statuses %}
{% ifequal state.action "Workflow" %}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment