MediaWiki:Gadget-Sensitive.js
ナビゲーションに移動
検索に移動
注意: 保存後、変更を確認するにはブラウザーのキャッシュを消去する必要がある場合があります。
- Firefox / Safari: Shift を押しながら 再読み込み をクリックするか、Ctrl-F5 または Ctrl-R を押してください (Mac では ⌘-R)
- Google Chrome: Ctrl-Shift-R を押してください (Mac では ⌘-Shift-R)
- Internet Explorer / Microsoft Edge: Ctrl を押しながら 最新の情報に更新 をクリックするか、Ctrl-F5 を押してください
- Opera: Ctrl-F5を押してください
var sensitiveMsg = 'この画像はセンシティブな内容を含みます。クリックすると表示されます。';
var width;
var height;
$('.sensitive').each(function() {
if ($(this).find('.thumbinner').length > 0) {
// サムネイルを使っている場合
var $thumbinner = $(this).find('.thumbinner');
width = $thumbinner.width();
height = $thumbinner.height() - $thumbinner.find('.thumbcaption').innerHeight();
// .thumbinner の冒頭に .hide メッセージを追加
$thumbinner.prepend('<div class="hide">' + sensitiveMsg + '</div>');
} else {
// サムネイルを使っていない場合
// .sensitiveの子孫要素のimgのwidthとheightを取得
width = $(this).find('img').width();
height = $(this).find('img').height();
// .sensitiveの直下に.hideをprepend
$(this).prepend('<div class="hide">' + sensitiveMsg + '</div>');
}
// サムネイルを使っている/使っていない 両方に共通する処理
var hide = $(this).find('.hide');
// .hide にstyle属性を指定
hide.css({
'width': width + 'px',
'height': height + 'px',
'position': 'absolute',
'background-color': 'lightgray',
'display': 'grid',
'place-items': 'center',
'cursor': 'pointer',
'padding': '10px',
'box-sizing': 'border-box',
});
// .hide 要素をクリックしたときにそれ自身を非表示にする
hide.click(function() {
$(this).hide();
});
});