Module Admin Custom Files

[Martijn Geerts]

Hi Macrura, for a full description for the truncate script: follow this guide

How the loading works:
1. Select ProcessPageEdit process in the module settings.

2. Add the file starting with ProcessPageEdit in the AdminCustomFiles folder (ie: ProcessPageEditTruncate.js)

The AdminCustomFiles should be present in /site/templates/

[Macrura]

ok thanks - got it now..

here's a drop in i'm working on: AsmSelectLinks - which adds links so you can edit your Asm and Page Autocomplete pages by clicking on them.. this is a rough first version, but i think it can get better.

The only major issue is with the loading of magnific which would be required; i guess this will probably need to be a module, so that it can load the magnific and the 2 files..

javascript:

    $(function(){
        $('div.InputfieldPageAutocomplete').each(function(){
                   
            $('ol li', this).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>");
            });            
        });

        $('div.InputfieldAsmSelect').each(function(){
            $('select option', this).each(function(){
                id = $(this).val();
                rel = $(this).attr('rel');    
                $('li.asmListItem[rel='+rel+']').find('span.asmListItemLabel').wrapInner(" <a class='edit-modal' href='"+config.urls.admin+"page/edit/?id="+id+"&modal=1' target='_blank'></a>");
            });    
        });        

        $('div.InputfieldPageListSelectMultiple').each(function(){
                   
            $('ol li', this).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(){
       $('a.edit-modal').magnificPopup({ type: 'iframe'});
    });

css:

.mfp-iframe-holder .mfp-content {
		max-width: 1200px!important;
	}
	
a.edit-modal:hover {
    text-decoration: underline;
}

... this feature has been a huge time saver because (especially during development) you often need to edit/access those pages that are being selected..

planning on also getting it to work with page list selects..

[Martijn Geerts]

The only major issue is with the loading of magnific which would be required; i guess this will probably need to be a module, so that it can load the magnific and the 2 files..

If you place the url of magnific.js in the textarea of the module it should get loaded. Or if you type the process name followed by the url it only loads when the process if active (and selected).

example:

ProcessPageEdit path/to/magnific.js   (relative to templates folder,  ProcessPageEdit process must be selected)

[Macrura]

hey Martijn- that's another cool tip -thanks a lot!;

in this case i'm loading the scripts in a module (sort of a site utility module that i use on all sites..) like this:

$this->config->scripts->add($this->config->urls->JqueryMagnific . 'JqueryMagnific.js');
$this->config->styles->add($this->config->urls->JqueryMagnific . 'JqueryMagnific.css');

so seeing that the js is expecting their to be a modal script loaded, i think to make this more manageable i should just finish the support for page list selects and then make it a module...

[Joss]

Hi Macura

Was just thinking that this is a useful function for the pages field even on a single select. I am thinking here of categories where you might want to add a new category on the fly, and then also edit the contents of the category page, without having to edit separately.

[Macrura]

Hi Joss,

ok sure - i'll take a look at the single selects and update the module asap;

you're right that the need to quickly edit a select by going to its page is probably not exclusive to the multi selects... wonder if this could be enabled for radios and checkboxes...

i guess when one one installs the module, you would comment out the areas you don't need, and also you can change the classes that the jquery targets to fine-tune which page selects get the edit links.

you could also control if it loads in lightbox or new window or same window by changing the jquery wrapinner markup;

we used a lot of 'new window' links on this record label site because it was easy to create or select a few artists and then click all their names and bring up all of the page editors for each artist in a new window..

here is the code needed to add to the js file:

// add links to Plain Page Selects. Change the class to target specific fields.

$('div.InputfieldSelect').each(function(){	   
	id = $(this).find('select option:selected').val();
	if(id > 1) {
		$(this).append("<div class='page-link'> <a class='edit-modal' href='"+config.urls.admin+"page/edit/?id="+id+"&modal=1' target='_blank'><i class='fa fa-edit'></i></a></div>");
	};
});		

i added this to the css to make the links into an icon that floats to the right of the page select;

div.page-link {
    float: right;
}

this doesn't yet account for the change on the select;

would need to write some more js to get the link to update if the select changes so the link would be correct before saving

[LostKobrakai]

I just updated to 2.5.14 and AdminCustomFiles refuses to save it's settings, while other modules still work.

[Mike Rockett]

Interestingly enough, the same happened to me whilst I was developing Advanced Redirects the other day. Upgraded to 2.5.14, and my module wouldn't save. Holding back onto 13 for dear life (for now, hehe).

[Martijn Geerts]

@LostKobrakai & Mike Anthony

Yesterday Raymond had the module installed on a fresh dev PW (is that  2.5.14? ): no problems.

Gonna try to duplicate the no saving tonight on my local machine.

[adrian]

I am having the same problem and it is affecting other modules too:

https://processwire.com/talk/topic/4865-custom-upload-names/?p=84264

Not sure if it is relevant, but my 2.5.14 is not a fresh install though.

[Martijn Geerts]

Not sure if it is relevant, but my 2.5.14 is not a fresh install though.

Here the same, but switching wire folders reveals the bug. (switch between, 2.5.7 and 2.5.14)

// here $data is an empty array, but it shouldn't. Think Ryan has broke something. 
public static function getModuleConfigInputfields(array $data) { }

I've posted an issue on github. Edited January 8, 2015 by Martijn Geerts

[Mike Rockett]

Thanks, Martijn.

[Martijn Geerts]

Found the issue, posted a possible solution on GitHub.

[Macrura]

Here's a drop-in paste-in for getting the "view" tab on the edit screen to open in a new window:

(put this in your ProcessPageEdit.js )

$(function(){
	 $('a#_ProcessPageEditView').click(function(){
	 	window.open(this.href);
	 	return false;
	});
});	

[horst]

@Martijn: I have installed this the first time now because I needed to overwrite some Admin Theme styles and also add some new.

An awesome experience, - I just installed it, tipped the checkbox for including the AdminTheme-files and dropped the css files into templates/AdminCustomFiles.

[Macrura]

if you need the view links in the page list to open in new window (which i do on almost every project), got this from here:

https://processwire.com/talk/topic/1769-view-in-admin-template/?p=74946

$(document).ajaxComplete(function(){
	addtargetblank();
});

function addtargetblank(){
	$('li.PageListActionView a').each(function(){
		if($(this).attr('target') == undefined){
			$(this).attr('target','_blank');
		}
	});

	if($('#_ProcessPageEditView').attr('target') == undefined){

            $('#_ProcessPageEditView').attr('target','_blank');
        }
} 

add to ProcessPageList[something].js

[owzim]

I hope this kind of nasty and unmaintainable JS hacking when dealing with customization of behavior in admin (e.g. via modules) will not be necessary in the future. Proper standardization for PW JS stuff, like marginally discussed on this issue.

[adrian]

if you need the view links in the page list to open in new window (which i do on almost every project), got this from here:

https://processwire.com/talk/topic/1769-view-in-admin-template/?p=74946

$(document).ajaxComplete(function(){
	addtargetblank();
});

function addtargetblank(){
	$('li.PageListActionView a').each(function(){
		if($(this).attr('target') == undefined){
			$(this).attr('target','_blank');
		}
	});

	if($('#_ProcessPageEditView').attr('target') == undefined){

            $('#_ProcessPageEditView').attr('target','_blank');
        }
} 

add to ProcessPageList[something].js

Doesn't this need to be broken up into two files, or am I missing something?

ProcessPageList.js

$(document).ajaxComplete(function(){    
    $('li.PageListActionView a').each(function(){
        if($(this).attr('target') == undefined){
            $(this).attr('target','_blank');
        }
    });
});

ProcessPageEdit.js

$( document ).ready(function() {
    if($('#_ProcessPageEditView').attr('target') == undefined){
        $('#_ProcessPageEditView').attr('target','_blank');
    }
});

[Macrura]

@adrian - not sure - i copied it from that referenced thread, and i had assumed it only applied to the page tree, but i'll try taking out that part and see if it still works..

[mr-fan]

@Martijn Geerts

THIS module is a really great one!

Thank you very much - just experimented with it a little bit and result is:   easy == awesome

best regards mr-fan

[Martijn Geerts]

I leveled your posts to likes ratio Great you like the module !

[Beluga]

How do I use the config data? I want to restrict a CSS style to a role.

So I understand I need to put in the Dependencies field:

AdminCustomFiles/myconfig.js
 

But what do I put as the contents of that .js file?

The example in the module page gives no help:

var config = {
    "AdminCustomFiles": {
        "adminTheme": "AdminThemeReno"
        "process": "ProcessPageEdit",
        "host": "domain.net",
        "user": {
          "id": 41,
          "name": "admin",
          "email": "user@domain.net",
          "roles": [
            "guest",
            "superuser"
          ]
        },

Why is there a specific user id and a specific process? How can I do it for all users with a specific role and just take the processes defined in the module settings? What if I don't use the Reno theme?

Thanks.

[Martijn Geerts]

The process is the process that is running. (Admin pages have this process assigned on the page)

The roles are the roles the logged-in user has.

Admin theme should not matter.

// not tested, but should give a clue....
$(function () {

    var customrole = 'editor',
        info = config.AdminCustomFiles;
    
    if (info.user.roles[customrole].length) {
        $('#element').addClass('hide-me');
        console.log('Do your stuff');
    } else {
        console.log("Don't do it!");
    }
    
});

[Beluga]

Thanks. Your example didn't work as-is (determining if customrole is in the array), so I did some research and came up with this (makes use of jQuery in the CSS loading part):

$(function () {

    var customrole = 'superuser',
        info = config.AdminCustomFiles;

    function getRole(){
        var arr = info.roles;
        for(var j = 0; j<arr.length;j++ ){
            if(arr[j] == customrole){
                return true;
            }
        }
    }

    if (getRole() === true) {     
       loadCSS = function(href) {
           var cssLink = $("<link rel='stylesheet' type='text/css' href='"+href+"'>");
           $("head").append(cssLink);
       };
       loadCSS("/site/templates/AdminCustomFiles/piilota-kielet.css");
    } else {
        console.log("Don't do it!");
    }    

});

CSS for hiding all but default language:

.LanguageSupport {
  display: none;
}
.LanguageSupport:nth-of-type(1) {
  display: block;
}

Edit: switched from :first-child to :nth-of-type(1) so that we can see the Name field when adding a page.

Edit 3 years later: the new version changed the JSON data, so info.user.roles is now simply info.roles

[Martijn Geerts]

When you name your file ProcessPageEditHide.css it will be loaded when ProcessPageEdit is active and selected in the settings.