https://www.carelogue.co.kr/js/library_image.js?1774598979

1/***
2 * 라이브러리 이미지 관련
3 *init에 존재하는 객체들은 사용하는 페이지상에도 존재해야함
4 */
5var LIBRARY_IMAGE = function(){
6	var cover_image_index	= 0;
7	var type 				= "";
8	var $editor_obj, $cover_image, $represent_img, represent_img_val, $library_img_list;
9	var editor_id;
10	var init = function(_type,_editor_obj,_library_img_obj, _represent_img = ''){
11		type = _type;
12		$editor_obj	= _editor_obj;
13		editor_id		= $editor_obj.attr("id");
14
15		var $library_img_obj = _library_img_obj;
16		var library_img_html = "";
17
18		library_img_html += '<div class="post_write_left _post_write_left">';
19
20		library_img_html += '<div class="margin-bottom-xxl img_tools_title"><div class="holder">'+getLocalizeString('타이틀_대표이미지설정','','대표 이미지 설정')+' <a href="javascript:;" class="btn-dismiss hidden-md hidden-lg hidden-sm" id="library_img_close_btn"><i class="btl bt-times" aria-hidden="true"></i><span class="sr-only">'+getLocalizeString('설명_대표이미지삭제','','대표 이미지 삭제')+'</span></a></div></div>';
21		if(!TEST_SERVER){
22			library_img_html += '<div class="clearfix library_img_list" id="library_img_list"><div style="text-align:center;padding-top:75px;"><span class="hidden-sm hidden-lg hidden-md opacity-50" style="font-size:16px;">' + getLocalizeString('설명_첨부된이미지가없습니다', '', '첨부된 이미지가 없습니다.') + '</span></div></div>';
23		}else{
24			library_img_html += '<div class="clearfix library_img_list" id="library_img_list"><div style="text-align:center;padding-top:75px;"><span class="blocked hidden-sm hidden-lg hidden-md opacity-50" style="font-size:16px;">' + getLocalizeString('설명_첨부된이미지가없습니다', '', '첨부된 이미지가 없습니다.') + '</span>

24<p class="hidden-sm hidden-lg hidden-md margin-top-xl inline-blocked holder"><span class="text-brand">' + getLocalizeString("설명_이미지추가", '', "이미지 추가") + '</span><input type=\'file\' name=\'files[]\' class=\'img-file-control\' accept=\'image/jpeg, image/jpg, image/png, image/gif, image/svg+xml\' title="' + getLocalizeString("설명_이미지추가", '', "이미지 추가") + '"></p></div></div>';
25		}
26
27		library_img_html += '</div>';
28		$library_img_obj.html(library_img_html);
29
30		$library_img_list	= $("#library_img_list");
31		$represent_img		= $("#represent_img");
32		$cover_image		= $('#cover_image');
33    represent_img_val = _represent_img;
34
35
36		$("#library_img_btn, #library_img_close_btn").off("click.library_img_btn").on("click.library_img_btn",function(){
37			$library_img_obj.find("._post_write_left").toggleClass("on_library_img");
38		});
39	};
40
41
42	/***
43	 * 라이브러리 이미지 추가 루프돌리기
44	 * @param delay
45	 */
46	var addLibraryImageLoop = function(delay){
47		LIBRARY_IMAGE.addLibraryImage();
48		setInterval(LIBRARY_IMAGE.addLibraryImage,delay);
49	};
50
51	/***
52	 * 라이러리 이미지 추가
53	 * @type {Array}
54	 */
55	var tmp_img_list = [];
56	var tmp_imgs = {};
57	var addLibraryImage = function(){
58		var $body;
59		if(IE_VERSION < 10){
60			$body = $(CKEDITOR.instances[editor_id].getData());
61		}else{
62			//body = $editor_body.froalaEditor('html.get',true);		//froala Editor 자체 함수 html.get 사용시 버벅임, 공식 사이트에서 테스트시에도 동일한 것으로 보아 froala 에디터 자체 개선이 필요
63			$body = $editor_obj;
64		}
65		var img_list	= [];
66
67
68		var cover_image	= $cover_image.val();
69
70
71		//커버이미지 셋팅
72		if(cover_image !== ""){
73			cover_image_index = 0;
74			img_list.push(cover_image);
75		}
76		else cover_image_index = -1;
77
78		//본문 이미지 셋팅
79		$body.find("img, iframe, embed").each(function(){
80			var $that = $(this);
81			var src = $that.attr("src");
82			if(typeof src !== 'undefined'){
83				if($that.prop("tagName") === "IMG"){
84					src = src.replace(CDN_UPLOAD_URL,UPLOAD_URL);
85					src = src.replace(CDN_THUMBNAIL_URL,THUMBNAIL_URL);
86					if($.inArray(src, img_list) == -1 && src.indexOf('base64') == -1) img_list.push(src);
87				}else{
88					var is_video_type = getVideoId(src);
89					var thumb_data = {};
90					if(typeof is_video_type != 'undefined'){
91						$.each(is_video_type,function(k,v){
92							switch(k){
93								case 'youtube':
94									if(typeof tmp_imgs[v[1]] == 'undefined'){
95										thumb_data = getYoutubeThumbnail(v[1]);
96										tmp_imgs[v[1]] = thumb_data;
97									}else{
98										thumb_data = tmp_imgs[v[1]];
99									}
100
101									if(thumb_data != "" && typeof thumb_data != 'undefined') img_list.push(thumb_data);
102									break;
103								case 'vimeo':
104									// var vidStr = src.indexOf("video/");
105									//  var vid = src.slice(vidStr+6);
106									var check_param = src.indexOf("?"); // 설정값 없이 동영상 자체 url만 있어야 썸네일 추출 가능
107									if(check_param != -1){
108										src = src.substring(0, check_param);
109									}
110									src = "https:"+src;
111									img_list.push(src);
112
113									thumb_data = getVimeoThumbnail(src, function(src, thumb_url){
114										//var thumb_index = img_list.indexOf(vimeo_id);
115										// if(thumb_index > -1){
116										// 	img_list[thumb_index] = thumb_url;
117										// }
118										changeImageById(src, thumb_url);
119									});
120									break;
121							}
122						});
123					}
124				}
125			}
126
127		});
128
129		updateLibrayImage(img_list);
130
131	};
132
133	function updateLibrayImage(img_list){
134		var html		= "";
135		var is_update = false;
136		var img_list_length = img_list.length;
137		var tmp_img_list_length = tmp_img_list.length;
138		//라이브러리와 본문의 이미지가 달라진경우
139		if(img_list_length !== tmp_img_list_length) is_update = true;
140		$.each(img_list,function(i,v){
141			//본문 이미지의 순서가 변경된경우
142			if(v !== tmp_img_list[i]){
143				is_update = true;
144				return false;
145
146			}
147		});
148
149		//변동사항이 있을때에만 이미지 새로적용
150		if(is_update){
151			var represent_img_src = represent_img_val;
152			var is_represent_img = false;

153
154			//본문에서 대표이미지가 삭제되었는지 체크
155			//(에디터에서 이미지를 받기 전에 제목 이미지만 불러와진 경우 제목 이미지가 대표 이미지로 설정될 수 있어 체크 제외)
156			if(img_list_length > 1 || cover_image_index == -1){
157				$.each(img_list,function(index,_img_src){
158					if(represent_img_src === _img_src){
159            is_represent_img = true;
160            $represent_img.val(represent_img_src);
161          };
162				});
163				if(!is_represent_img){
164					$represent_img.val("");
165					represent_img_src = "";
166				}
167			}
168
169			$.each(img_list,function(index,_img_src){
170				var img_src = "";
171				img_src = _img_src;
172				if(img_src.indexOf("http") !== -1 || img_src.indexOf("https") !== -1){//외부 이미지처리
173
174				}else{
175					if(img_src.substring(0,8) == "/upload/"){
176						img_src = img_src.replace("/upload/","");
177						img_src = CDN_UPLOAD_URL+img_src;
178					}else if(img_src.substring(0,11) == "/thumbnail/"){
179						img_src = img_src.replace("/thumbnail/","");
180						img_src = CDN_THUMBNAIL_URL+img_src;
181					}else if(img_src.indexOf(CDN_UPLOAD_URL) === -1){ // 경로의 시작이 site_code일때가 잇어서 예외처리
182						img_src = CDN_UPLOAD_URL+img_src;
183					}
184				}
185
186				//대표이미지가 설정되어 있지않을때 첫번째 이미지를 대표 이미지로 처리
187				if(represent_img_src === "" && index === 0 && img_list_length !== 0){
188					represent_img_src = _img_src;
189					$represent_img.val(represent_img_src);
190				}
191        
192				var add_class = _img_src === represent_img_src ? "on" : "";
193				var is_represent_img = add_class === "on";
194
195				if(_img_src.indexOf(".") == -1) img_src = NO_IMAGE_URL;
196				var encoded_img_src = img_src.replace(/ /g, '%20');
197				html += "<div class='123123 float_l img_tools _library_img "+add_class+"' style='background-image: url("+encoded_img_src+")' data-id='"+_img_src+"'>";
198				html += '<a href="javascript:;" data-url="'+_img_src+'" onclick="LIBRARY_IMAGE.deleteLibraryImage('+index+','+is_represent_img+')"><i aria-hidden="true" class="btm bt-times"></i></a><div class="primary">' + getLocalizeString('설명_대표', '', '대표') + '</div>';
199				html += "</div>";
200
201				if(TEST_SERVER){
202					html += "<div class='float_l img_tools _library_img add_img'>";
203					html += "<i aria-hidden='true' class='btm bt-plus'></i>";
204					html += "<input type='file' name='files[]' class='img-file-control' accept='image/jpeg, image/jpg, image/png, image/gif, image/svg+xml'>";
205					html += "</div>";
206				}
207
208			});
209
210			if(!html) html = '<div style="text-align:center;padding-top:75px;"><span class="hidden-sm hidden-lg hidden-md opacity-50" style="font-size:16px;">' + getLocalizeString('설명_첨부된이미지가없습니다', '', '첨부된 이미지가 없습니다.') + '</span></div>';
211			$library_img_list.html(html);
212			tmp_img_list = img_list;
213
214			$library_img_list.find("._library_img").off("click.library_img").on("click.library_img",function(){
215				$library_img_list.find("._library_img").removeClass("on");
216				$(this).addClass("on");
217				var img_name = $(this).find("a").data("url");
218				$represent_img.val(img_name);
219			});
220		} else {
221      // 업데이트가 없고 이미지가 없고 대표 이미지가 없을 경우 대표 이미지를 지운다.
222      if(img_list_length === 0 && represent_img_src !== ""){
223        $represent_img.val("");
224        represent_img_src = "";
225      }
226    }
227	}
228
229
230	/***
231	 *  라이브러리 이미지 삭제처리
232	 * @param delete_index
233	 * @param is_represent 대표이미지 여부
234	 */
235	var deleteLibraryImage = function(delete_index,is_represent){
236		is_update = true;
237		var body = '';
238		if(delete_index === cover_image_index){//커버이미지 삭제시
239			deleteCoverImage();
240		}else{//본문 이미지 삭제시
241			if(IE_VERSION < 10){
242				body = CKEDITOR.instances[editor_id].getData();
243			}else{
244        body = FroalaEditor('#' + editor_id).html.get(true);
245			}
246
247			var delete_tag = "";
248			var current_index = cover_image_index === -1 ? 0 : 1;
249			$(body).find("img, iframe, embed").each(function(index, tag){
250				//동영상이 유튜브가 아닌경우 제외
251				if($(this).prop("tagName") !== "IMG"){
252					if($(this).attr("src").indexOf("youtube") === -1 && $(this).attr("src").indexOf("vimeo") === -1) return true;
253				}
254				if(delete_index === current_index) {
255					delete_tag = tag.outerHTML;
256					delete_tag = $.trim(delete_tag);
257					return false;

258				}
259				current_index++;
260			});
261
262			body = body.replace(delete_tag,"");
263			if(IE_VERSION < 10){
264				CKEDITOR.instances[editor_id].setData(body);
265			}else{
266        FroalaEditor('#' + editor_id).html.set(body, true);
267			}
268
269		}
270
271		if(is_represent){//대표이미지 삭제시
272			$represent_img.val("");
273		}
274		addLibraryImage();
275	};
276
277	function changeImageById(id, thumb_url){
278
279		var old_url = $library_img_list.find("div[data-id='" + id + "']").css("background-image");
280		if(typeof old_url != 'undefined' && old_url.indexOf(thumb_url) == -1){
281			$library_img_list.find("div[data-id='" + id + "']").css({
282				"background-image" : "url(" + thumb_url + ")"
283			});
284			$library_img_list.find("div[data-id='" + id + "']").find("a").data("url",thumb_url);
285			if($library_img_list.find("div[data-id='" + id + "']").hasClass("on")) $represent_img.val(thumb_url);
286		}
287	}
288
289	function deleteCoverImage(){
290		switch(type){
291			case 'post':
292				POST.deleteCoverImage();
293				break;
294			case 'map':
295				MAP.deleteCoverImage();
296				break;
297		}
298	}
299
300
301	return {
302		'init' : function(_type, _editor_obj, _library_img_obj, _represent_img) {
303			init(_type, _editor_obj, _library_img_obj, _represent_img);
304		},
305		'addLibraryImageLoop' : function(delay){
306			addLibraryImageLoop(delay);
307		},
308		'addLibraryImage' : function(){
309			addLibraryImage();
310		},
311		'deleteLibraryImage' : function(delete_index,is_represent){
312			deleteLibraryImage(delete_index,is_represent);
313		}
314	};
315}();