Skip to content

Commit 48fd7c5

Browse files
bjorn2404bjorn2404
committed
Example styling updated with larger fonts, location list widths changed to percentages, added next/prev links to pagination functionality
1 parent 9ade37d commit 48fd7c5

7 files changed

+149
-65
lines changed

‎dist/css/storelocator.css

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
float: left;
1515
margin-left: 20px;
1616
width: 875px;
17-
font: normal 12px Arial, Helvetica, sans-serif;
17+
font: normal 14px/20px Arial, Helvetica, sans-serif;
1818
color: #333333;
1919
}
2020
.bh-sl-container .bh-sl-form-container {
@@ -38,18 +38,23 @@
3838
.bh-sl-container .form-input input,
3939
.bh-sl-container .form-input select {
4040
margin: 0 15px 0 10px;
41-
padding: 4px;
41+
padding: 6px 12px;
4242
line-height: 16px;
4343
border: 1px solid #cccccc;
44+
font: normal 14px/18px Arial, Helvetica, sans-serif;
45+
-webkit-border-radius: 4px;
46+
border-radius: 4px;
4447
}
4548
.bh-sl-container button {
4649
float: left;
4750
cursor: pointer;
4851
margin-top: 3px;
49-
padding: 3px 6px;
52+
padding: 6px 12px;
5053
background: #ae2118;
5154
border: 1px solid #961f17;
55+
font: normal 14px/18px Arial, Helvetica, sans-serif;
5256
color: #ffffff;
57+
white-space: nowrap;
5358
-webkit-border-radius: 4px;
5459
border-radius: 4px;
5560
}
@@ -131,7 +136,7 @@
131136
float: left;
132137
margin: 10px 0 0 6px;
133138
padding: 2px 3px;
134-
width: 17px;
139+
width: 10%;
135140
text-align: center;
136141
background: #451400;
137142
color: #ffffff;
@@ -140,7 +145,7 @@
140145
.bh-sl-container .bh-sl-loc-list .list-details {
141146
float: left;
142147
margin-left: 6px;
143-
width: 165px;
148+
width: 80%;
144149
}
145150
.bh-sl-container .bh-sl-loc-list .list-details .list-content {
146151
padding: 10px;

‎dist/css/storelocator.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/jquery.storelocator.js

Lines changed: 62 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/*! jQuery Google Maps Store Locator - v1.4.9 - 2014-08-12
1+
/*! jQuery Google Maps Store Locator - v1.4.9 - 2014-08-31
22
* http://www.bjornblog.com/web/jquery-store-locator-plugin
33
* Copyright (c) 2014 Bjorn Holine; Licensed MIT */
44

@@ -600,32 +600,74 @@
600600
}
601601
},
602602

