Nouveau

client/css/index.css

@@ -1,6 +1,7 @@
 body {
 }
 
+
 input {
   color: black;
   padding-bottom: 0px;
@@ -13,6 +14,10 @@ textarea {
   margin-bottom: 0px;
 }
 
+.root_div{
+    margin: 25px;
+}
+
 h4{
   padding-left: 0 !important;
 }
@@ -79,3 +84,31 @@ margin-top: 0px;
 .noBorder{
   border: none;
 }
+
+/*.input-field label {
+     color: #000;
+   }
+   /* label focus color *//*
+   .input-field input[type=text]:focus + label {
+     color: #000;
+   }
+   /* label underline focus color *//*
+   .input-field input[type=file]:focus {
+     border-bottom: 1px solid #000;
+     box-shadow: 0 1px 0 0 #000;
+   }
+   /* valid color *//*
+   .input-field input[type=file].valid {
+     border-bottom: 1px solid #000;
+     box-shadow: 0 1px 0 0 #000;
+   }
+   /* invalid color *//*
+   .input-field input[type=file].invalid {
+     border-bottom: 1px solid #000;
+     box-shadow: 0 1px 0 0 #000;
+   }
+   /* icon prefix focus color *//*
+   .input-field .prefix.active {
+     color: #000;
+   }
+   */

client/index.html

@@ -20,7 +20,7 @@
 
 
       <div id="menu">
-        <div class="container main-menu" id="menu1">
+        <div class="container root_div" id="menu1">
           <a class="waves-effect waves-light btn" onclick="onTest()">Test</a>
           <div class="row" id="root">
 
@@ -38,6 +38,7 @@
       <script type="text/javascript" src="js/ui.js"></script>
       <script type="text/javascript" src="js/ui_basic.js"></script>
       <script type="text/javascript" src="js/ui_areapicker.js"></script>
+      <script type="text/javascript" src="js/ui_filepicker.js"></script>
       <script type="text/javascript" src="js/simple_list.js"></script>
       <script type="text/javascript" src="js/ui_selector.js"></script>
       <script type="text/javascript" src="js/ui_root.js"></script>

client/js/jq.js

@@ -1,12 +1,16 @@
 var _textarea_class = "materialize-textarea "
 var _input_class = "validate "
-var _button_class = "waves-effect waves-light btn ";
+var _button_class = "input-field btn ";
 var _icon_class = "material-icons "
 var _row_class = "row "
 var _subcat_class = "subCat col s12 ";
 var _areapicker_class = "areaPicker "
-var _switch_class = "switch "
+var _switch_class = "input-field switch "+_col_class()
 var _lever_class = "lever "
+var _file_input_class = "file-field input-field "
+var _file_path_wrapper_class = "file-path-wrapper "
+var _file_path_class = "file-path-wrapper "
+var _inline_fields = "input-field "+_col_class()
 function mergeCalss(obj={}, classes="", id=undefined)
 {
   obj.id=id;
@@ -16,6 +20,11 @@ function mergeCalss(obj={}, classes="", id=undefined)
 }
 var mc = mergeCalss;
 
+function setDef(obj, field, value)
+{
+    if(obj[field]==undefined) obj[field]=value;
+}
+
 function  _col_class(size, offset)
 {
   var out = "col "
@@ -56,17 +65,10 @@ class HTMLBuilder {
       }
   }
 
-  static elem(elem, prop)
-  {
-    var o = $('<'+elem+'></'+elem+'>')
-    this.setAttr(o, prop)
-    return o;
-  }
-
-
-  static div(obj={}, son=undefined)
+  static elem(elem, prop, son=undefined)
   {
-    var d = this.elem('div', obj);;
+    var d = $('<'+elem+'></'+elem+'>')
+    this.setAttr(d, prop)
     if(son)
     {
       if(son instanceof String) d.html(son);
@@ -77,16 +79,15 @@ class HTMLBuilder {
   }
 
 
-  static span(obj={}, son=undefined)
+  static div(obj={}, son=undefined)
   {
-    var d = this.elem('span', obj);;
-    if(son)
-    {
-      if(son instanceof String) d.html(son);
-      else d.append(son);
-    }
+    return this.elem('div', obj, son);
+  }
 
-    return d;
+
+  static span(obj={}, son=undefined)
+  {
+    return this.elem('span', obj, son);
   }
 
 
@@ -254,7 +255,7 @@ class HTMLBuilder {
   */
   static switch(data={}, prop={}, iprop={})
   {
-    var div = HTMLBuilder.div(mc(prop, _switch_class));
+    var div = HTMLBuilder.div(mc(prop, _switch_class+_col_class(2)));
     //div.append(HTMLBuilder.br());
     var lbl = HTMLBuilder.elem('label');
     div.append(lbl);
@@ -278,4 +279,62 @@ class HTMLBuilder {
     lbl.append(HTMLBuilder.span({}, data.label));
     return p;
   }
+
+  static p(text, prop={})
+  {
+      return this.elem('p', prop, text);
+  }
+
+  /*
+   * data {
+            id,
+            btnLabel,
+            placeholder
+        }
+    props:{
+        form:
+        fileDiv:
+    }
+   *
+   */
+  static file(data={}, props={})
+  {
+      /*<form action="#">
+        <div class="file-field input-field">
+          <div class="btn">
+            <span>File</span>
+            <input type="file">
+          </div>
+          <div class="file-path-wrapper">
+            <input class="file-path validate" type="text">
+          </div>
+        </div>
+      </form>*/
+      setDef(data, "btnLabel", "Ouvrir")
+      setDef(props, "form", {})
+      setDef(props, "btnDiv", {})
+      var form = HTMLBuilder.elem('form', props.form);
+        var wrapperDiv= HTMLBuilder.div({class: _row_class+_inline_fields});
+
+            if(data.placeholder)
+            {
+                wrapperDiv.append(HTMLBuilder.div({class:_col_class()+_inline_fields},
+                 HTMLBuilder.p(data.placeholder)));
+            }
+            var fileDiv = HTMLBuilder.div(mc(props.fileDiv, _file_input_class+_col_class()))
+                var btnDiv= HTMLBuilder.div({class: "btn "});
+                    btnDiv.append(HTMLBuilder.span({}, data.btnLabel));
+                    btnDiv.append(HTMLBuilder.input('file', {id: data.id+"_f"}));
+                fileDiv.append(btnDiv);
+
+                var textDiv = HTMLBuilder.div({class: _file_path_wrapper_class});
+                    textDiv.append(HTMLBuilder.input('text',
+                                    {id: data.id+"_fp", class: _file_path_class})
+                                );
+                fileDiv.append(textDiv);
+            wrapperDiv.append(fileDiv);
+            wrapperDiv.append(HTMLBuilder.iconButton('cloud_upload', {class: _col_class()+_inline_fields}));
+        form.append(wrapperDiv);
+    return form;
+  }
 }

client/js/ui.js

@@ -2,7 +2,8 @@ function doFac(r, f, classes)
 {
   if(f.facultative)
   {
-    r.append(HTMLBuilder.switch({id: f.id+"_elem_cb", on:"<br>on", off:"off"},{},
+    r.append(HTMLBuilder.switch({id: f.id+"_elem_cb", on:"on", off:"off"},
+                                {class: _inline_fields+_col_class(2)},
                                 { onclick: 'toggleEnable(\''+f.id+'_elem\')'}));
     /*var sw = r.append('<div class="switch col '+((classes)?classes:"")+'" ><br><label>\
               <input type="checkbox"  id="'+f.id+'_elem_cb" onclick="toggleEnable(\''+f.id+'_elem\')"> \

client/js/ui_basic.js

@@ -119,7 +119,8 @@ class UISwitch extends UIElement
             on: this.on,
             off: this.off
     };
-    if(this.placeholder) r.append(HTMLBuilder.div({class: _col_class()}, this.placeholder));
+    if(this.placeholder) r.append(HTMLBuilder.div({class: _inline_fields+_col_class()}, 
+                HTMLBuilder.p(this.placeholder)));
     r.append(HTMLBuilder.switch(data, {inline: ""}, {inline: ""}));
 
     this.root.append(r);

client/js/ui_filepicker.js

@@ -0,0 +1,16 @@
+class UIFilePicker extends UIElement {
+  init()
+  {
+      var size=(this.size)?this.size:12;
+      var r = HTMLBuilder.rootElemDiv(size);
+      var nsize=12;
+      if(this.facultative) nsize-=2;
+      var x = HTMLBuilder.file({ id: this.elemId, placeholder: this.placeholder });
+      r.append(x);
+      doFac(r,this);
+
+      this.root.append(r);
+  }
+}
+
+registerUiClass("file", UIFilePicker);

client/res/input.json

@@ -1,7 +1,11 @@
 {
   "title" : "Ressource",
   "name" : "Un test",
-  "fields" : [
+  "fields" : [{
+      "name" : "monFichier",
+      "type" : "file",
+      "placeholder" : "Le fichier"
+    },
     {
       "name": "activer",
       "type": "switch",