diff --git a/js_example/js_example.module b/js_example/js_example.module index c371a55..8968d83 100755 --- a/js_example/js_example.module +++ b/js_example/js_example.module @@ -23,3 +23,30 @@ function js_example_theme() { ), ); } + +/** + * 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 index e047112..3735ed0 100755 --- a/js_example/js_example.routing.yml +++ b/js_example/js_example.routing.yml @@ -1,10 +1,18 @@ +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: - _permission: 'TRUE' + _access: 'TRUE' js_example.accordion: path: '/examples/js_example/accordion' @@ -12,4 +20,4 @@ js_example.accordion: _title: 'JS Example: jQuery UI accordion' _content: '\Drupal\js_example\Controller\JsExampleController::getJsAccordionImplementation' requirements: - _permission: 'TRUE' + _access: 'TRUE' diff --git a/js_example/lib/Drupal/js_example/Controller/JsExampleController.php b/js_example/lib/Drupal/js_example/Controller/JsExampleController.php index 44347c6..a3e3a4c 100755 --- a/js_example/lib/Drupal/js_example/Controller/JsExampleController.php +++ b/js_example/lib/Drupal/js_example/Controller/JsExampleController.php @@ -8,15 +8,33 @@ namespace Drupal\js_example\Controller; /** - * Returns responses for js_example module routes. + * Controller for js_example pages. + * + * @ingroup js_example */ class JsExampleController { + /** + * js_example info page. + */ + public function info() { + $build ['content'] = array( + '#markup' => +'

Drupal includes jQuery and jQuery UI.

+

We have two examples of using these:

+
    +
  1. An accordion-style section reveal effect. This demonstrates calling a jQuery UI function using Drupal's rendering system.
  2. +
  3. Sorting according to numeric 'weight.' This demonstrates attaching your own JavaScript code to individual page elements using Drupal's rendering system.
  4. +
', + ); + return $build; + } /** * Weights implementation. */ public function getJsWeightImplementation() { + // Create an array of items with random-ish weight values. $weights = array( 'red' => 100, 'blue' => 23, @@ -25,13 +43,17 @@ class JsExampleController { 'black' => 5, 'purple' => 60 ); - $build = array(); + // Start building the content. + $build = array(); + // Main container DIV. $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'); + // Attach a CSS file to show which line is output by which script + $build['#attached']['css'] = array(drupal_get_path('module', 'js_example') . + '/css/jsweights.css'); + // Attach some javascript files. $build['#attached']['js'] = array( array( 'data' => drupal_get_path('module', 'js_example') . '/js/red.js', @@ -58,17 +80,21 @@ class JsExampleController { 'weight' => $weights['purple'] ), ); + // Attach the weighted array to our JavaScript settings. $build['#attached']['js'][] = array( 'type' => 'setting', 'data' => array('js_weights' => $weights), ); - return $build; } /** - * Accordion implementation. + * Accordion page implementation. + * + * We're allowing a twig template to define our content in this case, + * which isn't normally how things work, but it's easier to demonstrate + * the JavaScript this way. */ function getJsAccordionImplementation() { $title = t('Click sections to expand or collapse:'); @@ -76,8 +102,14 @@ class JsExampleController { '#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'); + $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/lib/Drupal/js_example/Tests/JsExampleTest.php b/js_example/lib/Drupal/js_example/Tests/JsExampleTest.php new file mode 100644 index 0000000..5fc72ba --- /dev/null +++ b/js_example/lib/Drupal/js_example/Tests/JsExampleTest.php @@ -0,0 +1,52 @@ + 'JavaScript Examples Tests', + 'description' => 'Functional tests for the js_example module', + 'group' => 'Examples', + ); + } + + /** + * Test all the paths defined by our module. + */ + public function testJsExample() { + $paths = array( + 'examples/js_example', + 'examples/js_example/weights', + 'examples/js_example/accordion', + ); + foreach($paths as $path) { + $this->drupalGet($path); + $this->assertResponse(200, 'Visited ' . $path); + } + } + +}