Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
106 lines (91 sloc) 3.57 KB
<html ng-app="app">
<head>
<title></title>
<link rel="stylesheet" href="https://bootswatch.com/paper/bootstrap.min.css"/>
<link rel="stylesheet" href="../bower_components/ngImgCrop/compile/minified/ng-img-crop.css"/>
<link rel="stylesheet" href="content/filters.css"/>
</head>
<body>
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Instagram Real-Time</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#/">Home</a></li>
<li><a href="#/post">Postar</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div ng-view></div>
</div>
<script src="http://localhost:5430/socket.io/socket.io.js"></script>
<script src="../bower_components/angular/angular.min.js"></script>
<script src="../bower_components/angular-route/angular-route.min.js"></script>
<script src="../bower_components/ngImgCrop/compile/minified/ng-img-crop.js"></script>
<script src="../bower_components/ng-socket-io/ng-socket-io.js"></script>
<script>
angular.module('app', ['ngRoute', 'ngImgCrop', 'socket-io']);
angular.module('app').run(function ($rootScope, socket) {
$rootScope.posts = [];
socket.connect('http://localhost:5430');
socket.on('post', function (data) {
$rootScope.posts.push({photo: data.photo, filter: data.filter, message: data.message });
});
});
angular.module('app').config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeCtrl',
controllerAs: 'vm',
templateUrl: 'pages/home.html'
})
.when('/post', {
controller: 'PostCtrl',
controllerAs: 'vm',
templateUrl: 'pages/post.html'
});
});
angular.module('app').controller('HomeCtrl', function ($rootScope, $scope) {
});
angular.module('app').controller('PostCtrl', function ($scope, socket, $location) {
$scope.filters = ['original', 'grayscale', 'brightness', 'contrast', 'saturate', 'invert', 'sepia'];
$scope.image = '';
$scope.croppedImage = '';
$scope.message = '';
$scope.post = function (filter) {
socket.emit('post', {
photo: $scope.croppedImage,
filter: filter,
message: $scope.message
});
$scope.image = '';
$scope.croppedImage = '';
$scope.message = '';
$location.path('/');
};
var handleFileSelect = function (evt) {
var file = evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function ($scope) {
$scope.image = evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#file')).on('change', handleFileSelect);
});
</script>
</body>
</html>