b2r/chaikaスキンのsmorgas-lego-exをイメぴたに対応させる方法の覚書2
以前smorgas-lego-exの画像ポップアップをイメぴたに対応させる方法をメモしたが、久しぶりにsmorgas-lego-exを更新したら画像をインラインで埋め込む機能が付いていたので、埋め込み画像の方もイメぴたに対応させた。
リファラに関しては前回の記事と同じ。
埋め込み画像のURL認識はgeneral.jsなので、これを書き換える。「smorgas-lego-ex 20100125」の場合はgeneral.jsの1009行目と1010行目の間に3行ほど挿入(コメント行を除く)。
バージョンが変わった時にも検索しやすいよう、ちょっと前後を広範囲にコピペしておく。見づらいけど気にしない。
※追記:ついでなので、埋め込んだ縮小画像をクリックで拡大したり元に戻せるようにした。方法はちょっと強引だけど。
/** 画像・動画をインライン表示する */ embedImage : function(contextNode, popup, noCheck) { var bodies = ResNodes.getBodies(contextNode, popup); var tmp_str, org_str; if (Alt_enableShowBeIcon) for (var i = 0, n = bodies.length; i < n; i++) { var e = bodies.items(i); tmp_str = org_str = e.innerHTML; tmp_str = tmp_str.replace(/sssp:\/\/(\S+)/, '<img src="http://$1">'); if (tmp_str != org_str) e.innerHTML = tmp_str; } var is_group = SkinPref.getBool("enableEmbedImageGroup", Alt_enableEmbedImageGroup); var f = OutlinkPopup.onMouseOver.bind(OutlinkPopup); var outLinkItems = ResNodes.getOutLinks(contextNode); for (var i = 0, n = outLinkItems.length; i < n; i++) { var node = outLinkItems.items(i); if (ImagePopup.isImage(node.href)) { if (!noCheck) { var is_gro = ImagePopup.isImageGrotesque(ResNodes.getIndexByBody(node.parentNode)); if (is_gro) continue; } // if (!node.nextSibling || node.nextSibling.className != "embed") { if (!node.getAttribute("is_embed")) { if (!Alt_enableEmbedImageWithPopup) node.setAttribute("no_popup", true); // ポップアップを無効化 // node.onmouseover = null; // ポップアップを無効化 var container = _doc.createElement("DIV"); container.className = (is_group) ? "embedLast" : "embedInline"; var img = _doc.createElement("IMG"); img.className = "embedImage"; /** ▽ここから▽ **/ /* イメぴた画像埋め込み */ if(node.href.match(/(http:\/\/imepita\.jp)(\/\d{8}\/\d{6})/i)){ img.src = RegExp.$1 + '/image' + RegExp.$2 ; }else /** △ここまで△ **/ img.src = node.href; // img.addEventListener("error", function() { container.className = "embedError"; }, false); /** ▽ここから▽ **/ /* 埋め込み画像をクリックで拡大/縮小 */ img.setAttribute("onclick","if(this.className=='embedImage'){this.className='embedImageLarge';}else{this.className='embedImage';}"); // 拡大時に画像がはみ出さないようにしたければ、style-my.cssに以下の一行を追記。 // img.embedImageLarge { max-width:100%; } /** △ここまで△ **/ container.appendChild(img); if (is_group) { if (node.parentNode.lastChild.className != "embedGroup") { var box = _doc.createElement("DIV"); box.className = "embedGroup"; node.parentNode.appendChild(box); } node.parentNode.lastChild.appendChild(container); } else { node.parentNode.insertBefore(container, node.nextSibling); } node.setAttribute("is_embed", true); } } else { if (!node.getAttribute("is_embed")) { // if (!Alt_enableEmbedImageWithPopup) node.setAttribute("no_popup", true); // ポップアップを無効化 var e = VideoPopup.getElement(node.href, true); if (e) { var container = _doc.createElement("DIV"); container.className = (is_group) ? "embedLast" : "embedInline"; container.appendChild(e); if (is_group) { if (node.parentNode.lastChild.className != "embedGroup") { var box = _doc.createElement("DIV"); box.className = "embedGroup"; node.parentNode.appendChild(box); } node.parentNode.lastChild.appendChild(container); } else { node.parentNode.insertBefore(container, node.nextSibling); } node.setAttribute("is_embed", true); } } } } },