<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@1.2.17" data-semver="1.2.17" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script src="//code.angularjs.org/1.2.17/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="clarityApp">
<div ng-controller="SearchCtrl as search">
<input ng-model="search.query">
<button ng-click="search.btnSearch()">Go</button>
</div>
<div ng-controller="ResultsCtrl as results">
<ul>
<li class="media" ng-repeat="status in results.results">
<div class="img">
<img src="{{status.user.profile_image_url}}" width="60" height="60">
</div>
<div class="content">
<h2>{{status.user.name}} <span ng-bind-html="'@' + status.user.screen_name | userLink "></span></h2>
<p ng-bind-html="status.text | userLink"></p>
</div>
</li>
</ul>
</div>
</body>
</html>
;(function() {
var app = angular.module('clarityApp', ['ngSanitize']);
app.service('TwitterService', function($http) {
var _this = this;
this.results = [];
this.search = function(query) {
/** let's pretend this worked
return $http({
method: 'GET',
url: 'https://api.twitter.com/1.1/search/tweets.json',
params: {
q: 'unicorns'
}
}).then(function(resp) {
_this.results = resp.statuses;
return resp.statuses; // array of statuses
});
*/
_this.results = [];
var statuses, users_names, user_pics, i;
statuses = shuffle([
'@OnlyMeCin @miss_me_good haha dans se cas là non je lui ferais pas mal lol',
query +' zombie apocalypse',
'Bazen ' + query + ' olabiliyorum',
query + ' zombie apocalypse!!!!!!!!!',
'These are some of my ' + query + ' this evening.',
'Bugun bostanli rampalarda paten süren ' + query + ' vardi.'
]);
user_names = shuffle([
"JairoToPuto",
"SENCER",
"Rachel",
"Juan Cisneros, Jr.",
"Brendaa."
]);
user_ids = shuffle([
"JairoRico94",
"sencersever",
"unicorn_boner",
"JuAnJr312"
]);
user_pics = shuffle([
"http://pbs.twimg.com/profile_images/466211321294630912/1BvrnKpV_normal.jpeg",
"http://pbs.twimg.com/profile_images/474069699060563968/NancJ1W3_normal.jpeg",
"http://pbs.twimg.com/profile_images/413110728955289600/Vt9x_vrs_normal.jpeg",
"http://pbs.twimg.com/profile_images/484061358221045760/zIgPgP8N_normal.jpeg",
"http://pbs.twimg.com/profile_images/483450166599372801/AcnjMxTE_normal.jpeg",
"http://pbs.twimg.com/profile_images/483579824103911424/tAnEW8nR_normal.jpeg"
]);
function shuffle(o){ //v1.0
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
for (i = 0; i < 10; i++) {
_this.results.push({
"metadata": {
"result_type": "recent",
"iso_language_code": "und"
},
"created_at": "Thu Jul 10 00:49:43 +0000 2014",
"id": 487035907930075140,
"id_str": "487035907930075136",
"text": statuses[i % statuses.length],
"source": "<a href=\"http://twitter.com/download/android\" rel=\"nofollow\">Twitter for Android</a>",
"truncated": false,
"in_reply_to_status_id": null,
"in_reply_to_status_id_str": null,
"in_reply_to_user_id": null,
"in_reply_to_user_id_str": null,
"in_reply_to_screen_name": null,
"user": {
"id": 1101605767,
"id_str": "1101605767",
"name": user_names[i % user_names.length],
"screen_name": user_ids[i % user_ids.length],
"location": "",
"description": "Sevilla Instagram: JairoRico94 ;)",
"url": null,
"entities": {
"description": {
"urls": []
}
},
"protected": false,
"followers_count": 304,
"friends_count": 342,
"listed_count": 0,
"created_at": "Fri Jan 18 17:54:58 +0000 2013",
"favourites_count": 93,
"utc_offset": 7200,
"time_zone": "Madrid",
"geo_enabled": false,
"verified": false,
"statuses_count": 2699,
"lang": "es",
"contributors_enabled": false,
"is_translator": false,
"is_translation_enabled": false,
"profile_background_color": "ACDED6",
"profile_background_image_url": "http://pbs.twimg.com/profile_background_images/795163418/92f5426fc17c9b4641684ed134474bc1.jpeg",
"profile_background_image_url_https": "https://pbs.twimg.com/profile_background_images/795163418/92f5426fc17c9b4641684ed134474bc1.jpeg",
"profile_background_tile": true,
"profile_image_url": user_pics[i % user_pics.length],
"profile_image_url_https": "https://pbs.twimg.com/profile_images/466211321294630912/1BvrnKpV_normal.jpeg",
"profile_banner_url": "https://pbs.twimg.com/profile_banners/1101605767/1376934952",
"profile_link_color": "038543",
"profile_sidebar_border_color": "FFFFFF",
"profile_sidebar_fill_color": "DDEEF6",
"profile_text_color": "333333",
"profile_use_background_image": true,
"default_profile": false,
"default_profile_image": false,
"following": false,
"follow_request_sent": false,
"notifications": false
},
"geo": null,
"coordinates": null,
"place": null,
"contributors": null,
"retweeted_status": null,
"retweet_count": 1,
"favorite_count": 0,
"entities": {
"hashtags": [],
"symbols": [],
"urls": [],
"user_mentions": [
{
"screen_name": "JaviRecha",
"name": "Javi Recha Lecter",
"id": 467770822,
"id_str": "467770822",
"indices": [
3,
13
]
}
]
},
"favorited": false,
"retweeted": false,
"lang": "und"
});
}
console.log(_this.results);
return _this.results;
};
});
app.controller('SearchCtrl', function(TwitterService) {
var _this = this;
this.query = 'unicorns';
this.btnSearch = function() {
TwitterService.search(_this.query);
};
});
app.controller('ResultsCtrl', function($scope, TwitterService) {
var _this = this;
this.results = [];
$scope.$watch(function() {
return TwitterService.results;
}, function(newVal, prevVal) {
if (newVal === prevVal) {
return;
}
_this.results = newVal;
});
});
app.filter('userLink', function () {
return function (str) {
if (typeof str !== 'string') {
str = String(str);
}
return str.replace(/@([a-zA-Z0-9_]+)/gi, '<a href="http://twitter.com/$1" target="_blank" class="tAt">@$1</a>');
};
});
}());
/* Styles go here */
ul {
margin: 0;
padding: 0;
}
li {
list-style: none;
padding: 10px 0;
}
li + li {
border-top: 1px solid blue;
}
.media {
overflow: hidden;
}
.media .img {
float: left;
padding: 0 8px 8px 0;
}
.media .content {
overflow: hidden;
}
.media .content h2 {
margin: 0;
padding-bottom: 3px;
border-bottom: 1px solid #ddd;
margin-bottom: 3px;
font-size: 0.8em;
}
.media .content p {
margin-top: 0;
}