[FEAT] graph renaming from graph view

static/lib/gargantext/graph_renamer.js

+var coocId = null ;
+var coocName = null ;
+
+var graphNameBox = document.getElementById("graph-name")
+var changeNameText = 'type name here'
+
+// initial tests
+var coocIdMatch = window.location.search.match(/cooc_id=(\d+)/)
+
+if (! coocIdMatch) {
+  console.error("could not find cooc_id in url (this graph is not saved in DB yet): can't show the rename input")
+  $('#graph-rename').remove()
+}
+else {
+  // we got a real COOCCURRENCES node
+  coocId = parseInt(coocIdMatch.pop())
+
+  // check if has a name already
+  garganrest.nodes.get(coocId, testName)
+}
+
+
+// HELPER FUNCTIONS
+// ----------------
+function testName(jsonNode) {
+  var aName = jsonNode.name
+  // names like "GRAPH EXPLORER COOC (in:4885)" are default so counted as null
+  if (! aName || aName.match(/^GRAPH EXPLORER COOC/)) {
+    // there's no real name => leave the page editable
+    coocName = null
+  }
+  else {
+    // we got a real name => just fill it in the page
+    coocName = aName
+    showName(coocName, graphNameBox)
+  }
+  console.warn('coocName for this graph:', coocName)
+}
+
+function makeEditable(textElement, callback) {
+    var newInput  = '<input id="graphname-edit" type="text"'
+      newInput +=   ' value="'+changeNameText+'"';
+      newInput +=   ' onfocus="return cleanInput(this)"';
+      newInput +=   ' onblur="return refillInput(this)"';
+      newInput +=   ' onkeypress="return checkEnterKey(event,submitName,this)"';
+      newInput += '></input>';
+
+    textElement.innerHTML = newInput
+}
+function cleanInput(inputElement) {
+  if (inputElement.value == changeNameText) {inputElement.value = ''}
+}
+function refillInput(inputElement) {
+  if (inputElement.value == '') {inputElement.value = changeNameText}
+}
+// binding for the input submitting
+function checkEnterKey(e, callback, element) {
+  if(e.which == 13) { callback(element) }
+}
+
+function submitName(inputElement) {
+  console.warn ("renaming: using coocId =", coocId)
+
+  var newName = inputElement.value
+
+  // the element where we'll show the response
+  var messagePopBox = document.getElementById("handmade-popover")
+  var messagePopTxt = document.getElementById("handmade-popover-content")
+
+  messagePopBox.classList.remove("hide")
+  messagePopTxt.innerHTML = "Submitting..."
+
+  var myData = new FormData();
+  myData.append("name", newName)
+
+  console.log("myData.get('name')",myData.get('name'))
+  $.ajax({
+      url: '/api/nodes/' + coocId ,
+      type: 'POST',
+      contentType: false,
+      processData: false,
+      data: myData,
+      beforeSend: function(xhr) {
+        xhr.setRequestHeader("X-CSRFToken", getCookie("csrftoken"));
+      },
+      success: function(result) {
+        messagePopTxt.innerHTML  = '<h5 style="margin:.3em 0 0 0">OK saved !</h5>'
+        showName(newName, graphNameBox)
+        setTimeout(function(){messagePopBox.classList += ' hide'}, 2000);
+      },
+      error: function(result) {
+        messagePopTxt.innerHTML  = '<span style="color:red">Error:</span>'
+        messagePopTxt.innerHTML += '<i>'+result.statusText+'</i>'
+        if (result.status == 409) {
+          messagePopTxt.innerHTML += '<br/>(name is already taken!)'
+        }
+        setTimeout(function(){messagePopBox.classList += ' hide'}, 2000);      }
+  });
+}
+
+function showName(nameStr, target) {
+  target.innerHTML = '"'+nameStr+'"'
+}

static/lib/gargantext/menu.css

@@ -29,3 +29,25 @@
     /* glyphicons are always rendered too high within bootstrap buttons */
     vertical-align:middle
 }
+
+
+/* graph name => editable input => submitName() => minimsg */
+.editable {
+    color: grey ;
+}
+
+#graphname-edit {
+    color: white;
+    background-color: transparent;
+    border: none;
+    max-width: 8em;
+}
+
+.minimsg {
+  font-size: .7em ;
+  padding: 7p0x 9px;
+}
+
+.minimsg * {
+  line-height: 100%;
+}

templates/pages/corpora/myGraphs.html

@@ -26,13 +26,14 @@
 
                     <div class="col-md-5 content">
                         <li>
+                            <h5>{{cooc.name}}</h5>
                             {{cooc.date}}
                             {% for key, value in coocs_count.items %}
                                 {% if key == cooc.id %}
                                     {% if value > 0 %}
 
                                     <ul>
-                                    <!-- <li>{{cooc.id}}</li> --!>
+                                    <!-- <li>{{cooc.id}}</li> -->
                                         <li>From: {% if not  cooc.hyperdata.start  %} begin of corpus {% else %} {{cooc.hyperdata.start}} {% endif %}
                                             , To:   {% if not  cooc.hyperdata.end    %} end   of corpus {% else %} {{cooc.hyperdata.end}}   {% endif %}
                                         </li>

templates/pages/menu.html

@@ -5,8 +5,10 @@
         <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"%}"/>
+
         {% block css %}
         {% endblock %}
+
     </head>
 
     <body>
@@ -45,8 +47,26 @@
                             </a>
                         </li>
                         {% endif %}
-                    </ul>
 
+                        {% if view == "graph" %}
+                        <li id="graph-rename" style="padding:15">
+                          <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
+                          <span id="graph-name" class="editable" ondblclick="makeEditable(this)">
+                            Name your graph
+                          </span>
+                        </li>
+                        <li style="padding:15">
+                          <button class="hide" onclick="submitName(this)"></button>
+                          <!-- £TODO put styles in a separate css file -->
+                          <div id="handmade-popover" class="hide popover right" style="height: 42px; top:4px; min-width:100px; width:135px; display:block">
+                            <div class="arrow"></div>
+                            <div id="handmade-popover-content" class="minimsg popover-content">
+                                Submitting...
+                            </div>
+                          </div>
+                        </li>
+                        {% endif %}
+                    </ul>
                     <ul class="nav pull-right">
                         <li class="dropdown">
                             <a href="#" role="button" class="dropdown-toggle navbar-text" data-toggle="dropdown" title="That is your username">
@@ -104,7 +124,7 @@
                                     <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                                 </a>
                         </li>
-                        --!>
+                        -->
 
                         {% for state in corpus.hyperdata.statuses %}
                             {% if state.action == "Workflow" %}
@@ -298,6 +318,7 @@
         <script type="text/javascript" src="{% static "lib/bootstrap/3.2.0/bootstrap.min.js" %}"></script>
 
         <script type="text/javascript">
+            // initializes the popover elements with jquery
             $(function () { $("[data-toggle='popover']").popover({
                 html: true,
                 title: function() {
@@ -346,8 +367,15 @@
 
 
 
+        {% if view == "graph" %}
+        <!-- garganrest could be used here to update node's names if we add POST -->
+        <script type="text/javascript" src="{% static "lib/gargantext/garganrest.js" %}"></script>
+        <!-- Graph renaming (load after garganrest)-->
+        <script type="text/javascript" src="{% static "lib/gargantext/graph_renamer.js" %}"></script>
+        {% endif %}
 
         {% if debug == False %}
+
         <!-- Piwik -->
         <script type="text/javascript">
             var _paq = _paq || [];