Page Select edit links

[Macrura]

I need to make a quick and easy way to access the edit page for page selects, usually with AsmSelect;

so far i have been able to use this jquery to turn the label for the AsmSelect into a link to the page editor for that selected page, but i can't figure any easy way to make it into a modal.. anyone else tried to do this yet?

$(function(){
   $('div.InputfieldPageAutocomplete ol li').each(function(){
   var id = $(this).find('span.itemValue').text();
   $(this).find('span.itemLabel').wrapInner(" <a class='edit-modal' href='"+config.urls.admin+"page/edit/?id="+id+"' target='_blank'></a>");
   });
});	

adding this with the AdminCustomFiles assigned to process page edit..

[mr-fan]

On a CustomAdminPage i use this jquery to get the magnific popup working and add the needed ?modal=1 to the edit links of the pagelisttree....

so may it helps:

<style type="text/css" media="screen">
	/**
	 * larget magnific popup
	 */
	.mfp-iframe-holder .mfp-content {
		max-width: 1200px!important;
	}
</style>
<script type="text/javascript">
$(document).ajaxComplete(function() {

		//add trigger class and modal setup
		$('.PageListActionEdit a').each(function(){
		    $(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
		});

		$('.PageListActionNew a').each(function(){
			$(this).addClass("lb-edit").attr("href",$(this).attr('href')+"&modal=1");
		});

		//setup lightbox
		$('.lb-edit').magnificPopup({
			type: 'iframe',
			disableOn: 0
		});
});

</script>

<?php

//get Magnific css and js
$this->modules->get('JqueryMagnific');

regards mr-fan

[kongondo]

Aren't you able to use PW's inbuilt modal?

[mr-fan]

I thought magnific was the inbuilt modal?

On the CustomAdminPage i only have to load the scripts to get it work since they not loaded automatically with this kind of adminpage/process....but the jquery part should work in the "normal" adminpages....but i've not to much experience on this....

[kongondo]

Yes. That and Fancybox (I don't think it has been retired yet). Disregard my comment. I misread the question

[JFn]

You can use the module AdminCustomFiles by Martijn to accomplish this, and add the link via jQuery when 'edit page' loads.

Sunday morning 

[Martijn Geerts]

MagnificPopup should be enabled when you want to do this. By default it's not. You could add the requirements with pure javascript. Something like the below might work. But the better way is like mr-fan mentioned to load the module with $this->modules->get('JqueryMagnific');

var head = document.getElementsByTagName('head')[0],
    first = document.getElementsByTagName('script')[0],
    script = document.createElement("script"),
    style = document.createElement("link");

script.src = '/wire/modules/Jquery/JqueryMagnific/JqueryMagnific.js';
style.href = '/wire/modules/Jquery/JqueryMagnific/JqueryMagnific.css';
style.type = 'text/css';
head.insertBefore(script, first);
head.insertBefore(style, script); 

As mr-fan points out you have to wait on ajaxComplete and attach the handlers to the popup links.

A custom module fits better here then the use of AdminCustomFiles IMHO.

[Macrura]

thanks everyone!

actually the original code was close, i was using the wrong magnific popup type (ajax).. (magnific popup is already loaded on page edit)

added the &modal=1 to the link.. so this is the final custom js file to accomplish this:

$(function(){
	$('div.InputfieldPageAutocomplete ol li').each(function(){
		var id = $(this).find('span.itemValue').text();
		$(this).find('span.itemLabel').wrapInner(" <a class='edit-modal' href='"+config.urls.admin+"page/edit/?id="+id+"&modal=1' target='_blank'></a>");
	});
});	

$(document).ready(function(){
   $('span.itemLabel a').magnificPopup({ type: 'iframe'});
});

As far as a module, yes i think it would be cleaner to have a configurable module where you could somehow set the behavior of the link (new window, lightbox etc.) and then that module could output the linked title for the page select... also I think this code only works on page Autocomplete fields since it targets that particular structure which is an ol > li > span.. 

it does seem like being able to optionally link the title of any page select item to an editor for that item would be a huge time saver in many instances.. right now this is saving me a ton of time!

[Martijn Geerts]

Great you've solved it.