Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add twitter tab and content formatting including infinite scroll

  • Loading branch information...
commit 84877daedb42904fa6ab279a3481e6ab6747f218 1 parent 7fe4d69
@kborchers authored
View
5 app/index.html
@@ -13,7 +13,7 @@
<link rel="stylesheet" href="styles/main.css"/>
</head>
- <body ng-app="aerogearDevnexusApp">
+ <body ng-app="aerogearDevnexusApp" infinite-scroll="loadTweets()">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
@@ -34,12 +34,15 @@
<script src="scripts/vendor/aerogear.js"></script>
<script src="scripts/vendor/bootstrap.min.js"></script>
<script src="scripts/vendor/Markdown.Converter.js"></script>
+ <script src="scripts/vendor/pretty.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services/dataService.js"></script>
<script src="scripts/directives/jumpTo.js"></script>
+ <script src="scripts/directives/infiniteScroll.js"></script>
<script src="scripts/controllers/home.js"></script>
<script src="scripts/controllers/speakersPresentations.js"></script>
<script src="scripts/controllers/nav.js"></script>
+ <script src="scripts/controllers/twitter.js"></script>
<!-- endbuild -->
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
View
8 app/scripts/app.js
@@ -23,6 +23,14 @@ var aerogearDevnexusApp = angular.module( "aerogearDevnexusApp", [ "ngSanitize"
templateUrl: "views/presentations.html",
controller: "SpeakersPresentationsCtrl"
})
+ .when("/twitter", {
+ templateUrl: "views/twitter.html",
+ controller: "TwitterCtrl"
+ })
+ .when( "/twitter/:id", {
+ templateUrl: "views/tweet.html",
+ controller: "TweetCtrl"
+ })
.otherwise({
redirectTo: "/"
});
View
66 app/scripts/controllers/twitter.js
@@ -0,0 +1,66 @@
+"use strict";
+
+aerogearDevnexusApp.controller( "TwitterCtrl", [ "$scope", "dataService", "$filter", function( $scope, dataService, $filter ) {
+ var doc = $( document );
+
+ $scope.tweets = [];
+ $scope.nextPage = null;
+ $scope.stopRequests = false;
+ $scope.loader = true;
+
+ $scope.loadTweets = function() {
+ if ( $scope.stopRequests ) {
+ return;
+ }
+
+ var query = "";
+
+ if ( $scope.nextPage ) {
+ query = $scope.nextPage.substr( 1 );
+ } else if ( $scope.nextPage === undefined ) {
+ // return as there are no more results
+ $scope.loader = false;
+ return;
+ } else {
+ query = {
+ q: "devnexus"
+ };
+ }
+
+ dataService.twitterPipe.read({
+ query: query,
+ jsonp: true,
+ success: function( data ) {
+ $scope.tweets = $scope.tweets.concat( data.results );
+ $scope.nextPage = data[ "next_page" ];
+ $scope.$apply();
+ },
+ complete: function() {
+ $scope.loader = false;
+ $scope.stopRequests = false;
+ }
+ });
+ };
+
+ // initial load
+ $scope.loadTweets();
+
+ $scope.formatDate = function( time ) {
+ var checkTime = new Date( time ),
+ today = (new Date()).getTime();
+
+ if ( today - checkTime.getTime() >= 604800000 ) {
+ return $filter( "date" )( checkTime, "d MMM" );
+ } else {
+ return prettyDate( time );
+ }
+ };
+
+ $scope.$on( "parentScroll", function( attr ) {
+ console.log(doc.scrollTop(), $( window ).height(), doc.outerHeight());
+ if ( doc.scrollTop() + $( window ).height() >= doc.outerHeight() ) {
+ $scope.loadTweets();
+ $scope.stopRequests = true;
+ }
+ });
+}]);
View
9 app/scripts/directives/infiniteScroll.js
@@ -0,0 +1,9 @@
+"use strict";
+
+aerogearDevnexusApp.directive( "infiniteScroll", function() {
+ return function( scope, element, attr ) {
+ $( window ).bind( "scroll", function() {
+ scope.$broadcast( "parentScroll", [ attr ] );
+ });
+ };
+});
View
36 app/scripts/vendor/pretty.js
@@ -0,0 +1,36 @@
+/*
+ * JavaScript Pretty Date
+ * Copyright (c) 2011 John Resig (ejohn.org)
+ * Licensed under the MIT and GPL licenses.
+ */
+
+// Takes an ISO time and returns a string representing how
+// long ago the date represents.
+function prettyDate(time){
+ var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
+ diff = (((new Date()).getTime() - date.getTime()) / 1000),
+ day_diff = Math.floor(diff / 86400);
+
+ if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
+ return;
+
+ return day_diff == 0 && (
+ diff < 60 && "just now" ||
+ diff < 120 && "1 minute ago" ||
+ diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
+ diff < 7200 && "1 hour ago" ||
+ diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
+ day_diff == 1 && "Yesterday" ||
+ day_diff < 7 && day_diff + " days ago" ||
+ day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
+}
+
+// If jQuery is included in the page, adds a jQuery plugin to handle it as well
+if ( typeof jQuery != "undefined" )
+ jQuery.fn.prettyDate = function(){
+ return this.each(function(){
+ var date = prettyDate(this.title);
+ if ( date )
+ jQuery(this).text( date );
+ });
+ };
View
45 app/styles/main.css
@@ -11,7 +11,7 @@
padding-top: 80px;
}
-.accordion, .home-content {
+.accordion, .tab-content {
border: 2px solid #e5e5e5;
padding: 20px;
margin-top: -1px;
@@ -48,8 +48,40 @@
margin: 5px 20px;
}
+.tweet-body {
+ background-color: #ffffff;
+ color: #000000;
+ margin: 5px 0 10px 0;
+ border: 1px solid #e5e5e5;
+ border-radius: 4px;
+ padding: 5px;
+ position: relative;
+ overflow: auto;
+}
+
+.tweet-body:hover {
+ text-decoration: none;
+}
+
+.tweet-text {
+ margin-top: 12px;
+}
+
+.tweet-time {
+ position: absolute;
+ top: 3px;
+ right: 3px;
+ font-size: 11px;
+ color: #cccccc;
+}
+
+.twitter-image {
+ float: left;
+ margin-right: 10px;
+}
+
.footer {
- margin-top: 20px;
+ margin: 20px 0 100px 0;
text-align: center;
}
@@ -82,7 +114,7 @@
@media (max-width: 640px) {
.container {
- background-size: 80%;
+ background-size: 75%;
background-position: right -40px;
}
@@ -90,3 +122,10 @@
font-size: 20px;
}
}
+
+@media (max-width: 480px) {
+ .container {
+ background-size: 85%;
+ background-position: right -40px;
+ }
+}
View
2  app/views/home.html
@@ -1,5 +1,5 @@
<div ng-include src="'views/top.html'"></div>
-<div class="home-content">
+<div class="tab-content">
<h2>Welcome to DevNexus 2013 - February 18-19</h2>
<p>We will be having an incredible line-up of presenters covering a wide array of crucial topics. Also, this year we are expanding to 7 tracks with 50+ sessions and 3 keynotes! In addition to providing great content for Java developers, DevNexus is a very valuable networking opportunity. This event attracts Java/JVM talent from the South-East's largest corporations, software companies and consulting organizations. You will have an opportunity to discover what other development teams are using as their favorite tools and practices.</p>
</div>
View
3  app/views/top.html
@@ -2,6 +2,7 @@
<ul class="nav nav-tabs" ng-controller="NavCtrl">
<li ng-class="{active: path == '/'}"><a href="#/">Home</a></li>
<li ng-class="{active: path.indexOf('/speakers') == 0}"><a href="#/speakers">Speakers</a></li>
- <li ng-class="{active: path.indexOf('/presentations') == 0}"><a href="#/presentations">Presentations</a></li>
+ <li ng-class="{active: path.indexOf('/presentations') == 0}"><a href="#/presentations">Sessions</a></li>
+ <li ng-class="{active: path.indexOf('/twitter') == 0}"><a href="#/twitter">Twitter</a></li>
</ul>
</div>
View
9 app/views/twitter.html
@@ -0,0 +1,9 @@
+<div ng-include src="'views/top.html'"></div>
+<div class="tab-content">
+ <div ng-repeat="tweet in tweets" class="tweet-body">
+ <img src="{{tweet.profile_image_url}}" class="twitter-image" />
+ <div class="tweet-text">{{tweet.text}}</div>
+ <div class="tweet-time">{{formatDate(tweet.created_at)}}</div>
+ </div>
+</div>
+<footer class="footer" ng-include src="'views/bottom.html'"></footer>
View
22 test/spec/controllers/twitter.js
@@ -0,0 +1,22 @@
+'use strict';
+
+describe('Controller: TwitterCtrl', function() {
+
+ // load the controller's module
+ beforeEach(module('aerogearDevnexusApp'));
+
+ var TwitterCtrl,
+ scope;
+
+ // Initialize the controller and a mock scope
+ beforeEach(inject(function($controller) {
+ scope = {};
+ TwitterCtrl = $controller('TwitterCtrl', {
+ $scope: scope
+ });
+ }));
+
+ it('should attach a list of awesomeThings to the scope', function() {
+ expect(scope.awesomeThings.length).toBe(3);
+ });
+});
View
13 test/spec/directives/infiniteScroll.js
@@ -0,0 +1,13 @@
+'use strict';
+
+describe('Directive: infiniteScroll', function() {
+ beforeEach(module('aerogearDevnexusApp'));
+
+ var element;
+
+ it('should make hidden element visible', inject(function($rootScope, $compile) {
+ element = angular.element('<infinite-scroll></infinite-scroll>');
+ element = $compile(element)($rootScope);
+ expect(element.text()).toBe('this is the infiniteScroll directive');
+ }));
+});
Please sign in to comment.
Something went wrong with that request. Please try again.