Adding custom js (highcharts) to essential theme 2.9

Adding custom js (highcharts) to essential theme 2.9

by Alexander Adadurov -
Number of replies: 7
Hi, I'm using Moodle 2.9 and several custom plugins that uses Highcharts JS library and old style (not AMD) JQuery-based scripts.

Since I installed Essential theme 2.9.1.6 these plugins (JS part) failed to work with errors: “TypeError: HighchartsAdapter is undefined”, “TypeError: k.getOptions is not a function”, “ReferenceError: $ is not defined”. Reading Moodle forums I understood that this is due to new way of loading JQuery (RequireJS). I can rewrite my code in future, but I cannot rewrite external library.

Is there any way (workaround) how I can load JQuery in old way, or any other way to bring these scripts working in Essential theme 2.9.1.6?
Average of ratings: -
In reply to Alexander Adadurov

Re: Adding custom js (highcharts) to essential theme 2.9

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Essential does use the new AMD way for M2.9 and above as per the documentation: https://docs.moodle.org/dev/jQuery - the old way (https://docs.moodle.org/dev/jQuery_pre2.9) is also linked from there if you want to risk it.  However I've never tried both methods at the same time and they could easily conflict.

I have been able to load third-party JS in Shoehorn: https://github.com/gjb2048/moodle-theme_shoehorn/blob/master/amd/src/shoehorn_chart.js#L2 which then loads the library: https://github.com/gjb2048/moodle-theme_shoehorn/blob/master/amd/build/chartist.min.js but clearly it has an AMD factory at the top.

Or contact the plugin developer and ask for the AMD version.

All of this is not trivial.

In reply to Gareth J Barnard

Re: Adding custom js (highcharts) to essential theme 2.9

by Alexander Adadurov -
Oh... Thank you Gareth!

If you familiar with this problem, may be you know if it is possible to fix horizontal scroll bar problem in gradebook report in Essential theme v.2.8?

That was the reason why I moved up to 2.9. In Essential 2.9 gradebook works perfectly, but nothing else (my plugins) work.

I looked through forums but did not find an answer sad
In reply to Alexander Adadurov

Re: Adding custom js (highcharts) to essential theme 2.9

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Hi Alexander,

I have no intent on working on the M2.8 version of Essential any more - the page https://moodle.org/plugins/theme_essential clearly states that 2.8.1.10 was the last release for M2.8.  I cannot go on and on and on and on supporting old versions.

Kind regards,

Gareth

In reply to Gareth J Barnard

Re: Adding custom js (highcharts) to essential theme 2.9

by Alexander Adadurov -

Yes, I perfectly understand that!

Thank you for your reply!

Just, may be you may have any idea what to look at. Together with our programmer we will try to fix gradebook scrollbar in 2.8 theme version, cause it seems easier, than to rewrite all plugins.

At the moment we succeeded in getting that bar right under the grades table, but this works only on one (ours) screen resolution.

In reply to Alexander Adadurov

Re: Adding custom js (highcharts) to essential theme 2.9

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Ok, may I kindly make something clear.  I will not undertake any more modifications / changes / fixes / investigations to Essential for M2.8 and below unless paid to do so.  If you would like me to spend my time on this then kindly spend your money.

In reply to Alexander Adadurov

Re: Adding custom js (highcharts) to essential theme 2.9

by Alexander Adadurov -
Finally some kind of workaround was found to have the horizontal scrollbar and move tabs to the left in Essential 2.8 (the one before AMD and RequireJS style). However this does not fix the floating 1st column blush

To get the h.scrollbar back and to move gradebook tabs to the left, you need to add a few lines to the theme css   (Site administration-->Appearance-->Themes-->Essential-->General):

#region-bs-main-and-pre .row-fluid {
    overflow:auto;
}
.nav-pills, .nav-tabs {
    text-align: left !important;
}
In reply to Alexander Adadurov

Re: Adding custom js (highcharts) to essential theme 2.9

by Alexander Adadurov -

Finally we have found the solution, that fixes scrollbar and floating row&column problem in gradebook of Essential theme 2.8.

To fix that the following css code should be added to the theme custom css (Site administration-->Appearance-->Themes-->Essential-->General):

.nav-pills, .nav-tabs {
    text-align: left !important;
}

.path-grade-report-grader .gradeparent {
  position: relative;
}

#page-grade-report-grader-index #page #page-content #region-main {
  overflow-x: visible;
  width: auto;
}

.path-grade-report-grader .gradeparent {
  position: relative;
}

#page-grade-report-grader-index #page #page-content #region-main {
  overflow-x: visible;
  width: auto;
}

#page {
  overflow: visible !important;
}