article_ui hoses custom javascript

richtestani · 2018-10-06 19:31:55

I have a plugin that extends the article_ui, article_image section. I wrote it a while back and worked ok in 4.6, but in 4.7 when I save the article, the script stop working, and the output is removed. If I refresh the page, its reset.

The php portion would write html to the article_image area.
The JavaScript portion would insert and remove images using jQuery to do all the DOM manipulation.
Clicking the save button seems to remove the extended html from that area.

Any ideas what might be happening?

Thanks
Rich

etc · 2018-10-06 22:08:25

Difficult to say without seeing the code. I don’t remember of any big change in this area between 4.6 and 4.7.

jakob · 2018-10-07 11:05:53

richtestani wrote #314453:

I have a plugin that extends the article_ui, article_image section. I wrote it a while back and worked ok in 4.6, but in 4.7 when I save the article, the script stop working, and the output is removed. If I refresh the page, its reset.

That sounds like the async saving on the write panel, but as etc says that was already in 4.6. I’m a bit rusty on what the exact solution was, but I think you need to use:

textpattern.Relay.register('txpAsyncForm.success', yourFunctionName);

in your javascript where yourFunctionName refreshes your UI on the write panel.

I struggled with in my attempt at bringing bot_wtc up to date with txp 4.7.

If you share your code, perhaps someone more knowledgeable can give you more precise advice…

richtestani · 2018-10-09 13:03:18

Sorry for the delayed response on this.

My javascript is setup as a jQuery plugin, which I wanted to encapsulate the functions, so there is a single trigger for the script to run. The following is the JavaScript. The PHP portion is just an html string placed under the article image field.

At the very bottom the script runs. An ‘Add Image’ button is introduced in the write panel under the article image field. The button toggle an overlay of uploaded images. Choosing an image will add the image to your article image field.

When I save the article, the html under the article image field disappears.

How can I keep that from happening?
Thanks
Rich



(function ( $ ) { 

  var selected_images = [];

    var config = [];

    $.fn.ArticleImageSelector = function(options) {

      setupEvents();

    }

    $.fn.ArticleImageSelector.defaults = {
      "id" : "#rlt_article_image_selector",
      "selected" : []
    }

    function setupEvents() {

      updateArticleImages();

      //toggle image overlay interface
      $('#rlt_article_image_selector').on('click', '.rlt-toggle-interface', function(e){

        if($(e.target).hasClass('rlt-toggle-interface')) {

          toggleInterface(e);

        }

      });


      //add image to article list
      $('#rlt_article_image_selector').on('click', '.rlt-image-item', function(e){

        var imgid = $(this).find('a').attr('data-img-id');

        var thisimg = $(this).find('a').attr('data-img-src');

        var imgdata = {
          "imgid" : imgid,
          "src" : thisimg,
          "img" : this
        };

        $.fn.ArticleImageSelector.defaults.selected.push({imgid:imgdata});
        addImage(imgdata);
        toggleImage(this);
        updateArticleImages();


      });


      //remove image from article list
      $('#rlt_selected_images').on('click', 'a.rlt_remove_selected_image', function(){
        removeImage($(this).closest('.rlt_selected_img'));
      });

    }

    function toggleInterface() {
      $('#rlt_article_image_selector_interface').toggleClass('active');
    }

    function addImage(img) {

      var imgsrc = img.src;
      var imgid = img.imgid;
      var html = '';
			html += '<a class="rlt_remove_selected_image">x</a>';
			html += '<a href="javascript:;" class="rlt_img_selector is-selected" data-img-id="'+imgid+'" data-img-src="'+imgsrc+'" style="background-image:url('+imgsrc+');">';
			html += '<div class="rlt_img_selector"></div></a>';

      var div = $('<div class="rlt-image-item rlt_selected_img ">');
      div.html(html);
      $('#rlt_selected_images').append(div);

    }

    function toggleImage(img) {

      $(img).toggleClass('is-hidden');

    }

    function removeImage(img) {

      var imgid = $(img).closest('.rlt_selected_img').find('.rlt_img_selector').attr('data-img-id');
      $(img).closest('.rlt_selected_img').remove();
      var img = $('[data-img-id="'+imgid+'"]').closest('.rlt-image-item');
      toggleImage(img);
      updateArticleImages();


    }

    function updateArticleImages() {
      var imgids = $('#article-image').val();
      var newids = [];
      var curimgs = $('#rlt_selected_images .rlt_selected_img');

      curimgs.each(function(e, i) {

        $.fn.ArticleImageSelector.defaults.selected.push(i);
        var thisid = $(i).find('a.is-selected').attr('data-img-id');
        newids.push(thisid);

      });

      var imgids = newids.join(',');
      $('#article-image').val(imgids);

    }


}( jQuery ));

