kafe.cms.sitecore

Class

Version 0.1.0

Additionnal methods for Sitecore Adds the environment variable sitecore-editor to kafe based on the data attribute data-kafesitecore (true/false) on the html tag

Source: dist/cms/sitecore.js

Methods

editorToolbox

Creates a toolbox for the Sitecore page editor. Allows the user to toggle unused placeholders to reflect a closer to reality result of the page.

Requires data attribute data-kafesitecore="true" on html tag when page-editor is active. Styles location : /vendor/ressources/cms.sitecore/editorToolbox.css

editorToolbox
  • options

Parameters:

  • [options] Object Optional

    Initial configurations.

    • [label = 'EditorToolbox'] String Optional

      The label shown on the toolbox handle.

    • [onUpdate] Function Optional

      Callback that fires everytime the toolbox updates its component status.

Example:

// Initializing placeholders for the toolbox using data attributes
					<section data-kafesitecore-placeholder="sidebar-left" data-kafesitecore-displayname="Left column" data-kafesitecore-placeholder-opposite="sidebar-right">
					    <ul>
					        <li>This is the optional left column</li>
					        <li>data-kafesitecore-placeholder : *Required* The name of the placeholder defined in Sitecore, this attribute initiates the element has a placeholder for the toolbox.</li>
					        <li>data-kafesitecore-displayname : The label identifying the placeholder within the toolbox, defaults to the value of data-kafesitecore-placeholder if not set.</li>
					        <li>data-kafesitecore-placeholder-opposite : The data-kafesitecore-placeholder value of the opposite placeholder. Determines that the current placeholder should not be toggled if the opposite placeholder is active.</li>
					   </ul>
					</section>
// Initializing the toolbox
					kafe.cms.sitecore.editorToolbox({
					    label:"My Toolbox",
					    onUpdate:function(data){
					        console.log('There are ' + data.placeholders.filter(':visible').length + ' visible in the page');
					    }
					});