Module Admin Custom Files

[Martijn Geerts]

Admin Custom Files
Admin Custom Files is a simple module that can add custom javascript plug-ins, scripts and styles to the Processwire admin area.

Instructions are on github.
 
Download module at GitHub
Download at the modules directory

Edited April 18, 2015 by Nico Knoll
Added the "module" tag.

[Martijn Geerts]

Only use this module if you know what you're doing. You can get wicked results .

When you discover 'bugs' in the ProcessWire admin be sure to turn off this Module, this module can be the root of that evil (More likely the results of the inserted scripts). When you used only process based includes, disabling the processes in the module config will prevent the inclusion of the scripts.

When you don't need global files, it's better to bind your scripts to the actual process that is running.

[adrian]

Absolutely love it Martijn - now I can have hover links and debug toggle in the default theme

Lots more potential obviously.

One request - any chance you could make it possible to limit the actions to only certain themes?

[LostKobrakai]

… now I can have hover links. …

If you're talking about the PageTree links, is there any chance to get the code?

[adrian]

Taken from AdminThemeReno, but I think credit actually goes to Nico:

.content .PageList .PageListItem:hover .PageListActions{display:inline;-webkit-transition-delay:.25s;transition-delay:.25s}
.content .PageList .PageListItemOpen .PageListActions{display:none !important;}
.content .PageList .PageListItemOpen:hover .PageListActions{display:inline !important;-webkit-transition-delay:.25s;transition-delay:.25s}

I added the other two lines to hide links on an open parent

[LostKobrakai]

Thanks. I think I'll use this quite often from now

[Martijn Geerts]

One request - any chance you could make it possible to limit the actions to only certain themes?

I thought about that, but have forgotten to add it. I will add it to the JSON config.AdminCustomFiles.

For me that's sufficient.

I'm a bad reader adrian, just seeing that you're inserting CSS. Gonna see what I can do for you.

Edited September 15, 2014 by Martijn Geerts

[adrian]

One request - any chance you could make it possible to limit the actions to only certain themes?

It's not really an issue for me at the moment, but I just thought that in some cases people might want to apply different css/js chunks to different themes and if their users are allowed to select their own theme, then this might be a useful enhancement to your module.

[Martijn Geerts]

@adrian, 

Tomorrow I'll finish, the admin theme based css and js includes. 

Edited September 15, 2014 by Martijn Geerts

[Martijn Geerts]

@adrian, I've pushed an update to github.

Files that start with the AdminThemeName and end with .js or .css are added to the FilenameArrays. 

The admin theme name is also added to the js config.

Changed the hook for the 'delayed' file injection.

$this->addHookAfter('ProcessController::execute', $this, 'injectFiles');

[adrian]

Thanks Martijn,

I haven't had a chance to test yet, but I am sure you've done a great job!

[Martijn Geerts]

Little tutorial for adding a "truncate text" function to a text/textarea fields.

 
Here's a little step by step tutorial how to add javascript behaviour to fields using Admin Custom Files. We are gonna truncate the text length of the title field. The plugin only works for simple text and textarea fields and is language aware. Note that the plugin won't work for TinyMCE or CKEditor a likes.

• Create a file in the Admin Custom Folder called: ProcessPageEdit.js
• Create a file in the Admin Custom Folder called: custom-plugins.js
• Go to custom-plugins.js and copy/paste the plug-in code and save the file.
• Open the ProcessPageEdit.js file and paste in the code from Using the plug-in and save the file.
• Go to the Admin Custom Files module settings
• Select the process ProcessPageEdit
• In the Dependencies textarea type: ProcessPageEdit AdminCustomFiles/custom-plugins.js
• Save the module.
• You're done, go to a page where you have a title field to see the result.

plug-in code:
/site/templates/AdminCustomFiles/custom-plugins.js

(function ($) {
    $.fn.truncate = function(options) {

        var $fields = this,
            name = $fields.attr('name'),
            settings = $.extend({
                characters: 128,
                prefix: '',
                suffix: '',
                class: 'notes'
            }, options );

        if ($fields.parent('.LanguageSupport').length) {
            var $fields = $("#langTabs_Inputfield_" + name ).find("input, textarea");
        }

        $fields.after("<span class='" + settings.class + "'></span>");

        $fields.each(function (index, el) {
            var truncate = function () {
                var value = $(el).val(),
                    typed = typeof value != 'undefined' ? value.length : 0,
                    left = settings.characters - typed;
                if (left < 0) {
                    $(el).val(value.substr(0, settings.characters));
                    truncate();
                } else {
                    $(el).next("span").text(settings.prefix + left + settings.suffix);
                }
            }

            $(el).keyup(function() { truncate(); });
            return truncate();
        });
    };
}(jQuery));

using the plug-in:
/site/templates/AdminCustomFiles/ProcessPageEdit.js

