View source
<?php
namespace Drupal\elevatezoomplus_ui\Form;
use Drupal\slick_ui\Form\SlickFormBase;
use Drupal\elevatezoomplus\Entity\ElevateZoomPlus;
class ElevateZoomPlusForm extends SlickFormBase {
const ZOOM_TYPE_INNER = 1;
const ZOOM_TYPE_LENS = 2;
const ZOOM_TYPE_WINDOW = 3;
const SHOW_LENS = 4;
public function edit_form(&$form, &$form_state) {
parent::edit_form($form, $form_state);
$optionset = $form_state['item'];
$admin_css = $this->manager
->config('admin_css', 'blazy.settings');
$form['#attributes']['class'][] = 'form--elevatezoomplus form--blazy form--slick form--optionset has-tooltip';
if ($admin_css) {
$form['#attached']['library'][] = [
'slick_ui',
'ui',
];
$form['#attached']['library'][] = [
'elevatezoomplus',
'admin',
];
}
$form['info']['label']['#attributes']['class'][] = 'is-tooltip';
$form['info']['name']['#attributes']['class'][] = 'is-tooltip';
$form['options'] = [
'#type' => 'vertical_tabs',
'#tree' => TRUE,
'#parents' => [
'options',
],
];
$form['settings'] = [
'#type' => 'fieldset',
'#tree' => TRUE,
'#title' => t('Settings'),
'#attributes' => [
'class' => [
'fieldset--settings',
'has-tooltip',
],
],
'#group' => 'options',
'#parents' => [
'options',
'settings',
],
];
$settings = $optionset
->getSettings();
$form['settings'] += $this
->attachSettingsForm($settings);
$responds = $optionset
->getSetting('respond') ?: [];
$form['respond'] = [
'#type' => 'fieldset',
'#title' => t('Responsive display'),
'#collapsible' => FALSE,
'#tree' => TRUE,
'#attributes' => [
'class' => [
'details--respond',
'has-tooltip',
],
],
'#group' => 'options',
'#parents' => [
'options',
'settings',
'respond',
],
'#description' => t('Containing breakpoints and settings objects.'),
];
$form['respond']['settings'] = [
'#type' => 'container',
'#title' => t('Responsive settings'),
'#collapsible' => FALSE,
'#tree' => TRUE,
'#attributes' => [
'class' => [
'form-wrapper--table',
'form-wrapper--table-ajax',
],
],
'#group' => 'respond',
'#parents' => [
'options',
'settings',
'respond',
],
'#description' => t('Containing breakpoints and settings objects.'),
'#prefix' => '<div id="edit-respond-settings-wrapper">',
'#suffix' => '</div>',
];
$num_responds = isset($form_state['num_responds']) ? $form_state['num_responds'] : count($responds);
if (empty($num_responds)) {
$num_responds = 1;
}
$form_state['num_responds'] = $num_responds;
$excludes = [
'cursor',
'loadingIcon',
'tint',
];
if ($form_state['num_responds'] > 0) {
for ($i = 0; $i <= $form_state['num_responds']; $i++) {
$form['respond']['settings'][$i] = [
'#type' => 'fieldset',
'#title' => t('Breakpoint #@num', [
'@num' => $i,
]),
'#tree' => TRUE,
'#collapsible' => TRUE,
'#collapsed' => TRUE,
'#group' => 'settings',
'#parents' => [
'options',
'settings',
'respond',
$i,
],
'#attributes' => [
'class' => [
'fieldset--responsive',
'fieldset--responsive--ajax',
'fieldset--breakpoint-' . $i,
],
],
];
$form['respond']['settings'][$i]['range'] = [
'#type' => 'textfield',
'#title' => t('Range'),
'#default_value' => isset($responds[$i]['range']) ? $responds[$i]['range'] : '',
'#size' => 40,
'#max_length' => 120,
'#description' => t('The window range to activate the responsive settings, e.g.: 600-799.'),
];
$form['respond']['settings'][$i]['enabled'] = [
'#type' => 'checkbox',
'#title' => t('Enabled'),
'#default_value' => isset($responds[$i]['enabled']) ? $responds[$i]['enabled'] : TRUE,
'#size' => 40,
'#max_length' => 120,
'#description' => t('Uncheck to disable the zoom at this range.'),
];
if ($admin_css) {
$form['respond']['settings'][$i]['enabled']['#field_suffix'] = ' ';
$form['respond']['settings'][$i]['enabled']['#title_display'] = 'before';
}
$form['respond']['settings'][$i]['remove_respond'] = [
'#type' => 'submit',
'#value' => t('x'),
'#name' => 'remove_respond_' . $i,
'#submit' => [
'_elevatezoomplus_ui_remove_respond',
],
'#ajax' => [
'callback' => '_elevatezoomplus_ui_remove_respond_callback',
'wrapper' => 'edit-respond-settings-wrapper',
],
'#prefix' => '<div class="form-item form-item--button-remove">',
'#suffix' => '</div>',
'#limit_validation_errors' => [],
];
$form['respond']['settings'][$i]['settings'] = [
'#type' => 'container',
'#open' => FALSE,
'#title' => t('Settings'),
'#title_display' => 'invisible',
'#attributes' => [
'class' => [
'form-wrapper--responsive',
'fieldset--settings',
],
],
'#group' => 'settings',
'#parents' => [
'options',
'settings',
'respond',
$i,
],
];
$settings = isset($responds[$i]) ? $responds[$i] : [];
$form['respond']['settings'][$i]['settings'] += $this
->attachSettingsForm($settings, $excludes);
}
}
$form['respond']['actions'] = [
'#type' => 'actions',
];
$form['respond']['actions']['add_respond'] = [
'#type' => 'submit',
'#value' => t('Add another respond'),
'#name' => 'add_respond',
'#submit' => [
'elevatezoomplus_ui_add_respond',
],
'#ajax' => [
'callback' => 'elevatezoomplus_ui_add_respond_callback',
'wrapper' => 'edit-respond-settings-wrapper',
],
'#limit_validation_errors' => [],
];
}
protected function attachSettingsForm($settings = [], $excludes = []) {
$admin_css = $this->manager
->config('admin_css', 'blazy.settings');
$form = [];
foreach ($this
->getFormElements() as $name => $element) {
if ($excludes && in_array($name, $excludes)) {
continue;
}
$element['default'] = isset($element['default']) ? $element['default'] : '';
$form[$name] = [
'#title' => isset($element['title']) ? $element['title'] : '',
'#default_value' => isset($settings[$name]) ? $settings[$name] : $element['default'],
];
if (isset($element['type'])) {
$form[$name]['#type'] = $element['type'];
if ($element['type'] != 'hidden') {
$form[$name]['#attributes']['class'][] = 'is-tooltip';
}
else {
unset($element['states']);
}
if ($element['type'] == 'textfield') {
$form[$name]['#size'] = 20;
$form[$name]['#maxlength'] = 255;
}
}
$items = [
'access',
'description',
'field_suffix',
'options',
'empty_option',
'states',
];
foreach ($items as $key) {
if (isset($element[$key])) {
$form[$name]['#' . $key] = $element[$key];
}
}
if (is_int($element['default'])) {
$form[$name]['#maxlength'] = 60;
$form[$name]['#attributes']['class'][] = 'form-text--int';
}
if ($admin_css && is_bool($element['default'])) {
$form[$name]['#field_suffix'] = ' ';
$form[$name]['#title_display'] = 'before';
}
$form[$name]['#attributes']['data-blazy-form-item'] = drupal_strtolower(str_replace('_', '-', $name));
}
return $form;
}
public function getFormElements() {
if (!isset($this->formElements)) {
$elements = [];
$elements['responsive'] = [
'type' => 'checkbox',
'title' => t('Responsive'),
'description' => t('Set to true to activate responsivenes. If you have a theme which changes size, or tablets which change orientation this is needed to be on.'),
'access' => FALSE,
];
$options = [
'inner' => 'Inner',
'lens' => 'Lens',
'window' => 'Window',
];
$elements['zoomType'] = [
'type' => 'select',
'title' => t('zoomType'),
'options' => $options,
'description' => t('The zoom type.'),
];
$elements['zoomWindowWidth'] = [
'type' => 'textfield',
'title' => t('zoomWindowWidth'),
'description' => t('Width of the zoomWindow (Note: zoomType must be "window").'),
];
$elements['zoomWindowHeight'] = [
'type' => 'textfield',
'title' => t('zoomWindowHeight'),
'description' => t('Height of the zoomWindow (Note: zoomType must be "window").'),
];
$elements['zoomWindowOffsetX'] = [
'type' => 'textfield',
'title' => t('zoomWindowOffsetX'),
'description' => t('The x-axis offset of the zoom window.'),
];
$elements['zoomWindowOffsetY'] = [
'type' => 'textfield',
'title' => t('zoomWindowOffsetY'),
'description' => t('The y-axis offset of the zoom window.'),
];
$elements['zoomWindowPosition'] = [
'type' => 'textfield',
'title' => t('zoomWindowPosition'),
'description' => t('Accepts a position, a selector or an element Id. For positions, once positioned, use zoomWindowOffsetX and zoomWindowOffsetY to adjust. Possible values: 1-16.'),
];
$elements['zoomWindowFadeIn'] = [
'type' => 'checkbox',
'title' => t('zoomWindowFadeIn'),
'description' => t('Set as a number e.g 200 for speed of Window fadeIn.'),
];
$elements['zoomWindowFadeOut'] = [
'type' => 'checkbox',
'title' => t('zoomWindowFadeOut'),
'description' => t('Set as a number e.g 200 for speed of Window fadeOut.'),
];
$elements['zoomTintFadeIn'] = [
'type' => 'checkbox',
'title' => t('zoomTintFadeIn'),
'description' => t('Set as a number e.g 200 for speed of Tint fadeIn.'),
];
$elements['zoomTintFadeOut'] = [
'type' => 'checkbox',
'title' => t('zoomTintFadeOut'),
'description' => t('Set as a number e.g 200 for speed of Tint fadeOut.'),
];
$elements['scrollZoom'] = [
'type' => 'checkbox',
'title' => t('scrollZoom'),
'description' => t('Set to true to activate zoom on mouse scroll.'),
];
$elements['imageCrossfade'] = [
'type' => 'checkbox',
'title' => t('imageCrossfade'),
'description' => t('Set to true to activate simultaneous crossfade of images on gallery change.'),
];
$elements['easing'] = [
'type' => 'checkbox',
'title' => t('easing'),
'description' => t('Set to true to activate easing.'),
];
$elements['easingType'] = [
'type' => 'textfield',
'title' => t('easingType'),
'description' => t('Default easing type is <code>easeOutExpo, (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b</code>. Extend jquery with other easing types before initiating the plugin and pass the easing type as a string value.'),
];
$elements['easingDuration'] = [
'type' => 'textfield',
'title' => t('easingDuration'),
'description' => t('The easing duration.'),
];
$elements['showLens'] = [
'type' => 'checkbox',
'title' => t('showLens'),
'description' => t('Set to false to hide the Lens.'),
];
$elements['lensSize'] = [
'type' => 'textfield',
'title' => t('lensSize'),
'description' => t('Used when zoomType set to lens, when zoom type is set to window, then the lens size is auto calculated.'),
];
$elements['lensFadeIn'] = [
'type' => 'checkbox',
'title' => t('lensFadeIn'),
'description' => t('Set as a number e.g 200 for speed of Lens fadeIn.'),
];
$elements['lensFadeOut'] = [
'type' => 'checkbox',
'title' => t('lensFadeOut'),
'description' => t('Set as a number e.g 200 for speed of Lens fadeOut.'),
];
$elements['borderSize'] = [
'type' => 'textfield',
'title' => t('borderSize'),
'description' => t('Border Size of the ZoomBox - Must be set here as border taken into account for plugin calculations.'),
];
$elements['borderColour'] = [
'type' => 'textfield',
'title' => t('borderColour'),
'description' => t('Border Color.'),
];
$elements['lensBorder'] = [
'type' => 'textfield',
'title' => t('lensBorder'),
'description' => t('Width in pixels of the lens border.'),
'field_suffix' => 'px',
];
$elements['lensShape'] = [
'type' => 'textfield',
'title' => t('lensShape'),
'description' => t('Can also be round (note that only modern browsers support round, will default to square in older browsers).'),
];
$elements['containLensZoom'] = [
'type' => 'checkbox',
'title' => t('containLensZoom'),
'description' => t('For use with the Lens Zoom Type. This makes sure the lens does not fall outside the outside of the image.'),
];
$elements['lensColour'] = [
'type' => 'textfield',
'title' => t('lensColour'),
'description' => t('Color of the lens background.'),
];
$elements['lensOpacity'] = [
'type' => 'textfield',
'title' => t('lensOpacity'),
'description' => t('Used in combination with lensColour to make the lens see through. When using tint, this is overrided to 0.'),
];
$elements['lenszoom'] = [
'type' => 'checkbox',
'title' => t('lenszoom'),
'description' => t('The lens zoom.'),
];
$elements['tint'] = [
'type' => 'checkbox',
'title' => t('tint'),
'description' => t('Enable a tint overlay.'),
];
$elements['tintColour'] = [
'type' => 'textfield',
'title' => t('tintColour'),
'description' => t('Color of the tint, can be #hex, word (red, blue), or rgb(x, x, x).'),
];
$elements['tintOpacity'] = [
'type' => 'textfield',
'title' => t('tintOpacity'),
'description' => t('Opacity of the tint.'),
];
$elements['constrainType'] = [
'type' => 'textfield',
'title' => t('constrainType'),
'description' => t('Constraint type.'),
];
$elements['constrainSize'] = [
'type' => 'textfield',
'title' => t('constrainSize'),
'description' => t('Constraint size.'),
];
$elements['cursor'] = [
'type' => 'textfield',
'title' => t('cursor'),
'description' => t('The default cursor is usually the arrow, if using a lightbox, then set the cursor to pointer so it looks clickable - Options are default, cursor, crosshair.'),
];
$elements['loadingIcon'] = [
'type' => 'textfield',
'title' => t('loadingIcon'),
'description' => t('Set to the url of the spinner icon to activate, e.g, http://www.example.com/spinner.gif.'),
];
$defaults = ElevateZoomPlus::defaultSettings();
foreach ($elements as $name => $element) {
$fallback = $element['type'] == 'checkbox' ? FALSE : '';
$elements[$name]['default'] = isset($defaults[$name]) ? $defaults[$name] : $fallback;
}
$this->formElements = $elements;
}
return $this->formElements;
}
public function edit_form_validate(&$form, &$form_state) {
parent::edit_form_validate($form, $form_state);
unset($form_state['values']['options']['options__active_tab']);
if (isset($form_state['values']['options']['settings']['respond'])) {
unset($form_state['values']['options']['settings']['respond']['actions']);
$responds = $form_state['values']['options']['settings']['respond'];
if ($responds) {
foreach ($responds as $key => $respond) {
unset($form_state['values']['options']['settings']['respond'][$key]['remove_respond']);
if (empty($respond['range'])) {
unset($form_state['values']['options']['settings']['respond'][$key]);
}
}
$responds = $form_state['values']['options']['settings']['respond'];
if (count($responds) > 0) {
$form_state['values']['options']['settings']['responsive'] = 1;
}
}
}
}
public function edit_form_submit(&$form, &$form_state) {
parent::edit_form_submit($form, $form_state);
$entity = $form_state['item'];
$default = $entity
->id() == 'default';
if (!$default) {
$defaults = ElevateZoomPlus::defaultSettings();
$settings = $form_state['values']['options']['settings'];
$this
->typecastOptionset($settings);
$optimized_values = array_diff_assoc($settings, $defaults);
if (isset($optimized_values['respond'])) {
foreach ($optimized_values['respond'] as &$respond) {
$respond = array_diff_assoc($respond, $defaults);
}
}
$entity
->setSettings($optimized_values);
}
}
public function typecastOptionset(array &$settings = []) {
if (empty($settings)) {
return;
}
$defaults = ElevateZoomPlus::defaultSettings();
foreach ($defaults as $name => $value) {
if (isset($settings[$name])) {
$type = gettype($defaults[$name]);
$type = $type == 'double' ? 'float' : $type;
if ($name == 'lensOpacity' || $name == 'tintOpacity') {
$type = $settings[$name] == '0' || $settings[$name] == '1' ? 'integer' : 'float';
}
settype($settings[$name], $type);
}
}
if (isset($settings['respond'])) {
foreach ($settings['respond'] as &$respond) {
if (isset($respond['enabled'])) {
settype($respond['enabled'], 'boolean');
}
foreach ($defaults as $name => $value) {
if (isset($respond[$name])) {
$type = gettype($defaults[$name]);
$type = $type == 'double' ? 'float' : $type;
if ($name == 'lensOpacity' || $name == 'tintOpacity') {
$type = $respond[$name] == '0' || $respond[$name] == '1' ? 'integer' : 'float';
}
settype($respond[$name], $type);
}
}
}
}
}
protected function getState($state) {
$states = [
static::ZOOM_TYPE_INNER => [
'visible' => [
'select[name$="[zoomType]"]' => [
'value' => 'inner',
],
],
],
static::ZOOM_TYPE_LENS => [
'visible' => [
'select[name$="[zoomType]"]' => [
'value' => 'lens',
],
],
],
static::ZOOM_TYPE_WINDOW => [
'visible' => [
'select[name$="[zoomType]"]' => [
'value' => 'window',
],
],
],
static::SHOW_LENS => [
'visible' => [
':input[name$="[showLens]"]' => [
'checked' => TRUE,
],
],
],
];
return $states[$state];
}
}
