참고: 설정을 저장한 후에 바뀐 점을 확인하기 위해서는 브라우저의 캐시를 새로 고쳐야 합니다.
- 파이어폭스 / 사파리: Shift 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5 또는 Ctrl-R을 입력 (Mac에서는 ⌘-R)
- 구글 크롬: Ctrl-Shift-R키를 입력 (Mac에서는 ⌘-Shift-R)
- 인터넷 익스플로러 / 엣지: Ctrl 키를 누르면서 새로 고침을 클릭하거나, Ctrl-F5를 입력.
- 오페라: Ctrl-F5를 입력.
/* 마스코트 클래스 및 그 객체를 생성한다. 객체의 이름은 mascot. */ function randomRange(n1, n2) { return Math.round( Math.random() * 10000) % (n2 - n1) + n1; } function BookmarkStorage() { } BookmarkStorage.prototype.AddBookmark = function(name, url) { var pre = localStorage.getItem("hisyokan-bookmark-key"); var keys = name + ";"; if(pre != null){ keys = name + ";" + pre; } localStorage.setItem("hisyokan-bookmark-key",keys); localStorage.setItem("bookmark-" + name,url); }; BookmarkStorage.prototype.GetList = function() { var keys = localStorage.getItem("hisyokan-bookmark-key").split(";"); var res_list = []; for(var i = 0 ; i < keys.length ; i++) { if(keys[i].length == 0) { continue; } res_list.push( { name:keys[i], link:localStorage.getItem("bookmark-" + keys[i]) } ); } return res_list; }; function GetHtmlList(list){ list_el = document.createElement("ul"); $(list_el).css({ "list-style":"none", "padding":0, "margin":0 }); for(var i = 0 ; i < list.length ; i++){ var li = document.createElement("li"); var a = document.createElement("a"); a.href = list[i].link; $(a).attr("href",list[i].link); $(a).html(list[i].name); $(li).html(a); $(list_el).append(li); } return list_el; } function Mascot() { this.is_loaded = false; this.is_show = false; this.mascot_img_list = []; this.message_queue = []; this.now_balloon = null; this.is_small = false; } Mascot.prototype.AddImage = function(img) { this.mascot_img_list.push(img); }; Mascot.prototype._show_balloon = function() { this.now_balloon = document.createElement("div"); $(this.now_balloon).css("position","fixed"); $(this.now_balloon).css("display","none"); $(this.now_balloon).html(this.message_queue[0]); $(this.now_balloon).css("background-color","#000"); $(this.now_balloon).css("color","#FFF"); $(this.now_balloon).css("max-width","225px"); $(this.now_balloon).css("padding","16px"); $(document.body).append(this.now_balloon); $(this.now_balloon).css("bottom",$(this.mascot_img_html).height()/2 +16 - $(this.now_balloon).height()/2 + 32); $(this.now_balloon).css("right",$(this.mascot_img_html).width() + 32); $(this.now_balloon).css("border-radius",5); $(this.now_balloon).fadeIn(1000); this.message_queue.shift(); this.now_balloon.obj = this; $(this.now_balloon).click ( function() { var obj = this.obj; $(obj.now_balloon).fadeOut(1000).delay(1000,function(){$(this).remove();}); obj.now_balloon = null; if(obj.message_queue.length != 0) { obj._show_balloon(); } } ); }; Mascot.prototype.Show = function() { if(this.is_show) return; this.is_show = true; var select = this.mascot_img_list[randomRange(0,this.mascot_img_list.length)]; var wrap_div = document.createElement("div"); this.mascot_img_html = document.createElement("img"); this.mascot_img_html.obj = this; if(localStorage.getItem("custom_dmns_is_small") == "true") { this.ToSmall(); } else { this.ToBig(); } this.mascot_img_html.onload = function() { var obj = this.obj; if(localStorage.getItem("custom_dmns_is_small") == "true") { obj.ToSmall(); } else { obj.ToBig(); } if(obj.message_queue.length != 0) { obj._show_balloon(); } $(".top_s_btn").css("display","none"); $("#to-top-btn").css("width",$(this).width()/2); $("#hisyokan-bookmark").css("width",$(this).width()/2); obj.is_loaded = true; }; $(this.mascot_img_html).click( function() { if(this.obj.is_small == false) { this.obj.ToSmall(); } else { this.obj.ToBig(); } }); this.mascot_img_html.src = select; $(this.mascot_img_html).css("display","block"); $(wrap_div).css("position","fixed"); $(wrap_div).css("right","16px"); $(wrap_div).css("bottom","16px"); $(wrap_div).append(this.mascot_img_html); $(wrap_div).append("<ul style='list-style:none;padding: 0px;margin:0px;display:inline;'><li style='float:left;'><a id='to-top-btn' href='#' style='text-align:center;display:inline-block;line-height:32px;width:100%;background-color:#000;color:#FFF;font-weight:bold;'>위로</a></li><li style='float:left;'> <a id='hisyokan-bookmark' href='#' style='text-align:center;display:inline-block;line-height:32px;width:100%;background-color:#000;color:#FFF;font-weight:bold;'>북마크</a></li></ul>"); $(document.body).append(wrap_div); document.getElementById("hisyokan-bookmark").obj = this; $("#hisyokan-bookmark").click( function() { var menu_list_h = document.createElement("ul"); $(menu_list_h).css("list-style","none"); $(menu_list_h).css("margin",0); $(menu_list_h).css("padding",0); var li = document.createElement("li"); var a_tag = document.createElement("a"); a_tag.href = "#"; a_tag.obj = this.obj; $(a_tag).css("display","inline-block"); $(a_tag).css("line-height","16px"); $(a_tag).css("padding","2px"); $(a_tag).css("color","#FFF"); $(a_tag).html("이 페이지 등록"); $(a_tag).click( function() { var link = document.location.href; var name = document.title; name = name.replace(" - 리브레 위키",""); var bookmark = new BookmarkStorage(); bookmark.AddBookmark(name,link); this.obj.CloseMessage(); this.obj.ShowMessage("등록되었습니다"); return false; } ); $(li).html(a_tag); $(menu_list_h).append(li); li = document.createElement("li"); a_tag = document.createElement("a"); a_tag.href = "#"; a_tag.obj = this.obj; $(a_tag).css("display","inline-block"); $(a_tag).css("line-height","16px"); $(a_tag).css("padding","2px"); $(a_tag).css("color","#FFF"); $(a_tag).html("북마크 리스트"); $(a_tag).click( function() { var bookmark = new BookmarkStorage(); this.obj.ShowMessage(GetHtmlList(bookmark.GetList())); return false; } ); $(li).html(a_tag); $(menu_list_h).append(li); this.obj.CloseMessage(); this.obj.ShowMessage(menu_list_h); return false; } ); }; Mascot.prototype.ShowMessage = function(msg) { this.message_queue.push(msg); if(this.is_show == false) { this.Show(); } else{ this.CloseMessage(); } if(this.now_balloon == null && this.is_loaded == true) { this._show_balloon(); } }; Mascot.prototype.CloseMessage = function() { $(this.now_balloon).fadeOut(1000).delay(1000,function(){$(this).remove();}); this.now_balloon = null; if(this.message_queue.length != 0) { this._show_balloon(); } }; Mascot.prototype.ToSmall = function() { $(this.mascot_img_html).css("width",96); if(this.now_balloon != null) { $(this.now_balloon).css("bottom",$(this.mascot_img_html).height()/2 +16 - $(this.now_balloon).height()/2 + 32); $(this.now_balloon).css("right",$(this.mascot_img_html).width() + 32); } $("#to-top-btn").css("width",$(this.mascot_img_html).width()/2); $("#hisyokan-bookmark").css("width",$(this.mascot_img_html).width()/2); this.is_small = true; localStorage.setItem("custom_dmns_is_small",true); }; Mascot.prototype.ToBig = function() { $(this.mascot_img_html).css("width",256); if(this.now_balloon != null) { $(this.now_balloon).css("bottom",$(this.mascot_img_html).height()/2 +16 - $(this.now_balloon).height()/2 + 32); $(this.now_balloon).css("right",$(this.mascot_img_html).width() + 32); } $("#to-top-btn").css("width",$(this.mascot_img_html).width()/2); $("#hisyokan-bookmark").css("width",$(this.mascot_img_html).width()/2); this.is_small = false; localStorage.setItem("custom_dmns_is_small",false); } var mascot = new Mascot();