Jump to content

Admin Custom Files


Martijn Geerts

Recommended Posts

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

post-577-0-91034700-1411212027_thumb.png

post-577-0-61890600-1410710411_thumb.png

Edited by Nico Knoll
Added the "module" tag.
  • Like 14
Link to comment
Share on other sites

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

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

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.

  • Like 1
Link to comment
Share on other sites

@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');
  • Like 1
Link to comment
Share on other sites

Little tutorial for adding a "truncate text" function to a text/textarea fields.
post-577-0-91506400-1411213026_thumb.png
 
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 by Martijn Geerts
update to make truncate plugin language aware
  • Like 6
Link to comment
Share on other sites

  • 3 weeks later...

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

  • Like 2
Link to comment
Share on other sites

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
  • Like 5
Link to comment
Share on other sites

  • 3 weeks later...

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 by Martijn Geerts
fatal error, now fixed. sorry guys
  • Like 2
Link to comment
Share on other sites

  • 3 weeks later...

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 2 weeks later...

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