var ep_isEmojipad = false; var ep_ready = false; var ep_loadingNum = 0; var ep_loading = new Array(); var $ep_target = null; var ep_editorMode = 0; // 0:nosupport 1:contentEditable 2:designMode var ep_INPUT_CSS = '/pc/emojipad/input.css'; var ep_EMOJIPAD_URL = '/pc/emojipad/emojipad.html?20080724-1'; var ep_EMOJI_ICON_BASE_PATH = '/pc/emoji/'; $(function() { if (navigator.userAgent.match(/Chrome\/(\d+\.\d+)/)) { setTimeout(function () { ep_onload() }, 100); } else { ep_onload(); } }); function ep_onload() { ep_isEmojipad = ($("#emojipad").length > 0); // 判別 ep_editorMode = ep_getEditorMode(); if (ep_editorMode == 0) return; $(".nosup_emoji").hide(); // ID 付与されていない要素に ID 付与 ep_setAutoId("form", "id_auto_form"); ep_setAutoId("input", "id_auto_input"); ep_setAutoId("textarea", "id_auto_textarea"); // IFRAME 変換 ep_loadingNum = 1; ep_loading['main'] = 1; $(".emoji_input").each(function() { var id = $(this).attr('id'); var w = $(this).width(); var h = $(this).height(); if ($.browser.msie) { w += 6; h += 6; } var iframe = document.createElement('iframe'); var $iframe = $(iframe); ep_loadingNum++; ep_loading[id] = 1; var type = ($(this).attr('type') == 'text') ? 'text' : 'textarea'; $iframe.attr('inputtype', type); $iframe.attr('id', id + '_ifr'); $iframe.attr('class', 'emoji_input2'); if (!$.browser.msie) { $iframe.attr('scrolling', 'yes'); } else { $iframe.attr('scrolling', type == 'text' ? 'no' : 'auto'); } $iframe.css('width', w); if (h < 32 && !$.browser.msie) { $iframe.css('height', 36); } else { $iframe.css('height', h); } $iframe.css('margin', 1); $iframe.load(function() { ep_iframeLoaded(id); }); $(this).hide(); $(this).after($iframe); var iframe_win = iframe.contentWindow; var iframe_doc = iframe_win.document; iframe_doc.open(); iframe_doc.write( '' + '' + '' + ''); iframe_doc.close(); }); ep_iframeLoaded('main'); } function ep_iframeLoaded(id) { if (ep_loading[id] != 1) return; ep_loading[id] = 0; ep_loadingNum--; if (ep_loadingNum == 0) { ep_init2(); } } function ep_getEditorMode() { var mode = 0; var ua = navigator.userAgent; // 検証不足 or 不具合あり if (ua.match(/Opera|Netscape/)) { return 0; } if (ua.match(/Windows/)) { if (ua.match(/Firefox\/(\d+\.\d+)/) && RegExp.$1 >= 2) { mode = 1; } else if (ua.match(/MSIE (\d+.\d+)/) && RegExp.$1 >= 6) { mode = 1; } else if (ua.match(/Chrome\/(\d+\.\d+)/)) { mode = 1; } } else if (navigator.userAgent.match(/Macintosh/)) { if (ua.match(/Firefox\/(\d+.\d+)/) && RegExp.$1 >= 2) { mode = 1; } else if (ua.match(/Safari\/(\d+.\d+)/) ) { mode = 1; } } if (mode == 0) return 0; var elm = document.createElement('div'); elm.innerHTML = "dummy"; elm.contentEditable = "true"; var chk = elm.isContentEditable; $(elm).remove(); if (chk) { return 1; } else if (document.designMode && window.addEventListener) { return 2; } return 0; } function ep_setAutoId(tag, base_name) { var no = 1000; $(tag).each(function() { if ($(this).attr('id') == '') { $(this).attr('id', base_name + "_" + no); no++; } }); } function ep_init2() { $(".emoji_input").each(function() { var id = $(this).attr('id'); var $iframe = $("#" + id + "_ifr"); var doc = $iframe[0].contentWindow.document; if ($(this).val().length > 0 ) { $(doc.body).html( $(this).val() .replace(/&/gi,"&") .replace(/>/gi,">") .replace(/") .replace(/\[([DAV]):([0-9A-F]{4})\]/g, '

