Textpattern CMS

#1 Yesterday 22:32:52

giz

Member

From: New Zealand

Registered: 2004-07-26

Posts: 346

Website GitHub Twitter

all_sideview prototype

Side view is a few lines of prototype css and javascript that add a live article <iframe /> to the Write page. When you save your article, the iframe updates.

It works well when specified in Textpattern’s config.php define('admin_custom_js', 'all_sideview.js');, but loses critical functionality when I convert it to a plugin for easy distribution.

<?php
if( @txpinterface === 'admin' ){
	register_callback('all_sideview','admin_side','head_end');
}

function all_sideview(){
echo <<<INLINE_CODE
<style>
.txp-body:has(#sideview) {
  max-width: 100%;
  display: grid;
  gap: 2em;
  grid-template-columns: minmax(480px,1280px) minmax(360px,1280px);
}

#sideview {
  height: 100%;
  width: 100%;
  overflow: auto;
}

.sideview__button  {
  .ui-icon:last-of-type {
    margin-left: -.125em;
    margin-right: .375em;
  }

}
</style>

<script type="text/javascript">
      $(document).ready(function() {
            if ($('#page-article').length) {
                  const sectionExcluded = '';
                  const sectionSelect = $('#section')[0];

                  const articleSection = sectionSelect.value;
                  var currentUrl = $('#article_partial_article_view').attr('href');

                  if (articleSection != sectionExcluded && currentUrl) {
                        sideView();
                  } else {
                        $('#sideview').remove();
                  }

                  $("form").on("change", function() {
                        if ($('#sideview').length) {
                              document.getElementById('sideview').contentDocument.location.reload(true);
                              console.log('form changed');
                        }
                  });


                  if (currentUrl) {
                        $('.txp-save-zone .txp-actions').append('<a href="" title="View article alongside" class="sideview__button"><span class="ui-icon ui-icon-notice"></span> <span class="ui-icon ui-icon-copy"></span>Sideview</a>');
                        $('.sideview__button').click(function() {
                              if (localStorage.getItem('sideView') != 'true') {
                                    localStorage.setItem('sideView', 'true');
                              } else {
                                    localStorage.setItem('sideView', 'false');
                                    this.removeClass('sideview--active')
                              }
                              sideView();
                              return false;
                        });
                  }
            }

            function sideView() {
                  if (localStorage.getItem('sideView') == 'true') {
                        $('.txp-body').append('<iframe id="sideview" src="' + currentUrl + '"></iframe>');
                  } else {
                        $('#sideview').remove();
                  }
            }

      });</script>

INLINE_CODE;
}

The $("form").on("change", function() {… stops working in the plugin version; clicking ‘Save’ doesn’t reload the iframe. It looks like a script order thing to me, but changing it makes no difference. Type = Admin side, Order=5.

What am I doing rong?

#2 Today 08:14:16

jakob

Admin

From: Germany

Registered: 2005-01-20

Posts: 4,933

Website GitHub

Re: all_sideview prototype

Nice idea!

A couple of things spring to mind:

• Like with jcr_writenav_buttons the other day, you’ll need your plugin to be of Type 4 = admin + async to restore the iframe after clicking save. That’s only necessary for pages like the Write tab that save asynchronously.
• You can also leverage Textpattern’s in-built functionality to inject the css and js. That way they will support CSP if activated. For CSS that is Txp::get('\Textpattern\UI\Style')->setContent($plugin_styles). See bot_wtc_css (called here). Injecting js functions the same way but using Txp::get('\Textpattern\UI\Script')->setContent($plugin_js); (see here for example). In your case, you’d split the inject css and inject js into two functions and register a callback at the top for each.

If setting the plugin type to 4 doesn’t help, maybe you also need to refresh the function on async save as bot_wtc does here.

---

TXP Builders – finely-crafted code, design and txp