// Visibility of the password text. Can be true, false, 'toggle'
002
// or 'infer'. If 'toggle', it will be the opposite of whatever
003
// it currently is. If 'infer', it will be based on the input
004
// type (false if 'password', otherwise true).
005
show:'infer',
006
 
007
// Set to true to create an inner toggle for this input. Can
008
// also be sent to an event name to delay visibility of toggle
009
// until that event is triggered on the input element.
010
innerToggle:false,
011
 
012
// If false, the plugin will be disabled entirely. Set to
013
// the outcome of a test to insure input attributes can be
014
// set after input has been inserted into the DOM.
015
enable: canSetInputAttribute,
016
 
017
// Event to trigger whenever the element is toggled.
018
// For example, if 'focus' it will focus the cursor in the
019
// input element after toggling.
020
triggerOnToggle:false,
021
 
022
// Class to add to input element when the plugin is enabled.
023
className:'hideShowPassword-field',
024
 
025
// Event to trigger when the plugin is initialized and enabled.
026
initEvent:'hideShowPasswordInit',
027
 
028
// Event to trigger whenever the visibility changes.
029
changeEvent:'passwordVisibilityChange',
030
 
031
// Properties to add to the input element.
032
props: {
033
  autocapitalize:'off',
034
  autocomplete:'off',
035
  autocorrect:'off',
036
  spellcheck:'false'
037
},
038
 
039
// Options specific to the inner toggle.
040
toggle: {
041
  // The element to create.
042
  element:'<button type="button">',
043
  // Class name of element.
044
  className:'hideShowPassword-toggle',
045
  // Whether or not to support touch-specific enhancements.
046
  // Defaults to the value of Modernizr.touchevents if available,
047
  // otherwise false.
048
  touchSupport: (typeof Modernizr ==='undefined') ?false : Modernizr.touchevents,
049
  // Non-touch event to bind to.
050
  attachToEvent:'click.hideShowPassword',
051
  // Event to bind to when touchSupport is true.
052
  attachToTouchEvent:'touchstart.hideShowPassword mousedown.hideShowPassword',
053
  // Key event to bind to if attachToKeyCodes is an array
054
  // of at least one keycode.
055
  attachToKeyEvent:'keyup',
056
  // Key codes to bind the toggle event to for accessibility.
057
  // If false, this feature is disabled entirely.
058
  // If true, the array of key codes will be determined based
059
  // on the value of the element option.
060
  attachToKeyCodes:true,
061
  // Styles to add to the toggle element. Does not include
062
  // positioning styles.
063
  styles: { position:'absolute' },
064
  // Styles to add only when touchSupport is true.
065
  touchStyles: { pointerEvents:'none' },
066
  // Where to position the inner toggle relative to the
067
  // input element. Can be 'right', 'left' or 'infer'. If
068
  // 'infer', it will be based on the text-direction of the
069
  // input element.
070
  position:'infer',
071
  // Where to position the inner toggle on the y-axis
072
  // relative to the input element. Can be 'top', 'bottom'
073
  // or 'middle'.
074
  verticalAlign:'middle',
075
  // Amount by which to "offset" the toggle from the edge
076
  // of the input element.
077
  offset: 0,
078
  // Attributes to add to the toggle element.
079
  attr: {
080
    role:'button',
081
    'aria-label':'Show Password',
082
    title:'Show Password',
083
    tabIndex: 0
084
  }
085
},
086
 
087
// Options specific to the wrapper element, created
088
// when the innerToggle is initialized to help with
089
// positioning of that element.
090
wrapper: {
091
  // The element to create.
092
  element:'<div>',
093
  // Class name of element.
094
  className:'hideShowPassword-wrapper',
095
  // If true, the width of the wrapper will be set
096
  // unless it is already the same width as the inner
097
  // element. If false, the width will never be set. Any
098
  // other value will be used as the width.
099
  enforceWidth:true,
100
  // Styles to add to the wrapper element. Does not
101
  // include inherited styles or width if enforceWidth
102
  // is not false.
103
  styles: { position:'relative' },
104
  // Styles to "inherit" from the input element, allowing
105
  // the wrapper to avoid disrupting page styles.
106
  inheritStyles: [
107
    'display',
108
    'verticalAlign',
109
    'marginTop',
110
    'marginRight',
111
    'marginBottom',
112
    'marginLeft'
113
  ],
114
  // Styles for the input element when wrapped.
115
  innerElementStyles: {
116
    marginTop: 0,
117
    marginRight: 0,
118
    marginBottom: 0,
119
    marginLeft: 0
120
  }
121
},
122
 
123
// Options specific to the 'shown' or 'hidden'
124
// states of the input element.
125
states: {
126
  shown: {
127
    className:'hideShowPassword-shown',
128
    changeEvent:'passwordShown',
129
    props: { type:'text' },
130
    toggle: {
131
      className:'hideShowPassword-toggle-hide',
132
      content:'Hide',
133
      attr: {
134
        'aria-pressed':'true',
135
        title:'Hide Password'
136
      }
137
    }
138
  },
139
  hidden: {
140
    className:'hideShowPassword-hidden',
141
    changeEvent:'passwordHidden',
142
    props: { type:'password' },
143
    toggle: {
144
      className:'hideShowPassword-toggle-show',
145
      content:'Show',
146
      attr: {
147
        'aria-pressed':'false',
148
        title:'Show Password'
149
      }
150
    }
151
  }
152
}