Skip to content

Commit 967a8b9

Browse files
jaspermdegrootjaspermdegroot
committed
Range: coding standards
1 parent 3205158 commit 967a8b9

File tree

3 files changed

+146
-152
lines changed

3 files changed

+146
-152
lines changed

‎css/structure/jquery.mobile.forms.range.css‎

Lines changed: 84 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,140 +1,139 @@
11
.ui-range{
2-
position:relative;
3-
display:inline-block;
4-
min-height:1em;
5-
width:100%;
6-
padding-right:30px;
7-
box-sizing:border-box;
2+
position:relative;
3+
display:inline-block;
4+
min-height:1em;
5+
width:100%;
6+
padding-right:30px;
7+
box-sizing:border-box;
88
}
99
.ui-range div.ui-slider{
10-
position:absolute;
11-
left:0;
12-
top:0;
13-
width:100%;
14-
margin:0;
10+
position:absolute;
11+
left:0;
12+
top:0;
13+
width:100%;
14+
margin:0;
1515
}
1616
.ui-range label.ui-slider{
17-
font-weight: bold;
18-
color: #222 /*{c-bup-color}*/;
19-
text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
20-
display:inline-block;
21-
margin-right:3px;
17+
font-weight: bold;
18+
color: #222 /*{c-bup-color}*/;
19+
text-shadow: 0 /*{c-bup-shadow-x}*/ 1px /*{c-bup-shadow-y}*/ 0 /*{c-bup-shadow-radius}*/ #fff /*{c-bup-shadow-color}*/;
20+
display:inline-block;
21+
margin-right:3px;
2222
}
2323
.ui-range-sliders{
24-
position:relative;
25-
display:inline-block;
26-
width:60%;
27-
min-height:1em;
28-
margin:0 0 0 20px;
24+
position:relative;
25+
display:inline-block;
26+
width:60%;
27+
min-height:1em;
28+
margin:0 0 0 20px;
2929
}
3030

3131
.ui-range input.ui-slider-input:last-child{
32-
margin-left:20px;
32+
margin-left:20px;
3333
}
3434

3535
/*full width style*/
3636
.ui-range.ui-range-full .ui-range-sliders{
37-
width:100%;
37+
width:100%;
3838
}
3939

4040
/*mini styles*/
4141
.ui-range.ui-mini .ui-range-sliders,
4242
.ui-range.ui-mini.ui-range-split.ui-range-full .ui-range-sliders{
43-
margin-top:0;
43+
margin-top:0;
4444
}
4545
.ui-range label.ui-slider.ui-mini,
4646
.ui-range.ui-mini span.ui-range-dash{
47-
margin-top:.5em;
47+
margin-top:.5em;
4848
}
4949
/*field-contain styling*/
5050
.ui-field-contain .ui-range label.ui-slider{
51-
width:20%;
52-
font-weight:normal;
53-
margin: 0 2% 0 0;
54-
display:inline-block;
51+
width:20%;
52+
font-weight:normal;
53+
margin: 0 2% 0 0;
54+
display:inline-block;
5555
}
5656
.ui-field-contain .ui-range span.ui-range-dash{
57-
margin-top:.5em;
57+
margin-top:.5em;
5858
}
5959
.ui-field-contain .ui-range .ui-range-sliders{
60-
margin-top:0;
60+
margin-top:0;
6161
}
6262
/*split styles*/
6363
.ui-range.ui-range-split .ui-range-dash{
64-
display:none;
64+
display:none;
6565
}
6666
.ui-range.ui-range-split.ui-range-full label.ui-slider{
67-
display:block;
68-
float:none;
69-
margin-top:0;
67+
display:block;
68+
float:none;
69+
margin-top:0;
7070
}
7171
.ui-range label.ui-slider,
7272
.ui-range span.ui-range-dash{
73-
float:left;
74-
margin-top:1em;
73+
float:left;
74+
margin-top:1em;
7575
}
7676
.ui-range input.ui-slider-input{
77-
float:left;
77+
float:left;
7878
}
7979
.ui-range.ui-range-split input.ui-slider-input.ui-range-last{
80-
float:right;
80+
float:right;
8181
}
8282
.ui-range .ui-range-sliders{
83-
overflow: hidden;
84-
height: 2.5em;
85-
margin-top: .5em;
86-
width: auto;
87-
display:block;
83+
overflow: hidden;
84+
height: 2.5em;
85+
margin-top: .5em;
86+
width: auto;
87+
display:block;
8888
}
8989
.ui-range.ui-range-split.ui-range-full .ui-range-sliders{
90-
margin-top:.7em;
90+
margin-top:.7em;
9191
}
9292
.ui-range .ui-range-sliders .ui-slider{
93-
width:86%;
94-
margin-left:20px;
95-
top:.7em;
93+
width:86%;
94+
margin-left:20px;
95+
top:.7em;
9696
}
9797
.ui-range.ui-range-split .ui-range-sliders .ui-slider{
98-
margin-left:7%;
98+
margin-left:7%;
9999
}
100100
.ui-range.ui-range-split.ui-range-full .ui-range-sliders{
101-
width:auto;
101+
width:auto;
102102
}
103103

