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

68
app/views/realEstateType.ejs
View File

@@ -3,18 +3,23 @@
<div class="center-align">
<div class="row">
<select class="segment-select" id="adType" name="adType">
<option value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_SALE.title %></option>
<option value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
selected="selected"
<% } %>
><%= AD_TYPE.AD_TYPE_RENT.title %></option>
</select>
<span class="segmented">
<label>
<input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_SALE.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_SALE.id) { %>
checked
<% } %>>
<span class="label"><%= AD_TYPE.AD_TYPE_SALE.title %></span>
</label>
<label>
<input type="radio" name="adType" value="<%= AD_TYPE.AD_TYPE_RENT.id %>"
<% if (selectedAdType === AD_TYPE.AD_TYPE_RENT.id) { %>
checked
<% } %>>
<span class="label"><%= AD_TYPE.AD_TYPE_RENT.title %></span>
</label>
</span>
</div>
<br>
@@ -37,45 +42,6 @@
</form>
<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) {
$("#realEstateType").val(id);
$("#realEstateTypeSelection > a").attr("onclick", "");