@snippyly/plugin 1.0.0

package/firebase.js

@@ -0,0 +1,51 @@
+// import { initializeApp } from "firebase/app";
+import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-app.js';
+// import { getAuth, GoogleAuthProvider } from "firebase/auth";
+import { getAuth, GoogleAuthProvider, signInWithPopup, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.8.3/firebase-auth.js';
+
+// TODO: Replace the following with your app's Firebase project configuration
+// See: https://firebase.google.com/docs/web/learn-more#config-object
+const firebaseConfig = {
+    apiKey: "AIzaSyAzcW2n1JhY_zhkXmuFcwe550AkwmYeJ0w",
+    authDomain: "snipply-sdk-staging.firebaseapp.com",
+    // databaseURL: "https://snipply-sdk-staging-default-rtdb.firebaseio.com",
+    projectId: "snipply-sdk-staging",
+    storageBucket: "snipply-sdk-staging.appspot.com",
+    messagingSenderId: "877538579326",
+    appId: "1:877538579326:web:f793f73f2b7dc770c4992f"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+
+
+// Initialize Firebase Authentication and get a reference to the service
+const auth = getAuth(app);
+const provider = new GoogleAuthProvider();
+
+export const loginWithGoogle = () => {
+    return signInWithPopup(auth, provider)
+        .then((result) => {
+            // This gives you a Google Access Token. You can use it to access the Google API.
+            const credential = GoogleAuthProvider.credentialFromResult(result);
+            const token = credential.accessToken;
+            // The signed-in user info.
+            const user = result.user;
+            console.log('user', user);
+            return user;
+            // ...
+        }).catch((error) => {
+            // Handle Errors here.
+            const errorCode = error.code;
+            const errorMessage = error.message;
+            // The email of the user's account used.
+            const email = error.customData.email;
+            // The AuthCredential type that was used.
+            const credential = GoogleAuthProvider.credentialFromError(error);
+            // ...
+        });
+}
+
+export const getUser = (callback) => {
+    onAuthStateChanged(auth, callback);
+}

package/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@snippyly/plugin",
+  "version": "1.0.0",
+  "description": "",
+  "main": "snippyly.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:sdk": "npm version patch && npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC"
+}

package/plugin-ui.js

@@ -0,0 +1,332 @@
+import * as firebase from './firebase.js';
+
+let snippylyUser;
+let commentBtnTool, shareBtn, loginBtn, closeBtn, snippylyBtn;
+
+export const initializeSnippyly = async () => {
+    if (window.SNIPPYLY_API_KEY) {
+        await Snippyly.init(window.SNIPPYLY_API_KEY);
+        getUser();
+        addPluginUI();
+    } else {
+        console.warn('Snippyly api key is not added.');
+    }
+}
+
+export const addPluginUI = () => {
+    const snippylyPlugin = document.createElement('snippyly-plugin');
+    snippylyPlugin.attachShadow({ mode: 'open' })
+    const shadowRoot = snippylyPlugin.shadowRoot;
+
+    const snippylyPluginContainer = document.createElement('div');
+    snippylyPluginContainer.id = 'snippylyPlugin';
+    snippylyPluginContainer.classList.add(...['snippyly-plugin-container', 'show']);
+
+    // Add comment btn
+    commentBtnTool = document.createElement('snippyly-comment-tool');
+    commentBtnTool.innerHTML = `
+        <div class="snippyly-feature-block comment-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-geo-alt-fill" viewBox="0 0 16 16">
+                <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"></path>
+            </svg>
+        </div>
+    `;
+
+    // Add share btn
+    shareBtn = document.createElement('div');
+    shareBtn.classList.add(...['snippyly-feature-block', 'share-btn']);
+    shareBtn.addEventListener('click', () => {
+        navigator.clipboard.writeText(window.location.href);
+    });
+    shareBtn.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
+            class="bi bi-share-fill" viewBox="0 0 16 16">
+            <path
+                d="M11 2.5a2.5 2.5 0 1 1 .603 1.628l-6.718 3.12a2.499 2.499 0 0 1 0 1.504l6.718 3.12a2.5 2.5 0 1 1-.488.876l-6.718-3.12a2.5 2.5 0 1 1 0-3.256l6.718-3.12A2.5 2.5 0 0 1 11 2.5z" />
+        </svg>
+    `;
+
+    // Add login btn
+    loginBtn = document.createElement('div');
+    loginBtn.classList.add(...['snippyly-feature-block']);
+    loginBtn.addEventListener('click', () => {
+        loginWithGoogle();
+    });
+    loginBtn.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+            <g transform="matrix(1, 0, 0, 1, 27.009001, -39.238998)">
+            <path fill="#4285F4" d="M -3.264 51.509 C -3.264 50.719 -3.334 49.969 -3.454 49.239 L -14.754 49.239 L -14.754 53.749 L -8.284 53.749 C -8.574 55.229 -9.424 56.479 -10.684 57.329 L -10.684 60.329 L -6.824 60.329 C -4.564 58.239 -3.264 55.159 -3.264 51.509 Z"/>
+            <path fill="#34A853" d="M -14.754 63.239 C -11.514 63.239 -8.804 62.159 -6.824 60.329 L -10.684 57.329 C -11.764 58.049 -13.134 58.489 -14.754 58.489 C -17.884 58.489 -20.534 56.379 -21.484 53.529 L -25.464 53.529 L -25.464 56.619 C -23.494 60.539 -19.444 63.239 -14.754 63.239 Z"/>
+            <path fill="#FBBC05" d="M -21.484 53.529 C -21.734 52.809 -21.864 52.039 -21.864 51.239 C -21.864 50.439 -21.724 49.669 -21.484 48.949 L -21.484 45.859 L -25.464 45.859 C -26.284 47.479 -26.754 49.299 -26.754 51.239 C -26.754 53.179 -26.284 54.999 -25.464 56.619 L -21.484 53.529 Z"/>
+            <path fill="#EA4335" d="M -14.754 43.989 C -12.984 43.989 -11.404 44.599 -10.154 45.789 L -6.734 42.369 C -8.804 40.429 -11.514 39.239 -14.754 39.239 C -19.444 39.239 -23.494 41.939 -25.464 45.859 L -21.484 48.949 C -20.534 46.099 -17.884 43.989 -14.754 43.989 Z"/>
+            </g>
+        </svg>
+    `;
+
+    // Add close btn
+    closeBtn = document.createElement('div');
+    closeBtn.classList.add(...['snippyly-feature-block', 'close-btn']);
+    closeBtn.addEventListener('click', () => {
+        const plugin = shadowRoot.getElementById('snippylyPlugin');
+        if (plugin) {
+            if (plugin.classList.contains('show')) {
+                plugin.classList.remove('show');
+                plugin.classList.add('hide');
+            } else {
+                plugin.classList.remove('hide');
+                plugin.classList.add('show');
+            }
+        }
+    });
+    closeBtn.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+            <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+        </svg>
+    `;
+
+    // Add snippyly btn
+    snippylyBtn = document.createElement('div');
+    snippylyBtn.classList.add(...['snippyly-feature-block', 'snippyly-toggle-btn']);
+    snippylyBtn.addEventListener('click', () => {
+        const plugin = shadowRoot.getElementById('snippylyPlugin');
+        if (plugin) {
+            if (plugin.classList.contains('show')) {
+                plugin.classList.remove('show');
+                plugin.classList.add('hide');
+            } else {
+                plugin.classList.remove('hide');
+                plugin.classList.add('show');
+            }
+        }
+    });
+    snippylyBtn.innerHTML = `
+    <svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 165 150" fill="none">
+        <path d="M64.1815 1.85957C59.9002 0.028852 55.1655 -0.464714 50.5987 0.443652C46.0319 1.35202 41.8464 3.61987 38.5915 6.94957C35.2666 10.2075 33.002 14.3928 32.0939 18.9584C31.1858 23.5239 31.6764 28.2573 33.5015 32.5396C35.2405 36.8543 38.2411 40.5439 42.111 43.1256C45.9809 45.7073 50.5398 47.061 55.1915 47.0096H78.6715V23.5496C78.7227 18.8952 77.3666 14.334 74.781 10.4636C72.1954 6.59321 68.5008 3.59419 64.1815 1.85957V1.85957Z" fill="#FFCB00"/>
+        <path d="M149.732 31.0096C144.239 25.5215 137.243 21.784 129.627 20.2691C122.012 18.7541 114.118 19.5296 106.943 22.4977C99.7679 25.4657 93.6332 30.4932 89.3133 36.9453C84.9935 43.3974 82.6823 50.9849 82.6715 58.7496V98.0096H122.012C129.799 98.0918 137.43 95.8208 143.905 91.4939C150.38 87.167 155.398 80.9859 158.301 73.7596C161.337 66.5983 162.143 58.6883 160.614 51.062C159.085 43.4358 155.293 36.4476 149.732 31.0096V31.0096Z" fill="#FF7162"/>
+        <path d="M127.852 116.53C126.113 112.21 123.112 108.515 119.241 105.928C115.369 103.341 110.807 101.983 106.152 102.03H82.6715V125.51C82.6225 130.165 83.9806 134.726 86.5679 138.596C89.1552 142.467 92.8511 145.465 97.1715 147.2C100.062 148.415 103.166 149.044 106.302 149.05C110.151 149.01 113.931 148.029 117.313 146.191C120.695 144.353 123.575 141.714 125.702 138.505C127.828 135.296 129.136 131.616 129.51 127.785C129.885 123.954 129.316 120.089 127.852 116.53V116.53Z" fill="#0DCF82"/>
+        <path d="M3.10152 75.2796C0.0453598 82.4433 -0.776403 90.363 0.743827 98.0016C2.26406 105.64 6.05543 112.642 11.6215 118.09C15.2126 121.748 19.4944 124.658 24.2185 126.649C28.9425 128.64 34.0149 129.674 39.1415 129.69C44.3888 129.678 49.5819 128.628 54.4215 126.6C61.6486 123.697 67.8306 118.68 72.1576 112.204C76.4847 105.729 78.7551 98.0973 78.6715 90.3096V51.0096H39.3915C31.6018 50.9289 23.9694 53.2029 17.4939 57.5335C11.0185 61.8641 6.002 68.0496 3.10152 75.2796V75.2796Z" fill="#A259FE"/>
+    </svg>
+    `;
+
+    snippylyPluginContainer.appendChild(commentBtnTool);
+    snippylyPluginContainer.appendChild(shareBtn);
+    snippylyPluginContainer.appendChild(loginBtn);
+    snippylyPluginContainer.appendChild(closeBtn);
+    snippylyPluginContainer.appendChild(snippylyBtn);
+
+    window.document.body.appendChild(snippylyPlugin);
+
+    const styles = document.createElement('style');
+    styles.innerHTML = `
+        .snippyly-plugin-container {
+            display: flex;
+            border: 1px solid lightgrey;
+            border-radius: 8px;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            margin: 24px;
+            min-height: 48px;
+            align-items: center;
+            z-index: 999999999;
+        }
+
+        .snippyly-feature-block {
+            padding: 8px;
+            cursor: pointer;
+        }
+
+        #snippylyPlugin .snippyly-feature-block.snippyly-toggle-btn {
+            display: none;
+        }
+
+        #snippylyPlugin.show .snippyly-feature-block {
+            display: block;
+        }
+
+        #snippylyPlugin.show .snippyly-feature-block.snippyly-toggle-btn {
+            display: none;
+        }
+
+        #snippylyPlugin.hide .snippyly-feature-block {
+            display: none;
+        }
+
+        #snippylyPlugin.hide .snippyly-feature-block.snippyly-toggle-btn {
+            display: block;
+        }
+
+        .snippyly-feature-block.comment-btn:hover svg {
+            fill: #a259fe;
+        }
+        
+        .snippyly-feature-block.share-btn:hover svg {
+            fill: rgb(13, 207, 130);
+        }
+        
+        .snippyly-feature-block.close-btn:hover svg {
+            fill: rgb(255, 113, 98);
+        }
+
+        .snippyly-feature-block svg {
+            height: 24px;
+            width: 24px;
+        }
+
+        .snippyly-feature-block img {
+            height: 28px;
+            width: 28px;
+            border-radius: 100px;
+        }
+    `;
+
+    shadowRoot.appendChild(styles);
+    shadowRoot.appendChild(snippylyPluginContainer);
+
+    // add snippyly elements
+    const snippylyComments = document.createElement('snippyly-comments');
+    document.body.appendChild(snippylyComments);
+
+    const snippylyCursor = document.createElement('snippyly-cursor');
+    document.body.appendChild(snippylyCursor);
+}
+
+export const addSnippylyCdn = () => {
+    const existingScript = document.getElementById('snippylyScript');
+    if (!existingScript) {
+        const script = document.createElement('script');
+        script.src = 'https://cdn.jsdelivr.net/npm/@snippyly/sdk@1.0.39/snippyly.js';
+        script.id = 'snippylyScript';
+        script.type = 'module';
+        document.body.appendChild(script);
+        script.onload = () => {
+            if (initializeSnippyly) {
+                initializeSnippyly();
+            }
+        };
+    } else {
+        if (initializeSnippyly) {
+            initializeSnippyly();
+        }
+    }
+}
+
+const users = [
+    {
+        userId: '1',
+        name: 'James Smith',
+        photoUrl: '',
+        email: 'james.smith@gmail.com',
+        plan: 'free',
+        groupId: '',
+        contacts: [
+            {
+                userId: '2',
+                name: 'Maria Garcia',
+                email: 'maria.garcia@gmail.com',
+            },
+            {
+                userId: '3',
+                name: 'Sarah Wilson',
+                email: 'sarah.wilson@gmail.com',
+            }
+        ]
+    },
+    {
+        userId: 'maria.garcia@gmail.com',
+        name: 'Maria Garcia',
+        photoUrl: '',
+        email: 'maria.garcia@gmail.com',
+        plan: 'paid',
+        groupId: '',
+        isReadOnly: true,
+        contacts: [
+            {
+                userId: '1',
+                name: 'James Smith',
+                email: 'james.smith@gmail.com',
+            },
+            {
+                userId: '3',
+                name: 'Sarah Wilson',
+                email: 'sarah.wilson@gmail.com',
+            }
+        ]
+    },
+    {
+        userId: '3',
+        name: 'Sarah Wilson',
+        photoUrl: '',
+        email: 'sarah.wilson@gmail.com',
+        plan: 'trial',
+        groupId: '',
+        isAdmin: true,
+        contacts: [
+            {
+                userId: '1',
+                name: 'James Smith',
+                email: 'james.smith@gmail.com',
+            },
+            {
+                userId: '2',
+                name: 'Maria Garcia',
+                email: 'maria.garcia@gmail.com',
+            }
+        ]
+    }
+];
+
+const getUser = () => {
+    firebase.getUser((user) => {
+        console.log('user', user);
+        if (user) {
+            snippylyUser = {};
+            snippylyUser.userId = user.uid;
+            snippylyUser.name = user.displayName;
+            snippylyUser.email = user.email;
+            snippylyUser.photoUrl = user?.photoURL;
+            identifyUser();
+        }
+    })
+}
+
+const loginWithGoogle = () => {
+    firebase.loginWithGoogle();
+}
+
+const identifyUser = async () => {
+    // let user;
+    // if (!localStorage.getItem('user')) {
+    //     const userIndex = Math.floor(Math.random() * 3);
+    //     user = users[userIndex];
+    //     localStorage.setItem('user', JSON.stringify(user));
+    // } else {
+    //     user = JSON.parse(localStorage.getItem('user'));
+    // }
+
+    // firebase.loginWithGoogle().then(async (user) => {
+    //     if (user) {
+    //         snippylyUser = {};
+    //         snippylyUser.userId = user.uid;
+    //         snippylyUser.name = user.displayName;
+    //         snippylyUser.email = user.email;
+    //         snippylyUser.photoUrl = user?.photoURL;
+    //         await Snippyly.identify(snippylyUser);
+    //         showUser(snippylyUser);
+    //     }
+    //     console.log('snippyly user', user);
+    // })
+
+    if(snippylyUser?.userId) {
+        await Snippyly.identify(snippylyUser);
+        showUser();
+    }
+}
+
+const showUser = () => {
+    if (snippylyUser) {
+        loginBtn.innerHTML = `
+            <img src="${snippylyUser?.photoUrl}" title="${snippylyUser?.name}" class="user-profile-img" />
+        `
+    }
+}

package/snippyly.js

@@ -0,0 +1,29 @@
+import * as ui from './plugin-ui.js';
+
+const loadPluginUI = () => {
+    const pluginElement = document.querySelector('snippyly-plugin');
+    if (!pluginElement) {
+        ui.addSnippylyCdn();
+        // ui.initializeSnippyly();
+    }
+}
+
+(() => {
+    const url = window.location.href;
+    if (url.includes('#review-mode')) {
+        loadPluginUI();
+    }
+})();
+
+window.addEventListener('hashchange', () => {
+    const url = window.location.href;
+    if (url.includes('#review-mode')) {
+        loadPluginUI();
+    }
+});
+
+// setTimeout(() => {
+//     if (!window.location.href.includes('#review-mode')) {
+//         window.location.href = window.location.href + '#review-mode'
+//     }
+// }, 3000);