ProjetMJCEditor/client/js/jq.js

var _textarea_class = "materialize-textarea "
var _input_class = "validate "
var _button_class = "waves-effect waves-light 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 _lever_class = "lever "
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  _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)
  {
    var o = $('<'+elem+'></'+elem+'>')
    this.setAttr(o, prop)
    return o;
  }


  static div(obj={}, son=undefined)
  {
    var d = this.elem('div', obj);;
    if(son)
    {
      if(son instanceof String) d.html(son);
      else d.append(son);
    }

    return d;
  }


  static span(obj={}, son=undefined)
  {
    var d = this.elem('span', obj);;
    if(son)
    {
      if(son instanceof String) d.html(son);
      else d.append(son);
    }

    return d;
  }


  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));
    //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;
  }
}