// DOM is ready
$(function () {
    // field with the name attribute title
    $("[name='title']").truncate({
        characters: 64,
        prefix: 'To go: ',
        suffix: ' characters'
    });
});

Edited September 21, 2014 by Martijn Geerts
update to make truncate plugin language aware

[JFn]

Very usefull module, thanks. For me an easy way to inject custom jQuery wizardry into some pages, without touching the core modules.

[Jonathan Lahijani]

I think there may be a small bug with this plugin.

Let's say you do a fresh install of PW (and use the default admin theme).

Then you install Admin Custom Files and check "Include theme based files" and set the folder as "AdminCustomFiles".

Then uou create the folder "AdminCustomFiles" in your /site/ folder and then create a css file called AdminThemeDefault.css, and let's say you modify it so #masthead{background:red !important}

It doesn't load the file.

I think I know the reason...

When using the default admin theme without any other admin theme installed, PW doesn't allow the option to switch admin themes per user.  As a result, even though you are using the default admin theme, it's not specifically SET.  Therefore, to work around this, you have to install another admin theme (like Reno), which then allows you to choose which admin theme a user can have when editing a user.  After specifically setting the admin theme to default, only then does the "AdminThemeDefault.css" load.

Let me know if what I stated is clear, repeatable and/or if you need a video demonstration.

Jonathan

[Martijn Geerts]

Thanks detailed explanation jlahijani. At first I thought it's about the checkbox value not saving, but what you say here makes sense. I'll gonna dive into this, thanks for trying to track this one down.

[Martijn Geerts]

Maintenance Update

• @jlahijani, the bug is fixed. Issue was exact as you described !
• Added the template name to the JSON object ( for ProcessPageEdit process)
• Made the 'Include theme based files' conditional  (PW >= 2.5.0)
• Fixed the empty Theme based files field notes (config settings)
• Fixed a view typos

[Martijn Geerts]

Updated the module.

I've added drop-Ins. Drop-ins are admin custom files that are ready to use. You just have to drop the files in the AdminCustomFiles folder and select the process. Drop-ins are located in the module folder.

2 drop-ins are included:

1. ProcessPageEditTruncate, The truncate function from post #12
2. ProcessPageListLabel, a jquery replacement for FontawesomePageLabel

Ps, AminCustomFiles is open for good drop-ins.

Edited October 31, 2014 by Martijn Geerts
fatal error, now fixed. sorry guys

[adrian]

What about hover links for the main admin theme?

[Martijn Geerts]

drop-it-in

[LostKobrakai]

Error: Exception: Method Pageimage::first does not exist or is not callable in this context (in /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/core/Wire.php line 349)

#0 /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/modules/AdminTheme/AdminThemeReno/AdminThemeRenoHelpers.php(85): Wire->__call('first', Array)

#1 /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/modules/AdminTheme/AdminThemeReno/AdminThemeRenoHelpers.php(85): Pageimage->first()

#2 /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/modules/AdminTheme/AdminThemeReno/default.php(65): AdminThemeRenoHelpers->renderTopNavItems()

#3 /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/core/admin.php(123): require('/Users/Benni/Pr...')

#4 /Users/Benni/Projekte/A-06-2014_HONourables/www2/wire/modules/AdminTheme/AdminThemeReno/controller.php(13): require('/Users/Benni/Pr...')

#5 /Users/Benni/Projekte/A-06-2014_HONourables/www2/site/templates/admin.php(15): require('/Users/Benni/Pr...')

#6 /Users/Benni/Projekte/A-06-2014_HONourables/www2/

This error message was shown because site is in debug mode ($config->debug = true; in /site/config.php). Error has been logged.

I get this error if I try to change a template of a site after creation. If I disable AdminCustomFiles it works just fine. The files I use are just some css and a console.log(), so nothing which should bug the site.

[Martijn Geerts]

Hi LostKobrakai,

When does that error show is that front-end or back-end? What version of PW do you running?

Could you please make a step by step for me so that I could make it reproducible.

[LostKobrakai]

I create a page from the basic-page template in the backend. Than I change to the settings tab, choose another template. After hitting save only the headerbar of the reno theme gets rendered and this error is below. If I deinstall the module I get the page rendered which asks for the database schema change.

PW-Version: 2.5.3

[Martijn Geerts]

I'm sorry i'm unable to reproduce the error. 

If I deinstall the module I get the page rendered which asks for the database schema change.

That's weird, I don't expect scheme changes, what I would expect is field deletion.

[LostKobrakai]

Yeah, that's what I meant They look so similar.

[Macrura]

I've added drop-Ins. Drop-ins are admin custom files that are ready to use. You just have to drop the files in the AdminCustomFiles folder and select the process. Drop-ins are located in the module folder.

 

@Martijn - i'm having trouble understanding what that means... so how would i get ProcessPageEditTruncate.js to load on my PageEdit process - do i need to create a new process?