Skip to content

Commit e95bf64

Browse files
brianreavisbrianreavis
committed
Added loading spinner to async examples.
1 parent 471fa0e commit e95bf64

9 files changed

+57
-22
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
.DS_Store

‎examples/github.html

+20-1
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,25 @@
5757
.selectize-control.repositories .selectize-dropdown .meta li span {
5858
font-weight: bold;
5959
}
60+
.selectize-control.repositories::before {
61+
-moz-transition: opacity 0.2s;
62+
-webkit-transition: opacity 0.2s;
63+
transition: opacity 0.2s;
64+
content: ' ';
65+
z-index: 2;
66+
position: absolute;
67+
display: block;
68+
top: 12px;
69+
right: 34px;
70+
width: 16px;
71+
height: 16px;
72+
background: url(spinner.gif);
73+
background-size: 16px 16px;
74+
opacity: 0;
75+
}
76+
.selectize-control.repositories.loading::before {
77+
opacity: 0.4;
78+
}
6079
</style>
6180
</head>
6281
<body>
@@ -101,7 +120,7 @@ <h2>&lt;select&gt; (async)</h2>
101120
};
102121
},
103122
load: function(query, callback) {
104-
if (!query.length) return;
123+
if (!query.length) return callback();
105124
$.ajax({
106125
url: 'https://api.github.com/legacy/repos/search/' + encodeURIComponent(query),
107126
type: 'GET',

‎examples/movies.html

+25-10
Original file line numberDiff line numberDiff line change
@@ -38,21 +38,21 @@
3838
font-weight: bold;
3939
margin-right: 5px;
4040
}
41-
.selectize-control.movies .selectize-dropdown .title {
42-
display: block;
43-
}
4441
.selectize-control.movies .selectize-dropdown .description {
4542
font-size: 12px;
46-
display: block;
4743
color: #a0a0a0;
44+
}
45+
.selectize-control.movies .selectize-dropdown .actors,
46+
.selectize-control.movies .selectize-dropdown .description,
47+
.selectize-control.movies .selectize-dropdown .title {
48+
display: block;
4849
white-space: nowrap;
4950
width: 100%;
50-
text-overflow: ellipsis;
5151
overflow: hidden;
52+
text-overflow: ellipsis;
5253
}
5354
.selectize-control.movies .selectize-dropdown .actors {
5455
font-size: 10px;
55-
display: block;
5656
color: #a0a0a0;
5757
}
5858
.selectize-control.movies .selectize-dropdown .actors span {
@@ -80,9 +80,24 @@
8080
.selectize-control.movies .selectize-dropdown .meta li span {
8181
font-weight: bold;
8282
}
83-
.selectize-control.movies .highlight {
84-
background: rgba(255,237,40,0.4);
85-
border-radius: 1px;
83+
.selectize-control.movies::before {
84+
-moz-transition: opacity 0.2s;
85+
-webkit-transition: opacity 0.2s;
86+
transition: opacity 0.2s;
87+
content: ' ';
88+
z-index: 2;
89+
position: absolute;
90+
display: block;
91+
top: 12px;
92+
right: 34px;
93+
width: 16px;
94+
height: 16px;
95+
background: url(spinner.gif);
96+
background-size: 16px 16px;
97+
opacity: 0;
98+
}
99+
.selectize-control.movies.loading::before {
100+
opacity: 0.4;
86101
}
87102
</style>
88103
</head>
@@ -123,7 +138,7 @@ <h2>&lt;select&gt; (async)</h2>
123138
}
124139
},
125140
load: function(query, callback) {
126-
if (!query.length) return;
141+
if (!query.length) return callback();
127142
$.ajax({
128143
url: 'http://api.rottentomatoes.com/api/public/v1.0/movies.json',
129144
type: 'GET',

‎examples/spinner.gif

3.13 KB
Loading

‎jquery.selectize.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
.selectize-input.full {
6464
background-color: #f2f2f2;
6565
}
66-
.selectize-input.dropdown-active:before {
66+
.selectize-input.dropdown-active::before {
6767
content: ' ';
6868
display: block;
6969
position: absolute;

‎jquery.selectize.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -147,8 +147,8 @@
147147
inputClass: 'selectize-input',
148148
dropdownClass: 'selectize-dropdown',
149149

150-
load : null, // function(str, callback)
151-
score : null, // function(data)
150+
load : null, // function(query, callback)
151+
score : null, // function(search)
152152
onChange : null, // function(value)
153153
onItemAdd : null, // function(value, $item) { ... }
154154
onItemRemove : null, // function(value) { ... }
@@ -691,19 +691,19 @@
691691
if (!this.settings.load) return;
692692
if (this.loadedSearches.hasOwnProperty(value)) return;
693693
var self = this;
694-
var $control = this.$control.addClass('loading');
694+
var $wrapper = this.$wrapper.addClass('loading');
695695

696696
this.loading++;
697697
this.loadedSearches[value] = true;
698698
this.settings.load.apply(this, [value, function(results) {
699-
self.loading--;
699+
self.loading = Math.max(self.loading - 1, 0);
700700
if (results && results.length) {
701701
self.addOption(results);
702702
self.refreshOptions(false);
703703
if (self.isInputFocused) self.open();
704704
}
705705
if (!self.loading) {
706-
$control.removeClass('loading');
706+
$wrapper.removeClass('loading');
707707
}
708708
}]);
709709
};

‎jquery.selectize.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/selectize.jquery.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ var defaults = {
4242
dropdownClass: 'selectize-dropdown',
4343

4444
load : null, // function(query, callback)
45-
score : null, // function(data)
45+
score : null, // function(search)
4646
onChange : null, // function(value)
4747
onItemAdd : null, // function(value, $item) { ... }
4848
onItemRemove : null, // function(value) { ... }

‎src/selectize.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -299,19 +299,19 @@ Selectize.prototype.onSearchChange = function(value) {
299299
if (!this.settings.load) return;
300300
if (this.loadedSearches.hasOwnProperty(value)) return;
301301
var self = this;
302-
var $control = this.$control.addClass('loading');
302+
var $wrapper = this.$wrapper.addClass('loading');
303303

304304
this.loading++;
305305
this.loadedSearches[value] = true;
306306
this.settings.load.apply(this, [value, function(results) {
307-
self.loading--;
307+
self.loading = Math.max(self.loading - 1, 0);
308308
if (results && results.length) {
309309
self.addOption(results);
310310
self.refreshOptions(false);
311311
if (self.isInputFocused) self.open();
312312
}
313313
if (!self.loading) {
314-
$control.removeClass('loading');
314+
$wrapper.removeClass('loading');
315315
}
316316
}]);
317317
};

0 commit comments

Comments
 (0)