Initial Commit

assets/js/addons.js

@@ -0,0 +1,150 @@
+/* global Vue, wu_addons, ajaxurl, _ */
+(function($) {
+
+  const search_addon = new Vue({
+    el: '#search-addons',
+    data: {
+      search: wu_addons.search,
+    },
+  });
+
+  const wu_main_addon_app = new Vue({
+    el: '#wu-addon',
+    data() {
+
+      return {
+        loading: true,
+        category: wu_addons.category,
+        addons: [],
+      };
+
+    },
+    mounted() {
+
+      this.fetch_addons_list();
+
+    },
+    computed: {
+      search() {
+
+        return search_addon.search;
+
+      },
+      i18n() {
+
+        return window.wu_addons.i18n;
+
+      },
+      categories() {
+
+        let categories = [];
+
+        _.each(this.addons, function(addon) {
+
+          categories = categories.concat(addon.categories);
+
+        });
+
+        return _.unique(categories);
+
+      },
+      addons_list() {
+
+        const app = this;
+
+        return _.filter(app.addons, function(addon, slug) {
+
+          addon.slug = slug;
+
+          if (app.category !== 'all' && ! _.contains(addon.categories.map((item) => item.toLowerCase()), app.category.toLowerCase())) {
+
+            return false;
+
+          } // end if;
+
+          if (! app.search) {
+
+            return true;
+
+          } // end if;
+
+          const search = [
+            addon.slug,
+            addon.name,
+            addon.categories,
+            addon.description,
+          ];
+
+          return search.join('').toLowerCase().indexOf(app.search.toLowerCase()) > -1;
+
+        });
+
+      },
+    },
+    methods: {
+      fetch_addons_list() {
+
+        const app = this;
+
+        $.ajax({
+          method: 'GET',
+          url: ajaxurl,
+          data: {
+            action: 'serve_addons_list',
+          },
+          success(data) {
+
+            app.addons = data.data;
+
+            app.loading = false;
+
+          },
+        });
+
+      },
+    },
+  });
+
+  new Vue({
+    el: '.wp-heading-inline',
+    data: {},
+    computed: {
+      count() {
+
+        return wu_main_addon_app.addons_list.length;
+
+      },
+    },
+  });
+
+  new Vue({
+    el: '#addons-menu',
+    data: {},
+    methods: {
+      set_category(category) {
+
+        this.main_app.category = category;
+
+        const url = new URL(window.location.href);
+
+        url.searchParams.set('tab', category); // setting your param
+
+        history.pushState({}, null, url);
+
+      },
+    },
+    computed: {
+      main_app() {
+
+        return wu_main_addon_app;
+
+      },
+      category() {
+
+        return wu_main_addon_app.category;
+
+      },
+    },
+  });
+
+}(jQuery));