2017 © Pedro Peláez
 

silverstripe-module silverstripe-headjs

Use headjs to load requirements in Silverstripe

image

souldigital/silverstripe-headjs

Use headjs to load requirements in Silverstripe

  • Wednesday, October 14, 2015
  • by tim-lar
  • Repository
  • 5 Watchers
  • 0 Stars
  • 750 Installations
  • JavaScript
  • 0 Dependents
  • 0 Suggesters
  • 2 Forks
  • 3 Open issues
  • 6 Versions
  • 1 % Grown

The README.md

#Silverstripe HeadJS Backend

Use HeadJS for assets loading., (*1)

##Compatibility

Tested with Silverstripe 3.1, (*2)

##Features

  • Async loading of requirements using the native Requirements engine
  • Specific targeting of requirement locations in DOM via SectionedHeadJsBackend
  • Critical js/css files to be required in the head while all other requirements are loaded above the closing body
  • Add JS callbacks to requirements
  • Add dependencies to JS / CSS files

##How do I use this thing?

Setup

If you just want to use the HeadJS integration for your Requirements backend, add the following to your mysite/_config.php, (*3)

Requirements::set_backend(Injector::inst()->get("HeadJsBackend"));, (*4)

If you'd like to use the Sectioned Head JS, add the following to your mysite/_config.php, (*5)

Requirements::set_backend(Injector::inst()->get("SectionedHeadJsBackend"));, (*6)

Adding a callback

An example of adding a callback to a CSS or JS requirement is below:, (*7)

$custom_js = <<<JS
    (function ($) {
        $(document).ready(function () {
            alert("Loaded!");
        });
    })($);
JS;

Requirements::javascript("framework/thirdparty/jquery/jquery.js");
if(method_exists(Requirements::backend(), "add_callback")){
    Requirements::backend()->add_callback("framework/thirdparty/jquery/jquery.js", $custom_js);
}else{
    Requirements::customScript($custom_js, "loadedalert");
}

Adding a dependency

An example of adding a dependency to a CSS or JS requirement is below:, (*8)

Requirements::javascript("framework/thirdparty/jquery/jquery-ui.js");
if(method_exists(Requirements::backend(), "add_dependency")){
    Requirements::backend()->add_dependency("framework/thirdparty/jquery-ui/jquery-ui.js", "framework/thirdparty/jquery/jquery.js");
} 

In the example above, we require jQuery UI, but make sure that it is only loaded after jQuery has loaded. Note that we can add multiple dependent files to the jQuery JS file if we want, but there is a limitation around chaining dependencies; i.e. we can only have a single level of dependency - in the example above, we can not add a new file that is dependent on jQuery UI., (*9)

Specifying a section

An example of specifying a section for a CSS or JS requirement is below:, (*10)

if(method_exists(Requirements::backend(), "add_to_section")){
    Requirements::backend()->add_to_section("framework/thirdparty/jquery/jquery.js", SectionedHeadJsBackend::SECTION_AFTER_BODY_OPEN);
}

Super-specific bugs and their associated fixes

UserForms module validation won't work (it says it can't find jQuery)

There are lots of different ways we can solve this issue, but the simplest one I've found is if you add an extension to the UserDefinedForm_Controller - or even just edit Page_Controller - and add the following to the init() function:, (*11)

class UserDefinedFormHeadJSExtension extends Extension {
    public function afterGenerateConditionalJavascript(){
        if(method_exists(Requirements::backend(), "add_dependency")){
            Requirements::backend()->add_dependency("UserFormsConditional", USERFORMS_DIR . '/javascript/UserForm.js');
        }
    }
}   

Maintainer

Tim - tim@souldigital.com.au, (*12)

Original Repo

silverstripe-headjs by the awesome lekoala, (*13)

The Versions

14/10 2015

dev-master

9999999-dev

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs

14/10 2015

dev-develop

dev-develop

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs

14/10 2015

1.0.2

1.0.2.0

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs

25/08 2015

1.0.1

1.0.1.0

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs

04/08 2015

1.0.0

1.0.0.0

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs

29/07 2015

dev-feature/dependency

dev-feature/dependency

Use headjs to load requirements in Silverstripe

  Sources   Download

BSD-3-Clause

The Requires

 

by Avatar lekoala
by Tim Larsen

module cms silverstripe headjs