diff --git a/js_example/css/jsweights.css b/js_example/css/jsweights.css new file mode 100755 index 0000000..b454f01 --- /dev/null +++ b/js_example/css/jsweights.css @@ -0,0 +1,4 @@ +div#js-weights div { + font-size: 20px; + font-weight: bold; +} diff --git a/js_example/js/black.js b/js_example/js/black.js new file mode 100755 index 0000000..1a3441e --- /dev/null +++ b/js_example/js/black.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to to weight div. + */ + Drupal.behaviors.jsTestBlackWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.black; + var newDiv = $('
').css('color', 'black').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js/blue.js b/js_example/js/blue.js new file mode 100755 index 0000000..f34b401 --- /dev/null +++ b/js_example/js/blue.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to weight div. + */ + Drupal.behaviors.jsTestBlueWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.blue; + var newDiv = $('').css('color', 'blue').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js/brown.js b/js_example/js/brown.js new file mode 100755 index 0000000..93533ee --- /dev/null +++ b/js_example/js/brown.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to weight div. + */ + Drupal.behaviors.jsTestBrownWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.brown; + var newDiv = $('').css('color', 'brown').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js/green.js b/js_example/js/green.js new file mode 100755 index 0000000..950f109 --- /dev/null +++ b/js_example/js/green.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to weight div. + */ + Drupal.behaviors.jsTestGreenWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.green; + var newDiv = $('').css('color', 'green').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js/purple.js b/js_example/js/purple.js new file mode 100755 index 0000000..e237fad --- /dev/null +++ b/js_example/js/purple.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to weight div. + */ + Drupal.behaviors.jsTestPurpleWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.purple; + var newDiv = $('').css('color', 'purple').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js/red.js b/js_example/js/red.js new file mode 100755 index 0000000..467aa14 --- /dev/null +++ b/js_example/js/red.js @@ -0,0 +1,13 @@ +(function ($, Drupal, drupalSettings) { + "use strict"; + /** + * Attaches the JS test behavior to weight div. + */ + Drupal.behaviors.jsTestRedWeight = { + attach: function(context, settings) { + var weight = drupalSettings.js_weights.red; + var newDiv = $('').css('color', 'red').html('I have a weight of ' + weight); + $('#js-weights').append(newDiv); + } + }; +})(jQuery, Drupal, drupalSettings); diff --git a/js_example/js_example.info.yml b/js_example/js_example.info.yml new file mode 100755 index 0000000..1561660 --- /dev/null +++ b/js_example/js_example.info.yml @@ -0,0 +1,5 @@ +name: 'JavaScript Example' +description: 'An example module showing how to use some of the new JavaScript features in Drupal 8' +type: module +package: 'Example modules' +core: 8.x diff --git a/js_example/js_example.module b/js_example/js_example.module new file mode 100755 index 0000000..8968d83 --- /dev/null +++ b/js_example/js_example.module @@ -0,0 +1,52 @@ + array( + 'template' => 'accordion', + 'variables' => array('title' => NULL), + ), + ); +} + +/** + * Implements hook_menu(). + */ +function js_example_menu() { + $items = array(); + $items['examples/js_example'] = array( + 'title' => 'JavaScript Example', + 'route_name' => 'js_example.info', + 'expanded' => TRUE, + ); + $items['examples/js_example/weights'] = array( + 'title' => 'JS weighting in action', + 'route_name' => 'js_example.weights', + 'expanded' => TRUE, + ); + $items['examples/js_example/accordion'] = array( + 'title' => 'jQuery UI accordion', + 'route_name' => 'js_example.accordion', + 'expanded' => TRUE, + ); + return $items; +} + +/** + * @} End of "defgroup js_example". + */ diff --git a/js_example/js_example.routing.yml b/js_example/js_example.routing.yml new file mode 100755 index 0000000..3735ed0 --- /dev/null +++ b/js_example/js_example.routing.yml @@ -0,0 +1,23 @@ +js_example.info: + path: '/examples/js_example' + defaults: + _title: 'JavaScript Example Information' + _content: '\Drupal\js_example\Controller\JsExampleController::info' + requirements: + _access: 'TRUE' + +js_example.weights: + path: '/examples/js_example/weights' + defaults: + _title: 'JS Example: see weighting in action' + _content: '\Drupal\js_example\Controller\JsExampleController::getJsWeightImplementation' + requirements: + _access: 'TRUE' + +js_example.accordion: + path: '/examples/js_example/accordion' + defaults: + _title: 'JS Example: jQuery UI accordion' + _content: '\Drupal\js_example\Controller\JsExampleController::getJsAccordionImplementation' + requirements: + _access: 'TRUE' diff --git a/js_example/lib/Drupal/js_example/Controller/JsExampleController.php b/js_example/lib/Drupal/js_example/Controller/JsExampleController.php new file mode 100755 index 0000000..a3e3a4c --- /dev/null +++ b/js_example/lib/Drupal/js_example/Controller/JsExampleController.php @@ -0,0 +1,116 @@ + +'Drupal includes jQuery and jQuery UI.
+We have two examples of using these:
++ Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer + ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit + amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut + odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate. +
++ Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet + purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor + velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In + suscipit faucibus urna. +
++ Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. + Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero + ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis + lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. +
++ Cras dictum. Pellentesque habitant morbi tristique senectus et netus + et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in + faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia + mauris vel est. +
++ Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. + Class aptent taciti sociosqu ad litora torquent per conubia nostra, per + inceptos himenaeos. +
+