Merge pull request #90 from andi34/add-build-pipeline

Add build pipeline, improve JavaScript

This PR contains the following changes:

* Installed `gulp-babel` and `@babel/env`. These are used for JavaScript transpilation, meaning that you can use ES6 (like `const`, `let`, etc.) while having support for older browsers, such as Safari 9.
* Changed the Gulp pipeline to also transpile the JavaScript. 
* Moved the raw, unprocessed Sass and JavaScript files into a new folder `src`. When Gulp has ran, it will put the processed (and ready-to-use) files into `resources/(js|css)`, like they where before. Meaning that from now on, you should edit the Sass in and JavaScript in the `src` directory and let Gulp put them into `resources`. 
* Updated `simple-translator` to version 2.0.2. It now supports more browsers, is already transpiled and could also be loaded from a CDN. The API has also slightly changed.
* In `package.json`, there were 3 dependencies that had version numbers referenced to some GitHub repos, which prevented a successful installation on my machine. I added the latest version numbers, if you don't want this let me know.
* I installed and used the `whatwg-fetch` polyfill which should enable Safari to use the simple translator. 
* added Prettier to have consistent formatting for both JavaScript & SCSS

.editorconfig

@@ -3,9 +3,9 @@
 # top-most EditorConfig file
 root = true
 
-[resources/js/**.js]
+[src/js/**.js]
 charset = utf-8
 indent_style = space
 indent_size = 4
 insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true

.eslintrc.json

@@ -20,7 +20,7 @@
         "array-bracket-newline": "error",
         "array-bracket-spacing": "error",
         "array-callback-return": "error",
-        "array-element-newline": "error",
+        "array-element-newline": "off",
         "arrow-body-style": "error",
         "arrow-parens": "error",
         "arrow-spacing": [
@@ -88,7 +88,7 @@
             "error",
             "consistent"
         ],
-        "function-paren-newline": "error",
+        "function-paren-newline": "off",
         "generator-star-spacing": "error",
         "global-require": "error",
         "guard-for-in": "error",
@@ -289,19 +289,11 @@
         ],
         "valid-jsdoc": "error",
         "vars-on-top": "off",
-        "wrap-regex": "error",
+        "wrap-regex": "off",
         "yield-star-spacing": "error",
         "yoda": [
             "error",
             "never"
         ]
-    },
-    "overrides": [
-        {
-            "files": ["i18n.js", "i18n-sub.js"],
-            "parserOptions": {
-                "sourceType": "module"
-            }
-        }
-    ]
+    }
 }

.github/workflows/gulp_sass.yml

@@ -23,4 +23,4 @@ jobs:
     - name: Install modules
       run: yarn install
     - name: Running gulp-sass
-      run: yarn build
+      run: yarn build:sass

.gitignore

@@ -7,8 +7,10 @@ digicamcontrol/
 node_modules/
 package-lock.json
 resources/css/
+resources/js/
 stats
 trash
+vendor/simple-translator/
 .sass-cache
 /.htaccess
 .htpasswd

.gitmodules

@@ -8,3 +8,6 @@
 [submodule "vendor/rpihotspot"]
 	path = vendor/rpihotspot
 	url = https://github.com/andi34/rpihotspot
+[submodule "vendor/PhotoSwipe"]
+	path = vendor/PhotoSwipe
+	url = https://github.com/andi34/PhotoSwipe

.npmrc

@@ -0,0 +1 @@
+scripts-prepend-node-path=true

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "none",
+  "singleQuote": true,
+  "bracketSpacing": false,
+  "printWidth": 120
+}

README.md

@@ -10,12 +10,6 @@ This is my personal Photobooth fork with some extras on top (more information ca
 ![Lint](https://github.com/andi34/photobooth/workflows/Lint/badge.svg?branch=stable2)
 ![gulp-sass](https://github.com/andi34/photobooth/workflows/gulp-sass/badge.svg?branch=stable2)
 
-**Please note:**
-
-Safari Browser on iOS 9 in not compatible with es6, which means Photobooth won't work. Supported browser can be found inside the [Wiki](https://github.com/andi34/photobooth/wiki#browser-support).
-If you like to use an old iPad anyway, please take a look [here (andi34/photobooth#47)](https://github.com/andi34/photobooth/issues/47).
-If I find enough time I'll post some updates from time to time
-
 ## :heart_eyes: Features
 
 - Works on Windows and Linux.
@@ -61,6 +55,7 @@ If I find enough time I'll post some updates from time to time
 ## Extras on my personal fork
 ### General changes:
 
+  - javascript transpiled to es5 to support older browsers (e.g. Safari 9)
   - install-raspbian: use Apache2 webserver by default again
   - added Slideshow option to Gallery
   - standalone slideshow via [localhost/slideshow](http://localhost/slideshow)

admin/index.php

@@ -148,11 +148,13 @@
 		</div>
 	</div>
 
+	<script src="../node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="../api/config.php"></script>
 	<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="../resources/js/theme.js"></script>
 	<script type="text/javascript" src="../resources/js/admin.js"></script>
-	<script type="module" src="../resources/js/i18n-sub.js"></script>
+	<script src="../node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="../resources/js/i18n-sub.js"></script>
 
 </body>
 </html>

chromakeying.php

@@ -84,11 +84,13 @@
 			<div class="modal__body" id="save_mesg_text"><span data-i18n="saving"></span></div>
 		</div>
 	</div>
+	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="api/config.php"></script>
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="node_modules/marvinj/marvinj/release/marvinj-0.8.js"></script>
 	<script type="text/javascript" src="resources/js/chromakeying.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
-	<script type="module" src="resources/js/i18n.js"></script>
+	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="resources/js/i18n.js"></script>
 </body>
 </html>

gallery.php

@@ -30,8 +30,8 @@
 
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
-	<link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css" />
-	<link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css" />
+	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css" />
+	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="resources/css/style.css" />
 	<?php if ($config['gallery_bottom_bar']): ?>
 	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
@@ -76,6 +76,7 @@
 		</div>
 	</div>
 
+	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="api/config.php"></script>
 	<script type="text/javascript" src="resources/js/adminshortcut.js"></script>
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
@@ -84,24 +85,13 @@
 	<script type="text/javascript" src="resources/js/vendor/EasePack.min.js"></script>
 	<script type="text/javascript" src="resources/js/vendor/jquery.gsap.min.js"></script>
 	<script type="text/javascript" src="resources/js/vendor/CSSPlugin.min.js"></script>
-	<script type="text/javascript" src="node_modules/photoswipe/dist/photoswipe.min.js"></script>
-	<script type="text/javascript" src="node_modules/photoswipe/dist/photoswipe-ui-default.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
 	<script type="text/javascript" src="resources/js/photoinit.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script type="text/javascript" src="resources/js/core.js"></script>
-	<script type="module" src="resources/js/i18n.js"></script>
-	<script>
-		$(function() {
-			let reloadElement = $('<a class="gallery__reload">');
-			reloadElement.append('<i class="fa fa-refresh"></i>');
-			reloadElement.attr('href', '#');
-			reloadElement.on('click', () => photoBooth.reloadPage());
-			reloadElement.appendTo('.gallery__header');
-
-			$('.gallery__close').hide();
-
-			photoBooth.openGallery();
-		});
-	</script>
+	<script type="text/javascript" src="resources/js/gallery.js"></script>
+	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="resources/js/i18n.js"></script>
 </body>
 </html>

gulpfile.js

@@ -2,13 +2,25 @@
 
 var gulp = require('gulp');
 var sass = require('gulp-sass');
+var babel = require('gulp-babel');
 
 gulp.task('sass', function () {
-  return gulp.src('./resources/sass/**/*.scss')
+  return gulp
+    .src('./src/sass/**/*.scss')
     .pipe(sass.sync().on('error', sass.logError))
     .pipe(gulp.dest('./resources/css'));
 });
 
