oke

Project-fahrul · Jun 25, 2022 · 8a47784 · 8a47784
commit 8a47784
Show file tree

Hide file tree

Showing 7 changed files with 141 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,2 @@
+/node_modules/
+package-lock.json
diff --git a/dist/main.js b/dist/main.js
diff --git a/package.json b/package.json
@@ -0,0 +1,27 @@
+{
+  "name": "social-media",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "npx webpack --config webpack.config.js --watch",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Project-fahrul/Social-Media-Generator.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Project-fahrul/Social-Media-Generator/issues"
+  },
+  "homepage": "https://github.com/Project-fahrul/Social-Media-Generator#readme",
+  "devDependencies": {
+    "@babel/core": "^7.18.5",
+    "@babel/preset-env": "^7.18.2",
+    "babel-loader": "^8.2.5",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0"
+  }
+}
diff --git a/readme.md b/readme.md
@@ -0,0 +1,3 @@
+# Social Media Generator
+
+Social Media Generator is a javascript library for sharing links of web page to social media
diff --git a/social-media.js b/social-media.js
@@ -0,0 +1,55 @@
+class SocialMedia {
+    link = null
+    socialLink = {
+        wa: {
+            selector: "a[wa-social]",
+            link: "https://api.whatsapp.com/send?text=1%",
+            attribute: {
+                "data-action": "share/whatsapp/share",
+            }
+        },
+        fb: {
+            selector: "a[fb-social]",
+            link: "https://www.facebook.com/sharer.php?u=1%",
+        },
+        twitter:{
+            selector: 'a[twitter-social]',
+            link: "https://twitter.com/intent/tweet?url=1%&text=2%",
+            args: [document.title]
+        },
+        linkin: {
+            selector: 'a[linkin-social]',
+            link: "https://www.linkedin.com/shareArticle?mini=true&url=1%",
+        }
+    }
+
+    constructor() {
+        this.link = window.location.href
+        Object.keys(this.socialLink).forEach(e => {
+            this.constructLink(this.socialLink[e])
+        })
+    }
+
+    constructLink = (arg) => {
+        let el = document.querySelectorAll(arg.selector)
+        let link = arg.link.replace("1%", this.link);
+        if(arg.args){
+            arg.args.forEach((e,i)=>{
+                link = link.replace((i+2)+"%", e)
+            })
+        }
+        //set link
+        Array.prototype.forEach.call(el, (e) => {
+            e.setAttribute("href", link)
+            //set attribute
+            if (arg.attribute)
+                Object.keys(arg.attribute).forEach(att => {
+                    e.setAttribute(att, arg.attribute[att])
+                })
+
+        })
+    }
+}
+
+
+new SocialMedia()
diff --git a/test/index.html b/test/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+    </style>
+</head>
+
+<body>
+    <ul>
+        <li><a href="/" wa-social>Whattapp</a></li>
+        <li><a href="/" fb-social>Facebook</a></li>
+        <li><a href="/" twitter-social>Twitter</a></li>
+        <li><a href="/" linkin-social>Linkin</a></li>
+    </ul>
+
+    <script src="../dist/main.js"></script>
+</body>
+
+</html>
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,24 @@
+const path = require('path');
+
+module.exports = {
+    mode: "production",
+  entry: './social-media.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env']
+          }
+        }
+      }
+    ]
+  }
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Social Media Generator

		Social Media Generator is a javascript library for sharing links of web page to social media