bee-core documentation (alpha)

Sitecore Experience Editor provides several Chrome Types that allows you to inline edit content.

Bee-core makes wrapper around Experience Editor and provide you the state and behavior of each Chrome type as Events.

For example You have the jQuery Slider and each Slide is Rendering what can be moved or completely removed in Experience Editor. For keep Slider in actual state - just listen any interactions with Renderings and call update() method of Slider.

Example:

SliderView.cshtml

<div class="slider" id="my-slider">
  <ul class="slider__mask">
    @Html.Sitecore().Placeholder(Model.InsidePlaceholderName)
  </ul>

  <div class="slider__pager"></div>
</div>

SlideView.cshtml

<li class="slider__slide">
  <div class="slider__slide__title">@Html.Raw(Model.RichtextTitle)</div>
  <div class="slider__slide__description">@Html.Raw(Model.RichtextDescription)</div>
</li>

main.js:

var gallery = $('#my-slider').slider();

// Update gallery on any slides interaction through experience editor
gallery.on('placeholder:insertRendering placeholder:moveRendering placeholder:removeRendering', function(){
  gallery.slider('update');
});