added example for developpers module

2018-01-06 11:28:03 +01:00
parent 5017966908
commit 5ec2f4311c
396 changed files with 26299 additions and 0 deletions
@@ -0,0 +1,4 @@
+.js-weights div {
+    font-size: 20px;
+    font-weight: bold;
+}
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestBlackWeight.
+ */
+
+(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_example.js_weights.black;
+      var newDiv = $('<div></div>').css('color', 'black').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestBlueWeight.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the JS test behavior to weight div.
+   */
+  Drupal.behaviors.jsTestBlueWeight = {
+    attach: function (context, settings) {
+      var weight = drupalSettings.js_example.js_weights.blue;
+      var newDiv = $('<div></div>').css('color', 'blue').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestBrownWeight.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the JS test behavior to weight div.
+   */
+  Drupal.behaviors.jsTestBrownWeight = {
+    attach: function (context, settings) {
+      var weight = drupalSettings.js_example.js_weights.brown;
+      var newDiv = $('<div></div>').css('color', 'brown').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestGreenWeight.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the JS test behavior to weight div.
+   */
+  Drupal.behaviors.jsTestGreenWeight = {
+    attach: function (context, settings) {
+      var weight = drupalSettings.js_example.js_weights.green;
+      var newDiv = $('<div></div>').css('color', 'green').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Contains js for the accordion example.
+ */
+
+(function ($) {
+
+  'use strict';
+
+  $(function () {
+    $('#accordion').accordion();
+  });
+})(jQuery);
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestPurpleWeight.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the JS test behavior to weight div.
+   */
+  Drupal.behaviors.jsTestPurpleWeight = {
+    attach: function (context, settings) {
+      var weight = drupalSettings.js_example.js_weights.purple;
+      var newDiv = $('<div></div>').css('color', 'purple').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,20 @@
+/**
+ * @file
+ * Contains the definition of the behaviour jsTestRedWeight.
+ */
+
+(function ($, Drupal, drupalSettings) {
+
+  'use strict';
+
+  /**
+   * Attaches the JS test behavior to weight div.
+   */
+  Drupal.behaviors.jsTestRedWeight = {
+    attach: function (context, settings) {
+      var weight = drupalSettings.js_example.js_weights.red;
+      var newDiv = $('<div></div>').css('color', 'red').html('I have a weight of ' + weight);
+      $('#js-weights').append(newDiv);
+    }
+  };
+})(jQuery, Drupal, drupalSettings);
@@ -0,0 +1,14 @@
+name: JavaScript Example
+description: Demonstrates JavaScript features in Drupal 8.
+type: module
+package: 'Example modules'
+# core: 8.x
+dependencies:
+  - drupal:node
+  - examples:examples
+
+# Information added by Drupal.org packaging script on 2017-12-17
+version: '8.x-1.x-dev'
+core: '8.x'
+project: 'examples'
+datestamp: 1513537386
@@ -0,0 +1,28 @@
+# A simple script using jquery ui accordion.
+js_example.accordion:
+  js:
+    js/js_example_accordion.js: {}
+  # Build up our dependencies for this page as a library. Our accordion script
+  # needs jquery.ui.accordion. You can find the core scripts under core/assets/.
+  dependencies:
+    - core/jquery.ui.accordion
+
+# Show how weights work.
+js_example.weights:
+  # Add css file.
+  css:
+    component:
+      css/jsweights.css: {}
+  # Add js files.
+  js:
+    # weight is used as example attribute, but please avoid it and instead use
+    # dependencies for order loading.
+    js/red.js: { weight: -4 }
+    js/blue.js: { weight: -2 }
+    js/green.js: { weight: -1 }
+    js/brown.js: { weight: -2 }
+    js/black.js: { weight: -1 }
+    js/purple.js: { weight: -5 }
+  dependencies:
+    - core/jquery
+    - core/drupalSettings
@@ -0,0 +1,18 @@
+# Define default links for this module.
+js_example.info:
+  title: JavaScript Example
+  description: Some information about the JavaScript example.
+  route_name: js_example.info
+  expanded: TRUE
+
+js_example.weights:
+  title: JavaScript weighting in action
+  description: Show list weighting through JavaScript.
+  route_name: js_example.weights
+  parent: js_example.info
+
+js_example.accordion:
+  title: jQuery UI accordion
+  description: jQuery UI accordion demo.
+  route_name: js_example.accordion
+  parent: js_example.info
@@ -0,0 +1,37 @@
+<?php
+
+/**
+ * @file
+ * Examples showing how to use some of the new JavaScript features in Drupal 8.
+ */
+
+/**
+ * @defgroup js_example Example: JavaScript
+ * @ingroup examples
+ * @{
+ * Examples using Drupal 8's built-in JavaScript.
+ *
+ * We have two examples here.
+ *
+ * One 'weights' content and then sorts it by weight. This demonstrates
+ * attaching JavaScript through Drupal's render arrays.
+ *
+ * The other demonstrates adding an accordion effect to content, through
+ * Drupal's theme layer.
+ */
+
+/**
+ * Implements hook_theme().
+ */
+function js_example_theme() {
+  return [
+    'js_example_accordion' => [
+      'template' => 'accordion',
+      'variables' => ['title' => NULL],
+    ],
+  ];
+}
+
+/**
+ * @} End of "defgroup js_example".
+ */
@@ -0,0 +1,23 @@
+js_example.info:
+  path: '/examples/js-example'
+  defaults:
+    _title: 'JavaScript Example Information'
+    _controller: '\Drupal\js_example\Controller\JsExampleController::description'
+  requirements:
+    _permission: 'access content'
+
+js_example.weights:
+  path: '/examples/js-example/weights'
+  defaults:
+    _title: 'JS Example: see weighting in action'
+    _controller: '\Drupal\js_example\Controller\JsExampleController::getJsWeightImplementation'
+  requirements:
+    _permission: 'access content'
+
+js_example.accordion:
+  path: '/examples/js-example/accordion'
+  defaults:
+    _title: 'JS Example: jQuery UI accordion'
+    _controller: '\Drupal\js_example\Controller\JsExampleController::getJsAccordionImplementation'
+  requirements:
+    _permission: 'access content'
@@ -0,0 +1,111 @@
+<?php
+
+namespace Drupal\js_example\Controller;
+
+use Drupal\examples\Utility\DescriptionTemplateTrait;
+
+/**
+ * Controller for Hooks example description page.
+ *
+ * This class uses the DescriptionTemplateTrait to display text we put in the
+ * templates/description.html.twig file.
+ */
+class JsExampleController {
+  use DescriptionTemplateTrait;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function getModuleName() {
+    return 'js_example';
+  }
+
+  /**
+   * Weights demonstration.
+   *
+   * Here we demonstrate attaching a number of scripts to the render array via
+   * a library. These scripts generate content according to 'weight' and color.
+   *
+   * In this controller, on the Drupal side, we do three main things:
+   * - Create a container DIV, with an ID all the scripts can recognize.
+   * - Attach some scripts which generate color-coded content. We use the
+   *   'weight' attribute to set the order in which the scripts are included in
+   *   the library declaration.
+   * - Add the color->weight array to drupalSettings, which is where Drupal
+   *   passes data out to JavaScript.
+   *
+   * Each of the color scripts (red.js, blue.js, etc) uses jQuery to find our
+   * DIV, and then add some content to it. The order in which the color scripts
+   * execute will end up being the order of the content.
+   *
+   * The 'weight' atttribute in libraries yml file determines the order in which
+   * a script is output to the page. To see this in action:
+   * - Uncheck the 'Aggregate Javascript files' setting at:
+   *   admin/config/development/performance.
+   * - Load the page: examples/js_example/weights. Examine the page source.
+   *   You will see that the color js scripts have been added in the <head>
+   *   element in weight order.
+   *
+   * To test further, change a weight in the $weights array below and in library
+   * yml file, then rebuild cache and reload examples/js_example/weights.
+   * Examine the new source to see the reordering.
+   *
+   * @return array
+   *   A renderable array.
+   */
+  public function getJsWeightImplementation() {
+    // Create an array of items with random-ish weight values.
+    $weights = [
+      'red' => -4,
+      'blue' => -2,
+      'green' => -1,
+      'brown' => -2,
+      'black' => -1,
+      'purple' => -5,
+    ];
+
+    // Start building the content.
+    $build = [];
+    // Main container DIV. We give it a unique ID so that the JavaScript can
+    // find it using jQuery.
+    $build['content'] = [
+      '#markup' => '<div id="js-weights" class="js-weights"></div>',
+    ];
+    // Attach library containing css and js files.
+    $build['#attached']['library'][] = 'js_example/js_example.weights';
+    // Attach the weights array to our JavaScript settings. This allows the
+    // color scripts we just attached to discover their weight values, by
+    // accessing drupalSettings.js_example.js_weights.*color*. The color scripts
+    // only use this information for display to the user.
+    $build['#attached']['drupalSettings']['js_example']['js_weights'] = $weights;
+
+    return $build;
+  }
+
+  /**
+   * 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.
+   *
+   * @return array
+   *   A renderable array.
+   */
+  public function getJsAccordionImplementation() {
+    $title = t('Click sections to expand or collapse:');
+    // Build using our theme. This gives us content, which is not a good
+    // practice, but which allows us to demonstrate adding JavaScript here.
+    $build['myelement'] = [
+      '#theme' => 'js_example_accordion',
+      '#title' => $title,
+    ];
+    // Add our script. It is tiny, but this demonstrates how to add it. We pass
+    // our module name followed by the internal library name declared in
+    // libraries yml file.
+    $build['myelement']['#attached']['library'][] = 'js_example/js_example.accordion';
+    // Return the renderable array.
+    return $build;
+  }
+
+}
@@ -0,0 +1,60 @@
+{#
+
+/**
+ * @file
+ * Template file for js_example module.
+ */
+#}
+
+<div class="demo">
+<h2>{{  title }}</h2>
+<div id="accordion">
+  <h3><a href="#">Section 1</a></h3>
+  <div>
+    <p>
+    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.
+    </p>
+  </div>
+  <h3><a href="#">Section 2</a></h3>
+  <div>
+    <p>
+    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.
+    </p>
+  </div>
+  <h3><a href="#">Section 3</a></h3>
+  <div>
+    <p>
+    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.
+    </p>
+    <ul>
+      <li>List item one</li>
+      <li>List item two</li>
+      <li>List item three</li>
+    </ul>
+  </div>
+  <h3><a href="#">Section 4</a></h3>
+  <div>
+    <p>
+    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.
+    </p>
+    <p>
+    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
+    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
+    inceptos himenaeos.
+    </p>
+  </div>
+</div>
+
+</div><!-- End demo -->
@@ -0,0 +1,23 @@
+{#
+
+Description text for the JavaScript Example.
+
+#}
+
+{% trans %}
+
+<p>Drupal includes jQuery and jQuery UI.</p>
+
+<p>We have two examples of using these:</p>
+
+<ol>
+<li>
+<p>An accordion-style section reveal effect: This demonstrates calling a jQuery
+  UI function using Drupal rendering system.
+</li>
+<li>
+<p>Sorting according to numeric weight:  This demonstrates attaching your own
+  JavaScript code to individual page elements using Drupal rendering system.</p>
+</li>
+</ol>
+{% endtrans %}
@@ -0,0 +1,40 @@
+<?php
+
+namespace Drupal\Tests\js_example\Functional;
+use Drupal\Tests\examples\Functional\ExamplesBrowserTestBase;
+
+/**
+ * Functional tests for the js_example module.
+ *
+ * @ingroup js_example
+ *
+ * @group js_example
+ * @group examples
+ */
+class JsExampleTest extends ExamplesBrowserTestBase {
+
+  /**
+   * Modules to install.
+   *
+   * @var array
+   */
+  public static $modules = ['js_example', 'node'];
+
+  /**
+   * Test all the paths defined by our module.
+   */
+  public function testJsExample() {
+    $assert = $this->assertSession();
+
+    $paths = [
+      'examples/js-example',
+      'examples/js-example/weights',
+      'examples/js-example/accordion',
+    ];
+    foreach ($paths as $path) {
+      $this->drupalGet($path);
+      $assert->statusCodeEquals(200);
+    }
+  }
+
+}