Refactor positioning code; fixes #75

.versions

@@ -0,0 +1,36 @@
+application-configuration@1.0.4
+base64@1.0.2
+binary-heap@1.0.2
+blaze@2.0.4
+blaze-tools@1.0.2
+callback-hook@1.0.2
+check@1.0.4
+coffeescript@1.0.5
+dandv:caret-position@2.1.0-3
+ddp@1.0.14
+deps@1.0.6
+ejson@1.0.5
+follower-livedata@1.0.3
+geojson-utils@1.0.2
+html-tools@1.0.3
+htmljs@1.0.3
+id-map@1.0.2
+jquery@1.11.3
+json@1.0.2
+local-test:mizzao:autocomplete@0.5.0
+logging@1.0.6
+meteor@1.1.4
+minifiers@1.1.3
+minimongo@1.0.6
+mizzao:autocomplete@0.5.0
+mongo@1.0.11
+observe-sequence@1.0.4
+ordered-dict@1.0.2
+random@1.0.2
+reactive-var@1.0.4
+retry@1.0.2
+spacebars-compiler@1.0.4
+templating@1.0.11
+tinytest@1.0.4
+tracker@1.0.5
+underscore@1.0.2

History.md

@@ -1,8 +1,12 @@
 ## vNEXT
 
+## v0.5.1
+
+* Allow either top or bottom positioning in both normal and whole-field modes. (#75)
+
 ## v0.5.0
 
-* Switch to jQuery events instead of callbacks; you can now detect autocomplete selections using a template's event map. **Callbacks are no longer supported.** See the demo for a use example.
+* Switch to jQuery events instead of callbacks; you can now detect autocomplete selections using a template's event map. **Callbacks are no longer supported.** See the demo for a use example. (#48, #56)
 
 ## v0.4.10
 

autocomplete-client.coffee

@@ -304,25 +304,24 @@ class @AutoComplete
     position = @$element.position()
 
     rule = @matchedRule()
+
+    offset = getCaretCoordinates(@element, @element.selectionStart)
+
     # In whole-field positioning, we don't move the container and make it the
     # full width of the field.
-    # TODO allow this to render top as well, and possibly used in textareas?
     if rule? and isWholeField(rule)
       pos =
         left: position.left
-        top: position.top + @$element.outerHeight() # position.offsetHeight
         width: @$element.outerWidth()               # position.offsetWidth
-
     else # Normal positioning, at token word
-      offset = getCaretCoordinates(@element, @element.selectionStart)
       pos =
         left: position.left + offset.left
 
-      # Position menu from top (above) or from bottom of caret (below, default)
-      if @position is "top"
-        pos.bottom = @$element.offsetParent().height() - position.top - offset.top
-      else
-        pos.top = position.top + offset.top + parseInt(@$element.css('font-size'))
+    # Position menu from top (above) or from bottom of caret (below, default)
+    if @position is "top"
+      pos.bottom = @$element.offsetParent().height() - position.top - offset.top
+    else
+      pos.top = position.top + offset.top + parseInt(@$element.css('font-size'))
 
     @tmplInst.$(".-autocomplete-container").css(pos)
 

examples/pubsublocal/.meteor/versions

@@ -29,7 +29,7 @@ meteor@1.1.4
 meteor-platform@1.2.1
 minifiers@1.1.3
 minimongo@1.0.6
-mizzao:autocomplete@0.5.0
+mizzao:autocomplete@0.5.1
 mobile-status-bar@1.0.2
 mongo@1.0.11
 observe-sequence@1.0.4

examples/pubsublocal/client/client.js

@@ -6,28 +6,30 @@ Fruits = new Mongo.Collection(null);
 });
 
 Template.pubsub.helpers({
-  settings: {
-    position: 'bottom',
-    limit: 30,  // more than 20, to emphasize matches outside strings *starting* with the filter
-    rules: [
-      {
-        token: '@',
-        // string means a server-side collection; otherwise, assume a client-side collection
-        collection: 'BigCollection',
-        field: 'name',
-        options: '', // Use case-sensitive match to take advantage of server index.
-        template: Template.serverCollectionPill,
-        noMatchTemplate: Template.serverNoMatch
-      },
-      {
-        token: '!',
-        collection: Fruits,  // Mongo.Collection object means client-side collection
-        field: 'type',
-        // set to true to search anywhere in the field, which cannot use an index.
-        matchAll: true,  // 'ba' will match 'bar' and 'baz' first, then 'abacus'
-        template: Template.clientCollectionPill
-      }
-    ]
+  settings: function() {
+    return {
+      position: Session.get("position"),
+      limit: 30,  // more than 20, to emphasize matches outside strings *starting* with the filter
+      rules: [
+        {
+          token: '@',
+          // string means a server-side collection; otherwise, assume a client-side collection
+          collection: 'BigCollection',
+          field: 'name',
+          options: '', // Use case-sensitive match to take advantage of server index.
+          template: Template.serverCollectionPill,
+          noMatchTemplate: Template.serverNoMatch
+        },
+        {
+          token: '!',
+          collection: Fruits,  // Mongo.Collection object means client-side collection
+          field: 'type',
+          // set to true to search anywhere in the field, which cannot use an index.
+          matchAll: true,  // 'ba' will match 'bar' and 'baz' first, then 'abacus'
+          template: Template.clientCollectionPill
+        }
+      ]
+    }
   }
 });
 

examples/pubsublocal/client/options.html

@@ -0,0 +1,17 @@
+<template name="options">
+    <h2>Options</h2>
+
+    <ul>
+        <li>
+            <div class="radio">
+                Menu position:
+                <label class="radio-inline">
+                    <input type="radio" name="position" value="top" checked="{{position "top"}}"> top
+                </label>
+                <label class="radio-inline">
+                    <input type="radio" name="position" value="bottom" checked="{{position "bottom"}}"> bottom
+                </label>
+            </div>
+        </li>
+    </ul>
+</template>

examples/pubsublocal/client/options.js

@@ -0,0 +1,13 @@
+Session.setDefault("position", "top");
+
+Template.options.helpers({
+  position: function(arg) {
+    return Session.equals("position", arg);
+  }
+});
+
+Template.options.events({
+  "change input": function(e, t) {
+    Session.set(e.target.name, e.target.value);
+  }
+});

examples/pubsublocal/client/pubsublocal.html

@@ -11,6 +11,7 @@
         <div class="row">
             <div class="col-md-6">
             {{> pubsub}}
+            {{> options}}
             </div>
             <div class="col-md-6">
             {{> single}}
@@ -57,3 +58,4 @@ <h2>Tests to try</h2>
 <template name="serverNoMatch">
     <span class="text-danger">Nothing found on the server for <b>{{getFilter}}</b>!</span>
 </template>
+

examples/pubsublocal/client/single.js

@@ -1,18 +1,20 @@
 StandardLegends = new Mongo.Collection(null);
 
 Template.single.helpers({
-  settings: {
-    position: 'top',
-    limit: 10,
-    rules: [
-      {
-        // token: '',
-        collection: StandardLegends,
-        field: 'legend',
-        matchAll: true,
-        template: Template.standardLegends
-      }
-    ]
+  settings: function() {
+    return {
+      position: Session.get("position"),
+      limit: 10,
+      rules: [
+        {
+          // token: '',
+          collection: StandardLegends,
+          field: 'legend',
+          matchAll: true,
+          template: Template.standardLegends
+        }
+      ]
+    };
   },
   legends: function() {
     return StandardLegends.find();

package.js

@@ -1,7 +1,7 @@
 Package.describe({
   name: "mizzao:autocomplete",
   summary: "Client/server autocompletion designed for Meteor's collections and reactivity",
-  version: "0.5.0",
+  version: "0.5.1",
   git: "https://github.com/mizzao/meteor-autocomplete.git"
 });