Fixes issue #7

- Renamed position to placement. - Added backwards compatibility check to support version 1.0.0. - Updated the examples to use the new placement property. - Updated the readme to reflect the changes. - Fixed some typos.
atmist · Mar 8, 2017 · 5d0a55d · 5d0a55d
1 parent 2082cb4
commit 5d0a55d
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 51 deletions.
diff --git a/README.md b/README.md
@@ -14,8 +14,8 @@ Open sourced by the people that created [Snazzy Maps](https://snazzymaps.com).
   - Supports SCSS styling.
 - **Dynamic content**
   - Supports dynamic content after initialization with proper resizing.
-- **Multiple positions**
-  - Position the info window to the top, bottom, right, or left of the marker.
+- **Multiple placements**
+  - Place the info window to the top, bottom, right, or left of the marker.
 
 ## Examples
 
@@ -72,7 +72,7 @@ Will attempt to close the info window.
 #### destroy()
 
 Will destroy the info window. If the info window is open it will be forced
-closed bypassing the regular `beforeClose` callback. All google map event
+closed bypassing the regular `beforeClose` callback. All Google Map event
 listeners associated to this info window will be removed.
 
 #### setContent(content)
@@ -91,7 +91,7 @@ The text or DOM Element to insert into the info window body.
 
 - Type: _string_ or _DOM Element_
 
-#### position
+#### placement
 
 Choose where you want the info window to be displayed, relative to the marker.
 
@@ -122,8 +122,8 @@ The max height in pixels of the info window.
 
 #### offset
 
-The offset from the marker. This value should be different for each `position`.
-By default the offset is configured for the default google maps marker.
+The offset from the marker. This value should be different for each `placement`.
+By default the offset is configured for the default Google Maps marker.
 
 - Type: _object_
 - Example:
@@ -238,7 +238,7 @@ completely remove the shadow.
 #### openOnMarkerClick
 
 Determines if the info window will open when the marker is clicked. An internal
-listener is added to the google maps `click` event which calls the `open()`
+listener is added to the Google Maps `click` event which calls the `open()`
 method.
 
 - Type: _boolean_
@@ -247,8 +247,8 @@ method.
 #### closeOnMapClick
 
 Determines if the info window will close when the map is clicked. An internal
-listener is added to the google maps `click` event which calls the `close()`
-method. This will not activate on the google maps `drag` event when the user is
+listener is added to the Google Maps `click` event which calls the `close()`
+method. This will not activate on the Google Maps `drag` event when the user is
 panning the map.
 
 - Type: _boolean_
@@ -408,14 +408,14 @@ be removed from the DOM.
 
 #### si-float-wrapper
 
-Used to absolute position the info window in the google maps floatPane.
+Used to absolute position the info window in the Google Maps floatPane.
 
-#### si-wrapper-`position`
+#### si-wrapper-`placement`
 
-Used to css translate the info window into `position`. The `wrapperClass`
+Used to css translate the info window into the `placement`. The `wrapperClass`
 is added to this element's class list.
 
-#### si-shadow-wrapper-`position`
+#### si-shadow-wrapper-`placement`
 
 Used to blend opacity for all shadow elements. This div will not be included if
 `shadow` is `false`.
@@ -425,12 +425,12 @@ Used to blend opacity for all shadow elements. This div will not be included if
 Used to create the box shadow for the content wrapper. This element will not be
 included if `shadow` is `false`.
 
-#### si-shadow-pointer-`position`
+#### si-shadow-pointer-`placement`
 
-Used to `position` the pointer shadow. This element will not be included if
+Used to show the pointer shadow in the `placement`. This element will not be included if
 `shadow` or `pointer` is `false`.
 
-#### si-shadow-inner-pointer-`position`
+#### si-shadow-inner-pointer-`placement`
 
 Used to create the shadow for the pointer. This element will not be included if
 `shadow` or `pointer` is `false`.
@@ -448,12 +448,12 @@ element will not be included if `showCloseButton` is `false`.
 
 Used for wrapping your content and showing a scroll bar when there is overflow.
 
-#### si-pointer-border-`position`
+#### si-pointer-border-`placement`
 
 Used for rendering the tip of the pointer when there is a border present.
 This element will not be included if `pointer` or `border` is `false`.
 
-#### si-pointer-bg-`position`
+#### si-pointer-bg-`placement`
 
 Used for rendering the inner tip of the pointer when there is a border present.
 This element will not be included if `pointer` is `false`.

diff --git a/examples/README.md b/examples/README.md
@@ -16,7 +16,7 @@ One marker with default settings.
 
 ## multiple-markers
 
-Multiple markers with different positions.
+Multiple markers with different placements.
 
 ![Screenshot][multiple-screenshot]
 

diff --git a/examples/js-styles/scripts.js b/examples/js-styles/scripts.js
@@ -18,7 +18,7 @@ $(function() {
     // Add a Snazzy Info Window to the marker
     var info = new SnazzyInfoWindow({
         marker: marker,
-        position: 'right',
+        placement: 'right',
         offset: {
             left: '20px'
         },

diff --git a/examples/multiple-markers/scripts.js b/examples/multiple-markers/scripts.js
@@ -9,22 +9,22 @@ $(function() {
         return { lat: center.lat + dx, lng: center.lng + dy };
     };
     var dx = 0.003;
-    var positions = [
+    var placements = [
         { type: 'top', LatLng: offsetCenter(dx, 0) },
         { type: 'right', LatLng: offsetCenter(0, dx) },
         { type: 'bottom', LatLng: offsetCenter(-dx, 0) },
         { type: 'left', LatLng: offsetCenter(0, -dx) }
     ];
 
-    $.each(positions, function(i, e) {
+    $.each(placements, function(i, e) {
         var marker = new google.maps.Marker({
             map: map,
             draggable: true,
             position: e.LatLng
         });
         var info = new SnazzyInfoWindow($.extend({}, {
             marker: marker,
-            position: e.type,
+            placement: e.type,
             content: e.type,
             panOnOpen: false
         }));

diff --git a/src/snazzy-info-window.js b/src/snazzy-info-window.js
@@ -10,7 +10,7 @@ const _defaultShadow = {
     color: '#000'
 };
 const _defaultOptions = {
-    position: 'top',
+    placement: 'top',
     pointer: true,
     openOnMarkerClick: true,
     closeOnMapClick: true,
@@ -85,8 +85,8 @@ function setHTML(container, content) {
     }
 }
 
-// Get the opposite of a given position
-function oppositePosition(p) {
+// Get the opposite of a given placement
+function oppositePlacement(p) {
     if (p === 'top') {
         return 'bottom';
     } else if (p === 'bottom') {
@@ -99,8 +99,8 @@ function oppositePosition(p) {
     return p;
 }
 
-// Return the position with the first letter capitalized
-function capitalizePosition(p) {
+// Return the placement with the first letter capitalized
+function capitalizePlacement(p) {
     return p.charAt(0).toUpperCase() + p.slice(1);
 }
 
@@ -125,15 +125,27 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
             });
         }
 
-        // Validate the options
-        let p = this._opts.position;
-        if (p) {
+        // Validate the placement option
+        let p = opts.placement || this._opts.position;
+        // The position variable was renamed to placement so we must type check
+        if (typeof p === 'string' || p instanceof String) {
             p = p.toLowerCase();
         }
         if (p !== 'top' && p !== 'bottom' &&
             p !== 'left' && p !== 'right') {
-            this._opts.position = _defaultOptions.position;
+            this._opts.placement = _defaultOptions.placement;
+        } else {
+            this._opts.placement = p;
         }
+
+        // Validate the position option
+        p = this._opts.position;
+        if (p !== undefined && p !== null &&
+            typeof p !== 'string' && !(p instanceof String)) {
+            this._opts.position = p;
+        }
+
+        // Validate the other options
         if (this._opts.border === undefined || this._opts.border === true) {
             this._opts.border = {};
         }
@@ -147,8 +159,8 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
 
     // Activate the specified callback and return the result
     activateCallback(callback) {
-        const lamda = this._callbacks[callback];
-        return lamda ? lamda.apply(this) : undefined;
+        const lambda = this._callbacks[callback];
+        return lambda ? lambda.apply(this) : undefined;
     }
 
     // Will clear all listeners that are used during the open state.
@@ -234,7 +246,7 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         if (bg) {
             this._html.contentWrapper.style.backgroundColor = bg;
             if (this._opts.pointer) {
-                this._html.pointerBg.style[`border${capitalizePosition(this._opts.position)}Color`] = bg;
+                this._html.pointerBg.style[`border${capitalizePlacement(this._opts.placement)}Color`] = bg;
             }
         }
         // 3. Padding
@@ -296,17 +308,17 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
                 this._html.pointerBg.style.borderWidth =
                     (pLength.value - triangleDiff) + pLength.units;
 
-                const reverseP = capitalizePosition(oppositePosition(this._opts.position));
+                const reverseP = capitalizePlacement(oppositePlacement(this._opts.placement));
                 this._html.pointerBg.style[`margin${reverseP}`] =
                     triangleDiff + bWidth.units;
-                this._html.pointerBg.style[this._opts.position] =
+                this._html.pointerBg.style[this._opts.placement] =
                     -bWidth.value + bWidth.units;
             }
             const color = this._opts.border.color;
             if (color) {
                 this._html.contentWrapper.style.borderColor = color;
                 if (this._html.pointerBorder) {
-                    this._html.pointerBorder.style[`border${capitalizePosition(this._opts.position)}Color`] = color;
+                    this._html.pointerBorder.style[`border${capitalizePlacement(this._opts.placement)}Color`] = color;
                 }
             }
         }
@@ -383,7 +395,7 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
 
         // 1. Create the wrapper
         this._html.wrapper = newElement(
-            `wrapper-${this._opts.position}`
+            `wrapper-${this._opts.placement}`
         );
         if (this._opts.wrapperClass) {
             this._html.wrapper.className += ` ${this._opts.wrapperClass}`;
@@ -395,7 +407,7 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         // 2. Create the shadow
         if (this._opts.shadow) {
             this._html.shadowWrapper = newElement(
-                `shadow-wrapper-${this._opts.position}`
+                `shadow-wrapper-${this._opts.placement}`
             );
             this._html.shadowFrame = newElement(
                 'frame',
@@ -405,10 +417,10 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
 
             if (this._opts.pointer) {
                 this._html.shadowPointer = newElement(
-                    `shadow-pointer-${this._opts.position}`
+                    `shadow-pointer-${this._opts.placement}`
                 );
                 this._html.shadowPointerInner = newElement(
-                    `shadow-inner-pointer-${this._opts.position}`
+                    `shadow-inner-pointer-${this._opts.placement}`
                 );
                 this._html.shadowPointer.appendChild(this._html.shadowPointerInner);
                 this._html.shadowWrapper.appendChild(this._html.shadowPointer);
@@ -450,14 +462,14 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         if (this._opts.pointer) {
             if (this._opts.border) {
                 this._html.pointerBorder = newElement(
-                    `pointer-${this._opts.position}`,
-                    `pointer-border-${this._opts.position}`
+                    `pointer-${this._opts.placement}`,
+                    `pointer-border-${this._opts.placement}`
                 );
                 this._html.wrapper.appendChild(this._html.pointerBorder);
             }
             this._html.pointerBg = newElement(
-                `pointer-${this._opts.position}`,
-                `pointer-bg-${this._opts.position}`
+                `pointer-${this._opts.placement}`,
+                `pointer-bg-${this._opts.placement}`
             );
             this._html.wrapper.appendChild(this._html.pointerBg);
         }
@@ -565,7 +577,7 @@ export default class SnazzyInfoWindow extends google.maps.OverlayView {
         return mib;
     }
 
-    // Pan the google map such that the info window is visible
+    // Pan the Google Map such that the info window is visible
     reposition() {
         if (!this._opts.panOnOpen || !this._html) {
             return;

diff --git a/test/scripts/index.js b/test/scripts/index.js
@@ -14,7 +14,7 @@ $(function() {
 
     var infowindow = new SnazzyInfoWindow({
         marker: marker,
-        position: 'top',
+        placement: 'top',
         //content: 'Testing',
         content: '<div><h1>Snazzy Info Windows</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam.</p></div>',
         maxWidth: 400,

diff --git a/test/scripts/multi.js b/test/scripts/multi.js
@@ -9,13 +9,13 @@ $(function(){
         mapTypeId: google.maps.MapTypeId.ROADMAP
     });
     var dx = 0.003;
-    var positions = [
+    var placements = [
         { type: 'top', LatLng: offsetCenter(dx, 0) },
         { type: 'right', LatLng: offsetCenter(0, dx) },
         { type: 'bottom', LatLng: offsetCenter(-dx, 0) },
         { type: 'left', LatLng: offsetCenter(0, -dx) }
     ];
-    $.each(positions, function(i, e){
+    $.each(placements, function(i, e){
         var marker = new google.maps.Marker({
             map: map,
             draggable: true,
@@ -24,7 +24,7 @@ $(function(){
         });
         var info = new SnazzyInfoWindow($.extend({}, {
             marker: marker,
-            position: e.type,
+            placement: e.type,
             content: '<div><h1>Snazzy Info Windows</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ex ipsum, porta ut felis sit amet, porttitor laoreet neque. Maecenas vel lacinia quam.</p></div>',
             maxHeight: 200,
             maxWidth: 200,