「Script/autocompleteHandleName.js」の編集履歴(バックアップ)一覧はこちら
追加された行は緑色になります。
削除された行は赤色になります。
#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>
}}
#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-customName' ).prop( 'disabled', false );
} else {
$( '.inputAutocompleteHandleName-customName' ).prop( 'disabled', true );
}
}
</script>
}}