jquery plugin 페이스북 스타일 링크 도우미 [textbox, textarea 링크(URL) 체크하고 이미지 가져오기]

 

페이스 북처럼 URL이 입력되면 하단부에 이미지와 해당 페이지의 제목을 가져오도록 만들어봤습니다…

 

실력이 형편없어서.. 엉성합니다.

완벽한 제품도 아니고요…

 

Textarea에 입력되는 키 값으로 처리해서.. 오류가 있습니다만… 그냥 이런식으로 한다라고 참고만 해 주십시오.

 

 

    plugin 부분의 스크립트입니다.

(function($) {
	$.fn.GetPageInfo = function(settings) {
		var config = {
			"Server": false
			, "ServerUrl": "test.aspx"
			, "SPList": "ListName"
			, "Timeout": "15000"
			, "ImgWidth": "100px"
			, "ImgHeight": "100px"};
		
		var UrlData = null;
		var Timer = null;

		if(settings) $.extend(config, settings);

		this.each(function(){
			jQuery.support.cors = true;
			if(this.tagName && this.tagName.toLowerCase() == "textarea"){
				$(this).keyup(function(e){
					var obj = this;
					setTimeout(function(){
						fnKeyUpEvent(obj);
					}, 2000);
				});
			}
		});

		function fnKeyUpEvent(obj){
			var data = obj.value;
			var filter = /^(http|https):\/\//i;

			if(ValidURL(data)){
				if($("div#divLinker").length <= 0){
					$(obj).after("
		
");
				}
				else{
					$("div#divLinker").css("display", "");
				}
				var url = null;

				if(data.indexOf("\r\n") > 0){
					var tempData = data.split("\r\n");
					for(var i = 0; i < tempData.length; i++){
						if(tempData[i].length <= 0) continue;
						url = fnCheckUrlBySpece(tempData[i]);

						if(url)
							break;
					}
				}
				else{
					url = fnCheckUrlBySpece(data);
				}
				
				if(UrlData != url){
					if(Timer != null){
						clearTimeout(Timer);
						Timer = null;

						$("div#divLinker img#imgLoading").css("display", "none");
					}

					UrlData = url;
					Timer = setTimeout(function(){
						fnAjaxCall();
					}, 2000);
				}
			}
			else
				$("div#divLinker").css("display", "none");
		}

		function ValidURL(str) {
			var pattern = /(http|https):\/\/[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])?/i
			if(!pattern.test(str)) {
				return false;
			}
			else {
				return true;
			}
		}

		function fnAjaxCall(){
			var loading = $("div#divLinker img#imgLoading");
			var contentArea = $("div#divLinker table");
			var strUrl = fnGetUrl();

			loading.css("display", "");
			contentArea.css("display", "none");

			$.ajax({
				url: strUrl
				, async: false
				, contentType: config.Server ? "application/xml; charset=UTF-8" : "text/html; charset=UTF-8"
				//, context: document.body
				, dataType: config.Server ? "xml" : "html"
				, success: function(data, textStatus, jqXHR){
					config.Server ? fnResultServer(data) : fnResultHtml(data);
				}
				, error: function(XMLHttpRequest, textStatus, errorThrown){
					$("div#divLinker").css("display", "none");
					alert(errorThrown);
					alert(UrlData);
				}
			});
		}

		function fnCheckUrlBySpece(data){
			if(data.indexOf(" ") > -1){
				var tempData = data.split(" ");
				for(var i = 0; i < tempData.length; i++){
					if(tempData[i].length > 0 && ValidURL(tempData[i])){
						return tempData[i];
					}
				}
			}
			else
				return data;

			return "";
		}

		function fnGetUrl(){
			if(config.Server){
				if( config.ServerUrl.indexOf("_url") > 0){
					return config.ServerUrl + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout;
				}
				else{
					if(config.ServerUrl.indexOf("?") > 0)
						return config.ServerUrl + "&_url=" + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout;
					else
						return config.ServerUrl + "?_url=" + encodeURIComponent(UrlData) + "&timeout=" + config.Timeout;
				}
			}
			else{
				return encodeURI(UrlData);
			}
		}

		function fnResultServer(data){
			$("div#divLinker img#imgLoading").css("display", "none");
			var contentArea = $("div#divLinker table");
			contentArea.css("display", "");

			var title = $(data).find("Title:first").text();
			var description = $(data).find("Description:first").text();
			var img = $(data).find("Img:first");
			
			if(img.length > 0){
				contentArea.find("img").css("display", "");
				contentArea.find("img").attr("src", img.attr("Src"));
			}
			else
				contentArea.find("img").css("display", "none");

			if(img.attr("Width") > img.attr("Height"))
				contentArea.find("img").width(config.ImgWidth);
			else
				contentArea.find("img").height(config.ImgHeight);

			contentArea.find("span#spanTitle").html("" + title + "");
			contentArea.find("span#spanBody").text(description);
		}

		function fnResultHtml(data){
			$("div#divLinker img#imgLoading").css("display", "none");
			var contentArea = $("div#divLinker table");
			var linker = $(data);
			contentArea.css("display", "");

			var imgFirst = linker.find("img:first");
			if(imgFirst.length > 0){
				contentArea.find("img").css("display", "");
				contentArea.find("img").attr("src",imgFirst.attr("src"));
			}
			else
				contentArea.find("img").css("display", "none");

			if(imgFirst.width() > imgFirst.height())
				contentArea.find("img").width(config.ImgWidth);
			else
				contentArea.find("img").height(config.ImgHeight);

			contentArea.find("span#spanTitle").text(data.match("")[1]);
			contentArea.find("span#spanBody").text(linker.find("meta[name=description]").attr("content"));
		}

		return this;
	}
})(jQuery);

 

 

    Html 파일입니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus">
		<meta name="author" content="angeleyes">
		<meta name="keywords" content="angeleyes,testhtml,testjavascript">
		<meta name="description" content="test document">
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=8" />

		<style type="text/css">

		</style>

		<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
		<script type="text/javascript" src="pageinfoplugin.js"></script>
		<!--script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-base.js"></script>
		<script type="text/javascript" src="http://dev.sencha.com/deploy/dev/docs/resources/ext-all.js"></script-->

		<script language="javascript" type="text/javascript">
		//<![cdata[
			$(document).ready(function() {
				var settings = new Object();
				settings.Server = true;
				settings.ServerUrl = "http://dsg.dev.com/_layouts/Linker.aspx?_url=";
				$("#txtData").GetPageInfo(settings);
			});
			
			function fnFunction(){
				try {
					
				}
				catch(e) {
					alert("test ==> " + e.message);
				}
			}
		//]]>
		</script>
	</head>

	<body>
		<input type="text" id="txtText" value="" />
		<textarea id="txtData" rows="3" cols=""></textarea>
		<input type="button" id="btnButton" value="button" onclick="fnFunction();" />

	</body>
</html>

 

 

적용화면은 아래와 같습니다.

 

 

추후 Plugin 부분에서 텍스트 박스의 URL 체크 부분은 업데이트 하도록 하겠습니다.

 

그리고 아래 부분은 현재까지의 오류 현황입니다.

• URL 다음에 작성된 텍스트가 있는 경우 URL 제대로 인식 못함
• 이미지 교체 불가
• loading 이미지 불완전
• 본문의 text를 가져오지 못함..
• 메타 태그의 description도 못 가져옴
• https 구분 불가
• 등 등 등 등….

 

오류 투성이입니다. *_*

 

 

 

PS. 혹시 괜찮은 스크립트 작성 툴 알고 계시면 추천 부탁 드립니다.

 

 

감사합니다.