Issue #3312568 by jcnventura: Coding standards

This module makes it possible to edit images on the website, with an overlay editing interface, and then save it.

It is based on CamanJS, and logged in users can adjust hue, contrast, vibrance, sepia, and apply several predefined filters on the image.

This module makes it possible to edit images on the website, with an overlay

editing interface, and then save it.

It is based on CamanJS, and logged in users can adjust hue, contrast, vibrance,

sepia, and apply several predefined filters on the image.

Currently it only works for img tags, but we are working on it to make it available for picture elements as well.

Currently it only works for img tags, but we are working on it to make it

available for picture elements as well.

Install: 

1) Download this module

2) Download camanJS (http://camanjs.com/) library and place the minified js file (located in /dist/caman.full.min.js) into the libraries folder. So the final ath of the js file will be '/libraries/caman.full.min.js'. The module was built on version '4.1.1' of camanJS. 

2) Download camanJS (http://camanjs.com/) library and place the minified js

   file (located in /dist/caman.full.min.js) into the libraries folder. So the

   final ath of the js file will be '/libraries/caman.full.min.js'. The module

   was built on version '4.1.1' of camanJS.

3) Install the module the usual way

Usage:

1) Install the module as described above

2) Place an 'Image-edit block' anywhere on your page

3) Grant 'Use Image-Editor to edit images' permission to users who should be able to edit images. 

3) Grant 'Use Image-Editor to edit images' permission to users who should be

   able to edit images.

Part of the frontend-code is based on 

the demo of Monty Shokeen. 

  width: 18px;

  height: 18px;

  background-color: #666;

  border-radius: 100%;

  display: inline-block;

  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;

diff --git a/image_edit.module b/image_edit.module

index 83702c5..7c5b0d6 100644

--- a/image_edit.module

+++ b/image_edit.module

@@ -1,5 +1,5 @@

 <?php

-

+use Drupal\Core\Routing\RouteMatchInterface;

 /**

  * Implements hook_preprocess_HOOK().

@@ -10,4 +10,49 @@ function image_edit_preprocess_image_formatter(&$variables) {

   $variables['image']['#attributes'] = [

     'data-image-id' => $imageItem->getValue()['target_id']

   ];

-}

\ No newline at end of file

+}

+

+/**

+ * @file

+ * This module makes it possible to edit images on the website, with an overlay

+ * editing interface, and then save it.

+ * It is based on CamanJS, and logged in users can adjust hue, contrast,

+ * vibrance, sepia, and apply several predefined filters on the image.

+ * Currently it only works for img tags, but we are working on it to make it

+ * available for picture elements as well.

+ */

+

+/**

+ * Implements hook_help().

+ */

+function image_edit_help($route_name, RouteMatchInterface $route_match) {

+  switch ($route_name) {

+    case 'help.page.image_edit':

+      $readme = __DIR__ . '/README.md';

+      $text = file_get_contents($readme);

+      $output = '';

+

+      // If the Markdown module is installed, use it to render the README.

+      if ($text && \Drupal::moduleHandler()->moduleExists('markdown') === TRUE) {

+        $filter_manager = \Drupal::service('plugin.manager.filter');

+        $settings = \Drupal::configFactory()->get('markdown.settings')->getRawData();

+        $config = ['settings' => $settings];

+        $filter = $filter_manager->createInstance('markdown', $config);

+        $output = $filter->process($text, 'en');

+      }

+      // Else the Markdown module is not installed output the README as text.

+      else if ($text) {

+        $output = '<pre>' . $text . '</pre>';

+      }

+

+      // Add a link to the Drupal.org project.

+      $output .= '<p>';

+      $output .= t('Visit the <a href=":project_link">Image edit project page</a> on Drupal.org for more information.',[

+        ':project_link' => 'https://www.drupal.org/project/image_edit'

+        ]);

+      $output .= '</p>';

+

+      return $output;

+  }

+

+}

diff --git a/image_edit.info.yml b/image_edit.info.yml

index a524062..9de6f32 100644

--- a/image_edit.info.yml

+++ b/image_edit.info.yml

@@ -4,4 +4,4 @@ description: 'Integrates In-Place editing for images displayed'

 core: 8.x

 package: 'Images'

 dependencies:

-  - image

+  - drupal:image

<?php

/**

 * @file

 * This module makes it possible to edit images on the website.

 *

 * It is based on CamanJS, and logged in users can adjust hue, contrast,

 * vibrance, sepia, and apply several predefined filters on the image.

 * Currently it only works for img tags, but we are working on it to make it

 * available for picture elements as well.

 */

use Drupal\Core\Routing\RouteMatchInterface;

/**

  /** @var \Drupal\image\Plugin\Field\FieldType\ImageItem $imageItem */

  $imageItem = $variables['item'];

  $variables['image']['#attributes'] = [

    'data-image-id' => $imageItem->getValue()['target_id']

    'data-image-id' => $imageItem->getValue()['target_id'],

  ];

}

/**

 * @file

 * This module makes it possible to edit images on the website, with an overlay

 * editing interface, and then save it.

 * It is based on CamanJS, and logged in users can adjust hue, contrast,

 * vibrance, sepia, and apply several predefined filters on the image.

 * Currently it only works for img tags, but we are working on it to make it

 * available for picture elements as well.

 */

/**

 * Implements hook_help().

 */

      // Add a link to the Drupal.org project.

      $output .= '<p>';

      $output .= t('Visit the <a href=":project_link">Image edit project page</a> on Drupal.org for more information.', [

        ':project_link' => 'https://www.drupal.org/project/image_edit'

        ':project_link' => 'https://www.drupal.org/project/image_edit',

      ]);

      $output .= '</p>';