// Remember Brick datepicker august 30 to oct bug var options = { valueNames: ["title", "description", "location", "town", "url", "phone", "start_date", "end_date"], item: '<li class="event-item"><div class="event-container">\ <div class="event-info">\ <h3 class="title"></h3>\ <span class="location"></span>, \ <span class="town"></span>\ <div>\ <span class="start_date"></span>\ to:\ <span class="end_date"></span>\ </div>\ <div class="phone"></div>\ <summary class="description"></summary>\ </div>\ <a class="url"><button class="more-info">more info</button></a>\ <div class="clear"></div>\ </div></li>' }; var values = [{ title: "SATURN: Exploring a Celestial Wonder", description: 'From an ancient "wandering star" to a modern day celestial laboratory, Saturn tantalizes the eye, spirit and mind. This ringed wonder has been explored with telescopes, flyby probes and now the orbiting Cassini spacecraft. Ongoing.', location: "Newark Museum", town: "Newark", url: "http://www.newarkmuseum.org/", phone: "973-596-6550", start_date: "Aug 30, 2013 12:00 PM", end_date: "Aug 30, 2013 5:00 PM" }, { title: "Job Readiness Program & Career Quest", description: 'Ongoing program that assists women to become "job ready," and successfully find employment. Meet with a professional and receive guidance in goal setting, career planning, resume writing, interview techniques, and job search strategies. For information or to register call 973-994-4994 or www.centerforwomenNJ.org', location: "NCJW Center for Women", town: "Livingston", url: "http://www.centerforwomennj.org/", phone: "973-994-4994", start_date: new Date("Jul 01, 2013 12:00 PM"), end_date: new Date("Sep 30, 2013 5:00 PM") }, { title: "Job Readiness Program & Career Quest", description: 'Ongoing program that assists women to become "job ready," and successfully find employment. Meet with a professional and receive guidance in goal setting, career planning, resume writing, interview techniques, and job search strategies. For information or to register call 973-994-4994 or www.centerforwomenNJ.org', location: "NCJW Center for Women", town: "Livingston", url: "http://www.centerforwomennj.org/", phone: "973-994-4994", start_date: new Date("Jul 01, 2013 12:00 PM"), end_date: new Date("Sep 30, 2013 5:00 PM") }, { title: "SATURN: Exploring a Celestial Wonder", description: 'From an ancient "wandering star" to a modern day celestial laboratory, Saturn tantalizes the eye, spirit and mind. This ringed wonder has been explored with telescopes, flyby probes and now the orbiting Cassini spacecraft. Ongoing.', location: "Newark Museum", town: "Montclair", url: "http://www.newarkmuseum.org/", phone: "973-596-6550", start_date: new Date("Aug 30, 2013"), end_date: new Date("Sep 30, 2013") }]; var eventList = window.eventList = new List('event-list', options, values); function filterByValues(filterItems) { //this really needs to be refactored filterItems.towns = filterItems.towns === null ? [] : filterItems.towns; filterItems.days = filterItems.days === null ? [] : filterItems.days; if (filterItems.towns.length === 0 && filterItems.days.length === 0) { eventList.filter(); } else if (filterItems.towns.length > 0 && filterItems.days.length === 0) { eventList.filter(function (item) { var values = item.values(); for (var i in filterItems.towns) { if (values.town === filterItems.towns[i]) { return true; } } return false; }); } else if (filterItems.days.length > 0 && filterItems.towns.length === 0) { eventList.filter(function (item) { var values = item.values(); for (var i in filterItems.days) { //Fixthis if (values.start_date < filterItems.days[i] && filterItems.days[i] < values.end_date) { return true; } } return false; }); } else { eventList.filter(function (item) { var values = item.values(); for (var town in filterItems.towns) { //Day for (var day in filterItems.cuisines) { //TODO I need to think about how to best filter by the union of the two if (values.town === filterItems.towns[town] && values.cuisine === filterItems.cuisines[cuisine]) { return true; } } } return false; }); } } var selected = { towns: [], days: [] }; function townUpdate(e, obj) { if (obj === undefined) { selected.towns = $(e.target).val(); filterByValues(selected); } else if (obj.selected !== undefined) { selected.towns.push(obj.selected); filterByValues(selected); } else if (obj.deselected !== undefined) { selected.towns = _.without(selected.towns, obj.deselected); filterByValues(selected); } } $("x-datepicker").on("change", function(e){ console.log(this.submitValue, new Date(this.submitValue), "\n", this.value, new Date(this.value)) selected.days = [new Date(this.submitValue)]; filterByValues(selected); }); $(".chosen-select.towns").on("chosen:ready", function (e, obj) { this.removeChild(this.firstElementChild); }).chosen({ display_disabled_options: false }).change(townUpdate).trigger("chosen:updated"); // Some underscore methods to make my life easier var ArrayProto = Array.prototype, concat = ArrayProto.concat, slice = ArrayProto.slice, each = ArrayProto.each, nativeFilter = ArrayProto.filter, nativeIndexOf = ArrayProto.indexOf, _ = {}; _.without = function (array) { return _.difference(array, slice.call(arguments, 1)); }; _.difference = function (array) { var rest = concat.apply(ArrayProto, slice.call(arguments, 1)); return _.filter(array, function (value) { return !_.contains(rest, value); }); }; _.filter = function (obj, iterator, context) { var results = []; if (obj == null) return results; if (nativeFilter && obj.filter === nativeFilter) return obj.filter(iterator, context); each(obj, function (value, index, list) { if (iterator.call(context, value, index, list)) results.push(value); }); return results; }; _.contains = function (obj, target) { if (obj == null) return false; if (nativeIndexOf && obj.indexOf === nativeIndexOf) return obj.indexOf(target) != -1; return any(obj, function (value) { return value === target; }); };
<div class="container"> <select data-placeholder="Choose a town..." multiple class="chosen-select towns"> <option value='' disabled selected style='display:none;'>Choose a town...</option> <option>Belleville</option> <option>Bloomfield</option> <optgroup label="The Caldwells"> <option>Caldwell</option> <option>North Caldwell</option> <option>West Caldwell</option> </optgroup> <option>Cedar Grove</option> <option>Essex Fells</option> <option>Fairfield</option> <option>Glen Ridge</option> <option>Irvington</option> <option>Livingston</option> <option>Maplewood</option> <option>Millburn</option> <option>Montclair</option> <option>Newark</option> <option>Nutley</option> <optgroup label="The Oranges"> <option>East Orange</option> <option>Orange</option> <option>West Orange</option> <option>South Orange</option> </optgroup> <option>Roseland</option> <option>Verona</option> </select> <x-datepicker polyfill></x-datepicker> <!-- <select data-placeholder="Choose a date..." multiple class="chosen-select cuisines"> <option value='' disabled selected style='display:none;'>Choose a date...</option> <option>Never</option> </select> --> <div id="event-list"> <ul class="list"></ul> </div> </div>
body { margin: 10px; font-family: sans-serif; background-color: white; font-size: 18px; min-width: 320px; } .container { position: relative; width: 590px; width: 33em; margin: 0 auto; } .chosen-select, .chosen-container { width: 49.5% !important; } x-datepicker { font-size: 13px; width: 49%; top: -4px; height: 27px; } .start_date, .end_date { text-decoration: underline; } /* #event-list { width: 590px; width: 33em; } */ .title { margin: 0.2em 0; color: #007dc5; font-weight: 300; } .clear { clear: both; } .event-item { padding: 0.35em 1em 0.65em; margin: 1em 0; list-style: none; background-color: #e6e7e8; color: #231f20; font-weight: 100; } .list { padding-left: 0; } .event-info { float: left; width: 75%; } .more-info { font-size: 24px; font-weight: 600; text-align: center; margin-top: 4px; width: 4.1em; float: right; border: 0; line-height: normal; padding: 9px 14px 9px; /* This seems to be jittery when the page reflows */ padding: 0.375em 0.583em; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; background-color: hsl(201, 100%, 30%) !important; background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00a5ff", endColorstr="#006399"); background-image: -khtml-gradient(linear, left top, left bottom, from(#00a5ff), to(#006399)); background-image: -moz-linear-gradient(top, #00a5ff, #006399); background-image: -ms-linear-gradient(top, #00a5ff, #006399); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00a5ff), color-stop(100%, #006399)); background-image: -webkit-linear-gradient(top, #00a5ff, #006399); background-image: -o-linear-gradient(top, #00a5ff, #006399); background-image: linear-gradient(#00a5ff, #006399); border-color: #006399 #006399 hsl(201, 100%, 25%); color: #fff !important; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.33); -webkit-font-smoothing: antialiased; } @media only screen and (max-width : 620px) { .container { width: 98%; font-size: 15px; } .more-info { font-size: 18px; } .chosen-select, .chosen-container { width: 49.4% !important; } x-datepicker { width: 48.5%; top: -3px; } } @media only screen and (max-width : 365px) { .more-info { font-size: 16px; width: 4.1em; padding: 0.5em 0.6em; } .chosen-select, .chosen-container { width: 49.3% !important; } }