Skip to content

Commit 9c00eaf

Browse files
gregjacobsgregjacobs
committed
Add initial live example
1 parent baddf74 commit 9c00eaf

11 files changed

+1245
-6
lines changed

‎.babelrc

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{ "presets": ["es2015"] }

‎examples/live-example/js/CheckboxOption.js

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
/*global $, Option */
2+
3+
/**
4+
* @class CheckboxOption
5+
*
6+
* A checkbox option for the live example.
7+
*/
8+
class CheckboxOption extends Option {
9+
10+
/**
11+
* @cfg {Boolean} [defaultValue=false]
12+
*
13+
* `true` to check the checkbox by default.
14+
*/
15+
16+
17+
/**
18+
* @constructor
19+
* @param {Object} cfg The configuration options for this class, specified
20+
* in an Object (map).
21+
*/
22+
constructor( cfg ) {
23+
super( cfg );
24+
25+
this.defaultValue = cfg.defaultValue || false;
26+
27+
this.$containerEl.html( this.generateHtml() );
28+
this.$checkboxEl = this.$containerEl.find( ':checkbox' ).on( 'change', this.updateDisplayEl.bind( this ) );
29+
this.$valueDisplayEl = this.$containerEl.find( '#' + this.containerId + '-value' );
30+
}
31+
32+
33+
/**
34+
* @private
35+
* @return {string}
36+
*/
37+
generateHtml() {
38+
var containerId = this.containerId,
39+
optionName = this.optionName,
40+
optionDescription = this.optionDescription,
41+
defaultValue = this.defaultValue,
42+
checkboxId = containerId + '-checkbox';
43+
44+
return `
45+
<input type="checkbox" id="${checkboxId}" ${ defaultValue ? 'checked' : '' }>
46+
<label for="${checkboxId}">
47+
${optionDescription} (<code>${optionName}: <span id="${containerId}-value">${defaultValue}</span></code>)
48+
</label>
49+
`;
50+
}
51+
52+
53+
/**
54+
* @private
55+
*/
56+
updateDisplayEl() {
57+
this.$valueDisplayEl.html( this.getValue() + '' );
58+
this.fireChange();
59+
}
60+
61+
62+
/**
63+
* @return {Boolean}
64+
*/
65+
getValue() {
66+
return this.$checkboxEl.prop( 'checked' );
67+
}
68+
69+
}

‎examples/live-example/js/Option.js

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
/*global $ */
2+
3+
/**
4+
* @abstract
5+
* @class Option
6+
*
7+
* Base class for options that can be modified in the live example.
8+
*/
9+
class Option {
10+
11+
/**
12+
* @cfg {String} name
13+
*
14+
* The name of the option. This also relates to its element ID in the
15+
* live-example.html file.
16+
*
17+
* Ex: pass 'newWindow' for the element with ID 'option-newWindow'.
18+
*/
19+
20+
/**
21+
* @cfg {String} description
22+
*
23+
* The description to display for the option.
24+
*/
25+
26+
27+
/**
28+
* @protected
29+
* @property {String} containerId
30+
*
31+
* The ID of the container element in live-example.html
32+
*/
33+
34+
/**
35+
* @protected
36+
* @property {jQuery} $containerEl
37+
*
38+
* A reference to the container element in the live-example.html file.
39+
*/
40+
41+
/**
42+
* @private
43+
* @property {Function[]} changeCallbacks
44+
*
45+
* The array of 'change' callbacks assigned by {@link #onChange}, and which
46+
* are called by {@link #fireChange}.
47+
*/
48+
49+
50+
/**
51+
* @constructor
52+
* @param {Object} cfg The configuration options for this class, specified
53+
* in an Object (map).
54+
*/
55+
constructor( cfg ) {
56+
this.optionName = cfg.name;
57+
this.optionDescription = cfg.description;
58+
59+
this.containerId = 'option-' + this.optionName.replace( /\./g, '-' ); // ex: 'truncate.length' -> 'trunctate-length'
60+
this.$containerEl = $( '#' + this.containerId );
61+
62+
this.changeCallbacks = [];
63+
}
64+
65+
66+
/**
67+
* Retrieves the value for the option.
68+
*
69+
* @abstract
70+
*/
71+
getValue() {
72+
throw new Error( 'Must implement abstract method `getValue()`' );
73+
}
74+
75+
76+
/**
77+
* Registers a callback to call when the option is changed.
78+
*
79+
* @param {Function} callbackFn
80+
* @chainable
81+
*/
82+
onChange( callbackFn ) {
83+
this.changeCallbacks.push( callbackFn );
84+
return this;
85+
}
86+
87+
88+
/**
89+
* Calls all 'change' callbacks as a result of the option being changed.
90+
*
91+
* @protected
92+
*/
93+
fireChange() {
94+
this.changeCallbacks.forEach( cb => cb() ); // call all 'change' callbacks
95+
}
96+
97+
}

‎examples/live-example/js/RadioOption.js

