Browse Source

adds slideshow of all accepted photos

master
Aaron Parecki 7 years ago
parent
commit
bed8ae328d
No known key found for this signature in database GPG Key ID: 276C2817346D6056
10 changed files with 508 additions and 0 deletions
  1. +32
    -0
      app/Http/Controllers/SlideshowController.php
  2. +141
    -0
      public/slideshow/css/simple-slideshow-styles.css
  3. +114
    -0
      public/slideshow/css/styles.css
  4. BIN
      public/slideshow/img/arrows-alt_ffffff_64.png
  5. BIN
      public/slideshow/img/compress_ffffff_64.png
  6. +166
    -0
      public/slideshow/js/better-simple-slideshow.js
  7. +1
    -0
      public/slideshow/js/better-simple-slideshow.min.js
  8. +1
    -0
      resources/views/layouts/app.blade.php
  9. +51
    -0
      resources/views/slideshow.blade.php
  10. +2
    -0
      routes/web.php

+ 32
- 0
app/Http/Controllers/SlideshowController.php View File

@ -0,0 +1,32 @@
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use DB;
use App\Tweet, App\Team;
class SlideshowController extends Controller
{
public function slideshow() {
$photos = [];
$tweets = Tweet::where('processed', 1)->orderByRaw('RAND()')->get();
foreach($tweets as $tweet) {
if($tweet->photo) {
foreach(json_decode($tweet->photo) as $photo) {
$photos[] = [
'img' => $photo,
'description' => $tweet->team->name . ' Team: ' . $tweet->text
];
}
}
}
return view('slideshow', [
'photos' => $photos
]);
}
}

+ 141
- 0
public/slideshow/css/simple-slideshow-styles.css View File

@ -0,0 +1,141 @@
.bss-slides{
position: relative;
display: block;
line-height: 0;/*removes the gap if you put a border on the slideshow div*/
}
figcaption {
line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides:focus{
outline: 0;
}
.bss-slides figure{
position: absolute;
top: 0;
width: 100%;
}
.bss-slides figure:first-child{
position: relative;
}
.bss-slides figure img{
opacity: 0;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.bss-slides .bss-show{
z-index: 2;
}
.bss-slides .bss-show img{
opacity: 1;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: relative;
}
.bss-slides figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: #000;
background: rgba(0,0,0, .25);
border-radius: 2px;
opacity: 0;
-webkit-transition: opacity 1.2s;
transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
z-index: 3;
opacity: 1;
}
.bss-slides figcaption a{
color: #fff;
}
.bss-next, .bss-prev{
color: #fff;
position: absolute;
background: #000;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 4;
font-size: 2em;
margin-top: -1.2em;
opacity: .3;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.bss-next:hover, .bss-prev:hover{
cursor: pointer;
opacity: 1;
}
.bss-next{
right: -1px;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.bss-prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.bss-fullscreen{
display: block;
width: 32px;
height: 32px;
background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png);
-webkit-background-size: contain;
background-size: contain;
position: absolute;
top: 5px;
left: 5px;
cursor: pointer;
opacity: .3;
}
.bss-fullscreen:hover{
opacity: .8;
}
:-webkit-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
-webkit-background-size: contain;
background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
-webkit-background-size: contain;
background-size: contain;
}
:-webkit-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
-webkit-background-size: contain;
background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
-webkit-background-size: contain;
background-size: contain;
}

+ 114
- 0
public/slideshow/css/styles.css View File

