/*global define, TimelineLite, TweenLite, $ */
/**
* This submodule contains theme-specific classes with animation sequences such as Full Screen transition or tooltip setter helper method.
*
* @module RAMP
* @submodule Theme
*
*/
/**
* Base theme for RAMP.
*
* ####Imports RAMP Modules:
* {{#crossLink "Util"}}{{/crossLink}}
*
* @class Theme
* @static
* @uses dojo/_base/lang
*/
define(['dojo/_base/lang'],
function (lang) {
'use strict';
var body = $('body'),
wbCore = $('main'),
wbFoot = $('footer'),
megaMenuDiv = $('#wb-sm'),
navigation = $('#wb-bar'),
header = $("body>header"),
transitionDuration = 0.5,
layout = {
headerHeight: 155,
headerHeightCollapsed: 64,
footerHeight: 30,
footerHeightCollapsed: 5,
subtitleHeight: 35,
toolbarHeight: 32
},
// height gain from the fullscreening the template
heightGain = layout.headerHeight - layout.headerHeightCollapsed + layout.footerHeight - layout.footerHeightCollapsed,
isFullScreen = false,
fullScreenTimeLine = new TimelineLite({ paused: true }),
subpanelTimeline = new TimelineLite();
// tweening wet template parts
fullScreenTimeLine
.to(header, transitionDuration, { top: navigation.outerHeight() * -1, position: 'relative', ease: 'easeOutCirc' }, 0)
.set([navigation, megaMenuDiv], { display: 'none !important' })
.to(wbCore, transitionDuration, { top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: 'easeOutCirc' }, 0)
.to(wbFoot, transitionDuration, { height: layout.footerHeightCollapsed, ease: 'easeOutCirc' }, 0)
.call(function () { body.addClass('full-screen'); }) // set full-screen class here, not in the callback since callbacks can be overwritten by fullScreenCallback function
.add(subpanelTimeline, 0); // special timeline to tween subpanels
/**
* Toggles full screen mode
*
* @method _toggleFullScreenMode
* @param {Boolean} fullscreen true - full screen on; false - full screen off; undefined - toggle;
*/
function _toggleFullScreenMode(fullscreen) {
subpanelTimeline
.clear() // need to recreate this timeline every time to capture newly created subpanels
.fromTo('.sub-panel-container.summary-data-details', transitionDuration,
{ top: layout.headerHeight + layout.toolbarHeight, bottom: layout.footerHeight },
{ top: layout.headerHeightCollapsed + layout.toolbarHeight, bottom: layout.footerHeightCollapsed, ease: 'easeOutCirc' }, 0)
.fromTo('.sub-panel-container.full-data-details', transitionDuration,
{ top: layout.headerHeight, bottom: layout.footerHeight },
{ top: layout.headerHeightCollapsed, bottom: layout.footerHeightCollapsed, ease: 'easeOutCirc' }, 0);
isFullScreen = typeof fullscreen === 'boolean' ? fullscreen : !isFullScreen ;
if (isFullScreen) {
// need to tween datatables separately since it's very cumbersome to calculate their exact height - easier just to adjust height up/down by height gained when fullscreening the template
TweenLite
.to('.full-data-mode .dataTables_scrollBody', transitionDuration,
{ height: '+=' + heightGain, ease: 'easeOutCirc', delay: 0.02 }); // animate height of the datatable scrollBody since it's explicitly set ,
fullScreenTimeLine.play();
} else {
TweenLite
.to('.full-data-mode .dataTables_scrollBody', transitionDuration - 0.02,
{ height: '-=' + heightGain, ease: 'easeInCirc' }); // animate height of the datatable scrollBody since it's explicitly set ,
body.removeClass('full-screen');
fullScreenTimeLine.reverse();
}
}
return {
/**
* Allows to set callbacks to the full screen transition.
*
* @method fullScreenCallback
* @param {String} event Event name to set a callback on
* @param {Function} func A callback function
* @return {Object} This
* @chainable
*/
fullScreenCallback: function (event, func) {
fullScreenTimeLine.eventCallback(event, func);
return this;
},
/**
* Returns a boolean indication whether the full screen mode is on.
*
* @method isFullScreen
* @return {Boolean} true / false
*/
isFullScreen: function () {
return isFullScreen;
},
/**
* Toggles the FullScreen mode of the application
*
* @method toggleFullScreenMode
* @param {Boolean} fullscreen true - expand; false - collapse; undefined - toggle;
* @return {Object} This
* @chainable
*/
toggleFullScreenMode: function (fullscreen) {
_toggleFullScreenMode(fullscreen);
return this;
},
/**
* Tooltip setter helper method.
*
* @method tooltipster
* @param {Jquery} target A node to looked for tooltiped children on
* @param {String} type Type of the tooltips to set
* @param {String} [action] Action name: "update" will update all the tooltips on target with their respective title attributes;
* null will create new tooltips
* @param {String} customTheme The custom theme to be used. "null" for default.
* @return {Object} This
* @chainable
*/
tooltipster: function (target, type, action, customTheme, options) {
var attr;
target = target || $('body');
switch (type) {
case 'map':
break;
default:
attr = {
theme: customTheme || 'tooltipster-shadow',
delay: 500
};
break;
}
switch (action) {
case 'update':
target
.find('.tooltipstered')
.each(function (i, obj) {
var node = $(obj);
node
.attr('data-tooltip', node.attr('title'))
.tooltipster('content', node.attr('title'))
.removeAttr('title');
});
break;
case 'destroy':
target
.find('.tooltipstered')
.each(function (i, obj) {
var node = $(obj);
node
.tooltipster('destroy');
});
break;
default:
target
.find('.tooltip, ._tooltip')
// preserve title value for future use
.each(function (i, obj) {
var node = $(obj),
title = node.attr('title');
if (title) {
node.attr('data-tooltip', node.attr('title'));
} else {
node.attr('title', node.data('tooltip'));
}
node.tooltipster(
lang.mixin({
theme: node.data('tooltip-theme') || attr.theme,
//autoClose: false,
maxWidth: node.data('tooltip-maxwidth') || null,
delay: attr.delay
},
options
)
);
})
.removeAttr('title');
break;
}
return this;
}
};
});
undefined