feat: search by base domains

close #25

src/popup/app.js

@@ -1,7 +1,8 @@
 var App = Backbone.Router.extend({
   routes: {
     '': 'renderMenu',
-    'commands': 'renderCommands',
+    commands: 'renderCommands',
+    domains: 'renderDomains',
   },
   renderMenu: function () {
     this.view = new MenuView;
@@ -9,6 +10,9 @@ var App = Backbone.Router.extend({
   renderCommands: function () {
     this.view = new CommandsView;
   },
+  renderDomains: function () {
+    this.view = new DomainsView;
+  },
 });
 var app = new App();
 if (!Backbone.history.start())
@@ -23,6 +27,11 @@ BaseView.prototype.initI18n.call(window);
       data: model.get('name'),
     });
   }
+  function domainClick(e, model) {
+    chrome.tabs.create({
+      url: 'https://greasyfork.org/scripts/search?q=' + model.get('name'),
+    });
+  }
   function scriptSymbol(data) {
     return data ? 'fa-check' : 'fa-times';
   }
@@ -41,6 +50,26 @@ BaseView.prototype.initI18n.call(window);
   }
   function init() {
     chrome.tabs.sendMessage(app.currentTab.id, {cmd: 'GetPopup'});
+    if (app.currentTab && /^https?:\/\//i.test(app.currentTab.url)) {
+      var matches = app.currentTab.url.match(/:\/\/(?:www\.)?([^\/]*)/);
+      var domain = matches[1];
+      var pieces = domain.split('.').reverse();
+      var domains = [];
+      var last = pieces.shift();
+      pieces.forEach(function (piece) {
+        last = piece + '.' + last;
+        domains.unshift(last);
+      });
+      if (!domains.length) domains.push(domain);
+      domainsMenu.reset(domains.map(function (domain) {
+        return new MenuItem({
+          name: domain,
+          title: true,
+          className: 'ellipsis',
+          onClick: domainClick,
+        });
+      }));
+    }
   }
 
   var commands = {

src/popup/model.js

@@ -6,3 +6,4 @@ var Menu = Backbone.Collection.extend({
 
 var scriptsMenu = new Menu;
 var commandsMenu = new Menu;
+var domainsMenu = new Menu;

src/popup/style.css

@@ -25,21 +25,34 @@ body {
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.menu-item {
+.menu-item-label {
   cursor: pointer;
   padding: 5px;
   white-space: nowrap;
 }
-.menu-item:hover {
+.menu-item-detail:hover,
+.menu-item-label:hover {
   background: cornflowerblue;
   color: white;
 }
-.menu-item.disabled {
+.menu-item.disabled .menu-item-label {
   color: gray;
 }
-.menu-item.disabled:hover {
+.menu-item.disabled .menu-item-label:hover {
   color: silver;
 }
+.has-detail .menu-item-label {
+  padding-right: 2em;
+}
+.menu-item-detail {
+  float: right;
+  border-radius: 2px;
+  text-align: center;
+  width: 1.2em;
+  margin: .4em;
+  background: white;
+  cursor: pointer;
+}
 hr {
   border: none;
   border-top: 1px solid silver;

src/popup/templates/menuitem.html

@@ -1,2 +1,5 @@
-<i class="fa <%- it.symbol %>"></i>
-<%- it.name %>
+<%= it.onClickDetail ? '<div class="menu-item-detail"><i class="fa fa-ellipsis-h"></i></div>' : '' %>
+<div class="menu-item-label">
+  <i class="fa <%- it.symbol %>"></i>
+  <%- it.name %>
+</div>

src/popup/views/domain.js

@@ -0,0 +1,28 @@
+var DomainsView = MenuBaseView.extend({
+  initialize: function () {
+    MenuBaseView.prototype.initialize.call(this);
+    this.listenTo(domainsMenu, 'reset', this.render);
+  },
+  _render: function () {
+    var _this = this;
+    _this.$el.html(_this.templateFn({
+      hasSep: true
+    }));
+    var comp = _this.components();
+    var top = comp.top;
+    var bot = comp.bot;
+    _this.addMenuItem({
+      name: _.i18n('menuBack'),
+      symbol: 'fa-arrow-left',
+      onClick: function (e) {
+        app.navigate('', {trigger: true});
+      },
+    }, top);
+    domainsMenu.each(function (item) {
+      _this.addMenuItem(item, bot);
+    });
+    setTimeout(function () {
+      _this.fixStyles(bot, comp.plh);
+    });
+  },
+});

src/popup/views/item.js

@@ -2,11 +2,13 @@ var MenuItemView = BaseView.extend({
   className: 'menu-item',
   templateUrl: '/popup/templates/menuitem.html',
   events: {
-    'click': 'onClick',
+    'click .menu-item-detail': 'onClickDetail',
+    'click .menu-item-label': 'onClick',
   },
   initialize: function () {
     BaseView.prototype.initialize.call(this);
     this.listenTo(this.model, 'change', this.render);
+    if (this.model.get('onClickDetail')) this.el.classList.add('has-detail');
   },
   _render: function () {
     var it = this.model.toJSON();
@@ -24,4 +26,8 @@ var MenuItemView = BaseView.extend({
     var onClick = this.model.get('onClick');
     onClick && onClick(e, this.model);
   },
-})
+  onClickDetail: function (e) {
+    var onClickDetail = this.model.get('onClickDetail');
+    onClickDetail && onClickDetail(e, this.model);
+  },
+});

src/popup/views/menu.js

@@ -3,6 +3,7 @@ var MenuView = MenuBaseView.extend({
     MenuBaseView.prototype.initialize.call(this);
     this.listenTo(scriptsMenu, 'reset', this.render);
     this.listenTo(commandsMenu, 'reset', this.render);
+    this.listenTo(domainsMenu, 'reset', this.render);
   },
   _render: function () {
     var _this = this;
@@ -30,7 +31,7 @@ var MenuView = MenuBaseView.extend({
         });
       },
     }, top);
-    if (app.currentTab && /^https?:\/\//i.test(app.currentTab.url))
+    if (domainsMenu.length)
       _this.addMenuItem({
         name: _.i18n('menuFindScripts'),
         symbol: 'fa-search',
@@ -40,6 +41,9 @@ var MenuView = MenuBaseView.extend({
             url: 'https://greasyfork.org/scripts/search?q=' + matches[1],
           });
         },
+        onClickDetail: function (e) {
+          app.navigate('domains', {trigger: true});
+        },
       }, top);
     if (commandsMenu.length) _this.addMenuItem({
       name: _.i18n('menuCommands'),