$('#rlt_selected_images').ArticleImageSelector();

Last edited by richtestani (2018-10-09 13:06:11)

etc · 2018-10-10 10:49:02

richtestani wrote #314496:

When I save the article, the html under the article image field disappears.

I can’t see any reason why this would happen if your php part is of this form:

register_callback('abc_test', 'article_ui', 'article_image');

function abc_test($event, $step, $data, $rs) {
	return $data.n.'<p>Test</p>';
}

<p>Test</p> should persist on article save, please let us know otherwise.

Edit: is there some other plugin attached to ('article_ui', 'article_image') UI?

Last edited by etc (2018-10-10 10:53:33)

richtestani · 2018-10-10 21:03:48

Hey @etc,

Here are my registers:

if ( txpinterface == 'admin' )
{

	$rlt_plugin 	= 'rlt_image_selector';
  add_privs('rlt_image_selector', '1,2');
	register_callback ( 'rlt_article_image_selector_main', 'article_ui', 'article_image');
  register_callback('rlt_image_selector_js', 'admin_side', 'body_end');
  register_callback('rlt_image_selector_css', 'admin_side', 'head_end');
}


//main function and output
function rlt_article_image_selector_main($event, $step, $markup, $row) {
  ...gather and parse data

  return $markup.$wrap;
}
p.

Here is a link to a video of what I am experiencing. (3.5MB)

https://imgur.com/eSDZXoF

richtestani · 2018-10-10 21:05:25

When I save the article, the html under the article image field disappears.

I probably said that wrong – the article image field does not disappear, my rendered html disappears.

Last edited by richtestani (2018-10-10 21:06:07)

etc · 2018-10-10 21:17:41

Ok, then try to append this to your js, as @jakob suggested:

textpattern.Relay.register('txpAsyncForm.success', function() {
    $('#rlt_selected_images').ArticleImageSelector();
});

Strange, though, that the plugin worked in 4.6 without it.

richtestani · 2018-10-11 00:26:51

So to be clear, the previous version of this script that was working ran on:

Textpattern version: 4.6-dev (d24917db2a507321ade6f97a49c3f449)

It seems for this to work properly, I’d want to have my JavaScript do all the html rendering, or store the data in a JavaScript object to reference after save. Would that be correct? Since my script does not render HTML, it just handles some click behaviors. The HTML is rendered with PHP.

The only thing I can think of is maybe in the previous version the form was submitted and the page reloaded instead of an AJAX request.

Thanks
Rich

jakob · 2018-10-11 04:24:48

richtestani wrote #314530:

The only thing I can think of is maybe in the previous version the form was submitted and the page reloaded instead of an AJAX request.

I don’t know exactly at what point that was added in the development process, but that is what I was referring to. The asynchronous save repaints certain portions of the Write tab and your injected source is then wiped in the process. That would explain why it disappears on save but is there again if you reload the page.

Did you have any success with the code etc posted above ? It should trigger your function again following a successful asychnronous save.

Textpattern CMS

Textpattern CMS support forum

#1 2018-10-06 19:31:55