Aggiornate visualizzazioni

js/people.js

@@ -1,599 +1,767 @@
-// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
-thisUrlParams = {};
-window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
-    thisUrlParams[key] = value;
-});
-console.log('URL get params: ', thisUrlParams);
-
-// Funzioni per eseguire le queries
-function prepareQueryURL(query){
-    sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
-    sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
-    return sparqlEndpoint + sparqlUrlParams;
-}
-
-function doJsonQuery(query){
-
-    queryURL = prepareQueryURL(query);
-
-    response = $.ajax({//OGGETTO
-
-        url: queryURL,
-        dataType: "json",
-        success: function (data){},
-        error: function (e) {}
-    });
-
-    return response;
-
-}
-
-// Funzioni per raccattare + stringhificare l'output
-queryStringOutput = "";
-function stringifyResponse(val){
-    resultArray = val['results']['bindings'];
-    out = "";
-    for(i = 0; i < resultArray.length; i++){
-        out = out + JSON.stringify(resultArray[i])
-    }
-    queryStringOutput = (queryStringOutput + out).replace("}{",",");
-}
-
-prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
-PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
-PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
-PREFIX owl: <http://www.w3.org/2002/07/owl#> \
-PREFIX schema: <http://schema.org/> \
-PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
-PREFIX person: <http://www.w3.org/ns/person#>"
-
-query = prefixes + " SELECT DISTINCT ?place ?label ?coordinates \
-WHERE { \
-{?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
-?event_from crm:P01_has_domain ?pc ; \
-rdf:type crm:EL3_Receive_Letter; \
-crm:P26_moved_to ?place_from . \
-?place_from rdf:type crm:E53_Place ; \
-owl:sameAs ?place . \
-?place rdfs:label ?label ; \
-crm:P168_place_is_defined_by ?coordinates . \
-} UNION { \
-?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
-?event_from crm:P01_has_domain ?pc ; \
-rdf:type crm:EL2_Send_Letter; \
-crm:P27_moved_from ?place_from . \
-?place_from rdf:type crm:E53_Place ; \
-owl:sameAs ?place . \
-?place rdfs:label ?label ; \
-crm:P168_place_is_defined_by ?coordinates . \
-} \
-}"
-
-queryInfo = prefixes + " SELECT DISTINCT ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation (group_concat(distinct ?relative1 ;separator=', ') as ?relatives) ?qualification ?group \
-WHERE { \
-VALUES ?uri {<" + thisUrlParams.link + ">} \
-GRAPH ?graph {?uri rdfs:label ?label} \
-?uri foaf:name ?name . \
-OPTIONAL {?uri crm:P1_is_identified_by ?id . \
-?id rdfs:label ?identifier } \
-OPTIONAL {?uri foaf:givenName ?givenName} \
-OPTIONAL {?uri foaf:familyName ?familyName} \
-OPTIONAL {?uri foaf:gender ?gender} \
-OPTIONAL {?uri person:patronymicName ?patronymic } \
-OPTIONAL {?uri schema:hasOccupation ?uriOccupation . \
-?uriOccupation rdf:type schema:Occupation; \
-rdfs:label ?occupation } \
-OPTIONAL {?uri schema:honorificPrefix ?qualification} \
-OPTIONAL {?uri schema:relatedTo ?uriRel1 . \
-?uriRel1 rdfs:label ?relative1} \
-OPTIONAL {?uri crm:P100i_died_in ?Death . \
-?Death crm:P4_has_time-span ?Death_TS; \
-crm:P7_took_place_at ?Place_D .\
-?Death_TS rdfs:label ?Death_Date . \
-?Place_D rdfs:label ?Death_Place } \
-OPTIONAL {?uri crm:P98i_was_born ?Birth . \
-?Birth crm:P4_has_time-span ?Birth_TS; \
-crm:P7_took_place_at ?Place_B . \
-?Birth_TS rdfs:label ?Birth_Date . \
-?Place_B rdfs:label ?Birth_Place } \
-OPTIONAL {?uri crm:P107i_is_current_or_former_member_of ?uriGroup . \
-?uriGroup rdfs:label ?group } \
-} \
-GROUP BY ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation ?qualification ?group "
-
-queryLetters = prefixes + " SELECT DISTINCT ?type ?document_uri ?document_name \
-WHERE {?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
-?ev_send crm:P01_has_domain ?pc ; \
-rdfs:label ?type ; \
-rdfs:subClassOf ?event . \
-?document_uri crm:P25i_moved_by ?event ; \
-rdfs:label ?document_name . \
-}"
-
-queryNetwork = prefixes + " SELECT DISTINCT COUNT(?event) AS ?count ?uri2 SAMPLE(?label2) AS ?text \
-WHERE { \
-{?event rdf:type crm:EL1_Exchange_Letters . \
-?event_to rdfs:subClassOf ?event; \
-rdf:type crm:EL2_Send_Letter ; \
-crm:P01_has_domain ?pc_to . \
-?pc_to crm:P02_has_range ?uri . \
-?uri rdfs:label ?label . \
-?event_from rdfs:subClassOf ?event; \
-rdf:type crm:EL3_Receive_Letter; \
-crm:P01_has_domain ?pc_from . \
-?pc_from crm:P02_has_range ?uri2 . \
-?uri2 rdfs:label ?label2 . \
-FILTER (?uri = <" + thisUrlParams.link + ">) \
-} UNION { \
-?event rdf:type crm:EL1_Exchange_Letters . \
-?event_to rdfs:subClassOf ?event; \
-rdf:type crm:EL3_Receive_Letter ; \
-crm:P01_has_domain ?pc_from . \
-?pc_from crm:P02_has_range ?uri . \
-?uri rdfs:label ?label . \
-?event_from rdfs:subClassOf ?event; \
-rdf:type crm:EL2_Send_Letter; \
-crm:P01_has_domain ?pc_to . \
-?pc_to crm:P02_has_range ?uri2 . \
-?uri2 rdfs:label ?label2 . \
-FILTER (?uri = <" + thisUrlParams.link + ">) \
-} \
-} ORDER BY DESC (?count)"
-
-queryURL = prepareQueryURL(query);
-
-queryNet = prepareQueryURL(queryNetwork);
-
-query = prepareQueryURL(queryInfo);
-
-queryEx = prepareQueryURL(queryLetters);
-
-response = $.ajax({
-
-    url: query,
-    dataType: "json",
-    success: function (data){
-      handle_data(data);
-    },
-    error: function (e) {}
-});
-
-response = $.ajax({
-
-    url: queryURL,
-    dataType: "json",
-    success: function (data){
-    	handle_map(data);
-    },
-    error: function (e) {}
-});
-
-responseNet = $.ajax({
-
-    url: queryNet,
-    dataType: "json",
-    success: function (data){
-      handle_network(data);
-    },
-    error: function (e) {}
-});
-
-responseLet = $.ajax({
-
-    url: queryEx,
-    dataType: "json",
-    success: function (data){
-      handle_Letters(data);
-    },
-    error: function (e) {}
-});
-
-
-
-function handle_data(json) {
-
-  console.log(json['results']['bindings']);
-
-  var graph = "";
-  var label = "";
-
-  if ("givenName" in json.results.bindings) {
-          givenName = value['givenName']['value'];
-          alert(givenName);
-        }
-
-
-  $.each(
-      json['results']['bindings'],
-      function (index, value) {
-        var graph = value['graph']['value'];
-        var label = value['label']['value'];
-        var name = value['name']['value'];
-        var givenName = "";
-        var familyName = "";
-        var gender = "";
-        var patronymic = "";
-        var occupation = "";
-        var relative = "";
-        var identifier = "";
-        var birth_date = "";
-        var birth_place = "";
-        var death_date = "";
-        var death_place = "";
-        var qualification = "";
-        var group = "";
-
-        if (value.hasOwnProperty('givenName')) {
-          $("#givenName").css("display", "flex");
-          givenName = value['givenName']['value'];
-        }
-        if (value.hasOwnProperty('familyName')) {
-          $("#familyName").css("display", "flex");
-          familyName = value['familyName']['value'];
-        }
-        if (value.hasOwnProperty('gender')) {
-          $("#gender").css("display", "flex");
-          gender = value['gender']['value'];
-        }
-        if (value.hasOwnProperty('patronymic')) {
-          $("#patronymic").css("display", "flex");
-          patronymic = value['patronymic']['value'];
-        }
-        if (value.hasOwnProperty('occupation')) {
-          $("#occupation").css("display", "flex");
-          occupation = value['occupation']['value'];
-        }
-        if (value.hasOwnProperty('relatives')) {
-          if (value['relatives']['value'] != "") {
-            $("#relatives").css("display", "flex");
-            relative = value['relatives']['value'];
-          }
-        }
-        if (value.hasOwnProperty('qualification')) {
-          $("#honorific").css("display", "flex");
-          qualification = value['qualification']['value'];
-        }
-        if (value.hasOwnProperty('Birth_Date')) {
-          $("#BirthDate").css("display", "flex");
-          birth_date = value['Birth_Date']['value'];
-        }
-        if (value.hasOwnProperty('Birth_Place')) {
-          $("#BirthPlace").css("display", "flex");
-          birth_place = value['Birth_Place']['value'];
-        }
-        if (value.hasOwnProperty('Death_Date')) {
-          $("#DeathDate").css("display", "flex");
-          death_date = value['Death_Date']['value'];
-        }
-        if (value.hasOwnProperty('Death_Place')) {
-          $("#DeathPlace").css("display", "flex");
-          death_place = value['Death_Place']['value'];
-        }
-        if (value.hasOwnProperty('group')) {
-          $("#groups").css("display", "flex");
-          group = value['group']['value'];
-        }
-
-
-        document.getElementById("grafo").innerHTML = graph;
-        document.getElementById("nome_persona").innerHTML = label;
-        document.getElementById("nome").innerHTML = name;
-        document.getElementById("genere").innerHTML = gender;
-        document.getElementById("nome_proprio").innerHTML = givenName;
-        document.getElementById("nome_famiglia").innerHTML = familyName;
-        document.getElementById("patronimico").innerHTML = patronymic;
-        document.getElementById("avi").innerHTML = relative;
-        document.getElementById("qualifica").innerHTML = qualification;
-        document.getElementById("occupazione").innerHTML = occupation;
-        document.getElementById("data_nascita").innerHTML = birth_date;
-        document.getElementById("data_morte").innerHTML = death_date;
-        document.getElementById("luogo_nascita").innerHTML = birth_place;
-        document.getElementById("luogo_morte").innerHTML = death_place;
-        document.getElementById("gruppi_appartenenza").innerHTML = group;
-
-
-        document.getElementById("nome1").innerHTML = label;
-        document.getElementById("nome2").innerHTML = label;
-        document.getElementById("nome_au").innerHTML = label;
-        document.getElementById("nome_ap").innerHTML = label;
-        document.getElementById("nome_al").innerHTML = label;
-        
-      });
-  
-}
-
-
-function handle_Letters(json) {
-
-  console.log(json);
-
-  const send = {};
-  const receive = {};
-
-  var i=0;
-  var j=0;
-
-  $.each(
-      json['results']['bindings'],
-      function (index, value) {
-        type = value['type']['value'];
-        uri = value['document_uri']['value'];
-        title = value['document_name']['value'];
-        if (type == "Invio") {
-          send[uri] = title;
-          i++;
-        } else {
-          receive[uri] = title;
-          j++;
-        }   
-      });
-
-  var Send_Letters = "";
-  var Receive_Letters = "";
-
-  for (var key in send) {
-    Send_Letters += "<div class='row res'><div class='col-10'>" + send[key] + "</div><div class='col d-flex align-items-start justify-content-end'><a class='btn-icon' target='_blank' href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
-  }
-
-  for (var key in receive) {
-    Receive_Letters += "<div class='row res'><div class='col-10'>" + receive[key] + "</div><div class='col d-flex align-items-start justify-content-end'><a class='btn-icon' target='_blank' href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
-  }
-
-  document.getElementById("l_send").innerHTML = i;
-  document.getElementById("l_receive").innerHTML = j;
-  document.getElementById("letters_send").innerHTML = Send_Letters;
-  document.getElementById("letters_receive").innerHTML = Receive_Letters;
-
-  if (i==0) {
-    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
-    document.getElementById("letters_send").innerHTML = messaggio;
-  }
-
-  if (j==0) {
-    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
-    document.getElementById("letters_receive").innerHTML = messaggio;
-  }
-
-}
-
-
-function handle_map(json) {
-  console.log(json);
-
-  const locations = [];
-  const place_names = [];
-
-  var lat = 0;
-  var long = 0;
-  var i=0;
-  var myPlaces = "";
-
-  $.each(
-      json['results']['bindings'],
-      function (index, value) {
-        const loc = []
-        var uri = value['place']['value'];
-        var label = value['label']['value'];
-        var coord = value['coordinates']['value'];
-        const coordinates = coord.split(", ");
-        loc.push(label);
-        myPlaces += "<div class='item-place-person'><div class='clickPlace item-place-person-label' data-point='"+ coordinates + "'>" + label + "</div><div class='item-place-person-action'><div class='luogo' id='" + 
-    uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div></div>";
-        loc.push(coordinates[0]);
-        lat += parseInt(coordinates[0]);
-        loc.push(coordinates[1]);
-        long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
-        locations.push(loc);
-        i++;
-        
-      });
-
-  var latitude = lat/i;
-  var longitude = long/i;
-
-  document.getElementById("list_places_person").innerHTML = myPlaces;
-
-
-  var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
-        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade, Points &copy 2012 LINZ',
-        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
-        latlng = new L.LatLng(latitude, longitude);
-
-    
-  var map = new L.Map('map', {center: latlng, zoom: 5, layers: [cloudmade]});
-  mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
-
-  var markers = new L.MarkerClusterGroup();
-  var markerList = [];
-
-  var geo = new L.tileLayer(
-    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-      attribution: '&copy; ' + mapLink + ' Contributors',
-      maxZoom: 18,
-    }).addTo(map);
-
-  function populate() {
-    for (var i = 0; i < locations.length; i++) {
-      var a = locations[i];
-      var title = a[0];
-      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
-      marker.bindPopup(title);
-      markers.addLayer(marker);
-      markerList.push(marker);
-    }
-  }
-
-  populate();
-
-  map.addLayer(markers);
-
-  $('.clickPlace').on('click', function(){
-    // parse lat and lng from the divs data attribute
-    var latlng = $(this).data().point.split(',');
-    var lat = latlng[0];
-    var lng = latlng[1];
-    var zoom = 10;
-
-    // set the view
-    map.setView([lat, lng], zoom);
-});
-}
-
-
-
-function handle_network(json) {
-  console.log(json);
-
-  const words = [];
-  const tempArray = [];
-  var listwords = "";
-  var ArrayNames = "";
-
-  var temp = 0;
-  var sum = 0;
-  var i=0;
-  var j=0;
-
-  $.each(
-      json['results']['bindings'],
-      function (index, value) {
-        text = value['text']['value'];
-        link = value['uri2']['value'];
-        num = parseInt(value['count']['value']);
-        /*count = 0;
-        if ((num - temp) > 50) {
-          count = temp + 12;
-        } else {
-          count = num;
-        }
-        words.push([text, count]);
-        temp = count;
-        sum += temp;*/
-        tempArray.push([text, num]);
-        ArrayNames += "<div class='item-place-person'><div class='item-place-person-label'>" +
-        text + "<br /><span class='num_occ'>[Co-occorrenze: " + num + "]</span></div><div class='item-place-person-action'><div><a target='_blank' href='" +
-        link + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona' id='" +
-        link + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div></div>";
-      });
-
-  if (tempArray.length < 8) {
-    for (var k=0; k<tempArray.length; k++) {
-      text = tempArray[k][0];
-      count = tempArray[k][1] + 36;
-      words.push([text, count]);
-    }
-  } else {
-    for (var k=tempArray.length-1; k>=0; k--) {
-      text = tempArray[k][0]; 
-      num = tempArray[k][1];
-      count = 0;
-      if ((num - temp) > 50) {
-          count = temp + 12;
-        } else {
-          count = num;
-        }
-      words.push([text, count]);
-      temp = count;
-      sum += temp;
-      }
-    }
-
-  
-
-  document.getElementById("list_person_network").innerHTML = ArrayNames;
-
-  /*var tot = parseInt(words[0][1]);*/
-
-  for (var i in words) {
-    var text = words[i][0]
-    var count = words[i][1];
-    listwords += '{ "word": \"' + text + '\", "size": \"' + count + '\"},';
-  }
-
-  let listL = ('[' + listwords + ']').replace(',]', ']');
-
-  const links = JSON.parse(listL);
-
-  console.log(links);
-
-  // List of words
-  var myWords = links;
-  
-  // set the dimensions and margins of the graph
-  var margin = {top: 10, right: 10, bottom: 10, left: 10},
-      width = 850 - margin.left - margin.right,
-      height = 500 - margin.top - margin.bottom;
-
-  // append the svg object to the body of the page
-  var svg = d3.select("#myWordCloud").append("svg")
-      .attr("width", width + margin.left + margin.right)
-      .attr("height", height + margin.top + margin.bottom)
-      .append("g")
-        .attr("transform",
-              "translate(" + (width/2-50) + "," + (height/2+20) + ")");
-
-  // Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
-  // Wordcloud features that are different from one word to the other must be here
-  var layout = d3.layout.cloud()
-                        .size([width, height])
-                        .words(myWords.map(function(d) { return {text: d.word, size:d.size/2}; }))
-                        .padding(5)        //space between words
-                        .rotate(function() { return ~~(Math.random() * 2);})
-                        .fontSize(function(d) { return d.size + 6; })      // font size of words
-                        .on("end", draw);
-                        layout.start();
-
-
-  // This function takes the output of 'layout' above and draw the words
-  // Wordcloud features that are THE SAME from one word to the other can be here
-  function draw(words) {
-    var cloud = svg.selectAll("g text")
-                          .data(words, function(d) { return d.text; })
-
-          //Entering words
-          cloud.enter()
-              .append("text")
-              .style("font-family", "Impact")
-              .attr("text-anchor", "middle")
-              .attr('font-size', 1)
-              .text(function(d) { return d.text; });
-
-          //Entering and existing words
-          cloud
-              .transition()
-                  .duration(600)
-                  .style("font-size", function(d) { return d.size + "px"; })
-                  .attr("transform", function(d) {
-                      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
-                  })
-                  .style("fill-opacity", 1);
-
-          //Exiting words
-          cloud.exit()
-              .transition()
-                  .duration(200)
-                  .style('fill-opacity', 1e-6)
-                  .attr('font-size', 1)
-                  .remove();
-    }
-}
-
-$(document).on("click", ".luogo", function (ev) {
-
-    var link = this.id;
-    //alert(nome_autore);
-    //$('#myModal').text("");
-    window.open("Luogo.html?link="+this.id);
-    
-
-  });
-
-$(document).on("click", ".persona", function (ev) {
-
-    var link = this.id;
-    //alert(nome_autore);
-    //$('#myModal').text("");
-    window.open("Persona.html?link="+this.id);
-    
-
-  });
+// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
+thisUrlParams = {};
+window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
+    thisUrlParams[key] = value;
+});
+console.log('URL get params: ', thisUrlParams);
+
+// Funzioni per eseguire le queries
+function prepareQueryURL(query){
+    sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
+    sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
+    return sparqlEndpoint + sparqlUrlParams;
+}
+
+function doJsonQuery(query){
+
+    queryURL = prepareQueryURL(query);
+
+    response = $.ajax({//OGGETTO
+
+        url: queryURL,
+        dataType: "json",
+        success: function (data){},
+        error: function (e) {}
+    });
+
+    return response;
+
+}
+
+// Funzioni per raccattare + stringhificare l'output
+queryStringOutput = "";
+function stringifyResponse(val){
+    resultArray = val['results']['bindings'];
+    out = "";
+    for(i = 0; i < resultArray.length; i++){
+        out = out + JSON.stringify(resultArray[i])
+    }
+    queryStringOutput = (queryStringOutput + out).replace("}{",",");
+}
+
+prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
+PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
+PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
+PREFIX owl: <http://www.w3.org/2002/07/owl#> \
+PREFIX schema: <http://schema.org/> \
+PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
+PREFIX person: <http://www.w3.org/ns/person#>"
+
+query = prefixes + " SELECT DISTINCT ?place ?label ?coordinates \
+WHERE { \
+{?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?event_from crm:P01_has_domain ?pc ; \
+rdf:type crm:EL3_Receive_Letter; \
+crm:P26_moved_to ?place_from . \
+?place_from rdf:type crm:E53_Place ; \
+owl:sameAs ?place . \
+?place rdfs:label ?label ; \
+crm:P168_place_is_defined_by ?coordinates . \
+} UNION { \
+?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?event_from crm:P01_has_domain ?pc ; \
+rdf:type crm:EL2_Send_Letter; \
+crm:P27_moved_from ?place_from . \
+?place_from rdf:type crm:E53_Place ; \
+owl:sameAs ?place . \
+?place rdfs:label ?label ; \
+crm:P168_place_is_defined_by ?coordinates . \
+} \
+}"
+
+queryInfo = prefixes + " SELECT DISTINCT ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation (group_concat(distinct ?relative1 ;separator=', ') as ?relatives) ?qualification ?group \
+WHERE { \
+VALUES ?uri {<" + thisUrlParams.link + ">} \
+GRAPH ?graph {?uri rdfs:label ?label} \
+?uri foaf:name ?name . \
+OPTIONAL {?uri crm:P1_is_identified_by ?id . \
+?id rdfs:label ?identifier } \
+OPTIONAL {?uri foaf:givenName ?givenName} \
+OPTIONAL {?uri foaf:familyName ?familyName} \
+OPTIONAL {?uri foaf:gender ?gender} \
+OPTIONAL {?uri person:patronymicName ?patronymic } \
+OPTIONAL {?uri schema:hasOccupation ?uriOccupation . \
+?uriOccupation rdf:type schema:Occupation; \
+rdfs:label ?occupation } \
+OPTIONAL {?uri schema:honorificPrefix ?qualification} \
+OPTIONAL {?uri schema:relatedTo ?uriRel1 . \
+?uriRel1 rdfs:label ?relative1} \
+OPTIONAL {?uri crm:P100i_died_in ?Death . \
+?Death crm:P4_has_time-span ?Death_TS; \
+crm:P7_took_place_at ?Place_D .\
+?Death_TS rdfs:label ?Death_Date . \
+?Place_D rdfs:label ?Death_Place } \
+OPTIONAL {?uri crm:P98i_was_born ?Birth . \
+?Birth crm:P4_has_time-span ?Birth_TS; \
+crm:P7_took_place_at ?Place_B . \
+?Birth_TS rdfs:label ?Birth_Date . \
+?Place_B rdfs:label ?Birth_Place } \
+OPTIONAL {?uri crm:P107i_is_current_or_former_member_of ?uriGroup . \
+?uriGroup rdfs:label ?group } \
+} \
+GROUP BY ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation ?qualification ?group "
+
+queryLetters = prefixes + " SELECT DISTINCT ?type ?segnatura ?document_uri ?document_name ?time_span ?InfObj \
+WHERE {?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
+?ev_move crm:P01_has_domain ?pc ; \
+rdfs:label ?type ; \
+rdfs:subClassOf ?event . \
+?document_uri crm:P25i_moved_by ?event ; \
+rdfs:label ?document_name . \
+?document_uri crm:P1_is_identified_by ?uriSegnatura . \
+?uriSegnatura crm:P2_has_type 'Segnatura' ; \
+rdfs:label ?segnatura . \
+OPTIONAL {GRAPH <http://dev.restore.ovi.cnr.it:8890/ovi/datini> {?document_uri crm:P128_carries ?InfObj . \
+?InfObj rdf:type crm:E73_Information_Object} }. \
+OPTIONAL {?ev_move crm:P4_has_time-span ?uri_ts . \
+?uri_ts rdfs:label ?time_span . } \
+}"
+
+queryNetwork = prefixes + " SELECT DISTINCT COUNT(?event) AS ?count ?uri2 SAMPLE(?label2) AS ?text \
+WHERE { \
+{?event rdf:type crm:EL1_Exchange_Letters . \
+?event_to rdfs:subClassOf ?event; \
+rdf:type crm:EL2_Send_Letter ; \
+crm:P01_has_domain ?pc_to . \
+?pc_to crm:P02_has_range ?uri . \
+?uri rdfs:label ?label . \
+?event_from rdfs:subClassOf ?event; \
+rdf:type crm:EL3_Receive_Letter; \
+crm:P01_has_domain ?pc_from . \
+?pc_from crm:P02_has_range ?uri2 . \
+?uri2 rdfs:label ?label2 . \
+FILTER (?uri = <" + thisUrlParams.link + ">) \
+} UNION { \
+?event rdf:type crm:EL1_Exchange_Letters . \
+?event_to rdfs:subClassOf ?event; \
+rdf:type crm:EL3_Receive_Letter ; \
+crm:P01_has_domain ?pc_from . \
+?pc_from crm:P02_has_range ?uri . \
+?uri rdfs:label ?label . \
+?event_from rdfs:subClassOf ?event; \
+rdf:type crm:EL2_Send_Letter; \
+crm:P01_has_domain ?pc_to . \
+?pc_to crm:P02_has_range ?uri2 . \
+?uri2 rdfs:label ?label2 . \
+FILTER (?uri = <" + thisUrlParams.link + ">) \
+} \
+} ORDER BY DESC (?count)"
+
+queryURL = prepareQueryURL(query);
+
+queryNet = prepareQueryURL(queryNetwork);
+
+query = prepareQueryURL(queryInfo);
+
+queryEx = prepareQueryURL(queryLetters);
+
+response = $.ajax({
+
+    url: query,
+    dataType: "json",
+    success: function (data){
+      handle_data(data);
+    },
+    error: function (e) {}
+});
+
+response = $.ajax({
+
+    url: queryURL,
+    dataType: "json",
+    success: function (data){
+    	handle_map(data);
+    },
+    error: function (e) {}
+});
+
+responseNet = $.ajax({
+
+    url: queryNet,
+    dataType: "json",
+    success: function (data){
+      handle_network(data);
+    },
+    error: function (e) {}
+});
+
+responseLet = $.ajax({
+
+    url: queryEx,
+    dataType: "json",
+    success: function (data){
+      handle_Letters(data);
+    },
+    error: function (e) {}
+});
+
+
+
+function handle_data(json) {
+
+  console.log(json['results']['bindings']);
+
+  var graph = "";
+  var label = "";
+
+  if ("givenName" in json.results.bindings) {
+          givenName = value['givenName']['value'];
+          alert(givenName);
+        }
+
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        var graph = value['graph']['value'];
+        var label = value['label']['value'];
+        var name = value['name']['value'];
+        var givenName = "";
+        var familyName = "";
+        var gender = "";
+        var patronymic = "";
+        var occupation = "";
+        var relative = "";
+        var identifier = "";
+        var birth_date = "";
+        var birth_place = "";
+        var death_date = "";
+        var death_place = "";
+        var qualification = "";
+        var group = "";
+
+        if (value.hasOwnProperty('givenName')) {
+          $("#givenName").css("display", "flex");
+          givenName = value['givenName']['value'];
+        }
+        if (value.hasOwnProperty('familyName')) {
+          $("#familyName").css("display", "flex");
+          familyName = value['familyName']['value'].toLowerCase();
+          familyName = familyName.charAt(0).toUpperCase() + familyName.slice(1)
+        }
+        if (value.hasOwnProperty('gender')) {
+          $("#gender").css("display", "flex");
+          gender = value['gender']['value'];
+        }
+        if (value.hasOwnProperty('patronymic')) {
+          $("#patronymic").css("display", "flex");
+          patronymic = value['patronymic']['value'];
+        }
+        if (value.hasOwnProperty('occupation')) {
+          $("#occupation").css("display", "flex");
+          occupation = value['occupation']['value'];
+        }
+        if (value.hasOwnProperty('relatives')) {
+          if (value['relatives']['value'] != "") {
+            relative = value['relatives']['value'];
+          }
+        }
+        if (value.hasOwnProperty('qualification')) {
+          $("#honorific").css("display", "flex");
+          qualification = value['qualification']['value'];
+        }
+        if (value.hasOwnProperty('Birth_Date')) {
+          $("#BirthDate").css("display", "flex");
+          birth_date = value['Birth_Date']['value'];
+        }
+        if (value.hasOwnProperty('Birth_Place')) {
+          $("#BirthPlace").css("display", "flex");
+          birth_place = value['Birth_Place']['value'];
+        }
+        if (value.hasOwnProperty('Death_Date')) {
+          $("#DeathDate").css("display", "flex");
+          death_date = value['Death_Date']['value'];
+        }
+        if (value.hasOwnProperty('Death_Place')) {
+          $("#DeathPlace").css("display", "flex");
+          death_place = value['Death_Place']['value'];
+        }
+        if (value.hasOwnProperty('group')) {
+          $("#groups").css("display", "flex");
+          group = value['group']['value'];
+        }
+        
+        var dataset = get_dataset_name(graph);
+        var second_name = patronymic + " " + relative;
+        var first_name = givenName + " " + second_name + " " + familyName;
+
+        document.getElementById("grafo").innerHTML = dataset;
+        document.getElementById("nome_persona").innerHTML = first_name;
+        document.getElementById("nome").innerHTML = name;
+        document.getElementById("genere").innerHTML = gender;
+        document.getElementById("nome_proprio").innerHTML = givenName;
+        document.getElementById("nome_famiglia").innerHTML = familyName;
+        document.getElementById("patronimico").innerHTML = second_name;
+        document.getElementById("qualifica").innerHTML = qualification;
+        document.getElementById("occupazione").innerHTML = occupation;
+        document.getElementById("data_nascita").innerHTML = birth_date;
+        document.getElementById("data_morte").innerHTML = death_date;
+        document.getElementById("luogo_nascita").innerHTML = birth_place;
+        document.getElementById("luogo_morte").innerHTML = death_place;
+        document.getElementById("gruppi_appartenenza").innerHTML = group;
+
+        const collection = document.getElementsByClassName("PN");
+        for (var i=0; i<collection.length; i++) {
+          collection[i].innerHTML = first_name;
+        }
+        
+      });
+  
+}
+
+function get_dataset_name(graph) {
+  var string = "Scheda Onomastica";
+  if (graph == "http://dev.restore.ovi.cnr.it:8890/aspo/onomastica") {
+    string = string + " / Onomastica Datini";
+  } 
+  else if (graph == "http://dev.restore.ovi.cnr.it:8890/mpp/authors"){
+    string = string + " / Artisti";
+  }
+  else {
+    string = string;
+  }
+  return (string);
+}
+
+function handle_Letters(json) {
+
+  console.log(json);
+
+  const send = [];
+  const receive = [];
+
+  var i=0;
+  var j=0;
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        type = value['type']['value'];
+        uri = value['document_uri']['value'];
+        title = value['document_name']['value'];
+        segnatura = value['segnatura']['value'];
+        var data = "";
+        var InfObj = "";
+        if (value.hasOwnProperty('time_span')) {
+            data = value['time_span']['value'];
+        }
+        if (value.hasOwnProperty('InfObj')) {
+            InfObj = value['InfObj']['value'];
+        }
+        if (type == "Invio") {
+          send.push([uri, title, segnatura, data, InfObj]);
+          i++;
+        } else {
+          receive.push([uri, title, segnatura, data, InfObj]);
+          j++;
+        }    
+      });
+
+  var Send_Letters = "";
+  var Receive_Letters = "";
+
+  //POPULATE SEND LETTERS BOX
+
+  for (var i=0; i<send.length; i++) {
+    var letter = '<a href=' + send[i][0] + ' target="_blank">' + send[i][1] + '</a>';
+    var infObject_button = "";
+    if (send[i][2] != "") {
+      letter = letter + "<br />Segnatura: " + send[i][2];
+    }
+    if (send[i][3] != "") {
+      letter = letter + "<br />Data invio: " + send[i][3];
+    }
+
+    if (send[i][4] != "") {
+          infObject_button  += '<button type="button" id="' + send[i][4] + 
+          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Scheda Lettera</p></button>';
+    } else {
+          infObject_button  += '<button type="button" id="' + send[i][0] + 
+          '" class="object btn btn-default" alt="oggetto" title="' + send[i][1] + 
+          '"><i class="fa fa-book"></i><p class="btn-text">Scheda Oggetto</p></button>';
+    }
+
+    Send_Letters += '<div class="row res"><div class="col-8"><p>'+ letter +'</p></div>' + 
+        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
+        '<button type="button" id="' + send[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+        '<button type="button" id="' + send[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+        '<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + send[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
+
+  }
+
+  //POPULATE RECEIVE LETTERS BOX
+
+  for (var i=0; i<receive.length; i++) {
+    var letter = '<a href=' + receive[i][0] + ' target="_blank">' + receive[i][1] + '</a>';
+    var infObject_button = "";
+    if (receive[i][2] != "") {
+      letter = letter + "<br />Segnatura: " + receive[i][2];
+    }
+    if (receive[i][3] != "") {
+      letter = letter + "<br />Data ricezione: " + receive[i][3];
+    }
+
+    if (receive[i][4] != "") {
+          infObject_button  += '<button type="button" id="' + receive[i][4] + 
+          '" class="lettera btn btn-default" alt="lettera" ><i class="fa fa-envelope"></i><p class="btn-text">Scheda Lettera</p></button>';
+    } else {
+          infObject_button  += '<button type="button" id="' + receive[i][0] + 
+          '" class="object btn btn-default" alt="oggetto" title="' + receive[i][1] + 
+          '"><i class="fa fa-book"></i><p class="btn-text">Scheda Oggetto</p></button>';
+    }
+
+    Receive_Letters += '<div class="row res"><div class="col-8"><p>'+ letter +'</p></div>' + 
+        '<div class="col d-flex align-items-start justify-content-end">' + infObject_button +
+        '<button type="button" id="' + receive[i][0] + '" class="cit btn btn-default" alt="scheda" title="Info"><i class="fa fa-quote-right"></i><p class="btn-text">Citazione</p></button>' +
+        '<button type="button" id="' + receive[i][0] + '" class="hyp btn btn-default" alt="scheda" title="Info"><i class="fa fa-link"></i><p class="btn-text">Hyperlink</p></button>' +
+        '<a href="http://dev.restore.ovi.cnr.it/lodlive/?' + receive[i][0] + '" target="_blank"><button type="button" class="btn btn-default info" alt="LOD"><i class="fa fa-share-alt"></i><p class="btn-text">Lod</p></button></a></div></div>';
+  }
+
+  document.getElementById("l_send").innerHTML = send.length;
+  document.getElementById("l_receive").innerHTML = receive.length;
+  document.getElementById("letters_send").innerHTML = Send_Letters;
+  document.getElementById("letters_receive").innerHTML = Receive_Letters;
+
+  if (i==0) {
+    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
+    document.getElementById("letters_send").innerHTML = messaggio;
+  }
+
+  if (j==0) {
+    var messaggio = "<p class='no-results'>Nessun risultato trovato</p>";
+    document.getElementById("letters_receive").innerHTML = messaggio;
+  }
+
+}
+
+
+function handle_map(json) {
+  console.log(json);
+
+  const locations = [];
+  const place_names = [];
+
+  var lat = 0;
+  var long = 0;
+  var i=0;
+  var myPlaces = "";
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        const loc = []
+        var uri = value['place']['value'];
+        var label = value['label']['value'];
+        var coord = value['coordinates']['value'];
+        const coordinates = coord.split(", ");
+        loc.push(label);
+        myPlaces += "<div class='item-place-person'><div class='clickPlace item-place-person-label' data-point='"+ coordinates + "'>" + label + "</div><div class='item-place-person-action'><div class='luogo' id='" + 
+    uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div></div>";
+        loc.push(coordinates[0]);
+        lat += parseInt(coordinates[0]);
+        loc.push(coordinates[1]);
+        long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
+        locations.push(loc);
+        i++;
+        
+      });
+
+  var latitude = lat/i;
+  var longitude = long/i;
+
+  document.getElementById("list_places_person").innerHTML = myPlaces;
+
+
+  var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
+        cloudmadeAttribution = 'Map data &copy; 2011 OpenStreetMap contributors, Imagery &copy; 2011 CloudMade, Points &copy 2012 LINZ',
+        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
+        latlng = new L.LatLng(latitude, longitude);
+
+    
+  var map = new L.Map('map', {center: latlng, zoom: 5, layers: [cloudmade]});
+  mapLink = '<a href="https://openstreetmap.org">OpenStreetMap</a>';
+
+  var markers = new L.MarkerClusterGroup();
+  var markerList = [];
+
+  var geo = new L.tileLayer(
+    'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      attribution: '&copy; ' + mapLink + ' Contributors',
+      maxZoom: 18,
+    }).addTo(map);
+
+  function populate() {
+    for (var i = 0; i < locations.length; i++) {
+      var a = locations[i];
+      var title = a[0];
+      var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
+      marker.bindPopup(title);
+      markers.addLayer(marker);
+      markerList.push(marker);
+    }
+  }
+
+  populate();
+
+  map.addLayer(markers);
+
+  $('.clickPlace').on('click', function(){
+    // parse lat and lng from the divs data attribute
+    var latlng = $(this).data().point.split(',');
+    var lat = latlng[0];
+    var lng = latlng[1];
+    var zoom = 10;
+
+    // set the view
+    map.setView([lat, lng], zoom);
+});
+}
+
+
+
+function handle_network(json) {
+  console.log(json);
+
+  const words = [];
+  const tempArray = [];
+  var listwords = "";
+  var ArrayNames = "";
+
+  var temp = 0;
+  var sum = 0;
+  var i=0;
+  var j=0;
+
+  $.each(
+      json['results']['bindings'],
+      function (index, value) {
+        text = value['text']['value'];
+        link = value['uri2']['value'];
+        num = parseInt(value['count']['value']);
+        /*count = 0;
+        if ((num - temp) > 50) {
+          count = temp + 12;
+        } else {
+          count = num;
+        }
+        words.push([text, count]);
+        temp = count;
+        sum += temp;*/
+        tempArray.push([text, num]);
+        ArrayNames += "<div class='item-place-person'><div class='item-place-person-label'>" +
+        text + "<br /><span class='num_occ'>[Co-occorrenze: " + num + "]</span></div><div class='item-place-person-action'><div><a target='_blank' href='" +
+        link + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona' id='" +
+        link + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div></div>";
+      });
+
+  if (tempArray.length < 8) {
+    for (var k=0; k<tempArray.length; k++) {
+      text = tempArray[k][0];
+      count = tempArray[k][1] + 36;
+      words.push([text, count]);
+    }
+  } else {
+    for (var k=tempArray.length-1; k>=0; k--) {
+      text = tempArray[k][0]; 
+      num = tempArray[k][1];
+      count = 0;
+      if ((num - temp) > 50) {
+          count = temp + 12;
+        } else {
+          count = num;
+        }
+      words.push([text, count]);
+      temp = count;
+      sum += temp;
+      }
+    }
+
+  
+
+  document.getElementById("list_person_network").innerHTML = ArrayNames;
+
+  /*var tot = parseInt(words[0][1]);*/
+
+  for (var i in words) {
+    var text = words[i][0]
+    var count = words[i][1];
+    listwords += '{ "word": \"' + text + '\", "size": \"' + count + '\"},';
+  }
+
+  let listL = ('[' + listwords + ']').replace(',]', ']');
+
+  const links = JSON.parse(listL);
+
+  console.log(links);
+
+  // List of words
+  var myWords = links;
+  
+  // set the dimensions and margins of the graph
+  var margin = {top: 10, right: 10, bottom: 10, left: 10},
+      width = 850 - margin.left - margin.right,
+      height = 500 - margin.top - margin.bottom;
+
+  // append the svg object to the body of the page
+  var svg = d3.select("#myWordCloud").append("svg")
+      .attr("width", width + margin.left + margin.right)
+      .attr("height", height + margin.top + margin.bottom)
+      .append("g")
+        .attr("transform",
+              "translate(" + (width/2-50) + "," + (height/2+20) + ")");
+
+  // Constructs a new cloud layout instance. It run an algorithm to find the position of words that suits your requirements
+  // Wordcloud features that are different from one word to the other must be here
+  var layout = d3.layout.cloud()
+                        .size([width, height])
+                        .words(myWords.map(function(d) { return {text: d.word, size:d.size/2}; }))
+                        .padding(5)        //space between words
+                        .rotate(function() { return ~~(Math.random() * 2);})
+                        .fontSize(function(d) { return d.size + 6; })      // font size of words
+                        .on("end", draw);
+                        layout.start();
+
+
+  // This function takes the output of 'layout' above and draw the words
+  // Wordcloud features that are THE SAME from one word to the other can be here
+  function draw(words) {
+    var cloud = svg.selectAll("g text")
+                          .data(words, function(d) { return d.text; })
+
+          //Entering words
+          cloud.enter()
+              .append("text")
+              .style("font-family", "Impact")
+              .attr("text-anchor", "middle")
+              .attr('font-size', 1)
+              .text(function(d) { return d.text; });
+
+          //Entering and existing words
+          cloud
+              .transition()
+                  .duration(600)
+                  .style("font-size", function(d) { return d.size + "px"; })
+                  .attr("transform", function(d) {
+                      return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
+                  })
+                  .style("fill-opacity", 1);
+
+          //Exiting words
+          cloud.exit()
+              .transition()
+                  .duration(200)
+                  .style('fill-opacity', 1e-6)
+                  .attr('font-size', 1)
+                  .remove();
+    }
+}
+
+$(document).on("click", ".luogo", function (ev) {
+
+    var link = this.id;
+    //alert(nome_autore);
+    //$('#myModal').text("");
+    window.open("Luogo.html?link="+this.id);
+    
+
+  });
+
+$(document).on("click", ".persona", function (ev) {
+
+    var link = this.id;
+    //alert(nome_autore);
+    //$('#myModal').text("");
+    window.open("Persona.html?link="+this.id);
+    
+
+  });
+
+$(document).on("click", ".lettera", function (ev) {
+
+  var link = this.id;
+  //alert(nome_autore);
+  //$('#myModal').text("");
+  window.open("lettera.html?link="+this.id);
+  
+
+});
+
+$(document).on("click", ".object", function (ev) {
+
+  var link = this.id;
+  //alert(nome_autore);
+  //$('#myModal').text("");
+  window.open("object.html?link="+this.id);
+  
+
+});
+
+$(document).on("click", ".hyp", function (ev) {
+
+  var link = this.id;
+  $("#myModal").empty();
+  $("#myModal").css("display", "block");
+  $('#myModal').append("<div class='modal-content'><span class='close'>&times;</span><div id='myInput'>" +
+    link + "</div><button id='copy_btn' class='btn btn-theme-primary btn-md' onclick='myFunction()'>Copia</button>");
+
+  
+
+});
+
+$(document).on("click", ".close", function (ev) {
+
+  var link = this.id;
+  //alert(nome_autore);
+  //$('#myModal').text("");
+  $("#myModal").css("display", "none");
+
+});
+
+
+$(document).on("click", ".back", function (ev) {
+
+  $("#myTab").css("display", "none");
+
+});
+
+
+$(document).on("click", ".cit", function (ev) {
+  
+  var author ="RESTORE. smart access to digital heritage and memory"
+
+  var year = new Date().getFullYear()
+
+  var today = new Date();
+  var dd = String(today.getDate()).padStart(2, '0');
+  var mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
+  var yyyy = today.getFullYear();
+
+  today = dd + '/' + mm + '/' + yyyy;
+
+  var link = this.id;
+  //alert(nome_autore);
+  //$('#myModal').text("");
+  $("#myModal").empty();
+  $("#myModal").css("display", "block");
+  $('#myModal').append("<div class='modal-content'><span class='close'>&times;</span><div id='myInput'>" + 
+    author + " " + year + ", accesso effettuato: " + today + ", &lt;" + link + "&gt;</div><button id='copy_btn' class='btn btn-theme-primary btn-md' onclick='myFunction()'>Copia</button>");
+
+});
+
+
+function copyToClipboard(text) {
+    var sampleTextarea = document.createElement("textarea");
+    document.body.appendChild(sampleTextarea);
+    sampleTextarea.value = text; //save main text in it
+    sampleTextarea.select(); //select textarea contenrs
+    document.execCommand("copy");
+    document.body.removeChild(sampleTextarea);
+}
+
+function myFunction(){
+    var copy = document.getElementById("myInput");
+    copyText = copy.textContent;
+    copyToClipboard(copyText);
+
+    //copyToClipboard(copyText.value);
+}