Jump to content

Admin Custom Files


Martijn Geerts

Recommended Posts

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/

Link to comment
Share on other sites

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..

  • Like 1
Link to comment
Share on other sites

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)

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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 by Martijn Geerts
  • Like 3
Link to comment
Share on other sites

  • 2 weeks later...

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;
	});
});	
  • Like 2
Link to comment
Share on other sites

  • 1 month later...

@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.

^-^

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

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

  • Like 1
Link to comment
Share on other sites

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.

  • Like 2
Link to comment
Share on other sites

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');
    }
});
Link to comment
Share on other sites

  • 1 month later...

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.

  • Like 1
Link to comment
Share on other sites

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!");
    }
    
});
  • Like 4
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...