Last active
May 23, 2017 19:16
-
-
Save amurrell/f7ee437d4da584a27d2b7e24197855ff to your computer and use it in GitHub Desktop.
Alphabetize list of items (cities)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var alphabetCities = { | |
init: function(regions, startLetter) { | |
this.addLetters(regions); | |
this.addLetterPicker(regions); | |
this.selectLetter(startLetter, regions)(); | |
}, | |
letters: [ | |
'a', 'b', 'c', 'd', 'e', | |
'f', 'g', 'h', 'i', 'j', | |
'k', 'l', 'm', 'n', 'o', | |
'p', 'q', 'r', 's', 't', | |
'u', 'v', 'w', 'x', 'y', 'z' | |
], | |
styles: { | |
letters: { | |
disabled: { | |
color: '#ddd' | |
}, | |
enabled: { | |
color: '#1479cc', | |
cursor: 'pointer' | |
}, | |
default: { | |
display: 'inline-block', | |
padding: '10px', | |
'text-transform': 'uppercase' | |
} | |
}, | |
picker: { | |
default: { | |
margin: '10px 0', | |
background: '#eee', | |
'text-align': 'center' | |
} | |
} | |
}, | |
addLetters: function(regions) { | |
regions.children().each(function() { | |
$(this).each(function() { | |
var child = $(this); | |
var anchor = child.find('a'); | |
var letter = anchor.text().trim().charAt(0).toLowerCase(); | |
child.attr('data-letter', letter); | |
}); | |
}); | |
}, | |
addLetterPicker: function(regions) { | |
var _this = this; | |
var top = regions.first(); | |
var picker = $('<div data-letter-picker></div>'); | |
$('body').find('[data-letter-picker]').remove(); | |
picker.css(_this.styles.picker.default); | |
$.each(_this.letters, function(index, value) { | |
var count = regions.find('[data-letter=' + value + ']').length; | |
var item = $('<div data-letter-item data-letter="' + value + '">' + value + '</div>'); | |
item.css(_this.styles.letters.default); | |
if (count < 1) { | |
item.attr('disabled', true).css(_this.styles.letters.disabled); | |
} else { | |
item.css(_this.styles.letters.enabled); | |
item.click(_this.selectLetter(value, regions)); | |
} | |
picker.append(item); | |
}); | |
regions.first().before(picker); | |
}, | |
selectLetter: function(letter, regions) { | |
var _this = this; | |
var letter = letter === undefined || !letter.length ? 'a' : letter; | |
return function() { | |
regions.find('[data-letter]').hide(); | |
regions.find('[data-letter=' + letter + ']').fadeIn(); | |
}; | |
} | |
} | |
alphabetCities.init($('.list-cities'), 'a'); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment