Hi guys, I have a suggestion/bug fix for MPGH forum.
In mobile view spoilers are bugged
I found out that there is a bug in the spoiler's button code.
Here is my fix to place in onclick=" "
Code:
let spoiler = this.parentElement.parentElement.parentElement.children[1].children[0];
if (spoiler.style.display != '') {
spoiler.style.display = '';
this.innerText = '';
this.value = 'SPOILER: Click to hide';
} else {
spoiler.style.display = 'none';
this.innerText = '';
this.value = 'SPOILER: {OLD VALUE}';
}
Then you have only to replace {OLD VALUE} with value from PHP, let me know if it works, I hope that it helps
PS: If button text doesn't change you can add this after this.value set
Code:
this.previousElementSibling.innerText = this.value;
- - - Updated - - -
There is also a suggestion, to add Select and Copy buttons to CODE sections like I did in this example page:
Code:
<html>
<head>
<script>
function selectText(element, copy = false) {
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
if (copy) document.execCommand('copy')
}
</script>
</head>
<body>
<div style="margin-top:5px; margin-buttom:5px;">
<div class="smallfont" style="margin-bottom:-1px; width:852; height:26">
<right>
<font color="red">
<b> </b>
</font>
</right>
<div data-theme="d" class="ui-btn ui-btn-up-d ui-btn-corner-all ui-shadow" aria-disabled="false">
<span style="display:none" class="ui-btn-inner ui-btn-corner-all" aria-hidden="true">
<span class="ui-btn-text">SPOILER: {OLD VALUE}</span>
</span>
<input type="button" value="SPOILER: {OLD VALUE}" style="color: #4E4E4E; background-color: #EAEAEA; border: 1px solid #CECECE; border-radius: 3px 3px 3px 3px; font-size: 11px; font-weight: bold; margin-top: 10px; padding: 5px;" onclick="
let spoiler = this.parentElement.parentElement.parentElement.children[1].children[0];
if (spoiler.style.display != '') {
spoiler.style.display = '';
this.innerText = '';
this.value = 'SPOILER: Click to hide';
this.previousElementSibling.innerText = this.value;
} else {
spoiler.style.display = 'none';
this.innerText = '';
this.value = 'SPOILER: {OLD VALUE}';
this.previousElementSibling.innerText = this.value;
}" class="ui-btn-hidden" aria-disabled="false">
</div>
</div>
<div>
<div style="display: none; background-color: #EAEAEA; border: 1px solid #CECECE; border-radius: 3px 3px 3px 3px; padding: 10px;">
<br>
<div class="bbcode_container">
<div class="bbcode_description">Code: [ <a href="#" class="view ui-link">View</a>] [ <a href="#" class="select ui-link" onclick="selectText(this.parentElement.nextElementSibling)">Select</a>] [ <a href="#" class="select ui-link" onclick="selectText(this.parentElement.nextElementSibling, true)">Copy text</a>] </div>
<pre class="bbcode_code">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae.</pre>
</div>
</div>
</div>
</div>
</body>
</html>