https://southgatestake.com/js/buttons.js

1/*! @license
2*  Project: Buttons
3*  Description: A highly customizable CSS button library built with Sass and Compass
4*  Author: Alex Wolfe and Rob Levin
5*  License: Apache License v2.0
6*/
7
8
9// the semi-colon before function invocation is a safety net against concatenated
10// scripts and/or other plugins which may not be closed properly.
11;(function ( $, window, document, undefined ) {
12  'use strict';
13
14  // undefined is used here as the undefined global variable in ECMAScript 3 is
15  // mutable (ie. it can be changed by someone else). undefined isn't really being
16  // passed in so we can ensure the value of it is truly undefined. In ES5, undefined
17  // can no longer be modified.
18
19  // window and document are passed through as local variable rather than global
20  // as this (slightly) quickens the resolution process and can be more efficiently
21  // minified (especially when both are regularly referenced in your plugin).
22
23  // Create the defaults once
24  var pluginName = "menuButton";
25  var menuClass = ".button-dropdown";
26  var defaults = {
27    propertyName: "value"
28  };
29
30  // The actual plugin constructor
31  function Plugin( element, options ) {
32
33    //SET OPTIONS
34    this.options = $.extend( {}, defaults, options );
35    this._defaults = defaults;
36    this._name = pluginName;
37
38    //REGISTER ELEMENT
39    this.$element = $(element);
40
41    //INITIALIZE
42    this.init();
43  }
44
45  Plugin.prototype = {
46    constructor: Plugin,
47
48    init: function() {
49      // WE DON'T STOP PROPGATION SO CLICKS WILL AUTOMATICALLY
50      // TOGGLE AND REMOVE THE DROPDOWN
51      this.toggle();
52    },
53
54    toggle: function(el, options) {
55      if(this.$element.data('dropdown') === 'show') {
56        this.hideMenu();
57      }
58      else {
59        this.showMenu();
60      }
61    },
62
63    showMenu: function() {
64      this.$element.data('dropdown', 'show');
65      this.$element.find('ul').show();
66      this.$element.find('.button:first').addClass('is-active');
67    },
68
69    hideMenu: function() {
70      this.$element.data('dropdown', 'hide');
71      this.$element.find('ul').hide();
72      this.$element.find('.button:first').removeClass('is-active');
73    }
74  };
75
76  // A really lightweight plugin wrapper around the constructor,
77  // preventing against multiple instantiations
78  $.fn[pluginName] = function ( options ) {
79    return this.each(function () {
80
81      // TOGGLE BUTTON IF IT EXISTS
82      if ($.data(this, "plugin_" + pluginName)) {
83        $.data(this, "plugin_" + pluginName).toggle();
84      }
85      // OTHERWISE CREATE A NEW INSTANCE
86      else {
87        $.data(this, "plugin_" + pluginName, new Plugin( this, options ));
88      }
89    });
90  };
91
92  //CLOSE OPEN DROPDOWN MENUS IF CLICKED SOMEWHERE ELSE
93  $(document).on('click', function(e) {
94    $.each($('[data-buttons=dropdown]'), function(i, value) {
95      if ($(e.target.offsetParent)[0] != $(this)[0]) {
96        if ($.data(this, "plugin_" + pluginName)) {
97          $.data(this, "plugin_" + pluginName).hideMenu();
98          $(this).find('ul').hide();
99        }
100      }
101    });
102  });
103
104  //DELEGATE CLICK EVENT FOR DROPDOWN MENUS
105  $(document).on('click', '[data-buttons=dropdown]', function(e) {
106    var $dropdown = $(e.currentTarget);
107    $dropdown.menuButton();
108  });
109
110  //IGNORE CLICK EVENTS FROM DISPLAY BUTTON IN DROPDOWN
111  $(document).on('click', '[data-buttons=dropdown] > a', function(e) {
112    e.preventDefault();
113  });
114
115})( jQuery, window, document);