Merge pull request #2 from codem/feat-datalist-improvements

Better datalist support, lots of fixes and enhancements

Author: MrJamesEllis

composer.json

@@ -15,11 +15,22 @@
             "homepage": "https://github.com/codem/silverstripe-html5-inputs"
         }
     ],
+    "autoload": {
+        "psr-4": {
+            "Codem\\Utilities\\HTML5\\": "src/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Codem\\Utilities\\HTML5\\Tests\\": "tests/"
+        }
+    },
     "require": {
         "silverstripe/framework" : "^4"
     },
     "require-dev": {
-        "phpunit/phpunit": "^5.7 | ^7",
-        "squizlabs/php_codesniffer": "^3.0"
+        "phpunit/phpunit": "^5.7 | ^9.5",
+        "squizlabs/php_codesniffer": "^3.0",
+        "ext-dom" : "*"
     }
 }

src/Forms/ColorField.php

@@ -16,8 +16,6 @@ class ColorField extends TextField {
     use Core;
     use Datalist;
 
-    protected $template = "Codem/Utilities/HTML5/ColorField";
-
     protected $inputType = 'color';
 
     protected $defaultValue = "#ffffff";

src/Forms/DateField.php

@@ -6,6 +6,7 @@
 
 /**
  * Provides a date field
+ * @author James
  */
 class DateField extends TextField {
 
@@ -14,23 +15,21 @@ class DateField extends TextField {
     use Step;
     use MinMax;
 
-    protected $template = "Codem/Utilities/HTML5/DateField";
-
     protected $inputType = 'date';
 
     protected $datetime_format = "Y-m-d";
 
     protected $example = "2020-12-31";
 
-    protected function formatDate(Datetime $datetime) {
+    protected function formatDate(\Datetime $datetime) {
         return $datetime->format( $this->datetime_format );
     }
 
-    public function setMin(DateTime $min) {
+    public function setMin(\DateTime $min) {
         return $this->setAttribute('min', $this->formatDate($min));
     }
 
-    public function setMax(DateTime $max) {
+    public function setMax(\DateTime $max) {
         return $this->setAttribute('max', $this->formatDate($max));
     }
 
@@ -45,7 +44,7 @@ public function validate($validator)
     {
         try {
             $this->value = trim($this->value);
-            $dt = new Datetime($this->value);
+            $dt = new \Datetime($this->value);
             $formatted = $this->formatDate($dt);
             if($formatted != $this->value) {
                 throw new \Exception("Invalid date value passed");

src/Forms/DatetimeField.php

@@ -3,8 +3,9 @@
 namespace Codem\Utilities\HTML5;
 
 /**
- * Provides a datetime field, which is basically the same as a DateField
+ * Provides a datetime-local field, which is basically the same as a DateField
  * but with hour and minute selection
+ * @author James
  */
 class DatetimeField extends DateField {
 

src/Forms/EmailField.php

@@ -6,15 +6,15 @@
 
 /**
  * Text input field with validation for correct email format according to RFC 2822.
+ * @author james
  */
 class EmailField extends CoreEmailField {
 
     use Core;
     use Datalist;
     use Pattern;
+    use Multiple;
 
     protected $inputType = 'email';
 
-
-
 }

src/Forms/MonthField.php

@@ -5,6 +5,7 @@
 /**
  * Provides a month field, which is basically the same as a DateField
  * but with month and year selection
+ * @author James
  */
 class MonthField extends DateField {
 

src/Forms/NumberField.php

@@ -2,12 +2,13 @@
 
 namespace Codem\Utilities\HTML5;
 
-use SilverStripe\Forms\NumericField;
+use SilverStripe\Forms\TextField;
 
 /**
- * Numeric input field
+ * Number input field
+ * @author James
  */
-class NumberField extends NumericField {
+class NumberField extends TextField {
 
     use Core;
     use Datalist;

src/Forms/SearchField.php

@@ -6,6 +6,7 @@
 
 /**
  * Search input field
+ * @author James
  */
 class SearchField extends TextField {
 

src/Forms/TelField.php

@@ -6,6 +6,7 @@
 
 /**
  * From <input> elements of type tel are used to let the user enter and edit a telephone number.
+ * @author James
  */
 class TelField extends TextField {
 

src/Forms/TimeField.php

@@ -4,6 +4,7 @@
 
 /**
  * Provides a time field, limited to hour and minute selection only
+ * @author James
  */
 class TimeField extends DateField {
 

src/Forms/UrlField.php

@@ -14,11 +14,6 @@ class UrlField extends TextField {
     use Datalist;
     use Pattern;
 
-    /**
-     * @var string
-     */
-    protected $template = "Codem/Utilities/HTML5/UrlField";
-
     /**
      * @var string
      */

src/Forms/WeekField.php

@@ -6,6 +6,7 @@
  * Provides a week field
  * MDN: <input> elements of type week create input fields allowing easy entry of a
  * year plus the ISO 8601 week number during that year (i.e., week 1 to 52 or 53).
+ * @author James
  */
 class WeekField extends DateField {
 

src/Traits/Core.php

@@ -2,6 +2,10 @@
 
 namespace Codem\Utilities\HTML5;
 
+/**
+ * Core common attribute methods
+ * @author James
+ */
 trait Core {
 
     protected function bool2str($value) {

src/Traits/Datalist.php

@@ -2,40 +2,71 @@
 
 namespace Codem\Utilities\HTML5;
 
-use Silverstripe\ORM\ArrayList;
+use SilverStripe\ORM\ArrayList;
+use SilverStripe\View\ArrayData;
 
+/**
+ * Datalist trait used for supporting inputs that can have a <datalist>
+ * @author James
+ */
 trait Datalist {
 
     /**
      * @var array
      */
-    protected $input_datalist;
+    protected $inputDatalist;
 
     /**
      * @var string
      */
-    protected $input_datalist_id;
+    protected $inputDatalistId;
+
+    /**
+     * Return values  for a <datalist>
+     */
+    protected function createDataList(array $datalist) : ArrayList {
+        $list = ArrayList::create();
+        foreach($datalist as $value => $label) {
+            $list->push( ArrayData::create([
+                'Value' => $value,
+                'Label' => $label
+            ]) );
+        }
+        return $list;
+    }
 
     /**
      * Set a list of values rendered into a <datalist> tag (HTMLDataListElement)
      * @param array $list
      * @param string $id optional datalist id attribute
      * @return FormField
      */
-    public function setDatalist(ArrayList $list, $id = null) {
-        $this->input_datalist = $list;
-        if($id) {
-            $this->input_datalist_id = $id;
+    public function setDatalist(array $datalist, $id = null) {
+        $this->inputDatalist = $this->createDataList($datalist);
+        if(!$id) {
+            $id = $this->ID() . "_datalist";
         }
+        $this->inputDatalistId = $id;
+        $this->setAttribute('list', $id);
         return $this;
     }
 
-    public function getDatalist() {
-        return $this->input_datalist;
+    public function getDatalist() : ?ArrayList {
+        return $this->inputDatalist;
     }
 
-    public function Datalist() {
+    /**
+     * Return datalist id value
+     */
+    public function Datalist() : ?ArrayList {
         return $this->getDatalist();
     }
 
+    /**
+     * Return datalist id value
+     */
+    public function DatalistID() : ?string {
+        return $this->inputDatalistId;
+    }
+
 }

src/Traits/MinMax.php

@@ -2,6 +2,10 @@
 
 namespace Codem\Utilities\HTML5;
 
+/**
+ * Min/Max handling for supporting inputs
+ * @author James
+ */
 trait MinMax {
 
     public function setMin($min) {

src/Traits/Multiple.php

@@ -2,7 +2,11 @@
 
 namespace Codem\Utilities\HTML5;
 
-trait Pattern {
+/**
+ * multiple handling for supporting inputs
+ * @author James
+ */
+trait Multiple {
 
     /**
      * Set whether an input can accept multiple values

src/Traits/Pattern.php

@@ -2,6 +2,10 @@
 
 namespace Codem\Utilities\HTML5;
 
+/**
+ * pattern handling for supporting inputs
+ * @author James
+ */
 trait Pattern {
 
     /**

templates/Codem/Utilities/HTML5/ColorField.ss

@@ -1,4 +1,2 @@
-<input $AttributesHTML />
-<% if $Datalist %>
-$Datalist
-<% end_if %>
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/Datalist.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/DateField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/DatetimeField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/EmailField.ss

@@ -0,0 +1,7 @@
+<% if $Datalist %>
+<datalist id="{$DatalistID.XML}">
+    <% loop $Datalist %>
+    <option value="{$Value.XML}"<% if $Label %> label="{$Label.XML}"<% end_if %>>
+    <% end_loop %>
+</datalist>
+<% end_if %>

templates/Codem/Utilities/HTML5/Includes/Datalist.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/MonthField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/NumberField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/RangeField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/SearchField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/TelField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/TimeField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/UrlField.ss

@@ -0,0 +1,2 @@
+<input {$AttributesHTML}>
+<% include Codem/Utilities/HTML5/Datalist %>

templates/Codem/Utilities/HTML5/WeekField.ss

@@ -0,0 +1,33 @@
+<?php
+
+namespace Codem\Utilities\HTML5\Tests;
+
+use SilverStripe\Dev\SapphireTest;
+
+/**
+ * Abstract class for field tests
+ */
+
+abstract class AbstractFieldTest extends SapphireTest
+{
+
+    protected $usesDatabase = false;
+
+    protected function performDataListTest($field, $options) {
+
+        $field->setDatalist( $options );
+        $template = $field->FieldHolder();
+
+        libxml_use_internal_errors(true);
+        $doc = new \DOMDocument();
+        $doc->loadHTML($template);
+        libxml_clear_errors();
+        $datalist = $doc->getElementsByTagName('datalist')[0];
+        $this->assertTrue($datalist->hasAttribute('id'), "<datalist> has id attribute");
+
+        $option = $datalist->getElementsByTagName('option');
+        $this->assertEquals( count($options), $option->length);
+
+    }
+
+}