Add lookahead. Fixes #7 and maybe fixes #10?

diff --git a/app/css/dropdown.css b/app/css/dropdown.css
new file mode 100755 (executable)
index 0000000..f907c95
--- /dev/null
+++ b/app/css/dropdown.css
@@ -0,0 +1,36 @@
+.dropdown-menu {
+    position:absolute;
+    top:100%;
+    left:0;
+    z-index:1000;
+    display:none;
+    float:left;
+    min-width:160px;
+    margin:2px 0 0;
+    text-align:left;
+    list-style:none;
+    background-color:#1C2C3C;
+    -webkit-background-clip:padding-box;
+    background-clip:padding-box;
+    border:3px solid #000;
+    border-radius:4px;
+    -webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);
+    box-shadow:0 6px 12px rgba(0,0,0,.175)
+}
+
+.dropdown-menu>li>a{
+    display:block;
+    padding:3px 20px;
+    clear:both;
+    color:#fff;
+    cursor: pointer;
+    white-space:nowrap
+}
+
+.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{
+    color:#fff;
+    text-decoration:none;
+    background: rgba(0,0,0,0.25);
+    color: #FFB122;
+    outline:0
+}
\ No newline at end of file

diff --git a/app/index.html b/app/index.html
index a8f92fa..2f1ea4c 100644 (file)
--- a/app/index.html
+++ b/app/index.html
@@ -14,6 +14,7 @@
         <link rel="stylesheet" href="css/pager.css"/>
         <link rel="stylesheet" href="css/modal.css"/>
         <link rel="stylesheet" href="css/popover.css"/>
+        <link rel="stylesheet" href="css/dropdown.css"/>
         <link rel="stylesheet" href="css/buttons.css"/>
         <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css"/>
         <link rel="stylesheet" href="css/divinelegy.css"/>
@@ -81,4 +82,3 @@
         <!-- <div>Angular seed app: v<span app-version></span></div> -->
     </body>
 </html>
-

diff --git a/app/pages/packs/packs.html b/app/pages/packs/packs.html
index 5d63d9d..f33c414 100644 (file)
--- a/app/pages/packs/packs.html
+++ b/app/pages/packs/packs.html
@@ -1,9 +1,9 @@
 <div ng-if="packList && packList.length" id="filters">\r
     <div id="text-filters">\r
-        <input type="text" ng-model="$parent.packTitleFilterKeyword" placeholder="Pack Title"/>\r
-        <input type="text" ng-model="$parent.artistFilterKeyword" placeholder="Song Artist"/>\r
-        <input type="text" ng-model="$parent.songTitleFilterKeyword" placeholder="Song Title"/>\r
-        <input type="text" ng-model="$parent.stepArtistFilterKeyword" placeholder="Step Artist"/>\r
+        <input type="text" ng-model="$parent.packTitleFilterKeyword" placeholder="Pack Title" typeahead="pack.title for pack in packList | filter:$viewValue | limitTo:8"/>\r
+        <input type="text" ng-model="$parent.artistFilterKeyword" placeholder="Song Artist" typeahead="artist for artist in allSongArtists | filter:$viewValue | limitTo:8" />\r
+        <input type="text" ng-model="$parent.songTitleFilterKeyword" placeholder="Song Title" typeahead="song for song in allSongTitles | filter:$viewValue | limitTo:8" />\r
+        <input type="text" ng-model="$parent.stepArtistFilterKeyword" placeholder="Step Artist" typeahead="contributor for contributor in allContributors | filter:$viewValue | limitTo:8" />\r
         <input type="text" ng-model="$parent.ratingFilterKeyword" placeholder="Block Rating"/>\r
     </div>\r
     <div id="select-filters">\r

diff --git a/app/pages/packs/packs.js b/app/pages/packs/packs.js
index f770fe8..f16ce23 100644 (file)
--- a/app/pages/packs/packs.js
+++ b/app/pages/packs/packs.js
@@ -16,25 +16,22 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
     $scope.modeFilterKeyword = 'Any';
     $scope.packList = [];
     $scope.filteredPackList = [];
