jquery.dialogsheet/jquery.dialogsheet.js at master · chrisvdp/jquery.dialogsheet · 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
var DialogSheet = function(element) {
  var self = this;
  var $element = this.$element = $(element);
  var element = this.element = $element.get(0);

  $element.delegate('.btn.dismiss', 'click', function(evt) {
    self.hide();
    evt.preventDefault();
  });

  element.addEventListener('webkitTransitionEnd', this);
  element.addEventListener('oTransitionEnd', this);
  element.addEventListener('transitionend', this);

  $element.data('dialogSheet', this);
};

DialogSheet.prototype = {
  element: null,
  $element: null,
  isVisible: false,
  handleEvent: function(evt) {
    switch (evt.type) {
      case 'webkitTransitionEnd':
      case 'oTransitionEnd':
      case 'transitionend':
        var $element = $(evt.target);

        if (!$element.is('div.dialog-sheet')) return;

        var dialogSheet = $element.data('dialogSheet');

        if (dialogSheet.isVisible) {
          var didShowEvent = jQuery.Event('didShowDialogSheet', {
            dialogSheet: dialogSheet
          });

          $element.trigger(didShowEvent);
        } else {
          var didHideEvent = jQuery.Event('didHideDialogSheet', {
            dialogSheet: dialogSheet
          });

          $element.trigger(didHideEvent);
        }
        break;
      default:
        break;
    }
  },
  show: function() {
    if (this.isVisible) return;

    var $element = this.$element;
    var willShowEvent = jQuery.Event('willShowDialogSheet', {
      dialogSheet: this
    });
    var didShowEvent = jQuery.Event('didShowDialogSheet', {
      dialogSheet: this
    });

    $element.trigger(willShowEvent);
    $element.addClass('active');

    this.isVisible = true;
  },
  hide: function() {
    if (!this.isVisible) return;

    var $element = this.$element;
    var willHideEvent = jQuery.Event('willHideDialogSheet', {
      dialogSheet: this
    });
    var didHideEvent = jQuery.Event('didHideDialogSheet', {
      dialogSheet: this
    });

    $element.trigger(willHideEvent);
    $element.removeClass('active');

    this.isVisible = false;
  }
};

$(function() {
  var $dialogSheets = $('div.dialog-sheet');
  $dialogSheets.each(function(index, element) { new DialogSheet(element); });

  var $dialogSheetShadow = $('<div class="dialog-sheet-shadow"/>');
  $(document.body).append($dialogSheetShadow);

  var $dialogSheetLinks = $('a.dialog-sheet');
  $dialogSheetLinks.bind('click', function(evt) {
    var $this = $(this);
    var $dialogSheetElement = $($this.attr('href'));
    var dialogSheet = $dialogSheetElement.data('dialogSheet');

    dialogSheet.show();
    evt.preventDefault();
  });

  $(window).bind('keyup', function(evt) {
    if (evt.keyCode === 27) {
      var $dialogSheetElement = $('div.dialog-sheet.active');

      if ($dialogSheetElement.size() > 0) {
        var dialogSheet = $dialogSheetElement.data('dialogSheet');

        dialogSheet.hide();
        evt.preventDefault();
      }
    }
  });
});