From 7eff88e3c32c13fcae6e5b08c583306892e645e4 Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Thu, 28 Jul 2016 14:58:22 +0200 Subject: [PATCH] Updated image viewer --- wcfsetup/install/files/js/WCF.ImageViewer.js | 4 +- wcfsetup/install/files/js/WCF.js | 4 +- .../install/files/style/ui/imageViewer.scss | 440 ++++++++++++++++++ 3 files changed, 444 insertions(+), 4 deletions(-) create mode 100644 wcfsetup/install/files/style/ui/imageViewer.scss diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js index e0b4876482..2e5b2c2314 100644 --- a/wcfsetup/install/files/js/WCF.ImageViewer.js +++ b/wcfsetup/install/files/js/WCF.ImageViewer.js @@ -1213,7 +1213,7 @@ $.widget('ui.wcfImageViewer', { $(this.options.imageSelector).each(function(index, link) { var $link = $(link); - var $thumbnail = $link.children('img'); + var $thumbnail = $link.find('> img, .attachmentThumbnailImageScalable').first(); if (!$thumbnail.length) { $thumbnail = $link.parentsUntil('.formAttachmentList').last().find('.attachmentTinyThumbnail'); } @@ -1223,7 +1223,7 @@ $.widget('ui.wcfImageViewer', { fullURL: $thumbnail.data('source') ? $thumbnail.data('source').replace(/\\\//g, '/') : $link.prop('href'), link: '', title: $link.prop('title'), - url: $link.prop('href'), + url: $link.prop('href') }, series: null, thumbnail: { diff --git a/wcfsetup/install/files/js/WCF.js b/wcfsetup/install/files/js/WCF.js index 201cb6afef..71b9b5b6ae 100755 --- a/wcfsetup/install/files/js/WCF.js +++ b/wcfsetup/install/files/js/WCF.js @@ -2306,12 +2306,12 @@ if (window.WCF.Language == null) { */ WCF.Language = { add: function(key, value) { - require(['WoltLab/WCF/Language'], function(Language) { + require(['Language'], function(Language) { Language.add(key, value); }); }, addObject: function(object) { - require(['WoltLab/WCF/Language'], function(Language) { + require(['Language'], function(Language) { Language.addObject(object); }); }, diff --git a/wcfsetup/install/files/style/ui/imageViewer.scss b/wcfsetup/install/files/style/ui/imageViewer.scss new file mode 100644 index 0000000000..679b2974ed --- /dev/null +++ b/wcfsetup/install/files/style/ui/imageViewer.scss @@ -0,0 +1,440 @@ +/* ImageViewer for WCF */ +$wcfImageViewerBorderColor: rgba(51, 51, 51, 1); +$wcfImageViewerFontColor: rgba(211, 211, 211, 1); + +.wcfImageViewer { + background-color: rgba(0, 0, 0, 1); + bottom: 0; + display: none; + left: 0; + opacity: 0; + position: fixed; + right: 0; + top: 0; + z-index: 399; + + .icon { + color: rgba(102, 102, 102, 1); + + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); + } + + &.open { + display: block; + opacity: 1; + } + + &.maximized:not(.wcfImageViewerMobile) { + > header { + top: -100px; + } + + > div { + bottom: 0; + border-color: fade($wcfImageViewerBorderColor, 0%); + top: 0; + } + + > footer { + bottom: -100px; + } + } + + &.wcfImageViewerStatic > header > div { + > h1, + > h2, + > h3 { + margin-left: 0 !important; + } + } + + &.wcfImageViewerMobile { + > header, + > footer { + background-color: rgba(0, 0, 0, 1); + opacity: 1; + position: absolute; + visibility: visible; + z-index: 402; + } + + &.maximized { + > header, + > footer { + opacity: 0; + visibility: hidden; + + transition: visibility 0s linear .24s, opacity .24s linear; + } + + > div > ul > li.pointer { + opacity: 0; + } + } + + > div { + bottom: 0; + top: 0; + + > ul { + > li { + background-color: rgba(224, 224, 224, 1); + border-radius: 30px; + margin-top: -24px; + opacity: 0; + position: absolute; + top: 50%; + transition: opacity .24s; + + &.pointer { + opacity: 1; + } + + &.wcfImageViewerSlideshowButtonPrevious { + left: 10px; + + > span { + left: -3px; + position: relative; + top: 2px; + } + } + + &.wcfImageViewerSlideshowButtonNext { + right: 10px; + + > span { + position: relative; + right: -1px; + top: 2px; + } + } + + &.wcfImageViewerSlideshowButtonFull { + bottom: 80px; + left: 50%; + top: auto; + transform: translateX(-50%); + + > span { + font-size: 32px; + left: 2px; + position: relative; + top: 3px; + } + } + + &.wcfImageViewerSlideshowButtonToggle, + &.wcfImageViewerSlideshowButtonEnlarge { + display: none; + } + } + } + } + + > footer { + > .wcfImageViewerButtonPrevious, + > .wcfImageViewerButtonNext { + display: none; + } + + > div { + margin: 0; + } + } + } + + > header, + > div, + > footer { + box-sizing: border-box; + -moz-box-sizing: border-box; + left: 0; + position: fixed; + right: 0; + z-index: 400; + } + + > header { + height: 100px; + overflow: hidden; + padding: 1rem; + top: 0; + + > div { + > h1, + > h2, + > h3 { + color: $wcfImageViewerFontColor; + margin-left: 80px !important; + + > a { + color: $wcfImageViewerFontColor; + } + } + + > h1 { + font-size: 1.75rem; + } + + > h2 { + font-size: 1.25rem; + } + + > h3 { + color: $wcfImageViewerFontColor; + font-size: .85rem; + margin-top: .25rem; + } + + > a > img { + height: 64px; + width: 64px; + } + } + + > .wcfImageViewerButtonClose { + position: absolute; + right: 26px; + top: 26px; + } + } + + > div { + background-color: rgba(0, 0, 0, 1); + border-bottom: 1px solid $wcfImageViewerBorderColor; + border-top: 1px solid $wcfImageViewerBorderColor; + bottom: 100px; + top: 100px; + transition-property: top, bottom, border-color; + transition-timing-function: linear; + transition-duration: .24s; + z-index: 401; + + &.loading:before { + /*content: $fa-var-spinner; + margin: -24px 0 0 -24px; + left: 50%; + position: absolute; + top: 50%; + + color: #fff; + display: inline-block; + font-family: FontAwesome; + font-weight: normal !important; + font-style: normal !important; + line-height: 1em; + text-align: center; + + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none;*/ + + @extend .icon48; + @extend .icon-spinner; + } + + > img { + opacity: 0; + position: absolute; + top: 50%; + transition: opacity .24s linear; + z-index: 10; + + &.animateTransformation { + transition: left .24s, margin-top .24s, height .24s, width .24s, opacity .24s; + } + + &.active { + opacity: 1; + z-index: 20; + } + } + } + + &:not(.wcfImageViewerMobile) { + > header { + transition: top .24s linear; + } + + > footer { + transition: bottom .24s linear; + } + + > div { + cursor: pointer; + + > img, + > ul { + cursor: default; + } + + > ul { + background-color: rgba(0, 0, 0, .9); + border: 1px solid $wcfImageViewerBorderColor; + border-bottom-width: 0; + border-radius: 2px 2px 0 0; + display: flex; + bottom: 0; + left: 50%; + position: absolute; + transform: translateX(-50%); + z-index: 30; + + > li { + flex: 0 0 auto; + + &.pointer > span.icon { + cursor: pointer; + } + + &.wcfImageViewerSlideshowButtonToggle > span, + &.wcfImageViewerSlideshowButtonEnlarge > span, + &.wcfImageViewerSlideshowButtonFull > span { + font-size: 28px; + /* + &:before { + left: 2px; + position: relative; + top: 9px; + } + */ + } + + &.wcfImageViewerSlideshowButtonEnlarge, + &.wcfImageViewerSlideshowButtonFull { + border-left: 1px solid $wcfImageViewerBorderColor; + box-sizing: border-box; + } + + > span { + vertical-align: middle; + } + } + } + } + } + + > footer { + bottom: 0; + height: 100px; + padding: 10px; + + &:hover > div > ul > li > img { + filter: none; + -webkit-filter: none; + } + + > span { + bottom: 0; + font-size: 48px; + padding-top: 26px; + opacity: 0; + position: absolute; + top: 0; + transition: opacity .24s; + width: 30px; + z-index: 2; + + &.pointer { + opacity: .6; + + &:hover { + opacity: 1; + } + } + + &.wcfImageViewerButtonPrevious { + left: 5px; + } + + &.wcfImageViewerButtonNext { + right: 5px; + } + } + + > div { + height: 80px; + margin: 0 35px; + overflow: hidden; + white-space: nowrap; + + > ul { + display: flex; + font-size: 0; + height: 80px; + z-index: 1; + + transition: margin-left cubic-bezier(.5, 1.595, .56, .98) .24s; + + > li { + align-items: center; + display: flex; + flex: 0 0 80px; + opacity: .6; + position: relative; + transition: opacity .24s; + + &.active, + &:hover { + opacity: 1; + } + + &:not(:last-child) { + margin-right: 10px; + } + + &.active > img { + filter: none; + -webkit-filter: none; + } + + &.loading{ + &:before { + @extend .icon-48; + @extend .icon-spinner; + } + + > img { + opacity: 0; + } + } + + > img { + max-height: 80px; + max-width: 80px; + } + } + } + } + } +} + +@media only screen and (max-width: 800px) { + .wcfImageViewer { + > header { + height: 80px; + + > .wcfImageViewerButtonClose { + right: 16px; + top: 16px; + } + } + + > footer { + height: 80px; + + > div { + height: 60px; + + > ul { + height: 60px; + + > li { + height: 60px; + } + } + } + } + } +} \ No newline at end of file -- 2.20.1