Example 1: using sendEventOnChange & receiveStateValue
Dirty:
Selected:
Example 2: using ch5-select-option.sendEventOnClick & receiveStateValue
Dirty:
Selected:
Example 3: using ch5-select-option.sendEventOnClick & ch5-select-option.receiveStateSelected
Dirty:
Selected:
Example 3 multiselect, ch5-select-option.sendEventOnClick & ch5-select-option.receiveStateSelected
Note: Option 3 select/unselect will never be confirmed by receiveStateSelected.
Dirty:
Selected:
<div class="row">
<p><strong>Example 1: </strong> using sendEventOnChange & receiveStateValue</p>
<ch5-select id="volume1"
size="5" indexId="Idx"
sendEventOnChange="volume_select"
receiveStateValue="volume_selected"
feedbackMode="submit"
noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<i class="fas fa-{{fa-icon}}"></i>
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-1"></span><br>
Selected: <span id="selected-1"></span><br>
<ch5-button id="submit-btn-1" label="Submit"></ch5-button>
<ch5-button id="reset-btn-1" label="Reset"></ch5-button>
<ch5-button id="set-btn-1" label="Set value: 3"></ch5-button>
</p>
</div>
<div class="row">
<p><strong>Example 2: </strong> using ch5-select-option.sendEventOnClick & receiveStateValue</p>
<ch5-select id="volume2"
size="5" indexId="Idx"
receiveStateValue="volume_selected_after_click"
feedbackMode="submit"
noneSelectedPrompt="Select"
mode="panel">
<template>
<ch5-select-option sendEventOnClick="volume_select_{{Idx}}_on_click">
<i class="fas fa-{{fa-icon}}"></i>
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-2"></span><br>
Selected: <span id="selected-2"></span><br>
<ch5-button id="submit-btn-2" label="Submit"></ch5-button>
<ch5-button id="reset-btn-2" label="Reset"></ch5-button>
<ch5-button id="set-btn-2" label="Set value: 2"></ch5-button>
</p>
</div>
<div class="row">
<p><strong>Example 3: </strong> using ch5-select-option.sendEventOnClick & ch5-select-option.receiveStateSelected</p>
<ch5-select id="selectWithReceiveSignalSelected" size="4" indexId="Idx"
mode="panel" feedbackMode="submit" noneSelectedPrompt="Select">
<template>
<ch5-select-option sendEventOnClick="item_{{Idx}}_on_click"
receiveStateSelected="item_{{Idx}}_selected">
<span>Item {{Idx}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-3"></span><br>
Selected: <span id="selected-3"></span><br>
<ch5-button id="submit-btn-3" label="Submit"></ch5-button>
<ch5-button id="reset-btn-3" label="Reset"></ch5-button>
<ch5-button id="set-btn-3" label="Set value: 4"></ch5-button>
</p>
</div>
<div class="row">
<p><strong>Example 3 </strong> multiselect, ch5-select-option.sendEventOnClick & ch5-select-option.receiveStateSelected</p>
<p>
<strong>Note:</strong> Option 3 select/unselect will never be confirmed by receiveStateSelected.
</p>
<ch5-select id="multiselect_ex" size="5" indexId="Idx"
multiselect mode="panel" feedbackMode="submit" noneSelectedPrompt="Select">
<template>
<ch5-select-option receiveStateSelected="multi_select_opt_{{Idx}}_selected"
sendEventOnClick="multi_select_opt_{{Idx}}_on_click"
receiveStateLabel="label_signal_{{Idx}}">
<span>{{label}}</span>
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-4"></span><br>
Selected: <span id="selected-4"></span>
<ch5-button id="update-selection" label="Refresh"></ch5-button><br>
</p>
<p style="margin-top: 24px;">
<ch5-button id="submit-btn-4" label="Submit"></ch5-button>
<ch5-button id="reset-btn-4" label="Reset"></ch5-button>
<ch5-button id="set-btn-4" label="Set value: [ 2, 4]"></ch5-button>
</p>
</div>
(function($, CrComLib){
const updateDirty = (container, selectEl) => {
container.innerHTML = selectEl.getDirty();
};
const updateShownSelectedValue = (container, selectEl, multi) => {
if (multi) {
const selectedVals = selectEl.getValue();
if (selectedVals.length === 0) {
container.innerHTML = '[]';
} else {
container.innerHTML = '[' + selectedVals.join(', ') + ']';
}
} else {
container.innerHTML = selectEl.getValue();
}
};
const initActions = (selectSelector, dirtyContainerSelector, selectedValContainerSelector,
submitBtnSelector, resetBtnSelector, setBtnSelector, valForSet,
refreshSelectionBtnSelector, multi) => {
let dirtyValContainer = $(dirtyContainerSelector)[0];
let select = $(selectSelector)[0];
updateDirty(dirtyValContainer, select);
let selectedValContainer = $(selectedValContainerSelector)[0];
updateShownSelectedValue(selectedValContainer, select, multi);
select.addEventListener('change', (e) => {
updateDirty(dirtyValContainer, select);
updateShownSelectedValue(selectedValContainer, select, multi);
});
select.addEventListener('dirty', (e) => {
console.log('dirty event for select id: ' + select.id);
updateDirty(dirtyValContainer, select);
});
select.addEventListener('clean', (e) => {
console.log('clean event for select id: ' + select.id);
updateDirty(dirtyValContainer, select);
});
let submitBtn = $(submitBtnSelector)[0];
submitBtn.addEventListener('click', (e) => {
select.submit();
updateDirty(dirtyValContainer, select);
updateShownSelectedValue(selectedValContainer, select, multi);
});
let resetBtn = $(resetBtnSelector)[0];
resetBtn.addEventListener('click', (e) => {
select.reset();
updateDirty(dirtyValContainer, select);
updateShownSelectedValue(selectedValContainer, select, multi);
});
let setBtn = $(setBtnSelector)[0];
setBtn.addEventListener('click', (e) => {
select.setValue(valForSet);
updateDirty(dirtyValContainer, select);
updateShownSelectedValue(selectedValContainer, select, multi);
});
if (multi) {
let refreshBtn = $(refreshSelectionBtnSelector)[0];
refreshBtn.addEventListener('click', (e) => {
updateDirty(dirtyValContainer, select);
updateShownSelectedValue(selectedValContainer, select, multi);
});
}
};
initActions('#volume1', '#dirty-select-1', '#selected-1', '#submit-btn-1', '#reset-btn-1', '#set-btn-1', 3);
initActions('#volume2', '#dirty-select-2', '#selected-2', '#submit-btn-2', '#reset-btn-2', '#set-btn-2', 2);
initActions('#selectWithReceiveSignalSelected', '#dirty-select-3', '#selected-3', '#submit-btn-3',
'#reset-btn-3', '#set-btn-3', 4);
initActions('#multiselect_ex', '#dirty-select-4', '#selected-4',
'#submit-btn-4', '#reset-btn-4', '#set-btn-4', [2, 4], '#update-selection', true);
})(jQuery,CrComLib);
.row {
padding: 24px 0;
display: inline-block;
width: 100%;
}
.ch5-select {
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 4px;
}
.ch5-select[mode="panel"] {
border-radius: 0;
}
.ch5-select__panel__item:not(.ch5-select__panel__item--selected) {
border: 1px solid #f8f9fa;
}
.ch5-select__panel__item > * {
margin: 4px;
}