senaduka/old-web
1
0
Fork 0
Code Issues Pull Requests 5 Actions Packages Projects Releases Wiki Activity

implement segmented select control without JS

Browse Source
This commit is contained in:
Bilal Catic
2019-11-01 08:53:50 +01:00
parent e3e0ddd508
commit a0449f7ffd
2 changed files with 31 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/public/segment.css
View File

@@ -1,14 +1,18 @@
.ui-segment { .segmented {
color: #02adba; color: #02adba;
border: 1px solid #02adba; border: 1px solid #02adba;
border-radius: 4px; border-radius: 4px;
display: inline-block; display: inline-block;
} }
.ui-segment span.option.active { .segmented label {
color: #02adba;
}
.segmented input:checked + .label {
background-color: #02adba; background-color: #02adba;
color: white; color: white;
} }
.ui-segment span.option { [type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
padding-left: 30px; padding-left: 30px;
padding-right: 30px; padding-right: 30px;
height: 35px; height: 35px;
@@ -21,9 +25,14 @@
border-right: 1px solid #02adba; border-right: 1px solid #02adba;
} }
.ui-segment span.option:last-child { .segmented :last-child .label {
border-right: none; border-right: none;
} }
.segment-select { .segmented input {
display: none;
}
span.label:before,
span.label:after {
display: none; display: none;
} }

68
app/views/realEstateType.ejs
View File

@@ -3,18 +3,23 @@
<div class="center-align"> <div class="center-align">
<div class="row"> <div class="row">
<select class="segment-select" id="adType" name="adType"> <span class="segmented">
<option value="<%= AD_TYPE.AD_TYPE_SALE.id %>" <label>
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %> <input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
selected="selected" <% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
<% } %> checked
><%= AD_TYPE.AD_TYPE_SALE.title %></option> <% } %>>
<option value="<%= AD_TYPE.AD_TYPE_RENT.id %>" <span class="label"><%= AD_TYPE.AD_TYPE_SALE.title %></span>
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %> </label>
selected="selected"
<% } %> <label>
><%= AD_TYPE.AD_TYPE_RENT.title %></option> <input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
</select> <% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
checked
<% } %>>
<span class="label"><%= AD_TYPE.AD_TYPE_RENT.title %></span>
</label>
</span>
</div> </div>
<br> <br>
@@ -37,45 +42,6 @@
</form> </form>
<script> <script>
(function($) {
$.fn.extend({
Segment: function() {
$(this).each(function() {
const self = $(this);
const onchange = self.attr('onchange');
const wrapper = $("<div>", { class: "ui-segment" });
$(this)
.find("option")
.each(function() {
const option = $("<span>", {
class: "option",
onclick: onchange,
text: $(this).text(),
value: $(this).val(),
});
if ($(this).is(":selected")) {
option.addClass("active");
}
wrapper.append(option);
});
wrapper.find("span.option").click(function (){
wrapper.find("span.option").removeClass("active");
$(this).addClass("active");
self.val($(this).attr('value'));
});
$(this).after(wrapper);
$(this).hide();
});
}
});
})(jQuery);
$(document).ready(() => {
$(".segment-select").Segment();
});
function saveAndSubmit(id) { function saveAndSubmit(id) {
$("#realEstateType").val(id); $("#realEstateType").val(id);
$("#realEstateTypeSelection > a").attr("onclick", ""); $("#realEstateTypeSelection > a").attr("onclick", "");