Skip to content

Instantly share code, notes, and snippets.

@chintanparikh
Last active January 2, 2019 07:10
Show Gist options
  • Save chintanparikh/fd2df5a60d5c91fa9553 to your computer and use it in GitHub Desktop.
Save chintanparikh/fd2df5a60d5c91fa9553 to your computer and use it in GitHub Desktop.
window.App = angular.module('desidancevids',[
'templates',
'ui.router',
'ngResource',
'ui.bootstrap'
])
App.config ["$httpProvider", ($httpProvider) ->
# Inject the CSRF token
$httpProvider.defaults.headers.common['X-CSRF-Token'] = document.getElementsByName("csrf-token")[0].content
# By default, angular sends "application/json, text/plain, */*" which rails
# sees and focuses on the */* and sends html :-(
$httpProvider.defaults.headers.common['Accept'] = "application/json"
]
App.config(['$stateProvider', '$urlRouterProvider', '$locationProvider',
($stateProvider, $urlRouterProvider, $locationProvider, $stateParams) ->
$stateProvider
.state('videos', {
templateUrl: 'index.html',
})
.state('videos-home', {
url: '/',
templateUrl: 'video-list.html',
parent: 'videos'
controller: 'VideosController'
})
.state('videos-search', {
url: '/search?terms',
templateUrl: 'video-list.html',
parent: 'videos'
controller: 'VideosController'
})
.state('videos-new', {
url: '/new',
templateUrl: 'video-form.html',
parent: 'videos'
controller: 'VideosNewController'
})
$urlRouterProvider.otherwise('/');
# Let's us use non # urls (/#/test vs /test)
$locationProvider.html5Mode({
enabled: true,
requireBase: false
})
])
App.factory 'Video', ['$resource', ($resource) ->
allVideos = () ->
$resource('/videos.json').query()
search = (terms) ->
$resource('/videos/search/:search_terms').query({search_terms: terms})
create = (args) ->
$resource('/videos.json').save(args)
return {
all: allVideos,
search: search,
create: create
}
]
App.controller("VideosController", [ '$scope', '$state', '$location', 'Video', '$stateParams',
($scope, $state, $location, Video, $stateParams) ->
$scope.search = (searchTerms) ->
console.log('test')
search_result = Video.search(searchTerms)
search_result.$promise.then (videos) ->
$scope.videos = videos
# if searchTerms
# unless $scope.videos == videos
# $scope.videos = videos
# else
# $scope.videos = Video.all()
$scope.submitSearch = (searchTerms) ->
if searchTerms
$state.go('videos-search', {terms: searchTerms})
else
$state.go('videos-home')
if $stateParams.terms
$scope.searchTerms = $stateParams.terms
$scope.search($stateParams.terms)
else
$scope.videos = Video.all()
])
App.controller("VideosNewController", [ '$scope', '$state', '$location', 'Video', '$stateParams', '$http'
($scope, $state, $location, Video, $stateParams, $http) ->
$scope.youtubeRegex = /^http:\/\/(?:www\.)?youtube.com\/watch\?(?=.*v=\w+)(?:\S+)?$/
$scope.createVideo = ->
Video.create($scope.video).$promise.then(video) ->
if (video.status != "no_content")
console.log('ye')
$scope.getSuggestions = (element, query) ->
return $http.get('/videos/autocomplete.json', {
params: {
query: query,
element: element
}
}).then (response) ->
return response.data.suggestions
# For the automatically updating tags
$scope.$watch 'video.tag_list', ((newVal, oldVal) ->
if !newVal
return
# The one liner first splits tags up using commas as a delimeter, and then remove all empty tags
$scope.tags = newVal.split(',').map((e) -> e.trim()).filter((e) -> e != "")
), true
# For the new page, to update the thumbnail
$scope.$watch 'video.video_url', (newVal, oldVal) ->
if (!newVal)
return
matched = newVal.match(/^(?:https?:\/\/)?(?:www\.)?youtube\.com\/watch\?(?=.*v=((\w|-){11}))(?:\S+)?$/)
if (!matched)
return
youtubeId = matched[1]
$scope.video.thumbnail = "http://img.youtube.com/vi/#{youtubeId}/0.jpg"
])
<div>
<div class="full-width search">
<div class="container">
<form ng-submit="submitSearch(searchTerms)">
<input type="text" ng-model="searchTerms" ng-change="search(searchTerms)"/>
<a href="" class="glyphicon glyphicon-search submit button" ui-sref="videos-search({terms: searchTerms })"></a>
<a href="" class="glyphicon glyphicon-plus add-filter button" ui-sref="videos-new"></a>
</form>
</div>
</div>
<div class="container" ui-view>
</div>
</div>
<div class="row cards video-list">
<div class="message" ng-hide="videos.length">
<p>No videos</p>
<p>Try searching for something else</p>
</div>
<a ng-href="{{video.video_url}}" class="col-md-4 card-wrapper" ng-repeat="video in videos" ng-show="videos">
<div class="card" style="background: url('{{video.thumbnail}}') center;">
<div class="info-wrapper">
<span class="info">
{{video.team}}
</span>
<span class="info event">
{{video.event}} {{video.season}}
</span>
</div>
</div>
</a>
</div>
App.controller("VideosController", [
'$scope', '$state', '$location', 'Video', '$stateParams', function($scope, $state, $location, Video, $stateParams) {
$scope.search = function(searchTerms) {
var search_result;
search_result = Video.search(searchTerms);
search_result.$promise.then(function(videos) {
$scope.videos = videos;
});
};
}
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment