Commit cf8837fa authored by Bas Lijnse's avatar Bas Lijnse

Cleaned up builtin UI components

parent bf472571
itasks.itwc_container = {
itasks.Container = {
cssCls: 'container',
initDOMEl: function() {
if(this.baseCls) {
......@@ -6,7 +6,7 @@ itasks.itwc_container = {
}
}
};
itasks.itwc_panel = {
itasks.Panel = {
cssCls: 'panel',
initDOMEl: function() {
var me = this;
......@@ -30,7 +30,7 @@ itasks.itwc_panel = {
}
}
};
itasks.itwc_tabset = {
itasks.TabSet = {
cssCls: 'tabset',
activeTab: 0,
height: 'flex',
......@@ -162,7 +162,7 @@ itasks.itwc_tabset = {
}
}
itasks.itwc_window = {
itasks.Window = {
margins: '10 10 10 10',
movable: false,
modal: false,
......@@ -245,14 +245,23 @@ itasks.itwc_window = {
window.removeEventListener('mouseup', me.onStopDrag_);
}
};
itasks.itwc_debug= {
cssCls: 'debug'
itasks.ToolBar = {
cssCls: 'toolbar',
height: 'wrap',
width: 'flex',
direction: 'horizontal',
halign: 'left',
padding: '2 2 2 2'
};
itasks.itwc_buttonbar = {
itasks.ButtonBar = {
cssCls: 'buttonbar',
height: 'wrap',
width: 'flex',
direction: 'horizontal',
halign: 'right',
padding: '2 2 2 0'
};
itasks.Debug = {
cssCls: 'debug'
};
itasks.itwc_view_string = {
itasks.TextView = {
container: false,
initDOMEl: function() {
this.domEl.innerHTML = this.value || '';
......@@ -12,7 +12,7 @@ itasks.itwc_view_string = {
}
}
};
itasks.itwc_view_html = {
itasks.HtmlView = {
initDOMEl: function() {
this.domEl.innerHTML = this.value || '';
},
......@@ -25,38 +25,7 @@ itasks.itwc_view_html = {
}
}
};
itasks.itwc_view_document = {
initDOMEl: function() {
var me = this;
if(me.value) {
me.setValue(me.value);
}
},
setValue: function(value) {
var me = this;
if(value) {
me.domEl.innerHTML = '<a href="'+value.contentUrl+'" target="_blank">'+value.name+'</a>';
}
}
};
itasks.itwc_view_slider = {
domTag: 'input',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.type = 'range';
el.min = me.minValue;
el.max = me.maxValue;
el.value = me.value;
el.disabled = true;
},
onAttributeChange(name,value) {
switch(name) {
case 'value': this.domEl.value = value; break;
}
}
};
itasks.itwc_view_progress = {
itasks.ProgressBar = {
domTag: 'progress',
initDOMEl: function() {
var me = this,
......
itasks.itwc_label = {
domTag: 'label',
initDOMEl: function() {
var me = this,
el = me.domEl;
el.innerHTML = me.text;
}
};
itasks.itwc_view_icon = {
width: 'wrap',
height: 'wrap',
initDOMEl: function() {
var me = this,
el = me.domEl;
el.classList.add(me.cssPrefix + 'icon');
el.classList.add(me.iconCls);
me.currentIcon = me.iconCls;
if(me.tooltip) {
el.setAttribute('tooltip',me.tooltip);
}
},
onAttributeChange: function(name,value) {
var me = this,
el = me.domEl;
switch(name) {
case 'iconCls':
el.classList.remove(me.currentIcon);
me.currentIcon = value;
el.classList.add(me.currentIcon);
break;
case 'tooltip':
el.setAttribute('tooltip',value);
break;
}
}
};
itasks.TextField = {
domTag: 'input',
initDOMEl: function() {
......@@ -133,53 +95,13 @@ itasks.NumberField = {
}
}
};
itasks.IntegerField = Object.assign(itasks.NumberField,{
allowDecimal: false
});
itasks.DecimalField = Object.assign(itasks.NumberField,{
allowDecimal: true
});
itasks.Checkbox = {
domTag: 'input',
defaultWidth: 'wrap',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.type = 'checkbox';
el.checked = me.value;
el.addEventListener('click',function(e) {
var value = e.target.checked;
me.doEditEvent(me.taskId,me.editorId,value);
});
},
onAttributeChange: function(name,value) {
var me = this;
if(name == 'value') {
me.domEl.checked = value;
}
}
};
itasks.itwc_edit_slider = {
domTag: 'input',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.type = 'range';
el.min = me.minValue;
el.max = me.maxValue;
el.value = me.value;
el.addEventListener('change',function(e) {
me.doEditEvent(me.taskId,me.editorId, (e.target.value | 0),true);
});
}
};
itasks.itwc_edit_document = {
itasks.DocumentField = {
cssCls: 'edit-document',
initDOMEl: function() {
......@@ -276,8 +198,43 @@ itasks.itwc_edit_document = {
me.showValue();
}
};
itasks.Checkbox = {
domTag: 'input',
defaultWidth: 'wrap',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.type = 'checkbox';
el.checked = me.value;
itasks.itwc_editbutton = {
el.addEventListener('click',function(e) {
var value = e.target.checked;
me.doEditEvent(me.taskId,me.editorId,value);
});
},
onAttributeChange: function(name,value) {
var me = this;
if(name == 'value') {
me.domEl.checked = value;
}
}
};
itasks.Slider = {
domTag: 'input',
initDOMEl: function() {
var me = this,
el = this.domEl;
el.type = 'range';
el.min = me.minValue | 0;
el.max = me.maxValue | 10;
el.value = me.value;
el.addEventListener('change',function(e) {
me.doEditEvent(me.taskId,me.editorId, (e.target.value | 0),true);
});
}
};
itasks.Button = {
domTag: 'a',
cssCls: 'button',
container: false,
......@@ -314,119 +271,42 @@ itasks.itwc_editbutton = {
});
}
};
itasks.itwc_choice_dropdown = {
domTag: 'select',
width: 'wrap',
itasks.Label = {
domTag: 'label',
initDOMEl: function() {
var me = this,
el = me.domEl,
value = me.value[0],
option;
option = document.createElement('option');
option.innerHTML = "Select...";
option.value = -1;
el.appendChild(option);
me.options.forEach(function(label,index) {
option = document.createElement('option');
option.value = index;
option.innerHTML = label;
if(index === value) {
option.selected = true;
}
el.appendChild(option);
},me);
el.addEventListener('change',function(e) {
var value = e.target.value | 0;
me.doEditEvent(me.taskId,me.editorId,value == -1 ? null : value,false);
});
},
setValue: function(selection) {
var me = this,
value;
if(selection.length == 0) {
value = -1;
} else {
value = selection[0];
}
me.domEl.value = value;
el = me.domEl;
el.innerHTML = me.text;
}
};
itasks.Icon = {
itasks.itwc_choice_radiogroup = {
domTag: 'ul',
cssCls: 'choice-radiogroup',
container: false,
width: 'wrap',
height: 'wrap',
initDOMEl: function() {
var me = this,
el = me.domEl,
inputName = "choice-" + me.taskId + "-" + me.editorId,
value = me.value.length ? me.value[0] : null;
me.options.forEach(function(option,idx) {
var liEl,inputEl,labelEl;
liEl = document.createElement('li');
inputEl = document.createElement('input');
inputEl.type = 'radio';
inputEl.value = idx;
inputEl.name = inputName;
inputEl.id = inputName + "-option-" + idx;
if(idx === value) {
inputEl.checked = true;
}
inputEl.addEventListener('click',function(e) {
me.doEditEvent(me.taskId,me.editorId,idx);
});
liEl.appendChild(inputEl);
labelEl = document.createElement('label');
labelEl.setAttribute('for',inputName + "-option-" + idx);
labelEl.innerHTML = option;
liEl.appendChild(labelEl);
el = me.domEl;
el.classList.add(me.cssPrefix + 'icon');
el.classList.add(me.iconCls);
me.currentIcon = me.iconCls;
el.appendChild(liEl);
});
if(me.tooltip) {
el.setAttribute('tooltip',me.tooltip);
}
},
onAttributeChange: function(name,value) {
console.log(name,value);
onAttributeChange: function(name,value) {
var me = this,
el = me.domEl;
switch(name) {
case 'iconCls':
el.classList.remove(me.currentIcon);
me.currentIcon = value;
el.classList.add(me.currentIcon);
break;
case 'tooltip':
el.setAttribute('tooltip',value);
break;
}
}
};
itasks.itwc_choice_checkboxgroup = {
domTag: 'ul',
cssCls: 'choice-checkboxgroup',
initDOMEl: function() {
var me = this,
el = me.domEl,
inputName = "choice-" + me.taskId + "-" + me.editorId,
value = me.value || [];
me.options.forEach(function(option,idx) {
var liEl,inputEl,labelEl;
liEl = document.createElement('li');
inputEl = document.createElement('input');
inputEl.type = 'checkbox';
inputEl.value = idx;
inputEl.id = inputName + "-option-" + idx;
if(value.indexOf(idx) !== -1) {
inputEl.checked = true;
}
inputEl.addEventListener('click',function(e) {
me.doEditEvent(me.taskId,me.editorId,[idx,e.target.checked]);
});
liEl.appendChild(inputEl);
labelEl = document.createElement('label');
labelEl.setAttribute('for',inputName + "-option-" + idx);
labelEl.innerHTML = option;
liEl.appendChild(labelEl);
el.appendChild(liEl);
});
}
};
itasks.itwc_splitter = {
initDOMEl: function() {
var me = this,
el = me.domEl;
me.direction = (me.parentCmp && me.parentCmp.direction) || 'vertical';
me.vertical = me.direction == 'vertical';
el.classList.add(me.cssPrefix + me.vertical ? 'vsplitter' : 'hsplitter');
},
initSize: function() {
},
initMargins: function() {
},
afterAdd: function() {
var me = this,
el = me.domEl;
me.prev = el.previousSibling;
me.next = el.nextSibling;
el.addEventListener('mousedown', me.onStartDrag.bind(me));
},
onStartDrag: function(e) {
var me = this;
e.preventDefault();
me.lastPos = me.vertical ? e.clientY : e.clientX;
me.onDragging_ = me.onDragging.bind(me);
me.onStopDrag_ = me.onStopDrag.bind(me);
window.addEventListener('mousemove', me.onDragging_);
window.addEventListener('mouseup', me.onStopDrag_);
},
onDragging: function(e) {
var me = this,
vertical = me.vertical,
newPos = vertical ? e.clientY : e.clientX,
sizePrev, sizeNext, sizeDiff = newPos - me.lastPos;
sizePrev = document.defaultView.getComputedStyle(me.prev,'').getPropertyValue(vertical ? 'height':'width');
sizeNext = document.defaultView.getComputedStyle(me.next,'').getPropertyValue(vertical ? 'height':'width');
sizePrev = ((sizePrev,10) + sizeDiff) | 0;
sizeNext = ((sizeNext,10) - sizeDiff) | 0;
me.prev.style[vertical ? 'height' : 'width'] = sizePrev + 'px';
me.next.style[vertical ? 'height' : 'width'] = sizeNext + 'px';
me.lastPos = newPos;
},
onStopDrag: function(e) {
var me = this;
window.removeEventListener('mousemove', me.onDragging_);
window.removeEventListener('mouseup', me.onStopDrag_);
}
};
itasks.itwc_raw_empty = {
itasks.RawEmpty = {
cssCls: 'raw-empty',
initDOMEl: function() {
this.domEl.innerHTML = '(empty)';
}
};
itasks.itwc_raw_record = {
itasks.RawRecord = {
cssCls: 'raw-record'
};
itasks.itwc_raw_cons = {
itasks.RawCons = {
cssCls: 'raw-cons'
};
itasks.itwc_raw_var_cons = {
itasks.RawVarCons = {
cssCls: 'raw-var-cons'
};
itasks.itwc_raw_interact = {
itasks.RawInteract = {
cssCls: 'raw-interact'
};
itasks.itwc_raw_step = {
itasks.RawStep = {
cssCls: 'raw-step',
};
itasks.itwc_raw_parallel = {
itasks.RawParallel = {
cssCls: 'raw-parallel',
};
itasks.itwc_raw_action = {
itasks.RawAction = {
cssCls: 'raw-action',
domTag: 'a',
width: 'wrap',
......@@ -54,9 +53,3 @@ itasks.itwc_raw_action = {
}
}
};
itasks.itwc_raw_form = {
cssCls: 'raw-form',
};
itasks.itwc_raw_form_item = {
cssCls: 'raw-form-item',
};
itasks.itwc_choice_grid = {
itasks.Dropdown = {
domTag: 'select',
width: 'wrap',
initDOMEl: function() {
var me = this,
el = me.domEl,
value = me.value[0],
option;
option = document.createElement('option');
option.innerHTML = "Select...";
option.value = -1;
el.appendChild(option);
me.options.forEach(function(label,index) {
option = document.createElement('option');
option.value = index;
option.innerHTML = label;
if(index === value) {
option.selected = true;
}
el.appendChild(option);
},me);
el.addEventListener('change',function(e) {
var value = e.target.value | 0;
me.doEditEvent(me.taskId,me.editorId,value == -1 ? null : value,false);
});
},
setValue: function(selection) {
var me = this,
value;
if(selection.length == 0) {
value = -1;
} else {
value = selection[0];
}
me.domEl.value = value;
}
};
itasks.RadioGroup = {
domTag: 'ul',
cssCls: 'choice-radiogroup',
container: false,
initDOMEl: function() {
var me = this,
el = me.domEl,
inputName = "choice-" + me.taskId + "-" + me.editorId,
value = me.value.length ? me.value[0] : null;
me.options.forEach(function(option,idx) {
var liEl,inputEl,labelEl;
liEl = document.createElement('li');
inputEl = document.createElement('input');
inputEl.type = 'radio';
inputEl.value = idx;
inputEl.name = inputName;
inputEl.id = inputName + "-option-" + idx;
if(idx === value) {
inputEl.checked = true;
}
inputEl.addEventListener('click',function(e) {
me.doEditEvent(me.taskId,me.editorId,idx);
});
liEl.appendChild(inputEl);
labelEl = document.createElement('label');
labelEl.setAttribute('for',inputName + "-option-" + idx);
labelEl.innerHTML = option;
liEl.appendChild(labelEl);
el.appendChild(liEl);
});
},
onAttributeChange: function(name,value) {
console.log(name,value);
}
};
itasks.CheckboxGroup = {
domTag: 'ul',
cssCls: 'choice-checkboxgroup',
initDOMEl: function() {
var me = this,
el = me.domEl