Include custom JavaScript in the control panel

Question

I need to be able to add some javascript globally to the Admin section of my site, and i have been using the cp_css_js extension for this which has sort of worked. The thing is that it's super buggy ( running the js-code twice on some pages for instance, and don't get me started on the way you "add" the actual code ).

I have googled for the better part of this day for a nicer way to do this, without luck, but i feel there should be something like wordpress' enqueue_script-function. The only way i have been sort of successful is creating my own plugin, and using the cp->load_package_js() in my mcp.* file, but that only runs when i'm on the actual plugin-page, not globally across the Admin-area.

Does anybody know of a nice way to do this?

Thank you,

/Anders

Answer 1

The cleanest way is to create an accessory add-on that will add your js to all pages in the cp. Here's a basic example called "Default Value." Change the name and code as needed.

---

<?php  if ( ! defined('BASEPATH')) exit('No direct script access allowed');

/**
 * ExpressionEngine Developer Accessory
 *
 * @package     Default Value
 * @category    Accessory
 * @description Sets Calendar Events Display Order field value to 100 automatically (if empty)
 * @author      Shoe Shine Design & Development
 * @link        http://www.shoeshinedesign.com
 */


class Default_value_acc
{
    var $name           = 'Default Value';
    var $id             = 'default_value';
    var $version        = '1.0';
    var $description    = 'Sets Calendar Events Display Order field value to 100 automatically (if empty)';
    var $sections       = array();

    // --------------------------------------------------------------------

    /**
     * Constructor
     */
    function __construct()
    {
        $this->EE =& get_instance();
    } 

    // --------------------------------------------------------------------

    /**
    * Set Sections
    */
    function set_sections()
    {
        // hide accessory from footer tabs
        $this->sections[] = '<script type="text/javascript" charset="utf-8">$("#accessoryTabs a.default_value").parent().remove();</script>';

        // add css, js and html
        ee()->cp->add_to_foot('
        <script type="text/javascript">
            $(document).ready(function() {
                var value=$.trim($("#field_id_42").val());
                if(value.length<1) {
                    $("#field_id_42").val("100");
                }
            });
        </script>
        ');
    }

}
// END CLASS

/* End of file acc.default_value.php */
/* Location: ./system/expressionengine/third_party/default_value/acc.default_value.php */

Answer 2

I often use the cp_menu_array hook for this purpose. It runs on every CP request, and unlike cp_js_end, it doesn't run in a separate HTTP request. You just have to be careful to keep the $menu value, as other extensions might be using the same hook.

public function cp_menu_array($menu)
{
  ee()->javascript->output('$("#publishForm").css("background-color", "pink");');

  if (ee()->extensions->last_call !== FALSE)
  {
    $menu = ee()->extensions->last_call;
  }

  return $menu;
}