編集バーを生やすUserScript
code:script.js
code:_script.js
function ins_init() {
$('body').append('<div class="input_supporter" id="input_supporter"><button class="ins_btn" id="ins_link">[]</button><button class="ins_btn" id="ins_hash">#</button><button class="ins_btn" id="ins_asterisk">*</button><button class="ins_btn" id="ins_slash">/</button><button class="ins_btn" id="ins_greater">></button><button class="ins_btn" id="ins_code"></button><button class="ins_btn" id="ins_period">.</button><button class="ins_btn" id="ins_plus">+</button></div>');
if(location.pathname === "/project_name/") {
$('#input_supporter').addClass('ins_invisible');
}
// domの更新を検知
const target = document.getElementsByClassName("page-wrapper")0; const observer = new MutationObserver((recs) => {
if (!recs0.target.classList.contains("enter")) { if(location.pathname === "/project_name/") {
$('#input_supporter').addClass('ins_invisible');
} else {
$('#input_supporter').removeClass('ins_invisible');
}
}
});
observer.observe(target, {attributes: true, attributeFilter: "class"}); const ins_input = function(value) {
const cursor = document.getElementById('text-input');
cursor.focus();
document.execCommand('insertText', null, value);
};
$('#ins_link').on('touchend', () => ins_input("[]"));
$('#ins_hash').on('touchend', () => ins_input("#"));
$('#ins_asterisk').on('touchend', () => ins_input("*"));
$('#ins_slash').on('touchend', () => ins_input("/"));
$('#ins_greater').on('touchend', () => ins_input("> "));
$('#ins_code').on('touchend', () => ins_input(""));
$('#ins_period').on('touchend', () => ins_input("."));
$('#ins_plus').on('touchend', () => ins_input("+"));
code:style.css
.input_supporter {
position: fixed;
right: 0;
bottom: 0;
left: 0;
justify-content: space-between;
display: none;
width: 100%;
border-radius: 8px 8px 0 0;
box-shadow: rgb(15 15 15 / 5%) 0px 0px 0px 1px, rgb(15 15 15 / 10%) 0px 3px 6px, rgb(15 15 15 / 20%) 0px 9px 24px;
z-index: 300;
}
.ins_btn {
width: 12.5%;
padding: 12px 0;
background: none;
border: none;
}
.ins_btn:not(:first-child) {
}
.ins_invisible {
display: none !important;
}
@media (max-width: 767px) {
.input_supporter {
display: flex;
}
.status-bar {
bottom: 46px;
}
.page-status {
border-bottom: 1px solid var(--tool-light-color, #a9aaaf); border-radius: 3px 0 0 3px;
}
}