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

Author: andi34

.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>