+    $scope.allContributors = [];
+    $scope.allSongTitles = [];
+    $scope.allSongArtists = [];
     
     var watchMen = ['packTitleFilterKeyword', 'artistFilterKeyword', 'songTitleFilterKeyword', 'difficultyFilterKeyword', 'ratingFilterKeyword', 'stepArtistFilterKeyword', 'fgChangesFilterKeyword', 'bgChangesFilterKeyword', 'bpmChangesFilterKeyword', 'modeFilterKeyword'];
     $scope.$watchGroup(watchMen, function(newValues, oldValues) {
-        $scope.applyFilters();
+        applyFilters();
     });
-
-      //XXX: Why is this here?
-//    $scope.getSimfileListingIndex = function(packName, index)
-//    {
-//        return packName + "" + index;
-//    };
     
-    $scope.packTitleFilter = function(pack)
+    var packTitleFilter = function(pack)
     {
-        var re = new RegExp($scope.packTitleFilterKeyword, 'i');
+        var re = new RegExp(escapeRegExp($scope.packTitleFilterKeyword), 'i');
         return !$scope.packTitleFilterKeyword || re.test(pack.title);
     };
 
-    $scope.simfileFilter = function(pack)
+    var simfileFilter = function(pack)
     {
         // Step 0: All chart keywords are null
         if(!$scope.songTitleFilterKeyword &&
@@ -57,9 +54,8 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
         for(var i=0; i<simfiles.length; i++)
         {
             var simfile = pack.simfiles[i];
-            var songTitleRe = new RegExp($scope.songTitleFilterKeyword, 'i');
-            var artistRe = new RegExp($scope.artistFilterKeyword, 'i');
-            
+            var songTitleRe = new RegExp(escapeRegExp($scope.songTitleFilterKeyword), 'i');
+            var artistRe = new RegExp(escapeRegExp($scope.artistFilterKeyword), 'i');
 
             match = (!$scope.songTitleFilterKeyword || songTitleRe.test(simfile.title)) &&
                     (!$scope.artistFilterKeyword || artistRe.test(simfile.artist)) &&
@@ -85,7 +81,7 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
             return true;
         }
         
-        var stepArtistRe = new RegExp($scope.stepArtistFilterKeyword, 'i');
+        var stepArtistRe = new RegExp(escapeRegExp($scope.stepArtistFilterKeyword), 'i');
         var steps = [simfile.steps.single, simfile.steps.double];
         var modeKeywordMap = ['single', 'double'];
         var match = false;
@@ -128,9 +124,9 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
         return false;
     };
     
-    $scope.applyFilters = function()
+    var applyFilters = function()
     {
-        $scope.filteredPackList = filterFilter(filterFilter($scope.packList, $scope.packTitleFilter), $scope.simfileFilter);
+        $scope.filteredPackList = filterFilter(filterFilter($scope.packList, packTitleFilter), simfileFilter);
     };
 
     SimfileService.getPacks().then(function(packs)
@@ -155,6 +151,31 @@ angular.module("DivinElegy.pages.packs", ["DivinElegy.components.simfiles","Divi
             $scope.currentPage = 1;
             $scope.packList = packs;
             $scope.filteredPackList = packs;
+            
+            for(var i =0; i<packs.length; i++)
+            {
+                var pack = packs[i];
+                for(var j=0; j<pack.contributors.length; j++)
+                {
+                    if($scope.allContributors.indexOf(pack.contributors[j]) === -1)
+                        $scope.allContributors.push(pack.contributors[j]);
+                }
+                
+                for(var j=0; j<pack.simfiles.length; j++)
+                {
+                    if($scope.allSongTitles.indexOf(pack.simfiles[j].title) === -1)
+                        $scope.allSongTitles.push(pack.simfiles[j].title);
+                    
+                    if($scope.allSongArtists.indexOf(pack.simfiles[j].artist) === -1)
+                        $scope.allSongArtists.push(pack.simfiles[j].artist);
+                }
+            }
         }
     });
+    
+    var escapeRegExp = function(str)
+    {
+        str = str ? str : "";
+        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+    };
 }]);
\ No newline at end of file