603+
/**
604+
* Build pagination numbers and next/prev links
605+
*
606+
* @param currentPage {number}
607+
* @param totalPages {number}
608+
* @returns {string}
609+
*/
610+
paginationOutput: function(currentPage, totalPages) {
611+
currentPage = parseFloat(currentPage);
612+
var output = '';
613+
var nextPage = currentPage + 1;
614+
var prevPage = currentPage - 1;
615+
616+
// Previous page
617+
if( currentPage > 0 ) {
618+
output += '<li class="bh-sl-next-prev" data-page="' + prevPage + '">&laquo; Prev</li>';
619+
}
620+
621+
// Add the numbers
622+
for (var p = 0; p < totalPages; p++) {
623+
var n = p + 1;
624+
625+
if (p === currentPage) {
626+
output += '<li class="bh-sl-current" data-page="' + p + '">' + n + '</li>';
627+
}
628+
else {
629+
output += '<li data-page="' + p + '">' + n + '</li>';
630+
}
631+
}
632+
633+
// Next page
634+
if( nextPage < totalPages ) {
635+
output += '<li class="bh-sl-next-prev" data-page="' + nextPage + '">Next &raquo;</li>';
636+
}
637+
638+
return output;
639+
},
640+
603641
/**
604642
* Set up the pagination pages
605643
*
606-
* @param currentPage (number) optional current page
644+
* @param currentPage {number} optional current page
607645
*/
608646
paginationSetup: function (currentPage) {
609-
// Only append the pagination number if they're not already appended
610-
if ($('.bh-sl-pagination-container ol').length === 0) {
611-
if (typeof currentPage === 'undefined') {
612-
currentPage = 0;
613-
}
614-
var pagesOutput = '';
647+
var pagesOutput = '';
648+
var totalPages = locationset.length / this.settings.locationsPerPage;
615649

616-
for (var p = 0; p < (locationset.length / this.settings.locationsPerPage); p++) {
617-
var n = p + 1;
650+
// Current page check
651+
if (typeof currentPage === 'undefined') {
652+
currentPage = 0;
653+
}
618654

619-
if (p === currentPage) {
620-
pagesOutput += '<li data-page="' + p + '" class="bh-sl-current">' + n + '</li>';
621-
}
622-
else {
623-
pagesOutput += '<li data-page="' + p + '">' + n + '</li>';
624-
}
625-
}
626-
//TODO: Target this better
627-
$('.bh-sl-pagination-container').append('<ol class="bh-sl-pagination">' + pagesOutput + '</ol>');
655+
// Initial pagination setup
656+
if ($('.bh-sl-pagination-container .bh-sl-pagination').length === 0) {
657+
658+
pagesOutput = this.paginationOutput(currentPage, totalPages);
659+
}
660+
// Update pagination on page change
661+
else {
662+
// Remove the old pagination
663+
$('.bh-sl-pagination-container .bh-sl-pagination').empty();
664+
665+
// Add the numbers
666+
pagesOutput = this.paginationOutput(currentPage, totalPages);
628667
}
668+
669+
//TODO: Target this better
670+
$('.bh-sl-pagination-container .bh-sl-pagination').append(pagesOutput);
629671
},
630672

631673
/**
@@ -1242,7 +1284,7 @@
12421284

12431285
// Output page numbers if pagination setting is true
12441286
if (_this.settings.pagination === true) {
1245-
_this.paginationSetup();
1287+
_this.paginationSetup(page);
12461288
}
12471289

12481290
// Slide in the map container
@@ -1337,12 +1379,6 @@
13371379

13381380
// Handle pagination
13391381
$(document).on('click', '.bh-sl-pagination li', function () {
1340-
// Remove the current class
1341-
$('.bh-sl-pagination li').attr('class', '');
1342-
1343-
// Add the current class
1344-
$(this).addClass('bh-sl-current');
1345-
13461382
// Run paginationChange
13471383
_this.paginationChange($(this).attr('data-page'));
13481384
});

‎dist/js/jquery.storelocator.min.js

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/pagination-example.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,9 @@ <h1>Using Chipotle as an Example</h1>
3333
<div id="map" class="bh-sl-map"></div>
3434
</div>
3535

36-
<div class="bh-sl-pagination-container"></div>
36+
<div class="bh-sl-pagination-container">
37+
<ol class="bh-sl-pagination"></ol>
38+
</div>
3739
</div>
3840

3941
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

‎src/css/storelocator.less

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
float: left;
2727
margin-left: 20px;
2828
width: 875px;
29-
font: normal 12px @arialFont;
29+
font: normal 14px/20px @arialFont;
3030
color: @textgray;
3131

3232
.bh-sl-form-container {
@@ -52,20 +52,25 @@
5252

5353
input,select {
5454
margin: 0 15px 0 10px;
55-
padding: 4px;
55+
padding: 6px 12px;
5656
line-height: 16px;
5757
border: 1px solid @gray;
58+
font: normal 14px/18px @arialFont;
59+
-webkit-border-radius: 4px;
60+
border-radius: 4px;
5861
}
5962
}
6063

6164
button {
6265
float: left;
6366
cursor: pointer;
6467
margin-top: 3px;
65-
padding: 3px 6px;
68+
padding: 6px 12px;
6669
background: @red;
6770
border: 1px solid @darkred;
71+
font: normal 14px/18px @arialFont;
6872
color: @white;
73+
white-space: nowrap;
6974
-webkit-border-radius: 4px;
7075
border-radius: 4px;
7176
}
@@ -156,7 +161,7 @@
156161
float: left;
157162
margin: 10px 0 0 6px;
158163
padding: 2px 3px;
159-
width: 17px;
164+
width: 10%;
160165
text-align: center;
161166
background: @maroon;
162167
color: @white;
@@ -166,7 +171,7 @@
166171
.list-details {
167172
float: left;
168173
margin-left: 6px;
169-
width: 165px;
174+
width: 80%;
170175

171176
.list-content {
172177
padding: 10px;

‎src/js/jquery.storelocator.js

Lines changed: 61 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -602,32 +602,74 @@
602602
}
603603
},
604604

605+
/**
606+
* Build pagination numbers and next/prev links
607+
*
608+
* @param currentPage {number}
609+
* @param totalPages {number}
610+
* @returns {string}
611+
*/
612+
paginationOutput: function(currentPage, totalPages) {
613+
currentPage = parseFloat(currentPage);
614+
var output = '';
615+
var nextPage = currentPage + 1;
616+
var prevPage = currentPage - 1;
617+
618+
// Previous page
619+
if( currentPage > 0 ) {
620+
output += '<li class="bh-sl-next-prev" data-page="' + prevPage + '">&laquo; Prev</li>';
621+
}
622+
623+
// Add the numbers
624+
for (var p = 0; p < totalPages; p++) {
625+
var n = p + 1;
626+
627+
if (p === currentPage) {
628+
output += '<li class="bh-sl-current" data-page="' + p + '">' + n + '</li>';
629+
}
630+
else {
631+
output += '<li data-page="' + p + '">' + n + '</li>';
632+
}
633+
}
634+
635+
// Next page
636+
if( nextPage < totalPages ) {
637+
output += '<li class="bh-sl-next-prev" data-page="' + nextPage + '">Next &raquo;</li>';
638+
}
639+
640+
return output;
641+
},
642+
605643
/**
606644
* Set up the pagination pages
607645
*
608-
* @param currentPage (number) optional current page
646+
* @param currentPage {number} optional current page
609647
*/
610648
paginationSetup: function (currentPage) {
611-
// Only append the pagination number if they're not already appended
612-
if ($('.bh-sl-pagination-container ol').length === 0) {
613-
if (typeof currentPage === 'undefined') {
614-
currentPage = 0;
615-
}
616-
var pagesOutput = '';
649+
var pagesOutput = '';
650+
var totalPages = locationset.length / this.settings.locationsPerPage;
617651

618-
for (var p = 0; p < (locationset.length / this.settings.locationsPerPage); p++) {
619-
var n = p + 1;
652+
// Current page check
653+
if (typeof currentPage === 'undefined') {
654+
currentPage = 0;
655+
}
620656

621-
if (p === currentPage) {
622-
pagesOutput += '<li data-page="' + p + '" class="bh-sl-current">' + n + '</li>';
623-
}
624-
else {
625-
pagesOutput += '<li data-page="' + p + '">' + n + '</li>';
626-
}
627-
}
628-
//TODO: Target this better
629-
$('.bh-sl-pagination-container').append('<ol class="bh-sl-pagination">' + pagesOutput + '</ol>');
657+
// Initial pagination setup
658+
if ($('.bh-sl-pagination-container .bh-sl-pagination').length === 0) {
659+
660+
pagesOutput = this.paginationOutput(currentPage, totalPages);
661+
}
662+
// Update pagination on page change
663+
else {
664+
// Remove the old pagination
665+
$('.bh-sl-pagination-container .bh-sl-pagination').empty();
666+
667+
// Add the numbers
668+
pagesOutput = this.paginationOutput(currentPage, totalPages);
630669
}
670+
671+
//TODO: Target this better
672+
$('.bh-sl-pagination-container .bh-sl-pagination').append(pagesOutput);
631673
},
632674

633675
/**
@@ -1244,7 +1286,7 @@
12441286

12451287
// Output page numbers if pagination setting is true
12461288
if (_this.settings.pagination === true) {
1247-
_this.paginationSetup();
1289+
_this.paginationSetup(page);
12481290
}
12491291

12501292
// Slide in the map container
@@ -1339,12 +1381,6 @@
13391381

13401382
// Handle pagination
13411383
$(document).on('click', '.bh-sl-pagination li', function () {
1342-
// Remove the current class
1343-
$('.bh-sl-pagination li').attr('class', '');
1344-
1345-
// Add the current class
1346-
$(this).addClass('bh-sl-current');
1347-
13481384
// Run paginationChange
13491385
_this.paginationChange($(this).attr('data-page'));
13501386
});

0 commit comments

Comments
 (0)