') ); } var iframe_win = $iframe[0].contentWindow; var iframe_doc = iframe_win.document; if (ep_isEmojipad) { ep_ifr_addEventListener(iframe_win, 'blur', function() { ep_syncEmojipad() }); ep_ifr_addEventListener(iframe_win, 'unload', function() { ep_syncEmojipad() }); ep_ifr_addEventListener(iframe_win, 'keyup', function() { ep_syncEmojipad(); return true; }); } else { ep_ifr_addEventListener(iframe_win, 'focus', function() { ep_selTarget(id + '_ifr'); }); } ep_ifr_addEventListener(iframe_win, 'keydown', function(e) { var k = e.keyCode; if ( k == 9 ) { // tab // try { // e.returnValue = false; // } catch (e) {} // return false; } if ( k == 13 && !e.shiftKey) { if ($iframe.attr('inputtype') != 'text') { var br = doc.createElement("br"); doc.execCommand("InsertMarquee", false, "tmp_br"); doc.getElementById("tmp_br") .parentNode .replaceChild(br, doc.getElementById("tmp_br")); } try { e.returnValue = false; } catch (e) {} return false; } }); if (ep_editorMode == 2) { iframe_doc.designMode = 'On'; } if (ep_editorMode == 1) { iframe_doc.body.contentEditable = 'true'; } $(this).parents("form").bind( 'submit', function() { ep_onSubmit(id); }); }); } function ep_onSubmit(id) { var d = $("#" + id + "_ifr")[0].contentWindow.document; $("#" + id).val( d.body.innerHTML .replace(/[\x0D\x0A]/g, '') .replace(/<\/p>/gi, '
') .replace(/]*>/gi, '
') .replace(//gi, "\x0a") .replace(/

]*>/gi, '[$1:$2]') .replace(/<.*?>/gi, '') .replace(/ /gi, ' ') .replace(/>/gi, '>') .replace(/</gi, '<') .replace(/"/gi, '"') .replace(/&/gi, '&') ); $("#" + id).val($("#" + id).val().replace(/[\s]+$/, "")); } function ep_selTarget(frame_id) { ep_unselTarget(); $obj = $("#" + frame_id); $ep_target = $obj; var pos = ep_getElementPosition($obj[0]); var x = pos['left']; var y = pos['top']; var w = $obj.width(); var h = $obj.height(); x = parseInt(x, 10); y = parseInt(y, 10); w = parseInt(w, 10); h = parseInt(h, 10); var button = document.createElement('div'); var $button = $(button); $button.html('絵文字'); $button.attr('id', 'ep_openEmojipad'); $button.attr('class', 'ep_openEmojipad'); $button.css ('position', 'absolute'); $button.css ('left', x + w + 6); $button.css ('top', y ); $button.css ('width', 38); $button.css ('background-color', '#ff0000'); $button.css ('display', 'block'); $button.css ('margin', 1); $button.css ('padding', 1); $button.css ('zorder', 99); $obj.after($button); } function ep_unselTarget() { if ($ep_target != null) { $("#ep_openEmojipad").remove(); } $ep_target = null; } function ep_setContent(id, html) { _ep_ifr_doc($("#" + id)).body.innerHTML = html; } function ep_getContent(id) { return _ep_ifr_doc($("#" + id)).body.innerHTML; } function ep_openEmojipad() { if ($ep_target == null) return false; var w = document.body.clientWidth; var h = document.body.clientHeight; w -= 32; h -= 32; // if (w > 600) w = 600; // if (h > 590) h = 590; if (w > 462) w = 462; if (h > 369) h = 369; ep_dialogShow(ep_EMOJIPAD_URL, w, h); // Safari で、iframe の onload が効かないっぽいので。 setTimeout(function () { ep_initEmojipad() }, 500); var $iframe = $("#ep_dialogIframe"); if (ep_editorMode == 1) { $iframe.bind( 'load', function() { ep_initEmojipad(); }); } if (ep_editorMode == 2) { $iframe[0].contentWindow.addEventListener( 'load', function() { ep_initEmojipad(); }, true); } return false; } function ep_initEmojipad() { var $iframe; var $editarea_ifr; try { $iframe = $("#ep_dialogIframe"); $editarea_ifr = _ep_ifr_win($iframe).$("#editarea_ifr"); if (_ep_ifr_win($iframe).ep_ready) return; _ep_ifr_doc($editarea_ifr).body.innerHTML = _ep_ifr_doc($ep_target).body.innerHTML; } catch (e) { return; } var editor_doc = _ep_ifr_doc($ep_target); // IE caret move if (editor_doc.selection && editor_doc.selection.type != 'Control' && editor_doc.body.createTextRange) { try { var rs = editor_doc.selection.createRange(); var rt = editor_doc.body.createTextRange(); rt.setEndPoint('EndToStart', rs); var ht = rt.htmlText .replace(/<\/p>/gi, '
') .replace(/]*>/gi, '
') .replace(//gi, 'B') .replace(/]+>/gi, 'I') .replace(/<[^>]+>/gi, '') .replace(/ /gi, " ") .replace(/>/gi, ">") .replace(/</gi, "<") .replace(/"/gi, '"') .replace(/&/gi, "&") .replace(/\s+/gi, '+') ; hl = ht.length; var rt2 = _ep_ifr_doc($editarea_ifr).body.createTextRange(); rt2.move('character', hl); rt2.select(); } catch (e) {} } _ep_ifr_win($iframe).ep_ready = true; _ep_ifr_win($editarea_ifr).focus(); } function ep_syncEmojipad() { if (!ep_isEmojipad || !ep_ready) return; parent.ep_setContent( parent.$ep_target.attr('id'), ep_getContent('editarea_ifr')); } function ep_addEmoji(url) { if (!ep_isEmojipad || !ep_ready) return; var editor_win = $("#editarea_ifr")[0].contentWindow; var editor_doc = editor_win.document; editor_win.focus(); var rt = null; var hl = null; var mode = 0; // IE if (editor_doc.selection && editor_doc.selection.type != 'Control' && editor_doc.body.createTextRange) { try { var rs = editor_doc.selection.createRange(); rt = editor_doc.body.createTextRange(); rt.setEndPoint('EndToStart', rs); var ht = rt.htmlText .replace(/

/gi, '') .replace(/<\/p>/gi, '
') .replace(//gi, 'B') .replace(/]+>/gi, 'I') .replace(/<[^>]+>/gi, '') .replace(/ /gi, " ") .replace(/>/gi, ">") .replace(/</gi, "<") .replace(/"/gi, '"') .replace(/&/gi, "&") .replace(/\s+/gi, '+') ; hl = ht.length; mode = 2; } catch (e) {} } editor_doc.execCommand('InsertImage', false, url); // IE: キャレット移動 if (mode == 2) { rt.move('character', hl + 1); rt.select(); } } function ep_dialogShow(url, w, h) { $("body").append('

'); $("#ep_dialogBG2").click(ep_dialogClose); $("#ep_dialogWindow") .append(''); $("#ep_dialogWindow") .css('marginLeft', '-' + parseInt((w / 2), 10) + 'px') .css('width', w + 'px'); if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { $("#ep_dialogWindow") .css('marginTop', '-' + parseInt((h / 2), 10) + 'px'); } // shadow var pos = ep_getElementPosition($("#ep_dialogWindow")[0]); var x = pos['left']; var y = pos['top']; var w = $("#ep_dialogWindow").width(); var h = $("#ep_dialogWindow").height(); $("#ep_dialogWindow0") .css('left', x + 4 + "px") .css('top', y + 4 + "px") .css('width', w + 'px') .css('height', h + 'px'); return false; } function ep_dialogClose() { $('#ep_dialogIframe,#ep_dialogWindow,#ep_dialogWindow0,#ep_dialogBG2,#ep_dialogBG1') .trigger("unload").unbind().remove(); if (typeof document.body.style.maxHeight == "undefined") { $("body", "html") .css("height", "auto") .css("width", "auto"); $("html") .css("overflow", ""); } return false; } function ep_getElementPosition(element) { var offsetTrail = element; var offsetLeft = 0; var offsetTop = 0; while (offsetTrail) { offsetLeft += offsetTrail.offsetLeft; offsetTop += offsetTrail.offsetTop; offsetTrail = offsetTrail.offsetParent; } if (navigator.userAgent.indexOf('Mac') != -1 && typeof document.body.leftMargin != "undefined") { offsetLeft += document.body.leftMargin; offsetTop += document.body.topMargin; } return ({left: offsetLeft, top: offsetTop}); } function ep_ifr_addEventListener(w, e, f) { if (ep_editorMode == 1) { $(w.document.body).bind(e, f); } if (ep_editorMode == 2) { w.addEventListener(e, f, true); } } function _ep_ifr_win($iframe) { return $iframe[0].contentWindow; } function _ep_ifr_doc($iframe) { return $iframe[0].contentWindow.document; }