chargify_sites/fancyForm.js at master · q0rban/chargify_sites · 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
Drupal.behaviors.fancyFormDescriptions = function (context) {
  var inputs = $('div.form-item input', context);
  inputs.parents('div.form-item:first').find('div.description').hide();

  inputs.focus(function () {
    $(this).parents('div.form-item:first').find('div.description').show('fast');
  })
  .blur(function () {
    $(this).parents('div.form-item:first').find('div.description').hide('fast');
  });
};

Drupal.behaviors.fancyFormLabels = function (context) {
  var fields = $('input.form-text', context).not('[type=password]');
  var forms = fields.parents('form:first');

  // We need to bind to both keydown and keyup in case TAB is used.
  fields.blur(fancyBlur).focus(fancyFocus).bind('keydown.autocomplete', showHideLabels).bind('keyup.autocomplete', showHideLabels).blur().each(putLabels).each(showHideLabels);

  forms.each(function() {
    $(this).submit(function() {
      $('input[type=submit]', this).attr('disabled', 'disabled').val("Please wait...");
    });
  });

  function fancyBlur() {
    $(this).siblings().filter('div.fancy-label').children().removeClass('active');
  }

  function fancyFocus() {
    $(this).siblings().filter('div.fancy-label').children().addClass('active');
  }

  // @todo, this needs more logic to handle the first keystroke. Currently
  // doesn't hide right away like it should.
  function showHideLabels() {
    var span = $(this).siblings().filter('div.fancy-label').children();
    span.hide();
    if ($(this).val().length < 1) {
      span.show();
    }
  }

  function putLabels() {
    var element = $(this);
    var id = element.attr('id');

    if (element.attr('label')) {
      var val = element.attr('label');
    }
    else {
      var label = $('label[for=' + id + ']');
      var val = label.text().split(':');
      val = val[0];
    }

    // Make sure the label actually fits in to the field.
    if ((this.size > val.length) && label) {
      label.hide();
      var newLabel = '<div class="fancy-label"><span>' + val + '</span></div>';
      var fieldStyle = {
        "background": 'none',
        "position": 'absolute',
        "z-index": '1'
      };
      var divStyle = {
        "background": 'none',
        "width": element.css('width'),
        "height": element.css('height'),
        "background-color": element.css('background-color'),
        "padding-top": element.css('padding-top'),
        "padding-right": element.css('padding-right'),
        "padding-bottom": element.css('padding-bottom'),
        "padding-left": element.css('padding-left'),
        "font-size": element.css('font-size'),
        "line-height": element.css('line-height')
      };
      element.css(fieldStyle).parent().css('position', 'relative').append(newLabel).children().filter('div.fancy-label').css(divStyle).children().hide();
    }
  }
};

Drupal.behaviors.registerLoginForm = function (context) {
  var form = $('#chargify-sites-login-form', context);
  $('div.login-register-wrapper div.fieldset-content, input.form-submit', form).hide();

  $('div.register h2.fieldset-title', form).not('.active').click(
    function () {
      $('input.form-submit', form).slideDown('fast');
      $(this).addClass('active');
      $('div.login h2.fieldset-title', form).removeClass('active');
      $('div.register div.fieldset-content', form).slideDown('fast');
      $('div.login div.fieldset-content', form).slideUp('fast').children().find('input').each(function() {
        $(this).val('').keyup();
      });
    }
  );

  $('div.login h2.fieldset-title', form).not('.active').click(
    function () {
      $('input.form-submit', form).slideDown('fast');
      $(this).addClass('active');
      $('div.register h2.fieldset-title', form).removeClass('active');
      $('div.login div.fieldset-content', form).slideDown('fast');
      $('div.register div.fieldset-content', form).slideUp('fast').children().find('input').each(function() {
        $(this).val('').keyup();
      });
    }
  );
}