104104
@media (max-width: 28em) {
105-
.ui-range div.ui-range-sliders,
106-
.ui-range.ui-range-split.ui-range-full div.ui-range-sliders{
107-
width:100%;
108-
margin:0 0 0 15px;
109-
}
110-
.ui-range label.ui-slider,
111-
.ui-range.ui-range-split.ui-range-full label.ui-slider,
112-
.ui-range.ui-range-full label.ui-slider,{
113-
margin-top:1em;
114-
display:inline;
115-
}
116-
.ui-range .ui-range-dash {
117-
display: inline;
118-
}
119-
.ui-range label.ui-slider{
120-
display:inline-block;
121-
}
122-
.ui-range input.ui-slider-input,
123-
.ui-range span.ui-range-dash,
124-
.ui-range.ui-range-split input.ui-slider-input,
125-
.ui-range.ui-range-split input.ui-slider-input.ui-range-last{
126-
float:none;
127-
}
128-
.ui-range.ui-range-split .ui-range-sliders,
129-
.ui-range .ui-range-sliders{
130-
width:100%;
131-
margin-top:0;
132-
overflow:visible;
133-
height:1.4em;
134-
}
135-
.ui-range.ui-range-split .ui-range-sliders .ui-slider{
136-
width:100%;
137-
margin-left:0;
138-
}
105+
.ui-range div.ui-range-sliders,
106+
.ui-range.ui-range-split.ui-range-full div.ui-range-sliders{
107+
width:100%;
108+
margin:0 0 0 15px;
109+
}
110+
.ui-range label.ui-slider,
111+
.ui-range.ui-range-split.ui-range-full label.ui-slider,
112+
.ui-range.ui-range-full label.ui-slider,{
113+
margin-top:1em;
114+
display:inline;
115+
}
116+
.ui-range .ui-range-dash {
117+
display: inline;
118+
}
119+
.ui-range label.ui-slider{
120+
display:inline-block;
121+
}
122+
.ui-range input.ui-slider-input,
123+
.ui-range span.ui-range-dash,
124+
.ui-range.ui-range-split input.ui-slider-input,
125+
.ui-range.ui-range-split input.ui-slider-input.ui-range-last{
126+
float:none;
127+
}
128+
.ui-range.ui-range-split .ui-range-sliders,
129+
.ui-range .ui-range-sliders{
130+
width:100%;
131+
margin-top:0;
132+
overflow:visible;
133+
height:1.4em;
134+
}
135+
.ui-range.ui-range-split .ui-range-sliders .ui-slider{
136+
width:100%;
137+
margin-left:0;
138+
}
139139
}
140-

‎js/widgets/forms/range.js‎

Lines changed: 43 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,46 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
2323

