Script > autocompleteHandleName.js

「Script/autocompleteHandleName.js」の編集履歴（バックアップ）一覧に戻る

Script/autocompleteHandleName.js - (2019/05/10 (金) 00:40:52) のソース

#js(){{
<style type="text/css">
.acHandleName-config {
	color: white;
	user-select: none;
}
.acHandleName-config label {
	vertical-align: -0.2em;
	cursor: pointer;
}
.acHandleName-config input[type="text"] {
	margin-left: 1.8em;
}
.acHandleName-config input[type="checkbox"] {
	margin-right: 0.5em;
	vertical-align: -0.2em;
	transform: scale(1.25);
}
.acHandleName-configButton {
	margin-top: 1px;
	margin-left: 10px;
	border: 2px solid gray;
	border-radius: 4px;
	padding: 2px 3px;
	cursor: pointer;
}
.acHandleName-configItem {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	top: 150%;
	width: max-content;
	box-shadow: 3px 3px 3px rgba(0, 0, 0, .5);
	background-color: rgba(0, 0, 0, .75);
	border: 2px outset #d0d0d0;
	border-radius: 2px;
	padding: 7px;
	transition: opacity .5s, visibility .5s;
}
.acHandleName-active .acHandleName-configItem {
	opacity: 1;
	visibility: visible;
}
#globalNav .acHandleName-configSave {
	width: 50px;
	margin-top: 7px;
	margin-left: auto;
	border: 1px solid gray;
	border-radius: 3px;
	background-color: rgba(88, 88, 88, .8);
	padding: 2px;
	cursor: pointer;
	text-align: center;
	font-weight: bold;
	transition: background-color .2s;
}
#globalNav .acHandleName-configSave:hover {
	background-color: rgba(88, 88, 88, .5);
}
.acHandleName-configSavedMessage {
	display: none;
	position: absolute;
	bottom: 2%;
	left: 45%;
	color: #28a745;
	text-shadow: 2px 2px 3px;
	transform: translate(-50%, -50%);
}
</style>
<script type="text/javascript">
$( function() {
	'use strict';

	// comment_num2プラグインによるフォーム
	const $form = $( '.plugin_comment_num2_form' );
	// ナビバー右上のボタン郡。lengthが3未満なら未ログイン
	const $navItems = $( '#globalNavRight' ).find( '.normal' );
	// 補完するinput, アカウント名, ローカルストレージの保存値
	let $targetInput, handleName, acHandleName, acHandleNameCustom, acHandleNameCustomName;

	if ( !$form.length ) return;

	$targetInput = $form.find( 'input[name="name"]' );
	acHandleName = localStorage.getItem( 'PoteJS_autocompleteHandleName' );
	acHandleName = ( acHandleName === null ) ? 1 : acHandleName === 'true';
	acHandleNameCustom = localStorage.getItem( 'PoteJS_autocompleteHandleName-custom' );
	acHandleNameCustom = acHandleNameCustom === 'true';
	acHandleNameCustomName = localStorage.getItem( 'PoteJS_autocompleteHandleName-customName' );
	handleName = ( acHandleNameCustom ) ? acHandleNameCustomName : $navItems.eq( 0 ).text().trim();

	// 設定UI
	const html = '<li class="acHandleName-config">'
		+ '<div class="acHandleName-configButton">設定</div>'
		+ '<div class="acHandleName-configItem">'
		+ '<div class="acHandleName-configItem__autocomplete">'
		+ '<label>'
		+ '<input type="checkbox" class="inputAutocompleteHandleName"'
		+ ( acHandleName ? 'checked' : '' ) + '>'
		+ 'コメントフォームの名前を自動補完する'
		+ '</label>'
		+ '</div>'
		+ '<div class="acHandleName-configItem__custom">'
		+ '<label>'
		+ '<input type="checkbox" class="inputAutocompleteHandleName-custom"'
		+ ( acHandleNameCustom ? 'checked' : '' )
		+ ' onClick="toggleDisabled( this.checked );">'
		+ '補完する名前を指定する'
		+ '<br>'
		+ '<input type="text" class="inputAutocompleteHandleName-customName" placeholder="補完する名前"'
		+ ( acHandleNameCustomName ? 'value="' + acHandleNameCustomName + '"' : '' )
		+ ( acHandleNameCustom ? '' : 'disabled' ) + '>'
		+ '</label>'
		+ '</div>'
		+ '<div class="acHandleName-configSave">'
		+ '保存'
		+ '</div>'
		+ '<div class="acHandleName-configSavedMessage">'
		+ '保存しました'
		+ '</div></div></li>';
	let $acHandleName;

	$( '.at_header_search_box' ).after( html );
	$acHandleName = $( '.acHandleName-config' );

	// 設定表示切り替え
	$acHandleName.find( '.acHandleName-configButton' ).on( 'click', function() {
		$acHandleName.toggleClass( 'acHandleName-active' );
	} );

	// 設定保存
	$acHandleName.find( '.acHandleName-configSave' ).on( 'click', function() {
		const acIsChecked = $acHandleName.find( '.inputAutocompleteHandleName' ).prop( 'checked' );
		const acCustomIsChecked = $acHandleName.find( '.inputAutocompleteHandleName-custom' ).prop( 'checked' );
		localStorage.setItem( 'PoteJS_autocompleteHandleName', acIsChecked );
		localStorage.setItem( 'PoteJS_autocompleteHandleName-custom', acCustomIsChecked );
		if ( acCustomIsChecked ) {
			const acCustomName = $acHandleName.find( '.inputAutocompleteHandleName-customName' ).val();
			localStorage.setItem( 'PoteJS_autocompleteHandleName-customName', acCustomName );
		}

		$acHandleName.find( '.acHandleName-configSavedMessage' ).slideToggle( 500 );
		setTimeout( function() {
			$acHandleName.find( '.acHandleName-configSavedMessage' ).slideToggle( 500 );
		}, 3000 );
	} );

	if ( acHandleName === 1 ) {
		localStorage.setItem( 'PoteJS_autocompleteHandleName', true );
	}

	// 未ログインでハンネなしなら弾く
	if ( $navItems.length < 3 && !acHandleNameCustom ) return;

	// 自動補完
	if ( acHandleName ) $targetInput.val( handleName );
} );
</script>
<script type="text/javascript">
function toggleDisabled( isChecked ) {
	if ( isChecked ) {
		$( '.inputAutocompleteHandleName-customValue' ).prop( 'disabled', true );
	} else {
		$( '.inputAutocompleteHandleName-customValue' ).prop( 'disabled', false );
	}
}
</script>
}}