Updated image viewer

diff --git a/wcfsetup/install/files/js/WCF.ImageViewer.js b/wcfsetup/install/files/js/WCF.ImageViewer.js
index e0b487648230fcd6c46e7b7360fe662b6422bde3..2e5b2c2314dcf5623b0deb24d460a4957d6a8256 100644 (file)
--- 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 201cb6afef91629bebc3b5d8f8f5255228d1cb24..71b9b5b6ae746b96a12aa32183875078648dceef 100755 (executable)
--- 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 (file)
index 0000000..679b297
--- /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