|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title></title> |
|
</head> |
|
<body> |
|
<form class="social-form"> |
|
<input type="text" name="url" value="" placeholder="URL"> |
|
<input type="text" name="title" value="" placeholder="title"> |
|
<input type="text" name="description" value="" placeholder="description"> |
|
<input type="text" name="twittername" value="@fantasyplanetde" placeholder="@twittername"> |
|
<input type="text" name="imgpath" value="/wp-content/themes/sydney/images/flat_web_icon_set/color/" placeholder="/image/path"> |
|
<input type="submit" name="" value="go"> |
|
</form> |
|
<div class="social-output"></div> |
|
|
|
<template> |
|
<ul class="share-buttons"> |
|
<li><a href="https://www.facebook.com/sharer/sharer.php?u={url}&t={title}" title="Share on Facebook" target="_blank"><img src="{imgpath}Facebook.png"></a></li> |
|
<li><a href="https://twitter.com/intent/tweet?source={url}&text={title} - {description} {url}&via=fantasyplanetde" target="_blank" title="Tweet"><img src="{imgpath}Twitter.png"></a></li> |
|
<li><a href="https://plus.google.com/share?url={url}" target="_blank" title="Share on Google+"><img src="{imgpath}Google+.png"></a></li> |
|
<li><a href="http://pinterest.com/pin/create/button/?url={url}&description={description}" target="_blank" title="Pin it"><img src="{imgpath}Pinterest.png"></a></li> |
|
<li><a href="http://wordpress.com/press-this.php?u={url}&t={title}&s=" target="_blank" title="Publish on WordPress"><img src="{imgpath}Wordpress.png"></a></li> |
|
</ul> |
|
</template> |
|
|
|
<script type="text/javascript"> |
|
|
|
var $ = document.querySelectorAll.bind(document); |
|
|
|
var entityMap = { |
|
"&": "&", |
|
"<": "<", |
|
">": ">", |
|
'"': '"', |
|
"'": ''', |
|
"/": '/' |
|
}; |
|
|
|
function escapeHtml(string) { |
|
return String(string).replace(/[&<>"'\/]/g, function (s) { |
|
return entityMap[s]; |
|
}); |
|
} |
|
function copyToClipBoard(selctor){ |
|
window.getSelection().removeAllRanges(); |
|
var range = document.createRange(); |
|
range.selectNode($(selctor)[0]); |
|
window.getSelection().addRange(range); |
|
try { |
|
var successful = document.execCommand('copy'); |
|
} catch (err) { |
|
console.warn('execCommand Error', err); |
|
} |
|
window.getSelection().removeAllRanges(); |
|
} |
|
|
|
var $formEls = $('[type="text"]'); |
|
|
|
for (var i = 0; i < $formEls.length; i++) { |
|
var $el = $formEls[i]; |
|
var name = $el.getAttribute('name'); |
|
if(localStorage.getItem(name)){ |
|
$el.value = localStorage.getItem(name); |
|
} |
|
} |
|
|
|
var $form = $('.social-form')[0]; |
|
var $out = $('.social-output')[0]; |
|
$form.addEventListener('submit', function(event){ |
|
var template = $('template')[0].innerHTML; |
|
console.log('ehhhll'); |
|
event.preventDefault(); |
|
$out.innerHTML = 'Hello '+event.target.url.value; |
|
for (var i = 0; i < $formEls.length; i++) { |
|
var $el = $formEls[i]; |
|
var name = $el.getAttribute('name'); |
|
var value = encodeURIComponent($el.value); |
|
if(name === 'imgpath'){ |
|
value = $el.value; |
|
} |
|
template = template.replace(new RegExp('{'+name+'}', 'g'), value); |
|
localStorage.setItem(name, $el.value); |
|
} |
|
$out.innerHTML = escapeHtml(template); |
|
copyToClipBoard('.social-output') |
|
// |
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
|
|
|
|
|
|
</html> |
