From 14f15d8589ad03cac535f87215c3f91e19c80499 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= Date: Sat, 23 Sep 2017 20:03:34 +0200 Subject: [PATCH] Lightbox, Login design --- config.ini | 8 +- index.php | 42 ++- static/images/close.png | Bin 0 -> 280 bytes static/images/loading.gif | Bin 0 -> 8476 bytes static/images/next.png | Bin 0 -> 1350 bytes static/images/prev.png | Bin 0 -> 1360 bytes static/scripts/app.js | 17 +- static/scripts/lightbox.js | 508 +++++++++++++++++++++++++++++++++++++ static/styles/design.css | 32 +++ static/styles/lightbox.css | 213 ++++++++++++++++ 10 files changed, 810 insertions(+), 10 deletions(-) create mode 100644 static/images/close.png create mode 100644 static/images/loading.gif create mode 100644 static/images/next.png create mode 100644 static/images/prev.png create mode 100644 static/scripts/lightbox.js create mode 100644 static/styles/lightbox.css diff --git a/config.ini b/config.ini index 2278d68..09d507f 100644 --- a/config.ini +++ b/config.ini @@ -15,8 +15,14 @@ pic_big = static/images/profile_big.jpg [language] lang = en +[components] highlight = true +[custom] +;styles[] = static/styles/custom1.css +;styles[] = static/styles/custom2.css +;scripts = static/styles/scripts.css + [login] force_login = true nick = demo @@ -24,6 +30,6 @@ pass = demo [system] system_name = blog -version = 1.04 +version = 1.041 debug = true logs = false \ No newline at end of file diff --git a/index.php b/index.php index 5e58286..9ff86dc 100644 --- a/index.php +++ b/index.php @@ -47,6 +47,30 @@ $header = ''; } +// Translate styles into html +$styles = Config::get_safe("styles", []); +$styles_html = ''; +if(!empty($styles)){ + if(!is_array($styles)){ + $styles = [$styles]; + } + + $styles = array_unique($styles); + $styles_html = ''.PHP_EOL.''.PHP_EOL; +} + +// Translate script urls into html +$scripts = Config::get_safe("scripts", []); +$scripts_html = ''; +if(!empty($scripts)){ + if(!is_array($styles)){ + $styles = [$styles]; + } + + $scripts = array_unique($scripts); + $scripts_html = ''.PHP_EOL.''.PHP_EOL; +} + ?> @@ -63,7 +87,10 @@ + ' : ''; ?> + +
@@ -79,20 +106,21 @@
-
+
-

+

