[Loris-dev] incorporating javascript into php instrument forms

[Cardillo, Garry]

Hello All,


Hoping you can help me out a little bit more.  I am trying to get custom JS and CSS working on our instrument forms.  We are on 14.12.1.


Here is what I have done:


  1.  Copied the getJS and getCSS code from NDB_Page on github to NDB_Page in my system (code I pulled is below)
  2.  Copied NDB_BVL_Instrument.class.inc from /php/libraries to /project/libraries
  3.  Created folders and files for custom js and css:
     *   /project/instruments/css/css.css
     *   /project/instruments/js/js.js
  4.  Added getJS and getCSS code into NDB_BVL_Instrument.class.inc and pointed the paths to the locations in #3 (code is below)
  5.  Checked and verified the instrument forms are extending the NDB_BVL_Instrument.class.inc file from /project/libraries


Seems like there is one small piece I'm missing somewhere.


I found a file at:  /htdocs/bootstrap/css/custom-css.css that has a section "CSS for instrument forms" and code that I've added there is being referenced by our instruments, which would work fine as a work around, but I still want to apply custom javascript as well, AND I want to find out where I went wrong in the process I outlined above.

Thanks for any insight you can offer.

-Garry


CODE ADDED TO NDB_PAGE FROM GITHUB:

/**

* Returns an ordered list of javascript dependencies that this page depends

* on. These will get loaded into the template in order, so that

* interdependent files can be included in the correct order.

*

* @return array of strings with URLs to retrieve JS resources

*/

function getJSDependencies()

{

$factory = NDB_Factory::singleton();

$config = $factory->config();

$www = $config->getSetting('www');

$baseurl = $www['url'];

$min = ($config->getSetting("sandbox") === '1') ? '' : '.min';

// Currently jquery-ui is required for dialogs and datepickers to work.

// In the future release, dialogs should be replaced with bootstrap dialogs

// and datepickers only created by modernizr

$files = array(

$baseurl . '/js/jquery/jquery-1.11.0.min.js',

$baseurl . '/js/helpHandler.js',

$baseurl . '/js/modernizr/modernizr.min.js',

// Only load minified file on production, not sandboxes

$baseurl . '/js/polyfills.js',

$baseurl . '/js/react/react-with-addons' . $min . '.js',

$baseurl . '/js/react/react-dom' . $min . '.js',

$baseurl . '/js/jquery/jquery-ui-1.10.4.custom.min.js',

$baseurl . '/js/jquery.dynamictable.js',

$baseurl . '/js/jquery.fileupload.js',

$baseurl . '/bootstrap/js/bootstrap.min.js',

$baseurl . '/js/components/Breadcrumbs.js',

$baseurl . '/vendor/sweetalert/sweetalert' . $min . '.js',

$baseurl . "/js/util/queryString.js",

$baseurl . '/js/components/Form.js',

$baseurl . '/js/components/Markdown.js',

);

return $files;

}


/**

* Returns an ordered list of CSS dependencies that this page depends

* on. These will get loaded into the template in order, so that

* interdependent files can be included in the correct order.

*

* @return array of strings with URLs to retrieve CSS resources

*/

function getCSSDependencies()

{

$factory = NDB_Factory::singleton();

$config = $factory->config();

$www = $config->getSetting('www');

$baseurl = $www['url'];

$files = array(

$baseurl . "/bootstrap/css/bootstrap.min.css",

$baseurl . "/bootstrap/css/custom-css.css",

$baseurl . "/js/jquery/datepicker/datepicker.css",

$baseurl . '/vendor/sweetalert/sweetalert.css',

);

return $files;

}


CODE ADDED TO NDB_BVL_INSTRUMENT.CLASS.INC:


function getJSDependencies() {

$factory = \NDB_Factory::singleton();

$baseURL = $factory->settings()->getBaseURL();

$deps = parent::getJSDependencies();

return array_merge(

$deps,

array(

$baseURL . "/project/instruments/js/js.js",

)

);

}


function getCSSDependencies()

{

$factory = \NDB_Factory::singleton();

$baseURL = $factory->settings()->getBaseURL();

$deps = parent::getCSSDependencies();

return array_merge(

$deps,

[$baseURL . "/project/instruments/css/css.css"]

);

}

Garry Cardillo
[1523292633747_image001.png]
Database Analyst/Programmer Intermediate
Department of Radiology
Functional Neuroimaging, Cognitive and Mobility Laboratory
Domino’s Farms  Lobby B Suite 1000
24 Frank Lloyd Wright Dr  PO BOX 362
Ann Arbor, MI 48106
t: 734-936-0630
f: 734-998-8403
e: cardillo at umich.edu
**********************************************************
Electronic Mail is not secure, may not be read every day, and should not be used for urgent or sensitive issues 
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.bic.mni.mcgill.ca/pipermail/loris-dev/attachments/20180514/6e8818fd/attachment.html>