Merge pull request #8 from atmist/1.1.0

1.1.0
atmist · Mar 9, 2017 · a20124c · a20124c
2 parents 2082cb4 + c5ccb60
commit a20124c
Show file tree

Hide file tree

Showing 12 changed files with 273 additions and 91 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@
 /test/scripts/snazzy-info-window.min.js
 /test/css/snazzy-info-window.min.css.map
 /test/css/snazzy-info-window.min.css
+/.vscode
diff --git a/README.md b/README.md
@@ -14,14 +14,15 @@ 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
 
 - [Simple](/examples#simple)
 - [Multiple markers](/examples#multiple-markers)
 - [Dynamic content](/examples#dynamic-content)
+- [Set position](/examples#set-position)
 - [Styling with SCSS](/examples#scss-styles)
 - [Styling with JavaScript](/examples#js-styles)
 - [Complex styling](/examples#complex-styles)
@@ -69,36 +70,68 @@ Will attempt to open the info window.
 
 Will attempt to close the info window.
 
+#### isOpen()
+
+Determines if the info window is open.
+
 #### 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)
 
 Set the content in the info window. This can be called at any time.
 
+- Parameter: `content`
+  - _string_ or _DOM Element_
+
+#### setPosition(latLng)
+
+Set the `position` of the info window. A valid Google Map instance must be associated to the info window. This could be either through the `marker` or `map` option.
+
+- Parameter: `latLng`
+  - _[LatLng]_ or _[LatLngLiteral]_
+
 #### getWrapper()
 
 Will return the DOM Element for the wrapper container of the info window.
 
 ## Options
 
+#### marker
+
+The Google Maps marker associated to this info window.
+
+- Type: _[Marker]_
+
 #### content
 
 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.
 
 - Type: _string_
 - Default: `'top'`
 - Possible Values: `'top'`, `'bottom'`, `'left'`, `'right'`
 
+#### map
+
+The Google Map associated to this info window. Only required if you are not using a `marker`.
+
+- Type: _[Map]_
+
+#### position
+
+The latitude and longitude where the info window is anchored. The `offset` will default to `0px` when using this option. Only required if you are not using a `marker`.
+
+- Type: _[LatLng]_ or _[LatLngLiteral]_
+
 #### wrapperClass
 
 An optional CSS class to assign to the wrapper container of the info window. Can be
@@ -122,8 +155,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 +271,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,13 +280,20 @@ 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_
 - Default: `true`
 
+#### closeWhenOthersOpen
+
+Determines if the info window will close when any other Snazzy Info Window is opened.
+
+- Type: _boolean_
+- Default: `false`
+
 #### showCloseButton
 
 Determines if the info window will show a close button.
@@ -408,14 +448,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 +465,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 +488,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`.
@@ -464,3 +504,9 @@ This element will not be included if `pointer` is `false`.
 If you find a bug with the library, please open an issue. If you would like fix
 an issue or contribute a feature, follow the steps outlined
 [here](./CONTRIBUTING.md).
+
+
+[LatLng]: https://developers.google.com/maps/documentation/javascript/reference#LatLng
+[LatLngLiteral]: https://developers.google.com/maps/documentation/javascript/reference#LatLngLiteral
+[Marker]: https://developers.google.com/maps/documentation/javascript/reference#Marker
+[Map]: https://developers.google.com/maps/documentation/javascript/reference#Map
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]
 
@@ -36,6 +36,17 @@ Content which is loaded using a handlebars template and updated through an inter
 [dynamic-content-screenshot]: dynamic-content/screenshot.png "Dynamic Content Screenshot"
 [dynamic-content]: https://rawgit.com/atmist/snazzy-info-window/master/examples/dynamic-content/index.html
 
+## set-position
+
+Change the position of the info window by clicking on the map.
+
+![Screenshot][set-position-screenshot]
+
+[View live example][set-position]
+
+[set-position-screenshot]: set-position/screenshot.png "Set Position Screenshot"
+[set-position]: https://rawgit.com/atmist/snazzy-info-window/master/examples/set-position/index.html
+
 ## scss-styles
 
 Styling the Snazzy Info Window with SCSS.

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/examples/set-position/index.html b/examples/set-position/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Snazzy Info Window</title>
+        <link rel="stylesheet" href="../../dist/snazzy-info-window.min.css">
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
+        <script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
+        <script src="../../dist/snazzy-info-window.min.js"></script>
+        <script src="scripts.js"></script>
+        <style>
+            /* Styles that make the map full-screen */
+            html, body {
+                height: 100%;
+                margin: 0;
+            }
+
+            .map-canvas {
+                height: 100%;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="map-canvas">
+        </div>
+    </body>
+</html>
diff --git a/examples/set-position/screenshot.png b/examples/set-position/screenshot.png
diff --git a/examples/set-position/scripts.js b/examples/set-position/scripts.js
@@ -0,0 +1,21 @@
+$(function() {
+    var map = new google.maps.Map($('.map-canvas')[0], {
+        zoom: 14,
+        center: new google.maps.LatLng(40.72, -74),
+        clickableIcons: false
+    });
+    var info = new SnazzyInfoWindow({
+        map: map,
+        position: new google.maps.LatLng(40.72, -74),
+        closeOnMapClick: false,
+        content: 'Click anywhere on the map to change my position!'
+    });
+
+    map.addListener('click', function(e) {
+        info.setPosition(e.latLng);
+        if (!info.isOpen()) {
+            info.open();
+        }
+    });
+    info.open();
+});
diff --git a/package.json b/package.json
@@ -32,34 +32,36 @@
   "license": "MIT",
   "devDependencies": {
     "babel-plugin-add-module-exports": "^0.2.1",
-    "babel-plugin-transform-es2015-modules-umd": "^6.12.0",
-    "babel-preset-es2015": "^6.16.0",
-    "eslint": "^3.9.1",
-    "eslint-config-airbnb-base": "^10.0.1",
+    "babel-plugin-transform-es2015-modules-umd": "^6.23.0",
+    "babel-preset-es2015": "^6.22.0",
+    "eslint": "^3.17.1",
+    "eslint-config-airbnb-base": "^11.1.1",
     "eslint-config-es5": "^0.5.0",
     "eslint-plugin-import": "^2.2.0",
     "gulp": "^3.9.1",
     "gulp-add-src": "^0.2.0",
     "gulp-autoprefixer": "^3.1.1",
     "gulp-babel": "^6.1.2",
-    "gulp-bump": "^2.4.0",
+    "gulp-bump": "^2.7.0",
     "gulp-eslint": "^3.0.1",
-    "gulp-filter": "^4.0.0",
-    "gulp-git": "^1.12.0",
+    "gulp-filter": "^5.0.0",
+    "gulp-git": "^2.0.1",
     "gulp-help": "^1.6.1",
-    "gulp-if": "^2.0.1",
+    "gulp-if": "^2.0.2",
     "gulp-rename": "^1.2.2",
-    "gulp-sass": "^2.3.2",
-    "gulp-sass-lint": "^1.2.0",
-    "gulp-sourcemaps": "^2.2.0",
+    "gulp-sass": "^3.1.0",
+    "gulp-sass-lint": "^1.3.2",
+    "gulp-sourcemaps": "^2.4.1",
     "gulp-tag-version": "^1.3.0",
-    "gulp-uglify": "^2.0.0",
+    "gulp-uglify": "^2.1.0",
     "gulp-uglifycss": "^1.0.6",
-    "merge-stream": "^1.0.0",
-    "yargs": "^6.3.0"
+    "merge-stream": "^1.0.1",
+    "npm-check-updates": "^2.10.3",
+    "yargs": "^7.0.1"
   },
   "scripts": {
     "gulp": "gulp",
+    "update-modules": "npm update --save-dev && npm-check-updates -u",
     "clean": "rimraf ./node_modules"
   }
 }