Created
February 22, 2012 20:19
-
-
Save artursapek/1886981 to your computer and use it in GitHub Desktop.
Basically all of the UI objects we were using for bandscape (the concert aggregator)
This file contains 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
// DOM objects used in bandscape main view | |
// author: Artur Sapek | |
// bandscape 2011 | |
// pre: nothing | |
// post: returns top-right control on the map, date and city (city doesn't do anything) and injects into DOM | |
function dateControl(){ | |
var me = this; | |
this.dropdownFairGame = true; | |
this.keepopen = false; | |
this.keepDateOpen = this.keepCityOpen = false; | |
this.lastNonSpecifyOption = maptime_src; | |
// DOM OBJECTS | |
var names = ['container', 'all', 'maptime_container', 'maptime_content']; | |
for (var x in names){ | |
this[names[x]] = createC('div', { className: 'timeControl_' + names[x], id: 'timeControl_' + names[x] }); | |
} | |
this._text_ = createC('div', { className: 'timeControl_regText padding_16'}, 'bands playing '); | |
this.maptime_content.innerHTML = maptime; | |
var textToValues = {'tonight':'tonight','tomorrow night':'tomorrow','this weekend':'weekend','this week':'week','next weekend':'nextweekend','next week':'nextweek'}; | |
this.days = analyzeDates(maptime); | |
var findMaptime = this.days.indexOf(maptimeParse(maptime_src)[0]); | |
if (findMaptime >- 1){ this.days.splice(findMaptime, 1); } | |
// | |
appendobj([ [this.container, this.all], [this.all, this._text_], [this.all, this.maptime_container], [this.maptime_container, this.maptime_content]]); // must be in this order | |
$(this.maptime_container).mouseenter(function(){ // specify | |
if (me.dropdownFairGame){ | |
me.dropdown(); | |
me.maptime_content.className = 'timeControl_content_drained'; | |
} | |
}).mouseleave(function(){ | |
if (me.dropdownFairGame){ | |
me.closeDropdown(); | |
} | |
}); | |
this.initSpecify = function(){ | |
me.closeDropdown(); | |
me.dropdownFairGame = false; | |
$(me.maptime_content).remove(); | |
me.specify_inputbox = createC('input', { 'type' : 'text', 'className': 'specifyControl_textbox specifyControl_textbox_selected' } ); | |
me.maptime_container.appendChild(me.specify_inputbox); | |
$(me.specify_inputbox).focus().autoGrowInput({ comfortZone: 0, minWidth: 25, maxWidth: 300 }).keydown(function(event){ | |
if (event.which == 13){ // when they hit enter, commit it | |
me.maptime_content = new createC('div', { 'className': 'timeControl_maptime_content' }, $(me.specify_inputbox).val() ); | |
me.dropdownFairGame = true; | |
$(me.maptime_container).append(me.maptime_content); | |
parseSpecifyInput($(this).val()) | |
me.maptime_content.innerHTML = '' | |
me.maptime_content.id = 'timeControl_maptime_content'; | |
globals.loaderIMG = createC('img', {'src': '/media/img/date loader.gif'}) | |
me.maptime_content.appendChild(globals.loaderIMG); | |
$(this).remove() | |
event.stopPropagation(); | |
} | |
}); | |
} | |
this.dropdown = function(){ | |
var days = analyzeDates(me.maptime_content.innerHTML); | |
var findMaptime = this.days.indexOf(maptimeParse(maptime_src)[0]); | |
if (findMaptime >- 1){ this.days.splice(findMaptime, 1); } // remove current selection from options list | |
var co = me.dropdown_container = createC('div', { className: 'timeControl_dropdown_container'}); | |
$(co).mouseenter(function(){ // the dropdown container | |
me.keepopen = true; | |
}).mouseleave(function(){ | |
me.keepopen = false; | |
}); | |
me.maptime_container.appendChild(co); | |
for (var d = 0; d < days.length; d ++){ | |
co.appendChild(new this.dayOption(days[d])); | |
} | |
} | |
this.closeDropdown = function(){ | |
rem(me.dropdown_container); | |
me.keepopen = false; | |
me.maptime_content.className = 'timeControl_maptime_content'; | |
} | |
this.dayOption = function(x){ | |
var dayOptionContainer = createC('div', {className:'timeControl_dayOption_container'}); | |
var dayOptionContent = createC('div', {className:'timeControl_dayOption_content'}, x); | |
if (x == 'specify...'){ | |
$(dayOptionContainer).click(function(){ | |
me.initSpecify(); | |
me.days = analyzeDates('f'); | |
}); | |
} else { | |
$(dayOptionContainer).click(function(){ | |
me.lastNonSpecifyOption = textToValues[x]; | |
me.days = analyzeDates(textToValues[x]); | |
hash(textToValues[x]); | |
var oldTimeSelection = me.maptime_content.innerHTML; | |
me.maptime_content.innerHTML = ''; | |
me.maptime_content.id = 'timeControl_maptime_content'; | |
globals.loaderIMG = createC('img', {'src': '/media/img/date loader.gif'}) | |
me.maptime_content.appendChild(globals.loaderIMG); | |
me.closeDropdown(); | |
}).mouseenter(function(){ | |
me.maptime_content.className = 'timeControl_content_drained'; // set styles to open button | |
}); | |
} | |
dayOptionContainer.appendChild(dayOptionContent); | |
return dayOptionContainer; | |
} | |
$('#map_container').prepend( this.container ); | |
} | |
function bandFocus(x){ | |
var me = this; | |
var container = this.container = createC('div', {className: 'focus_container'}); | |
this.all = createC('div', {className: 'focus_main'}); | |
this.bandname = createC('div', {className: 'focus_bandname'}, x.name); | |
this.subhead = createC('div', {className: 'focus_subhead'}); | |
var info = this.info = createC('div', {className: 'focus_info'}); | |
if (x.cover){ | |
this.albumcover = new Image(); | |
this.albumcover.onload = function(){ | |
info.style.left = this.width + 30 + 'px'; | |
}; | |
this.albumcover.className = 'focus_cover'; | |
this.albumcover.src = ('/media/img/covers/' + sanitize(x.name.replace('The ','').substring(0,1)) + '/' + sanitize(x.name, false) + '.jpg').split(' ').join(''); | |
appendobj([ [this.all, this.albumcover] ]); | |
} | |
appendobj([ [this.container, this.all], [this.all, this.info], [this.info, this.bandname], [this.info, this.subhead], | |
[this.subhead,createC('span', {className: '_bf_dark'}, x.genre)] ]); | |
if (x.origin != '') appendobj([ [this.subhead,createC('span', {className: '_bf_grey'}, ' from ')], [this.subhead,createC('span', {className: '_bf_dark'}, x.origin)] ]) | |
if (x.listen){ | |
var site = x.listen.match(/\w+\.com|\w+\.fm/gi).toString().replace('.com','').split('.').join(''); | |
this.listen = createC('div', {className: 'focus_listen'}); | |
this.listento = createC('div', {className: 'focus_listento'}, 'listen to ' + x.name); | |
this.listenlink = createC('a', {className: 'focus_listenlink _ll_' + site, href: x.listen, target: '_blank'}, 'on ' + site + ' »'); | |
appendobj([ [this.all, this.listen], [this.listen, this.listento], [this.listen, this.listenlink] ]); | |
} | |
return this.container; | |
} | |
function venueFocus(x){ | |
this.saniname = sanitize(x.name, false, false); | |
this.iconsrc = '/media/img/vmarkers/' + this.saniname + '.png'; | |
var container = this.container = createC('div', {className: 'focus_container'}); | |
this.all = createC('div', {className: 'focus_main'}); | |
this.icon = new Image; | |
var info = this.info = createC('div', {className: 'focus_info'}); | |
this.icon.onload = function(){ | |
info.style.left = this.width + 40 + 'px'; | |
$('#hub_elements').append(container); | |
}; | |
this.icon.className = 'focus_vicon'; | |
this.icon.src = this.iconsrc; | |
this.venuename = createC('div', {className: 'focus_bandname'}, x.name); | |
this.neighborhood = createC('div', {className: 'focus_subhead'}, x.neighborhood); | |
this.address = createC('div', {className: 'focus_address'}, x.address); | |
appendobj([ [this.all, this.icon], [this.container, this.all], [this.info, this.venuename], [this.info, this.neighborhood], [this.info, this.address], [this.all, this.info] ]); | |
return this.container; | |
} | |
// pre: pass in raw input from user | |
// post: hopefully return a parsed date object or the last valid option selected before | |
function parseSpecifyInput(x){ | |
// this will probably be used a lot so it has to be thorough | |
var monthsWritten = { '01': ['jan', 'january'], '02': ['feb', 'febuary', 'february'], '03': ['mar', 'march'], '04': ['apr', 'april'], '05': ['may'], '06': ['jun', 'june'], '07': ['jul', 'july'], | |
'08': ['aug', 'august'], '09': ['sep', 'sept', 'september'], '10': ['oct', 'october'], '11': ['nov', 'november'], '12': ['dec', 'december'] } | |
var month = null; | |
var day = null; | |
// find seperator | |
var seperators = ['-', ' ', '.', '/', '\\']; // 99% | |
var confirmedSeperators = [ ]; | |
for (var s in seperators){ | |
if (x.indexOf(seperators[s]) != -1){ | |
confirmedSeperators.push(seperators[s]); // this figures out what is seperating the entry. ex 1[.]12[.]11 or March[ ]12 etc. | |
} | |
} | |
if (confirmedSeperators.length == 1){ // else nothing for now, i dont imagine that will ever happen | |
var xSplit = x.split(confirmedSeperators[0]); | |
} else { | |
xSplit = new Array(x); | |
} | |
var foundNumbers = [ ]; | |
var foundText = [ ]; | |
if (xSplit.length > 1){ | |
for (var p in xSplit){ | |
var numberFound = false; | |
var matchNumbers = xSplit[p].match(/\d+/gi); | |
var matchText = xSplit[p].match(/[A-Z]/gi); | |
if (matchNumbers){ | |
foundNumbers.push(matchNumbers.join('')); | |
numberFound = true; | |
} else { | |
foundNumbers.push(''); | |
} | |
if (matchText){ | |
if (!numberFound){ | |
foundText.push(matchText.join('')); | |
} else { | |
if (['th', 'st', 'rd'].indexOf(matchText.join('')) == -1){ | |
foundText.push(matchText.join('')); | |
} else { | |
foundText.push(''); | |
} | |
} | |
} else { | |
foundText.push(''); | |
} | |
} | |
} else { | |
if(xSplit[0].match(/\d+/gi)){ | |
var foundNumbers = new Array(xSplit[0].match(/\d+/gi).join('')); | |
} | |
if(xSplit[0].match(/[A-Z]/gi)){ | |
var foundText = new Array(xSplit[0].match(/[A-Z]/gi).join('')); | |
} | |
} | |
var numberofKeywords = xSplit.length; | |
for (var i = 0; i < numberofKeywords; i ++){ | |
if (foundNumbers[i] != '' && foundText[i] == ''){ // number | |
if (!month && foundNumbers.length > i){ | |
month = (parseInt(foundNumbers[i]) - 1).toString(); | |
if (month.length == 1){ | |
month = '0' + (parseInt(month) + 1).toString(); | |
} | |
} else if (month && parseInt(foundNumbers[i]) <= {1:31, 2:28, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31}[parseInt(month)] && !day){ | |
day = foundNumbers[i]; | |
} | |
} else if (foundNumbers[i] == '' && foundText[i] != ''){ // text | |
for (var m in monthsWritten){ | |
if (monthsWritten[m].indexOf(foundText[i].toLowerCase()) != -1){ | |
month = m; | |
} | |
} | |
} else { | |
// ,'>/ | |
} | |
} | |
if (day && day.length == 1){ | |
day = '0' + day; | |
} | |
if ((month + day).length == 4){ | |
hash(['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'][parseInt(month) - 1] + day); | |
} else { | |
hash(dateControl.lastNonSpecifyOption); // resort to last good option | |
} | |
} | |
// pre: pass in the date option clicked, so as to exclude it | |
// post: return list of date options for dropdown list relative to day of the week | |
function analyzeDates(y){ | |
var tonight = maptimeParse(0)[1][0].getDay(); | |
var days = [ ]; | |
var p = ['tonight', 'tomorrow night']; | |
for (var o in p){ | |
if (y != p[o]){ | |
days.push(p[o]); | |
} | |
} | |
var p = [[[0,5,6], 'this weekend'],[[0,5,6],'this week']]; | |
for (var o in p){ | |
if (p[o][0].indexOf(tonight) == -1 && p[o][1] != y){ | |
days.push(p[o][1]); | |
} | |
} | |
var p = ['next weekend', 'next week'] | |
for (var o in p){ | |
if (p[o] != y){ | |
days.push(p[o]); //always offer this | |
} | |
} | |
days.push('specify...'); | |
return days; | |
} | |
// pre: pass in maptime_src in mmddyy format | |
// post: return array of semantic version and Date object version of that particular day | |
function maptimeParse(x){ | |
if (x.length >= 4){ | |
var month = x.substring(0,2); | |
var day = parseInt(x.substring(2,4)); | |
if (month.substring(0,1) == '0'){ | |
month = parseInt(month.substring(1)); | |
} else { | |
month = parseInt(month); | |
} | |
if (x[2] == '0'){ day = parseInt(x[3]); } | |
if (day <= {1:31, 2:28, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31}[month]) { | |
var specific = new Date(); specific.setFullYear(2012, month - 1, day); | |
var string = 'Sun,Mon,Tue,Wed,Thu,Fri,Sat'.split(',')[specific.getDay()] + ', ' + | |
'Jan,Feb,March,April,May,June,July,Aug,Sept,Oct,Nov,Dec'.split(',')[specific.getMonth()] + ' ' + | |
specific.getDate(); | |
return [string,[specific]]; | |
} | |
} else { | |
if (x == 0){ return ['tonight',[new Date()]]; } | |
if (x == 1){ var tomo = new Date(); tomo.setDate(tomo.getDate()+1); return ['tomorrow night',[tomo]]; } | |
if (x == 2){ var fri = new Date(), sat = new Date(); fri.setDate(sat.getDate()+(5 - fri.getDay())); sat.setDate(sat.getDate()+(6 - sat.getDay())); return ['this weekend',[fri, sat]]; } | |
if (x == 3){ var week = []; var y = 0; for (var i = 0; i < (8 - new Date().getDay()); i ++){var g = new Date(); g.setDate(g.getDate() + y); y ++; ;week.push(g);} return ['this week', week]; } | |
if (x == 4){ var fri = new Date(), sat = new Date(); fri.setDate(sat.getDate()+(12 - fri.getDay())); sat.setDate(sat.getDate()+(13 - sat.getDay())); return ['next weekend',[fri, sat]]; } | |
if (x == 5){ var week = []; var y = 0; for (var i = 0; i < 7; i ++){var g = new Date(); g.setDate(g.getDate() + (8 - g.getDay()) + y); y ++; week.push(g);} return ['next week', week]; } | |
} | |
} | |
// pre: pass in show information | |
// post: returns show listing object. simple :) | |
function showListing(show){ | |
this.all = createC('div', {className: 'show_listing'}); | |
this.all.id = 'sl' + show.id; | |
this.heading = createC('div', {className: '_sl_heading'}, maptimeParse(show.date)[0] + ' <span class="_sl_grey">at</span> ' + show.venue.name); | |
this.all.appendChild(this.heading); | |
for (var b in show.bands){ | |
var band = show.bands[b]; | |
var bt = new bandtab(band) | |
this.all.appendChild(bt); | |
} | |
var codes = show.price.match(/[A-Z][a-z]*/gi); | |
if(codes){ | |
price = parsePrice(show.price, show.date); | |
} else { | |
price = show.price | |
} | |
this.info = createC('div', {className: '_sl_info'}, '<span class="_sl_price">' + price + '</span> / <span class="_sl_age">' + {true: '21+', false: 'all ages'}[show.twentyone] + '</span>'); | |
this.all.appendChild(this.info); | |
return this.all | |
} | |
// pre: pass in name of neighborhood | |
// post: adds a neighborhood div to the swag | |
function neighborhoodGroup(name){ | |
var container = createC('div', {id: name.match(/\w+/gi).join(''), className: 'neighborhood_group'}); | |
var header = createC('div', {className: 'neighborhood_heading'}, name); | |
$(container).append(header); | |
$('#hub_elements').append(container); | |
return container; | |
} | |
// pre: pass in price string with codes like ADV DAYOF UW | |
// post: spits out a semantic string to display | |
function parsePrice(x, showDate){ | |
parts = x.match(/\$[\w\.]*/gi); | |
if (parts){ | |
if (parts.length == 1){ | |
return parts[0].match(/\$\d*/gi); | |
} else { | |
var today = new Date(); | |
var d = today.getDate(); | |
var m = (today.getMonth() + 1).toString(); | |
var y = today.getFullYear().toString().substring(2,4); | |
if (d.length == 1){ d = '0' + d; } | |
if (m.length == 1){ m = '0' + m; } | |
var today = m + d + y; | |
var prices = { }; | |
for (var p in parts){ | |
prices[parts[p].match(/[A-Z][a-z]*/gi).join()] = parts[p].match(/\$\d*/gi); | |
} | |
if (today == showDate && prices['dayof'] !== undefined){ | |
return prices['dayof'] | |
} else if(prices['dayof'] !== undefined) { | |
return prices['adv'] | |
} | |
} | |
} else { | |
return 'Free' | |
} | |
} | |
// pre: pass in array of info for band or venue | |
// post: return DOM infobox to be injected into header | |
function bandtab(data){ | |
var name = data.name, genre = data.genre, origin = data.origin, albumsrc = data.cover; | |
var coversrc = ('/media/img/covers/' + sanitize(name.replace('The ','').substring(0,1)) + '/' + sanitize(name, false) + '__.jpg').split(' ').join(''); | |
var all = createC("div", {className: "bandtab_all", id:sanitize(name, false, false)}); | |
var wrapper = createC("div", {className: "bandtab_wrapper"}); | |
var bandname = createC("div", {className: "bandtab_bandname"}); | |
var bandnamespan = createC("div", {className: "bandtab_bandnamespan"}, name); | |
var genrespan = createC("span", {className: "bandtab_genrespan"}, ''); | |
if (genre != '') genrespan.innerHTML += genre; | |
if (origin != '') genrespan.innerHTML += ' <span class="_sl_grey">from</span> ' + origin; | |
if (albumsrc){ | |
var album = createC("img", {className: "bandtab_album", src: coversrc}); | |
preload(0, [('covers/' + sanitize(name.replace('The ','').substring(0,1)) + '/' + sanitize(name, false) + '.jpg').split(' ').join('')]); | |
} | |
appendobj([[bandname, bandnamespan]]); | |
if (genre != '' || origin != ''){ appendobj([[bandnamespan, genrespan]]); } | |
if (albumsrc) appendobj([[all, album]]); | |
if (genre == '' && origin == '' && !albumsrc){ | |
bandname.style.height ='42px'; | |
wrapper.style.height ='42px'; | |
all.style.height ='42px'; | |
} | |
appendobj([[wrapper, bandname], [all, wrapper]]); | |
if (genre != '' || origin != '' || albumsrc){ | |
$(all).click(function(){ | |
hash(URLsafe(name)); | |
}).addClass('_bt_clickable'); | |
} | |
return all; | |
} | |
function URLsafe(x){ | |
var R = {' ':'_'} | |
for (var r in R){ | |
x = x.split(r).join(R[r]); | |
} | |
return x | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment