|
1
|
|
|
import template from './template.html'; |
|
2
|
|
|
import { Checkbox } from '../checkbox'; |
|
3
|
|
|
|
|
4
|
|
|
|
|
5
|
|
|
export class Control { |
|
6
|
|
|
constructor( options ) { |
|
7
|
|
|
this.options = options || {}; |
|
8
|
|
|
this.$target = this.options.target; |
|
9
|
|
|
|
|
10
|
|
|
this.template = _.template( template ); |
|
|
|
|
|
|
11
|
|
|
this.checkboxConfigs = [ |
|
12
|
|
|
{ |
|
13
|
|
|
name: 'phone-visibility', |
|
14
|
|
|
label: 'Phone', |
|
15
|
|
|
class: 'hidden-xs', |
|
16
|
|
|
icon: require( 'svg-inline-loader?classPrefix!./img/phone.svg' ) |
|
17
|
|
|
}, |
|
18
|
|
|
{ |
|
19
|
|
|
name: 'tablet-visibility', |
|
20
|
|
|
label: 'Tablet', |
|
21
|
|
|
class: 'hidden-sm', |
|
22
|
|
|
icon: require( 'svg-inline-loader?classPrefix!./img/tablet.svg' ) |
|
23
|
|
|
}, |
|
24
|
|
|
{ |
|
25
|
|
|
name: 'desktop-visibility', |
|
26
|
|
|
label: 'Desktop', |
|
27
|
|
|
class: 'hidden-md', |
|
28
|
|
|
icon: require( 'svg-inline-loader?classPrefix!./img/desktop.svg' ) |
|
29
|
|
|
}, |
|
30
|
|
|
{ |
|
31
|
|
|
name: 'large-visibility', |
|
32
|
|
|
label: 'Large Displays', |
|
33
|
|
|
class: 'hidden-lg', |
|
34
|
|
|
icon: require( 'svg-inline-loader?classPrefix!./img/large.svg' ) |
|
35
|
|
|
} |
|
36
|
|
|
]; |
|
37
|
|
|
} |
|
38
|
|
|
|
|
39
|
|
|
/** |
|
40
|
|
|
* Render the control. |
|
41
|
|
|
* |
|
42
|
|
|
* @since 1.0.0 |
|
43
|
|
|
* |
|
44
|
|
|
* @return {jQuery} Control Element. |
|
45
|
|
|
*/ |
|
46
|
|
|
render() { |
|
47
|
|
|
this.$control = $( this.template() ); |
|
48
|
|
|
this._appendCheckboxes(); |
|
49
|
|
|
|
|
50
|
|
|
return this.$control; |
|
51
|
|
|
} |
|
52
|
|
|
|
|
53
|
|
|
/** |
|
54
|
|
|
* Append all the checkboxes in the config to the control. |
|
55
|
|
|
* |
|
56
|
|
|
* @since 1.0.0 |
|
57
|
|
|
*/ |
|
58
|
|
|
_appendCheckboxes() { |
|
59
|
|
|
const $container = this.$control.find( '.checkboxes' ); |
|
60
|
|
|
|
|
61
|
|
|
for ( const [ index, checkbox ] of this.checkboxConfigs.entries() ) { |
|
62
|
|
|
this.checkboxConfigs[index].control = new Checkbox( checkbox ); |
|
63
|
|
|
$container.append( this.checkboxConfigs[index].control.render() ); |
|
64
|
|
|
this._preset( checkbox ); |
|
65
|
|
|
this._bind( checkbox ); |
|
66
|
|
|
} |
|
67
|
|
|
} |
|
68
|
|
|
|
|
69
|
|
|
/** |
|
70
|
|
|
* Test to see if all checkboxes are checked. |
|
71
|
|
|
* |
|
72
|
|
|
* @since 1.0.0 |
|
73
|
|
|
* |
|
74
|
|
|
* @return {boolean} Are they all checked? |
|
75
|
|
|
*/ |
|
76
|
|
|
_allChecked() { |
|
77
|
|
|
return 0 === this.$control.find( '.checkboxes input:not(:checked)' ).length; |
|
78
|
|
|
} |
|
79
|
|
|
|
|
80
|
|
|
/** |
|
81
|
|
|
* Preselect the checkbox based on the state of the element. |
|
82
|
|
|
* |
|
83
|
|
|
* @since 1.0.0 |
|
84
|
|
|
* |
|
85
|
|
|
* @param {object} checkbox Checkbox configuration object. |
|
86
|
|
|
*/ |
|
87
|
|
|
_preset( checkbox ) { |
|
88
|
|
|
if ( this.$target.hasClass( checkbox.class ) ) { |
|
89
|
|
|
checkbox.control.$input.prop( 'checked', true ); |
|
90
|
|
|
} |
|
91
|
|
|
} |
|
92
|
|
|
|
|
93
|
|
|
/** |
|
94
|
|
|
* Bind the event of the user checking a box. |
|
95
|
|
|
* |
|
96
|
|
|
* @since 1.0.0 |
|
97
|
|
|
* |
|
98
|
|
|
* @param {object} checkbox Checkbox configuration object. |
|
99
|
|
|
*/ |
|
100
|
|
|
_bind( checkbox ) { |
|
101
|
|
|
const $input = checkbox.control.$input; |
|
102
|
|
|
|
|
103
|
|
|
$input.on( 'change', e => { |
|
|
|
|
|
|
104
|
|
|
const isChecked = $input.prop( 'checked' ); |
|
105
|
|
|
|
|
106
|
|
|
if ( isChecked ) { |
|
107
|
|
|
this.$target.addClass( checkbox.class ); |
|
108
|
|
|
} else { |
|
109
|
|
|
this.$target.removeClass( checkbox.class ); |
|
110
|
|
|
} |
|
111
|
|
|
|
|
112
|
|
|
if ( this._allChecked() ) { |
|
113
|
|
|
$input.prop( 'checked', false ); |
|
114
|
|
|
} |
|
115
|
|
|
} ); |
|
116
|
|
|
} |
|
117
|
|
|
} |
|
118
|
|
|
|
|
119
|
|
|
export { Control as default }; |
|
120
|
|
|
|
BoldGrid /
controls
Loading history...
This checks looks for references to variables that have not been declared. This is most likey a typographical error or a variable has been renamed.
To learn more about declaring variables in Javascript, see the MDN.