I'm trying to start learning Drupal 8 after some exposure to Drupal 7. I'd like to attach a javascript library to every page call. I created a directory for my module called flot_d8 I created an info file, lot_d8.info.yml. My understanding is, the libraries section should insert the javascript on every page load:
name: FLOT-D8 type: module description: 'This module provides a wrapper to the javascript FLOT library.' package: Misc version: 8.x-1.0 core: 8.x hidden: false libraries: - flot_d8/flot
The library file which describes the flot asset is flot_d8.libraries.yml. I placed the flot library in drupal/modules/flot_db/flot:
flot: version: 1.x js: flot/jquery.flot.js: {} dependencies: - core/jquery
I enabled my module and fail to see the inclusion of jquery or foot in the header. My next attempt was to make a flot_d8.module file with a call to hook_page_attachment_alter:
<?php function flot_d8_page_attachments_alter(array &$page) { // Attach the flot asset on every page. $page['#attached']['library'][] = 'flot_d8/flot'; }
Still no dice. Any advice? I'm wanting to begin playing around with getting the flot library working in D8. I'll eventually move the javascript attachment to occur during themeing, but I don't want to attempt that until I can even get the simplest case working.
As background. I've installed the PHP module so I can enter PHP directly into a page. If I insert the scripts and add javascript directly in the page. it works fine. This tells me the files are in the webspace and readable by the outside world:
<script src="http://test.mysite.com/core/assets/vendor/jquery/jquery.js"></script> <script language="javascript" type="text/javascript" src="http://test.mysite.com/modules/flot_d8/flot/jquery.flot.js"></script> <script language="javascript" type="text/javascript" src="http://test.mysite.com/modules/flot_d8/flot/jquery.flot.pie.js"></script> <script type='text/javascript'>//<![CDATA[ $(window).load(function(){ $(function () { var d1 = []; for (var i = 0; i < 14; i += 0.5) d1.push([i, Math.sin(i)]); var d2 = [[0, 3], [4, 8], [8, 5], [9, 13]]; // a null signifies separate line segments var d3 = [[0, 12], [7, 12], null, [7, 2.5], [12, 2.5]]; $.plot($("#placeholder"), [ d1, d2, d3 ]); }); });//]]> </script> <div id="placeholder" style="width:600px;height:300px;"></div>