File "fl-lightbox.js"
Full Path: /www/wwwroot/shphe-en.com/wp-content/plugins/bb-plugin/js/fl-lightbox.js
File size: 11.27 KB
MIME-type: --
Charset: utf-8
(function($){
/**
* Custom lightbox for builder popups.
*
* @class FLLightbox
* @since 1.0
*/
FLLightbox = function(settings)
{
this._init(settings);
this._render();
this._bind();
};
/**
* Closes the lightbox of a child element that
* is passed to this method.
*
* @since 1.0
* @static
* @method closeParent
* @param {Object} child An HTML element or jQuery reference to an element.
*/
FLLightbox.closeParent = function(child)
{
var instanceId = $(child).closest('.fl-lightbox-wrap').attr('data-instance-id');
FLLightbox._instances[instanceId].close();
};
/**
* An object that stores a reference to each
* lightbox instance that is created.
*
* @since 1.0
* @static
* @access private
* @property {Object} _instances
*/
FLLightbox._instances = {};
/**
* Prototype for new instances.
*
* @since 1.0
* @property {Object} prototype
*/
FLLightbox.prototype = {
/**
* A unique ID for this instance that's used to store
* it in the static _instances object.
*
* @since 1.0
* @access private
* @property {String} _id
*/
_id: null,
/**
* A jQuery reference to the main wrapper div.
*
* @since 1.0
* @access private
* @property {Object} _node
*/
_node: null,
/**
* Flag for whether the lightbox is visible or not.
*
* @since 1.0
* @access private
* @property {Boolean} _visible
*/
_visible: false,
/**
* A timeout used to throttle the resize event.
*
* @since 1.0
* @access private
* @property {Object} _resizeTimer
*/
_resizeTimer: null,
/**
* A flag for whether this instance should be
* draggable or not.
*
* @since 1.0
* @access private
* @property {Boolean} _draggable
*/
_draggable: false,
/**
* Default config object.
*
* @since 1.0
* @access private
* @property {Object} _defaults
* @property {String} _defaults.className - A custom classname to add to the wrapper div.
* @property {Boolean} _defaults.destroyOnClose - Flag for whether the instance should be destroyed when closed.
*/
_defaults: {
className: '',
destroyOnClose: false
},
/**
* Opens the lightbox. You can pass new content to this method.
* If no content is passed, the previous content will be shown.
*
* @since 1.0
* @method open
* @param {String} content HTML content to add to the lightbox.
*/
open: function(content)
{
this._node.find('.fl-lightbox').attr( 'style', '' );
this._node.show();
this._visible = true;
if(typeof content !== 'undefined') {
this.setContent(content);
}
else {
this._resize();
}
this.trigger('open');
},
/**
* Closes the lightbox.
*
* @since 1.0
* @method close
*/
close: function()
{
// Temporary fix for link editor not closing since WP 4.5
if ( 'undefined' != typeof tinymce && 'undefined' != typeof tinymce.EditorManager.activeEditor && tinymce.EditorManager.activeEditor != null ) {
tinymce.EditorManager.activeEditor.hide();
}
this._node.hide();
this._visible = false;
this.trigger('close');
if(this._defaults.destroyOnClose) {
this.destroy();
}
},
/**
* Adds HTML content to the lightbox replacing any
* previously added content.
*
* @since 1.0
* @method setContent
* @param {String} content HTML content to add to the lightbox.
*/
setContent: function(content)
{
this._node.find('.fl-lightbox-content').html(content);
this._resize();
},
/**
* Uses the jQuery empty function to remove lightbox
* content and any related events.
*
* @since 1.0
* @method empty
*/
empty: function()
{
this._node.find('.fl-lightbox-content').empty();
this._node.find('.fl-lightbox').removeClass('fl-lightbox-expanded');
},
/**
* Bind an event to the lightbox.
*
* @since 1.0
* @method on
* @param {String} event The type of event to bind.
* @param {Function} callback A callback to fire when the event is triggered.
*/
on: function(event, callback)
{
this._node.on(event, callback);
},
/**
* Unbind an event from the lightbox.
*
* @since 1.0
* @method off
* @param {String} event The type of event to unbind.
*/
off: function(event)
{
this._node.off(event);
},
/**
* Trigger an event on the lightbox.
*
* @since 1.0
* @method trigger
* @param {String} event The type of event to trigger.
* @param {Object} params Additional parameters to pass to the event.
*/
trigger: function(event, params)
{
this._node.trigger(event, params);
},
/**
* Enable or disable dragging for the lightbox.
*
* @since 1.0
* @method draggable
* @param {Boolean} toggle Whether the lightbox should be draggable or not.
*/
draggable: function(toggle)
{
var mask = this._node.find('.fl-lightbox-mask'),
lightbox = this._node.find('.fl-lightbox');
toggle = typeof toggle === 'undefined' ? false : toggle;
if(this._draggable) {
lightbox.draggable('destroy');
}
if(toggle) {
this._unbind();
this._draggable = true;
mask.hide();
lightbox.draggable({
cursor: 'move',
handle: toggle.handle || ''
});
}
else {
mask.show();
this._bind();
this._draggable = false;
}
this._resize();
},
/**
* Destroy the lightbox by removing all elements, events
* and object references.
*
* @since 1.0
* @method destroy
*/
destroy: function()
{
$(window).off('resize.fl-lightbox-' + this._id);
this._node.empty();
this._node.remove();
FLLightbox._instances[this._id] = 'undefined';
try{ delete FLLightbox._instances[this._id]; } catch(e){}
},
/**
* Render the expand/contract of lightbox
*
* @method renderResize
* @param {String}
*/
renderResize: function(method)
{
if(typeof method !== 'undefined') {
var activeNode = this._getActiveNode();
lightbox = activeNode.find('.fl-lightbox'),
boxFields = lightbox.find('.fl-builder-settings-fields'),
win = $(window),
winHeight = win.height(),
winWidth = win.width(),
boxHeaderHeight = lightbox.find('.fl-lightbox-header').height(),
boxTabsHeight = lightbox.find('.fl-builder-settings-tabs').height(),
boxFooterHeight = lightbox.find('.fl-lightbox-footer').height(),
boxFieldHeight = (winHeight - (boxHeaderHeight + boxTabsHeight + boxFooterHeight + 103)),
editor = typeof tinymce !== 'undefined' && tinymce.EditorManager.activeEditor ? tinymce : null,
editorId = editor ? editor.EditorManager.activeEditor.id : 'flhiddeneditor',
editorIframeEl = lightbox.find('#'+ editorId +'_ifr'),
editorTextarea = lightbox.find('#'+ editorId),
codeField = lightbox.find('.fl-code-field .ace_editor');
if(method == 'expand' || method == 'window_resize') {
if(method == 'window_resize' && !lightbox.hasClass('fl-lightbox-expanded')) {
return false;
}
boxFields.css('height', boxFieldHeight + 'px');
if(method == 'expand') {
lightbox.addClass('fl-lightbox-expanded');
lightbox.draggable('disable');
}
if(editorIframeEl.length > 0) {
editorIframeEl.css('height', (boxFieldHeight - 145) + 'px');
}
if(editorTextarea.length > 0) {
editorTextarea.css('height', (boxFieldHeight - 145) + 'px');
}
if(codeField.length > 0) {
codeField.css('height', (boxFieldHeight - 30) + 'px');
}
}
else {
// Contract lightbox
setTimeout($.proxy(this._resize, this), 250);
lightbox.removeClass('fl-lightbox-expanded');
boxFields.removeAttr('style');
if(editorId !== null) {
editorIframeEl.css('height', '232px');
editorTextarea.css('height', '232px');
}
if(codeField.length > 0) {
codeField.css('height', '380px');
}
lightbox.draggable('enable');
}
}
},
/**
* Initialize this lightbox instance.
*
* @since 1.0
* @access private
* @method _init
* @param {Object} settings A setting object for this instance.
*/
_init: function(settings)
{
var i = 0,
prop = null;
for(prop in FLLightbox._instances) {
i++;
}
this._defaults = $.extend({}, this._defaults, settings);
this._id = new Date().getTime() + i;
FLLightbox._instances[this._id] = this;
},
/**
* Renders the main wrapper.
*
* @since 1.0
* @access private
* @method _render
*/
_render: function()
{
this._node = $('<div class="fl-lightbox-wrap" data-instance-id="'+ this._id +'"><div class="fl-lightbox-mask"></div><div class="fl-lightbox"><div class="fl-lightbox-content-wrap"><div class="fl-lightbox-content"></div></div></div></div>');
this._node.addClass(this._defaults.className);
$('body').append(this._node);
},
/**
* Binds events for this instance.
*
* @since 1.0
* @access private
* @method _bind
*/
_bind: function()
{
$(window).on('resize.fl-lightbox-' + this._id, $.proxy(this._delayedResize, this));
},
/**
* Unbinds events for this instance.
*
* @since 1.0
* @access private
* @method _unbind
*/
_unbind: function()
{
$(window).off('resize.fl-lightbox-' + this._id);
},
/**
* Resizes the lightbox after a delay.
*
* @since 1.0
* @access private
* @method _delayedResize
*/
_delayedResize: function()
{
clearTimeout(this._resizeTimer);
this._resizeTimer = setTimeout($.proxy(this._resize, this), 250);
this.renderResize('window_resize');
},
/**
* Resizes the lightbox.
*
* @since 1.0
* @access private
* @method _resize
*/
_resize: function()
{
if(this._visible) {
var lightbox = this._node.find('.fl-lightbox'),
boxHeight = lightbox.height(),
boxWidth = lightbox.width(),
win = $(window),
winHeight = win.height(),
winWidth = win.width(),
top = '0px',
left = ((winWidth - boxWidth)/2 - 30) + 'px';
// Zero out margins and position.
lightbox.css({
'margin' : '0px',
'top' : 'auto',
'left' : 'auto'
});
// Get the top position.
if(winHeight - 80 > boxHeight) {
top = ((winHeight - boxHeight)/2 - 40) + 'px';
}
// Set the positions.
if(this._draggable) {
lightbox.css('top', top);
lightbox.css('left', FLBuilderConfig.isRtl ? '-' + left : left);
}
else {
lightbox.css('margin-top', top);
lightbox.css('margin-left', 'auto');
lightbox.css('margin-right', 'auto');
}
}
},
/**
* Closes the lightbox when the esc key is pressed.
* Currently not in use.
*
* @since 1.0
* @access private
* @method _onKeypress
* @param {Object} e An event object.
*/
_onKeypress: function(e)
{
if(e.which == 27 && this._visible) {
this.close();
}
},
/**
* Get the current active lightbox from multiple instances.
*
* @since 1.0
* @access private
* @method _getActiveNode
* @return {object} Current node
*/
_getActiveNode: function()
{
var activeNode = this._node;
$.each(FLLightbox._instances, function(i, obj){
if($(obj._node).is(':visible')) {
activeNode = $(obj._node);
}
});
return activeNode;
}
};
})(jQuery);