<?php // $file = /home/coopiak/amisdesseniors-fr/concours/plugins/system/djc2yootheme/modules/builder-djcatalog2-source/elements/djex-toggle/element.json

return [
  'name' => 'djex-toggle',
  'title' => 'Toggle',
  'group' => 'DJ-Extensions',
  'icon' => $filter->apply('url', 'images/icon.svg', $file),
  'iconSmall' => $filter->apply('url', 'images/iconSmall.svg', $file),
  'element' => true,
  'container' => true,
  'width' => 500,
  'templates' => [
    'render' => $filter->apply('path', './templates/template.php', $file),
    'content' => $filter->apply('path', './templates/content.php', $file)
  ],
  'defaults' => [
    'button_text' => 'Toggle',
    'button_style' => 'default',
    'button_size' => '',
    'icon_align' => 'left',
    'toggle_mode' => 'click',
    'toggle_animation_advanced' => 'false',
    'hidden' => true,
    'toggle_animation_use_advanced' => false,
    'duration' => 200,
    'margin' => 'default'
  ],
  'fields' => [
    'button_text' => [
      'label' => 'Button\'s Text',
      'description' => 'Text displayed on the button.',
      'type' => 'text',
      'source' => true
    ],
    'button_style' => [
      'label' => 'Button Style',
      'description' => 'Set the button style.',
      'type' => 'select',
      'options' => [
        'Button Default' => 'default',
        'Button Primary' => 'primary',
        'Button Secondary' => 'secondary',
        'Button Danger' => 'danger',
        'Button Text' => 'text',
        'Link' => '',
        'Link Muted' => 'link-muted',
        'Link Text' => 'link-text'
      ]
    ],
    'button_size' => [
      'label' => 'Button Size',
      'description' => 'Set the button size.',
      'type' => 'select',
      'options' => [
        'Default' => '',
        'Small' => 'small',
        'Large' => 'large'
      ]
    ],
    'button_fullwidth' => [
      'type' => 'checkbox',
      'text' => 'Full width button',
      'enable' => 'button_style && button_style != \'link-muted\' && button_style != \'link-text\''
    ],
    'icon' => [
      'label' => 'Icon',
      'description' => 'Select an icon.',
      'type' => 'icon',
      'source' => true
    ],
    'icon_align' => [
      'label' => 'Icon Align',
      'description' => 'Choose the icon\'s alignment.',
      'type' => 'select',
      'options' => [
        'Left' => 'left',
        'Right' => 'right'
      ]
    ],
    'hidden' => [
      'label' => 'Hide content on load',
      'type' => 'checkbox',
      'enable' => 'content'
    ],
    'content' => [
      'label' => 'Toggle\'s content',
      'description' => 'It will be displayed after the toggle button\'s action.',
      'type' => 'editor',
      'source' => true
    ],
    'toggle_mode' => [
      'label' => 'Mode',
      'description' => 'Set the toggle\'s mode.',
      'type' => 'select',
      'options' => [
        'Hover' => 'hover',
        'Click' => 'click'
      ]
    ],
    'toggle_animation' => [
      'label' => 'Toggle Animation',
      'description' => 'Choose an animation to use from the list of <a href="https://getuikit.com/docs/animation">animations</a>.',
      'type' => 'select',
      'default' => 'false',
      'options' => [
        'None' => 'false',
        'Fade' => 'fade',
        'Scale Up' => 'scale-up',
        'Scale Down' => 'scale-down',
        'Slide Top' => 'slide-top',
        'Slide Bottom' => 'slide-bottom',
        'Slide Left' => 'slide-left',
        'Slide Right' => 'slide-right',
        'Slide Top Small' => 'slide-top-small',
        'Slide Bottom Small' => 'slide-bottom-small',
        'Slide Left Small' => 'slide-left-small',
        'Slide Right Small' => 'slide-right-small',
        'Slide Top Medium' => 'slide-top-medium',
        'Slide Bottom Medium' => 'slide-bottom-medium',
        'Slide Left Medium' => 'slide-left-medium',
        'Slide Right Medium' => 'slide-right-medium',
        'Ken Burns' => 'ken-burns',
        'Shake' => 'shake',
        'Stroke' => 'stroke'
      ],
      'enable' => '!toggle_animation_use_advanced'
    ],
    'toggle_animation_use_advanced' => [
      'label' => 'Use Advanced Toggle Animation',
      'description' => 'Check to activate field for advanced toggle animations.',
      'type' => 'checkbox'
    ],
    'toggle_animation_advanced' => [
      'label' => 'Advanced Toggle Animation',
      'description' => 'Space separated names of <a href="https://getuikit.com/docs/animation">animations</a> to use, comma separated for out animation.',
      'type' => 'text',
      'enable' => 'toggle_animation_use_advanced'
    ],
    'duration' => [
      'label' => 'Duration',
      'description' => 'Set the animation duration in ms.',
      'type' => 'number',
      'enable' => 'toggle_animation != \'false\' || (toggle_animation_use_advanced && toggle_animation_advanced != \'false\')'
    ],
    'position' => $config->get('builder.position'),
    'position_left' => $config->get('builder.position_left'),
    'position_right' => $config->get('builder.position_right'),
    'position_top' => $config->get('builder.position_top'),
    'position_bottom' => $config->get('builder.position_bottom'),
    'position_z_index' => $config->get('builder.position_z_index'),
    'margin' => $config->get('builder.margin'),
    'margin_remove_top' => $config->get('builder.margin_remove_top'),
    'margin_remove_bottom' => $config->get('builder.margin_remove_bottom'),
    'maxwidth' => $config->get('builder.maxwidth'),
    'maxwidth_breakpoint' => $config->get('builder.maxwidth_breakpoint'),
    'block_align' => $config->get('builder.block_align'),
    'block_align_breakpoint' => $config->get('builder.block_align_breakpoint'),
    'block_align_fallback' => $config->get('builder.block_align_fallback'),
    'text_align' => $config->get('builder.text_align'),
    'text_align_breakpoint' => $config->get('builder.text_align_breakpoint'),
    'text_align_fallback' => $config->get('builder.text_align_fallback'),
    'animation' => $config->get('builder.animation'),
    '_parallax_button' => $config->get('builder._parallax_button'),
    'visibility' => $config->get('builder.visibility'),
    'name' => $config->get('builder.name'),
    'status' => $config->get('builder.status'),
    'source' => $config->get('builder.source'),
    'id' => $config->get('builder.id'),
    'class' => $config->get('builder.cls'),
    'attributes' => $config->get('builder.attrs'),
    'css' => [
      'label' => 'CSS',
      'description' => 'Enter your own custom CSS. The following selectors will be prefixed automatically for this element: <code>.el-element</code>',
      'type' => 'editor',
      'editor' => 'code',
      'mode' => 'css',
      'attrs' => [
        'debounce' => 500
      ]
    ]
  ],
  'fieldset' => [
    'default' => [
      'type' => 'tabs',
      'fields' => [[
          'title' => 'Content',
          'fields' => ['content','button_text','icon']
        ],[
          'title' => 'Settings',
          'fields' => ['button_style','button_size','button_fullwidth','hidden','icon_align','toggle_mode','toggle_animation','toggle_animation_use_advanced','toggle_animation_advanced','duration',[
              'label' => 'General',
              'type' => 'group',
              'fields' => ['position','position_left','position_right','position_top','position_bottom','position_z_index','margin','margin_remove_top','margin_remove_bottom','maxwidth','maxwidth_breakpoint','block_align','block_align_breakpoint','block_align_fallback','text_align','text_align_breakpoint','text_align_fallback','animation','_parallax_button','visibility']
            ]]
        ],$config->get('builder.advanced')]
    ]
  ]
];