whichlight · December 18, 2015 17:18
diff --git a/index.html b/index.html
 <!DOCCTYPE html>
 <html lang="en">
  <head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=620">
    <title>Embedly Drag and Drop</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.embedly-3.1.1.min.js"></script>

  </head>
  <body>
      <!-- Uncomment for this styling, I left it out for the Tumblr post. 
    <style>
      #drop {
        border: 3px solid #45b6ba;
        min-height: 600px;
        background-color: rgb(41,25,38);

      }

      #intro{
        color:white;
        font-family:"helvetica";
        text-align:center;
        padding:20px;
      }

      .embed{
        width : 200px;
        font-family: "helvetica";
        padding: 20px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        background-color:white;
        margin:10px;
        float:left;
        color:black;
        text-align:left;
      }

      .embed a{
        margin-right:5px;
      }

      .embed .description{

        font-size:15px;
        color: gray;
      }


    </style>
    -->

    <div id="drop">
      <div id="intro">drop a link in here</div>
    </div>
    <script src="main.js"></script>
  </body>
 </html>
diff --git a/main.js b/main.js
 $.embedly.defaults.key = 'put your key here'; // you can get one from https://app.embed.ly/signup
 // Loading gif
 var img = new Image();
 img.src = "http://embed.ly/static/images/ajax-loader.gif";

 var drop = document.querySelector('#drop');

 $(drop).css("min-height", "300px");
 $(drop).css("padding", "40px");
 $(drop).css("border", "3px solid #45b6ba");

 // Stop the default drag events
 drop.addEventListener('dragover', function(e){ e.preventDefault();});
 drop.addEventListener('dragenter', function(e){e.preventDefault();});

 // When you drop in a link
 drop.addEventListener('drop', function (e) {
    if (e.preventDefault) e.preventDefault();

    //remove anything inside first
    drop.innerHTML = "";

    // Get link
    var link = e.dataTransfer.getData("text");

    // Only replace with embed if it is a URL
    if(isUrl(link)){
        var a = document.createElement("a");
        a.className+="embed";

        // Set the link source and text
        a.href = link;
        a.innerHTML = "<div>"+ link +"</div>";

        // Add the loading gif, and add the link to the page
        $(a).append(img);
        $(drop).append(a);

        // Here is the Embedly call. I set a maxheight and maxwidth, and a function to run after
        // the call is complete.
        $(a).embedly({
            query: {maxheight: 300, maxwidth: 500},
            done: function(data){
                $(this).remove(img);
            }
        });
    }
    else{
        alert("eep, that's not a link");
    }
    return false;
 });

 // from http://dzone.com/snippets/validate-url-regexp
 function isUrl(s) {
    var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
    return regexp.test(s);
 }
	<!DOCCTYPE html>
	<html lang="en">
	<head>
	<meta charset=utf-8>
	<meta name="viewport" content="width=620">
	<title>Embedly Drag and Drop</title>
	<script src="js/jquery.min.js"></script>
	<script src="js/jquery.embedly-3.1.1.min.js"></script>

	</head>
	<body>
	<!-- Uncomment for this styling, I left it out for the Tumblr post.
	<style>
	#drop {
	border: 3px solid #45b6ba;
	min-height: 600px;
	background-color: rgb(41,25,38);

	}

	#intro{
	color:white;
	font-family:"helvetica";
	text-align:center;
	padding:20px;
	}

	.embed{
	width : 200px;
	font-family: "helvetica";
	padding: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color:white;
	margin:10px;
	float:left;
	color:black;
	text-align:left;
	}

	.embed a{
	margin-right:5px;
	}

	.embed .description{

	font-size:15px;
	color: gray;
	}


	</style>
	-->

	<div id="drop">
	<div id="intro">drop a link in here</div>
	</div>
	<script src="main.js"></script>
	</body>
	</html>
	$.embedly.defaults.key = 'put your key here'; // you can get one from https://app.embed.ly/signup
	// Loading gif
	var img = new Image();
	img.src = "http://embed.ly/static/images/ajax-loader.gif";

	var drop = document.querySelector('#drop');

	$(drop).css("min-height", "300px");
	$(drop).css("padding", "40px");
	$(drop).css("border", "3px solid #45b6ba");

	// Stop the default drag events
	drop.addEventListener('dragover', function(e){ e.preventDefault();});
	drop.addEventListener('dragenter', function(e){e.preventDefault();});

	// When you drop in a link
	drop.addEventListener('drop', function (e) {
	if (e.preventDefault) e.preventDefault();

	//remove anything inside first
	drop.innerHTML = "";

	// Get link
	var link = e.dataTransfer.getData("text");

	// Only replace with embed if it is a URL
	if(isUrl(link)){
	var a = document.createElement("a");
	a.className+="embed";

	// Set the link source and text
	a.href = link;
	a.innerHTML = "<div>"+ link +"</div>";

	// Add the loading gif, and add the link to the page
	$(a).append(img);
	$(drop).append(a);

	// Here is the Embedly call. I set a maxheight and maxwidth, and a function to run after
	// the call is complete.
	$(a).embedly({
	query: {maxheight: 300, maxwidth: 500},
	done: function(data){
	$(this).remove(img);
	}
	});
	}
	else{
	alert("eep, that's not a link");
	}
	return false;
	});

	// from http://dzone.com/snippets/validate-url-regexp
	function isUrl(s) {
	var regexp = /(ftp\|http\|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/\|\/([\w#!:.?+=&%@!\-\/]))?/;
	return regexp.test(s);
	}