Example 1: ch5-select in mode plain. Each option description is set from global config "templatevariables" (in this case).
Example 2: ch5-select, multiselect=false, default template, iconPosition=first
Example 3: ch5-select, multiselect=false, default template, iconPosition=last
Example 4: ch5-select, multiselect=true, default template and iconPosition=first
Note: for all multiselect examples option labels are set using the same receiveStateLabel
signals set. Also, receiveStateUrl signals are providing default template image URL.
Since ch5-toggle has no receiveStateSelected attribute, ch5-select-option.receiveStateSelected is also used
to set ch5-toggle.receiveStateValue.
For multiselect with default template ch5-select-option.sendEventOnClick
is not sent by option element, it is assigned to ch5-toggle.
Example 5: ch5-select, multiselect=true, default template and iconPosition=last
Example 6: ch5-select, multiselect=true, default template and receiveStateScriptLabelHTML
- receiveStateScriptLabelHTML signal is used to set ch5-toggle label
Example 7: ch5-select, multiselect=false, feedbackMode=submit and default template.
Dirty:
Example 8: ch5-select, multiselect=true, feedbackMode=submit and default template.
Dirty:
<div class="row">
<p><strong>Example 1:</strong> ch5-select in mode plain. Each option description is set from global config
"templatevariables" (in this case).</p>
<ch5-select id="direction_select" size="4" indexId="Index" noneSelectedPrompt="Select">
<template>
<ch5-select-option>
<div>
<i class="fas fa-arrow-{{fa-icon}}"></i>
<span>item_{{Index}} {{description}}</span>
</div>
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 2:</strong> ch5-select, multiselect=false, default template, iconPosition=first</p>
<ch5-select id="singleselect-icon-first" size="4" indexId="Index" noneSelectedPrompt="Select">
<template>
<ch5-select-option sendEventOnClick="user_select_clicked_{{Index}}" useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 3:</strong> ch5-select, multiselect=false, default template, iconPosition=last</p>
<ch5-select id="singleselect-icon-last" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel">
<template>
<ch5-select-option sendEventOnClick="user_select_clicked_{{Index}}"
useDefaultTmpl iconPosition="last"
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 4:</strong> ch5-select, multiselect=true, default template and iconPosition=first</p>
<p>
<strong>Note: </strong> for all multiselect examples option labels are set using the same receiveStateLabel
signals set. Also, receiveStateUrl signals are providing default template image URL.<br><br>
Since ch5-toggle has no receiveStateSelected attribute, ch5-select-option.receiveStateSelected is also used
to set ch5-toggle.receiveStateValue.<br><br>
For multiselect with default template ch5-select-option.sendEventOnClick
is not sent by option element, it is assigned to ch5-toggle.
</p>
<ch5-select id="multiselect_1" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_1_clicked_{{Index}}"
receiveStateSelected="multiselect_1_selected_{{Index}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 5:</strong> ch5-select, multiselect=true, default template and iconPosition=last</p>
<ch5-select id="multiselect_2" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_2_clicked_{{Index}}"
receiveStateSelected="multiselect_2_selected_{{Index}}"
useDefaultTmpl iconPosition="last"
receiveStateLabel="label_signal_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 6:</strong> ch5-select, multiselect=true, default template and receiveStateScriptLabelHTML</p>
<p>- receiveStateScriptLabelHTML signal is used to set ch5-toggle label</p>
<ch5-select id="multiselect_3" size="4" indexId="Index" noneSelectedPrompt="Select"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_3_clicked_{{Index}}"
receiveStateSelected="multiselect_3_selected_{{Index}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Index}}"
receiveStateScriptLabelHTML="receive_html_script_label_{{Index}}"
receiveStateUrl="receive_image_url_{{Index}}">
</ch5-select-option>
</template>
</ch5-select>
</div>
<div class="row">
<p><strong>Example 7:</strong> ch5-select, multiselect=false, feedbackMode=submit and default template.</p>
<ch5-select id="default_tmpl_f_submit_single"
size="4" indexId="Idx"
receiveStateValue="item_selected_after_click"
feedbackMode="submit"
noneSelectedPrompt="Select"
mode="panel">
<template>
<ch5-select-option sendEventOnClick="select_item_{{Idx}}_on_click"
useDefaultTmpl
receiveStateLabel="label_signal_{{Idx}}"
receiveStateUrl="receive_image_url_{{Idx}}">
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-1"></span><br><br>
<ch5-button id="submit-btn-1" label="Submit"></ch5-button>
<ch5-button id="reset-btn-1" label="Reset"></ch5-button>
</p>
</div>
<div class="row">
<p><strong>Example 8:</strong> ch5-select, multiselect=true, feedbackMode=submit and default template.</p>
<ch5-select id="default_tmpl_f_submit_multi"
size="4" indexId="Idx"
feedbackMode="submit"
noneSelectedPrompt="Select options(s)"
mode="panel" multiselect>
<template>
<ch5-select-option sendEventOnClick="multiselect_4_clicked_{{Idx}}"
receiveStateSelected="multiselect_4_selected_{{Idx}}"
useDefaultTmpl
receiveStateLabel="label_signal_{{Idx}}"
receiveStateUrl="receive_image_url_{{Idx}}">
</ch5-select-option>
</template>
</ch5-select>
<p style="margin-top: 24px;">
Dirty: <span id="dirty-select-2"></span><br><br>
<ch5-button id="submit-btn-2" label="Submit"></ch5-button>
<ch5-button id="reset-btn-2" label="Reset"></ch5-button>
</p>
</div>
<div class="row">
<!-- TODO: remove this after issues are fixed -->
<strong>Issues using default template for multiselect:</strong>
<ul>
<li>using receiveStateScriptLabelHTML, UI looks bad with 2 labels (option label provided by receiveStateLabel) and
ch5-toggle label (provided by receiveStateScriptLabelHTML)</li>
<li>No way to set on/off ch5-toggle labels, unless we add 2 more new attributes on ch5-select-option</li>
</ul>
</div>
(function($, CrComLib){
const updateDirty = (container, selectEl) => {
container.innerHTML = selectEl.getDirty();
};
const initActions = (selectSelector, dirtyContainerSelector, submitBtnSelector, resetBtnSelector) => {
let dirtyValContainer = $(dirtyContainerSelector)[0];
let select = $(selectSelector)[0];
updateDirty(dirtyValContainer, select);
select.addEventListener('change', (e) => {
updateDirty(dirtyValContainer, select);
});
select.addEventListener('dirty', (e) => {
updateDirty(dirtyValContainer, select);
});
select.addEventListener('clean', (e) => {
updateDirty(dirtyValContainer, select);
});
let submitBtn = $(submitBtnSelector)[0];
submitBtn.addEventListener('click', (e) => {
select.submit();
updateDirty(dirtyValContainer, select);
});
let resetBtn = $(resetBtnSelector)[0];
resetBtn.addEventListener('click', (e) => {
select.reset();
updateDirty(dirtyValContainer, select);
});
};
initActions('#default_tmpl_f_submit_single', '#dirty-select-1', '#submit-btn-1', '#reset-btn-1');
initActions('#default_tmpl_f_submit_multi', '#dirty-select-2', '#submit-btn-2', '#reset-btn-2');
})(jQuery,CrComLib);
.row {
padding: 24px 0;
display: inline-block;
width: 100%;
}
.ch5-select__panel__item:not(.ch5-select__panel__item--selected) {
border: 1px solid #f8f9fa;
}
.ch5-select .ch5-select__panel__item__default_tmpl > *:not(:last-child){
margin-right: 16px;
}