• Please note that this section is for questions regarding the forum itself - it is not for fan game-related questions. If you have a question about a fan game, ask in the appropriate thread.

  • Ever thought it'd be cool to have your art, writing, or challenge runs featured on PokéCommunity? Click here for info - we'd love to spotlight your work!
  • It's time to vote for your favorite Pokémon Battle Revolution protagonist in our new weekly protagonist poll! Click here to cast your vote and let us know which PBR protagonist you like most.
  • Welcome to PokéCommunity! Register now and join one of the best fan communities on the 'net to talk Pokémon and more! We are not affiliated with The Pokémon Company or Nintendo.

Issue: Distraction Free textareas

-GiЯ

Banned
  • 119
    Posts
    16
    Years
    • Age 33
    • G IR
    • Earth
    • Seen Nov 30, 2023
    Issue 1 (duplicate id on the button) This should be editor_template_on template, if file structure was kept.
    Code:
    <div class="toolbar-group pull-right editor-mode-dive-only">
      <button tabindex="-1" class="btn btn-default" title="Exit distraction-free mode." id="[COLOR="Red"]editor-button-[COLOR="PINK"]exit[/COLOR]dive[/COLOR]">
        <i class="fa fa-compress"></i>
      </button>
    </div>
    <div class="toolbar-group pull-right editor-mode-dive-hidden">
      <button tabindex="-1" class="btn btn-default" title=""Dive" into distraction-free writing mode." id="editor-button-dive">
        <i class="fa fa-expand"></i>
      </button>
    </div>

    Issue 2 & 3 (when expand button is clicked it submits post.)
    This is a 2 part fix, First the script needs to be taken out of the form section, whether you place at the bottom of the page, or right after the form is up to you.
    Then some code needs to be added so it doesnt trigger the submit button when pressed (because even out of the form, it will still trigger the submit)
    Code in question (PINK indicating code that needs to be added)
    Code:
    <script type="text/javascript">
    if(autoTextAreaHeight == true) {
      $('#{$editorid}_textarea').autoHeight();
    }
    
    $('#editor-button-dive').click(function([COLOR="PINK"]e[/COLOR]) {
      [COLOR="PINK"]e.preventDefault();[/COLOR]
      $("#{$editorid}").addClass("editor-mode-dive");
    });
    
    $('#editor-button-exitdive').click(function([COLOR="PINK"]e[/COLOR]) {
      [COLOR="PINK"]e.preventDefault();[/COLOR]
    		$("#{$editorid}").removeClass("editor-mode-dive");
    	});
    </script>

    Now we got some function.

    With these changes you'll notice the CSS is a little wonky, but these are all easy fixes.

    Notes to change:
    - Textarea needs the scrollbar on dive mode remove overflow-y: hidden; from inline because the jquery already autosizes the height this is not needed
    - the inherit width needs to be removed from .editor-mode-dive textarea
    - controlbar-container needs scrollbars removed and height adjusted
    - the post button will need to be added to the dive mode.

    But I figured someone was stuck somewhere thats why this wasn't fixed, so I thought I'd help. I am a vBulletin developer and I would love to be on the design team!
     
    Last edited:
    That the button's showing up at all is actually an error, probably uncaught because of how often the full editor can find itself used by most. Might fix it up as a bugfix; thanks for your contribution!

    We'll be announcing developer applications soon, though at present we're completely winding down development on the vB-based codebase we currently run on - so much so that I'm the sole maintainer of the old code and even I'm dropping it soon. We'll be searching for developers experienced or learning JavaScript, Node, Ruby and also GraphQL.
     
    Back
    Top