ProjetMJCEditor/client/js/ui_selector.js

function onUiSelectorChange()
{

}

class UISelector extends UIContainer {


  init()
  {
    this.root.empty();
    this.root.addClass("noMarginBottom")

    this.init_select();
    this.update();

    this.compteur=0;
  }


  init_select()
  {
    var t = this;
    var size=(this.size)?this.size:12;
    var r = HTMLBuilder.rootElemDiv(size);
    var nsize=12;
    if(this.facultative) nsize-=4;

    var data = {
            type: this.type,
            id: this.rootId+'_cb',
            size: nsize,
            label: this.placeholder
    };
    var prop ={ multiple: this.multiple?"":undefined };
    var options = [];

    for(var i=0; i<this.choices.length; i++)
    {
      var opt= { text:this.choices[i].title, prop: {}};
      if(i==0) opt.prop.selected="";
      opt.prop.value=this.choices[i].name;
      options.push(opt);
    }
    var root = HTMLBuilder.div();
    var r = HTMLBuilder.rootElemDiv(size);
    var sel = HTMLBuilder.select(data, prop, options);
    sel.on('change', function(){t.update();} )
    r.append(sel);
    root.append(r);
    this.root.append(root);


    for(var i=0; i<this.choices.length; i++)
    {
      this.create_ui(root, this.choices[i]);
    }

    doFac(root,this);
    return root;
  }

  create_ui(root, f)
  {
    var id = this.rootId+"_"+f.name;
    var r = HTMLBuilder.subUiDiv({class: _row_class+_col_class(12), id:id});
    root.append(r)
    var ui = new UIContainer(this.rootData, f, id, this);
    this.index[f.name]=ui;
    return ui;
  }

  getJson()
  {
    var res=super.getJson();
    if(this.multiple) return res;

    var out={};
    var sel = this.getSelection();
    for (var key in res) {
        if (res.hasOwnProperty(key) ) {
          if( (Array.isArray(sel) && key in sel) || key==sel)
            Object.assign(out, res[key])
        }
    }
    out[this.selectionAs]=sel;
    return out;
  }

  setJson(e)
  {
    if(this.selectionAs) //selection simple
    {
      var type = e[this.selectionAs];
      $("#"+this.rootId+"_cb").val(type).formSelect();
      $("#"+this.rootId+"_cb").change();
      this.index[type].val(e);
      this.update();
    }
  }



  getSelection()
  {
    var v = $("#"+this.rootId+"_cb").val().split(",");
    if(v.length==1) return v[0];
    return v;
  }

  update()
  {
    var sel = this.getSelection();
    for (var key in this.index) {
        if (this.index.hasOwnProperty(key)) {
          var id = this.rootId+"_"+key;
          console.log("ID="+id)
          if( (Array.isArray(sel) && key in sel) || key==sel)
          {
              $('#'+id).show();
          }else{
              $('#'+id).hide();
          }
        }
    }
  }

}
registerUiClass("uiselector", UISelector);