-
- ">  +
+ - +
@@ -299,8 +327,12 @@ + + ' : ''; ?> + + \ No newline at end of file diff --git a/static/images/close.png b/static/images/close.png new file mode 100644 index 0000000000000000000000000000000000000000..20baa1db5fdf9e22655a0f851c4401d36b9e7ef9 GIT binary patch literal 280 zcmeAS@N?(olHy`uVBq!ia0vp^(jd&i3?z4Pv7`ejn*g5>*Z=?j1DSvS{%vY%YG`Nx zvLV3R+Z)1I1qQoz?eg;S^6>Bg3hv&$d*{xbK#iaC4$A=f!X-g|!3vbDHnnh5Xg#OL;K8su!;fw4MC7hH<+BPou~5EnOggc)I$z JtaD0e0ssdsYEA$E literal 0 HcmV?d00001 diff --git a/static/images/loading.gif b/static/images/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..5087c2a644223a95984baefdb74f39a287fdfd9a GIT binary patch literal 8476 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 S-YhKu0000
').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(); + } + return false; + }); + + 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)); + + $('select, object, embed').css({ + visibility: 'hidden' + }); + + this.sizeOverlay(); + + this.album = []; + var imageNumber = 0; + + function addToAlbum($link) { + self.album.push({ + 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; + + this.disableKeyboardNav(); + var $image = this.$lightbox.find('.lb-image'); + + 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('src', self.album[imageNumber].link); + + $preloader = $(preloader); + + $image.width(preloader.width); + $image.height(preloader.height); + + if (self.options.fitImagesInViewport) { + // Fit image inside the viewport. + // Take into account the border around the image and an additional 10px gutter on each side. + + windowWidth = $(window).width(); + windowHeight = $(window).height(); + 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 - 120; + + // 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 < maxImageWidth) { + maxImageHeight = self.options.maxHeight; + } + + // Is there a fitting issue? + 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()); + }; + + preloader.src = this.album[imageNumber].link; + this.currentImageIndex = imageNumber; + }; + + // Stretch overlay to fit the viewport + Lightbox.prototype.sizeOverlay = function() { + this.$overlay + .width($(document).width()) + .height($(document).height()); + }; + + // Animate the size of the lightbox to fit the image we are showing + 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); + 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') + .find('a').on('click', function(event) { + if ($(this).attr('target') !== undefined) { + window.open($(this).attr('href'), $(this).attr('target')); + } else { + location.href = $(this).attr('href'); + } + }); + } + + 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() { + $(document).on('keyup.keyboard', $.proxy(this.keyboardAction, this)); + }; + + Lightbox.prototype.disableKeyboardNav = function() { + $(document).off('.keyboard'); + }; + + Lightbox.prototype.keyboardAction = function(event) { + var KEYCODE_ESC = 27; + var KEYCODE_LEFTARROW = 37; + var KEYCODE_RIGHTARROW = 39; + + var keycode = event.keyCode; + var key = String.fromCharCode(keycode).toLowerCase(); + if (keycode === KEYCODE_ESC || key.match(/x|o|c/)) { + this.end(); + } else if (key === 'p' || 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 (key === 'n' || 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); + $('select, object, embed').css({ + visibility: 'visible' + }); + if (this.options.disableScrolling) { + $('body').removeClass('lb-disable-scrolling'); + } + }; + + return new Lightbox(); +})); diff --git a/static/styles/design.css b/static/styles/design.css index ce18bcb..76cc80f 100644 --- a/static/styles/design.css +++ b/static/styles/design.css @@ -542,6 +542,11 @@ body { margin: 8px; } +.modal-footer .buttons .left { + display: inline-block; + float: left; +} + .modal-footer:before, .modal-footer:after { content: " "; @@ -581,6 +586,33 @@ body { border-color: #4267b2; } +.login-form input { + height: 44px; + font-size: 16px; + width: 100%; + margin-bottom: 10px; + -webkit-appearance: none; + background: #fff; + border: 1px solid #d9d9d9; + border-top: 1px solid #c0c0c0; + /* border-radius: 2px; */ + padding: 0 8px; + box-sizing: border-box; + -moz-box-sizing: border-box; +} + +.login-form input:last-child { + margin-bottom: 0; +} + +.login-form input:hover { + border: 1px solid #b9b9b9; + border-top: 1px solid #a0a0a0; + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); +} + .e_profile { float: left; } diff --git a/static/styles/lightbox.css b/static/styles/lightbox.css new file mode 100644 index 0000000..8095835 --- /dev/null +++ b/static/styles/lightbox.css @@ -0,0 +1,213 @@ +/* Preload images */ +body:after { + content: url(../images/close.png) url(../images/loading.gif) url(../images/prev.png) url(../images/next.png); + display: none; +} + +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; +} + +.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/loading.gif) 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/prev.png) left 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + 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/next.png) right 48% no-repeat; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); + opacity: 0; + -webkit-transition: opacity 0.6s; + -moz-transition: opacity 0.6s; + -o-transition: opacity 0.6s; + 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%; + -moz-border-radius-bottomleft: 4px; + -webkit-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; + -moz-border-radius-bottomright: 4px; + -webkit-border-bottom-right-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/close.png) top right no-repeat; + text-align: right; + outline: none; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70); + opacity: 0.7; + -webkit-transition: opacity 0.2s; + -moz-transition: opacity 0.2s; + -o-transition: opacity 0.2s; + transition: opacity 0.2s; +} + +.lb-data .lb-close:hover { + cursor: pointer; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); + opacity: 1; +}