file form modal popup jstree

instead of having an instance of jstree for each file form, we can share
the instance in a popup window.

This is a step towards #2208

See #3044

browser/css/vidjil.less

@@ -1044,6 +1044,14 @@ a.tag-link {
     height: -webkit-calc(~"100%" - 215px);
     height: calc(~"100%" - 215px);
   }
+
+  &.jstree-container {
+    padding-top: 30px;
+    top: 10%;
+    left: 25%;
+    width: 50%;
+    height: 70%;
+  }
 }
 
 .data-msg, .info-msg{
@@ -2207,9 +2215,15 @@ label.highlight_label {
     white-space: pre-line;
 }
 
-#jstree {
-    max-height: 300px;
+.jstree {
+    height: 90%;
+    width: 100%;
     overflow-y: auto;
+    overflow-x: auto;
+}
+
+.jstree_button {
+    float: right;
 }
 
 .jstree-anchor {

browser/js/database.js

@@ -621,15 +621,31 @@ Database.prototype = {
                 },
             }
         });
-        var index = elem.data('index');
         elem.on('select_node.jstree', function(event, data){
-            $('#file_filename_' + index).val(data.selected);
+            $('#file_filename').val(data.selected);
             var split_file = data.selected.toString().split('/');
             var file = split_file[split_file.length - 1];
-            $('#file_indicator_' + index).text(file);
+            $('#file_indicator').text(file);
         });
     },
 
+    display_jstree: function(caller_index) {
+        $("#jstree_button").data("index", caller_index);
+        $("#jstree_container").show();
+        $('#file_indicator_' + caller_index).text("");
+        $('#file_filename_' + caller_index).val("");
+    },
+
+    close_jstree: function() {
+        $("#jstree_container").hide();
+    },
+
+    select_jstree: function(caller_index) {
+        $('#file_indicator_' + caller_index).text($('#file_indicator').text());
+        $('#file_filename_' + caller_index).val($('#file_filename').val());
+        $("#jstree_container").hide();
+    },
+
     toggle_upload_fields: function() {
         var elem = $('.upload_field');
         var disable = !elem.prop('disabled');

browser/js/form_builder.js

@@ -361,23 +361,17 @@ FileFormBuilder.prototype.build_jstree = function() {
     if (!this.source) {
         d.hidden = true;
     }
+    d.onclick = function() {
+        db.display_jstree(self.index);
+    }
 
-    var sel = document.createTextNode('selected:');
+    var sel = document.createElement('span');
+    sel.className = "form_label";
+    sel.appendChild(document.createTextNode(('selected:')));
     d.appendChild(sel);
     var indicator = document.createElement('span');
     indicator.id = "file_indicator_" + self.index;
     d.appendChild(indicator);
-    var tree_par = document.createElement('div');
-    tree_par.id = "jstree_loader_" + self.index;
-    tree_par.className = "jstree";
-    tree_par.onload = function() {db.set_jstree($('#jstree_' + self.index), self.index)};
-    tree_par.appendChild(document.createTextNode('file'));
-    d.appendChild(tree_par);
-    var tree = document.createElement('div');
-    tree.id = 'jstree_' + this.index;
-    tree.className = "inline";
-    tree.dataset.index = this.index;
-    tree_par.appendChild(tree);
     return d;
 }
 

server/web2py/applications/vidjil/views/file/form.html

@@ -69,4 +69,25 @@
     <div class="clear"></div>
     <input type="submit" value="Soumettre" class="btn">
 </form>
+
+<div id="jstree_container" class="modal jstree-container">
+    <span class="closeButton"
+        onclick="db.close_jstree()">
+        <i class="icon-cancel"></i>
+    </span>
+    <input type="hidden" id="file_filename" />
+    <span>file:</span>
+    <span id="file_indicator"></span>
+    <div class="jstree" id="jstree_loader"
+        {{if not source_module_active:}}
+            hidden
+        {{else:}}
+            onload="db.set_jstree($('#jstree'))"
+        {{pass}}>
+        <div id="jstree"></div>
+    </div>
+    <span id="jstree_button" class="jstree_button button2" data-index=0 onclick="db.select_jstree($(this).data('index'))">ok</span>
+    <span id="jstree_close" class="jstree_button button2" onclick="db.close_jstree()">cancel</span>
+</div>
+
 <div class="clear"></div>

server/web2py/applications/vidjil/views/partial/file/form.html

@@ -77,18 +77,12 @@
                 title="(.fa, .fastq, .fa.gz, .fastq.gz, .clntab)"
             >
         </div>
-        <div class="jstree_container" {{if not source_module_active:}} hidden {{pass}}>
-            selected:
+        <div id="jstree_field_{{=i}}"
+            {{if not source_module_active:}} style="display: none;" {{pass}}
+            data-index={{=i}}
+            onclick="db.display_jstree(this.dataset.index)">
+            <span class="form_label">selected:</span>
             <span id="file_indicator_{{=i}}"></span>
-            <div class="jstree" id="jstree_loader_{{=i}}"
-                {{if not source_module_active:}}
-                    hidden
-                {{else:}}
-                    onload="db.set_jstree($('#jstree_{{=i}}'), {{=i}})"
-                {{pass}}>
-                file
-                <div id="jstree_{{=i}}"  class="inline" data-index="{{=i}}"></div>
-            </div>
         </div>
     </div>
 </div>