adds slideshow of all accepted photos

app/Http/Controllers/SlideshowController.php

@@ -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
+    ]);
+  }
+
+}

public/slideshow/css/simple-slideshow-styles.css

@@ -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;
+}

public/slideshow/css/styles.css

@@ -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;
+}

public/slideshow/js/better-simple-slideshow.js

@@ -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);
+    });
+};

public/slideshow/js/better-simple-slideshow.min.js

@@ -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)})};

resources/views/layouts/app.blade.php

@@ -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>
 

resources/views/slideshow.blade.php

@@ -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>

routes/web.php

@@ -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');