-gulp.task('sass:watch', function () {
-  gulp.watch('./resources/sass/**/*.scss', gulp.series('sass'));
+gulp.task('js', function () {
+  return gulp
+    .src('./src/js/**/*.js')
+    .pipe(babel({ presets: ['@babel/env'] }))
+    .pipe(gulp.dest('./resources/js'));
 });
+
+gulp.task('watch', function () {
+  gulp.watch('./src/sass/**/*.scss', gulp.series('sass'));
+  gulp.watch('./src/js/*.js', gulp.series('js'));
+});
+
+gulp.task('default', gulp.parallel('sass', 'js'));

index.php

@@ -32,8 +32,8 @@
 
 	<link rel="stylesheet" href="node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css" />
-	<link rel="stylesheet" href="node_modules/photoswipe/dist/photoswipe.css" />
-	<link rel="stylesheet" href="node_modules/photoswipe/dist/default-skin/default-skin.css" />
+	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/photoswipe.css" />
+	<link rel="stylesheet" href="vendor/PhotoSwipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="resources/css/style.css" />
 	<?php if ($config['gallery_bottom_bar']): ?>
 	<link rel="stylesheet" href="resources/css/photoswipe-bottom.css" />
@@ -230,6 +230,7 @@
 	endif; ?>
 	</div>
 
+	<script src="node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="api/config.php"></script>
 	<script type="text/javascript" src="resources/js/adminshortcut.js"></script>
 	<script type="text/javascript" src="node_modules/jquery/dist/jquery.min.js"></script>
@@ -238,12 +239,13 @@
 	<script type="text/javascript" src="resources/js/vendor/EasePack.min.js"></script>
 	<script type="text/javascript" src="resources/js/vendor/jquery.gsap.min.js"></script>
 	<script type="text/javascript" src="resources/js/vendor/CSSPlugin.min.js"></script>
-	<script type="text/javascript" src="node_modules/photoswipe/dist/photoswipe.min.js"></script>
-	<script type="text/javascript" src="node_modules/photoswipe/dist/photoswipe-ui-default.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe.min.js"></script>
+	<script type="text/javascript" src="vendor/PhotoSwipe/dist/photoswipe-ui-default.min.js"></script>
 	<script type="text/javascript" src="resources/js/photoinit.js"></script>
 	<script type="text/javascript" src="resources/js/theme.js"></script>
 	<script type="text/javascript" src="resources/js/core.js"></script>
-	<script type="module" src="resources/js/i18n.js"></script>
+	<script src="node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="resources/js/i18n.js"></script>
 
 </body>
 </html>

login/index.php

@@ -45,8 +45,6 @@
 
 	<link rel="stylesheet" href="../node_modules/normalize.css/normalize.css" />
 	<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.css" />
-	<link rel="stylesheet" href="../node_modules/photoswipe/dist/photoswipe.css" />
-	<link rel="stylesheet" href="../node_modules/photoswipe/dist/default-skin/default-skin.css" />
 	<link rel="stylesheet" href="../resources/css/login.css" />
 	<?php if ($config['rounded_corners']): ?>
 	<link rel="stylesheet" href="../resources/css/rounded.css" />
@@ -94,11 +92,13 @@
 		</div>
 	</div>
 
+	<script src="../node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="../api/config.php"></script>
 	<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
 	<script type="text/javascript" src="../resources/js/adminshortcut.js"></script>
 	<script type="text/javascript" src="../resources/js/login.js"></script>
 	<script type="text/javascript" src="../resources/js/theme.js"></script>
-	<script type="module" src="../resources/js/i18n-sub.js"></script>
+	<script src="../node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="../resources/js/i18n-sub.js"></script>
 </body>
 </html>

manual/index.php

@@ -83,26 +83,13 @@
 		</div>
 	</div>
 
+	<script src="../node_modules/whatwg-fetch/dist/fetch.umd.js"></script>
 	<script type="text/javascript" src="../api/config.php"></script>
 	<script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
+	<script type="text/javascript" src="../resources/js/manual.js"></script>
 	<script type="text/javascript" src="../resources/js/theme.js"></script>
-	<script type="module" src="../resources/js/i18n-sub.js"></script>
-
-	<script>
-		$(function() {
-			$('.panel-heading').on('click', function() {
-				const panel = $(this).parents('.panel');
-				const others = $(this).parents('.accordion').find('.open').not(panel);
-
-				others.removeClass('open init');
-
-				panel.toggleClass('open');
-				panel.find('.panel-body').slideToggle();
-
-				others.find('.panel-body').slideUp('fast');
-			});
-		});
-	</script>
+	<script src="../node_modules/@andreasremdt/simple-translator/dist/umd/translator.min.js"></script>
+	<script type="text/javascript" src="../resources/js/i18n-sub.js"></script>
 
 </body>
 </html>

package.json

@@ -3,13 +3,19 @@
   "version": "2.4.0-alpha",
   "description": "A Photobooth webinterface for Raspberry Pi and Windows",
   "scripts": {
-    "build": "gulp sass",
-    "watch": "gulp sass:watch",
+    "build": "npm run format && npm run build:faq && npm run build:gulp",
+    "build:faq": "mdown --input 'faq/*.md' --output manual --header faq/header.html --footer faq/footer.html",
+    "build:gulp": "gulp",
+    "build:sass": "gulp sass",
+    "eslint": "eslint src/js/*.js",
+    "eslint:fix": "eslint src/js/*.js --fix",
+    "format": "npm-run-all --parallel format:*",
+    "format:js": "prettier src/js/*.js --write",
+    "format:scss": "prettier src/sass/* --write",
+    "pack:build": "npm run eslint && npm run build && npm run pack:zip",
+    "pack:zip": "node scripts/pack-build.js",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "eslint": "eslint resources/js/*.js",
-    "eslint:fix": "eslint resources/js/*.js --fix",
-    "pack:build": "node scripts/pack-build.js",
-    "build:faq": "node_modules/gh-markdown-cli/bin/mdown --input 'faq/*.md' --output manual --header faq/header.html --footer faq/footer.html"
+    "watch": "gulp watch"
   },
   "author": "",
   "license": "MIT",
@@ -32,20 +38,26 @@
     "events"
   ],
   "dependencies": {
+    "@andreasremdt/simple-translator": "^2.0.2",
     "font-awesome": "^4.7.0",
     "gh-markdown-cli": "^0.2.0",
-    "github-markdown-css": "https://github.com/andi34/github-markdown-css",
+    "github-markdown-css": "^4.0.0",
     "gulp": "4.0.2",
     "gulp-sass": "4.0.2",
     "jquery": "^3.5.1",
-    "marvinj": "https://github.com/gabrielarchanjo/marvinj",
+    "marvinj": "^1.0.0",
     "normalize.css": "^8.0.1",
-    "photoswipe": "https://github.com/andi34/PhotoSwipe"
+    "npm-run-all": "^4.1.5",
+    "whatwg-fetch": "^3.2.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.11.0",
+    "@babel/preset-env": "^7.11.0",
     "archiver": "^3.1.1",
     "colors": "^1.4.0",
     "eslint": "^6.8.0",
-    "git-tag-version": "^1.3.1"
+    "git-tag-version": "^1.3.1",
+    "gulp-babel": "^8.0.0",
+    "prettier": "^2.0.5"
   }
 }