Text Box is shown as "display: grid" by default:
|
this.element ().show ('grid'); |
But after applying distraction free then recover, the display mode would become "display: block" because it is simply calling ".show()".
|
* @static distractionFree - Enable or disable the distraction free mode |
|
* where the dialog box is hidden so that the player can look at the characters |
|
* and background with no other elements on the way. A 'transparent' class |
|
* is added to the quick menu when this mode is enabled. |
|
*/ |
|
static distractionFree () { |
|
if (this.global ('playing')) { |
|
// Check if the distraction free is currently enabled |
|
if (this.global ('distraction_free') === true) { |
|
this.element ().find ('[data-component="quick-menu"] [data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"] [data-string]').text (this.string ('Hide')); |
|
this.element ().find ('[data-component="quick-menu"] [data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"] [data-icon]').replaceWith ('<span class="fas fa-eye" data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"></span>'); |
|
this.element ().find ('[data-component="quick-menu"]').removeClass ('transparent'); |
|
this.element ().find ('[data-component="text-box"]').show (); |
|
this.global ('distraction_free', false); |
|
} else { |
|
this.element ().find ('[data-component="quick-menu"] [data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"] [data-string]').text (this.string ('Show')); |
|
this.element ().find ('[data-component="quick-menu"] [data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"] [data-icon]').replaceWith ('<span class="fas fa-eye-slash" data-action="proxy.php?url=https%3A%2F%2Fgithub.com%2FMonogatari%2FMonogatari%2Fissues%2Fdistraction-free"></span>'); |
|
this.element ().find ('[data-component="quick-menu"]').addClass ('transparent'); |
|
this.element ().find ('[data-component="text-box"]').hide(); |
|
this.global ('distraction_free', true); |
|
} |
|
} |
|
} |
Besides, it is really hard to customize the style of text-box if distraction free mode is using inline style. The better approach would be to use class to control the showing or hiding of text-box.