Permalink
Browse files

Add share control

  • Loading branch information...
1 parent d09c4a6 commit 364ef03f3903eb09b27efe0e43e60efa5ee4bead @ansis ansis committed Aug 15, 2012
Showing with 212 additions and 0 deletions.
  1. +112 −0 css/mapbox.share.css
  2. +95 −0 ext/mapbox.share.js
  3. +5 −0 index.html
View
112 css/mapbox.share.css
@@ -0,0 +1,112 @@
+/* ### General control styles ### */
+ .map-share div,
+ .map-share .twitter,
+ .map-share .facebook {
+ display:block;
+ position:absolute;
+ border:1px solid #ccc;
+ background:#fff;
+ border-radius:3px;
+ -moz-border-radius:3px;
+ -webkit-border-radius:3px;
+ box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+ -moz-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+ -webkit-box-shadow:rgba(0,0,0,0.1) 0px 1px 3px;
+ }
+
+/* ### Zoomer, close buttons, share ### */
+ .map-share .close {
+ position: absolute;
+ text-indent:-9999px;
+ background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAeCAYAAADO4udXAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAHFSURBVHic7dpBbsIwEAXQoZpbwKKz8Bm66EFyjUicI1KuwUF6Ci/cBbmFJbqoLbluJezgMSn8JyGhJMRAvmZiw+5yuRBAay/3fgPwmBAsUIFggQoEC1QgWKACwQIVCBaoQLCgiIiMIjKWHo9gbVy4oJ/po9e42fPiUBERcemBxpiD935i5qO19ly6rzUR+SAics69a46zFc65WUSIKi9sA2MYN449O+fm0hcXVyzv/UREb977kzHmELeHUJ3Cvqn0fDfYhwfoi5WqKlREFRWLmY8hQPsQroGIKG4jooWZjzWDw3VJG4oXtnflWqU4WNbaszFmSMMVdsVQDdpt8NmkoYoVI2lPPY0iQjVVa1f774ak9cV2pBqqcE91rfUtre+57jGuiIxJgFa3oS0orljQxU03zGv8NeNzzr3eet6qipVVqyVs7toK43S7xYffmmwpoVulysPV4rstnhXmoWLmgZkH+g7YPp8twnOrXW74UZ2stecsXD2WG55F1Ur3Wtmss1mFrF1u+LUImswWp07LDcv1Q/6n3u1dc9ZZPSuExxErosa9HIIFKvAjNKhAsEAFggUqECxQgWCBCgQLVCBYoALBAhVfpi7sxwlEhWYAAAAASUVORK5CYII=);
+ background-repeat:no-repeat;
+ overflow:hidden;
+ background-position:-6px -6px;
+ top:4px;
+ right:4px;
+ width:18px;
+ height:18px;
+ }
+
+ .map-share .close:active {
+ border-color:#bbb;
+ background-color:#ddd;
+ box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+ -moz-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+ -webkit-box-shadow:inset rgba(0,0,0,0.1) 0px 1px 3px;
+ }
+
+ .share {
+ clear:left;
+ left:10px;
+ top:10px;
+ width:57px;
+ height:18px;
+ font:bold 10px/18px Arial,sans-serif;
+ text-align:center;
+ text-transform:uppercase;
+ background:#333;
+ background:rgba(32,32,32,0.75);
+ border-color:#666;
+ border-color:rgba(128,128,128,0.75);
+ border-radius: 3px;
+ color:#fff;
+ position: absolute;
+ left: 11px;
+ top: 45px;
+ }
+
+
+/* ### Share ### */
+ .map-share {
+ background:#666;
+ background:rgba(32,32,32,0.75);
+ position:absolute;
+ width:100%;
+ height:100%;
+ top:0px; left:0px; right:0px; bottom:0px;
+ z-index:999999;
+ }
+
+ .map-share div {
+ right:50%;
+ top:50%;
+ margin:-120px -180px 0px 0px;
+ padding:19px;
+ width:320px;
+ height:200px;
+ overflow:hidden;
+ }
+
+ .map-share small { color:#999; }
+
+ .map-share textarea {
+ display:block;
+ font:normal 10px/15px Arial,sans-serif;
+ resize:none;
+ border:1px solid #ccc;
+ padding:4px;
+ width:310px;
+ }
+
+ .map-share .twitter,
+ .map-share .facebook {
+ display:inline-block;
+ position:relative;
+ padding:2px 18px;
+ margin-right:10px;
+ background:#fff;
+ color:#fff;
+ font-weight:bold;
+ border:2px solid #ccc;
+ }
+
+ .map-share .twitter {
+ background:#0ac;
+ border-color:#4ce;
+ }
+
+ .map-share .facebook {
+ background:#359;
+ border-color:#68c;
+ }
View
95 ext/mapbox.share.js
@@ -0,0 +1,95 @@
+if (typeof mapbox === 'undefined') mapbox = {};
+
+mapbox.share = function() {
+ var share = {};
+
+ tj = {};
+ var l = window.location;
+ tj.webpage = l.href;
+ tj.embed = (l.hash) ? l.href + '?embed' : l.href + '#/?embed';
+
+ var link = document.createElement('a');
+ var close = document.createElement('a');
+ var embed = document.createElement('textarea');
+ var share = document.createElement('div');
+ var popup = document.createElement('div');
+ var elements = [link, close, embed, share, popup];
+
+ for (var i = 0; i < elements.length; i++) {
+ MM.addEvent(elements[i], 'mousedown', MM.cancelEvent);
+ MM.addEvent(elements[i], 'dblclick', MM.cancelEvent);
+ }
+
+ link.innerHTML = 'Share +';
+ link.href = '#';
+ link.className = 'share';
+ link.onclick = link.ontouchstart = function() {
+ popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
+ $('body').toggleClass('sharing');
+ return false;
+ };
+
+ close.innerHTML = 'Close';
+ close.href = '#';
+ close.className = 'close';
+ close.onclick = close.ontouchstart = function() {
+ popup.style.display = popup.style.display === 'block' ? 'none' : 'block';
+ $('body').toggleClass('sharing');
+ return false;
+ };
+
+ embed.className = 'embed';
+ embed.rows = 4;
+ embed.setAttribute('readonly', 'readonly');
+ embed.value = '<iframe width="500" height="300" frameBorder="0" src="{{embed}}"></iframe>'
+ .replace('{{embed}}', tj.embed);
+ embed.onclick = function() {
+ embed.focus();
+ embed.select();
+ return false;
+ };
+
+ var twitter = 'http://twitter.com/intent/tweet?status='
+ + encodeURIComponent(document.title + ' (' + tj.webpage + ')');
+ var facebook = 'https://www.facebook.com/sharer.php?u='
+ + encodeURIComponent(tj.webpage)
+ + '&t=' + encodeURIComponent(document.title);
+ share.innerHTML = ('<h3>Share this map</h3>'
+ + '<p><a class="facebook" target="_blank" href="{{facebook}}">Facebook</a>'
+ + '<a class="twitter" target="_blank" href="{{twitter}}">Twitter</a></p>')
+ .replace('{{twitter}}', twitter)
+ .replace('{{facebook}}', facebook);
+ share.innerHTML += '<strong>Get the embed code</strong><br />'
+ share.innerHTML += '<small>Copy and paste this HTML into your website or blog.</small>';
+ share.appendChild(embed);
+ share.appendChild(close);
+
+ popup.className = 'map-share';
+ popup.style.display = 'none';
+ popup.appendChild(share);
+
+ share.map = function(x) {
+ if (!x) return map;
+ map = x;
+ return this;
+ };
+
+ share.add = function() {
+ this.appendTo($('body')[0]);
+ return this;
+ };
+
+ share.remove = function() {
+ $(link).remove();
+ $(popup).remove();
+ return this;
+ };
+
+ share.appendTo = function(elem) {
+ wax.u.$(elem).appendChild(link);
+ wax.u.$(elem).appendChild(popup);
+ return this;
+ };
+
+ return share;
+};
View
5 index.html
@@ -6,11 +6,13 @@
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.css" type="text/css" />
<link rel="stylesheet" href="fonts/fonts.css" type="text/css" />
<link rel="stylesheet" href="css/style.css" type="text/css" />
+ <link rel="stylesheet" href="css/mapbox.share.css" type="text/css" />
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<script src='http://api.tiles.mapbox.com/mapbox.js/v0.6.3/mapbox.uncompressed.js'></script>
<script src="ext/jquery.min.js"></script>
<script src="ext/underscore.min.js"></script>
+ <script src="ext/mapbox.share.js"></script>
<script src="tweetRace.js"></script>
</head>
<body>
@@ -58,6 +60,9 @@
map.setZoomRange(2, 15);
tweetRace.start(map);
+
+ // Add share control
+ mapbox.share().map(map).add();
});
</script>

0 comments on commit 364ef03

Please sign in to comment.