JavaScript Events

FredElementDrop

This event will trigger when any Element is dropped to a dropzone. You can access fredEl from the event.detail.fredEl object.

Example

document.body.addEventListener("FredElementDrop", function(){
    $owl();
});

FredElementSettingChange

This event will trigger when Element setting on any Element is changed. You can access fredEl from the event.detail.fredEl object.

Example

document.body.addEventListener("FredElementSettingChange", function(){
    $owl();
});

Full Featured Example

Here's an example use case of re-applying a jQuery class for a slider when changes are made.

Slider Element

The slider element will create new or fewer slides based on the number defined in the element's options.

Markup

<div class="col-md-8 owl-init slider-main owl-carousel">
    {% for i in 0..(slides - 1) %}
        <div class="item-slide">
            <div class="card-banner" style="height:600px;">
                <div class="overlay-cover d-flex align-items-center justify-content-center">
                    <div class="text-center">
                        <h3 data-fred-name="slider_header{{i}}">Default Value {{i+1}}</h3>
                        <p data-fred-name="slider_text{{i}}">This is some default text.</a>
                    </div>
                </div>
            </div>
        </div>
    {% endfor %}
</div>

Options

{
  "settings": [
    {
      "name": "slides",
      "label": "Slides",
      "type": "slider",
      "value": 3,
      "min": 1,
      "max": 6
    }
  ]
}

Template Script

The template will initialize the slider on first load, and re-initialize when the element is dropped or altered.

<link rel="stylesheet" href="//unpkg.com/owl.carousel/dist/assets/owl.carousel.min.css" />
<link rel="stylesheet" href="//unpkg.com/owl.carousel/dist/assets/owl.theme.default.min.css" />
<script src="//unpkg.com/jquery/dist/jquery.js"></script>
<script src="//unpkg.com/owl.carousel/dist/owl.carousel.js"></script>
<script>
    var $owl = function(){
        $('.owl-carousel').owlCarousel({
        loop:true,
        margin:10,
        nav:true,
        items:1
      });
    };
    document.body.addEventListener("FredElementDrop", function(){
      $owl();
    });
    document.body.addEventListener("FredElementSettingChange", function(){
      $owl();
    });
    $(document).ready(function(){
      $owl();
    });
</script>

Last modified: 17 June 2024