Bowerize Rrose.

GPavlovic · Dec 8, 2015 · 04fac08 · 04fac08
1 parent df4926f
commit 04fac08
Show file tree

Hide file tree

Showing 3 changed files with 283 additions and 0 deletions.
diff --git a/bower.json b/bower.json
@@ -0,0 +1,29 @@
+{
+  "name": "rrose",
+  "version": "0.2.0",
+  "homepage": "https://github.com/erictheise/rrose",
+  "authors": [
+    "Eric Theise <[email protected]>"
+  ],
+  "description": "Rrose: A Leaflet Plugin for Edge Cases",
+  "main": [
+    "./dist/leaflet.rrose.css",
+    "./dist/leaflet.rrose-src.js"
+  ],
+  "keywords": [
+    "Leaflet",
+    "Popup",
+    "Orientation"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "leaflet": ">0.7.2"
+  }
+}
diff --git a/dist/leaflet.rrose-src.js b/dist/leaflet.rrose-src.js
@@ -0,0 +1,115 @@
+/*
+  Copyright (c) 2012 Eric S. Theise
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated 
+  documentation files (the "Software"), to deal in the Software without restriction, including without limitation the 
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit 
+  persons to whom the Software is furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the 
+  Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE 
+  WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 
+  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR 
+  OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+*/
+
+L.Rrose = L.Popup.extend({
+
+  _initLayout:function () {
+    var prefix = 'leaflet-rrose',
+      container = this._container = L.DomUtil.create('div', prefix + ' ' + this.options.className + ' leaflet-zoom-animated'),
+      closeButton, wrapper;
+
+    if (this.options.closeButton) {
+      closeButton = this._closeButton = L.DomUtil.create('a', prefix + '-close-button', container);
+      closeButton.href = '#close';
+      closeButton.innerHTML = '&#215;';
+
+      L.DomEvent.on(closeButton, 'click', this._onCloseButtonClick, this);
+    }
+
+    // Set the pixel distances from the map edges at which popups are too close and need to be re-oriented.
+    var x_bound = 80, y_bound = 80;
+    // Determine the alternate direction to pop up; north mimics Leaflet's default behavior, so we initialize to that.
+    this.options.position = 'n';
+    // Then see if the point is too far north...
+    var y_diff = y_bound - this._map.latLngToContainerPoint(this._latlng).y;
+    if (y_diff > 0) {
+      this.options.position = 's'
+    }
+    // or too far east...
+    var x_diff = this._map.latLngToContainerPoint(this._latlng).x - (this._map.getSize().x - x_bound);
+    if (x_diff > 0) {
+      this.options.position += 'w'
+    } else {
+    // or too far west.
+      x_diff = x_bound - this._map.latLngToContainerPoint(this._latlng).x;
+      if (x_diff > 0) {
+        this.options.position += 'e'
+      }
+    }
+
+    // Create the necessary DOM elements in the correct order. Pure 'n' and 's' conditions need only one class for styling, others need two.
+    if (/s/.test(this.options.position)) {
+      if (this.options.position === 's') {
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
+      } 
+      else {
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
+      }
+      this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
+      L.DomEvent.disableClickPropagation(wrapper);
+      this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+      L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
+    } 
+    else {
+      if (this.options.position === 'n') {
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper', container);
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container', container);
+      } 
+      else {
+        wrapper = this._wrapper = L.DomUtil.create('div', prefix + '-content-wrapper' + ' ' + prefix + '-content-wrapper-' + this.options.position, container);
+        this._tipContainer = L.DomUtil.create('div', prefix + '-tip-container' + ' ' + prefix + '-tip-container-' + this.options.position, container);
+      }
+      L.DomEvent.disableClickPropagation(wrapper);
+      this._contentNode = L.DomUtil.create('div', prefix + '-content', wrapper);
+      L.DomEvent.on(this._contentNode, 'mousewheel', L.DomEvent.stopPropagation);
+      this._tip = L.DomUtil.create('div', prefix + '-tip' + ' ' + prefix + '-tip-' + this.options.position, this._tipContainer);
+    }
+
+  },
+
+  _updatePosition:function () {
+    var pos = this._map.latLngToLayerPoint(this._latlng),
+      is3d = L.Browser.any3d,
+      offset = this.options.offset;
+
+    if (is3d) {
+      L.DomUtil.setPosition(this._container, pos);
+    }
+
+    if (/s/.test(this.options.position)) {
+      this._containerBottom = -this._container.offsetHeight + offset.y - (is3d ? 0 : pos.y);
+    } else {
+      this._containerBottom = -offset.y - (is3d ? 0 : pos.y);
+    }
+
+    if (/e/.test(this.options.position)) {
+      this._containerLeft = offset.x + (is3d ? 0 : pos.x);
+    } 
+    else if (/w/.test(this.options.position)) {
+      this._containerLeft = -Math.round(this._containerWidth) + offset.x + (is3d ? 0 : pos.x);
+    } 
+    else {
+      this._containerLeft = -Math.round(this._containerWidth / 2) + offset.x + (is3d ? 0 : pos.x);
+    }
+
+    this._container.style.bottom = this._containerBottom + 'px';
+    this._container.style.left = this._containerLeft + 'px';
+  }
+
+});
diff --git a/dist/leaflet.rrose.css b/dist/leaflet.rrose.css
@@ -0,0 +1,139 @@
+/* Rrose layout */
+
+.leaflet-rrose {
+    position: absolute;
+    text-align: center;
+}
+
+.leaflet-rrose-content-wrapper {
+    padding: 1px;
+    text-align: left;
+}
+
+.leaflet-rrose-content {
+    margin: 14px 20px;
+}
+
+.leaflet-rrose-tip-container {
+    margin: 0 auto;
+    width: 40px;
+    height: 20px;
+    position: relative;
+    overflow: hidden;
+}
+
+.leaflet-rrose-tip-container-se, .leaflet-rrose-tip-container-ne {
+    margin-left: 0;
+}
+
+.leaflet-rrose-tip-container-sw, .leaflet-rrose-tip-container-nw {
+    margin-right: 0;
+}
+
+.leaflet-rrose-tip {
+    width: 15px;
+    height: 15px;
+    padding: 1px;
+
+    -moz-transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+.leaflet-rrose-tip-n {
+    margin: -8px auto 0;
+}
+
+.leaflet-rrose-tip-s {
+    margin: 11px auto 0;
+}
+
+.leaflet-rrose-tip-se {
+    margin: 11px 11px 11px -8px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-sw {
+    margin: 11px 11px 11px 32px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-ne {
+    margin: -8px 11px 11px -8px; overflow: hidden;
+}
+
+.leaflet-rrose-tip-nw {
+    margin: -8px 11px 11px 32px; overflow: hidden;
+}
+
+a.leaflet-rrose-close-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: 4px 5px 0 0;
+    text-align: center;
+    width: 18px;
+    height: 14px;
+    font: 16px/14px Tahoma, Verdana, sans-serif;
+    color: #c3c3c3;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+a.leaflet-rrose-close-button:hover {
+    color: #999;
+}
+
+.leaflet-rrose-content p {
+    margin: 18px 0;
+}
+
+.leaflet-rrose-scrolled {
+    overflow: auto;
+    border-bottom: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+}
+
+/* Visual appearance */
+
+.leaflet-rrose-content-wrapper, .leaflet-rrose-tip {
+    background: white;
+
+    box-shadow: 0 3px 10px #888;
+    -moz-box-shadow: 0 3px 10px #888;
+    -webkit-box-shadow: 0 3px 14px #999;
+}
+
+.leaflet-rrose-content-wrapper {
+    -moz-border-radius:    20px;
+    -webkit-border-radius: 20px;
+    border-radius:         20px;
+}
+
+.leaflet-rrose-content-wrapper-se {
+    -moz-border-radius:    0 20px 20px 20px;
+    -webkit-border-radius: 0 20px 20px 20px;
+    border-radius:         0 20px 20px 20px;
+}
+
+.leaflet-rrose-content-wrapper-sw {
+    -moz-border-radius:    20px 0 20px 20px;
+    -webkit-border-radius: 20px 0 20px 20px;
+    border-radius:         20px 0 20px 20px;
+}
+
+.leaflet-rrose-content-wrapper-nw, .leaflet-rrose-content-wrapper-w {
+    -moz-border-radius:    20px 20px 0 20px;
+    -webkit-border-radius: 20px 20px 0 20px;
+    border-radius:         20px 20px 0 20px;
+}
+
+.leaflet-rrose-content-wrapper-ne, .leaflet-rrose-content-wrapper-e {
+    -moz-border-radius:    20px 20px 20px 0;
+    -webkit-border-radius: 20px 20px 20px 0;
+    border-radius:         20px 20px 20px 0;
+}
+
+.leaflet-rrose-content {
+    font: 12px/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
+}