/* * DC jQuery Slick - jQuery Slick * Copyright (c) 2011 Design Chemical * http://www.designchemical.com * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * */ (function($){ //define the new for the plugin ans how to call it $.fn.dcSlick = function(options) { //set default options var defaults = { classWrapper: 'dc-slick', classContent: 'dc-slick-content', idWrapper: 'dc-slick-'+$(this).index(), location: 'left', align: 'top', offset: '100px', speed: 'slow', tabText: 'Click', classTab: 'tab', classOpen: 'slick-open', classClose: 'slick-close', classToggle: 'slick-toggle', autoClose: true, loadOpen: false, onLoad : function() {}, beforeOpen : function() {}, beforeClose: function() {} }; //call in the default otions var options = $.extend(defaults, options); var $dcSlickObj = this; //act upon the element that is passed into the design return $dcSlickObj.each(function(options){ // declare variables var clWrap = defaults.classWrapper; var slickHtml = $dcSlickObj.html(); $dcSlickObj.css('float','left'); var objWidth = $dcSlickObj.width(); $dcSlickObj.empty(); var slickTab = '
'+defaults.tabText+'
'; $(this).hide(); var idWrapper = defaults.idWrapper; var slider = '
'+slickTab+'
'+slickHtml+'
'; $('body').append(slider); var $slider = $('#'+idWrapper); var $tab = $('.'+defaults.classTab,$slider); $tab.css({position: 'absolute'}); var linkOpen = $('.'+defaults.classOpen); var linkClose = $('.'+defaults.classClose); var linkToggle = $('.'+defaults.classToggle); // Get container dimensions var height = $slider.height(); $slider.css('float','left'); var outerW = $slider.outerWidth(); var widthPx = outerW+'px'; $slider.css('float','none'); var outerH = $slider.outerHeight(); var padH = outerH - height; var heightPx = outerH+'px'; var bodyHeight = $(window).height(); slickSetup($slider); if(defaults.autoClose == true){ $('body').mouseup(function(e){ if($slider.hasClass('active')){ if(!$(e.target).parents('#'+defaults.idWrapper).length){ if(!($(e.target).hasClass(defaults.classOpen) || $(e.target).hasClass(defaults.classToggle))){ slickClose(); } } } }); } $tab.click(function(){ if($slider.hasClass('active')){ slickClose(); } else { slickOpen(); } }); $(linkOpen).click(function(e){ slickOpen(); e.preventDefault(); }); $(linkClose).click(function(e){ if($slider.hasClass('active')){ slickClose(); } e.preventDefault(); }); $(linkToggle).click(function(e){ if($slider.hasClass('active')){ slickClose(); } else { slickOpen(); } e.preventDefault(); }); if(defaults.loadOpen == true){ slickOpen(); } function slickOpen(){ $('.'+clWrap).css({zIndex: 10000}); $slider.css({zIndex: 10001}); if(defaults.location == 'bottom'){ $slider.animate({marginBottom: "-=5px"}, "fast").animate({marginBottom: 0}, defaults.speed); } if(defaults.location == 'top'){ $slider.animate({marginTop: "-=5px"}, "fast").animate({marginTop: 0}, defaults.speed); } if(defaults.location == 'left'){ $slider.animate({marginLeft: "-=5px"}, "fast").animate({marginLeft: 0}, defaults.speed); } if(defaults.location == 'right'){ $slider.animate({marginRight: "-=5px"}, "fast").animate({marginRight: 0}, defaults.speed); } $slider.addClass('active'); // onOpen callback; defaults.beforeOpen.call(this); } function slickClose(){ $slider.css({zIndex: 10000}); if($slider.hasClass('active')){ var params = {"marginBottom": "-"+heightPx}; switch (defaults.location) { case 'top': params = {"marginTop": "-"+heightPx}; break; case 'left': params = {"marginLeft": "-"+widthPx}; break; case 'right': params = {"marginRight": "-"+widthPx}; break; } $slider.removeClass('active').animate(params, defaults.speed); } // onClose callback; defaults.beforeClose.call(this); } function slickSetup(obj){ var $container = $('.'+defaults.classContent,obj); $(obj).addClass(defaults.location).addClass('align-'+defaults.align).css({position: 'fixed', zIndex: 10000}); // Get slider border var bdrTop = $slider.css('border-top-width'); var bdrRight = $slider.css('border-right-width'); var bdrBottom = $slider.css('border-bottom-width'); var bdrLeft = $slider.css('border-left-width'); // Get tab dimension var $tab = $('.'+defaults.classTab,$slider); var tabWidth = $tab.outerWidth(true); var tabWidthPx = tabWidth+'px'; var tabHeight = $tab.outerHeight(true); var tabHeightPx = tabHeight+'px'; // Calc max container dimensions var containerH = $container.height(); var containerPad = $container.outerHeight(true)-containerH; var maxHeight = bodyHeight - tabHeight; if(outerH > maxHeight){ containerH = maxHeight - padH - containerPad; heightPx = maxHeight+'px'; } $container.css({height: containerH+'px'}); // Default params for location 'left' var params = {marginLeft: '-'+widthPx, top: defaults.offset}; var paramsTab = {marginRight: '-'+tabWidthPx} if(defaults.location == 'right'){ params = {marginRight: '-'+widthPx, top: defaults.offset}; paramsTab = {marginLeft: '-'+tabWidthPx}; } if(defaults.location == 'top'){ params = {marginTop: '-'+heightPx}; paramsTab = {marginBottom: '-'+tabHeightPx}; if(defaults.align == 'left'){ params = {marginTop: '-'+heightPx, left: defaults.offset}; paramsTab = {marginBottom: '-'+tabHeightPx, left: 0}; } else { params = {marginTop: '-'+heightPx, right: defaults.offset}; paramsTab = {marginBottom: '-'+tabHeightPx, right: 0}; } } if(defaults.location == 'bottom'){ params = {marginBottom: '-'+heightPx}; paramsTab = {marginTop: '-'+tabHeightPx}; if(defaults.align == 'left'){ params = {marginBottom: '-'+heightPx, left: defaults.offset}; paramsTab = {marginTop: '-'+tabHeightPx, left: 0}; } else { params = {marginBottom: '-'+heightPx, right: defaults.offset}; paramsTab = {marginTop: '-'+tabHeightPx, right: 0}; } } $(obj).css(params); $tab.css(paramsTab); // onLoad callback; defaults.onLoad.call(this); } }); }; })(jQuery);