dist/cms/sitecore.js
File
(function(global, undefined) { var kafe = global.kafe, $ = kafe.dependencies.jQuery; kafe.bonify({name:'cms.sitecore', version:'0.1.0', obj:(function(){
var
_getPlaceholders = function(){
var $placeholders = $('[data-kafesitecore-placeholder]');
var _output = [];
$placeholders.each(function(i,v){
var _ph = {};
_ph.$element = $(this);
_ph.name = _ph.$element.data('kafesitecore-placeholder');
_ph.label = !!_ph.$element.data('kafesitecore-displayname') ? _ph.$element.data('kafesitecore-displayname') : _ph.name;
_ph.filter = ':not(code, .scEmptyPlaceholder, .clearer)';
_ph.$locator = $('<span class="kafesitecore-editor-toolbox-locator"></span>');
_ph.$field = $('<input id="kafesitecore-editor-toolbox-placeholder'+i+'" type="checkbox" checked="checked"/>');
_ph.$fieldLabel = $('<label for="kafesitecore-editor-toolbox-placeholder'+i+'">'+_ph.label+'</label>');
if(!!_ph.$element.data('kafesitecore-placeholder-opposite')){
_ph.opposite = _ph.$element.data('kafesitecore-placeholder-opposite');
}
_output.push(_ph);
});
$.each(_output, function(i,_currentPh){
if(!!_currentPh.opposite){
$.each(_output, function(i,_otherPh){
if(_currentPh.opposite == _otherPh.name){
_currentPh.opposite = {
$element:_otherPh.$element,
$field:_otherPh.$field
};
return false;
}
});
_currentPh.opposite = $.isPlainObject(_currentPh.opposite) ? _currentPh.opposite : null;
}
});
return _output;
}
;
/**
* ### 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
*
* @module kafe.cms
* @class kafe.cms.sitecore
*/
var sitecore = {};
/**
* 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`
*
* @method editorToolbox
* @param {Object} [options] Initial configurations.
* @param {String} [options.label='EditorToolbox'] The label shown on the toolbox handle.
* @param {Function} [options.onUpdate] 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>
* @example
* // 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');
* }
* });
*/
sitecore.editorToolbox = function(){
/*--- Options ---*/
var c = {};
var options = (arguments) ? arguments[0] : {};
c.label = !!options.label ? options.label : 'Editor Toolbox';
c.placeholders = {
$elements: _getPlaceholders()
};
c.updateCallback = $.isFunction(options.onUpdate) ? options.onUpdate : function(){};
/*--- Functions ---*/
var _updateToolbox = function(){
/* Placeholders */
$.each(c.placeholders.$elements, function(i,_ph){
var _phIsEmpty = _ph.$element.children(_ph.filter).length === 0;
var _oppositeIsActive = _ph.opposite ? _ph.opposite.$field.is(':checked') : false;
var _phIsActive = _phIsEmpty && !_oppositeIsActive;
_ph.$field.prop('disabled', !_phIsActive);
});
c.updateCallback(_callbackData);
};
var _getCallbackData = function(){
/* Placeholders */
var _placeholders = [];
$.each(c.placeholders.$elements, function(i,_ph){
_placeholders.push(_ph.$element.get(0));
});
return {
placeholders:$(_placeholders)
};
};
/*--- Config ---*/
var _showToolbox = false;
var _toolboxOpenClass = 'open';
var _callbackData = _getCallbackData();
/*--- Elements ---*/
var $editorToolbox = $('<div id="kafesitecore-editor-toolbox"></div>');
var $toolboxContent = $('<div class="content"></div>').appendTo($editorToolbox).hide();
var _toolboxHandle = {
$self:$('<a href="#" class="handle"></a>'),
$label:$('<span class="label">'+c.label+'</span>')
};
_toolboxHandle.$self.append(_toolboxHandle.$label).appendTo($editorToolbox);
/*--- Bindings ---*/
_toolboxHandle.$self.on('click', function(e){
e.preventDefault();
$toolboxContent.toggle();
$editorToolbox.toggleClass(_toolboxOpenClass);
if($editorToolbox.hasClass(_toolboxOpenClass)){
_updateToolbox();
}
});
$editorToolbox.on('mouseleave',function(e){
if($editorToolbox.hasClass(_toolboxOpenClass)){
_toolboxHandle.$self.trigger('click');
}
});
/*--- Contents ---*/
/* Placeholders */
if(c.placeholders.$elements.length > 0){
var $scPlaceholders = $('<div class="toolbox-section placeholders"></div>').appendTo($toolboxContent);
var $pendingBox = $('<div style="display:none !important;"></div>').appendTo($editorToolbox);
$.each(c.placeholders.$elements, function(i,_ph){
var $currentItem = $('<div class="toolbox-item"></div>').appendTo($scPlaceholders);
_ph.$field.appendTo($currentItem).after(_ph.$fieldLabel)
.on('change', function(e, _isInit){
if(_ph.$field.is(':checked')){
_ph.$locator.replaceWith(_ph.$element);
}else{
_ph.$element.before(_ph.$locator).appendTo($pendingBox);
}
if(!_isInit){ _updateToolbox(); }
});
if(_ph.$element.children(_ph.filter).length === 0){
_ph.$field.prop('checked', false).trigger('change', true);
}
_showToolbox = true;
});
}
/*--- Initialization ---*/
if(_showToolbox){
$editorToolbox.prependTo('body').css({
'position':'fixed',
'top':'50%',
'left':'0',
'min-height':_toolboxHandle.$label.outerWidth()
}).css('margin-top','-'+($editorToolbox.outerHeight() / 2)+'px');
_toolboxHandle.$label.width($editorToolbox.outerHeight()).addClass('initialized');
_updateToolbox();
}
};
return sitecore;
})()}); })(typeof window !== 'undefined' ? window : this);