ProjetMJCEditor/client/js/jq.js

var _textarea_class = "materialize-textarea "
var _input_class = "validate "
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 = "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;
  if(obj.class) obj.class+=" "+classes;
  else obj.class=classes;
  return obj;
}
var mc = mergeCalss;

function setDef(obj, field, value)
{
    if(obj[field]==undefined) obj[field]=value;
}

function  _col_class(size, offset)
{
  var out = "col "
  if(size && size>0)
    out+="s"+size+" ";
  if(offset && offset>0)
    out+="offset-s"+offset;
  return out;
}
function _intputTextDiv_class(size, offset)
{
  return "input-field inputLine "+_col_class(size, offset);
}




class HTMLBuilder {
  contructor()
  {

  }

  static setAttr(o, prop)
  {
    if(prop)
      for (var key in prop) {
          if (prop.hasOwnProperty(key)) {
            var p = prop[key];
            if(p==undefined) continue;
            if(key=="class"){
              var a = o.attr(key);
              var pre = (a)?a:"";
              o.attr(key, pre+" "+p);
            }
            else o.attr(key, p);
          }
      }
  }

  static elem(elem, prop, son=undefined)
  {
    var d = $('<'+elem+'></'+elem+'>')
    this.setAttr(d, prop)
    if(son)
    {
      if(son instanceof String) d.html(son);
      else d.append(son);
    }

    return d;
  }


  static div(obj={}, son=undefined)
  {
    return this.elem('div', obj, son);
  }


  static span(obj={}, son=undefined)
  {
    return this.elem('span', obj, son);
  }


  static h4(text, obj={}) { var o = HTMLBuilder.elem('h4',obj); o.html(text); return o; }
  static h3(text, obj={}) { var o = HTMLBuilder.elem('h3',obj); o.html(text); return o; }
  static h2(text, obj={}) { var o = HTMLBuilder.elem('h2',obj); o.html(text); return o; }
  static h1(text, obj={}) { var o = HTMLBuilder.elem('h1',obj); o.html(text); return o; }


  static button(text, obj, onclick)
  {
    var o = this.elem('a', {class: _button_class});
    this.setAttr(o, obj)
    o.html(text);
    if(onclick)
      o.on('click', onclick);
    return o;
  }

  static icon(icon, prop, onclick)
  {
    var o = this.elem('i', {class: "material-icons"});
    this.setAttr(o, prop)
    o.html(icon);
    if(onclick)
      o.on('click', onclick);


    return o;
  }

  static iconButton(icon, obj, onclick)
  {
    var a = this.button('', obj, onclick)
    a.append(this.icon(icon))
    return a;
  }

  static _inputText(elem='input', type='text', prop)
  {
    var i = $('<'+elem+' type="'+type+'" />');
    this.setAttr(i, prop);
    return i;
  }

  static input(type, props={})
  {
    var input = $('<input type="'+type+'"/>');
    this.setAttr(input, props);
    return input;
  }

  static hr() { return HTMLBuilder.elem('hr') }
  static hrDiv(obj={}) { return HTMLBuilder.div(obj, this.hr()); }


/*
 data ={
  size: size,
  offset: offset,
  label: lbl,
  id: id,
  type: number|text|...,

}
*/
  static _text(elem='input', data={type:'text'}, prop={}, inputProp={}, labelProp={})
  {
      var x=this.div({class: _intputTextDiv_class(data.size, data.offset) });
      inputProp.id=data.id;
      labelProp.for=data.id;
      labelProp.id=data.id+"_lbl";
      x.append(this._inputText(elem, data.type, inputProp));
      var lbl=this.elem('label', labelProp);
      if(data.label) lbl.html(data.label);
      x.append(lbl);
      return x;
  }

  static textInput(data={type:'text'}, prop={}, inputProp={}, labelProp={})
  {
    inputProp.class=  _input_class;
    return this._text('input', data, prop, inputProp, labelProp)
  }

  static textArea(data={type:'text'}, prop={}, inputProp={}, labelProp={})
  {
    inputProp.class= _textarea_class;
    return this._text('textarea', data, prop, inputProp, labelProp)
  }

  /*
    options : [{
      text: ,
      prop
  }]
  */
  static select(data={}, prop={}, options=[])
  {
      var x=this.div({class: _intputTextDiv_class(data.size, data.offset) });
      var lblProp={};
      lblProp.id=data.id;
      prop.id=data.id;
      var s = this.elem('select', prop)
      for(var i=0; i<options.length; i++)
      {
        var o = this.elem('option', options[i].prop);
        if(options[i].text)o.html(options[i].text);
        s.append(o)
      }


      var l =this.elem('label', lblProp);
      if(data.label)l.html(data.label)
      s.append(l);
      x.append(s);
      return x;
  }

  static rootElemDiv(size, prop={})
  {
    var cls = _col_class(size);
    if(prop.class) prop.class+=cls;
    else prop.class=cls;
    return this.div(prop);
  }

  static subUiDiv(prop)
  {
    if(prop){
      if(prop.class) prop.class+=_subcat_class;
      else prop.class=_subcat_class;
    }else prop={class: _subcat_class};
    var x = this.div(prop);
    return x;
  }

  static row(prop={})
  {
    if( prop.class) prop.class+=" "+_row_class;
    else prop.class=_row_class;
    return HTMLBuilder.div(prop)
  }

  static areaPicker(id, prop={})
  {
    prop.id=id+"_map";
    if( prop.class) prop.class+=" "+_areapicker_class;
    else prop.class=_areapicker_class;
    return HTMLBuilder.div(prop)
  }

  static br()
  {
    return $('<br>');
  }

  /*
  data={
    id: id,
    on: "",
    off: "",

  }
  */
  static switch(data={}, prop={}, iprop={})
  {
    var div = HTMLBuilder.div(mc(prop, _switch_class+_col_class(2)));
    //div.append(HTMLBuilder.br());
    var lbl = HTMLBuilder.elem('label');
    div.append(lbl);

    if(data.on) lbl.append(data.on);
    iprop.id=data.id;
    var input = HTMLBuilder.input('checkbox', iprop);
    lbl.append(input);
    lbl.append(HTMLBuilder.span({class: _lever_class}));
    if(data.off) lbl.append(data.off);
    return div;
  }

  static checkbox(data, prop={})
  {
    var p = HTMLBuilder.elem('p');
    var lbl = HTMLBuilder.elem('label');
    p.append(lbl);
    prop.id=data.id;
    lbl.append(HTMLBuilder.input("checkbox", prop));
    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={}, onchange=undefined)
  {
      /*<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(11)))
                var btnDiv= HTMLBuilder.div({class: "btn "});
                    btnDiv.append(HTMLBuilder.span({}, data.btnLabel));
                    btnDiv.append(HTMLBuilder.input('file', {id: data.id+"_f"}));
                    btnDiv.find("input").on('change', function(){
                        $('#'+data.id+"_fp").val($( this ).
                                val().replace(/C:\\fakepath\\/i, ''))
                    });
                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(1)+_inline_fields, onclick: onclick}));
        form.append(wrapperDiv);
    return form;
  }



}