diff --git a/README.md b/README.md new file mode 100644 index 0000000..282b581 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +jToggler - jQuery Toggler Plugin +========================= + +Features +-------- +Allows for dynamic creation of toggling element with bunch of settings. +Documentation located inside jToggler.js as jsdoc. + +Usage +----- +`$('.toggler').jToggler({ handle: null });` + +Requirements +------------ + - jQuery + +License +------- +Released under the MIT license: +http://creativecommons.org/licenses/MIT/ + +Source Code & Download +---------------------- +https://github.com/Ciki/jToggler diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..5fcd3eb --- /dev/null +++ b/bower.json @@ -0,0 +1,21 @@ +{ + "name": "jToggler", + "main": "jToggler.js", + "version": "1.0.0", + "authors": [ + "Ciki " + ], + "description": "jQuery toggler plugin", + "keywords": [ + "jQuery", + "jQuery", + "plugin", + "toggler", + "toggle" + ], + "dependencies": { + "jquery": ">1.9" + }, + "license": "MIT", + "homepage": "http://www.github.com/Ciki/jToggler" +} diff --git a/jToggler.js b/jToggler.js new file mode 100644 index 0000000..0a75007 --- /dev/null +++ b/jToggler.js @@ -0,0 +1,96 @@ +(function($) { + "use strict"; + + /** + * @name jToggler + * @description jQuery toggler plugin + * @version 1.0a + * @external "jQuery.fn" + * @author Ciki + * @license MIT http://www.opensource.org/licenses/mit-license.php + * @link http://www.github.com/Ciki/jToggler + * @example $('.toggler').jToggler({ handle: null }); + * + * @param {Hash} options Settings object + * @param {String} options.activeClass Css class to toggle on toggler element (applied when target is visible) + * @param {String} options.animType Animation type [slide | fade] + * @param {String|Int} options.animSpeed Animation speed [slow | normal | fast | integer in ms] + * @param {String|jQuery Object} options.target Element to be toggled + * @param {String|jQuery Object} options.handle Element visually representing toggling state (e.g. used for showing labels Show|Hide). Defaults to descendant `span` element. + * @param {String} options.showLabel Label for `handle` when target is NOT visible + * @param {String} options.hideLabel Label for `handle` when target is visible + * @param {Function} options.onComplete Callback when animation(hide/show) completed. `function(settings, original) { ... }` + */ + $.fn.jToggler = function(options) + { + var defaults = { + activeClass: 'active', + animType: 'slide', + animSpeed: 'normal', + target: this.attr('data-nette-toggle-target') || this.parent().find('.toggler-content'), + handle: this.find('span'), + showLabel: 'Show', + hideLabel: 'Hide', + onComplete: function() { + } + }, + settings = $.extend({}, defaults, options), + target = $(settings.target), + handle = settings.handle, + cb_onComplete = settings.onComplete, + toggler = this; + + // callback after target got visible + var cb_onShown = function() { + if (settings.handle) { + handle.text(settings.hideLabel) + .addClass('toggle-handle-active'); + } + toggler.addClass(settings.activeClass); + cb_onComplete(); + }; + + // callback after target got hidden + var cb_onHidden = function() { + if (settings.handle) { + handle.text(settings.showLabel) + .removeClass('toggle-handle-active'); + } + toggler.removeClass(settings.activeClass); + cb_onComplete(); + }; + + // is target visible? + var isVisible = function() { + if (settings.animType === 'slide') { + return target.css('display') !== 'none'; + } else if (settings.animType === 'fade') { + return target.css('opacity') !== '0'; + } + }; + + // init on setup - no need to bother with classes in HTML + if (isVisible()) { + cb_onShown(); + } else { + cb_onHidden(); + } + + // enable jQuery chain + return this.click(function() { + if (settings.animType === 'slide') { + if (isVisible()) { + target.slideUp(settings.animSpeed, cb_onHidden); + } else { + target.slideDown(settings.animSpeed, cb_onShown); + } + } else if (settings.animType === 'fade') { + if (isVisible()) { + target.fadeTo(settings.animSpeed, 0, cb_onHidden); + } else { + target.fadeTo(settings.animSpeed, 1, cb_onShown); + } + } + }); + }; +})(jQuery); \ No newline at end of file