From: Niki Roo <niki@nikiroo.be>
Date: Thu, 21 May 2020 11:22:47 +0000 (+0200)
Subject: weblib: zoom: width AND width-limited + fix height icon
X-Git-Url: http://git.nikiroo.be/?p=fanfix.git;a=commitdiff_plain;h=a1ddc9821aaf046b10914a57b0a806cfb3b0648a

weblib: zoom: width AND width-limited + fix height icon
---

diff --git a/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java b/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
index 524fea3..93fec59 100644
--- a/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
+++ b/src/be/nikiroo/fanfix/library/WebLibraryServerHtml.java
@@ -332,7 +332,8 @@ abstract class WebLibraryServerHtml implements Runnable {
 		content.add(templates.login(uri));
 
 		return NanoHTTPD.newChunkedResponse(Status.FORBIDDEN,
-				NanoHTTPD.MIME_HTML, templates.index(true, content).read());
+				NanoHTTPD.MIME_HTML,
+				templates.index(true, false, content).read());
 	}
 
 	private Response root(IHTTPSession session, Map<String, String> cookies,
@@ -475,7 +476,7 @@ abstract class WebLibraryServerHtml implements Runnable {
 		booklines.add(0, templates.browser(browser, filter, selects));
 
 		return newInputStreamResponse(NanoHTTPD.MIME_HTML,
-				templates.index(true, booklines).read());
+				templates.index(true, false, booklines).read());
 	}
 
 	private Response getViewer(Map<String, String> cookies, String uri,
@@ -552,6 +553,7 @@ abstract class WebLibraryServerHtml implements Runnable {
 			boolean disabledRight = false;
 			boolean disabledZoomReal = false;
 			boolean disabledZoomWidth = false;
+			boolean disabledZoomWidthLimited = false;
 			boolean disabledZoomHeight = false;
 
 			Template viewerItem = null;
@@ -629,29 +631,36 @@ abstract class WebLibraryServerHtml implements Runnable {
 				}
 
 				if (para.getType() == ParagraphType.IMAGE) {
-					String zoomStyle = "max-width: 100%;";
-					disabledZoomWidth = true;
+					// default values:
+					String zoomStyle = "max-width: 800px;";
+					disabledZoomWidthLimited = true;
+
 					String zoomOption = cookies.get("zoom");
 					if (zoomOption != null && !zoomOption.isEmpty()) {
 						if (zoomOption.equals("real")) {
 							zoomStyle = "";
-							disabledZoomWidth = false;
+							disabledZoomWidthLimited = false;
 							disabledZoomReal = true;
+						} else if (zoomOption.equals("widthlimited")) {
+							// default
 						} else if (zoomOption.equals("width")) {
-							zoomStyle = "max-width: 100%;";
+							zoomStyle = "width: 100%;";
+							disabledZoomWidthLimited = false;
+							disabledZoomWidth = true;
 						} else if (zoomOption.equals("height")) {
 							// see height of navbar + optionbar
 							zoomStyle = "max-height: calc(100% - 128px);";
-							disabledZoomWidth = false;
+							disabledZoomWidthLimited = false;
 							disabledZoomHeight = true;
 						}
 					}
 
-					viewerItem = templates.viewerImage(WebLibraryUrls
-							.getStoryUrl(luid, chapter, paragraph), //
+					viewerItem = templates.viewerImage(
+							WebLibraryUrls.getStoryUrl(luid, chapter,
+									paragraph), //
 							disabledRight ? null : next, //
 							zoomStyle //
-							);
+					);
 				} else {
 					viewerItem = templates.viewerText(null,
 							new TextOutput(false).convert(para));
@@ -716,25 +725,29 @@ abstract class WebLibraryServerHtml implements Runnable {
 				buttons.add(templates.viewerOptionbarButton( //
 						"1:1", uri + "?optionName=zoom&optionValue=real",
 						"zoomreal", disabledZoomReal));
+				buttons.add(templates.viewerOptionbarButton( //
+						"]width[",
+						uri + "?optionName=zoom&optionValue=widthlimited",
+						"zoomwidthlimited", disabledZoomWidthLimited));
 				buttons.add(templates.viewerOptionbarButton( //
 						"Width", uri + "?optionName=zoom&optionValue=width",
 						"zoomwidth", disabledZoomWidth));
 				buttons.add(templates.viewerOptionbarButton( //
 						"Height", uri + "?optionName=zoom&optionValue=height",
-						"zoomHeight", disabledZoomHeight));
+						"zoomheight", disabledZoomHeight));
 			}
 
 			// Optionbar
 
 			Template optionbar = templates.viewerOptionbar( //
-					(paragraph > 0) ? 4 : 1, //
+					(paragraph > 0) ? 5 : 1, //
 					buttons //
 			);
 
 			// Full content
 
 			return newInputStreamResponse(NanoHTTPD.MIME_HTML, //
-					templates.index(false, Arrays.asList( //
+					templates.index(false, (paragraph > 0), Arrays.asList( //
 							navbar, //
 							viewerItem, //
 							optionbar //
diff --git a/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png
new file mode 100644
index 0000000..4971046
Binary files /dev/null and b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-32x32.png differ
diff --git a/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png
new file mode 100644
index 0000000..bd97942
Binary files /dev/null and b/src/be/nikiroo/fanfix/library/web/fit_to_width_limited-64x64.png differ
diff --git a/src/be/nikiroo/fanfix/library/web/style.css b/src/be/nikiroo/fanfix/library/web/style.css
index bb91002..5a4c51f 100644
--- a/src/be/nikiroo/fanfix/library/web/style.css
+++ b/src/be/nikiroo/fanfix/library/web/style.css
@@ -227,6 +227,7 @@ h3 {
 
 .bar.optionbar.s1 { padding-left: calc(50% - (1 * (64px + 5px) / 2)); }
 .bar.optionbar.s4 { padding-left: calc(50% - (4 * (64px + 5px) / 2)); }
+.bar.optionbar.s5 { padding-left: calc(50% - (5 * (64px + 5px) / 2)); }
 
 .bar.optionbar {
 	bottom: 0;
@@ -258,10 +259,11 @@ h3 {
 .bar .button.next     { color: transparent; background-image: url('/arrow_right-32x32.png');        }
 .bar .button.last     { color: transparent; background-image: url('/arrow_double_right-32x32.png'); }
 
-.bar .button.back       { color: transparent; background-image: url('/back-32x32.png');          }
-.bar .button.zoomreal   { color: transparent; background-image: url('/actual_size-32x32.png');   }
-.bar .button.zoomwidth  { color: transparent; background-image: url('/fit_to_width-32x32.png');  }
-.bar .button.zoomheight { color: transparent; background-image: url('/fit_to_height-32x32.png'); }
+.bar .button.back             { color: transparent; background-image: url('/back-32x32.png');                 }
+.bar .button.zoomreal         { color: transparent; background-image: url('/actual_size-32x32.png');          }
+.bar .button.zoomwidth        { color: transparent; background-image: url('/fit_to_width-32x32.png');         }
+.bar .button.zoomwidthlimited { color: transparent; background-image: url('/fit_to_width_limited-32x32.png'); }
+.bar .button.zoomheight       { color: transparent; background-image: url('/fit_to_height-32x32.png');        }
 
 .viewer {
 	padding-top: 64px;
@@ -316,18 +318,19 @@ a.viewer.link:hover {
 	color: #AAA391;
 }
 
-@media(min-width: 800px) {
-	 .main {
+@media(min-width: 800px) { 
+	 .main:not(.fullscreen) {
 	 	max-width: 800px;
 	 }
 	 
-	.bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.navbar       { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
 	
-	.bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
-	.bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.optionbar.s1 { padding-left: calc(400px - (1 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.optionbar.s4 { padding-left: calc(400px - (4 * (64px + 5px) / 2)); }
+	.main:not(.fullscreen) .bar.optionbar.s5 { padding-left: calc(400px - (5 * (64px + 5px) / 2)); }
 	
-	.desc { flex-direction: row; }
-	.desc .cover img {
+	.main:not(.fullscreen) .desc { flex-direction: row; }
+	.main:not(.fullscreen) .desc .cover img {
 		width: 200px;
 		padding-right: 10px;
 	}
diff --git a/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java b/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
index cdc936a..2564444 100644
--- a/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
+++ b/src/be/nikiroo/fanfix/library/web/templates/WebLibraryServerTemplates.java
@@ -44,7 +44,8 @@ public class WebLibraryServerTemplates {
 		;
 	}
 
-	public Template index(boolean banner, List<Template> content) {
+	public Template index(boolean banner, boolean fullscreen,
+			List<Template> content) {
 		String favicon = "favicon.ico";
 		String icon = Instance.getInstance().getUiConfig()
 				.getString(UiConfig.PROGRAM_ICON);
@@ -55,6 +56,7 @@ public class WebLibraryServerTemplates {
 		Template index = new Template(getClass(), "index.html") //
 				.set("title", "Fanfix") //
 				.set("favicon", favicon) //
+				.set("mainClass", fullscreen ? "fullscreen" : "") //
 				.set("content", content) //
 		;
 
@@ -182,7 +184,7 @@ public class WebLibraryServerTemplates {
 		;
 	}
 
-	// supported numberOfButtons = 4 or 1 or the moment
+	// supported numberOfButtons = 5 or 4 or 1 or the moment
 	public Template viewerOptionbar(int numberOfButtons,
 			List<Template> buttons) {
 		return new Template(getClass(), "viewer.optionbar.html") //
diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.html b/src/be/nikiroo/fanfix/library/web/templates/index.html
index 6f3934e..4edc0b0 100644
--- a/src/be/nikiroo/fanfix/library/web/templates/index.html
+++ b/src/be/nikiroo/fanfix/library/web/templates/index.html
@@ -45,6 +45,6 @@
 	<link rel='icon' type='image/x-icon' href='/${favicon}' />
 </head>
 <body>
-	<div class='main'>
+	<div class='main ${mainClass}'>
 ${banner}${content}	</div>
 </body>
diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.post.html b/src/be/nikiroo/fanfix/library/web/templates/index.post.html
deleted file mode 100644
index 52ba19e..0000000
--- a/src/be/nikiroo/fanfix/library/web/templates/index.post.html
+++ /dev/null
@@ -1,2 +0,0 @@
-	</div>
-</body>
\ No newline at end of file
diff --git a/src/be/nikiroo/fanfix/library/web/templates/index.pre.html b/src/be/nikiroo/fanfix/library/web/templates/index.pre.html
deleted file mode 100644
index 1e626ab..0000000
--- a/src/be/nikiroo/fanfix/library/web/templates/index.pre.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-<!--
-	Copyright 2020 David ROULET
-	
-	This file is part of fanfix.
-	
-	fanfix is free software: you can redistribute it and/or modify
-	it under the terms of the GNU Affero General Public License as published by
-	the Free Software Foundation, either version 3 of the License, or
-	(at your option) any later version.
-	
-	fanfix is distributed in the hope that it will be useful,
-	but WITHOUT ANY WARRANTY; without even the implied warranty of
-	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-	GNU Affero General Public License for more details.
-	
-	You should have received a copy of the GNU Affero General Public License
-	along with fanfix.  If not, see <https://www.gnu.org/licenses/>.
-	___________________________________________________________________________
-
-       This website was coded by:
-       		A kangaroo.
-                                                  _  _
-                                                 (\\( \
-                                                  `.\-.)
-                              _...._            _,-"   `-.
-\                           ,"      `-._.- -.,-"       .  \
- \`.                      ,"                               `.
-  \ `-...__              /                           .   .:  y
-   `._     ``-...__     /                           ,"```-._/
-      `-._         ```-"                      |    /_          //
-          `.._                   _            ;   <_ \        //
-              ``-.___             `.           `-._ \ \      //
-                     `- <           `.     (\ _/)/ `.\/     //
-                         \            \     `       ^^^^^^^^^
-	___________________________________________________________________________
-	
-	-->
-	<meta http-equiv="content-type" content="text/html; charset=utf-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>${title}</title>
-	<link rel="stylesheet" type="text/css" href="/style.css" />
-	<link rel="icon" type="image/x-icon" href="/${favicon}" />
-</head>
-<body>
-	<div class='main'>