Skip to content

Commit

Permalink
added a share button
Browse files Browse the repository at this point in the history
  • Loading branch information
@tursics
tursics committed Jun 19, 2017
1 parent 078ca45 commit 25c187d
Show file tree
Hide file tree
Showing 3 changed files with 256 additions and 4 deletions.
148 changes: 148 additions & 0 deletions karte-maerz-2017.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,132 @@
font-size: 30px;
}

/* dialogs */

#popupInfo, #popupShare, #popupShare .ui-btn {
font-family: 'Montserrat', sans-serif;
font-size: 13px;
}
#popupInfo div div, #popupShare .ui-content div {
margin: 0 0 .8em 0;
}
#popupInfo hr {
border: 1px solid #38aadd;
margin: 0 0 .8em 0;
}
#popupInfo a {
font-weight: 400;
color: #38aadd;
text-decoration: none;
border-bottom: 2px solid transparent;
}
#popupInfo a:hover {
border-bottom-color: #38aadd;
}
#popupShare-popup {
-webkit-transition: top 200ms linear, left 200ms linear;
-moz-transition: top 200ms linear, left 200ms linear;
-ms-transition: top 200ms linear, left 200ms linear;
-o-transition: top 200ms linear, left 200ms linear;
transition: top 200ms linear, left 200ms linear;
}
#popupShare li.ui-block-a {
}
#popupShare ul.ui-tabs-nav .ui-btn {
background: #fff;
border-color: #ddd;
}
#popupShare li.ui-tabs-active .ui-btn.ui-btn-active {
background: #f1f8fc;
color: #38aadd;
padding-bottom: .9em;
border-bottom: 2px solid #38aadd;
}
#popupShare iframe {
border: 1px solid #555 !important;
}
#popupShare .ui-input-text {
background: #fff;
border: 1px solid #555;
text-shadow: none;
border-radius: 2em;
box-shadow: none;
margin: 0;
padding: 0 .5em;
font-size:13px;
}
#popupShare input {
font-size: 13px;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 400;
}
#popupShare .social {
display: inline;
font-family: 'Montserrat', sans-serif;
font-size: 12px;
margin: 0 0 0 5px;
text-shadow: none;
white-space: nowrap;
}
#popupShare .social a {
font-weight: 400;
}
#popupShare .social .facebook, #popupShare .social .twitter, #popupShare .social .whatsapp {
color: #fff;
text-decoration: none;
line-height: 2em;
padding: .25em;
margin: 0 5px 0 0;
border-radius: 4px;
}
#popupShare .social .facebook {
background: #3b5998;
}
#popupShare .social .facebook span {
color: #3b5998;
}
#popupShare .social .facebook:before {
content: "\f09a";
font: normal normal normal 14px/1 FontAwesome;
padding: 0 6px 0 2px;
vertical-align: middle;
}
#popupShare .social .twitter {
background: #55acee;
}
#popupShare .social .twitter span {
color: #55acee;
}
#popupShare .social .twitter:before {
content: "\f099";
font: normal normal normal 14px/1 FontAwesome;
padding: 0 6px 0 2px;
vertical-align: middle;
}
#popupShare .social .whatsapp {
background: #128c7e;
}
#popupShare .social .whatsapp span {
color: #128c7e;
}
#popupShare .social .whatsapp:before {
content: "\f232";
font: normal normal normal 16px/1 FontAwesome;
padding: 0 6px 0 2px;
vertical-align: text-top;
}
#popupShare .social span {
display: none;
margin: 0 0 0 7px;
padding: 1px 3px;
border-radius: 4px;
background: #fff;
}
#popupShare .social span.active {
display: inline;
}

/* autocomplete list */

.autocomplete-suggestions {
Expand Down Expand Up @@ -508,6 +634,28 @@
padding: .5em;
}

/* style button */

.ui-btn {
box-shadow: none;
font-size: 13px;
font-family: 'Montserrat', sans-serif;
font-style: normal;
font-weight: 400 !important;
text-shadow: none !important;
}
.ui-btn.ui-btn-a {
background: #fff !important;
border: 2px solid #38aadd !important;
border-radius: 2em;
color: #38aadd !important;
padding: .4em .6em;
}
.ui-btn.ui-btn-a:hover {
background: #38aadd !important;
color: #fff !important;
}

/* color theme for printer labels and autocomplete list */

