angular-smart-search 0.0.5 → 0.0.6

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 97d4972c061407bff51f20fe716975942dceacf4
-  data.tar.gz: 3a31a712a5b94be653c7df85f9584ca49830a6ec
+  metadata.gz: 04cb4a6f9b79c9b5ea2f7eb89b4596550f584c30
+  data.tar.gz: 12e620cc49c2ccc19b7cff616eae6af86de53cdf
 SHA512:
-  metadata.gz: f406901f8fbf87ac665209fa59b9f583dcde46b650ae61c63d2316343191b97327a897f3ef6aa30959bed5985f77213d2c9eaf50c438399d4b9eefa5caac3e0b
-  data.tar.gz: bfc71b27b7c1a7f5cbc74d68a53be0d4050f8ae081cdc782f101daddd49e55acc11c5ade14cbf980e4cf40f18635253acb43cd316d67b734b9b761bcc7c8d7e1
+  metadata.gz: 7cc5b239350f9d22de67291d61a3641d82614210ddcefd1aab076a8416c7c7a4062695ac66d6cccb2d5dcec2aee34db1574235b0a2225c33cf0287ce51239d75
+  data.tar.gz: 41194c15087798de012a842e53ba4033d0452658f7cf8ff6c9a42c722d929ae51204d1ddbffb9620ca1925709274f096557c45815007976777ea3cdff9bae247

data/app/assets/javascripts/angular-smart-search.js

@@ -1,5 +1,5 @@
 // author:   Samuel Mueller 
