diff --git a/app/Http/Controllers/SlideshowController.php b/app/Http/Controllers/SlideshowController.php new file mode 100644 index 0000000..0aec0d5 --- /dev/null +++ b/app/Http/Controllers/SlideshowController.php @@ -0,0 +1,32 @@ +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 + ]); + } + +} diff --git a/public/slideshow/css/simple-slideshow-styles.css b/public/slideshow/css/simple-slideshow-styles.css new file mode 100755 index 0000000..8dbc52f --- /dev/null +++ b/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; +} diff --git a/public/slideshow/css/styles.css b/public/slideshow/css/styles.css new file mode 100755 index 0000000..7091625 --- /dev/null +++ b/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; +} diff --git a/public/slideshow/img/arrows-alt_ffffff_64.png b/public/slideshow/img/arrows-alt_ffffff_64.png new file mode 100755 index 0000000..e3f6779 Binary files /dev/null and b/public/slideshow/img/arrows-alt_ffffff_64.png differ diff --git a/public/slideshow/img/compress_ffffff_64.png b/public/slideshow/img/compress_ffffff_64.png new file mode 100755 index 0000000..54cfc9b Binary files /dev/null and b/public/slideshow/img/compress_ffffff_64.png differ diff --git a/public/slideshow/js/better-simple-slideshow.js b/public/slideshow/js/better-simple-slideshow.js new file mode 100755 index 0000000..a1299cc --- /dev/null +++ b/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 = '«'; + spanNext.innerHTML = '»'; + + // 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); + }); +}; diff --git a/public/slideshow/js/better-simple-slideshow.min.js b/public/slideshow/js/better-simple-slideshow.min.js new file mode 100755 index 0000000..4e1d242 --- /dev/null +++ b/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="«",c.innerHTML="»",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)})}; \ No newline at end of file diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 8c0eff3..0359083 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -40,6 +40,7 @@ @can('admin')
  • Teams
    • @endcan +
  • Slideshow
  • Scoreboard
    • diff --git a/resources/views/slideshow.blade.php b/resources/views/slideshow.blade.php new file mode 100644 index 0000000..a0993e5 --- /dev/null +++ b/resources/views/slideshow.blade.php @@ -0,0 +1,51 @@ + + + + Spy30 Slideshow + + + + + +
    + @foreach($photos as $photo) +
    + +
    {{ $photo['description'] }}
    +
    + @endforeach +
    + + + + + + \ No newline at end of file diff --git a/routes/web.php b/routes/web.php index 6afa3bd..f21aec5 100644 --- a/routes/web.php +++ b/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');