+117
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/*global $, Option */
2+
3+
/**
4+
* @class RadioOption
5+
*
6+
* A radio option for the live example.
7+
*/
8+
class RadioOption extends Option {
9+
10+
/**
11+
* @cfg {Array} options
12+
*
13+
* An array of options for the radio selection. Each string is both the
14+
* displayed name and value.
15+
*
16+
* Any data type may be passed as the elements, and {@link #getValue} will
17+
* return that value/type.
18+
*/
19+
20+
/**
21+
* @cfg {Boolean} [defaultValue=false]
22+
*
23+
* `true` to check the checkbox by default.
24+
*/
25+
26+
27+
/**
28+
* @constructor
29+
* @param {Object} cfg The configuration options for this class, specified
30+
* in an Object (map).
31+
*/
32+
constructor( cfg ) {
33+
super( cfg );
34+
35+
this.options = [].concat( cfg.options );
36+
this.defaultValue = cfg.defaultValue || false;
37+
38+
this.$containerEl.html( this.generateHtml() );
39+
this.$valueDisplayEl = this.$containerEl.find( '#' + this.containerId + '-value' );
40+
41+
this.$containerEl
42+
.find( ':radio' ).on( 'change', this.updateDisplayEl.bind( this ) );
43+
}
44+
45+
46+
/**
47+
* @private
48+
* @return {string}
49+
*/
50+
generateHtml() {
51+
var containerId = this.containerId,
52+
optionName = this.optionName,
53+
optionDescription = this.optionDescription,
54+
defaultValue = this.defaultValue,
55+
radiosHtml = this.createRadiosHtml( this.options, defaultValue );
56+
57+
return `
58+
<label>
59+
${optionDescription}: (<code>${optionName}: <span id="${containerId}-value">${ this.formatValueForDisplay( defaultValue ) }</span></code>)
60+
</label>
61+
<div class="pl10">${ radiosHtml.join( '&nbsp;&nbsp;' ) }</div>
62+
`;
63+
}
64+
65+
66+
/**
67+
* Creates an array of '<input type="radio">' HTML tags.
68+
*
69+
* @private
70+
* @param {Array} options
71+
* @param {*} defaultValue
72+
* @return {String[]}
73+
*/
74+
createRadiosHtml( options, defaultValue ) {
75+
return options.map( ( option, idx ) => {
76+
return `
77+
<input type="radio" id="${this.containerId}-radio-${option}" name="${this.containerId}-radio" data-option-idx="${idx}" ${ option === this.defaultValue ? 'checked' : '' }>
78+
<label for="${this.containerId}-radio-${option}">${option}</label>
79+
`;
80+
} );
81+
}
82+
83+
84+
/**
85+
* @private
86+
*/
87+
updateDisplayEl() {
88+
var displayValue = this.formatValueForDisplay( this.getValue() );
89+
90+
this.$valueDisplayEl.html( displayValue );
91+
this.fireChange();
92+
}
93+
94+
95+
/**
96+
* @return {Boolean}
97+
*/
98+
getValue() {
99+
var optionIdx = this.$containerEl.find( ':radio:checked' ).data( 'option-idx' );
100+
101+
return this.options[ optionIdx ];
102+
}
103+
104+
105+
/**
106+
* Formats an option value for display.
107+
*
108+
* Strings are surrounded with quotes, booleans and numbers are returned
109+
* as strings as-is.
110+
*
111+
* @param {*} value
112+
*/
113+
formatValueForDisplay( value ) {
114+
return ( typeof value === 'string' ) ? `'${value}'` : ( value + '' );
115+
}
116+
117+
}

‎examples/live-example/js/TextOption.js

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
/*global $, Option */
2+
3+
/**
4+
* @class TextOption
5+
*
6+
* A text field option for the live example.
7+
*/
8+
class TextOption extends Option {
9+
10+
/**
11+
* @cfg {Number} [size=10]
12+
*
13+
* The `size` attribute of the text field.
14+
*/
15+
16+
/**
17+
* @cfg {Boolean} [defaultValue='']
18+
*
19+
* The default value for the option.
20+
*/
21+
22+
23+
/**
24+
* @constructor
25+
* @param {Object} cfg The configuration options for this class, specified
26+
* in an Object (map).
27+
*/
28+
constructor( cfg ) {
29+
super( cfg );
30+
31+
this.size = cfg.size || 10;
32+
this.defaultValue = cfg.defaultValue || '';
33+
34+
this.$containerEl.html( this.generateHtml() );
35+
this.$textEl = this.$containerEl.find( 'input' ).on( 'keyup change', this.fireChange.bind( this ) );
36+
this.$valueDisplayEl = this.$containerEl.find( '#' + this.containerId + '-value' );
37+
}
38+
39+
40+
/**
41+
* @private
42+
* @return {string}
43+
*/
44+
generateHtml() {
45+
var containerId = this.containerId,
46+
optionName = this.optionName,
47+
optionDescription = this.optionDescription,
48+
size = this.size,
49+
defaultValue = this.defaultValue,
50+
checkboxId = containerId + '-checkbox';
51+
52+
return `
53+
<input type="text" id="${checkboxId}" value="${defaultValue}" size="${size}">
54+
<label for="${checkboxId}">
55+
${optionDescription} (<code>${optionName}</code>)
56+
</label>
57+
`;
58+
}
59+
60+
61+
/**
62+
* @return {String}
63+
*/
64+
getValue() {
65+
return this.$textEl.val();
66+
}
67+
68+
}

0 commit comments

Comments
 (0)