-// version:  0.0.5 
+// version:  0.0.6 
 // license:  MIT 
 // homepage: http://github.com/ssmm/angular-smart-search 
 (function() {
@@ -26,18 +26,27 @@
       return {
         restrict: "A",
         scope: true,
-        replace: true,
-        template: templateFactory(),
         compile: function(element, attributes, transclude) {
-          var id_field;
+          var detailOverlay, id_field, template;
 
+          if (attributes.detailOverlay) {
+            detailOverlay = jQuery("#" + attributes.detailOverlay);
+            if (!detailOverlay[0]) {
+              detailOverlay = void 0;
+            }
+          }
+          template = angular.element(templateFactory.getTemplate(angular.isDefined(detailOverlay)));
+          if (detailOverlay) {
+            angular.element(template.find("detail-overlay")).append(detailOverlay.html());
+          }
+          element.replaceWith(template);
           id_field = angular.element("<input ng-model='result.id' type='text' style='width: 30px; display: none;'>");
           id_field.attr("id", attributes.id);
           id_field.attr("name", attributes.name);
           element.append(id_field);
           return {
             post: function($scope, $element, $attributes) {
-              var allowedFormats, input, outerQueryTimeout, overlay, queryState, service;
+              var allowedFormats, detailOverlayTrigger, hideOverlay, outerQueryTimeout, queryState, quickQueryInput, searchInput, searchOverlay, service, showOverlay;
 
               queryState = new QueryState();
               $scope.queryState = queryState;
@@ -48,18 +57,35 @@
                 $scope.result = angular.fromJson($attributes.init)[0];
                 $scope.queryState.setTo("successful");
               }
-              input = $element.find("[queryfield]");
-              overlay = $element.children("[overlay]");
-              $scope.show = function() {
-                var position;
-
-                position = input.position();
-                overlay.css("top", position.top - padding);
-                overlay.css("left", position.left - padding);
-                return overlay.show("fade");
+              quickQueryInput = $element.find("[quick-query-input]");
+              searchInput = $element.find("[search-input]");
+              detailOverlayTrigger = $element.find("[detail-overlay-trigger]");
+              searchOverlay = $element.children("search-overlay");
+              detailOverlay = $element.children("detail-overlay");
+              showOverlay = function(overlay, origin, action) {
+                overlay.css("top", origin.top - padding);
+                overlay.css("left", origin.left - padding);
+                return overlay.show("fade", action);
+              };
+              $scope.showSearchOverlay = function() {
+                return showOverlay(searchOverlay, quickQueryInput.position(), function() {
+                  return searchInput.focus();
+                });
+              };
+              $scope.showDetailOverlay = function() {
+                $scope.item = $scope.result;
+                return showOverlay(detailOverlay, detailOverlayTrigger.position());
               };
-              $scope.hide = function() {
-                return overlay.hide("fade");
+              hideOverlay = function(overlay, action) {
+                return overlay.hide("fade", action);
+              };
+              $scope.hideSearchOverlay = function() {
+                return hideOverlay(searchOverlay, function() {
+                  return quickQueryInput.focus();
+                });
+              };
+              $scope.hideDetailOverlay = function() {
+                return hideOverlay(detailOverlay);
               };
               $scope.search = function(query) {
                 return $http.get("" + service + ".json?fulltext=" + query).success(function(data) {
@@ -70,7 +96,7 @@
               $scope.pick = function(item) {
                 queryState.setTo("successful");
                 $scope.result = item;
-                return $scope.hide();
+                return $scope.hideSearchOverlay();
               };
               $scope.hover = function(item) {
                 return $scope.currentItem = item;
@@ -78,26 +104,32 @@
               outerQueryTimeout = null;
               return $scope.outerQueryChanged = function(query) {
                 window.clearTimeout(outerQueryTimeout);
-                query = searchQueryFactory(query, allowedFormats);
-                if (query) {
-                  queryState.setTo("changed");
-                  queryState.query = query;
-                  return outerQueryTimeout = window.setTimeout(function() {
-                    queryState.setTo("pending");
-                    $http.get("" + service + ".json?" + query.format.name + "=" + query.query).success(function(data) {
-                      if (data[0] && data[0].id) {
-                        queryState.setTo("successful");
-                        return $scope.result = data[0];
-                      } else {
-                        return queryState.setTo("unsuccessful");
-                      }
-                    }).error(function() {
-                      return queryState.setTo("error");
-                    });
-                    return $scope.$apply();
-                  }, 1200);
+                if (!query) {
+                  if ($scope.result) {
+                    return queryState.setTo("successful");
+                  }
                 } else {
-                  return queryState.setTo("invalid-format");
+                  query = searchQueryFactory(query, allowedFormats);
+                  if (query) {
+                    queryState.setTo("changed");
+                    queryState.query = query;
+                    return outerQueryTimeout = window.setTimeout(function() {
+                      queryState.setTo("pending");
+                      $http.get("" + service + ".json?" + query.format.name + "=" + query.query).success(function(data) {
+                        if (data[0] && data[0].id) {
+                          queryState.setTo("successful");
+                          return $scope.result = data[0];
+                        } else {
+                          return queryState.setTo("unsuccessful");
+                        }
+                      }).error(function() {
+                        return queryState.setTo("error");
+                      });
+                      return $scope.$apply();
+                    }, 1200);
+                  } else {
+                    return queryState.setTo("invalid-format");
+                  }
                 }
               };
             }
@@ -107,6 +139,45 @@
     }
   ]);
 
+  angular.module("angular-smart-search").provider("markupStore", [
+    function() {
+      var infoIconClass, overlayClass, searchIconClass, successIconClass;
+
+      successIconClass = "icon-info-sign icon-large";
+      infoIconClass = "icon-info-sign";
+      searchIconClass = "icon-search";
+      overlayClass = "smart-search-overlay";
+      this.setSuccessIconClass = function(attr) {
+        return successIconClass = attr;
+      };
+      this.setInfoIconClass = function(attr) {
+        return infoIconClass = attr;
+      };
+      this.setSearchIconClass = function(attr) {
+        return searchIconClass = attr;
+      };
+      this.setOverlayClass = function(attr) {
+        return overlayClass = attr;
+      };
+      return this.$get = function() {
+        return {
+          successIconClass: function() {
+            return successIconClass;
+          },
+          infoIconClass: function() {
+            return infoIconClass;
+          },
+          searchIconClass: function() {
+            return searchIconClass;
+          },
+          overlayClass: function() {
+            return overlayClass;
+          }
+        };
+      };
+    }
+  ]);
+
   angular.module("angular-smart-search").provider("searchQueryFactory", [
     function() {
       var Query, detectFormat, formats;
@@ -121,7 +192,7 @@
 
         for (_i = 0, _len = allowedFormats.length; _i < _len; _i++) {
           name = allowedFormats[_i];
-          if (formats[name].pattern.exec(query)) {
+          if (formats[name] && formats[name].pattern.exec(query)) {
             return formats[name];
           }
         }
@@ -152,42 +223,38 @@
     }
   ]);
 
-  angular.module("angular-smart-search").factory("templateFactory", [
+  angular.module("angular-smart-search").service("templateFactory", [
     "markupStore", function(markupStore) {
-      return function() {
-        return "      <div>        <!-- input section you see initially -->        <div class='input-prepend input-append'>          <!-- gray display section -->          <span class='add-on' style='min-width: 200px;'>            <!-- result if found -->            <span ng-show='queryState.is(\"successful\")'>              <i class='" + (markupStore.successIconClass()) + "'></i>              {{result.displayText}}            </span>            <!-- query states -->            <span ng-show='queryState.is(\"changed\")'>              <em>{{queryState.query.format.name}} detected</em>            </span>            <span ng-show='queryState.is(\"pending\")'>              <em>searching...</em>            </span>            <span ng-show='queryState.is(\"unsuccessful\")'>              <em>Not found</em>            </span>            <span ng-show='queryState.is(\"invalid-format\")'>              <em>Invalid format</em>            </span>            <span ng-show='queryState.is(\"error\")'>              <em>Error</em>            </span>          </span>          <!-- quick query field -->          <input ng-change='outerQueryChanged(quickQuery)' ng-model='quickQuery' queryfield style='width: 100px;' type='text'>          <!-- button that triggers detail search overlay -->          <button type='button' class='btn' ng-click='show()'>            <i class='" + (markupStore.searchIconClass()) + "'></i>          </button>        </div>        <!-- detail search overlay, initially hidden -->        <div class='" + (markupStore.overlayClass()) + "' ng-mouseleave='hide()' overlay>          <div class='row-fluid'>            <div class='span12'>              <div class='input-append'>                <input detail-queryfield ng-model='detailQuery' type='text'>                <button type='button' class='btn' ng-click='search(detailQuery)'>                  <i class='" + (markupStore.searchIconClass()) + "'></i>                </button>              </div>            </div>          </div>          <div class='horizontal-space'></div>          <div class='row-fluid'>            <div class='span12'>              <table at-table class='table table-bordered table-hover' fill-last-page pagination='wildPagination'>                <thead></thead>                <tbody>                  <tr ng-mouseover='hover(item)'>                    <td at-implicit attribute='id' class='sortable 50px'></td>                    <td at-implicit attribute='displayText' class='sortable 280px' title='Result'></td>                    <td class='50px' title=''>                      <button type='button' class='btn btn-mini' ng-click='pick(item)'>pick</button>                    </td>                  </tr>                </tbody>              </table>              <at-pagination instance='wildPagination' items-per-page='3' list='resultList'></at-pagination>            </div>          </div>        </div>      </div>      ";
-      };
-    }
-  ]);
-
-  angular.module("angular-smart-search").provider("markupStore", [
-    function() {
-      var overlayClass, searchIconClass, successIconClass;
+      var detailOverlay, detailOverlayTrigger, inputSection, overlayStyle, resultIcon, searchOverlay, showDetailOverlayAction, successIcon;
 
-      successIconClass = "icon-ok";
-      searchIconClass = "icon-search";
-      overlayClass = "smart-search-overlay";
-      this.setSuccessIconClass = function(attr) {
-        return successIconClass = attr;
+      overlayStyle = "style='    display: none; position: absolute;    background-color: white; padding: 30px;    border: solid;    border-width: 1px;    border-color: rgb(221, 221, 221);    border-radius: 10px;  '";
+      detailOverlayTrigger = "<i detail-overlay-trigger class='" + (markupStore.infoIconClass()) + "' ng-click='showDetailOverlay()'></i>";
+      successIcon = "<i class='" + (markupStore.successIconClass()) + "'></i>";
+      showDetailOverlayAction = function(withDetailOverlay) {
+        if (withDetailOverlay) {
+          return "ng-click='showDetailOverlay()'";
+        }
       };
-      this.setSearchIconClass = function(attr) {
-        return searchIconClass = attr;
+      resultIcon = function(withDetailOverlay) {
+        if (withDetailOverlay) {
+          return detailOverlayTrigger;
+        } else {
+          return successIcon;
+        }
       };
-      this.setOverlayClass = function(attr) {
-        return overlayClass = attr;
+      inputSection = function(withDetailOverlay) {
+        return "      <div>        <!-- input section you see initially -->        <div class='input-prepend input-append'>          <!-- gray display section -->          <span class='add-on' style='min-width: 200px;'>            <!-- result if found -->            <span ng-show='queryState.is(\"successful\")' " + (showDetailOverlayAction(withDetailOverlay)) + ">              " + (resultIcon(withDetailOverlay)) + "              {{result.displayText}}            </span>            <!-- query states -->            <span ng-show='queryState.is(\"changed\")'>              <em>{{queryState.query.format.name}} detected</em>            </span>            <span ng-show='queryState.is(\"pending\")'>              <em>searching...</em>            </span>            <span ng-show='queryState.is(\"unsuccessful\")'>              <em>Not found</em>            </span>            <span ng-show='queryState.is(\"invalid-format\")'>              <em>Invalid format</em>            </span>            <span ng-show='queryState.is(\"error\")'>              <em>Error</em>            </span>          </span>          <!-- quick query field -->          <input ng-change='outerQueryChanged(quickQuery)' ng-model='quickQuery' quick-query-input style='width: 100px;' type='text'>          <!-- button that triggers detail search overlay -->          <button type='button' class='btn' ng-click='showSearchOverlay()'>            <i class='" + (markupStore.searchIconClass()) + "'></i>          </button>        </div>        " + (detailOverlay()) + "        " + (searchOverlay()) + "      </div>    ";
       };
-      return this.$get = function() {
-        return {
-          successIconClass: function() {
-            return successIconClass;
-          },
-          searchIconClass: function() {
-            return searchIconClass;
-          },
-          overlayClass: function() {
-            return overlayClass;
-          }
-        };
+      searchOverlay = function() {
+        return "      <search-overlay " + overlayStyle + " class='" + (markupStore.overlayClass()) + "' ng-mouseleave='hideSearchOverlay()'>        <div class='row-fluid'>          <div class='span12'>            <div class='input-append'>              <form>                <input search-input ng-model='detailQuery' type='text'>                <button type='submit' class='btn' ng-click='search(detailQuery)'>                  <i class='" + (markupStore.searchIconClass()) + "'></i>                </button>              </form>            </div>          </div>        </div>        <div class='horizontal-space'></div>        <div class='row-fluid'>          <div class='span12'>            <table at-table class='table table-bordered table-hover' fill-last-page pagination='wildPagination'>              <thead></thead>              <tbody>                <tr ng-mouseover='hover(item)'>                  <td at-implicit attribute='id' class='sortable 50px'></td>                  <td at-implicit attribute='displayText' class='sortable 280px' title='Result'></td>                  <td class='50px' title=''>                    <button type='button' class='btn btn-mini' ng-click='pick(item)'>pick</button>                  </td>                </tr>              </tbody>            </table>            <at-pagination instance='wildPagination' items-per-page='3' list='resultList'></at-pagination>          </div>        </div>      </search-overlay>    ";
+      };
+      detailOverlay = function() {
+        return "      <detail-overlay " + overlayStyle + " class='" + (markupStore.overlayClass()) + "' ng-mouseleave='hideDetailOverlay()'>      </detail-overlay>    ";
+      };
+      return {
+        getTemplate: function(withDetailOverlay) {
+          return inputSection(withDetailOverlay);
+        }
       };
     }
   ]);

data/lib/angular-smart-search/version.rb

@@ -1,3 +1,3 @@
 module AngularSmartSearch
-  VERSION = "0.0.5"
+  VERSION = "0.0.6"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: angular-smart-search
 version: !ruby/object:Gem::Version
-  version: 0.0.5
+  version: 0.0.6
 platform: ruby
 authors:
 - Samuel Mueller
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2013-07-05 00:00:00.000000000 Z
+date: 2013-07-09 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -38,6 +38,20 @@ dependencies:
     - - '>='
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: listen
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - '>='
+      - !ruby/object:Gem::Version
+        version: '0'
 description: angular smart search
 email:
 - mueller.samu@gmail.com
@@ -73,4 +87,3 @@ signing_key:
 specification_version: 4
 summary: angular smart search
 test_files: []
-has_rdoc: