ver 1.3 update

IE에서도 js 방식으로 단어별 줄바꿈을 할 수 있도록 옵션을 추가함.
mytory · Sep 3, 2013 · 03436ad · 03436ad
1 parent 3630e65
commit 03436ad
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 29 deletions.
diff --git a/example.html b/example.html
@@ -4,16 +4,17 @@
 <meta charset="UTF-8">
 <title>jQuery word-break:keep-all Plugin</title>
 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
-<script type="text/javascript" src="jquery.word-break-keep-all.js"></script>
-<link rel="stylesheet" href="http://yandex.st/highlightjs/7.3/styles/tomorrow.min.css">
-<script src="http://yandex.st/highlightjs/7.3/highlight.min.js"></script>
+<script type="text/javascript" src="jquery.word-break-keep-all.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
 	//이 한 줄로 실행한다.
 	$('.test').wordBreakKeepAll();
 
 	//IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
-	//$('.test').wordBreakKeepAll({OffForIE:true}); 
+	//$('.test').wordBreakKeepAll({OffForIE: true});
+
+	//IE에서 플러그인을 사용하되 CSS를 적용하는 게 아니라 비 IE 브라우저처럼 적용하고 싶을 때 이렇게 옵션을 준다.
+	//$('.test').wordBreakKeepAll({useCSSonIE: false});
 });
 </script>
 <style type="text/css">
@@ -66,7 +67,7 @@
 </style>
 </head>
 <body>
-	<h1>jQuery word-break: keep-all 플러그인 ver 1.2.3 Demo</h1>
+	<h1>jQuery word-break: keep-all 플러그인 ver 1.3.0 Demo</h1>
 	<div class="buttons">
 		<p>아래 버튼을 이용해 가로를 50px씩 늘리고 줄이면서 단어별로 끊어지는지 테스트해 보세요.</p>
 		<input type="button" value="+50px" id="plus"/>
@@ -104,8 +105,12 @@ <h2>실행 방법 (How to Run)</h2>
 &lt;script type="text/javascript"&gt;
 $(document).ready(function(){
 	$('.target').wordBreakKeepAll();
+
 	//IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
 	//$('.test').wordBreakKeepAll({OffForIE:true}); 
+
+	//IE에서 플러그인을 사용하되 CSS를 적용하는 게 아니라 비 IE 브라우저처럼 적용하고 싶을 때 이렇게 옵션을 준다.
+	//$('.test').wordBreakKeepAll({useCSSonIE: false});
 });
 &lt;/script&gt;</code></pre>
 		<h2>플러그인 기타 정보 (etc)</h2>
@@ -151,9 +156,6 @@ <h2>플러그인 기타 정보 (etc)</h2>
 
 	//안에 html 요소가 있을 때 에러 안 나는지 테스트.
 	$('.has-html-test').wordBreakKeepAll();
-
-	//code highlight
-	hljs.initHighlightingOnLoad();
 	</script>
 </body>
 </html>
diff --git a/jquery.word-break-keep-all.js b/jquery.word-break-keep-all.js
@@ -1,15 +1,15 @@
 /*!
  * jQuery word-break keep-all Plugin
- * ver 1.2.3
+ * ver 1.3.0
  *
  * Copyright 2012, Ahn Hyoung-woo ([email protected])
  * Dual licensed under the MIT or GPL Version 2 licenses.
  * http://jquery.org/license
  *
- * http://code.google.com/p/jquery-word-break-keep-all-plugin/
+ * https://github.com/mytory/jquery-word-break-keep-all
  * http://mytory.co.kr/archives/2801
  *
- * Date: 2013-01-07
+ * Date: 2013-09-04
  */
 
 jQuery.fn.wordBreakKeepAll = function(option) {
@@ -27,32 +27,34 @@ jQuery.fn.wordBreakKeepAll = function(option) {
 	};
 
 	var defaultOption = {
-		OffForIE: false // If IE, turn off plugin.
+		OffForIE: false, // If IE, turn off plugin.
+		useCSSonIE: true // on IE, use CSS word-break: keep-all
 	};
 
 	var opt = $.extend(defaultOption,option);
 
-	if( /MSIE/.test(navigator.userAgent) ){
+	if( /MSIE/.test(navigator.userAgent) && opt.OffForIE == false && opt.useCSSonIE == true){
 		var addWordBreakKeepAll = function(obj){
-			if(opt.OffForIE == false){
-				$(obj).css({
-					'word-break': 'keep-all',
-					'word-wrap': 'break-word'
-				});
-				if($(obj).css('display') == 'inline'){
-					$(obj).css('display','block');
-				}
+			$(obj).css({
+				'word-break': 'keep-all',
+				'word-wrap': 'break-word'
+			});
+			if($(obj).css('display') == 'inline'){
+				$(obj).css('display','block');
 			}
 		};
-	}else{
+	}else if( ! /MSIE/.test(navigator.userAgent) || /MSIE/.test(navigator.userAgent) && opt.OffForIE == false && opt.useCSSonIE == false ){
 		var addWordBreakKeepAll = function(obj){
 
 			var html = $(obj).html();
-			//줄바꿈 보존을 위한 처리
+
+			// to store line break
 			html = html.replace(/(\r\n|\n|\r)/gm, ' ＃＆＊＠§ ');
+
 			// .html() 로 집어 넣었을 때, 여는 태그만 있으면 브라우저가 자동으로 닫는 태그를 집어 넣기 때문에 <,>를 다 없앤다.
 			var textArr = html.split(' ');
-			//빈 배열 제거
+
+			// remove empty array
 			textArr = textArr.filter(function(e){return e;});
 			$(obj).text('');
 			var skip = false;
@@ -83,7 +85,7 @@ jQuery.fn.wordBreakKeepAll = function(option) {
 				}
 				if(is_there_end_angle_bracket(str)){
 					skip = false;
-				}
+				}
 			};
 			$(obj).html(full_str.replace(/＃＆＊＠§/g, "\n"));
 		};

diff --git a/jquery.word-break-keep-all.min.js b/jquery.word-break-keep-all.min.js
@@ -1,2 +1,16 @@
-//ver 1.2.3, http://code.google.com/p/jquery-word-break-keep-all-plugin/
-jQuery.fn.wordBreakKeepAll=function(e){var t=function(e){return e.lastIndexOf("<")<e.lastIndexOf(">")};var n=function(e){return e.lastIndexOf(">")<e.lastIndexOf("<")};var r=function(e){return e.lastIndexOf(">")==e.lastIndexOf("<")};var i={OffForIE:false};var s=$.extend(i,e);if(/MSIE/.test(navigator.userAgent)){var o=function(e){if(s.OffForIE==false){$(e).css({"word-break":"keep-all","word-wrap":"break-word"});if($(e).css("display")=="inline"){$(e).css("display","block")}}}}else{var o=function(e){var i=$(e).html();i=i.replace(/(\r\n|\n|\r)/gm," ＃＆＊＠§ ");var s=i.split(" ");s=s.filter(function(e){return e});$(e).text("");var o=false;var u="";for(var a=0,f=s.length;a<f;a++){var l=s[a];if(o==false&&r(l)&&l.indexOf("＃＆＊＠§")==-1){u+='<span style="white-space: nowrap">'+l+"</span> "}else{u+=l+" "}if(n(l)){o=true}if(t(l)){o=false}}$(e).html(u.replace(/＃＆＊＠§/g,"\n"))}}return this.each(function(){o(this)})}
+/*!
+  jQuery word-break keep-all Plugin
+  ver 1.3.0
+ 
+  Copyright 2012, Ahn Hyoung-woo ([email protected])
+  Dual licensed under the MIT or GPL Version 2 licenses.
+  http://jquery.org/license
+ 
+  https://github.com/mytory/jquery-word-break-keep-all
+  http://mytory.co.kr/archives/2801
+ 
+  Date: 2013-09-04
+ */jQuery.fn.wordBreakKeepAll=function(option){var is_there_end_angle_bracket=function(str){return str.lastIndexOf('<')<str.lastIndexOf('>');};var is_there_start_angle_bracket=function(str){return str.lastIndexOf('>')<str.lastIndexOf('<');};var is_there_no_angle_bracket=function(str){return str.lastIndexOf('>')==str.lastIndexOf('<');};var defaultOption={OffForIE:false,useCSSonIE:true};var opt=$.extend(defaultOption,option);if(/MSIE/.test(navigator.userAgent)&&opt.OffForIE==false&&opt.useCSSonIE==true){var addWordBreakKeepAll=function(obj){$(obj).css({'word-break':'keep-all','word-wrap':'break-word'});if($(obj).css('display')=='inline'){$(obj).css('display','block');}};}else if(!/MSIE/.test(navigator.userAgent)||/MSIE/.test(navigator.userAgent)&&opt.OffForIE==false&&opt.useCSSonIE==false){var addWordBreakKeepAll=function(obj){var html=$(obj).html();html=html.replace(/(\r\n|\n|\r)/gm,' ＃＆＊＠§ ');var textArr=html.split(' ');textArr=textArr.filter(function(e){return e;});$(obj).text('');var skip=false;var full_str='';for(var i=0,j=textArr.length;i<j;i++){var str=textArr[i];if(skip==false&&is_there_no_angle_bracket(str)&&str.indexOf('＃＆＊＠§')==-1){full_str+='<span style="white-space: nowrap">'+str+'</span> ';}else{full_str+=str+' ';}
+if(is_there_start_angle_bracket(str)){skip=true;}
+if(is_there_end_angle_bracket(str)){skip=false;}};$(obj).html(full_str.replace(/＃＆＊＠§/g,"\n"));};}
+return this.each(function(){addWordBreakKeepAll(this);});};
diff --git a/readme.md b/readme.md
@@ -1,4 +1,5 @@
-# jQuery `word-break: keep-all` plugin
+jQuery `word-break: keep-all` plugin
+====================================
 
 Not in latin letter, break line by a word, not a letter. This is like CSS `word-break: keep-all` property that only be in IE.
 
@@ -16,6 +17,26 @@ What we want is below. Not above. ('죽였다' is a word.)
 
 This plugin is for it. IE has CSS property `word-break: keep-all;` but other browser has not. So I made jQuery plugin.
 
+Usage
+-----
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
+    <script type="text/javascript" src="jquery.word-break-keep-all.min.js"></script>
+    <script type="text/javascript">
+    $(document).ready(function(){
+      // run
+      $('.test').wordBreakKeepAll();
+
+      // if IE, off this plugin.
+      // IE에서는 플러그인을 사용하지 않고 CSS로 처리하고 싶은 경우 이렇게 옵션을 주면 된다.
+      //$('.test').wordBreakKeepAll({OffForIE: true});
+
+      // On IE, if you want to apply js type, not CSS, set option like below.
+      // IE에서 플러그인을 사용하되 CSS를 적용하는 게 아니라 비 IE 브라우저처럼 적용하고 싶을 때 이렇게 옵션을 준다.
+      //$('.test').wordBreakKeepAll({useCSSonIE: false});
+    });
+    </script>
+
 영어가 아닌 문자에서, 글자별로 줄바꿈하는 것이 아니라 단어별로 줄바꿈을 하도록 한다. CSS의 `word-break: keep-all`처럼 작동을 한다. 이 프로퍼티는 IE에만 있다.
 
 <span style="font-size: 2em">[▶데모 보기](http://dl.dropboxusercontent.com/u/15546257/code/jquery-word-break-keep-all-plugin/example.html)</span> | 
@@ -31,4 +52,5 @@ This plugin is for it. IE has CSS property `word-break: keep-all;` but other bro
     이명박과 마힌드라가 22명을
     죽였다.
 
-이걸 해 주는 jQuery 플러그인이다. IE에서는 word-break: keep-all; 속성으로 처리 가능하지만, IE가 아닌 브라우저에서는 이 속성이 작동하지 않는다. 그래서 jQuery 플러그인을 만들었다.
+이걸 해 주는 jQuery 플러그인이다. IE에서는 word-break: keep-all; 속성으로 처리 가능하지만, IE가 아닌 브라우저에서는 이 속성이 작동하지 않는다. 그래서 jQuery 플러그인을 만들었다.
+