From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 28 Jul 2016 12:58:22 +0000 (+0200)
Subject: Updated image viewer
X-Git-Tag: 3.0.0_Beta_1~939
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=7eff88e3c32c13fcae6e5b08c583306892e645e4;p=GitHub%2FWoltLab%2FWCF.git

Updated image viewer
---

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