Add support for Facebook

index.js

@@ -65,7 +65,7 @@ class Uppload {
 		this.currentPage = this.settings.defaultService || "upload";
 
 		// Array of services plugin should have, fallback default
-		this.settings.services = this.settings.services || ["upload", "camera", "link", "instagram"];
+		this.settings.services = this.settings.services || ["upload", "camera", "link", "instagram", "facebook"];
 		// Remove `camera` from the array if browser doesn't support it
 		if (!webcamAvailable) {
 			const index = this.settings.services.indexOf("camera");

modules/i18n/en.js

@@ -11,6 +11,10 @@ export default {
 		post_url: "Instagram post URL",
 		import: "Import from Instagram"
 	},
+	facebook: {
+		post_url: "Facebook public post URL",
+		import: "Import from Facebook"
+	},
 	link: {
 		post_url: "Link to file",
 		import: "Import from URL"

modules/icons.js

@@ -3,6 +3,7 @@ export default {
 	upload: `<i class="fas fa-upload fa-fw"></i>`,
 	import: `<i class="fas fa-link fa-fw"></i>`,
 	instagram: `<i class="fab fa-instagram fa-fw"></i>`,
+	facebook: `<i class="fab fa-facebook fa-fw"></i>`,
 	back: `<i class="fas fa-arrow-left fa-fw"></i>`,
 	forward: `<i class="fas fa-arrow-right fa-fw"></i>`,
 	uploading: `<i class="fas fa-spinner fa-4x fa-spin fa-fw"></i><br><br>`,

modules/services.js

@@ -132,6 +132,22 @@ export default scope => {
 			init() {
 				microLinkFetch(scope, "instagram", true);
 			}
+		},
+		facebook: {
+			icon: icons.facebook,
+			title: "Facebook",
+			html: `
+                <div class="center-middle">
+                    <label>
+                        <div>${i18n.instagram.post_url}</div>
+                        <input id="microLinkInput" type="text" value="https://www.facebook.com/utwente/photos/a.2213200618711319/2213200642044650/" placeholder="https://www.facebook.com/example">
+                    </label>
+                    <button id="microLinkButton" class="primary-button facebook">${i18n.instagram.import + rightArrow}</button>
+                </div>
+            `,
+			init() {
+				microLinkFetch(scope, "facebook", true);
+			}
 		}
 	};
 	let navItems = ``;

modules/services/microLinkFetch.js

@@ -3,7 +3,7 @@ import uploadFile from "../upload";
 
 /**
  * Initialization function for Microlink fetch service
- * Used for Instagram and others
+ * Used for Instagram, Facebook and others
  * @param {Object} scope - Parent Uppload object
  */
 export default (scope, serviceName, isMicroLink = false) => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "uppload",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "main": "index.js",
   "repository": "https://github.com/elninotech/uppload.git",
   "author": "Anand Chowdhary (mail@anandchowdhary) with El Niño (https://elnino.tech)",

styles/services.scss

@@ -1,4 +1,5 @@
 @import "./services/instagram";
+@import "./services/facebook";
 @import "./services/crop";
 @import "./services/preview";
 @import "./services/camera";

styles/services/facebook.scss

@@ -0,0 +1,8 @@
+.uppload-modal {
+	.primary-button.facebook {
+		background-color: #3b5998;
+		&:hover {
+			background-color: #2f4779;
+		}
+	}
+}