Bump version to v0.12.3

README.md

@@ -51,7 +51,7 @@ The official docker images are available on [Dockerhub](https://hub.docker.com/r
 ### CLI
 
 ```
-  Mango - Manga Server and Web Reader. Version 0.12.2
+  Mango - Manga Server and Web Reader. Version 0.12.3
 
   Usage:
 
@@ -142,6 +142,7 @@ Mobile UI:
 ## Sponsors
 
 <a href="https://casinoshunter.com/online-casinos/"><img src="https://i.imgur.com/EJb3wBo.png" width="150" height="auto"></a>
+<a href="https://www.browserstack.com/open-source"><img src="https://i.imgur.com/hGJUJXD.png" width="150" height="auto"></a>
 
 ## Contributors
 

gulpfile.js

@@ -1,28 +1,43 @@
 const gulp = require('gulp');
-const minify = require("gulp-babel-minify");
+const babel = require('gulp-babel');
+const minify = require('gulp-babel-minify');
 const minifyCss = require('gulp-minify-css');
 const less = require('gulp-less');
 
-gulp.task('copy-uikit-js', () => {
+// Copy libraries from node_moduels to public/js
+gulp.task('copy-js', () => {
 	return gulp.src([
+			'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
+			'node_modules/@fortawesome/fontawesome-free/js/solid.min.js',
 			'node_modules/uikit/dist/js/uikit.min.js',
 			'node_modules/uikit/dist/js/uikit-icons.min.js'
 		])
 		.pipe(gulp.dest('public/js'));
 });
 
-gulp.task('copy-fontawesome', () => {
-	return gulp.src([
-			'node_modules/@fortawesome/fontawesome-free/js/fontawesome.min.js',
-			'node_modules/@fortawesome/fontawesome-free/js/solid.min.js'
-		])
-		.pipe(gulp.dest('public/js'));
+// Copy UIKit SVG icons to public/img
+gulp.task('copy-uikit-icons', () => {
+	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
+		.pipe(gulp.dest('public/img'));
 });
 
-gulp.task('copy-js', gulp.series('copy-uikit-js', 'copy-fontawesome'));
+// Compile less
+gulp.task('less', () => {
+	return gulp.src('public/css/*.less')
+		.pipe(less())
+		.pipe(gulp.dest('public/css'));
+});
 
-gulp.task('minify-js', () => {
-	return gulp.src('public/js/*.js')
+// Transpile and minify JS files and output to dist
+gulp.task('babel', () => {
+	return gulp.src(['public/js/*.js', '!public/js/*.min.js'])
+		.pipe(babel({
+			presets: [
+				['@babel/preset-env', {
+					targets: '>0.25%, not dead, ios>=9'
+				}]
+			],
+		}))
 		.pipe(minify({
 			removeConsole: true,
 			builtIns: false
@@ -30,40 +45,26 @@ gulp.task('minify-js', () => {
 		.pipe(gulp.dest('dist/js'));
 });
 
-gulp.task('less', () => {
-	return gulp.src('public/css/*.less')
-		.pipe(less())
-		.pipe(gulp.dest('public/css'));
-});
-
+// Minify CSS and output to dist
 gulp.task('minify-css', () => {
 	return gulp.src('public/css/*.css')
 		.pipe(minifyCss())
 		.pipe(gulp.dest('dist/css'));
 });
 
-gulp.task('copy-uikit-icons', () => {
-	return gulp.src('node_modules/uikit/src/images/backgrounds/*.svg')
-		.pipe(gulp.dest('public/img'));
-});
-
-gulp.task('img', () => {
-	return gulp.src('public/img/*')
-		.pipe(gulp.dest('dist/img'));
-});
-
+// Copy static files (includeing images) to dist
 gulp.task('copy-files', () => {
-	return gulp.src('public/*.*')
+	return gulp.src(['public/img/*', 'public/*.*', 'public/js/*.min.js'], {
+			base: 'public'
+		})
 		.pipe(gulp.dest('dist'));
 });
 
-gulp.task('default', gulp.parallel(
-	gulp.series('copy-js', 'minify-js'),
-	gulp.series('less', 'minify-css'),
-	gulp.series('copy-uikit-icons', 'img'),
-	'copy-files'
-));
+// Set up the public folder for development
+gulp.task('dev', gulp.parallel('copy-js', 'copy-uikit-icons', 'less'));
 
-gulp.task('dev', gulp.parallel(
-	'copy-js', 'less', 'copy-uikit-icons'
-));
+// Set up the dist folder for deployment
+gulp.task('deploy', gulp.parallel('babel', 'minify-css', 'copy-files'));
+
+// Default task
+gulp.task('default', gulp.series('dev', 'deploy'));

package.json

@@ -1,22 +1,24 @@
 {
-  "name": "mango",
-  "version": "1.0.0",
-  "main": "index.js",
-  "repository": "https://github.com/hkalexling/Mango.git",
-  "author": "Alex Ling <hkalexling@gmail.com>",
-  "license": "MIT",
-  "devDependencies": {
-    "gulp": "^4.0.2",
-    "gulp-babel-minify": "^0.5.1",
-    "gulp-less": "^4.0.1",
-    "gulp-minify-css": "^1.2.4",
-    "less": "^3.11.3"
-  },
-  "scripts": {
-    "uglify": "gulp"
-  },
-  "dependencies": {
-    "@fortawesome/fontawesome-free": "^5.14.0",
-    "uikit": "^3.5.4"
-  }
+	"name": "mango",
+	"version": "1.0.0",
+	"main": "index.js",
+	"repository": "https://github.com/hkalexling/Mango.git",
+	"author": "Alex Ling <hkalexling@gmail.com>",
+	"license": "MIT",
+	"devDependencies": {
+		"@babel/preset-env": "^7.11.5",
+		"gulp": "^4.0.2",
+		"gulp-babel": "^8.0.0",
+		"gulp-babel-minify": "^0.5.1",
+		"gulp-less": "^4.0.1",
+		"gulp-minify-css": "^1.2.4",
+		"less": "^3.11.3"
+	},
+	"scripts": {
+		"uglify": "gulp"
+	},
+	"dependencies": {
+		"@fortawesome/fontawesome-free": "^5.14.0",
+		"uikit": "^3.5.4"
+	}
 }

public/js/reader.js

@@ -1,3 +1,7 @@
+let lastSavedPage = page;
+let items = [];
+let longPages = false;
+
 $(() => {
 	getPages();
 
@@ -28,7 +32,7 @@ const getPages = () => {
 				throw new Error(resp.error);
 			const dimensions = data.dimensions;
 
-			const items = dimensions.map((d, i) => {
+			items = dimensions.map((d, i) => {
 				return {
 					id: i + 1,
 					url: `${base_url}api/page/${tid}/${eid}/${i+1}`,
@@ -37,6 +41,13 @@ const getPages = () => {
 				};
 			});
 
+			const avgRatio = items.reduce((acc, cur) => {
+				return acc + cur.height / cur.width
+			}, 0) / items.length;
+
+			console.log(avgRatio);
+			longPages = avgRatio > 2;
+
 			setProp('items', items);
 			setProp('loading', false);
 
@@ -136,26 +147,49 @@ const setupScroller = () => {
 	});
 };
 
-let lastSavedPage = page;
-
 /**
- * Update the backend reading progress if the current page is more than
- * 		five pages away from the last saved page
+ * Update the backend reading progress if:
+ * 		1) the current page is more than five pages away from the last 
+ * 			saved page, or
+ * 		2) the average height/width ratio of the pages is over 2, or
+ * 		3) the current page is the first page, or
+ * 		4) the current page is the last page
  *
  * @function saveProgress
  * @param {number} idx - One-based index of the page
+ * @param {function} cb - Callback
  */
-const saveProgress = (idx) => {
-	if (Math.abs(idx - lastSavedPage) < 5) return;
-	lastSavedPage = idx;
+const saveProgress = (idx, cb) => {
+	idx = parseInt(idx);
+	if (Math.abs(idx - lastSavedPage) >= 5 ||
+		longPages ||
+		idx === 1 || idx === items.length
+	) {
+		lastSavedPage = idx;
+		console.log('saving progress', idx);
 
-	const url = `${base_url}api/progress/${tid}/${idx}?${$.param({entry: eid})}`;
-	$.post(url)
-		.then(data => {
-			if (data.error) throw new Error(data.error);
-		})
-		.catch(e => {
-			console.error(e);
-			alert('danger', e);
-		});
+		const url = `${base_url}api/progress/${tid}/${idx}?${$.param({entry: eid})}`;
+		$.post(url)
+			.then(data => {
+				if (data.error) throw new Error(data.error);
+				if (cb) cb();
+			})
+			.catch(e => {
+				console.error(e);
+				alert('danger', e);
+			});
+	}
+};
+
+/**
+ * Mark progress to 100% and redirect to the next entry
+ * 	Used as the onclick handler for the "Next Entry" button
+ *
+ * @function nextEntry
+ * @param {string} nextUrl - URL of the next entry
+ */
+const nextEntry = (nextUrl) => {
+	saveProgress(items.length, () => {
+		redirect(nextUrl);
+	});
 };

shard.yml

@@ -1,5 +1,5 @@
 name: mango
-version: 0.12.2
+version: 0.12.3
 
 authors:
   - Alex Ling <hkalexling@gmail.com>

src/mango.cr

@@ -7,7 +7,7 @@ require "option_parser"
 require "clim"
 require "./plugin/*"
 
-MANGO_VERSION = "0.12.2"
+MANGO_VERSION = "0.12.3"
 
 # From http://www.network-science.de/ascii/
 BANNER = %{

src/views/components/head.html.ecr

@@ -7,9 +7,12 @@
   <link rel="stylesheet" href="<%= base_url %>css/uikit.css" />
   <link rel="stylesheet" href="<%= base_url %>css/mango.css" />
   <link rel="icon" href="<%= base_url %>favicon.ico">
+
+  <script src="https://polyfill.io/v3/polyfill.min.js?features=matchMedia%2Cdefault&flags=gated"></script>
   <script defer src="<%= base_url %>js/fontawesome.min.js"></script>
   <script defer src="<%= base_url %>js/solid.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js" defer></script>
+  <script type="module" src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine.min.js"></script>
+  <script nomodule src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.5.0/dist/alpine-ie11.min.js" defer></script>
   <script src="<%= base_url %>js/theme.js"></script>
 </head>

src/views/reader.html.ecr

@@ -31,7 +31,7 @@
                       />
             </template>
             <%- if next_entry_url -%>
-              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= next_entry_url %>')">Next Entry</button>
+              <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="nextEntry('<%= next_entry_url %>')">Next Entry</button>
             <%- else -%>
               <button id="next-btn" class="uk-align-center uk-button uk-button-primary" @click="redirect('<%= exit_url %>')">Exit Reader</button>
             <%- end -%>