diff --git a/motorradig/composer.json b/motorradig/composer.json index fa91ef5..ca78b7d 100644 --- a/motorradig/composer.json +++ b/motorradig/composer.json @@ -12,6 +12,7 @@ "fideloper/proxy": "^4.2", "fruitcake/laravel-cors": "^1.0", "guzzlehttp/guzzle": "^6.3", + "intervention/image": "^2.5", "laravel/framework": "^7.0", "laravel/tinker": "^2.0", "laravel/ui": "^2.1" diff --git a/motorradig/composer.lock b/motorradig/composer.lock index f9093e1..4a5f0a1 100644 --- a/motorradig/composer.lock +++ b/motorradig/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "5a993688a4552c644071256b6b56c39a", + "content-hash": "4af2c0988de33886777dc666c57dc670", "packages": [ { "name": "asm89/stack-cors", @@ -739,6 +739,76 @@ ], "time": "2019-07-01T23:21:34+00:00" }, + { + "name": "intervention/image", + "version": "2.5.1", + "source": { + "type": "git", + "url": "https://github.com/Intervention/image.git", + "reference": "abbf18d5ab8367f96b3205ca3c89fb2fa598c69e" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/Intervention/image/zipball/abbf18d5ab8367f96b3205ca3c89fb2fa598c69e", + "reference": "abbf18d5ab8367f96b3205ca3c89fb2fa598c69e", + "shasum": "" + }, + "require": { + "ext-fileinfo": "*", + "guzzlehttp/psr7": "~1.1", + "php": ">=5.4.0" + }, + "require-dev": { + "mockery/mockery": "~0.9.2", + "phpunit/phpunit": "^4.8 || ^5.7" + }, + "suggest": { + "ext-gd": "to use GD library based image processing.", + "ext-imagick": "to use Imagick based image processing.", + "intervention/imagecache": "Caching extension for the Intervention Image library" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.4-dev" + }, + "laravel": { + "providers": [ + "Intervention\\Image\\ImageServiceProvider" + ], + "aliases": { + "Image": "Intervention\\Image\\Facades\\Image" + } + } + }, + "autoload": { + "psr-4": { + "Intervention\\Image\\": "src/Intervention/Image" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Oliver Vogel", + "email": "oliver@olivervogel.com", + "homepage": "http://olivervogel.com/" + } + ], + "description": "Image handling and manipulation library with support for Laravel integration", + "homepage": "http://image.intervention.io/", + "keywords": [ + "gd", + "image", + "imagick", + "laravel", + "thumbnail", + "watermark" + ], + "time": "2019-11-02T09:15:47+00:00" + }, { "name": "laravel/framework", "version": "v7.28.3", @@ -5737,6 +5807,7 @@ "keywords": [ "tokenizer" ], + "abandoned": true, "time": "2019-09-17T06:23:10+00:00" }, { diff --git a/motorradig/config/app.php b/motorradig/config/app.php index 6309bdc..28d45e6 100644 --- a/motorradig/config/app.php +++ b/motorradig/config/app.php @@ -165,7 +165,7 @@ return [ /* * Package Service Providers... */ - + Intervention\Image\ImageServiceProvider::class, /* * Application Service Providers... */ @@ -227,6 +227,8 @@ return [ 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, + 'Image' => Intervention\Image\Facades\Image::class, + ], ]; diff --git a/motorradig/config/filesystems.php b/motorradig/config/filesystems.php index 94c8112..85f6e65 100644 --- a/motorradig/config/filesystems.php +++ b/motorradig/config/filesystems.php @@ -74,7 +74,7 @@ return [ | | Here you may configure the symbolic links that will be created when the | `storage:link` Artisan command is executed. The array keys should be - | the locations of the links and the values should be their targets. + | the user of the links and the values should be their targets. | */ diff --git a/motorradig/package-lock.json b/motorradig/package-lock.json index 2b0a88a..ee08a06 100644 --- a/motorradig/package-lock.json +++ b/motorradig/package-lock.json @@ -5307,6 +5307,11 @@ "leven": "^3.1.0" } }, + "lightbox2": { + "version": "2.11.3", + "resolved": "https://registry.npmjs.org/lightbox2/-/lightbox2-2.11.3.tgz", + "integrity": "sha512-Q4v6il/OK9ttgEkAxSok/jrI/LUbqTrePFchqP2x/59qaDIZgJjEEc5Xf7peSMc/55Zo5PAgmX6EiN/BeEeUBQ==" + }, "loader-runner": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-2.4.0.tgz", diff --git a/motorradig/package.json b/motorradig/package.json index cb2f31d..6e0b44b 100644 --- a/motorradig/package.json +++ b/motorradig/package.json @@ -24,6 +24,7 @@ "vue-template-compiler": "^2.6.10" }, "dependencies": { - "@fortawesome/fontawesome-free": "^5.14.0" + "@fortawesome/fontawesome-free": "^5.14.0", + "lightbox2": "^2.11.3" } } diff --git a/motorradig/public/css/app.css b/motorradig/public/css/app.css index b83d39f..27bddac 100644 --- a/motorradig/public/css/app.css +++ b/motorradig/public/css/app.css @@ -4574,6 +4574,201 @@ readers do not read off random characters that represent icons */ .fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; } +body.lb-disable-scrolling { + overflow: hidden; +} + +.lightboxOverlay { + position: absolute; + top: 0; + left: 0; + z-index: 9999; + background-color: black; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); + opacity: 0.8; + display: none; +} + +.lightbox { + position: absolute; + left: 0; + width: 100%; + z-index: 10000; + text-align: center; + line-height: 0; + font-weight: normal; + outline: none; +} + +.lightbox .lb-image { + display: block; + height: auto; + max-width: inherit; + max-height: none; + border-radius: 3px; + + /* Image border */ + border: 4px solid white; +} + +.lightbox a img { + border: none; +} + +.lb-outerContainer { + position: relative; + *zoom: 1; + width: 250px; + height: 250px; + margin: 0 auto; + border-radius: 4px; + + /* Background color behind image. + This is visible during transitions. */ + background-color: white; +} + +.lb-outerContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-loader { + position: absolute; + top: 43%; + left: 0; + height: 25%; + width: 100%; + text-align: center; + line-height: 0; +} + +.lb-cancel { + display: block; + width: 32px; + height: 32px; + margin: 0 auto; + background: url(/images/vendor/lightbox2/dist/loading.gif?2299ad0b3f63413f026dfec20c205b8f) no-repeat; +} + +.lb-nav { + position: absolute; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 10; +} + +.lb-container > .nav { + left: 0; +} + +.lb-nav a { + outline: none; + background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='); +} + +.lb-prev, .lb-next { + height: 100%; + cursor: pointer; + display: block; +} + +.lb-nav a.lb-prev { + width: 34%; + left: 0; + float: left; + background: url(/images/vendor/lightbox2/dist/prev.png?84b76dee6b27b795e89e3649078a11c2) left 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + transition: opacity 0.6s; +} + +.lb-nav a.lb-prev:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-nav a.lb-next { + width: 64%; + right: 0; + float: right; + background: url(/images/vendor/lightbox2/dist/next.png?31f15875975aab69085470aabbfec802) right 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + transition: opacity 0.6s; +} + +.lb-nav a.lb-next:hover { + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} + +.lb-dataContainer { + margin: 0 auto; + padding-top: 5px; + *zoom: 1; + width: 100%; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} + +.lb-dataContainer:after { + content: ""; + display: table; + clear: both; +} + +.lb-data { + padding: 0 4px; + color: #ccc; +} + +.lb-data .lb-details { + width: 85%; + float: left; + text-align: left; + line-height: 1.1em; +} + +.lb-data .lb-caption { + font-size: 13px; + font-weight: bold; + line-height: 1em; +} + +.lb-data .lb-caption a { + color: #4ae; +} + +.lb-data .lb-number { + display: block; + clear: left; + padding-bottom: 1em; + font-size: 12px; + color: #999999; +} + +.lb-data .lb-close { + display: block; + float: right; + width: 30px; + height: 30px; + background: url(/images/vendor/lightbox2/dist/close.png?d9d2d0b1308cb694aa8116915592e2a9) top right no-repeat; + text-align: right; + outline: none; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + opacity: 0.7; + transition: opacity 0.2s; +} + +.lb-data .lb-close:hover { + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +} @charset "UTF-8"; /*! diff --git a/motorradig/public/css/custom.css b/motorradig/public/css/custom.css index f038ce3..09a5837 100644 --- a/motorradig/public/css/custom.css +++ b/motorradig/public/css/custom.css @@ -5,13 +5,13 @@ body, html { } .bg { /* The image used */ - background-image: url("../images/motorcycle1_unsplash.jpg"); + background-image: url("../img/motorcycle1_unsplash.jpg"); /* Full height */ height: 100%; - /* background: #3df url('../images/motorcycle1_unsplash.jpg') no-repeat fixed center; */ + /* background: #3df url('../img/motorcycle1_unsplash.jpg') no-repeat fixed center; */ /* Center and scale the image nicely */ background-position: center; diff --git a/motorradig/public/images/vendor/lightbox2/dist/close.png b/motorradig/public/images/vendor/lightbox2/dist/close.png new file mode 100644 index 0000000..20baa1d Binary files /dev/null and b/motorradig/public/images/vendor/lightbox2/dist/close.png differ diff --git a/motorradig/public/images/vendor/lightbox2/dist/loading.gif b/motorradig/public/images/vendor/lightbox2/dist/loading.gif new file mode 100644 index 0000000..5087c2a Binary files /dev/null and b/motorradig/public/images/vendor/lightbox2/dist/loading.gif differ diff --git a/motorradig/public/images/vendor/lightbox2/dist/next.png b/motorradig/public/images/vendor/lightbox2/dist/next.png new file mode 100644 index 0000000..08365ac Binary files /dev/null and b/motorradig/public/images/vendor/lightbox2/dist/next.png differ diff --git a/motorradig/public/images/vendor/lightbox2/dist/prev.png b/motorradig/public/images/vendor/lightbox2/dist/prev.png new file mode 100644 index 0000000..329fa98 Binary files /dev/null and b/motorradig/public/images/vendor/lightbox2/dist/prev.png differ diff --git a/motorradig/public/images/logo_placeholder.jpg b/motorradig/public/img/logo_placeholder.jpg similarity index 100% rename from motorradig/public/images/logo_placeholder.jpg rename to motorradig/public/img/logo_placeholder.jpg diff --git a/motorradig/public/images/motorcycle1_unsplash.jpg b/motorradig/public/img/motorcycle1_unsplash.jpg similarity index 100% rename from motorradig/public/images/motorcycle1_unsplash.jpg rename to motorradig/public/img/motorcycle1_unsplash.jpg diff --git a/motorradig/public/images/motorrad1.jpeg b/motorradig/public/img/motorrad1.jpeg similarity index 100% rename from motorradig/public/images/motorrad1.jpeg rename to motorradig/public/img/motorrad1.jpeg diff --git a/motorradig/public/images/motorrad2.jpeg b/motorradig/public/img/motorrad2.jpeg similarity index 100% rename from motorradig/public/images/motorrad2.jpeg rename to motorradig/public/img/motorrad2.jpeg diff --git a/motorradig/public/images/motorrad3.jpeg b/motorradig/public/img/motorrad3.jpeg similarity index 100% rename from motorradig/public/images/motorrad3.jpeg rename to motorradig/public/img/motorrad3.jpeg diff --git a/motorradig/public/images/motorrad4.jpeg b/motorradig/public/img/motorrad4.jpeg similarity index 100% rename from motorradig/public/images/motorrad4.jpeg rename to motorradig/public/img/motorrad4.jpeg diff --git a/motorradig/public/js/app.js b/motorradig/public/js/app.js index 649e94c..37a5f20 100644 --- a/motorradig/public/js/app.js +++ b/motorradig/public/js/app.js @@ -17234,6 +17234,566 @@ return jQuery; } ); +/***/ }), + +/***/ "./node_modules/lightbox2/dist/js/lightbox.js": +/*!****************************************************!*\ + !*** ./node_modules/lightbox2/dist/js/lightbox.js ***! + \****************************************************/ +/*! no static exports found */ +/***/ (function(module, exports, __webpack_require__) { + +var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*! + * Lightbox v2.11.3 + * by Lokesh Dhakar + * + * More info: + * http://lokeshdhakar.com/projects/lightbox2/ + * + * Copyright Lokesh Dhakar + * Released under the MIT license + * https://github.com/lokesh/lightbox2/blob/master/LICENSE + * + * @preserve + */ + +// Uses Node, AMD or browser globals to create a module. +(function (root, factory) { + if (true) { + // AMD. Register as an anonymous module. + !(__WEBPACK_AMD_DEFINE_ARRAY__ = [__webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js")], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory), + __WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ? + (__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__), + __WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__)); + } else {} +}(this, function ($) { + + function Lightbox(options) { + this.album = []; + this.currentImageIndex = void 0; + this.init(); + + // options + this.options = $.extend({}, this.constructor.defaults); + this.option(options); + } + + // Descriptions of all options available on the demo site: + // http://lokeshdhakar.com/projects/lightbox2/index.html#options + Lightbox.defaults = { + albumLabel: 'Image %1 of %2', + alwaysShowNavOnTouchDevices: false, + fadeDuration: 600, + fitImagesInViewport: true, + imageFadeDuration: 600, + // maxWidth: 800, + // maxHeight: 600, + positionFromTop: 50, + resizeDuration: 700, + showImageNumberLabel: true, + wrapAround: false, + disableScrolling: false, + /* + Sanitize Title + If the caption data is trusted, for example you are hardcoding it in, then leave this to false. + This will free you to add html tags, such as links, in the caption. + + If the caption data is user submitted or from some other untrusted source, then set this to true + to prevent xss and other injection attacks. + */ + sanitizeTitle: false + }; + + Lightbox.prototype.option = function(options) { + $.extend(this.options, options); + }; + + Lightbox.prototype.imageCountLabel = function(currentImageNum, totalImages) { + return this.options.albumLabel.replace(/%1/g, currentImageNum).replace(/%2/g, totalImages); + }; + + Lightbox.prototype.init = function() { + var self = this; + // Both enable and build methods require the body tag to be in the DOM. + $(document).ready(function() { + self.enable(); + self.build(); + }); + }; + + // Loop through anchors and areamaps looking for either data-lightbox attributes or rel attributes + // that contain 'lightbox'. When these are clicked, start lightbox. + Lightbox.prototype.enable = function() { + var self = this; + $('body').on('click', 'a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]', function(event) { + self.start($(event.currentTarget)); + return false; + }); + }; + + // Build html for the lightbox and the overlay. + // Attach event handlers to the new DOM elements. click click click + Lightbox.prototype.build = function() { + if ($('#lightbox').length > 0) { + return; + } + + var self = this; + + // The two root notes generated, #lightboxOverlay and #lightbox are given + // tabindex attrs so they are focusable. We attach our keyboard event + // listeners to these two elements, and not the document. Clicking anywhere + // while Lightbox is opened will keep the focus on or inside one of these + // two elements. + // + // We do this so we can prevent propogation of the Esc keypress when + // Lightbox is open. This prevents it from intefering with other components + // on the page below. + // + // Github issue: https://github.com/lokesh/lightbox2/issues/663 + $('
').appendTo($('body')); + + // Cache jQuery objects + this.$lightbox = $('#lightbox'); + this.$overlay = $('#lightboxOverlay'); + this.$outerContainer = this.$lightbox.find('.lb-outerContainer'); + this.$container = this.$lightbox.find('.lb-container'); + this.$image = this.$lightbox.find('.lb-image'); + this.$nav = this.$lightbox.find('.lb-nav'); + + // Store css values for future lookup + this.containerPadding = { + top: parseInt(this.$container.css('padding-top'), 10), + right: parseInt(this.$container.css('padding-right'), 10), + bottom: parseInt(this.$container.css('padding-bottom'), 10), + left: parseInt(this.$container.css('padding-left'), 10) + }; + + this.imageBorderWidth = { + top: parseInt(this.$image.css('border-top-width'), 10), + right: parseInt(this.$image.css('border-right-width'), 10), + bottom: parseInt(this.$image.css('border-bottom-width'), 10), + left: parseInt(this.$image.css('border-left-width'), 10) + }; + + // Attach event handlers to the newly minted DOM elements + this.$overlay.hide().on('click', function() { + self.end(); + return false; + }); + + this.$lightbox.hide().on('click', function(event) { + if ($(event.target).attr('id') === 'lightbox') { + self.end(); + } + }); + + this.$outerContainer.on('click', function(event) { + if ($(event.target).attr('id') === 'lightbox') { + self.end(); + } + return false; + }); + + this.$lightbox.find('.lb-prev').on('click', function() { + if (self.currentImageIndex === 0) { + self.changeImage(self.album.length - 1); + } else { + self.changeImage(self.currentImageIndex - 1); + } + return false; + }); + + this.$lightbox.find('.lb-next').on('click', function() { + if (self.currentImageIndex === self.album.length - 1) { + self.changeImage(0); + } else { + self.changeImage(self.currentImageIndex + 1); + } + return false; + }); + + /* + Show context menu for image on right-click + + There is a div containing the navigation that spans the entire image and lives above of it. If + you right-click, you are right clicking this div and not the image. This prevents users from + saving the image or using other context menu actions with the image. + + To fix this, when we detect the right mouse button is pressed down, but not yet clicked, we + set pointer-events to none on the nav div. This is so that the upcoming right-click event on + the next mouseup will bubble down to the image. Once the right-click/contextmenu event occurs + we set the pointer events back to auto for the nav div so it can capture hover and left-click + events as usual. + */ + this.$nav.on('mousedown', function(event) { + if (event.which === 3) { + self.$nav.css('pointer-events', 'none'); + + self.$lightbox.one('contextmenu', function() { + setTimeout(function() { + this.$nav.css('pointer-events', 'auto'); + }.bind(self), 0); + }); + } + }); + + + this.$lightbox.find('.lb-loader, .lb-close').on('click', function() { + self.end(); + return false; + }); + }; + + // Show overlay and lightbox. If the image is part of a set, add siblings to album array. + Lightbox.prototype.start = function($link) { + var self = this; + var $window = $(window); + + $window.on('resize', $.proxy(this.sizeOverlay, this)); + + this.sizeOverlay(); + + this.album = []; + var imageNumber = 0; + + function addToAlbum($link) { + self.album.push({ + alt: $link.attr('data-alt'), + link: $link.attr('href'), + title: $link.attr('data-title') || $link.attr('title') + }); + } + + // Support both data-lightbox attribute and rel attribute implementations + var dataLightboxValue = $link.attr('data-lightbox'); + var $links; + + if (dataLightboxValue) { + $links = $($link.prop('tagName') + '[data-lightbox="' + dataLightboxValue + '"]'); + for (var i = 0; i < $links.length; i = ++i) { + addToAlbum($($links[i])); + if ($links[i] === $link[0]) { + imageNumber = i; + } + } + } else { + if ($link.attr('rel') === 'lightbox') { + // If image is not part of a set + addToAlbum($link); + } else { + // If image is part of a set + $links = $($link.prop('tagName') + '[rel="' + $link.attr('rel') + '"]'); + for (var j = 0; j < $links.length; j = ++j) { + addToAlbum($($links[j])); + if ($links[j] === $link[0]) { + imageNumber = j; + } + } + } + } + + // Position Lightbox + var top = $window.scrollTop() + this.options.positionFromTop; + var left = $window.scrollLeft(); + this.$lightbox.css({ + top: top + 'px', + left: left + 'px' + }).fadeIn(this.options.fadeDuration); + + // Disable scrolling of the page while open + if (this.options.disableScrolling) { + $('body').addClass('lb-disable-scrolling'); + } + + this.changeImage(imageNumber); + }; + + // Hide most UI elements in preparation for the animated resizing of the lightbox. + Lightbox.prototype.changeImage = function(imageNumber) { + var self = this; + var filename = this.album[imageNumber].link; + var filetype = filename.split('.').slice(-1)[0]; + var $image = this.$lightbox.find('.lb-image'); + + // Disable keyboard nav during transitions + this.disableKeyboardNav(); + + // Show loading state + this.$overlay.fadeIn(this.options.fadeDuration); + $('.lb-loader').fadeIn('slow'); + this.$lightbox.find('.lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption').hide(); + this.$outerContainer.addClass('animating'); + + // When image to show is preloaded, we send the width and height to sizeContainer() + var preloader = new Image(); + preloader.onload = function() { + var $preloader; + var imageHeight; + var imageWidth; + var maxImageHeight; + var maxImageWidth; + var windowHeight; + var windowWidth; + + $image.attr({ + 'alt': self.album[imageNumber].alt, + 'src': filename + }); + + $preloader = $(preloader); + + $image.width(preloader.width); + $image.height(preloader.height); + windowWidth = $(window).width(); + windowHeight = $(window).height(); + + // Calculate the max image dimensions for the current viewport. + // Take into account the border around the image and an additional 10px gutter on each side. + maxImageWidth = windowWidth - self.containerPadding.left - self.containerPadding.right - self.imageBorderWidth.left - self.imageBorderWidth.right - 20; + maxImageHeight = windowHeight - self.containerPadding.top - self.containerPadding.bottom - self.imageBorderWidth.top - self.imageBorderWidth.bottom - self.options.positionFromTop - 70; + + /* + Since many SVGs have small intrinsic dimensions, but they support scaling + up without quality loss because of their vector format, max out their + size. + */ + if (filetype === 'svg') { + $image.width(maxImageWidth); + $image.height(maxImageHeight); + } + + // Fit image inside the viewport. + if (self.options.fitImagesInViewport) { + + // Check if image size is larger then maxWidth|maxHeight in settings + if (self.options.maxWidth && self.options.maxWidth < maxImageWidth) { + maxImageWidth = self.options.maxWidth; + } + if (self.options.maxHeight && self.options.maxHeight < maxImageHeight) { + maxImageHeight = self.options.maxHeight; + } + + } else { + maxImageWidth = self.options.maxWidth || preloader.width || maxImageWidth; + maxImageHeight = self.options.maxHeight || preloader.height || maxImageHeight; + } + + // Is the current image's width or height is greater than the maxImageWidth or maxImageHeight + // option than we need to size down while maintaining the aspect ratio. + if ((preloader.width > maxImageWidth) || (preloader.height > maxImageHeight)) { + if ((preloader.width / maxImageWidth) > (preloader.height / maxImageHeight)) { + imageWidth = maxImageWidth; + imageHeight = parseInt(preloader.height / (preloader.width / imageWidth), 10); + $image.width(imageWidth); + $image.height(imageHeight); + } else { + imageHeight = maxImageHeight; + imageWidth = parseInt(preloader.width / (preloader.height / imageHeight), 10); + $image.width(imageWidth); + $image.height(imageHeight); + } + } + self.sizeContainer($image.width(), $image.height()); + }; + + // Preload image before showing + preloader.src = this.album[imageNumber].link; + this.currentImageIndex = imageNumber; + }; + + // Stretch overlay to fit the viewport + Lightbox.prototype.sizeOverlay = function() { + var self = this; + /* + We use a setTimeout 0 to pause JS execution and let the rendering catch-up. + Why do this? If the `disableScrolling` option is set to true, a class is added to the body + tag that disables scrolling and hides the scrollbar. We want to make sure the scrollbar is + hidden before we measure the document width, as the presence of the scrollbar will affect the + number. + */ + setTimeout(function() { + self.$overlay + .width($(document).width()) + .height($(document).height()); + + }, 0); + }; + + // Animate the size of the lightbox to fit the image we are showing + // This method also shows the the image. + Lightbox.prototype.sizeContainer = function(imageWidth, imageHeight) { + var self = this; + + var oldWidth = this.$outerContainer.outerWidth(); + var oldHeight = this.$outerContainer.outerHeight(); + var newWidth = imageWidth + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right; + var newHeight = imageHeight + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom; + + function postResize() { + self.$lightbox.find('.lb-dataContainer').width(newWidth); + self.$lightbox.find('.lb-prevLink').height(newHeight); + self.$lightbox.find('.lb-nextLink').height(newHeight); + + // Set focus on one of the two root nodes so keyboard events are captured. + self.$overlay.focus(); + + self.showImage(); + } + + if (oldWidth !== newWidth || oldHeight !== newHeight) { + this.$outerContainer.animate({ + width: newWidth, + height: newHeight + }, this.options.resizeDuration, 'swing', function() { + postResize(); + }); + } else { + postResize(); + } + }; + + // Display the image and its details and begin preload neighboring images. + Lightbox.prototype.showImage = function() { + this.$lightbox.find('.lb-loader').stop(true).hide(); + this.$lightbox.find('.lb-image').fadeIn(this.options.imageFadeDuration); + + this.updateNav(); + this.updateDetails(); + this.preloadNeighboringImages(); + this.enableKeyboardNav(); + }; + + // Display previous and next navigation if appropriate. + Lightbox.prototype.updateNav = function() { + // Check to see if the browser supports touch events. If so, we take the conservative approach + // and assume that mouse hover events are not supported and always show prev/next navigation + // arrows in image sets. + var alwaysShowNav = false; + try { + document.createEvent('TouchEvent'); + alwaysShowNav = (this.options.alwaysShowNavOnTouchDevices) ? true : false; + } catch (e) {} + + this.$lightbox.find('.lb-nav').show(); + + if (this.album.length > 1) { + if (this.options.wrapAround) { + if (alwaysShowNav) { + this.$lightbox.find('.lb-prev, .lb-next').css('opacity', '1'); + } + this.$lightbox.find('.lb-prev, .lb-next').show(); + } else { + if (this.currentImageIndex > 0) { + this.$lightbox.find('.lb-prev').show(); + if (alwaysShowNav) { + this.$lightbox.find('.lb-prev').css('opacity', '1'); + } + } + if (this.currentImageIndex < this.album.length - 1) { + this.$lightbox.find('.lb-next').show(); + if (alwaysShowNav) { + this.$lightbox.find('.lb-next').css('opacity', '1'); + } + } + } + } + }; + + // Display caption, image number, and closing button. + Lightbox.prototype.updateDetails = function() { + var self = this; + + // Enable anchor clicks in the injected caption html. + // Thanks Nate Wright for the fix. @https://github.com/NateWr + if (typeof this.album[this.currentImageIndex].title !== 'undefined' && + this.album[this.currentImageIndex].title !== '') { + var $caption = this.$lightbox.find('.lb-caption'); + if (this.options.sanitizeTitle) { + $caption.text(this.album[this.currentImageIndex].title); + } else { + $caption.html(this.album[this.currentImageIndex].title); + } + $caption.fadeIn('fast'); + } + + if (this.album.length > 1 && this.options.showImageNumberLabel) { + var labelText = this.imageCountLabel(this.currentImageIndex + 1, this.album.length); + this.$lightbox.find('.lb-number').text(labelText).fadeIn('fast'); + } else { + this.$lightbox.find('.lb-number').hide(); + } + + this.$outerContainer.removeClass('animating'); + + this.$lightbox.find('.lb-dataContainer').fadeIn(this.options.resizeDuration, function() { + return self.sizeOverlay(); + }); + }; + + // Preload previous and next images in set. + Lightbox.prototype.preloadNeighboringImages = function() { + if (this.album.length > this.currentImageIndex + 1) { + var preloadNext = new Image(); + preloadNext.src = this.album[this.currentImageIndex + 1].link; + } + if (this.currentImageIndex > 0) { + var preloadPrev = new Image(); + preloadPrev.src = this.album[this.currentImageIndex - 1].link; + } + }; + + Lightbox.prototype.enableKeyboardNav = function() { + this.$lightbox.on('keyup.keyboard', $.proxy(this.keyboardAction, this)); + this.$overlay.on('keyup.keyboard', $.proxy(this.keyboardAction, this)); + }; + + Lightbox.prototype.disableKeyboardNav = function() { + this.$lightbox.off('.keyboard'); + this.$overlay.off('.keyboard'); + }; + + Lightbox.prototype.keyboardAction = function(event) { + var KEYCODE_ESC = 27; + var KEYCODE_LEFTARROW = 37; + var KEYCODE_RIGHTARROW = 39; + + var keycode = event.keyCode; + if (keycode === KEYCODE_ESC) { + // Prevent bubbling so as to not affect other components on the page. + event.stopPropagation(); + this.end(); + } else if (keycode === KEYCODE_LEFTARROW) { + if (this.currentImageIndex !== 0) { + this.changeImage(this.currentImageIndex - 1); + } else if (this.options.wrapAround && this.album.length > 1) { + this.changeImage(this.album.length - 1); + } + } else if (keycode === KEYCODE_RIGHTARROW) { + if (this.currentImageIndex !== this.album.length - 1) { + this.changeImage(this.currentImageIndex + 1); + } else if (this.options.wrapAround && this.album.length > 1) { + this.changeImage(0); + } + } + }; + + // Closing time. :-( + Lightbox.prototype.end = function() { + this.disableKeyboardNav(); + $(window).off('resize', this.sizeOverlay); + this.$lightbox.fadeOut(this.options.fadeDuration); + this.$overlay.fadeOut(this.options.fadeDuration); + + if (this.options.disableScrolling) { + $('body').removeClass('lb-disable-scrolling'); + } + }; + + return new Lightbox(); +})); + + /***/ }), /***/ "./node_modules/lodash/lodash.js": @@ -49765,6 +50325,8 @@ try { window.$ = window.jQuery = __webpack_require__(/*! jquery */ "./node_modules/jquery/dist/jquery.js"); __webpack_require__(/*! bootstrap */ "./node_modules/bootstrap/dist/js/bootstrap.js"); + + __webpack_require__(/*! lightbox2 */ "./node_modules/lightbox2/dist/js/lightbox.js"); } catch (e) {} /** * We'll load the axios HTTP library which allows us to easily issue requests @@ -49878,8 +50440,8 @@ __webpack_require__.r(__webpack_exports__); /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -__webpack_require__(/*! /home/tschneider/repos/motorradig/motorradig2/motorradig/resources/js/app.js */"./resources/js/app.js"); -module.exports = __webpack_require__(/*! /home/tschneider/repos/motorradig/motorradig2/motorradig/resources/sass/app.scss */"./resources/sass/app.scss"); +__webpack_require__(/*! /home/tschneider/repos/motorradig/motorradig/resources/js/app.js */"./resources/js/app.js"); +module.exports = __webpack_require__(/*! /home/tschneider/repos/motorradig/motorradig/resources/sass/app.scss */"./resources/sass/app.scss"); /***/ }) diff --git a/motorradig/resources/js/bootstrap.js b/motorradig/resources/js/bootstrap.js index 63605fa..d4738d9 100644 --- a/motorradig/resources/js/bootstrap.js +++ b/motorradig/resources/js/bootstrap.js @@ -11,6 +11,7 @@ try { window.$ = window.jQuery = require('jquery'); require('bootstrap'); + require('lightbox2'); } catch (e) {} /** diff --git a/motorradig/resources/sass/app.scss b/motorradig/resources/sass/app.scss index 6136302..cd8de14 100644 --- a/motorradig/resources/sass/app.scss +++ b/motorradig/resources/sass/app.scss @@ -8,3 +8,4 @@ // Bootstrap @import 'custom_bootstrap.scss'; @import '~bootstrap/scss/bootstrap'; +@import '~lightbox2/dist/css/lightbox.css'; diff --git a/motorradig/resources/views/users/edit.blade.php b/motorradig/resources/views/users/edit.blade.php index 791b2f0..d033025 100644 --- a/motorradig/resources/views/users/edit.blade.php +++ b/motorradig/resources/views/users/edit.blade.php @@ -24,9 +24,9 @@