Permalink
Browse files

first

  • Loading branch information...
tristen
tristen committed Feb 21, 2012
0 parents commit 485f2c87702cc584ed449e23581858159817d26f
Showing with 197 additions and 0 deletions.
  1. +106 −0 index.html
  2. +70 −0 wax/modal.js
  3. +14 −0 wax/modestmaps.min.js
  4. +7 −0 wax/wax.mm.min.js
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset=utf-8 />
+<title>Modal component for wax.mm.js</title>
+<script src='wax/modestmaps.min.js'></script>
+<script src='wax/wax.mm.min.js'></script>
+<script src='wax/modal.js'></script>
+<script>
+ var mm = com.modestmaps;
+ var url = 'http://api.tiles.mapbox.com/v3/yhahn.mapbox-streets-dev.jsonp';
+ wax.tilejson(url, function(tilejson) {
+ m = new mm.Map('map',
+ new wax.mm.connector(tilejson), null, [
+ new mm.MouseHandler(),
+ new mm.TouchHandler()
+ ]
+ );
+ var form = 'Here is some Modal content';
+ wax.mm.modal(m, form, {
+ linkTitle: 'Click me'
+ }).appendTo(m.parent);
+ m.setCenterZoom(new mm.Location(43.64828710639889,-79.44826701562498), 16);
+ });
+</script>
+<style>
+.map-tile-loaded {
+ -webkit-animation-name: 'fade-in';
+ -webkit-animation-timing-function: ease-in;
+ -webkit-animation-duration: .25s;
+ }
+ @-webkit-keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
+a.wax-modal {
+ position: absolute;
+ bottom: 5px;
+ font-size: 11px;
+ z-index: 100;
+ right: 10px;
+ background: rgb(255,255,255);
+ background: rgba(255,255,255,0.65);
+ padding: 1px 5px;
+ color: #404040;
+ display: block;
+ text-decoration: none;
+ }
+ a.wax-modal:active {
+ background: #fdfdfd;
+ box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+ -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+ -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+ }
+
+.wax-modal-box {
+ background: #fff;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ border: 1px solid #ccc;
+ position: absolute;
+ height: 95%;
+ width: 640px;
+ height: 400px;
+ overflow: auto;
+ left: 50%;
+ margin: 0 0 0 -320px;
+ z-index: 1000;
+ top: 10px;
+ }
+ .wax-modal-box a#close {
+ background: #fff;
+ color: #000;
+ -moz-box-shadow: rgba(0, 0, 0, 0.1) 0 0 2px 0;
+ -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 0 2px 0;
+ box-shadow: rgba(0, 0, 0, 0.1) 0 0 2px 0;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ font-weight: bold;
+ text-decoration: none;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+ border-radius: 3px;
+ display: block;
+ width: 20px;
+ height: 20px;
+ font-size: 20px;
+ line-height: 15px;
+ text-align: center;
+ }
+ .wax-modal-box a#close:hover,
+ .wax-modal-box a#close:active {
+ background:#f3f2f3;
+ }
+#map {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ top: 0;
+ left: 0;
+ }
+</style>
+</head>
+<body>
+ <div id='map'></div>
+</body>
+</html>
@@ -0,0 +1,70 @@
+wax = wax || {};
+wax.mm = wax.mm || {};
+
+// modal
+// --------
+// A light modal component
+// modal takes in three parameters: a map object,
+// a template to attach dom elements to the popup and
+// an options object that accepts an attachForm
+// and callback value.
+wax.mm.modal = function(map, template, options) {
+ var mm = com.modestmaps;
+ var t = template || '';
+
+ var modal = {};
+ modal.options = options || {}
+ var active, modalPopup;
+
+ var modalLink = document.createElement('a');
+ modalLink.href = '#modal';
+ modalLink.className = 'wax-modal';
+ modalLink.innerHTML = modal.options.linkTitle || 'Info';
+
+ var closeLink = '<a href="#" id="close">&times;</a>';
+
+ mm.addEvent(modalLink, 'click', function(e) {
+ mm.cancelEvent(e);
+ if (!active) {
+ modalPopup = document.createElement('div');
+ modalPopup.className = 'wax-modal-box';
+ modalPopup.innerHTML = closeLink + t;
+ modal.options.attachForm ? modal.options.attachForm.appendChild(modalPopup) : map.parent.appendChild(modalPopup);
+ active = true;
+ modal.closemodal();
+ } else {
+ map.parent.removeChild(modalPopup);
+ active = false;
+ }
+ modal.callback();
+ });
+
+ modal.callback = function() {
+ if (modal.options.callback && typeof(modal.options.callback) === 'function') { modal.options.callback(); }
+ }
+
+ modal.closeEvents = function() {
+ modal.options.attachForm ? modal.options.attachForm.removeChild(modalPopup) : map.parent.removeChild(modalPopup);
+ modal.callback();
+ active = false;
+ }
+
+ modal.closemodal = function() {
+ var close = document.getElementById('close');
+ mm.addEvent(close, 'click', function(e) {
+ mm.cancelEvent(e);
+ modal.closeEvents();
+ });
+ mm.addEvent(document, 'keydown', function(e) {
+ if (e.keyCode === 27 && active) {
+ modal.closeEvents();
+ }
+ });
+ };
+
+ modal.appendTo = function(elem) {
+ wax.util.$(elem).appendChild(modalLink);
+ return this;
+ };
+ return modal;
+};
Oops, something went wrong.

0 comments on commit 485f2c8

Please sign in to comment.