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:
+
+- An accordion-style section reveal effect. This demonstrates calling a jQuery UI function using Drupal's rendering system.
+- Sorting according to numeric 'weight.' This demonstrates attaching your own JavaScript code to individual page elements using Drupal's rendering system.
+
',
+ );
+ 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);
+ }
+ }
+
+}