refactor: simplify popup views

src/options/app.js

@@ -98,7 +98,5 @@ new Vue({
     Main: Main,
     Confirm: Confirm,
   },
-  data: function () {
-    return hashData;
-  },
+  data: hashData,
 });

src/popup/app.js

@@ -12,10 +12,8 @@ var app = new Vue({
     Commands: Commands,
     Domains: Domains,
   },
-  data: function () {
-    return {
-      type: 'Menu',
-    };
+  data: {
+    type: 'Menu',
   },
   methods: {
     navigate: function (type) {
@@ -28,6 +26,7 @@ exports.navigate = app.navigate.bind(app);
 
 !function () {
   function init() {
+    var currentTab = utils.store.currentTab;
     chrome.tabs.sendMessage(currentTab.id, {cmd: 'GetPopup'});
     if (currentTab && /^https?:\/\//i.test(currentTab.url)) {
       var matches = currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
@@ -43,7 +42,6 @@ exports.navigate = app.navigate.bind(app);
     }
   }
 
-  var currentTab;
   var commands = {
     SetPopup: function (data, src, _callback) {
       if (utils.store.currentTab.id !== src.tab.id) return;
@@ -62,7 +60,7 @@ exports.navigate = app.navigate.bind(app);
   });
 
   chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
-    utils.store.currentTab = currentTab = {
+    utils.store.currentTab = {
       id: tabs[0].id,
       url: tabs[0].url,
     };

src/popup/views/command.js

@@ -4,22 +4,21 @@ var _ = require('../../common');
 
 module.exports = {
   mixins: [MixIn],
-  mounted: function () {
-    this.items.top.push({
-      name: _.i18n('menuBack'),
-      symbol: 'arrow-left',
-      onClick: function () {
-        app.navigate();
-      },
-    });
+  data: function () {
+    return {
+      top: [{
+        name: _.i18n('menuBack'),
+        symbol: 'arrow-left',
+        onClick: function () {
+          app.navigate();
+        },
+      }],
+    };
   },
-  watch: {
-    'store.commands': 'update',
-  },
-  methods: {
-    updateView: function () {
+  computed: {
+    bot: function () {
       var _this = this;
-      _this.items.bot = _this.store.commands.map(function (item) {
+      return _this.store.commands.map(function (item) {
         return {
           name: item[0],
           symbol: 'right-hand',
@@ -34,4 +33,7 @@ module.exports = {
       });
     },
   },
+  watch: {
+    'store.commands': 'fixStyles',
+  },
 };

src/popup/views/domain.js

@@ -4,22 +4,21 @@ var _ = require('../../common');
 
 module.exports = {
   mixins: [MixIn],
-  mounted: function () {
-    this.items.top.push({
-      name: _.i18n('menuBack'),
-      symbol: 'arrow-left',
-      onClick: function () {
-        app.navigate();
-      },
-    });
+  data: function () {
+    return {
+      top: [{
+        name: _.i18n('menuBack'),
+        symbol: 'arrow-left',
+        onClick: function () {
+          app.navigate();
+        },
+      }],
+    };
   },
-  watch: {
-    'store.domains': 'update',
-  },
-  methods: {
-    updateView: function () {
+  computed: {
+    bot: function () {
       var _this = this;
-      _this.items.bot = _this.store.domains.map(function (domain) {
+      return _this.store.domains.map(function (domain) {
         return {
           name: domain,
           className: 'ellipsis',
@@ -32,4 +31,7 @@ module.exports = {
       });
     },
   },
+  watch: {
+    'store.domains': 'fixStyles',
+  },
 };

src/popup/views/item.js

@@ -12,6 +12,12 @@ var cache = require('../../cache');
 module.exports = {
   props: ['options'],
   template: cache.get('./item.html'),
+  data: function () {
+    // make options reactive
+    return {
+      reactiveOptions: this.options,
+    };
+  },
   methods: {
     onClick: wrapHandler('onClick'),
     detailClick: wrapHandler('detailClick'),

src/popup/views/menu.html

@@ -1,10 +1,10 @@
 <div>
-  <div class="menu" v-el:top>
-    <menu-item v-for="item in items.top" v-show="!item.hide" :options="item"></menu-item>
+  <div class="menu">
+    <menu-item v-for="item in top" v-show="isVisible(item)" :options="item"></menu-item>
   </div>
-  <hr v-if="items.bot.length">
+  <hr v-if="bot.length">
   <div class="menu placeholder" ref="placeholder"></div>
   <div class="menu" ref="bot">
-    <menu-item v-for="item in items.bot" :options="item"></menu-item>
+    <menu-item v-for="item in bot" :options="item"></menu-item>
   </div>
 </div>

src/popup/views/menu.js

@@ -4,77 +4,78 @@ var _ = require('../../common');
 
 module.exports = {
   mixins: [MixIn],
-  mounted: function () {
+  data: function () {
     var _this = this;
-    _this.items.top.push({
-      name: _.i18n('menuManageScripts'),
-      symbol: 'cog',
-      onClick: function () {
-        var url = chrome.extension.getURL(chrome.app.getDetails().options_page);
-        chrome.tabs.query({
-          currentWindow: true,
-          url: url,
-        }, function (tabs) {
-          var tab = tabs.find(function (tab) {
-            var hash = tab.url.match(/#(\w+)/);
-            return !hash || hash[1] !== 'confirm';
+    return {
+      top: [{
+        name: _.i18n('menuManageScripts'),
+        symbol: 'cog',
+        onClick: function () {
+          var url = chrome.extension.getURL(chrome.app.getDetails().options_page);
+          chrome.tabs.query({
+            currentWindow: true,
+            url: url,
+          }, function (tabs) {
+            var tab = tabs.find(function (tab) {
+              var hash = tab.url.match(/#(\w+)/);
+              return !hash || hash[1] !== 'confirm';
+            });
+            if (tab) chrome.tabs.update(tab.id, {active: true});
+            else chrome.tabs.create({url: url});
           });
-          if (tab) chrome.tabs.update(tab.id, {active: true});
-          else chrome.tabs.create({url: url});
-        });
-      },
-    }, _this.menuFindScripts = {
-      name: _.i18n('menuFindScripts'),
-      symbol: 'search',
-      hide: false,
-      onClick: function () {
-        var matches = _this.store.currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
-        chrome.tabs.create({
-          url: 'https://greasyfork.org/scripts/search?q=' + matches[1],
-        });
-      },
-      detailClick: function () {
-        app.navigate('Domains');
-      },
-    }, _this.menuCommands = {
-      name: _.i18n('menuCommands'),
-      symbol: 'arrow-right',
-      hide: false,
-      onClick: function () {
-        app.navigate('Commands');
-      },
-    }, {
-      name: null,
-      symbol: null,
-      disabled: null,
-      init: function (options) {
-        options.disabled = !_.options.get('isApplied');
-        options.name = options.disabled ? _.i18n('menuScriptDisabled') : _.i18n('menuScriptEnabled');
-        options.symbol = options.disabled ? 'remove' : 'check';
-      },
-      onClick: function (options) {
-        _.options.set('isApplied', options.disabled);
-        options.init.call(this, options);
-        chrome.browserAction.setIcon({
-          path: {
-            19: '/images/icon19' + (options.disabled ? 'w' : '') + '.png',
-            38: '/images/icon38' + (options.disabled ? 'w' : '') + '.png',
-          },
-        });
-      },
-    });
-    _this.updateDomains();
-    _this.updateCommands();
-  },
-  watch: {
-    'store.scripts': 'update',
-    'store.commands': 'updateCommands',
-    'store.domains': 'updateDomains',
+        },
+      }, {
+        name: _.i18n('menuFindScripts'),
+        symbol: 'search',
+        hide: function () {
+          var domains = this.store.domains;
+          return !domains || !domains.length;
+        },
+        onClick: function () {
+          var matches = _this.store.currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
+          chrome.tabs.create({
+            url: 'https://greasyfork.org/scripts/search?q=' + matches[1],
+          });
+        },
+        detailClick: function () {
+          app.navigate('Domains');
+        },
+      }, {
+        name: _.i18n('menuCommands'),
+        symbol: 'arrow-right',
+        hide: function () {
+          var commands = _this.store.commands;
+          return !commands || !commands.length;
+        },
+        onClick: function () {
+          app.navigate('Commands');
+        },
+      }, {
+        name: null,
+        symbol: null,
+        disabled: null,
+        init: function (options) {
+          options.disabled = !_.options.get('isApplied');
+          options.name = options.disabled ? _.i18n('menuScriptDisabled') : _.i18n('menuScriptEnabled');
+          options.symbol = options.disabled ? 'remove' : 'check';
+        },
+        onClick: function (options) {
+          _.options.set('isApplied', options.disabled);
+          options.init.call(this, options);
+          chrome.browserAction.setIcon({
+            path: {
+              19: '/images/icon19' + (options.disabled ? 'w' : '') + '.png',
+              38: '/images/icon38' + (options.disabled ? 'w' : '') + '.png',
+            },
+          });
+        },
+      }],
+    };
   },
-  methods: {
-    updateView: function () {
+  computed: {
+    bot: function () {
       var _this = this;
-      _this.items.bot = _this.store.scripts.map(function (script) {
+      return _this.store.scripts.map(function (script) {
         return {
           name: script.custom.name || _.getLocaleString(script.meta, 'name'),
           className: 'ellipsis',
@@ -101,15 +102,10 @@ module.exports = {
         };
       });
     },
-    updateCommands: function () {
-      var _this = this;
-      var commands = _this.store.commands;
-      _this.menuCommands.hide = !commands || !commands.length;
-    },
-    updateDomains: function () {
-      var _this = this;
-      var domains = _this.store.domains;
-      _this.menuFindScripts.hide = !domains || !domains.length;
-    },
+  },
+  watch: {
+    'store.scripts': 'fixStyles',
+    'store.commands': 'fixStyles',
+    'store.domains': 'fixStyles',
   },
 };

src/popup/views/mixin.js

@@ -6,10 +6,6 @@ module.exports = {
   template: cache.get('./menu.html'),
   data: function () {
     return {
-      items: {
-        top: [],
-        bot: [],
-      },
       store: utils.store,
     };
   },
@@ -17,14 +13,9 @@ module.exports = {
     MenuItem: MenuItem,
   },
   mounted: function () {
-    this.update();
+    this.fixStyles();
   },
   methods: {
-    update: function () {
-      var _this = this;
-      _this.updateView();
-      _this.fixStyles();
-    },
     fixStyles: function () {
       var _this = this;
       _this.$nextTick(function () {
@@ -35,5 +26,10 @@ module.exports = {
         placeholder.style.paddingRight = pad + 'px';
       });
     },
+    isVisible: function (item) {
+      var hide = item.hide;
+      if (typeof hide === 'function') hide = hide.call(this);
+      return !hide;
+    },
   },
 };