1.2.9

Image quality : use CgRange Field

cgwebp.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <extension type="plugin" version="4.0" group="system" method="upgrade">
     <name>System - CG Webp</name>
-    <creationDate>2024-09-19</creationDate>
+    <creationDate>2024-10-06</creationDate>
     <author>ConseilGouz</author>
 	<copyright>Copyright (C) 2024 ConseilGouz. All rights reserved.</copyright>
 	<license>GNU/GPL</license>
     <authorEmail>[email protected]</authorEmail>
     <authorUrl>https://www.conseilgouz.com</authorUrl>
-    <version>1.2.8</version>
+    <version>1.2.9</version>
     <description>PLG_SYSTEM_CGWEBP_DESCRIPTION</description>
     <namespace path="src">Conseilgouz\Plugin\System\Cgwebp</namespace>
     <scriptfile>script.cgwebp.php</scriptfile>
@@ -24,6 +24,7 @@
 	</languages>
 	<media destination="plg_system_cgwebp" folder="media">
 		<folder>js</folder>
+        <folder>css</folder>
 		<folder>_cache</folder>
 		<filename>index.html</filename>
 	</media>

filters.xml

@@ -10,7 +10,7 @@
         <option value="jpg|jpeg|JPG|JPEG">JPG/JPEG</option>
         <option value="png|PNG">PNG</option>
     </field>
-    <field name="quality" type="integer" 
+    <field name="quality" type="cgrange" 
            label="PLG_SYSTEM_CGWEBP_QUALITY" description="PLG_SYSTEM_CGWEBP_QUALITY_DESC" 
            first="1" last="100" default="60" step="1" required="required" />
     <field name="stored_time" type="hidden" label="PLG_SYSTEM_CGWEBP_STORED_TIME"

layouts/cgrange.php

@@ -0,0 +1,81 @@
+<?php
+/**
+ * @package		CG Webp system plugin
+ * @author		ConseilGouz
+ * @copyright	Copyright (C) 2024 ConseilGouz. All rights reserved.
+ * @license		GNU/GPL v3; see LICENSE.php
+ **/
+
+defined('_JEXEC') or die;
+use Joomla\CMS\Factory;
+
+extract($displayData);
+
+/** @var Joomla\CMS\WebAsset\WebAssetManager $wa */
+$wa = Factory::getApplication()->getDocument()->getWebAssetManager();
+$wa->registerAndUseStyle('cgrange', 'media/plg_system_cgwebp/css/cgrange.css');
+$wa->registerAndUseScript('cgrange', 'media/plg_system_cgwebp/js/cgrange.js');
+
+
+/**
+ * Layout variables
+ * -----------------
+ * @var   string   $autocomplete    Autocomplete attribute for the field.
+ * @var   boolean  $autofocus       Is autofocus enabled?
+ * @var   string   $class           Classes for the input.
+ * @var   string   $description     Description of the field.
+ * @var   boolean  $disabled        Is this field disabled?
+ * @var   string   $group           Group the field belongs to. <fields> section in form XML.
+ * @var   boolean  $hidden          Is this field hidden in the form?
+ * @var   string   $hint            Placeholder for the field.
+ * @var   string   $id              DOM id of the field.
+ * @var   string   $label           Label of the field.
+ * @var   string   $labelclass      Classes to apply to the label.
+ * @var   boolean  $multiple        Does this field support multiple values?
+ * @var   string   $name            Name of the input field.
+ * @var   string   $onchange        Onchange attribute for the field.
+ * @var   string   $onclick         Onclick attribute for the field.
+ * @var   string   $pattern         Pattern (Reg Ex) of value of the form field.
+ * @var   boolean  $readonly        Is this field read only?
+ * @var   boolean  $repeat          Allows extensions to duplicate elements.
+ * @var   boolean  $required        Is this field required?
+ * @var   integer  $size            Size attribute of the input.
+ * @var   boolean  $spellcheck      Spellcheck state for the form field.
+ * @var   string   $validate        Validation rules to apply.
+ * @var   string   $value           Value attribute of the field.
+ * @var   array    $checkedOptions  Options that will be set as checked.
+ * @var   boolean  $hasValue        Has this field a value assigned?
+ * @var   array    $options         Options available for this field.
+ * @var   array    $inputType       Options available for this field.
+ * @var   string   $accept          File types that are accepted.
+ * @var   string   $dataAttribute   Miscellaneous data attributes preprocessed for HTML output
+ * @var   array    $dataAttributes  Miscellaneous data attribute for eg, data-*.
+ */
+
+// Initialize some field attributes.
+$attributes = [
+    $class ? 'class="form-cgrange ' . $class . '"' : 'class="form-cgrange"',
+    !empty($description) ? 'aria-describedby="' . ($id ?: $name) . '-desc"' : '',
+    $disabled ? 'disabled' : '',
+    $readonly ? 'readonly' : '',
+    !empty($onchange) ? 'onchange="' . $onchange . '"' : '',
+    !empty($max) ? 'max="' . $max . '"' : '',
+    !empty($step) ? 'step="' . $step . '"' : '',
+    !empty($min) ? 'min="' . $min . '"' : '',
+    $autofocus ? 'autofocus' : '',
+    $dataAttribute,
+];
+
+$value = is_numeric($value) ? (float) $value : $min;
+// CG Range : display current value after range
+//             add class="limits" to display ranhge limits
+?>
+<div style="display:flex">
+<input
+    type="range"
+    name="<?php echo $name; ?>"
+    id="<?php echo $id; ?>"
+    value="<?php echo htmlspecialchars($value, ENT_COMPAT, 'UTF-8'); ?>"
+    <?php echo implode(' ', $attributes); ?>>
+<span id="cgrange-label-<?php echo $id;?>" class="cgrange-label" data="<?php echo $id;?>" style="margin-left:1em"></span>
+</div>

