fabtransform/fabTransform.js at master · code-shambles/fabtransform · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
(function ($) {

  var FAB = function($button, options) {

    this.open = function() {
      var me = this;

      me.options.willOpen(me.$button, me.$pane);
      me.$button.removeClass('fabtransform--closed').addClass('fabtransform--opening');
      me.$pane.removeClass('fabtransform--closed').addClass('fabtransform--opening');
      window.setTimeout(function() {
        me.$button.removeClass('fabtransform--opening').addClass('fabtransform--open');
        me.$pane.removeClass('fabtransform--opening').addClass('fabtransform--open');
        me.options.didOpen(me.$button, me.$pane);
      }, me.options.transitionMS)
    };

    this.close = function() {
      var me = this;

      me.options.willClose(me.$button, me.$pane);
      me.$button.removeClass('fabtransform--open').addClass('fabtransform--closing');
      me.$pane.removeClass('fabtransform--open').addClass('fabtransform--closing');
      window.setTimeout(function() {
        me.$button.removeClass('fabtransform--closing').addClass('fabtransform--closed');
        me.$pane.removeClass('fabtransform--closing').addClass('fabtransform--closed');
        me.options.didClose(me.$button, me.$pane);
      }, me.options.transitionMS)
    };

    this.addListeners = function() {
      var me = this;

      me.$button.on('click', function(event) {
        event.preventDefault();
        if (me.$button.hasClass('fabtransform--closed')) {
          me.open();
        }
      });
      me.$pane.find('.fabtransform--close').on('click', function(event) {
        event.preventDefault();
        if (me.$pane.hasClass('fabtransform--open')) {
          me.close();
        }
      });
    };

    this.init = function () {
      var defaults = {
        pane: '#fabtransform--pane',
        transitionMS: 400,
        willOpen: function() {},
        didOpen: function() {},
        willClose: function() {},
        didClose: function() {}
      };

      // apply defaults
      if (typeof options !== 'undefined') {
          this.options = $.extend(defaults, options);
      }
      else {
          this.options = defaults;
      }

      this.$button = $button.addClass('fabtransform--closed');
      this.$pane = $(this.options.pane).addClass('fabtransform--closed');

      this.addListeners();
    };

    this.init();
  };


  FABTransform = new function () {

    this.methods = {
      init: function (options) {
        var me = this;
        me.FABs = [];

        return me.each(function (i, item) {
          me.FABs[i] = new FAB($(item), options);
          me.FABs[i].init();
        });
      },

      close: function () {
        var me = this;

        return me.each(function (i, item) {
          me.FABs[i].close();
        });
      }
    };
    /**
     * Define the basic plugin
     * @param methodOrOptions A plugin method to call or options to initialize the plugin
     * @returns {*}
     */
    this.plugin = function (methodOrOptions) {
      if (FABTransform.methods[methodOrOptions]) {
        return FABTransform.methods[ methodOrOptions ].apply(this, Array.prototype.slice.call(arguments, 1));
      }
      else if (typeof methodOrOptions === 'object' || !methodOrOptions) {
        // Default to "init"
        return FABTransform.methods.init.apply(this, arguments);
      }
      else {
        console.error('Method ' + methodOrOptions + ' does not exist in jQuery.FABTransform');
        return false;
      }
    }
  };
  /**
   * Actually initialize plugin
   */
  $.fn.FABTransform = FABTransform.plugin;
}(jQuery));


jQuery(document).ready(function() {
  var $button = jQuery('#fabtransform--button');
  $button.FABTransform();
});