Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

minimize sightly code part 2

sampath_kumar_g
Level 2
Level 2

<div id="tabs-2" aria-labelledby="ui-id-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom" role="tabpanel" aria-expanded="true" aria-hidden="false" style="font-family: Arial, sans-serif !important;">
<!-- Care options - Begin -->
<div class="careOptionsContainer">
<div class="filterOptions">
<div class="section">
<div class="row">
<p>
<span>Condition</span><a href="#" class="qMark" title="Select a Condition to Show Related Treatments &amp; Tests in Care Options Panel."></a>
</p>
</div>
<select data-sly-list.key="${model.conditionPagePaths}" class="input" id="condition_input"
style="font-size:1em;color:#555555;font-size:14px;" onchange="conditionChange()">
<option value="${key@ context='html'}">${key@ context='html'}</option>
</select>

</div><!-- end section -->
<div class="section">
<p>
<span>Input</span><a href="#" class="qMark" title="Insert or Select Inputs Below to Identify Related Treatments and Tests in Care Options Panel."></a>
</p>
<div class="row">
<p style="font-weight:bold">
Age
</p>
<input type="text" class="txtBoxSmall care-option-input" id="input-age">
</div>
<div class="row">
<p>
<span>Impact to Daily Activity</span><a href="#" class="qMark" title="Daily Activities Examples: Eating, Sleeping, Driving, Walking, Working, Personal Hygiene etc."></a>
</p>
<select id="input-impact" class="care-option-input" style="font-size:1em;color:#555555;width:95%;margin-top: 2%;">
<option value="empty" title="Choose Options Below">Choose Options Below</option>
<option value="none" title="None: Impacts None">None: Impacts None</option>
<option value="low" title="Low: Impacts 1 Daily Activity">Low: Impacts 1 Daily Activity</option>
<option value="moderate" title="Moderate: Impacts 2-3 Daily Activities">Moderate: Impacts 2-3 Daily Activities</option>
<option value="high" title="High: Impacts 4-5 Daily Activities">High: Impacts 4-5 Daily Activities</option>
</select>
</div>
<div class="row">
<p style="font-weight:bold">
Length of Time With Condition
</p>
<br>
<input type="text" class="txtBoxSmall care-option-input" id="input-lengthOfCondition">
<select id="input-lengthOfConditionUnit" class="care-option-input" style="font-size:1em;color:#555555;width:40%;">
<option>Days</option>
<option>Weeks</option>
<option>Months</option>
<option>Years</option>
</select>
</div>
</div> <!-- end section -->
<div class="section">
<p>
<span>Filter</span><a href="#" class="qMark" title="Treatments &amp; Tests That Don't Match Below Filters Will be Faded Out in Care Options Panel."></a>
</p>
<div class="row">
<p>
<span>Treatments &amp;Tests Type</span><a href="#" class="qMark" title="Self-Care - Done by Oneself at Home Performed Independently by an Individual Without Medical Supervision or Prescription
Medication - Use of Over-The-Counter or Prescription Meds
Conventional tests - Tests Commonly Used by Care Providers
Conventional treatments - Treatments Commonly Used by Care Providers
Complimentary - Non-Mainstream Treatments Used Together with Conventional Medicine"></a>
</p>
<br>
<!-- Multiselect drop down list - Begin -->
<select id="type1" multiple="multiple" size="5" class="care-option-filter" style="display: none;">
<option value="All">All</option>
<option value="Self Care">Self-Care</option>
<option value="Complementary">Complementary</option>
<option value="Medication">Medications</option>
<option value="Conventional Test">Conventional Tests</option>
<option value="Conventional Treatment">Conventional Treatments</option>
</select>
<!-- Multiselect drop down list - Ends -->
</div>
<div class="row">
<p>
<span>Clinically Proven</span><a href="#" class="qMark" title=" All - Will Reflect All Treatments &amp; Tests, Whether Clinically Proven or Not
Yes - Shows Results That are Clinically Proven, as Validated in Numerous Studies
Insufficient - Not Enough Evidence to Determine Proven Status
No - Shows Results That are Unproven and Have Been Found to Be Ineffective and/or Unsafe"></a>
</p>
<br>
<!-- Multiselect drop down list - Begin -->
<select id="type2" multiple="multiple" size="5" class="care-option-filter" style="display: none;">
<option value="All">All</option>
<option value="Yes">Yes</option>
<option value="Insufficient Evidence">Insufficient</option>
<option value="No">No</option>
</select>
<!-- Multiselect drop down list - Ends -->
</div>
<div class="row">
<p>
<span>Cost</span><a href="#" class="qMark" title="$ - Lower Cost $0-$250
$$ - Medium Cost $250-$500
$$$ - Higher Cost $500-$2000
$$$$ - Very Costly $2000+"></a>
</p>
</div>
<div class="row">
<!-- Slider - Begin -->
<!-- Jquery onload function builds sliders from these divs -->
<div id="slider-range1"></div>
<div id="legend1"></div>
<!-- Slider - Ends -->
</div>
<div class="row">
<p class="text">
<span>Time To Complete Treatments &amp; Tests<a href="#" class="qMark" title="Low - Same-day, Single Event
Medium - 1 to 2 Days
High - 3 Days or more"></a>
</span>
</p>
</div>
<div class="row">
<!-- Slider - Begin -->
<!-- Jquery onload function builds sliders from these divs -->
<div id="slider-range2" ></div>
<div id="legend2"></div>
<!-- Slider - Ends -->
</div>
</div><!-- end section -->
</div>
<div class="filterResults">
<div class="titleBox">
<p id="care-options-title">
<sly data-sly-test="${!properties.checkConditionPage && properties.checkTreatmentPage && !properties.checkPreventiveCarePage && !properties.checkRightCarePage}">
${properties.conditionNameForTreatment @ context='html'}
</sly>
<sly data-sly-test="${properties.checkConditionPage && !properties.checkTreatmentPage && !properties.checkPreventiveCarePage && !properties.checkRightCarePage}">
${properties.conditionName @ context='html'}
</sly>
</p>
<button type="button" class="showCheckBox" style="font-size:14px;">
Compare Options
</button>
</div>
<div class="showCompare">
Please select the Treatments &amp; Tests to be compared (up to 3)
<button type="button" class="" id="cancel-compare-tool">
Cancel
</button>
<button type="button" id="compare-selected" class="">
Compare Selected
</button>
</div>
<div class="care-options-sorting-note">Note: Treatments and tests are displayed alphabetically</div>
<div class="compare-tool-error-wrapper"><div class="compare-tool-error"></div>
</div>

