Product Interwiki Cover
新interwiki構成図
概要: HTMLブロックと似た動きをするInterwiki。ResureさんのInterwikiにカバーを被せているようなイメージで、支部の取得はResureさんのInterwikiからおこなっている。最終的なhtmlを変えているだけ。
呼び出し方:
[[div class="scpnet-interwiki-wrapper"]]
[[module ListPages range="." limit="1"]]
[[iframe http://paranoiac.sakura.ne.jp/interwiki/interwiki_c?lang=jp&page=%%category%%:%%name%%
class="html-block-iframe interwiki-frame" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]
[[/module]]
[[/div]]
モック: トップページのinterwiki。
可変を示す: 実際に大きさが変わっている事を示せるようにinterwikiに色付けを行う。
トップページ呼び出し
[[iframe http://paranoiac.sakura.ne.jp/interwiki/interwiki_c?lang=jp&page=_default:main
class="html-block-iframe test" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]
SCP-001-JP-J呼び出し
[[iframe http://paranoiac.sakura.ne.jp/interwiki/interwiki_c?lang=jp&page=scp-001-jp-j
class="html-block-iframe test" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]
存在しないページの呼び出し
[[iframe http://paranoiac.sakura.ne.jp/interwiki/interwiki_c?lang=jp&page=ゴリラ
class="html-block-iframe test" allowtransparency="true" style="height: 0px;" frameborder="0" scrolling="no"]]
ソースコード:
$lang = ''; if(isset($_GET['lang'])){ $lang = $_GET['lang']; } $page = ''; if(isset($_GET['page'])){ $page = $_GET['page']; } $url = "http://scpnet.org/interwiki/scp-jp/?lang={$lang}&page={$page}"; $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'GET'); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); // curl_execの結果を文字列で返す $response = curl_exec($curl); if(strlen($response) == 0){ exit; } // CSS改変 $response = curl_exec($curl); $pattern = '/\.interwiki \{[^\}]*\}/i'; $replacement = ''; $response = preg_replace($pattern,$replacement,$response); $pattern = '/body \{[^\}]*}/i'; $response = preg_replace($pattern,"body {\n" ." margin:0;\n" ." font-size: 0.80em;\n" ." font-family: Verdana, Arial, Helvetica, sans-serif;\n" ." }\n",$response); $pattern = '/\.interwiki__entry:before \{[^\}]*}/i'; $response = preg_replace($pattern,".interwiki__entry:before { \n" ." content: url('./img/default.png'); \n" ." position: relative; \n" ." bottom: -2px; \n" ." margin-right: 2px; \n" ." }\n",$response); $response = str_replace('class="interwiki"','id="interwiki"',$response); $pattern = '/body \{[^\}]*}/i'; // タグ構成改変 $response = str_replace('</body>','',$response); $response = str_replace('</html>','',$response); curl_close($curl); echo $response; <div id="iframeset"></div> <script type="text/javascript"> // これは巧くやるという意味で、Wikidotの用意した余り使いこなした人のいない機能を使うという意味でHackである var iframeSet; var Container; var oldHeight = 0; var mySite; var blnFirst = true; var strLang = ' echo $lang; '; var strPageName = ' echo $page '; </script> <script type="text/javascript" src="./script/htmlblock.js"></script> </body> </html>
読み込みjavascript:
document.addEventListener("DOMContentLoaded",function(){ mySite = document.referrer; mySite = mySite.split("http://").join(""); mySite = "http://" + mySite.split("/")[0] + "/"; iframeSet = document.getElementById('iframeset'); Container = document.getElementById('interwiki'); if(Container == null || Container == undefined){ return; } Container.addEventListener('resize',getMyHeight); createResizeIframe(); function createResizeIframe(){ var Height = getMyHeight(); var iframe = document.createElement("iframe"); var CacheBreak = String(Math.floor(Math.random() * 10000)); if(Height != oldHeight){ iframeSet.innerHTML = ''; iframe.src = mySite + "common--javascript/resize-iframe.html?" + CacheBreak + "#" + Height + "/interwiki_c?lang="+strLang+"&page="+strPageName; iframe.style.display = "none"; iframeSet.appendChild(iframe); oldHeight = Height; } if(blnFirst)blnFirst = false; setTimeout(createResizeIframe,50); } function getMyHeight() { return iframeSet.getBoundingClientRect().top; }; });
CSS例: interwikiのiframeに追加したクラス、'interwiki-frame'の定義を変える事でデザインの変更を行う。
.scpnet-interwiki-frame{ padding: 10px !important; border: 1px solid #660000 !important; border-radius: 10px; background-color:#FFFFFF; box-shadow: 0 2px 6px rgba(102,0,0,.5); background: #fff; margin: 0; box-sizing: border-box; width: 16.25em !important; } .scpnet-interwiki-frame[style="height: 0px;"]{ background-color:transparent !important; border:none !important; box-shadow:none; paddint:0px !important; } .scpnet-interwiki-frame[style="height:0px;"]{ background-color:transparent !important; border:none !important; box-shadow:none; paddint:0px !important; } /* Borderの設定によってはheight=0にはならないケースがある。都度調整せよ */
page revision: 25, last edited: 08 Mar 2019 15:30