2424
_create: function() {
2525
var inputFirst,inputs,sliders, inputLast, sliderFirst, sliderLast, sliderLastWidth, sliderFirstWidth, label,
26-
self = this,
27-
$el = self.element,
28-
o = this.options;
26+
self = this,
27+
$el = self.element,
28+
o = this.options;
29+
2930
inputFirst = $el.find( "input:first" );
3031
inputLast = $el.find( "input:last" );
3132
inputFirst.addClass( "ui-range-first" );
3233
inputLast.addClass( "ui-range-last" );
3334
label = $el.find( "label" );
34-
$el.append("<div class=\"ui-range-sliders\" />");
35-
sliders = $el.find(".ui-range-sliders");
35+
$el.append( "<div class=\"ui-range-sliders\" />" );
36+
sliders = $el.find( ".ui-range-sliders" );
3637

3738
if( o.mini ){
38-
label.addClass("ui-mini");
39+
label.addClass( "ui-mini" );
3940
inputFirst.addClass( "ui-mini" );
4041
inputLast.addClass( "ui-mini" );
41-
self.element.addClass("ui-mini");
42+
self.element.addClass( "ui-mini" );
4243
}
44+
4345
$el.find( "input" ).slider({
4446
theme: o.theme,
4547
trackTheme: o.trackTheme,
4648
disabled: o.disabled,
4749
mini: o.mini,
4850
highlight: o.highlight
4951
}).slider( "refresh" );
52+
5053
$el.addClass( "ui-range" );
5154
sliderFirst = $el.find( ".ui-slider:first" ).addClass( "ui-slider-first" );
5255
sliderLast = $el.find( ".ui-slider:last" ).addClass( "ui-slider-last" );
53-
sliderFirst.appendTo(sliders);
56+
sliderFirst.appendTo( sliders );
57+
5458
if( o.split ) {
5559
$el.addClass( "ui-range-split" );
5660
}
57-
inputFirst.after("<span class=\"ui-range-dash\">&nbsp;-&nbsp;</span>");
5861

59-
sliderLast.appendTo(sliders);
62+
inputFirst.after( "<span class=\"ui-range-dash\">&nbsp;-&nbsp;</span>" );
63+
sliderLast.appendTo( sliders );
6064
label.addClass( "ui-slider" );
65+
6166
$.extend( self, {
6267
inputFirst: inputFirst,
6368
inputLast: inputLast,
@@ -75,33 +80,40 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
7580

7681
_bindChangeEvents: function() {
7782
this._on( {
78-
"change input": function( event ){
83+
"change input": function( event ) {
7984
var min = parseFloat( this.inputFirst.val(), 10 ),
8085
max = parseFloat( this.inputLast.val(), 10 ),
81-
first = $(event.target).hasClass("ui-range-first");
82-
if( min > max ) {
83-
$( event.target ).val(first ? max: min).slider("refresh");
84-
}
85-
if(first){
86-
this.sliderFirstWidth = this.sliderFirst.find( ".ui-slider-bg" ).width();
87-
} else {
88-
this.sliderLastWidth = this.sliderLast.find( ".ui-slider-bg" ).width();
89-
}
90-
if( min !== max || !first ) this._updateHighlight();
86+
first = $( event.target ).hasClass( "ui-range-first" );
87+
88+
if( min > max ) {
89+
$( event.target ).val( first ? max: min ).slider( "refresh" );
90+
}
91+
92+
if( first ) {
93+
this.sliderFirstWidth = this.sliderFirst.find( ".ui-slider-bg" ).width();
94+
} else {
95+
this.sliderLastWidth = this.sliderLast.find( ".ui-slider-bg" ).width();
96+
}
97+
98+
if( min !== max || !first ) {
99+
this._updateHighlight();
100+
}
91101
}
92102
});
93103
},
94104

95105
_bindResize: function() {
96106
var self = this,delay;
97-
this._on( this.element.closest(".ui-page") , {
98-
"pageshow": function(){
107+
108+
this._on( this.element.closest( ".ui-page" ), {
109+
"pageshow": function() {
99110
self.sliderFirstWidth = self.sliderFirst.find( ".ui-slider-bg" ).width();
100111
self.sliderLastWidth = self.sliderLast.find( ".ui-slider-bg" ).width();
101112
}
102113
});
103-
this._on( window , {
104-
"throttledresize": function(event){
114+
115+
this._on( window, {
116+
"throttledresize": function( event ) {
105117
self.sliderLastWidth = self.sliderLast.find( ".ui-slider-bg" ).width();
106118
}
107119
});
@@ -110,8 +122,7 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
110122
_bindToggle: function() {
111123
this._on( this.element.find( ".ui-slider-handle" ), {
112124
"vclick": function( event ){
113-
var first = $(event.target).closest( ".ui-slider" ).is( ":first-child" );
114-
console.log(first);
125+
var first = $( event.target ).closest( ".ui-slider" ).is( ":first-child" );
115126
this.sliderFirst.css( "z-index", first ? 1 : "" );
116127
}
117128
});
@@ -120,10 +131,11 @@ define( [ "jquery", "../../jquery.mobile.core", "../../jquery.mobile.widget", ".
120131
_updateHighlight: function() {
121132
var newWidth = this.sliderLastWidth - this.sliderFirstWidth,
122133
tWidth = this.sliderLast.width();
123-
this.element.find( ".ui-slider-bg" ).css({
124-
"margin-left": this.sliderFirstWidth / tWidth * 100 + "%",
125-
"width": (newWidth) / tWidth * 100 + "%"
126-
});
134+
135+
this.element.find( ".ui-slider-bg" ).css({
136+
"margin-left": this.sliderFirstWidth / tWidth * 100 + "%",
137+
"width": ( newWidth ) / tWidth * 100 + "%"
138+
});
127139
}
128140

129141
});

0 commit comments

Comments
 (0)