select/social-link-generator.html

## social-link-generator.html
<!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 = {
  "&": "&amp;",
  "<": "&lt;",
  ">": "&gt;",
  '"': '&quot;',
  "'": '&#39;',
  "/": '&#x2F;'
};

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>
	<!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>