diff --git a/.gitignore b/.gitignore index 2a41229..2af2c8b 100644 --- a/.gitignore +++ b/.gitignore @@ -9,3 +9,5 @@ Homestead.json Homestead.yaml npm-debug.log .env +.DS_Store + diff --git a/app/Http/Controllers/DashboardController.php b/app/Http/Controllers/DashboardController.php index 463e8de..6bf9977 100644 --- a/app/Http/Controllers/DashboardController.php +++ b/app/Http/Controllers/DashboardController.php @@ -45,11 +45,16 @@ class DashboardController extends Controller public function claim_tweet(Request $request) { $tweet = Tweet::where('id', $request->input('tweet_id'))->first(); if($tweet) { - $tweet->claimed_at = date('Y-m-d H:i:s'); - $tweet->save(); - - // Broadcast that this tweet was claimed - event(new TweetClaimedEvent($tweet)); + if($request->input('status') == 'unclaimed') { + $tweet->claimed_at = null; + $tweet->save(); + event(new NewTweetEvent($tweet)); + } else { + $tweet->claimed_at = date('Y-m-d H:i:s'); + $tweet->save(); + // Broadcast that this tweet was claimed + event(new TweetClaimedEvent($tweet)); + } } return response()->json(['result'=>'ok']); } diff --git a/app/Http/Controllers/TwitterController.php b/app/Http/Controllers/TwitterController.php index 6ccaaf3..239e6ed 100644 --- a/app/Http/Controllers/TwitterController.php +++ b/app/Http/Controllers/TwitterController.php @@ -53,7 +53,7 @@ class TwitterController extends BaseController $tweet->player_id = $player ? $player->id : 0; $tweet->team_id = $player ? $player->team->id : 0; $tweet->text = $text; - $tweet->photo = json_encode($photos); + $tweet->photo = json_encode($photos, JSON_UNESCAPED_SLASHES); $tweet->mission_id = $mission_id; $tweet->tweet_date = date('Y-m-d H:i:s', strtotime($data['created_at'])); $tweet->save(); diff --git a/package.json b/package.json index 51b9d4d..8805092 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "vue": "^2.1.10" }, "dependencies": { + "featherlight": "^1.7.6", "laravel-echo": "^1.3.0", "pusher-js": "^4.1.0" } diff --git a/public/css/app.css b/public/css/app.css index f90003c..abbfc8c 100644 --- a/public/css/app.css +++ b/public/css/app.css @@ -8350,6 +8350,153 @@ button.close { } } +/** + * Featherlight – ultra slim jQuery lightbox + * Version 1.7.6 - http://noelboss.github.io/featherlight/ + * + * Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com) + * MIT Licensed. +**/ + +@media all { + .featherlight { + display: none; + /* dimensions: spanning the background from edge to edge */ + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 2147483647; + /* z-index needs to be >= elements on the site. */ + /* position: centering content */ + text-align: center; + /* insures that the ::before pseudo element doesn't force wrap with fixed width content; */ + white-space: nowrap; + /* styling */ + cursor: pointer; + background: #333; + /* IE8 "hack" for nested featherlights */ + background: transparent; + } + + /* support for nested featherlights. Does not work in IE8 (use JS to fix) */ + + .featherlight:last-of-type { + background: rgba(0, 0, 0, 0.8); + } + + .featherlight:before { + /* position: trick to center content vertically */ + content: ''; + display: inline-block; + height: 100%; + vertical-align: middle; + } + + .featherlight .featherlight-content { + /* make content container for positioned elements (close button) */ + position: relative; + /* position: centering vertical and horizontal */ + text-align: left; + vertical-align: middle; + display: inline-block; + /* dimensions: cut off images */ + overflow: auto; + padding: 25px 25px 0; + border-bottom: 25px solid transparent; + /* dimensions: handling large content */ + margin-left: 5%; + margin-right: 5%; + max-height: 95%; + /* styling */ + background: #fff; + cursor: auto; + /* reset white-space wrapping */ + white-space: normal; + } + + /* contains the content */ + + .featherlight .featherlight-inner { + /* make sure its visible */ + display: block; + } + + /* don't show these though */ + + .featherlight script.featherlight-inner, + .featherlight link.featherlight-inner, + .featherlight style.featherlight-inner { + display: none; + } + + .featherlight .featherlight-close-icon { + /* position: centering vertical and horizontal */ + position: absolute; + z-index: 9999; + top: 0; + right: 0; + /* dimensions: 25px x 25px */ + line-height: 25px; + width: 25px; + /* styling */ + cursor: pointer; + text-align: center; + font-family: Arial, sans-serif; + background: #fff; + /* Set the background in case it overlaps the content */ + background: rgba(255, 255, 255, 0.3); + color: #000; + border: none; + padding: 0; + } + + /* See http://stackoverflow.com/questions/16077341/how-to-reset-all-default-styles-of-the-html5-button-element */ + + .featherlight .featherlight-close-icon::-moz-focus-inner { + border: 0; + padding: 0; + } + + .featherlight .featherlight-image { + /* styling */ + width: 100%; + } + + .featherlight-iframe .featherlight-content { + /* removed the border for image croping since iframe is edge to edge */ + border-bottom: 0; + padding: 0; + -webkit-overflow-scrolling: touch; + overflow-y: scroll; + } + + .featherlight iframe { + /* styling */ + border: none; + } + + .featherlight * { + /* See https://github.com/noelboss/featherlight/issues/42 */ + -webkit-box-sizing: border-box; + box-sizing: border-box; + } +} + +/* handling phones and small screens */ + +@media only screen and (max-width: 1024px) { + .featherlight .featherlight-content { + /* dimensions: maximize lightbox with for small screens */ + margin-left: 0; + margin-right: 0; + max-height: 98%; + padding: 10px 10px 0; + border-bottom: 10px solid transparent; + } +} + .team { display: -webkit-box; display: -ms-flexbox; @@ -8419,7 +8566,65 @@ button.close { padding: 8px; } +.scorecard .panel-heading { + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.scorecard .panel-heading .team { + -webkit-box-flex: 1; + -ms-flex: 1 0; + flex: 1 0; +} + +.scorecard .tweet .text { + white-space: pre-wrap; +} + .scorecard .tweet img { max-width: 100%; } +.multi-photo .photo { + position: relative; + overflow: hidden; + float: left; + cursor: pointer; + /* This positions and sizes the image (background-image) within the grid container */ + background-size: cover; + background-position: 50% 50%; + /* for multi-photo posts with 4 or more photos, use this */ + width: 50%; + height: 240px; +} + +.multi-photo .photo img { + /* hide the img tag because the image is shown by the background image */ + display: none; +} + +.multi-photo-clear { + clear: both; +} + +/* 2-up multi-photos use this layout */ + +.multi-photo.photos-2 .photo { + width: 50%; + height: 300px; +} + +/* 3-up multi-photos use this layout */ + +.multi-photo.photos-3 .photo:nth-child(1) { + width: 65%; + height: 400px; +} + +.multi-photo.photos-3 .photo:nth-child(2), +.multi-photo.photos-3 .photo:nth-child(3) { + width: 35%; + height: 200px; +} + diff --git a/public/js/app.js b/public/js/app.js index d8b1194..e5a832d 100644 --- a/public/js/app.js +++ b/public/js/app.js @@ -947,6 +947,9 @@ window.axios = __webpack_require__(16); window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; +__webpack_require__(64); +$.featherlight.autoBind = false; + /** * Next we will register the CSRF Token as a common header with Axios so that * all outgoing HTTP requests automatically have it attached. This is just @@ -46553,7 +46556,13 @@ module.exports = { } }, clickedTweet: function clickedTweet(event) { - var tweet_id = $(event.target).parents(".tweet").data('tweet-id'); + var tweet_id; + if ($(event.target).data('tweet-id')) { + tweet_id = $(event.target).data('tweet-id'); + } else { + tweet_id = $(event.target).parents(".tweet").data('tweet-id'); + } + var tweet_data = this.removeTweetFromQueue(tweet_id); if (tweet_data) { @@ -46570,6 +46579,18 @@ module.exports = { } else { console.log("Tweet not found: " + tweet_id); } + }, + dismissTweet: function dismissTweet() { + console.log('caught event'); + + // Mark as un-claimed + $.post('/dashboard/claim-tweet', { + tweet_id: this.tweet.tweet_id, + status: 'unclaimed' + }, function (response) {}); + + this.tweet = {}; + this.show = false; } }, created: function created() { @@ -46615,11 +46636,7 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c attrs: { "src": tweet.player_photo } - }), _vm._v(" "), _c('span', [_c('a', { - attrs: { - "href": 'https://twitter.com/' + tweet.player_username - } - }, [_vm._v("@" + _vm._s(tweet.player_username))])])]), _vm._v(" "), _c('div', { + }), _vm._v(" "), _c('span', [_vm._v("@" + _vm._s(tweet.player_username))])]), _vm._v(" "), _c('div', { staticClass: "text" }, [_vm._v(_vm._s(tweet.text))])]) }))])]), _vm._v(" "), _c('div', { @@ -46632,7 +46649,8 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c on: { "update:show": function($event) { _vm.show = $event - } + }, + "dismiss": _vm.dismissTweet } })], 1)])]) },staticRenderFns: []} @@ -46696,13 +46714,30 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c value: (_vm.show), expression: "show" }], - staticClass: "panel panel-default" + staticClass: "panel panel-default scorecard" }, [_c('div', { staticClass: "panel-heading" }, [_c('div', { + staticClass: "team" + }, [_c('span', { + staticClass: "team-icon", + style: ('background-color: #' + _vm.tweet.team_color) + }), _vm._v(" "), _c('span', { staticClass: "team-name" - }, [_vm._v(_vm._s(_vm.tweet.team_name))])]), _vm._v(" "), _c('div', { - staticClass: "panel-body scorecard" + }, [_vm._v(_vm._s(_vm.tweet.team_name))])]), _vm._v(" "), _c('button', { + staticClass: "close", + attrs: { + "type": "button" + }, + on: { + "click": _vm.dismiss + } + }, [_c('span', [_vm._v("×")])])]), _vm._v(" "), _c('div', { + staticClass: "panel-body" + }, [_c('div', { + staticClass: "row" + }, [_c('div', { + staticClass: "col-md-8" }, [_c('div', { staticClass: "profile" }, [_c('img', { @@ -46716,13 +46751,33 @@ module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c } }, [_vm._v("@" + _vm._s(_vm.tweet.player_username))])])]), _vm._v(" "), _c('div', { staticClass: "tweet" - }, [_vm._v("\n " + _vm._s(_vm.tweet.text) + "\n "), _vm._l((_vm.tweet.photos), function(img) { + }, [_c('div', { + staticClass: "text" + }, [_vm._v(_vm._s(_vm.tweet.text))]), _vm._v(" "), (_vm.tweet.photos) ? _c('div', [(_vm.tweet.photos.length == 1) ? _vm._l((_vm.tweet.photos), function(img) { return _c('div', [_c('img', { attrs: { "src": img } })]) - })], 2), _vm._v(" "), _c('div', [_vm._v(_vm._s(_vm.tweet.mission))])])]) + }) : [(_vm.tweet.photos) ? _c('div', { + class: 'multi-photo photos-' + _vm.tweet.photos.length + }, _vm._l((_vm.tweet.photos), function(img) { + return _c('div', { + staticClass: "photo", + style: ('background-image:url(' + img + ')'), + attrs: { + "data-featherlight": img + } + }, [_c('img', { + attrs: { + "src": img + } + })]) + })) : _vm._e(), _vm._v(" "), _c('div', { + staticClass: "multi-photo-clear" + })]], 2) : _vm._e()])]), _vm._v(" "), _c('div', { + staticClass: "col-md-4" + }, [_c('div', [_vm._v(_vm._s(_vm.tweet.mission))])])])])]) },staticRenderFns: []} module.exports.render._withStripped = true if (false) { @@ -46736,6 +46791,37 @@ if (false) { /* 61 */ /***/ (function(module, exports) { +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// // // // @@ -46764,10 +46850,40 @@ module.exports = { data: function data() { return {}; }, - created: function created() { - console.log(this.tweet); - } + + methods: { + dismiss: function dismiss() { + this.$emit('dismiss'); + } + }, + watch: { + // https://vuejs.org/v2/guide/computed.html#Watchers + show: function show(val) { + if (val) { + // https://vuejs.org/v2/guide/reactivity.html#Async-Update-Queue + Vue.nextTick(function () { + $(".multi-photo .photo").featherlight(); + }); + } + } + }, + created: function created() {} }; +/***/ }), +/* 62 */, +/* 63 */, +/* 64 */ +/***/ (function(module, exports) { + +/** + * Featherlight - ultra slim jQuery lightbox + * Version 1.7.6 - http://noelboss.github.io/featherlight/ + * + * Copyright 2017, Noël Raoul Bossart (http://www.noelboss.com) + * MIT Licensed. +**/ +!function(a){"use strict";function b(a,c){if(!(this instanceof b)){var d=new b(a,c);return d.open(),d}this.id=b.id++,this.setup(a,c),this.chainCallbacks(b._callbackChain)}function c(a,b){var c={};for(var d in a)d in b&&(c[d]=a[d],delete a[d]);return c}function d(a,b){var c={},d=new RegExp("^"+b+"([A-Z])(.*)");for(var e in a){var f=e.match(d);if(f){var g=(f[1]+f[2].replace(/([A-Z])/g,"-$1")).toLowerCase();c[g]=a[e]}}return c}if("undefined"==typeof a)return void("console"in window&&window.console.info("Too much lightness, Featherlight needs jQuery."));var e=[],f=function(b){return e=a.grep(e,function(a){return a!==b&&a.$instance.closest("body").length>0})},g={allowfullscreen:1,frameborder:1,height:1,longdesc:1,marginheight:1,marginwidth:1,name:1,referrerpolicy:1,scrolling:1,sandbox:1,src:1,srcdoc:1,width:1},h={keyup:"onKeyUp",resize:"onResize"},i=function(c){a.each(b.opened().reverse(),function(){return c.isDefaultPrevented()||!1!==this[h[c.type]](c)?void 0:(c.preventDefault(),c.stopPropagation(),!1)})},j=function(c){if(c!==b._globalHandlerInstalled){b._globalHandlerInstalled=c;var d=a.map(h,function(a,c){return c+"."+b.prototype.namespace}).join(" ");a(window)[c?"on":"off"](d,i)}};b.prototype={constructor:b,namespace:"featherlight",targetAttr:"data-featherlight",variant:null,resetCss:!1,background:null,openTrigger:"click",closeTrigger:"click",filter:null,root:"body",openSpeed:250,closeSpeed:250,closeOnClick:"background",closeOnEsc:!0,closeIcon:"✕",loading:"",persist:!1,otherClose:null,beforeOpen:a.noop,beforeContent:a.noop,beforeClose:a.noop,afterOpen:a.noop,afterContent:a.noop,afterClose:a.noop,onKeyUp:a.noop,onResize:a.noop,type:null,contentFilters:["jquery","image","html","ajax","iframe","text"],setup:function(b,c){"object"!=typeof b||b instanceof a!=!1||c||(c=b,b=void 0);var d=a.extend(this,c,{target:b}),e=d.resetCss?d.namespace+"-reset":d.namespace,f=a(d.background||['
','
','",'
'+d.loading+"
","
","
"].join("")),g="."+d.namespace+"-close"+(d.otherClose?","+d.otherClose:"");return d.$instance=f.clone().addClass(d.variant),d.$instance.on(d.closeTrigger+"."+d.namespace,function(b){var c=a(b.target);("background"===d.closeOnClick&&c.is("."+d.namespace)||"anywhere"===d.closeOnClick||c.closest(g).length)&&(d.close(b),b.preventDefault())}),this},getContent:function(){if(this.persist!==!1&&this.$content)return this.$content;var b=this,c=this.constructor.contentFilters,d=function(a){return b.$currentTarget&&b.$currentTarget.attr(a)},e=d(b.targetAttr),f=b.target||e||"",g=c[b.type];if(!g&&f in c&&(g=c[f],f=b.target&&e),f=f||d("href")||"",!g)for(var h in c)b[h]&&(g=c[h],f=b[h]);if(!g){var i=f;if(f=null,a.each(b.contentFilters,function(){return g=c[this],g.test&&(f=g.test(i)),!f&&g.regex&&i.match&&i.match(g.regex)&&(f=i),!f}),!f)return"console"in window&&window.console.error("Featherlight: no content filter found "+(i?' for "'+i+'"':" (no target specified)")),!1}return g.process.call(b,f)},setContent:function(b){var c=this;return b.is("iframe")&&c.$instance.addClass(c.namespace+"-iframe"),c.$instance.removeClass(c.namespace+"-loading"),c.$instance.find("."+c.namespace+"-inner").not(b).slice(1).remove().end().replaceWith(a.contains(c.$instance[0],b[0])?"":b),c.$content=b.addClass(c.namespace+"-inner"),c},open:function(b){var c=this;if(c.$instance.hide().appendTo(c.root),!(b&&b.isDefaultPrevented()||c.beforeOpen(b)===!1)){b&&b.preventDefault();var d=c.getContent();if(d)return e.push(c),j(!0),c.$instance.fadeIn(c.openSpeed),c.beforeContent(b),a.when(d).always(function(a){c.setContent(a),c.afterContent(b)}).then(c.$instance.promise()).done(function(){c.afterOpen(b)})}return c.$instance.detach(),a.Deferred().reject().promise()},close:function(b){var c=this,d=a.Deferred();return c.beforeClose(b)===!1?d.reject():(0===f(c).length&&j(!1),c.$instance.fadeOut(c.closeSpeed,function(){c.$instance.detach(),c.afterClose(b),d.resolve()})),d.promise()},resize:function(a,b){if(a&&b){this.$content.css("width","").css("height","");var c=Math.max(a/(parseInt(this.$content.parent().css("width"),10)-1),b/(parseInt(this.$content.parent().css("height"),10)-1));c>1&&(c=b/Math.floor(b/c),this.$content.css("width",""+a/c+"px").css("height",""+b/c+"px"))}},chainCallbacks:function(b){for(var c in b)this[c]=a.proxy(b[c],this,a.proxy(this[c],this))}},a.extend(b,{id:0,autoBind:"[data-featherlight]",defaults:b.prototype,contentFilters:{jquery:{regex:/^[#.]\w/,test:function(b){return b instanceof a&&b},process:function(b){return this.persist!==!1?a(b):a(b).clone(!0)}},image:{regex:/\.(png|jpg|jpeg|gif|tiff|bmp|svg)(\?\S*)?$/i,process:function(b){var c=this,d=a.Deferred(),e=new Image,f=a('');return e.onload=function(){f.naturalWidth=e.width,f.naturalHeight=e.height,d.resolve(f)},e.onerror=function(){d.reject(f)},e.src=b,d.promise()}},html:{regex:/^\s*<[\w!][^<]*>/,process:function(b){return a(b)}},ajax:{regex:/./,process:function(b){var c=a.Deferred(),d=a("
").load(b,function(a,b){"error"!==b&&c.resolve(d.contents()),c.fail()});return c.promise()}},iframe:{process:function(b){var e=new a.Deferred,f=a("