@ -0,0 +1,114 @@
.bss-slides{
position: relative;
display: block;
line-height: 0;/*removes the gap if you put a border on the slideshow div*/
}
figcaption {
line-height: 1.5; /* restores line-height to the child element*/
}
.bss-slides figure{
position: absolute;
top: 0;
width: 100%;
}
.bss-slides figure:first-child{
position: relative;
}
.bss-slides figure img{
opacity: 0;
transition: opacity 1.2s;
backface-visibility: hidden;
}
.bss-slides .bss-show{
z-index: 2;
}
.bss-slides .bss-show img{
opacity: 1;
backface-visibility: hidden;
position: relative;
}
.bss-slides figcaption{
position: absolute;
font-family: sans-serif;
font-size: .8em;
bottom: .75em;
right: .35em;
padding: .25em;
color: #fff;
background: #000;
background: rgba(0,0,0, .25);
border-radius: 2px;
opacity: 0;
transition: opacity 1.2s;
}
.bss-slides .bss-show figcaption{
z-index: 3;
opacity: 1;
}
.bss-slides figcaption a{
color: #fff;
}
.bss-next, .bss-prev{
color: #fff;
position: absolute;
background: #000;
background: rgba(0,0,0, .6);
top: 50%;
z-index: 4;
font-size: 2em;
margin-top: -1.2em;
opacity: .3;
user-select: none;
}
.bss-next:hover, .bss-prev:hover{
cursor: pointer;
opacity: 1;
}
.bss-next{
right: -1px;
padding: 10px 5px 15px 10px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.bss-prev{
left: 0;
padding: 10px 10px 15px 5px;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.bss-fullscreen{
display: block;
width: 32px;
height: 32px;
background: rgba(0,0,0,.4) url(../img/arrows-alt_ffffff_64.png);
background-size: contain;
position: absolute;
top: 5px;
left: 5px;
cursor: pointer;
opacity: .3;
}
.bss-fullscreen:hover{
opacity: .8;
}
:-webkit-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:-moz-full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:-ms-fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:full-screen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}
:fullscreen .bss-fullscreen{
background: rgba(0,0,0,.4) url(../img/compress_ffffff_64.png);
background-size: contain;
}

BIN
public/slideshow/img/arrows-alt_ffffff_64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 1015 B

BIN
public/slideshow/img/compress_ffffff_64.png View File

Before After
Width: 64  |  Height: 64  |  Size: 797 B

+ 166
- 0
public/slideshow/js/better-simple-slideshow.js View File

@ -0,0 +1,166 @@
var makeBSS = function (el, options) {
var $slideshows = document.querySelectorAll(el), // a collection of all of the slideshow
$slideshow = {},
Slideshow = {
init: function (el, options) {
options = options || {}; // if options object not passed in, then set to empty object
options.auto = options.auto || false; // if options.auto object not passed in, then set to false
this.opts = {
selector: (typeof options.selector === "undefined") ? "figure" : options.selector,
auto: (typeof options.auto === "undefined") ? false : options.auto,
speed: (typeof options.auto.speed === "undefined") ? 1500 : options.auto.speed,
pauseOnHover: (typeof options.auto.pauseOnHover === "undefined") ? false : options.auto.pauseOnHover,
fullScreen: (typeof options.fullScreen === "undefined") ? false : options.fullScreen,
swipe: (typeof options.swipe === "undefined") ? false : options.swipe
};
this.counter = 0; // to keep track of current slide
this.el = el; // current slideshow container
this.$items = el.querySelectorAll(this.opts.selector); // a collection of all of the slides, caching for performance
this.numItems = this.$items.length; // total number of slides
this.$items[0].classList.add('bss-show'); // add show class to first figure
this.injectControls(el);
this.addEventListeners(el);
if (this.opts.auto) {
this.autoCycle(this.el, this.opts.speed, this.opts.pauseOnHover);
}
if (this.opts.fullScreen) {
this.addFullScreen(this.el);
}
if (this.opts.swipe) {
this.addSwipe(this.el);
}
},
showCurrent: function (i) {
// increment or decrement this.counter depending on whether i === 1 or i === -1
if (i > 0) {
this.counter = (this.counter + 1 === this.numItems) ? 0 : this.counter + 1;
} else {
this.counter = (this.counter - 1 < 0) ? this.numItems - 1 : this.counter - 1;
}
// remove .show from whichever element currently has it
// http://stackoverflow.com/a/16053538/2006057
[].forEach.call(this.$items, function (el) {
el.classList.remove('bss-show');
});
// add .show to the one item that's supposed to have it
this.$items[this.counter].classList.add('bss-show');
},
injectControls: function (el) {
// build and inject prev/next controls
// first create all the new elements
var spanPrev = document.createElement("span"),
spanNext = document.createElement("span"),
docFrag = document.createDocumentFragment();
// add classes
spanPrev.classList.add('bss-prev');
spanNext.classList.add('bss-next');
// add contents
spanPrev.innerHTML = '&laquo;';
spanNext.innerHTML = '&raquo;';
// append elements to fragment, then append fragment to DOM
docFrag.appendChild(spanPrev);
docFrag.appendChild(spanNext);
el.appendChild(docFrag);
},
addEventListeners: function (el) {
var that = this;
el.querySelector('.bss-next').addEventListener('click', function () {
that.showCurrent(1); // increment & show
}, false);
el.querySelector('.bss-prev').addEventListener('click', function () {
that.showCurrent(-1); // decrement & show
}, false);
el.onkeydown = function (e) {
e = e || window.event;
if (e.keyCode === 37) {
that.showCurrent(-1); // decrement & show
} else if (e.keyCode === 39) {
that.showCurrent(1); // increment & show
}
};
},
autoCycle: function (el, speed, pauseOnHover) {
var that = this,
interval = window.setInterval(function () {
that.showCurrent(1); // increment & show
}, speed);
if (pauseOnHover) {
el.addEventListener('mouseover', function () {
clearInterval(interval);
interval = null;
}, false);
el.addEventListener('mouseout', function () {
if(!interval) {
interval = window.setInterval(function () {
that.showCurrent(1); // increment & show
}, speed);
}
}, false);
} // end pauseonhover
},
addFullScreen: function(el){
var that = this,
fsControl = document.createElement("span");
fsControl.classList.add('bss-fullscreen');
el.appendChild(fsControl);
el.querySelector('.bss-fullscreen').addEventListener('click', function () {
that.toggleFullScreen(el);
}, false);
},
addSwipe: function(el){
var that = this,
ht = new Hammer(el);
ht.on('swiperight', function(e) {
that.showCurrent(-1); // decrement & show
});
ht.on('swipeleft', function(e) {
that.showCurrent(1); // increment & show
});
},
toggleFullScreen: function(el){
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement &&
!document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
el.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
el.webkitRequestFullscreen(el.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
} // end toggleFullScreen
}; // end Slideshow object .....
// make instances of Slideshow as needed
[].forEach.call($slideshows, function (el) {
$slideshow = Object.create(Slideshow);
$slideshow.init(el, options);
});
};

+ 1
- 0
public/slideshow/js/better-simple-slideshow.min.js View File

@ -0,0 +1 @@
var makeBSS=function(a,b){var c=document.querySelectorAll(a),d={},e={init:function(a,b){this.counter=0,this.el=a,this.$items=a.querySelectorAll("figure"),this.numItems=this.$items.length,b=b||{},b.auto=b.auto||!1,this.opts={auto:"undefined"==typeof b.auto?!1:b.auto,speed:"undefined"==typeof b.auto.speed?1500:b.auto.speed,pauseOnHover:"undefined"==typeof b.auto.pauseOnHover?!1:b.auto.pauseOnHover,fullScreen:"undefined"==typeof b.fullScreen?!1:b.fullScreen,swipe:"undefined"==typeof b.swipe?!1:b.swipe},this.$items[0].classList.add("bss-show"),this.injectControls(a),this.addEventListeners(a),this.opts.auto&&this.autoCycle(this.el,this.opts.speed,this.opts.pauseOnHover),this.opts.fullScreen&&this.addFullScreen(this.el),this.opts.swipe&&this.addSwipe(this.el)},showCurrent:function(a){this.counter=a>0?this.counter+1===this.numItems?0:this.counter+1:this.counter-1<0?this.numItems-1:this.counter-1,[].forEach.call(this.$items,function(a){a.classList.remove("bss-show")}),this.$items[this.counter].classList.add("bss-show")},injectControls:function(a){var b=document.createElement("span"),c=document.createElement("span"),d=document.createDocumentFragment();b.classList.add("bss-prev"),c.classList.add("bss-next"),b.innerHTML="&laquo;",c.innerHTML="&raquo;",d.appendChild(b),d.appendChild(c),a.appendChild(d)},addEventListeners:function(a){var b=this;a.querySelector(".bss-next").addEventListener("click",function(){b.showCurrent(1)},!1),a.querySelector(".bss-prev").addEventListener("click",function(){b.showCurrent(-1)},!1),a.onkeydown=function(a){a=a||window.event,37===a.keyCode?b.showCurrent(-1):39===a.keyCode&&b.showCurrent(1)}},autoCycle:function(a,b,c){var d=this,e=window.setInterval(function(){d.showCurrent(1)},b);c&&(a.addEventListener("mouseover",function(){e=clearInterval(e)},!1),a.addEventListener("mouseout",function(){e=window.setInterval(function(){d.showCurrent(1)},b)},!1))},addFullScreen:function(a){var b=this,c=document.createElement("span");c.classList.add("bss-fullscreen"),a.appendChild(c),a.querySelector(".bss-fullscreen").addEventListener("click",function(){b.toggleFullScreen(a)},!1)},addSwipe:function(a){var b=this,c=new Hammer(a);c.on("swiperight",function(){b.showCurrent(-1)}),c.on("swipeleft",function(){b.showCurrent(1)})},toggleFullScreen:function(a){document.fullscreenElement||document.mozFullScreenElement||document.webkitFullscreenElement||document.msFullscreenElement?document.exitFullscreen?document.exitFullscreen():document.msExitFullscreen?document.msExitFullscreen():document.mozCancelFullScreen?document.mozCancelFullScreen():document.webkitExitFullscreen&&document.webkitExitFullscreen():document.documentElement.requestFullscreen?a.requestFullscreen():document.documentElement.msRequestFullscreen?a.msRequestFullscreen():document.documentElement.mozRequestFullScreen?a.mozRequestFullScreen():document.documentElement.webkitRequestFullscreen&&a.webkitRequestFullscreen(a.ALLOW_KEYBOARD_INPUT)}};[].forEach.call(c,function(a){d=Object.create(e),d.init(a,b)})};

+ 1
- 0
resources/views/layouts/app.blade.php View File

@ -40,6 +40,7 @@
@can('admin')
<li><a href="{{ route('teams') }}">Teams</a></li>
@endcan
<li><a href="{{ route('slideshow') }}">Slideshow</a></li>
<li><a href="{{ route('scoreboard') }}">Scoreboard</a></li>
</ul>

+ 51
- 0
resources/views/slideshow.blade.php View File

@ -0,0 +1,51 @@
<!doctype html>
<html>
<head>
<title>Spy30 Slideshow</title>
<link rel="stylesheet" href="/slideshow/css/simple-slideshow-styles.css"">
<style>
body {
color: #212121;
font-family: "Helvetica Neue", "Calibri Light", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.02em;
background: black;
}
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="bss-slides">
@foreach($photos as $photo)
<figure>
<img src="{{ $photo['img'] }}" width="100%"/>
<figcaption>{{ $photo['description'] }}</figcaption>
</figure>
@endforeach
</div>
<script src="/slideshow/js/better-simple-slideshow.min.js"></script>
<script>
var opts = {
selector: ".bss-slides",
auto: {
// speed to advance slides at. accepts number of milliseconds
speed : 6000,
// pause advancing on mouseover? accepts boolean
pauseOnHover : true
},
// show fullscreen toggle? accepts boolean
fullScreen : true
};
makeBSS('.bss-slides', opts);
</script>
</body>
</html>

+ 2
- 0
routes/web.php View File

@ -25,6 +25,8 @@ Route::post('/dashboard/claim-tweet', 'DashboardController@claim_tweet');
Route::post('/dashboard/reject-tweet', 'DashboardController@reject_tweet');
Route::post('/dashboard/score-tweet', 'DashboardController@score_tweet');
Route::get('/slideshow', 'SlideshowController@slideshow')->name('slideshow');
Route::get('/teams', 'TeamController@index')->name('teams');
Route::post('/teams/new', 'TeamController@create_team');
Route::post('/teams/add-player', 'TeamController@add_player');

Loading…
Cancel
Save