index.blade.php 3.25 KB
@inject('webpackAssets', 'FootyRoom\Support\WebpackAssets')

@extends('layouts.default')

@section('relLinks')
	{!! $relLinksHtml !!}
@endsection

@section('title', FootyRoom\Support\Utils\Helpers::title("$season->name Videos and Highlights"))

@php
    $webpackAssets->require('web/public/js/dist/competition');
@endphp

@section('meta.description', "Latest $season->name video match highlights, goals, interviews, press conferences and news")

@section('content')
	<div class="site-tree clearfix">
		<div class="site-tree-item">
			<a href="/" class="hidden-xs hidden-ms">Home</a><div class="separator hidden-xs hidden-ms"></div>
			<a href="{!! route('competition', ['slug' => $competitionSlug, 'id' => $competitionId]) !!}" class="site-tree-competition">{!! $season->name !!}</a>
		</div>

		{{-- 
			TODO: Since we moved away from Wordpress, we no longer have categories,
		 	and that means we don't have parent categories such as England,
		 	International, Europe, etc. To fix this we must implement concept
		 	of regions that will work together with our stages.
		 --}}
		
		<div class="site-tree-item">
			<select class="site-tree-select" ng-model="season.id" ng-options="stage.id as stage.meta.year for stage in data.seasons | unique:'id'" ng-change="changeSeason()" ng-show="data.seasons.length" ng-cloak></select>
			<div stage-select stages="data.stages"></div>
		</div>
	</div>

	<div id="mainBox" class="clearfix">
		@include('competition.extraContent')
	</div>

	<script>
		DataStore['season'] = {!! json_encode($season, JSON_NUMERIC_CHECK) !!};
		DataStore['currentStage'] = {!! json_encode($stage, JSON_NUMERIC_CHECK) !!};
		DataStore['seasons'] = {!! json_encode($seasons, JSON_NUMERIC_CHECK) !!};
		DataStore['stages'] = {!! json_encode($stages, JSON_NUMERIC_CHECK) !!};
		DataStore['postsEndpointUrl'] = '/posts-pagelet';
	</script>

	<div id="infinite-scroll" class="full-width grid-card--match" fr-fixed-header fr-infinite-scroll>
		@compose('posts.grid', 'PostsGridComposer', $posts, $page)
	</div>

	<div class="info-box text-center" ng-if="postsLoading && !loadMoreEnabled" ng-cloak>Loading <span class="spinner"></span></div>

	<div class="clearfix">
		<div class="btn btn-default col-xs-12" fr-ladda="postsLoading" ng-click="enableInfiniteScroll()" ng-if="loadMoreEnabled">Load more</div>
	</div>

	{{-- Angular Templates --}}

	<script type="text/ng-template" id="stage-select-item">
		<a ng-href="?stageId=@{{ item.id }}" ng-bind="item.name"></a>
		<ul ng-show="item.children && (tree.indexOf(item.id.toString()) > -1)" class="children">
			<li ng-repeat="item in item.children | orderBy:order" ng-include="'stage-select-item'" ng-class="{submenu: (item.children) && (tree.indexOf(item.id.toString()) > -1)}"></li>
		</ul>
	</script>

	<script type="text/ng-template" id="stage-select">
		<div class="stage-select" ng-class="{open: show}" ng-click="show =! show" ng-show="stages.length > 1 || stages[0].children.length > 1" ng-cloak>
			<a ng-bind="currentStageName"></a>
			<div class="dropdown-menu">
				<ul>
					<li><a href="?">All Stages</a></li>
					<li class="divide"></li>
					<li ng-repeat="item in stages | orderBy:order | filter:{parent:season.id}" ng-include="'stage-select-item'" ng-class="{submenu: (item.children)}" ></li>
				</ul>
			</div>
		</div>
	</script>
@endsection