The color code ... #hexcolor
". + // See theme_html_tag(). + '#type' => 'html_tag', + '#tag' => 'p', + '#attributes' => array( + 'style' => 'color: ' . $item->value, + ), + '#value' => t('The color code in this field is @code', array('@code' => $item->value)), + ); + } + + return $elements; + } + +} diff --git a/field_example/src/Plugin/Field/FieldType/RgbItem.php b/field_example/src/Plugin/Field/FieldType/RgbItem.php new file mode 100644 index 0000000..f7096b3 --- /dev/null +++ b/field_example/src/Plugin/Field/FieldType/RgbItem.php @@ -0,0 +1,60 @@ + array( + 'value' => array( + 'type' => 'text', + 'size' => 'tiny', + 'not null' => FALSE, + ), + ), + ); + } + + /** + * {@inheritdoc} + */ + public function isEmpty() { + $value = $this->get('value')->getValue(); + return $value === NULL || $value === ''; + } + + /** + * {@inheritdoc} + */ + public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) { + $properties['value'] = DataDefinition::create('string') + ->setLabel(t('Hex value')); + + return $properties; + } +} diff --git a/field_example/src/Plugin/Field/FieldWidget/ColorPickerWidget.php b/field_example/src/Plugin/Field/FieldWidget/ColorPickerWidget.php new file mode 100644 index 0000000..bf86a62 --- /dev/null +++ b/field_example/src/Plugin/Field/FieldWidget/ColorPickerWidget.php @@ -0,0 +1,46 @@ + '', + '#attributes' => array('class' => array('edit-field-example-colorpicker')), + '#attached' => array( + // Add Farbtastic color picker. + 'library' => array( + 'core/jquery.farbtastic', + ), + // Add javascript to trigger the colorpicker. + 'js' => array(drupal_get_path('module', 'field_example') . '/field_example.js'), + ), + ); + + return $element; + } + +} diff --git a/field_example/src/Plugin/Field/FieldWidget/Text3Widget.php b/field_example/src/Plugin/Field/FieldWidget/Text3Widget.php new file mode 100644 index 0000000..c55aaa2 --- /dev/null +++ b/field_example/src/Plugin/Field/FieldWidget/Text3Widget.php @@ -0,0 +1,91 @@ +value) ? $items[$delta]->value : ''; + // Parse the single hex string into RBG values. + if (!empty($value)) { + preg_match_all('@..@', substr($value, 1), $match); + } + else { + $match = array(array()); + } + + // Set up the form element for this widget. + $element += array( + '#type' => 'details', + '#element_validate' => array( + array($this, 'validate'), + ), + ); + + // Add in the RGB textfield elements. + foreach (array('r' => t('Red'), 'g' => t('Green'), 'b' => t('Blue')) as $key => $title) { + $element[$key] = array( + '#type' => 'textfield', + '#title' => $title, + '#size' => 2, + '#default_value' => array_shift($match[0]), + '#attributes' => array('class' => array('rgb-entry')), + '#description' => t('The 2-digit hexadecimal representation of @color saturation, like "a1" or "ff"', array('@color' => $title)), + ); + // Since Form API doesn't allow a fieldset to be required, we + // have to require each field element individually. + if ($element['#required']) { + $element[$key]['#required'] = TRUE; + } + } + return array('value' => $element); + } + + /** + * Validate the fields and convert them into a single value as text. + */ + public function validate($element, &$form_state) { + // Validate each of the textfield entries. + $values = array(); + foreach (array('r', 'g', 'b') as $colorfield) { + $values[$colorfield] = $element[$colorfield]['#value']; + // If they left any empty, we'll set the value empty and quit. + if (strlen($values[$colorfield]) == 0) { + \Drupal::formBuilder()->setValue($element, '', $form_state); + return; + } + // If they gave us anything that's not hex, reject it. + if ((strlen($values[$colorfield]) != 2) || !ctype_xdigit($values[$colorfield])) { + \Drupal::formBuilder()->setError($element[$colorfield], $form_state, t("Saturation value must be a 2-digit hexadecimal value between 00 and ff.")); + } + } + + // Set the value of the entire form element. + $value = strtolower(sprintf('#%02s%02s%02s', $values['r'], $values['g'], $values['b'])); + \Drupal::formBuilder()->setValue($element, $value, $form_state); + } + +} diff --git a/field_example/src/Plugin/Field/FieldWidget/TextWidget.php b/field_example/src/Plugin/Field/FieldWidget/TextWidget.php new file mode 100644 index 0000000..985d166 --- /dev/null +++ b/field_example/src/Plugin/Field/FieldWidget/TextWidget.php @@ -0,0 +1,45 @@ +value) ? $items[$delta]->value : ''; + $element += array( + '#type' => 'color', + '#default_value' => $value, + // Allow a slightly larger size that the field length to allow for some + // configurations where all characters won't fit in input field. + '#size' => 7, + '#maxlength' => 7, + '#element_validate' => array( + 'form_validate_color', + ), + ); + return array('value' => $element); + } +} diff --git a/field_example/src/Tests/FieldExampleMenuTest.php b/field_example/src/Tests/FieldExampleMenuTest.php new file mode 100644 index 0000000..03cc821 --- /dev/null +++ b/field_example/src/Tests/FieldExampleMenuTest.php @@ -0,0 +1,62 @@ + 'Field Example Menu Test', + 'description' => 'Test the user-facing menus in Field Example.', + 'group' => 'Examples', + ); + } + + /** + * Test for a link to the block example in the Tools menu. + */ + public function testFieldExampleLink() { + $this->drupalGet(''); + $this->assertLinkByHref('examples/field_example'); + } + + /** + * Tests field_example menus. + */ + public function testBlockExampleMenu() { + $this->drupalGet('examples/field_example'); + $this->assertResponse(200, 'Description page exists.'); + } + +} diff --git a/field_example/src/Tests/Text3WidgetTest.php b/field_example/src/Tests/Text3WidgetTest.php new file mode 100644 index 0000000..691a703 --- /dev/null +++ b/field_example/src/Tests/Text3WidgetTest.php @@ -0,0 +1,110 @@ + 'Field Example with Text3Widget', + 'description' => 'Create a content type with a example_field_rgb field, configure it with the field_example_text-widget, create a node and check for correct values.', + 'group' => 'Examples', + ); + } + + /** + * Test basic functionality of the example field. + * + * - Creates a content type. + * - Adds a single-valued field_example_rgb to it. + * - Adds a multivalued field_example_rgb to it. + * - Creates a node of the new type. + * - Populates the single-valued field. + * - Populates the multivalued field with two items. + * - Tests the result. + */ + public function testSingleValueField() { + // Add a single field as administrator user. + $this->drupalLogin($this->administratorAccount); + $this->fieldName = $this->createField('field_example_rgb', 'field_example_3text', 'number'); + // Post-condition: Content type now has the desired field. + + // Switch to the author user to create content with this type and field. + $this->drupalLogin($this->authorAccount); + $this->drupalGet('node/add/' . $this->contentTypeName); + + // Fill the create form. + $title = $this->randomName(20); + $edit = array( + 'title[0][value]' => $title, + 'field_' . $this->fieldName . '[0][value][r]' => '00', + 'field_' . $this->fieldName . '[0][value][g]' => '0a', + 'field_' . $this->fieldName . '[0][value][b]' => '01', + ); + + // Create the content. + $this->drupalPostForm(NULL, $edit, t('Save')); + $this->assertText(t('@type @title has been created', array('@type' => $this->contentTypeName, '@title' => $title))); + + // Verify the value is shown when viewing this node. + $output_strings = $this->xpath("//div[contains(@class,'field-type-field-example-rgb')]/div/div/p/text()"); + $this->assertEqual((string) $output_strings[0], "The color code in this field is #000a01"); + } + + /** + * Test basic functionality of the example field. + * + * - Creates a content type. + * - Adds a single-valued field_example_rgb to it. + * - Adds a multivalued field_example_rgb to it. + * - Creates a node of the new type. + * - Populates the single-valued field. + * - Populates the multivalued field with two items. + * - Tests the result. + */ + public function testMultiValueField() { + // Add a single field as administrator user. + $this->drupalLogin($this->administratorAccount); + $this->fieldName = $this->createField('field_example_rgb', 'field_example_3text', '-1'); + // Post-condition: Content type now has the desired field. + + // Switch to the author user to create content with this type and field. + $this->drupalLogin($this->authorAccount); + $this->drupalGet('node/add/' . $this->contentTypeName); + + // Fill the create form. + $title = $this->randomName(20); + $edit = array( + 'title[0][value]' => $title, + 'field_' . $this->fieldName . '[0][value][r]' => '00', + 'field_' . $this->fieldName . '[0][value][g]' => 'ff', + 'field_' . $this->fieldName . '[0][value][b]' => '00', + ); + + // Add a 2nd item to the multivalue field, so hit "add another". + $this->drupalPostForm(NULL, $edit, t('Add another item')); + $edit = array( + 'field_' . $this->fieldName . '[1][value][r]' => 'ff', + 'field_' . $this->fieldName . '[1][value][g]' => 'ff', + 'field_' . $this->fieldName . '[1][value][b]' => 'ff', + ); + + // Create the content. + $this->drupalPostForm(NULL, $edit, t('Save')); + $this->assertText(t('@type @title has been created', array('@type' => $this->contentTypeName, '@title' => $title))); + + // Verify the values are shown when viewing this node. + $output_strings = $this->xpath("//div[contains(@class,'field-type-field-example-rgb')]/div/div/p/text()"); + $this->assertEqual((string) $output_strings[0], "The color code in this field is #00ff00"); + $this->assertEqual((string) $output_strings[1], "The color code in this field is #ffffff"); + } +} diff --git a/field_example/src/Tests/TextWidgetTest.php b/field_example/src/Tests/TextWidgetTest.php new file mode 100644 index 0000000..2f25743 --- /dev/null +++ b/field_example/src/Tests/TextWidgetTest.php @@ -0,0 +1,105 @@ + 'Field Example with Text Widget', + 'description' => 'Create a content type with a example_field_rgb field, configure it with the field_example_text-widget, create a node and check for correct values.', + 'group' => 'Examples', + ); + } + + /** + * Test basic functionality of the example field. + * + * - Creates a content type. + * - Adds a single-valued field_example_rgb to it. + * - Adds a multivalued field_example_rgb to it. + * - Creates a node of the new type. + * - Populates the single-valued field. + * - Populates the multivalued field with two items. + * - Tests the result. + */ + public function testSingleValueField() { + // Add a single field as administrator user. + $this->drupalLogin($this->administratorAccount); + $this->fieldName = $this->createField('field_example_rgb', 'field_example_text', 'number'); + + // Now that we have a content type with the desired field, switch to the + // author user to create content with it. + $this->drupalLogin($this->authorAccount); + $this->drupalGet('node/add/' . $this->contentTypeName); + + // Add a node. + $title = $this->randomName(20); + $edit = array( + 'title[0][value]' => $title, + 'field_' . $this->fieldName . '[0][value]' => '#000001', + ); + + // Create the content. + $this->drupalPostForm(NULL, $edit, t('Save')); + $this->assertText(t('@type @title has been created', array('@type' => $this->contentTypeName, '@title' => $title))); + + // Verify the value is shown when viewing this node. + $output_strings = $this->xpath("//div[contains(@class,'field-type-field-example-rgb')]/div/div/p/text()"); + $this->assertEqual((string) $output_strings[0], "The color code in this field is #000001"); + } + + /** + * Test basic functionality of the example field. + * + * - Creates a content type. + * - Adds a single-valued field_example_rgb to it. + * - Adds a multivalued field_example_rgb to it. + * - Creates a node of the new type. + * - Populates the single-valued field. + * - Populates the multivalued field with two items. + * - Tests the result. + */ + public function testMultiValueField() { + // Add a single field as administrator user. + $this->drupalLogin($this->administratorAccount); + $this->fieldName = $this->createField('field_example_rgb', 'field_example_text', '-1'); + + // Now that we have a content type with the desired field, switch to the + // author user to create content with it. + $this->drupalLogin($this->authorAccount); + $this->drupalGet('node/add/' . $this->contentTypeName); + + // Add a node. + $title = $this->randomName(20); + $edit = array( + 'title[0][value]' => $title, + 'field_' . $this->fieldName . '[0][value]' => '#00ff00', + ); + + // We want to add a 2nd item to the multivalue field, so hit "add another". + $this->drupalPostForm(NULL, $edit, t('Add another item')); + + $edit = array( + 'field_' . $this->fieldName . '[1][value]' => '#ffffff', + ); + + // Now we can fill in the second item in the multivalue field and save. + $this->drupalPostForm(NULL, $edit, t('Save')); + $this->assertText(t('@type @title has been created', array('@type' => $this->contentTypeName, '@title' => $title))); + + // Verify the value is shown when viewing this node. + $output_strings = $this->xpath("//div[contains(@class,'field-type-field-example-rgb')]/div/div/p/text()"); + $this->assertEqual((string) $output_strings[0], "The color code in this field is #00ff00"); + $this->assertEqual((string) $output_strings[1], "The color code in this field is #ffffff"); + } +}