From bed8ae328d10952163d8ec98daec231c4410d1b4 Mon Sep 17 00:00:00 2001 From: Aaron Parecki Date: Mon, 3 Jul 2017 15:54:50 -0700 Subject: [PATCH] adds slideshow of all accepted photos --- app/Http/Controllers/SlideshowController.php | 32 ++++ .../slideshow/css/simple-slideshow-styles.css | 141 +++++++++++++++ public/slideshow/css/styles.css | 114 ++++++++++++ public/slideshow/img/arrows-alt_ffffff_64.png | Bin 0 -> 1015 bytes public/slideshow/img/compress_ffffff_64.png | Bin 0 -> 797 bytes .../slideshow/js/better-simple-slideshow.js | 166 ++++++++++++++++++ .../js/better-simple-slideshow.min.js | 1 + resources/views/layouts/app.blade.php | 1 + resources/views/slideshow.blade.php | 51 ++++++ routes/web.php | 2 + 10 files changed, 508 insertions(+) create mode 100644 app/Http/Controllers/SlideshowController.php create mode 100755 public/slideshow/css/simple-slideshow-styles.css create mode 100755 public/slideshow/css/styles.css create mode 100755 public/slideshow/img/arrows-alt_ffffff_64.png create mode 100755 public/slideshow/img/compress_ffffff_64.png create mode 100755 public/slideshow/js/better-simple-slideshow.js create mode 100755 public/slideshow/js/better-simple-slideshow.min.js create mode 100644 resources/views/slideshow.blade.php 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 0000000000000000000000000000000000000000..e3f6779e4e387a0fb0e2423b5dd803cd62446fdb GIT binary patch literal 1015 zcmV4Sur2nX6BxA&-Y_?ckY?l4oUpas+3(o*_r`R zb^&E81Ykcf3CLi)1{UP3Z8h-0sE$v-rqCiG0B3-%oJBWlInbLk_82hVsE%&nROmzq zz!IZHBh6`XT%3AB2fe=oMuD?AV^2`ObY0~MU<}v-yv-T^4A_n{1TO$%z-H=KKoLE{ z8G;7@EAx?DAy@;jHXq3if+c{@_?VCM2-pGquuN(Rpc^=Bn6FtC;3&{(ozzmtfj;A$ zP_OemaL^;MwX7kynFpBVk(4?FC=Q|m)PMs8^CT|drJ`4YyZLC5tQrGGQqIi_A*=cO zE*}MmYtmcRGxB2NHqz3T5DKO4_BZT1$g@+(?%Eo*Wgu9`+q2OLg z-+u=UE7`mS1Z(q+5Z?TbnUJ(AG%qf=N74pKb5bl+1VUExgDK5NW1ggqk`~6z>5xnx zj4T3%s5dmz=qa!!<=i1)7ch~du2@+Efb0;`$i+PP+zF0TZ-qTK%I9Vt{BDIK2*U;Q z4B}`WeD?z5z*h1@7zB3XXde9A;&~yo#5}a-+2A|iamJW?w7@(NdmmsmDw1j$e&-vN zblYq;+SPo^AhfgjmOyBC^X?GJHa}T5grt)l&gO4QS|PvAQYs&zgX<+dQGH8%PEwbX z`Dj&{Y8UI482^X?El09ZFOtlDcqSp)Fu z

eM#mf36seSl$a>jwZwE0U?HDI=3&PG*%0owc}sXf3&>>*Tv8^Ai_ye?mY))1;V znFqh0K`RJV9L;w)0Ybo{-`378~{+KJTb^_Zd_GLN++y*X(PI|l`@lR>y lkCSB=P_||OlwCmC`US>IBgRJ4Tkik>002ovPDHLkV1g`g(JKG| literal 0 HcmV?d00001 diff --git a/public/slideshow/img/compress_ffffff_64.png b/public/slideshow/img/compress_ffffff_64.png new file mode 100755 index 0000000000000000000000000000000000000000..54cfc9ba75dcf537799d0481a8a260e1706f9fbd GIT binary patch literal 797 zcmV+&1LFLNP)IR?JA3bDa$gvZ+uQf{eLw8(3^Q{b5n(qg(Jnw+69C!;XlnvM zy8w?$fK@;Stq*iff?`ktJOVBb9h(JSQv)Fe07d3=%>wJd!Lr~^;NyTQ^TX-`^T79_ z1fj~*Jir`qsw|1Ny1)hCxJ8VOdB`4v7lprwh-RA+k+1SsO9nBCh^&gaUWv%QvV7VA zZWk21GAi>TqW%c%FF3XUtP~t~x$RE_+f^rN11Qt~5Lz*xCmvVj5TU9nVFS1hEHzCM zG5~;^z}+SZLI(h_2;6fGjsXC`4Pe_$f%_DFCf94^Z>6!PK&q+1_z5wq$Uw^OXeAcpk37!EqTc|@#wg5JPlSBl; zr5j9%2!iW4ASDtAO$I_K5kP1<68sFj^-+kHngEz0+mmzFQ!OfT1(2IR=dl(Qxd6y_ zV+C&>>;WV|k4Vge9ROSNJND&_UZwzSZ~JxNC;@blCIE8t=M8h_D>i)s7$?*La5bN= z*rbd(gem|D@ECXVxl+m@{4~tno+@@@^?dHel59&{Iux@lB8O^XT5qE=pSP}vEQ`o9 z5jml4UPKD#1g`=24R0VXOVpYwdIxNf&9c@hc=J#U;3aU0Y6wx7hw@(FDR7x$2+^2_ z>Td7}aD{&%L}ec8H%j&fpAUgIWV6E2m 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');