<!-- end Care options container -->
<div class="compareTableContainer" id="care-options-table-container">
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height" class="header">
<td>Home</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsHomeList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Home-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-two" class="header">
<td>Early</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsEarlyList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Early-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-three" class="header">
<td>More Advanced</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsMoreAdvancedList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="MoreAdvanced-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<table class="compareTable" border="1" id="care-options-table">
<thead>
<tr id="height-four" class="header">
<td>Surgery</td>
</tr>
</thead>
<tbody id="care-option-table-body">
<tr data-sly-repeat.item="${treatments.treatmentsSurgeryList}" class="compare-table-row">
<td class="grey care-option-cell"
onmouseover="showTreatmentScreeningToolTip(this)" id="Surgery-${itemList.index}" name="${item.treatmentName}" title="">
<input type="checkbox" class="care-option-cell-check">
<div style="word-wrap:break-word;">
<a class="demo-manual-trigger" href="#" id="${item.treatmentURL}" onclick="navigateToTreatmentPage(this)">
${item.treatmentName}</a></div>
</td>
</tr>
</tbody>
</table>
<!-- legend box is used to swap the content of legend for hide/show -->
<div id="legendBox" class="legendContainer ui-draggable">
<table class="legendTable">
<tbody><tr id="trheight" class="title">
<td colspan="2"><span style="cursor: move;">Key for Treatments &amp; Tests (<span id="hideLegendLink" onclick="hideLegend()"> Hide</span>)</span></td>
</tr>
<tr id="trheightOne">
<td class="greenLight">&nbsp;</td>
<td>May Fit Well Based on Inputs</td>
</tr>
<tr>
<td class="orange">&nbsp;</td>
<td>Questionable Based on Inputs</td>
</tr>
<tr>
<td class="grey">&nbsp;</td>
<td>Likely Does Not Fit Based on Inputs</td>
</tr>
<tr>
<td class="white">&nbsp;</td>
<td>Removed Due to Filter Selection</td>
</tr>
</tbody></table>
</div>
<div id="legend" class="legendContainer" style="display: none">
<table class="legendTable">
<tbody><tr id="trheight" class="title">
<td colspan="2"><span style="cursor: move;">Key for Treatments &amp; Tests (<span id="hideLegendLink" onclick="hideLegend()"> Hide</span>)</span></td>
</tr>
<tr id="trheightOne">
<td class="greenLight">&nbsp;</td>
<td>May Fit Well Based on Inputs</td>
</tr>
<tr>
<td class="orange">&nbsp;</td>
<td>Questionable Based on Inputs</td>
</tr>
<tr>
<td class="grey">&nbsp;</td>
<td>Likely Does Not Fit Based on Inputs</td>
</tr>
<tr>
<td class="white">&nbsp;</td>
<td>Removed Due to Filter Selection</td>
</tr>
</tbody></table>
</div><!-- end legend container -->
<div id="hiddenLegend" class="legendContainer" style="display: none">
<b><span id="hiddenLegendBox">Click to drag (<span id="showLegendLink" onclick="showLegend()" style="width:inherit">Show Legend</span>)</span></b>
</div>
</div>
<!-- end compareTableContainer -->
<div class="tableCompareWrapper" style="display:none" id="table-compare">
<div> <a id="addReport" class="addToReport" href="#table-compare">Add To Report</a>
<button type="button" id="back-to-care-option" class="" style="display:none;font-size:14px;">
Return To Care Option
</button>
</div>
<!-- javascript will use this table to generate the compare view table -->
<table class="tableCompare" id="compareTable">
</table>
</div>
</div>
</div>
<!-- Care options - Ends -->
</div>

1 Reply
Arun_Patidar
Community Advisor
Community Advisor

Hi,

The code can be minimize be :

1. separating code into multiple files

2. for dropdown create a HTL template pass option and other values as param and use data-sly-repeat

3. the duplicate code can also be converted into htl template