Jump to content
Martijn Geerts

Admin Custom Files

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

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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?

  • Like 2

Share this post


Link to post
Share on other sites

… now I can have hover links. …

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

@adrian, 

post-577-0-11068000-1410801268_thumb.png

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

Edited by Martijn Geerts
  • Like 3

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Thanks Martijn,

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

What about hover links for the main admin theme?

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Similar Content

    • By joshua
      This module is (yet another) way for implementing a cookie management solution.
      Of course there are several other possibilities:
      - https://processwire.com/talk/topic/22920-klaro-cookie-consent-manager/
      - https://github.com/webmanufaktur/CookieManagementBanner
      - https://github.com/johannesdachsel/cookiemonster
      - https://www.oiljs.org/
      - ... and so on ...
      In this module you can configure which kind of cookie categories you want to manage:

      You can also enable the support for respecting the Do-Not-Track (DNT) header to don't annoy users, who already decided for all their browsing experience.
      Currently there are four possible cookie groups:
      - Necessary (always enabled)
      - Statistics
      - Marketing
      - External Media
      All groups can be renamed, so feel free to use other cookie group names. I just haven't found a way to implement a "repeater like" field as configurable module field ...
      When you want to load specific scripts ( like Google Analytics, Google Maps, ...) only after the user's content to this specific category of cookies, just use the following script syntax:
      <script type="text/plain" data-type="text/javascript" data-category="statistics" data-src="/path/to/your/statistic/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="marketing" data-src="/path/to/your/mareketing/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="external_media" data-src="/path/to/your/external-media/script.js"></script> <script type="text/plain" data-type="text/javascript" data-category="marketing">console.log("Inline scripts are also working!");</script> The type has to be "optin" to get recognized by PrivacyWire, the data-attributes are giving hints, how the script shall be loaded, if the data-category is within the cookie consents of the user. These scripts are loaded asynchronously after the user made the decision.
      If you want to give the users the possibility to change their consent, you can use the following Textformatter:
      [[privacywire-choose-cookies]] It's planned to add also other Textformatters to opt-out of specific cookie groups or delete the whole consent cookie.
      You can also add a custom link to output the banner again with a link / button with following class:
      <a href="#" class="privacywire-show-options">Show Cookie Options</a> <button class="privacywire-show-options">Show Cookie Options</button> This module is still in development, but we already use it on several production websites.
      You find it here: PrivacyWire Git Repo
      Download as .zip
      I would love to hear your feedback 🙂
      CHANGELOG
      0.1.1 Debugging: fixed error during uninstall 0.1.0 Added new detection of async scripts for W3C Validation 0.0.6 CSS-Debugging for hiding unused buttons, added ProCache support for the JavaScript tag 0.0.5 Multi-language support included completely (also in TextFormatter). Added possibility to async load other assets (e.g. <img type="optin" data-category="marketing" data-src="https://via.placeholder.com/300x300">) 0.0.4 Added possibility to add an imprint link to the banner 0.0.3 Multi-language support for module config (still in development) 0.0.2 First release 0.0.1 Early development
    • By bernhard
      --- Please use RockFinder3 ---
    • By MoritzLost
      Cacheable Placeholders
      This module allows you to have pieces of dynamic content inside cached output. This aims to solve the common problem of having a mostly cacheable site, but with pieces of dynamic output here and there.  Consider this simple example, where you want to output a custom greeting to the current user:
      <h1>Good morning, <?= ucfirst($user->name) ?></h1> This snippet means you can't use the template cache (at least for logged-in users), because each user has a different name. Even if 99% of your output is static, you can only cache the pieces that you know won't include this personal greeting. A more common example would be CSRF tokens for HTML forms - those need to be unique by definition, so you can't cache the form wholesale.
      This module solves this problem by introducing cacheable placeholders - small placeholder tokens that get replaced during every request. The replacement is done inside a Page::render hook so it runs during every request, even if the response is served from the template cache. So you can use something like this:
      <h1>Good morning, {{{greeting}}}</h1> Replacement tokens are defined with a callback function that produces the appropriate output and added to the module through a simple hook:
      // site/ready.php wire()->addHookAfter('CachePlaceholders::getTokens', function (HookEvent $e) { $tokens = $e->return; $tokens['greeting'] = [ 'callback' => function (array $tokenData) { return ucfirst(wire('user')->name); } ]; $e->return = $tokens; }); Tokens can also include parameters that are parsed and passed to the callback function. There are more fully annotated examples and step-by-step instructions in the README on Github!
      Features
      A simple and fast token parser that calls the appropriate callback and runs automatically. Tokens may include multiple named or positional parameters, as well as multi-value parameters. A manual mode that allows you to replace tokens in custom pieces of cached content (useful if you're using the $cache API). Some built-in tokens for common use-cases: CSRF-Tokens, replacing values from superglobals and producing random hexadecimal strings. The token format is completely customizable, all delimiters can be changed to avoid collisions with existing tag parsers or template languages. Links
      Github Repository & documentation Module directory (pending approval) If you are interested in learning more, the README is very extensive, with more usage examples, code samples and usage instructions!
    • By Craig
      I've been using Fathom Analytics for a while now and on a growing number of sites, so thought it was about time there was a PW module for it.
      WayFathomAnalytics
      WayFathomAnalytics is a group of modules which will allow you to view your Fathom Analytics dashboard in the PW admin panel and (optionally) automatically add and configure the tracking code on front-end pages.
      Links
      GitHub Readme & documentation Download Zip Modules directory Module settings screenshot What is Fathom Analytics?
      Fathom Analytics is a simple, privacy-focused website analytics tool for bloggers and businesses.

      Stop scrolling through pages of reports and collecting gobs of personal data about your visitors, both of which you probably don't need. Fathom is a simple and private website analytics platform that lets you focus on what's important: your business.
      Privacy focused Fast-loading dashboards, all data is on a single screen Easy to get what you need, no training required Unlimited email reports Private or public dashboard sharing Cookie notices not required (it doesn't use cookies or collect personal data) Displays: top content, top referrers, top goals and more
    • By daniels
      This is a lightweight alternative to other newsletter & newsletter-subscription modules.
      You can find the Module in the Modules directory and on Github
      It can subscribe, update, unsubscribe & delete a user in a list in Mailchimp with MailChimp API 3.0. It does not provide any forms or validation, so you can feel free to use your own. To protect your users, it does not save any user data in logs or sends them to an admin.
      This module fits your needs if you...
      ...use Mailchimp as your newsletter / email-automation tool ...want to let users subscribe to your newsletter on your website ...want to use your own form, validation and messages (with or without the wire forms) ...don't want any personal user data saved in any way in your ProcessWire environment (cf. EU data regulation terms) ...like to subscribe, update, unsubscribe or delete users to/from different lists ...like the Mailchimp UI for creating / sending / reviewing email campaigns *I have only tested it with PHP 7.x so far, so use on owners risk
      EDIT:
      Since 0.0.4, instructions and changelog can be found in the README only. You can find it here  🙂
      If you have questions or like to contribute, just post a reply or create an issue or pr on github, thanks!
×
×
  • Create New...