.printerLabel div.blue, .autocomplete-suggestion div.blue {
Expand Down
58 changes: 54 additions & 4 deletions karte-maerz-2017.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,10 @@
<link rel="apple-touch-icon" sizes="144x144" href="/assets/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/assets/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="/assets/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="192x192" href="./assets/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="16x16" href="./assets/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="./assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./assets/favicon-96x96.png">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/assets/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
Expand Down Expand Up @@ -89,6 +89,56 @@ <h3>Wie kaputt ist Ihre Schule?</h3>
<div id="receiptClose"><i class="fa fa-chevron-up" aria-hidden="true"></i>verkleinern</div>
</div>
</div>
<div data-role="popup" id="popupShare" data-theme="a" class="ui-corner-all">
<div style="padding:0;margin:-1px 0 0 -1px;overflow-x:hidden;">
<div data-role="tabs" id="tabs" style="padding:0;">
<div data-role="navbar">
<ul>
<li><a href="#shareLink" id="tabShareLink" data-ajax="false" class="ui-btn-active">Link teilen</a></li>
<li><a href="#embedMap" id="tabEmbedMap" data-ajax="false">Karte einbetten</a></li>
</ul>
</div>
<div id="shareLink" class="ui-body-d ui-content">
<div>
In sozialen Netzwerken teilen:
<div class="social">
<a class="facebook" href="https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fschulsanierung.tursics.de%2Fkarte-maerz-2017.html" rel="popup" title="Bei Facebook teilen">Facebook<span></span></a>
<a class="twitter" href="https://twitter.com/intent/tweet?text=Wie%20kaputt%20ist%20deine%20Schule?%20Finde%20es%20hier%20heraus&amp;url=http://schulsanierung.tursics.de/karte-maerz-2017.html" rel="popup" title="Bei Twitter teilen">Twitter<span></span></a>
<a class="whatsapp" href="whatsapp://send?text=Wie%20kaputt%20ist%20deine%20Schule?%20Finde%20es%20hier%20heraus%3A%20http%3A%2F%2Fschulsanierung.tursics.de%2Fkarte-maerz-2017.html" rel="popup" title="Bei WhatsApp teilen">WhatsApp<span></span></a>
</div>
</div>
<div>
oder den Link kopieren:<br>
<input value="http://schulsanierung.tursics.de/karte-maerz-2017.html">
</div>
<div style="text-align:center;margin:0;"><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">Schließen</a></div>
</div>
<div id="embedMap" class="ui-body-d ui-content">
<div style="width:400px">
Den Codeschnipsel können Sie direkt in Ihre Webseite oder in Ihren Wordpress-Blog einbauen.<br>
</div>
<div class="ui-field-contain ui-grid-b">
<div class="ui-block-a" style="padding:0 1em 0 0;margin:0;">
<select id="selectEmbedSize" data-native-menu="false" data-inline="false">
<option value="400x300">Klein</option>
<option value="650x450">Mittel</option>
<option value="800x600">Groß</option>
</select>
</div>
<div class="ui-block-b" style="width:66.666%;padding:.25em 0 0 0;margin:0;">
<input id="inputEmbedURI" value="" data-inline="true">
</div>
</div>
<iframe></iframe>
<div style="text-align:center;margin:.8em 0 0 0;"><a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">Schließen</a></div>
</div>
</div>
</div>
</div>
<div data-role="popup" id="popupInfo" data-theme="a" class="ui-corner-all">
<div style="padding:10px 20px;">
</div>
</div>
</div>
</body>
</html>
54 changes: 54 additions & 0 deletions karte-maerz-2017.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,8 @@ function fixEuro(item) {
return 0;
} else if (item === null) {
return 0;
} else if ('undefined' === typeof item) {
return 0;
} else if ('number' === typeof item) {
return item;
} else if ('T€' === item.substring(item.length - 2)) {
Expand Down Expand Up @@ -429,6 +431,25 @@ function initSocialMedia() {
*/
// -----------------------------------------------------------------------------

var ControlInfo = L.Control.extend({
options: {
position: 'bottomright'
},

onAdd: function (map) {
'use strict';

var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');

container.innerHTML = '<a style="font-size:1.2em" href="#popupShare" title="Teilen" data-rel="popup" data-position-to="window" data-transition="pop"><i class="fa fa-share-alt" aria-hidden="true"></i></a>';
// container.innerHTML += '<a style="font-size:1.2em" href="#popupInfo" title="Info" data-rel="popup" data-position-to="window" data-transition="pop"><i class="fa fa-info" aria-hidden="true"></i></a>';

return container;
}
});

// -----------------------------------------------------------------------------

function initMap(elementName, lat, lng, zoom) {
'use strict';

Expand All @@ -444,6 +465,7 @@ function initMap(elementName, lat, lng, zoom) {
.setView([lat, lng], zoom);

map.addControl(L.control.zoom({ position: 'bottomright'}));
map.addControl(new ControlInfo());
map.once('focus', mapAction);

$.getJSON(dataUrl, function (data) {
Expand All @@ -466,6 +488,19 @@ function initMap(elementName, lat, lng, zoom) {
$(document).on("pageshow", "#pageMap", function () {
'use strict';

function updateEmbedURI() {
var size = $('#selectEmbedSize').val().split('x'),
x = size[0],
y = size[1],
html = '<iframe src="https://tursics.github.io/schulsanierung/karte-maerz-2017.html" width="' + x + '" height="' + y + '" frameborder="0" style="border:0" allowfullscreen></iframe>';

$('#inputEmbedURI').val(html);
if (-1 === $('#embedMap iframe')[0].outerHTML.indexOf('width="' + x + '"')) {
$('#embedMap iframe')[0].outerHTML = html.replace('.html"', '.html?foo=' + (new Date().getTime()) + '"');
$('#embedMap input').focus().select();
}
}

// center the city hall
initMap('mapContainer', 52.518413, 13.408368, 13);

Expand All @@ -484,6 +519,25 @@ $(document).on("pageshow", "#pageMap", function () {
$('#autocomplete').val('Pankow');
selectSuggestion('03');
});

$("#popupShare").on('popupafteropen', function(e, ui) {
$('#shareLink input').focus().select();
});
$('#tabShareLink').on('click', function (e) {
$('#popupShare').popup('reposition', 'positionTo: window');
$('#shareLink input').focus().select();
});
$('#tabEmbedMap').on('click', function (e) {
updateEmbedURI();
$('#popupShare').popup('reposition', 'positionTo: window');
$('#embedMap input').focus().select();
});

$('#selectEmbedSize').val('400x300').selectmenu('refresh');
$('#selectEmbedSize').on('change', function (e) {
updateEmbedURI();
$('#popupShare').popup('reposition', 'positionTo: window');
});
});

// -----------------------------------------------------------------------------

0 comments on commit 25c187d

Please sign in to comment.