Init

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

README.md

@@ -0,0 +1,61 @@
+![](https://announcekit.app/images/[email protected])
+
+The easiest way to use AnnounceKit widgets in your VueJS App.
+
+**Visit [https://announcekit.app](https://announcekit.app) to get started with AnnounceKit.**
+
+[Live demo](https://codesandbox.io/s/vue-template-b8nc7)
+
+[Documentation](https://announcekit.app/docs/vuejs)
+
+## Installation
+
+```sh
+yarn add announcekit-vue
+```
+
+## Usage
+
+```js
+<template>
+    <nav>
+      <ul>
+        <li>
+          <a href="/home">Home</a>
+        </li>
+        <li>
+          <a href="/product">Product</a>
+        </li>
+        <li>
+          <a href="#" class="ak-trigger">News
+            <AnnounceKit catchClick=".ak-trigger" widget="https://announcekit.app/widget/adyGk"/>
+          </a>
+        </li>
+      </ul>
+    </nav>
+</template>
+
+<script>
+import AnnounceKit from "announcekit-vue";
+export default {
+  name: "App",
+  components: {
+    AnnounceKit
+  }
+};
+</script>
+```
+
+## Props
+
+Common props you may want to specify include:
+
+- **`widget`** - The url of the widget. You can obtain it while creating or editing widget in AnnounceKit Dashboard.
+- `style` - You can apply CSS rules to modify / tune the position of the widget.
+- `catchClick` - Element selector to catch clicks and open the widget.
+- `floatWidget` - Set true if the widget is a Float widget.
+- `userData` - User properties (for user tracking)
+- `onWidgetOpen` - Called when the widget is opened.
+- `onWidgetClose` - Called when the widget is closed.
+- `onWidgetResize` - Called when the widget is resized.
+- `onWidgetUnread` - Called when unread post count of widget has been updated.

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "announcekit-vue",
+  "version": "1.0.6",
+  "description": "Use AnnounceKit widgets in your VueJS App",
+  "repository": "https://github.com/announcekitapp/announcekit-vue",
+  "homepage": "https://announcekit.app",
+  "keywords": [
+    "announcekit",
+    "newsfeed",
+    "changelog",
+    "vue"
+  ],
+  "author": "announcekit",
+  "license": "MIT",
+  "main": "dist/announcekit.umd.js",
+  "module": "dist/announcekit.esm.js",
+  "unpkg": "dist/announcekit.min.js",
+  "browser": {
+    "./sfc": "src/announcekit.vue"
+  },
+  "scripts": {
+    "build": "npm run build:umd & npm run build:es & npm run build:unpkg",
+    "build:umd": "rollup --config ./rollup.config.js --format umd --file dist/announcekit.umd.js",
+    "build:es": "rollup --config ./rollup.config.js --format es --file dist/announcekit.esm.js",
+    "build:unpkg": "rollup --config ./rollup.config.js --format iife --file dist/announcekit.min.js"
+  },
+  "devDependencies": {
+    "rollup": "^1.17.0",
+    "rollup-plugin-buble": "^0.19.8",
+    "rollup-plugin-commonjs": "^10.0.1",
+    "rollup-plugin-vue": "^5.0.1",
+    "vue": "^2.6.10",
+    "vue-template-compiler": "^2.6.10"
+  }
+}

rollup.config.js

@@ -0,0 +1,18 @@
+import commonjs from "rollup-plugin-commonjs"; // Convert CommonJS modules to ES6
+import vue from "rollup-plugin-vue"; // Handle .vue SFC files
+import buble from "rollup-plugin-buble"; // Transpile/polyfill with reasonable browser support
+export default {
+  input: "src/wrapper.js", // Path relative to package.json
+  output: {
+    name: "AnnounceKit",
+    exports: "named"
+  },
+  plugins: [
+    commonjs(),
+    vue({
+      css: true, // Dynamically inject css as a <style> tag
+      compileTemplate: true // Explicitly convert template to render function
+    }),
+    buble() // Transpile to ES5
+  ]
+};

src/AnnounceKit.vue

@@ -0,0 +1,146 @@
+<template>
+  <a
+    v-bind="[userData ? userData : null]"
+    v-bind:class="[selector ? selector.slice(1) : '']"
+    href="#"
+  ></a>
+</template>
+
+<script>
+export default {
+  name: "AnnounceKit",
+  props: {
+    name: String,
+    widget: {
+      type: String,
+      required: true
+    },
+    catchClick: String,
+    widgetStyle: Object,
+    floatWidget: Boolean,
+    onWidgetOpen: Function,
+    onWidgetClose: Function,
+    onWidgetResize: Function,
+    onWidgetUnread: Function,
+    userData: Object
+  },
+  methods: {
+    loaded: function() {
+      let style = this.$props.widgetStyle;
+
+      let styleParams = {
+        badge: {
+          style: style
+        },
+        line: {
+          style: style
+        },
+        float: {
+          style: style
+        }
+      };
+
+      if (this.$props.floatWidget) this.selector = null;
+
+      const _this = this;
+
+      var options = Object.assign({}, styleParams, {
+        widget: this.$props.widget,
+        name: this.widgetName,
+        version: 2,
+        selector: this.selector,
+        onInit: function(_widget) {
+          const ann = window["announcekit"];
+
+          _this.widgetInstance = _widget;
+
+          if (_this.$props.catchClick) {
+            const elem = document.querySelector(_this.$props.catchClick);
+            if (elem)
+              elem.addEventListener("click", function() {
+                _widget.open();
+              });
+          }
+
+          ann.on("widget-open", function(ref) {
+            if (ref.widget === _widget && _this.$props.onWidgetOpen) {
+              _this.$props.onWidgetOpen({ widget: ref.widget });
+            }
+          });
+
+          ann.on("widget-close", function(ref) {
+            if (ref.widget === _widget && _this.$props.onWidgetClose) {
+              _this.$props.onWidgetClose({ widget: ref.widget });
+            }
+          });
+
+          ann.on("widget-resize", function(ref) {
+            if (ref.widget === _widget && _this.$props.onWidgetResize) {
+              _this.$props.onWidgetResize({
+                widget: ref.widget,
+                size: ref.size
+              });
+            }
+          });
+
+          ann.on("widget-unread", function(ref) {
+            if (ref.widget === _widget && _this.$props.onWidgetUnread) {
+              _this.$props.onWidgetUnread({
+                widget: ref.widget,
+                unread: ref.unread
+              });
+            }
+          });
+        },
+        data: this.trackUserData
+      });
+
+      window["announcekit"].push(options);
+    }
+  },
+
+  created: function() {
+    this.widgetInstance = null;
+
+    this.widgetName =
+      this.$props.name ||
+      Math.random()
+        .toString(36)
+        .substring(10);
+
+    this.selector = `.ak-${this.widgetName}`;
+  },
+  updated: function() {
+    this.$nextTick(function() {
+      if (this.widgetInstance) {
+        this.widgetInstance.destroy();
+        this.loaded();
+      }
+    });
+  },
+  mounted: function() {
+    this.$nextTick(function() {
+      if (!window["announcekit"]) {
+        window["announcekit"] = window["announcekit"] || {
+          queue: [],
+          push: function(x) {
+            window["announcekit"].queue.push(x);
+          },
+          on: function(n, x) {
+            window["announcekit"].queue.push([n, x]);
+          }
+        };
+
+        var scripttag = document.createElement("script");
+        scripttag["async"] = true;
+        scripttag["src"] = `https://cdn.announcekit.app/widget.js`;
+
+        var scr = document.getElementsByTagName("script")[0];
+        scr.parentNode.insertBefore(scripttag, scr);
+      }
+
+      this.loaded();
+    });
+  }
+};
+</script>

src/wrapper.js

@@ -0,0 +1,27 @@
+import component from "./AnnounceKit.vue";
+
+// Declare install function executed by Vue.use()
+export function install(Vue) {
+  if (install.installed) return;
+  install.installed = true;
+  Vue.component("AnnounceKit", component);
+}
+
+// Create module definition for Vue.use()
+const plugin = {
+  install
+};
+
+// Auto-install when vue is found (eg. in browser via <script> tag)
+let GlobalVue = null;
+if (typeof window !== "undefined") {
+  GlobalVue = window.Vue;
+} else if (typeof global !== "undefined") {
+  GlobalVue = global.Vue;
+}
+if (GlobalVue) {
+  GlobalVue.use(plugin);
+}
+
+// To allow use as module (npm/webpack/etc.) export component
+export default component;