diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..917238e --- /dev/null +++ b/bower.json @@ -0,0 +1,29 @@ +{ + "name": "rrose", + "version": "0.2.0", + "homepage": "https://github.com/erictheise/rrose", + "authors": [ + "Eric Theise " + ], + "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 new file mode 100644 index 0000000..b3ffccf --- /dev/null +++ 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 = '×'; + + 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 new file mode 100644 index 0000000..0b178d2 --- /dev/null +++ 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; +}