Created
June 24, 2015 02:57
-
-
Save oaguy1/cfa70114126c5fbcac92 to your computer and use it in GitHub Desktop.
See this code in action at https://www.cidewalk.com/ads.html
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
| <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> | |
| <style> | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| h1 { | |
| font-size: 18px; | |
| font-weight: bold; | |
| } | |
| h2{ | |
| font-size: 14px; | |
| font-style: oblique; | |
| } | |
| .timeline-contatiner { | |
| width: 50%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| ul.timeline { | |
| list-style: none; | |
| padding: 20px 0 20px; | |
| position: relative; | |
| } | |
| .timeline > li { | |
| margin-bottom: 20px; | |
| position: relative; | |
| } | |
| .timeline > li > .timeline-panel { | |
| border: 1px solid #d4d4d4; | |
| border-radius: 2px; | |
| position: relative; | |
| -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | |
| box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175); | |
| } | |
| .timeline-map { | |
| height: 100%; | |
| min-height: 250px; | |
| } | |
| .timeline-label { | |
| padding: 15px; | |
| } | |
| .timeline-action { | |
| margin: 0 15px 15px 15px; | |
| float: left; | |
| color: #fff; | |
| width: 35px; | |
| height: 35px; | |
| line-height: 35px; | |
| font-size: 1em; | |
| text-align: center; | |
| border-top-right-radius: 50%; | |
| border-top-left-radius: 50%; | |
| border-bottom-right-radius: 50%; | |
| border-bottom-left-radius: 50%; | |
| } | |
| .timeline-action.primary { | |
| background-color: #2e6da4 !important; | |
| } | |
| .timeline-action.success { | |
| background-color: #3f903f !important; | |
| } | |
| .timeline-action.warning { | |
| background-color: #f0ad4e !important; | |
| } | |
| .timeline-action.danger { | |
| background-color: #d9534f !important; | |
| } | |
| .timeline-action.info { | |
| background-color: #5bc0de !important; | |
| } | |
| .timeline-title { | |
| margin-top: 0; | |
| color: inherit; | |
| } | |
| .timeline-body > p, .timeline-body > ul { | |
| margin-bottom: 0; | |
| } | |
| .timeline-body > p + p { | |
| margin-top: 5px; | |
| } | |
| @media only screen and (min-width: 700px) { | |
| .timeline-map { | |
| height: 100%; | |
| min-height: 250px; | |
| display: table-cell; | |
| float: none; | |
| } | |
| .timeline-label { | |
| padding: 15px; | |
| display: table-cell; | |
| float: none; | |
| } | |
| } | |
| </style> | |
| <div class="timeline-container"> | |
| <div id="loading" class="alert alert-info" style="font-size: 30px;text-align: center;">Loading <i class="fa fa-spinner fa-spin"></i></span></div> | |
| <div id="timeline" style="min-height:1000px;display: none;"> | |
| <ul id="activity_feed" class="timeline"></ul> | |
| </div> | |
| </div> | |
| <script> | |
| (function () { | |
| var queued_events = []; | |
| var last_timestamp; | |
| var addEvent = function () { | |
| if (queued_events.length > 0) { | |
| $('#loading').css('display', 'none'); | |
| $('#timeline').css('display', 'block'); | |
| current_event = queued_events.shift(); | |
| // Define App Related attributes | |
| if (current_event.app[0]) { | |
| icon_div = '<div class="timeline-action img-circle img-circle-icon" style="background-image: url(' + current_event.app[0].icon_url + ');background-size: cover;background-repeat: no-repeat;background-position: center;" title="{{event.app[0].app_name}}"></div>'; | |
| app_name = current_event.app[0].app_name; | |
| } else { | |
| icon_div = '<div class="timeline-action info"><span class="glyphicon glyphicon-phone"></span></div>'; | |
| app_name = "mobile"; | |
| } | |
| article = (/^[aeiou]{1}/i.test(app_name)) ? 'An' : 'A'; | |
| timeDiff = timediffString(current_event.timestamp); | |
| map_url = genMapUrl(current_event.location.latitude, current_event.location.longitude, 14, 1200, 500); | |
| $('#activity_feed').prepend('<li><div class=timeline-panel><div class=row><div class="timeline-label col-md-6 col-sm-12"><a href="'+ current_event.creative.click_url +'"><div style=padding:20px><h1>' + current_event.creative.title + '</h1><h2>' + current_event.creative.description + '</h2>' + current_event.creative.display_url + '</div></a><div style=padding:20px>' + icon_div + article + ' <span style=font-style:oblique>' + app_name + '</span> app user saw this Cidewalk promotion<div class=timeline-heading><small class=text-muted><span class="glyphicon glyphicon-time"></span> <span class=timediff>' + timeDiff + '</span> ago in <strong>' + current_event.location.city + ', ' + current_event.location.state + '</strong></small><span class="timestamp hidden">' + current_event.timestamp + '</span></div></div></div><div class="timeline-map col-md-6 col-sm-12" style="background-image:url(\'' + map_url + '\');background-size:cover;background-repeat:no-repeat;background-position:center"></div></div></div></li>'); | |
| //top off the data if there are less than 10 events remaining | |
| if (queued_events.length <= 2) { | |
| getData(last_timestamp); | |
| } | |
| } | |
| }; | |
| var recalcTimestamp = function () { | |
| $('#activity_feed').each( function () { | |
| $(this).find('li').each( function () { | |
| timediff_span = $(this).find('.timediff'); | |
| timestamp_span = $(this).find('.timestamp'); | |
| new_timediff = timediffString(timestamp_span.html()); | |
| timediff_span.html(new_timediff); | |
| }); | |
| }); | |
| } | |
| var getData = function (timestamp) { | |
| var jsonp_url; | |
| if (typeof last_timestamp !== 'undefined') { | |
| jsonp_url = "https://api.cidewalk.com/api/public_activity_feed?last_timestamp=" + timestamp + "&callback=?"; | |
| } else { | |
| jsonp_url = "https://api.cidewalk.com/api/public_activity_feed?callback=?"; | |
| } | |
| return $.getJSON(jsonp_url, queueEvents); | |
| }; | |
| var queueEvents = function (data) { | |
| if(data.length > 0) { | |
| now = Date.now(); | |
| queued_events = data; | |
| last_timestamp = queued_events[queued_events.length - 1].timestamp; | |
| } | |
| } | |
| // Calculate time-diff string | |
| var timediffString = function (timestamp) { | |
| var timediff = ''; | |
| var unit; | |
| var now = Date.now(); | |
| var event_time = new Date(timestamp + ' UTC'); | |
| var msec = now - event_time; | |
| var days = Math.floor(msec / 1000 / 60 / 60 / 24); | |
| msec -= days * 1000 * 60 * 60 * 24; | |
| if (days > 0) { | |
| unit = (days > 1) ? 'days' : 'day'; | |
| timediff += days + ' ' + unit + ' '; | |
| } | |
| var hours = Math.floor(msec / 1000 / 60 / 60); | |
| msec -= hours * 1000 * 60 * 60; | |
| if (hours > 0) { | |
| unit = (hours > 1) ? 'hours' : 'hour'; | |
| timediff += hours + ' ' + unit + ' '; | |
| } | |
| var mins = Math.floor(msec / 1000 / 60); | |
| msec -= mins * 1000 * 60; | |
| if (mins > 0) { | |
| unit = (mins > 1) ? 'minutes' : 'minute'; | |
| timediff += mins + ' ' + unit + ' '; | |
| } | |
| var sec = Math.floor(msec / 1000); | |
| msec -= sec * 1000; | |
| if (sec > 0) { | |
| unit = (sec > 1) ? 'seconds' : 'second'; | |
| timediff += sec + ' ' + unit; | |
| } | |
| return timediff; | |
| }; | |
| var genMapUrl = function (loc_unit_1, loc_unit_2, zoom, height, width) { | |
| return "https://maps.googleapis.com/maps/api/staticmap?center=" + loc_unit_1 + ',' + loc_unit_2 + '&zoom=' + zoom + '&size=' + width + 'x' + height + | |
| '&markers=' + loc_unit_1 + ',' + loc_unit_2 + '&style=feature:all%7Celement:all%7Csaturation:-45%7Cbrightness:13&style=feature:road.highway%7Celement:geometry.fill%7Ccolor:0x8fa7b3&style=feature:road.highway%7Celement:geometry.stroke%7Ccolor:0x667780&style=feature:road.highway%7Celement:labels.text.fill%7Ccolor:0x333333&style=feature:road.highway%7Celement:labels.text.stroke%7Ccolor:0x8fa7b3%7Cgamma:2&style=feature:road.arterial%7Celement:geometry.fill%7Ccolor:0xa3becc&style=feature:road.arterial%7Celement:geometry.stroke%7Ccolor:0x7a8f99&style=feature:road.arterial%7Celement:labels.text.fill%7Ccolor:0x555555&style=feature:road.local%7Celement:geometry.fill%7Ccolor:0xa3becc&style=feature:road.local%7Celement:geometry.stroke%7Ccolor:0x7a8f99&style=feature:road.local%7Celement:labels.text.fill%7Ccolor:0x555555&style=feature:water%7Celement:geometry.fill%7Ccolor:0xbbd9e9&style=feature:administrative%7Celement:labels.text.fill%7Ccolor:0x525f66&style=feature:transit%7Celement:labels.text.stroke%7Ccolor:0xbbd9e9%7Cgamma:2&style=feature:transit.line%7Celement:geometry.fill%7Ccolor:0xa3aeb5'; | |
| }; | |
| $(document).ready(function () { | |
| getData().done(function () { | |
| addEvent(); | |
| setInterval(function () { | |
| addEvent(); | |
| recalcTimestamp(); | |
| }, Math.floor(((Math.random() * (5 - 3)) + 3 + 1) * 1000)); | |
| }).fail(function () { | |
| $('#loading') | |
| .removeClass('alert-info') | |
| .addClass('alert-danger') | |
| .html('There was an error, please reload your browser and try again'); | |
| }); | |
| }); | |
| })(); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment