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..c371a55 --- /dev/null +++ b/js_example/js_example.module @@ -0,0 +1,25 @@ + array( + 'template' => 'accordion', + 'variables' => array('title' => NULL), + ), + ); +} diff --git a/js_example/js_example.routing.yml b/js_example/js_example.routing.yml new file mode 100755 index 0000000..e047112 --- /dev/null +++ b/js_example/js_example.routing.yml @@ -0,0 +1,15 @@ +js_example.weights: + path: '/examples/js_example/weights' + defaults: + _title: 'JS Example: see weighting in action' + _content: '\Drupal\js_example\Controller\JsExampleController::getJsWeightImplementation' + requirements: + _permission: 'TRUE' + +js_example.accordion: + path: '/examples/js_example/accordion' + defaults: + _title: 'JS Example: jQuery UI accordion' + _content: '\Drupal\js_example\Controller\JsExampleController::getJsAccordionImplementation' + requirements: + _permission: '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..44347c6 --- /dev/null +++ b/js_example/lib/Drupal/js_example/Controller/JsExampleController.php @@ -0,0 +1,84 @@ + 100, + 'blue' => 23, + 'green' => 3, + 'brown' => 45, + 'black' => 5, + 'purple' => 60 + ); + $build = array(); + + $build['content'] = array( + '#markup' => '
' + ); + // Add some css to show which line is output by which script + $build['#attached']['css'] = array(drupal_get_path('module', 'js_example') . '/css/jsweights.css'); + $build['#attached']['js'] = array( + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/red.js', + 'weight' => $weights['red'] + ), + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/blue.js', + 'weight' => $weights['blue'] + ), + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/green.js', + 'weight' => $weights['green'] + ), + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/brown.js', + 'weight' => $weights['brown'] + ), + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/black.js', + 'weight' => $weights['black'] + ), + array( + 'data' => drupal_get_path('module', 'js_example') . '/js/purple.js', + 'weight' => $weights['purple'] + ), + ); + $build['#attached']['js'][] = array( + 'type' => 'setting', + 'data' => array('js_weights' => $weights), + ); + + + return $build; + } + + /** + * Accordion implementation. + */ + function getJsAccordionImplementation() { + $title = t('Click sections to expand or collapse:'); + $build['myelement'] = array( + '#theme' => 'my_accordion', + '#title' => $title, + ); + $build['myelement']['#attached']['library'][] = array('system', 'jquery.ui.accordion'); + $build['myelement']['#attached']['js'][] = array('data' => '(function($){$(function() { $("#accordion").accordion(); })})(jQuery);', 'type' => 'inline'); + return $build; + } + +} diff --git a/js_example/templates/accordion.html.twig b/js_example/templates/accordion.html.twig new file mode 100755 index 0000000..6c54e95 --- /dev/null +++ b/js_example/templates/accordion.html.twig @@ -0,0 +1,60 @@ +{# + +/** + * @file + * Template file for js_example module. + */ +#} + +
+

{{ title }}

+
+

Section 1

+
+

+ 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. +

+
+

Section 2

+
+

+ 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. +

+
+

Section 3

+
+

+ 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. +

+
    +
  • List item one
  • +
  • List item two
  • +
  • List item three
  • +
+
+

Section 4

+
+

+ 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. +

+
+
+ +