/**
* {@inheritdoc}
*
* @param \Drupal\filter\Entity\FilterFormat $filter_format
* The filter format for which this dialog corresponds.
*/
public function buildForm(array $form, FormStateInterface $form_state, FilterFormat $filter_format = NULL)
{
// The default values are set directly from \Drupal::request()->request,
// provided by the editor plugin opening the dialog.
if (!($image_element = $form_state->get('image_element'))) {
$user_input = $form_state->getUserInput();
$image_element = isset($user_input['editor_object']) ? $user_input['editor_object'] : [];
$form_state->set('image_element', $image_element);
}
$form['#tree'] = TRUE;
$form['#attached']['library'][] = 'editor/drupal.editor.dialog';
$form['#prefix'] = '<div id="editor-image-dialog-form">';
$form['#suffix'] = '</div>';
$editor = editor_load($filter_format->format);
// Construct strings to use in the upload validators.
$image_upload = $editor->getImageUploadSettings();
if (!empty($image_upload['dimensions'])) {
$max_dimensions = $image_upload['dimensions']['max_width'] . '×' . $image_upload['dimensions']['max_height'];
} else {
$max_dimensions = 0;
}
$max_filesize = min(Bytes::toInt($image_upload['max_size']), file_upload_max_size());
$existing_file = isset($image_element['data-editor-file-uuid']) ? entity_load_by_uuid('file', $image_element['data-editor-file-uuid']) : NULL;
$fid = $existing_file ? $existing_file->id() : NULL;
$form['fid'] = array('#title' => $this->t('Image'), '#type' => 'managed_file', '#upload_location' => $image_upload['scheme'] . '://' . $image_upload['directory'], '#default_value' => $fid ? array($fid) : NULL, '#upload_validators' => array('file_validate_extensions' => array('gif png jpg jpeg'), 'file_validate_size' => array($max_filesize), 'file_validate_image_resolution' => array($max_dimensions)), '#required' => TRUE);
$form['attributes']['src'] = array('#title' => $this->t('URL'), '#type' => 'textfield', '#default_value' => isset($image_element['src']) ? $image_element['src'] : '', '#maxlength' => 2048, '#required' => TRUE);
// If the editor has image uploads enabled, show a managed_file form item,
// otherwise show a (file URL) text form item.
if ($image_upload['status']) {
$form['attributes']['src']['#access'] = FALSE;
$form['attributes']['src']['#required'] = FALSE;
} else {
$form['fid']['#access'] = FALSE;
$form['fid']['#required'] = FALSE;
}
// The alt attribute is *required*, but we allow users to opt-in to empty
// alt attributes for the very rare edge cases where that is valid by
// specifying two double quotes as the alternative text in the dialog.
// However, that *is* stored as an empty alt attribute, so if we're editing
// an existing image (which means the src attribute is set) and its alt
// attribute is empty, then we show that as two double quotes in the dialog.
// @see https://www.drupal.org/node/2307647
$alt = isset($image_element['alt']) ? $image_element['alt'] : '';
if ($alt === '' && !empty($image_element['src'])) {
$alt = '""';
}
$form['attributes']['alt'] = array('#title' => $this->t('Alternative text'), '#placeholder' => $this->t('Short description for the visually impaired'), '#type' => 'textfield', '#required' => TRUE, '#required_error' => $this->t('Alternative text is required.<br><em>(Only in rare cases should this be left empty. To create empty alternative text, enter <code>""</code> — two double quotes without any content).'), '#default_value' => $alt, '#maxlength' => 2048);
$form['dimensions'] = array('#type' => 'fieldset', '#title' => $this->t('Image size'), '#attributes' => array('class' => array('container-inline', 'fieldgroup', 'form-composite')));
$form['dimensions']['width'] = array('#title' => $this->t('Width'), '#title_display' => 'invisible', '#type' => 'number', '#default_value' => isset($image_element['width']) ? $image_element['width'] : '', '#size' => 8, '#maxlength' => 8, '#min' => 1, '#max' => 99999, '#placeholder' => $this->t('width'), '#field_suffix' => ' × ', '#parents' => array('attributes', 'width'));
$form['dimensions']['height'] = array('#title' => $this->t('Height'), '#title_display' => 'invisible', '#type' => 'number', '#default_value' => isset($image_element['height']) ? $image_element['height'] : '', '#size' => 8, '#maxlength' => 8, '#min' => 1, '#max' => 99999, '#placeholder' => $this->t('height'), '#field_suffix' => $this->t('pixels'), '#parents' => array('attributes', 'height'));
// When Drupal core's filter_align is being used, the text editor may
// offer the ability to change the alignment.
if (isset($image_element['data-align']) && $filter_format->filters('filter_align')->status) {
$form['align'] = array('#title' => $this->t('Align'), '#type' => 'radios', '#options' => array('none' => $this->t('None'), 'left' => $this->t('Left'), 'center' => $this->t('Center'), 'right' => $this->t('Right')), '#default_value' => $image_element['data-align'] === '' ? 'none' : $image_element['data-align'], '#wrapper_attributes' => array('class' => array('container-inline')), '#attributes' => array('class' => array('container-inline')), '#parents' => array('attributes', 'data-align'));
}
// When Drupal core's filter_caption is being used, the text editor may
// offer the ability to in-place edit the image's caption: show a toggle.
if (isset($image_element['hasCaption']) && $filter_format->filters('filter_caption')->status) {
$form['caption'] = array('#title' => $this->t('Caption'), '#type' => 'checkbox', '#default_value' => $image_element['hasCaption'] === 'true', '#parents' => array('attributes', 'hasCaption'));
}
$form['actions'] = array('#type' => 'actions');
$form['actions']['save_modal'] = array('#type' => 'submit', '#value' => $this->t('Save'), '#submit' => array(), '#ajax' => array('callback' => '::submitForm', 'event' => 'click'));
return $form;
}
/**
* {@inheritdoc}
*
* @param \Drupal\filter\Entity\FilterFormat $filter_format
* The filter format for which this dialog corresponds.
*/
public function buildForm(array $form, FormStateInterface $form_state, FilterFormat $filter_format = NULL)
{
// This form is special, in that the default values do not come from the
// server side, but from the client side, from a text editor. We must cache
// this data in form state, because when the form is rebuilt, we will be
// receiving values from the form, instead of the values from the text
// editor. If we don't cache it, this data will be lost.
if (isset($form_state->getUserInput()['editor_object'])) {
// By convention, the data that the text editor sends to any dialog is in
// the 'editor_object' key. And the image dialog for text editors expects
// that data to be the attributes for an <img> element.
$image_element = $form_state->getUserInput()['editor_object'];
$form_state->set('image_element', $image_element);
$form_state->setCached(TRUE);
} else {
// Retrieve the image element's attributes from form state.
$image_element = $form_state->get('image_element') ?: [];
}
$form['#tree'] = TRUE;
$form['#attached']['library'][] = 'editor/drupal.editor.dialog';
$form['#prefix'] = '<div id="editor-image-dialog-form">';
$form['#suffix'] = '</div>';
$editor = editor_load($filter_format->id());
// Construct strings to use in the upload validators.
$image_upload = $editor->getImageUploadSettings();
if (!empty($image_upload['dimensions'])) {
$max_dimensions = $image_upload['dimensions']['max_width'] . '×' . $image_upload['dimensions']['max_height'];
} else {
$max_dimensions = 0;
}
$max_filesize = min(Bytes::toInt($image_upload['max_size']), file_upload_max_size());
$existing_file = isset($image_element['data-entity-uuid']) ? \Drupal::entityManager()->loadEntityByUuid('file', $image_element['data-entity-uuid']) : NULL;
$fid = $existing_file ? $existing_file->id() : NULL;
$form['fid'] = array('#title' => $this->t('Image'), '#type' => 'managed_file', '#upload_location' => $image_upload['scheme'] . '://' . $image_upload['directory'], '#default_value' => $fid ? array($fid) : NULL, '#upload_validators' => array('file_validate_extensions' => array('gif png jpg jpeg'), 'file_validate_size' => array($max_filesize), 'file_validate_image_resolution' => array($max_dimensions)), '#required' => TRUE);
$form['attributes']['src'] = array('#title' => $this->t('URL'), '#type' => 'textfield', '#default_value' => isset($image_element['src']) ? $image_element['src'] : '', '#maxlength' => 2048, '#required' => TRUE);
// If the editor has image uploads enabled, show a managed_file form item,
// otherwise show a (file URL) text form item.
if ($image_upload['status']) {
$form['attributes']['src']['#access'] = FALSE;
$form['attributes']['src']['#required'] = FALSE;
} else {
$form['fid']['#access'] = FALSE;
$form['fid']['#required'] = FALSE;
}
// The alt attribute is *required*, but we allow users to opt-in to empty
// alt attributes for the very rare edge cases where that is valid by
// specifying two double quotes as the alternative text in the dialog.
// However, that *is* stored as an empty alt attribute, so if we're editing
// an existing image (which means the src attribute is set) and its alt
// attribute is empty, then we show that as two double quotes in the dialog.
// @see https://www.drupal.org/node/2307647
$alt = isset($image_element['alt']) ? $image_element['alt'] : '';
if ($alt === '' && !empty($image_element['src'])) {
$alt = '""';
}
$form['attributes']['alt'] = array('#title' => $this->t('Alternative text'), '#placeholder' => $this->t('Short description for the visually impaired'), '#type' => 'textfield', '#required' => TRUE, '#required_error' => $this->t('Alternative text is required.<br />(Only in rare cases should this be left empty. To create empty alternative text, enter <code>""</code> — two double quotes without any content).'), '#default_value' => $alt, '#maxlength' => 2048);
// When Drupal core's filter_align is being used, the text editor may
// offer the ability to change the alignment.
if (isset($image_element['data-align']) && $filter_format->filters('filter_align')->status) {
$form['align'] = array('#title' => $this->t('Align'), '#type' => 'radios', '#options' => array('none' => $this->t('None'), 'left' => $this->t('Left'), 'center' => $this->t('Center'), 'right' => $this->t('Right')), '#default_value' => $image_element['data-align'] === '' ? 'none' : $image_element['data-align'], '#wrapper_attributes' => array('class' => array('container-inline')), '#attributes' => array('class' => array('container-inline')), '#parents' => array('attributes', 'data-align'));
}
// When Drupal core's filter_caption is being used, the text editor may
// offer the ability to in-place edit the image's caption: show a toggle.
if (isset($image_element['hasCaption']) && $filter_format->filters('filter_caption')->status) {
$form['caption'] = array('#title' => $this->t('Caption'), '#type' => 'checkbox', '#default_value' => $image_element['hasCaption'] === 'true', '#parents' => array('attributes', 'hasCaption'));
}
$form['actions'] = array('#type' => 'actions');
$form['actions']['save_modal'] = array('#type' => 'submit', '#value' => $this->t('Save'), '#submit' => array(), '#ajax' => array('callback' => '::submitForm', 'event' => 'click'));
return $form;
}
/**
* {@inheritdoc}
*
* @param \Drupal\filter\Entity\FilterFormat $filter_format
* The filter format for which this dialog corresponds.
*/
public function buildForm(array $form, FormStateInterface $form_state, FilterFormat $filter_format = NULL)
{
// This form is special, in that the default values do not come from the
// server side, but from the client side, from a text editor. We must cache
// this data in form state, because when the form is rebuilt, we will be
// receiving values from the form, instead of the values from the text
// editor. If we don't cache it, this data will be lost.
$user_input = $form_state->getUserInput();
if (isset($user_input['editor_object'])) {
// By convention, the data that the text editor sends to any dialog is in
// the 'editor_object' key. And the image dialog for text editors expects
// that data to be the attributes for an <img> element.
$image_element = $user_input['editor_object'];
$form_state->set('image_element', $image_element);
$form_state->setCached(TRUE);
} elseif ($form_state->getTemporaryValue('wizard')) {
$image_element = $form_state->getTemporaryValue('wizard')['image_element'];
} else {
// Retrieve the image element's attributes from form state.
$image_element = $form_state->get('image_element') ?: [];
}
// Add libraries and wrap the form in ajax wrappers.
$form['#tree'] = TRUE;
$form['#attached']['library'][] = 'editor/drupal.editor.dialog';
$form['#prefix'] = '<div id="' . self::AJAX_WRAPPER_ID . '">';
$form['#suffix'] = '</div>';
/** @var \Drupal\editor\Entity\Editor $editor */
$editor = $this->entityTypeManager->getStorage('editor')->load($filter_format->id());
// Construct strings to use in the upload validators.
$embridge_image_settings = $editor->getSettings()['plugins']['embridgeimage']['embridge_image_upload'];
$max_filesize = min(Bytes::toInt($embridge_image_settings['max_size']), file_upload_max_size());
/** @var \Drupal\embridge\EmbridgeAssetEntityInterface $existing_asset */
$existing_asset = isset($image_element['data-entity-uuid']) ? $this->entityRepository->loadEntityByUuid('embridge_asset_entity', $image_element['data-entity-uuid']) : NULL;
$asset_id = $existing_asset ? $existing_asset->id() : NULL;
/** @var \Drupal\embridge\EmbridgeCatalogInterface $catalog */
$catalog = $this->entityTypeManager->getStorage('embridge_catalog')->load($embridge_image_settings['catalog_id']);
// Create a preview image.
$preview = FALSE;
if (!empty($user_input['_triggering_element_name'])) {
$triggering_element = $user_input['_triggering_element_name'];
}
// If we are editing an existing asset, use that thumbnail.
if (empty($form_state->getValues()) && $existing_asset) {
$preview = $this->assetHelper->getAssetConversionUrl($existing_asset, $catalog->getApplicationId(), 'thumb');
} elseif (isset($triggering_element) && $triggering_element != 'asset_remove_button' && ($uploaded_id = $form_state->getValue(['asset', 0]))) {
/** @var \Drupal\embridge\EmbridgeAssetEntityInterface $uploaded_asset */
$uploaded_asset = $this->entityTypeManager->getStorage('embridge_asset_entity')->load($uploaded_id);
if ($uploaded_asset) {
$preview = $this->assetHelper->getAssetConversionUrl($uploaded_asset, $catalog->getApplicationId(), 'thumb');
}
}
// Use a stock image for preview.
if (!$preview) {
$preview = drupal_get_path('module', 'embridge_ckeditor') . '/images/preview-image.png';
}
// TODO: Make this configurable.
$allowed_extensions = 'gif png jpg jpeg';
$url_options = ['filter_format' => $filter_format->id(), 'extensions' => $allowed_extensions, 'catalog_id' => $embridge_image_settings['catalog_id']];
$link_url = Url::fromRoute('embridge_ckeditor.image.wizard', $url_options);
$link_url->setOptions(['attributes' => ['class' => ['use-ajax', 'button'], 'data-accepts' => 'application/vnd.drupal-modal', 'data-dialog-type' => 'modal', 'data-dialog-options' => Json::encode(['width' => 1000])]]);
$class = get_class($this);
$form['asset'] = ['preview' => ['#theme' => 'image', '#uri' => $preview, '#weight' => -100], '#title' => $this->t('Image'), '#type' => 'embridge_asset', '#catalog_id' => $embridge_image_settings['catalog_id'], '#library_id' => $embridge_image_settings['library_id'], '#upload_location' => 'public://' . $embridge_image_settings['directory'], '#default_value' => $asset_id ? [$asset_id] : NULL, '#upload_validators' => ['validateFileExtensions' => [$allowed_extensions], 'validateFileSize' => [$max_filesize]], '#pre_render' => [[$class, 'preRenderAssetElement']], '#allow_search' => FALSE, '#required' => TRUE, 'search_link' => Link::fromTextAndUrl('Search asset library', $link_url)->toRenderable()];
$form['asset']['search_link']['#weight'] = 100;
$form['attributes'] = ['#type' => 'container', '#tree' => TRUE, '#attributes' => ['class' => ['image-attributes']]];
$form['attributes']['src'] = ['#type' => 'value'];
$alt = isset($image_element['alt']) ? $image_element['alt'] : '';
$form['attributes']['alt'] = ['#title' => $this->t('Alternative text'), '#description' => $this->t('The alt text describes the image for non-sighted users. <br/>The alt text can remain empty only if the image conveys no meaning (is decorative only).'), '#type' => 'textfield', '#default_value' => $alt, '#maxlength' => 2048];
$conversion = isset($image_element['data-conversion']) ? $image_element['data-conversion'] : '';
$conversions_array = $catalog->getConversionsArray();
$form['attributes']['data-conversion'] = ['#title' => $this->t('Image size'), '#description' => $this->t('Choose the image size conversion to display.'), '#type' => 'select', '#default_value' => $conversion, '#options' => array_combine($conversions_array, $conversions_array)];
// When Drupal core's filter_align is being used, the text editor may
// offer the ability to change the alignment.
if ($filter_format->filters('filter_align')->status) {
$data_align = !empty($image_element['data-align']) ? $image_element['data-align'] : '';
$form['attributes']['data-align'] = ['#title' => $this->t('Align'), '#description' => $this->t('How the image will align within the content.'), '#type' => 'select', '#options' => ['none' => $this->t('None'), 'left' => $this->t('Left'), 'center' => $this->t('Center'), 'right' => $this->t('Right')], '#default_value' => $data_align];
}
$form['actions'] = ['#type' => 'actions'];
$form['actions']['save_modal'] = ['#type' => 'submit', '#value' => $this->t('Save'), '#submit' => [], '#ajax' => ['callback' => [$this, 'ajaxSave'], 'event' => 'click'], '#attributes' => ['class' => ['button--primary']]];
return $form;
}
