"use strict";
(function ($){
$.fn.tabSlideOut=function (callerSettings){
function heightAsString(node){
return parseInt(node.outerHeight() + 1, 10) + 'px';
}
function widthAsString(node){
return parseInt(node.outerWidth() + 1, 10) + 'px';
}
function borderWidth(element, edge){
return parseInt(element.css('border-' + edge + '-width'), 10);
}
function calculatePanelSize(){
var available=$(window).height();
if(edge==='top'||edge==='bottom'){
available=$(window).width();
}
return available - parseInt(settings.otherOffset) - parseInt(settings.offset);
}
var panel=this;
function isOpen(){
return panel.hasClass('ui-slideouttab-open');
}
if(typeof callerSettings=='string'){
switch (callerSettings){
case 'open':
this.trigger('open');
return this;
case 'close':
this.trigger('close');
return this;
case 'isOpen':
return isOpen();
case 'toggle':
this.trigger('toggle');
return this;
case 'bounce':
this.trigger('bounce');
return this;
default:
throw "Invalid tabSlideOut command";
}}else{
var settings=$.extend({
tabLocation: 'left',
tabHandle: '.handle',
action: 'click',
hoverTimeout: 5000,
offset: '200px',
offsetReverse: false,
otherOffset: null,
handleOffset: null,
handleOffsetReverse: false,
bounceDistance: '50px',
bounceTimes: 4,
bounceSpeed: 300,
tabImage: null,
tabImageHeight: null,
tabImageWidth: null,
onLoadSlideOut: false,
clickScreenToClose: true,
clickScreenToCloseFilters: ['.ui-slideouttab-panel'],
onOpen: function (){},
onClose: function (){},
onSlide: function (){},
onBeforeOpen: function (){
return true;
},
onBeforeClose: function (){
return true;
},
onBeforeSlide: function (){
return true;
}}, callerSettings||{});
var edge=settings.tabLocation;
var handle=settings.tabHandle=$(settings.tabHandle, panel);
panel.addClass('ui-slideouttab-panel')
.addClass('ui-slideouttab-' + edge);
if(settings.offsetReverse)
panel.addClass('ui-slideouttab-panel-reverse');
handle.addClass('ui-slideouttab-handle');
if(settings.handleOffsetReverse)
handle.addClass('ui-slideouttab-handle-reverse');
settings.toggleButton=$(settings.toggleButton);
if(settings.tabImage!==null){
var imageHeight=0;
var imageWidth=0;
if(settings.tabImageHeight!==null&&settings.tabImageWidth!==null){
imageHeight=settings.tabImageHeight;
imageWidth=settings.tabImageWidth;
}else{
var img=new Image();
img.src=settings.tabImage;
imageHeight=img.naturalHeight;
imageWidth=img.naturalWidth;
}
handle.addClass('ui-slideouttab-handle-image');
handle.css({
'background': 'url(' + settings.tabImage + ') no-repeat',
'width': imageWidth,
'height': imageHeight
});
}
if(edge==='top'||edge==='bottom'){
settings.panelOffsetFrom =
settings.offsetReverse ? 'right':'left';
settings.handleOffsetFrom =
settings.handleOffsetReverse ? 'right':'left';
}else{
settings.panelOffsetFrom =
settings.offsetReverse ? 'bottom':'top';
settings.handleOffsetFrom =
settings.handleOffsetReverse ? 'bottom':'top';
}
if(settings.handleOffset===null){
settings.handleOffset='-' + borderWidth(panel, settings.handleOffsetFrom) + 'px';
}
if(edge==='top'||edge==='bottom'){
panel.css(settings.panelOffsetFrom, settings.offset);
handle.css(settings.handleOffsetFrom, settings.handleOffset);
if(settings.otherOffset!==null){
panel.css('width', calculatePanelSize() + 'px');
$(window).resize(function (){
panel.css('width', calculatePanelSize() + 'px');
});
}
if(edge==='top'){
handle.css({'bottom': '-' + heightAsString(handle)});
}else{
handle.css({'top': '-' + heightAsString(handle)});
}}else{
panel.css(settings.panelOffsetFrom, settings.offset);
handle.css(settings.handleOffsetFrom, settings.handleOffset);
if(settings.otherOffset!==null){
panel.css('height', calculatePanelSize() + 'px');
$(window).resize(function (){
panel.css('height', calculatePanelSize() + 'px');
});
}
if(edge==='left'){
handle.css({'right': '0'});
}else{
handle.css({'left': '0'});
}}
handle.on('click', function (event){
event.preventDefault();
});
settings.toggleButton.on('click', function (event){
event.preventDefault();
});
panel.addClass('ui-slideouttab-ready');
var close=function (){
if(settings.onBeforeSlide()&&settings.onBeforeClose()){
panel.removeClass('ui-slideouttab-open').trigger('slideouttabclose');
settings.onSlide();
settings.onClose();
}};
var open=function (){
if(settings.onBeforeSlide()&&settings.onBeforeOpen()){
panel.addClass('ui-slideouttab-open').trigger('slideouttabopen');
settings.onSlide();
settings.onOpen();
}};
var toggle=function (){
if(isOpen()){
close();
}else{
open();
}};
var moveIn=[];
moveIn[edge]='-=' + settings.bounceDistance;
var moveOut=[];
moveOut[edge]='+=' + settings.bounceDistance;
var bounceIn=function (){
var temp=panel;
for (var i=0; i < settings.bounceTimes; i++){
temp=temp.animate(moveIn, settings.bounceSpeed)
.animate(moveOut, settings.bounceSpeed);
}
panel.trigger('slideouttabbounce');
};
var bounceOut=function (){
var temp=panel;
for (var i=0; i < settings.bounceTimes; i++){
temp=temp.animate(moveOut, settings.bounceSpeed)
.animate(moveIn, settings.bounceSpeed);
}
panel.trigger('slideouttabbounce');
};
if(settings.clickScreenToClose){
$(document).on('click', function (event){
if(isOpen()&&!panel[0].contains(event.target)){
var clicked=$(event.target);
for (var i=0; i < settings.clickScreenToCloseFilters.length; i++){
var filter=settings.clickScreenToCloseFilters[i];
if(typeof filter==='string'){
if(clicked.is(filter)||clicked.parents().is(filter)){
return;
}}else if(typeof filter==='function'){
if(filter.call(panel, event))
return;
}}
close();
}});
}
;
if(settings.action==='click'){
handle.on('click', function (event){
toggle();
});
}else if(settings.action==='hover'){
var timer=null;
panel.hover(function (){
if(!isOpen()){
open();
}
timer=null;
},
function (){
if(isOpen()&&timer===null){
timer=setTimeout(function (){
if(timer)
close();
timer=null;
}, settings.hoverTimeout);
}});
handle.on('click', function (event){
if(isOpen()){
close();
}});
}
if(settings.onLoadSlideOut){
open();
setTimeout(open, 500);
}
panel.on('open', function (event){
if(!isOpen()){
open();
}});
panel.on('close', function (event){
if(isOpen()){
close();
}});
panel.on('toggle', function (event){
toggle();
});
panel.on('bounce', function (event){
if(isOpen()){
bounceIn();
}else{
bounceOut();
}});
}
return this;
};})(jQuery);