DIY: handy notepad alike "addon" #833

Joduai · 2024-11-05T21:52:41Z

Joduai
Nov 5, 2024

I needed a simple solution allowing me to store some snippets, texts, special chars etcetera, and access them during content creation. Approach is simple: add a hidden page, open it in a modal window, copy/paste/write what I need, close, keep writing content.
Without saving it, switching to another page, and getting back again, as it breaks the workflow.

Code grew a bit more than I expected, but for those who would be interested, it's quite simple to implement.
I switched from loading only static content of the page into iframe, as it allows to edit and save "notepad's" content inside modal window.

add a static page, name it "notepad" (at least its slug), save as draft
edit /system/admin/views/layout.html.php file
add below snippets:

script inside <head> section, below jquery and jquery-ui invoke

<script>
//load page in modal iframe
$(document).ready(function() {
  $('.openIframeModalBtn').on('click', function(e) {
    e.preventDefault();
    var url = $(this).attr('href');
    var iframe = document.getElementById('iframeContent');
    iframe.src = url;
    iframe.onload = function() {
      var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
      var style = iframeDoc.createElement('style');
      style.type = 'text/css';
      style.innerHTML = `
        .main-sidebar, .main-header.navbar, .content-header, .hide-button, #post-settings, #preview-col, #preview-toggle, footer {
          display: none !important;
        }
		#editor-col{display: contents;}
		.content-wrapper{min-height:500px !important;margin:0;}
      `;
      iframeDoc.head.appendChild(style);
    };
    $('#iframeModal').modal('show');
  });
  $('#iframeModal').on('hidden.bs.modal', function () {
    var iframe = document.getElementById('iframeContent');
    iframe.src = 'about:blank';
  });
});
</script>

iframe code between <body> and <div id="top"></div> elements

<!-- modal -->
<div class="modal fade" id="iframeModal" tabindex="-1" role="dialog" aria-labelledby="iframeModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document" style="min-width: 55vw;">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title w-100 text-center" id="iframeModalLabel">Notepad</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <iframe id="iframeContent" src="" frameborder="0" style="width: 100%; height: 400px;"></iframe>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<!-- /modal -->

last thing is the menu item to invoke the modal window
search for  and paste the code in the place you wish to see the button

		  <li class="nav-item">
			<a href="/notepad/edit?destination=admin/draft" class="openIframeModalBtn nav-link" data-toggle="modal" data-target="#myModal">
			 <i class="nav-icon fa-regular fa-file-lines"></i>
			  <p>
				 Notepad
			  </p>
			</a>
		  </li>

That's all.
Hope it will be as useful for you, as it is for me.

ps. remember that changes made in this file pretty sure won't survive htmly update

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DIY: handy notepad alike "addon" #833

{{title}}

Replies: 0 comments

Select a reply

DIY: handy notepad alike "addon" #833

Joduai Nov 5, 2024

Replies: 0 comments

Joduai
Nov 5, 2024