media/css/cgrange.css

@@ -0,0 +1,36 @@
+/**
+ * @package		CGWebp system plugin
+ * @author		ConseilGouz
+ * @copyright	Copyright (C) 2024 ConseilGouz. All rights reserved.
+ * @license		GNU/GPL v3; see LICENSE.php
+ * From DJ-WEBP version 1.0.0
+ **/
+.cgrange-label{margin-left: 1em;
+    background-color: lightgrey;
+    height: 1.7em;
+    font-size: .9em;
+    border-radius: 5px;
+    padding: 2px 4px 4px 4px;
+}
+/* Ajouter limits dans la classe pour afficher les limites */
+.form-cgrange.limits {
+    position: relative;
+}
+.for-cgrange.limits {
+    content: attr(value)
+}
+.form-cgrange.limits:after,
+.form-cgrange:before {
+    position: absolute;
+    top: 1.5em;
+    color: #aaa;
+}
+.form-cgrange.limits:before {
+    left:0em;
+    content: attr(min);
+}
+.form-cgrange.limits:after {
+    right: 0em;
+    content: attr(max);
+}
+

media/css/index.html

@@ -0,0 +1 @@
+<!DOCTYPE html><title></title>

media/js/cgrange.js

@@ -0,0 +1,43 @@
+/**
+ * @package		CGWebp system plugin
+ * @author		ConseilGouz
+ * @copyright	Copyright (C) 2024 ConseilGouz. All rights reserved.
+ * @license		GNU/GPL v3; see LICENSE.php
+ * From DJ-WEBP version 1.0.0
+ **/
+/* handle CGRange field */
+document.addEventListener('DOMContentLoaded', function() {
+
+    let cgranges = document.querySelectorAll('.form-cgrange');
+    for(var i=0; i< cgranges.length; i++) {
+        cgranges[i].addEventListener('input',function() {
+            label = this.nextElementSibling;
+            label.innerHTML = this.value;
+        })
+    }
+    // initialize
+    let cglabels = document.querySelectorAll('.cgrange-label');
+    for(var i=0; i< cglabels.length; i++) {
+        let $id = cglabels[i].getAttribute('data');
+        var value = cglabels[i].previousElementSibling.value;
+        cglabels[i].innerHTML = value;
+    }
+
+    document.addEventListener('joomla:updated',function() {
+        // new subform : check for new CGRange field
+        let cglabels = document.querySelectorAll('.cgrange-label');
+        for(var i=0; i< cglabels.length; i++) {
+            let $id = cglabels[i].getAttribute('data');
+            var value = cglabels[i].previousElementSibling.value;
+            if (!document.querySelector('#'+$id)) {
+                // new subform
+                let cgranges = document.querySelectorAll('.form-cgrange');
+                cgranges[i].addEventListener('input',function() {
+                    label = this.nextElementSibling;
+                    label.innerHTML = this.value;                
+                })
+            }
+            cglabels[i].innerHTML = value;
+        }
+    })
+})

plg_system_cgwebp_changelog.xml

@@ -1,4 +1,16 @@
 <changelogs>
+	<changelog>
+		<element>plg_system_cgwebp</element>
+		<type>plugin</type>
+		<group>system</group>
+		<version>1.2.9</version>
+        <note>
+            <item>Update : 06/10/2024</item>
+        </note>
+        <change>
+            <item>Image quality : use CgRange Field</item>
+        </change>
+    </changelog>
 	<changelog>
 		<element>plg_system_cgwebp</element>
 		<type>plugin</type>

src/Field/CgrangeField.php

@@ -0,0 +1,35 @@
+<?php
+/**
+ * @package		CGWebp system plugin
+ * @author		ConseilGouz
+ * @copyright	Copyright (C) 2024 ConseilGouz. All rights reserved.
+ * license      https://www.gnu.org/licenses/gpl-3.0.html GNU/GPL
+ * From DJ-WEBP version 1.0.0
+ **/
+namespace Conseilgouz\Plugin\System\Cgwebp\Field;
+
+defined('JPATH_PLATFORM') or die;
+use Joomla\CMS\Form\Field\RangeField;
+use Joomla\CMS\Layout\FileLayout;
+
+class CgrangeField extends RangeField
+{
+    public $type = 'Cgrange';
+
+    /**
+     * Name of the layout being used to render the field
+     *
+     * @var    string
+     * @since  3.7
+     */
+    protected $layout = 'cgrange';
+
+    protected function getLayoutPaths()
+    {
+        $paths = parent::getLayoutPaths();
+        $paths[] = JPATH_PLUGINS . '/system/cgwebp/layouts';
+        return $paths;
+
+    }
+
+}