Fancy multiselect

by Michael Dibbets

CSS

.WindowElement, .WindowElement ul, .WindowElement li {
    list-style-type:none;
    margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
    -webkit-margin-before: 0px;  
    -webkit-margin-after: 0px;  
    -webkit-margin-start: 0px;  
    -webkit-margin-end: 0px;  
    -webkit-padding-start: 0px;  
}
.WindowElementComponentPiece {
    flex-grow:1;
    width:100%;
    justify-content: space-around;
    text-align:left;
    
    
    
    
}
.WindowElementComponentHolder {
    width:100%;
    display:flex;
    flex-grow:1;
    flex-direction:row;
    flex-wrap: nowrap;
}
.WindowElementComponentHolder:hover{
    background-color:blue;
    color:white;
}
.WindowElementComponentHolderSelected {
    background-color:darkblue;
    color:white;
}
.WindowElement {
    -webkit-user-select: none; /* Chrome/Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    
    /* Rules below not implemented in browsers yet */
    -o-user-select: none;
    user-select: none;
    cursor:default;
    display:flex;
    flex-direction:column;
    flex-wrap: nowrap;
    width:400px;
    border:1px solid black;
}

JavaScript

$(function(){
  $.fn.oldoldoldVal = $.fn.val;
  $.fn.val = function(value){
    if(value && this[0] instanceof WindowElementComponentPiece || this[0] instanceof WindowElementComponent){

       return this[0].set(value); 
    }
    else if((this[0] instanceof WindowElementComponentPiece || this[0] instanceof WindowElementComponent) && 
            (value = this[0].get())){
        
      return value;
    }else{
      return value ? $(this).oldoldoldVal(value) : $(this).oldoldoldVal();
    }
  };
});

function WindowElementComponentPiece(value,priority) {
    this.value = value;
    this.valueelem = document.createElement('LI');
    this.valueelem.setAttribute('class','WindowElementComponentPiece');
    this.valueelem.appendChild(document.createTextNode(value));
    this.priority = priority;
    return this;
}
WindowElementComponentPiece.prototype.nodeName = "MultiColumnSelectElementPiece";
WindowElementComponentPiece.prototype.getPriority= function() {
    return this.priority;
};
WindowElementComponentPiece.prototype.setPriority = function(priority) {
    this.priority = priority;
};
WindowElementComponentPiece.prototype.getValue = function() {
    return this.valueelem;
};
WindowElementComponentPiece.prototype.get = function() {
    return this.value;
};
WindowElementComponentPiece.prototype.set = function(val) {
    this.value = val;
    while(this.valueelem.firstChild) {
        this.valueelem.removeChild(this.valueelem.firstChild);
    }
    this.valueelem.appendChild(document.createTextNode(this.value));
};

function WindowElementComponent(value,priority) {
    this.value = value;
    this.componentparts = [];
    var that = this;
    this.componentholder = document.createElement('UL');
    if (this.componentholder.addEventListener)  {
        this.componentholder.addEventListener('click',function(event){that.onclick(event);},false); //everything else    
    }
    else if (this.componentholder.attachEvent) {
       ...