Merge branch 'oauth3' of git.daplie.com:Daplie/walnut_launchpad into oauth3

css/lib/angucomplete/angucomplete-alt.css

@@ -0,0 +1,68 @@
+.angucomplete-title .highlight {
+  color: red;
+}
+.angucomplete-holder {
+  position: relative;
+}
+
+.angucomplete-dropdown {
+  border-color: #ececec;
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 2px;
+  width: 100%;
+  padding: 6px;
+  cursor: pointer;
+  z-index: 9999;
+  position: absolute;
+  top: 32px;
+  left: 0px;
+  background-color: #ffffff;
+}
+
+.angucomplete-searching {
+  color: #acacac;
+  font-size: 14px;
+}
+
+.angucomplete-description {
+  font-size: 14px;
+}
+
+.angucomplete-row {
+  padding: 5px;
+  color: #000000;
+  margin-bottom: 4px;
+  clear: both;
+}
+
+.angucomplete-selected-row {
+  background-color: steelblue;
+  color: #ffffff;
+}
+
+.angucomplete-image-holder {
+  padding-top: 2px;
+  float: left;
+  margin-right: 10px;
+  margin-left: 5px;
+}
+
+.angucomplete-image {
+  height: 34px;
+  width: 34px;
+  border-radius: 50%;
+  border-color: #ececec;
+  border-style: solid;
+  border-width: 1px;
+}
+
+.angucomplete-image-default {
+  /* Add your own default image here
+   background-image: url('/assets/default.png');
+  */
+  background-position: center;
+  background-size: contain;
+  height: 34px;
+  width: 34px;
+}

index.html

@@ -5,6 +5,7 @@
     <title>Launch-pad</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="/css/lib/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" href="/css/lib/angucomplete/angucomplete-alt.css">
     <link rel="stylesheet" href="/css/font-awesome.min.css">
     <link rel="stylesheet" href="/css/styles.css">
   </head>
@@ -30,6 +31,7 @@
     <script src="/js/lib/angular/angular.min.js" charset="utf-8"></script>
     <script src="/js/lib/angular/angular-local-storage.js" charset="utf-8"></script>
     <script src="/js/lib/angular/angular-ui-router.min.js" charset="utf-8"></script>
+    <script src="/js/lib/angular/angucomplete-alt.min.js" charset="utf-8"></script>
     <!-- Core Files -->
     <script src="/js/app.js" charset="utf-8"></script>
     <!-- Services -->

js/app.js

@@ -1,4 +1,4 @@
-var app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule']);
+var app = angular.module('launchpad', ['oauth3.org', 'ui.router', 'LocalStorageModule', 'angucomplete-alt']);
 
 app.config(['$stateProvider', '$urlRouterProvider', 'localStorageServiceProvider',
   function ($stateProvider, $urlRouterProvider, localStorageServiceProvider) {

js/controllers/dns-controller.js

@@ -1,4 +1,4 @@
-app.controller('DnsController', [
+app.controller('dnsCtrl', [
   '$scope',
   function($scope) {
   var vm = this;

js/controllers/music-controller.js

@@ -2,4 +2,5 @@ app.controller('musicCtrl', [
   '$scope',
   function($scope) {
   var vm = this;
+
 }]);

js/controllers/website-controller.js

@@ -25,8 +25,8 @@ function handleFiles(ev) {
 window.document.body.addEventListener('change', handleFiles);
 
 app.controller('websiteCtrl', [
-  '$scope', '$q', 'Auth', 'azp@oauth3.org'
-, function ($scope, $q, Auth, Oauth3) {
+  '$scope', '$q', 'Auth', 'azp@oauth3.org', '$timeout'
+, function ($scope, $q, Auth, Oauth3, $timeout) {
 
   var vm = this;
   vm.domains = [];
@@ -340,6 +340,30 @@ app.controller('websiteCtrl', [
   Auth.api('domains.list', {}).then(function (els) {
     console.log('domains.list els', els);
     vm.domains = els;
+    $scope.domain = vm.domains;
   });
   vm.listSites();
+
+  vm.triggerDropdown = function() {
+    $timeout(function() {
+      var el = document.querySelector('.trigger-dropdown');
+      angular.element(el).triggerHandler('focus');
+    }, 0);
+  };
+
+  $scope.$watch('vm.selectedDomain', function(domainSelected) {
+    if (domainSelected !== undefined) {
+      vm.selectDomain(vm.selectedDomain.title);
+    }
+  });
+
+  $scope.localDomainSearch = function(str, domain) {
+    var matches = [];
+    domain.forEach(function(domain) {
+      if ((domain.domain.toLowerCase().indexOf(str.toString().toLowerCase()) >= 0)) {
+        matches.push(domain);
+      }
+    });
+    return matches;
+  };
 }]);

templates/website.html

@@ -24,15 +24,23 @@
       </div>
       <span class="input-group-addon">.</span>
 
-      <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" />
+      <div angucomplete-alt
+        placeholder="Select a domain"
+        pause="300"
+        selected-object="vm.selectedDomain"
+        local-data="domain"
+        local-search="localDomainSearch"
+        title-field="domain"
+        minlength="0"
+        input-class="form-control trigger-dropdown"
+        match-class="highlight">
+      </div>
+
+      <!-- <input type="text" class="form-control" placeholder="Select a domain" aria-label="Domain Name" ng-model="vm.newDomain" ng-change="vm.setDomain()" /> -->
       <div class="input-group-btn">
-        <!-- Single button -->
         <div class="btn-group">
-          <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="caret"></span>
+          <button type="button" class="btn btn-default trigger-dropdown" aria-haspopup="true" aria-expanded="false" ng-click="vm.triggerDropdown()"><span class="caret"></span>
           </button>
-          <ul class="dropdown-menu">
-            <li ng-repeat="domain in vm.domains track by $index"><button class="btn btn-link" ng-bind="domain.domain" ng-click="vm.selectDomain(domain)">example.com</button></li>
-          </ul>
         </div>
       </div>
 
@@ -81,5 +89,4 @@
       </tbody>
     </table>
   </div>
-
 </div>