Skip to content

Commit 92e3786

Browse files
jzaeffererjzaefferer
committed
Widget demo: Replace inline editor with colorize. This can stick around forever, won't be making it a real widget.
1 parent 727a80a commit 92e3786

File tree

1 file changed

+91
-76
lines changed

1 file changed

+91
-76
lines changed

‎demos/widget/default.html

Lines changed: 91 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -10,95 +10,108 @@
1010
<script src="../../ui/jquery.ui.position.js"></script>
1111
<link rel="stylesheet" href="../demos.css">
1212
<style>
13-
/* this could go into custom.inlineedit.css */
14-
/* make it display:block to replace the block element that's being edited */
15-
.inlineedit-input { display: block; }
16-
/* this would need a few more styles to make it look decent */
13+
.colorize {
14+
font-size: 25px;
15+
width: 75px;
16+
height: 75px;
17+
}
1718
</style>
1819
<script>
1920
$(function() {
20-
// this defines a new widget, in the "custom" namespace
21-
$.widget( "custom.inlineedit", {
21+
// the widget definition, where 'custom' is the namespace,
22+
// 'colorize' the widget name
23+
$.widget( 'custom.colorize', {
2224
// default options
2325
options: {
24-
submitOnBlur: true
26+
red: 255,
27+
green: 0,
28+
blue: 0
2529
},
26-
// this is the constructor
30+
31+
// the constructor
2732
_create: function() {
28-
// basic event binding to this.element
33+
this.element
34+
// add a class for themeing
35+
.addClass("colorize")
36+
// prevent double click to select text
37+
.disableSelection();
38+
// bind click events to random method
2939
this._bind({
30-
// string as value is mapped to instance method
31-
click: "start"
32-
});
33-
34-
// creating a new element to show later
35-
this.input = $( "<input>" ).addClass("inlineedit-input").hide().insertAfter( this.element );
36-
// with events on input, here functions that to do event-specific checks
37-
this._bind( this.input, {
38-
blur: function( event ) {
39-
// ignore blur event if already hidden
40-
if (!this.input.is(":visible")) {
41-
return;
42-
}
43-
if ( this.options.submitOnBlur ) {
44-
this.submit( event )
45-
} else {
46-
this.cancel( event );
47-
}
48-
},
49-
keyup: function( event ) {
50-
// using $.ui.keyCode to map keyboard input to the right action
51-
if ( event.keyCode === $.ui.keyCode.ENTER || event.keyCode === $.ui.keyCode.NUMPAD_ENTER ) {
52-
this.submit( event );
53-
} else if ( event.keyCode === $.ui.keyCode.ESCAPE ) {
54-
this.cancel( event );
55-
}
56-
}
40+
// _bind won't call random when widget is disabled
41+
click: "random"
5742
});
43+
this._refresh();
5844
},
59-
// a public method
60-
start: function( event ) {
61-
this.element.hide();
62-
this.input.val( this.element.text() ).show().focus();
63-
// trigger a custom event when something changes
64-
this._trigger("start", event );
65-
},
66-
// another custom method
67-
_hide: function( event ) {
68-
this.input.hide();
69-
this.element.show();
45+
46+
// called when created, and later when changing options
47+
_refresh: function() {
48+
this.element.css( 'background-color', 'rgb(' +
49+
this.options.red +',' +
50+
this.options.green + ',' +
51+
this.options.blue + ')'
52+
);
53+
54+
// trigger a callback/event
55+
this._trigger( 'change' );
7056
},
71-
submit: function( event ) {
72-
var newValue = this.input.val(),
73-
ui = {
74-
value: newValue
75-
};
76-
// trigger an event, cancel the default action when event handler returns false
77-
if ( this._trigger( "submit", event, ui ) !== false ) {
78-
this.element.text( newValue );
57+
58+
// a public method to change the color to a random value
59+
// can be called directly via .colorize( 'random' )
60+
random: function( event ) {
61+
var colors = {
62+
red: Math.floor( Math.random() * 256 ),
63+
green: Math.floor( Math.random() * 256 ),
64+
blue: Math.floor( Math.random() * 256 )
65+
};
66+
67+
// trigger an event, check if it's canceled
68+
if ( this._trigger( 'random', event, colors ) !== false ) {
69+
$.extend( this.options, colors );
70+
this._refresh();
7971
}
80-
this._hide();
8172
},
82-
cancel: function( event ) {
83-
this._hide();
84-
// trigger an event when something changes
85-
this._trigger( "cancel", event );
73+
74+
// events bound via _bind are removed automatically
75+
// revert other modifications here
76+
_destroy: function() {
77+
this.element
78+
.removeClass( 'colorize' )
79+
.enableSelection()
80+
.css( 'background-color', 'transparent' );
81+
},
82+
83+
// always refresh when changing an option
84+
_setOption: function( key, value ) {
85+
// _super handles keeping the right this-context
86+
this._super( "_setOption", key, value );
87+
this._refresh();
8688
}
8789
});
88-
// this is how we can use our custom widget, just like any jQuery plugin
89-
$( ".demo h1" ).inlineedit();
90-
$( ".demo p" ).inlineedit({
91-
// configure an option
92-
submitOnBlur: false
90+
91+
$( '#my-widget1' ).colorize();
92+
$( '#my-widget2' ).colorize({
93+
red: 60,
94+
blue: 60
95+
});
96+
$( '#my-widget3' ).colorize( {
97+
green: 128,
98+
random: function( event, ui ) {
99+
return ui.green > 128;
100+
}
93101
});
94-
$( ".demo button" ).click( function() {
95-
// call a public method
96-
$( ".demo :custom-inlineedit" ).inlineedit( "start" );
102+
103+
$( '#disable' ).toggle(function() {
104+
$( ':custom-colorize' ).colorize( 'disable' );
105+
}, function() {
106+
$( ':custom-colorize' ).colorize( 'enable' );
97107
});
98-
// widget's create a custom selector
99-
// triggered events can be used with regular bind, just prepend name
100-
$( ".demo :custom-inlineedit" ).bind( "inlineeditstart inlineeditsubmit inlineeditcancel" , function( event, ui ) {
101-
$( "<div></div>" ).text( "edit event " + event.type ).appendTo(".demo");
108+
109+
$( '#black' ).click( function() {
110+
$( ':custom-colorize' ).colorize( 'option', {
111+
red: 0,
112+
green: 0,
113+
blue: 0
114+
} );
102115
});
103116
});
104117
</script>
@@ -108,9 +121,11 @@
108121
<div class="demo">
109122

110123
<div>
111-
<h1>This is an editable header</h1>
112-
<p>And an editable paragraph</p>
113-
<button>Start editing</button>
124+
<div id="my-widget1">color me</div>
125+
<div id="my-widget2">color me</div>
126+
<div id="my-widget3">color me</div>
127+
<button id="disable">Toglge disabled option</button>
128+
<button id="black">Go black</button>
114129
</div>
115130

116131
</div><!-- End demo -->
@@ -119,7 +134,7 @@ <h1>This is an editable header</h1>
119134

120135
<div class="demo-description">
121136
<p>This demo shows a simple custom widget built using the widget factory (jquery.ui.widget.js).</p>
122-
<p>The header is set to change the element on blur, the paragraph only changes when you submit with Enter.</p>
137+
<p>The three boxes are initialized in different ways. Clicking them changes their background color. View source to see how it works.</p>
123138
<p><a href="http://wiki.jqueryui.com/w/page/12138135/Widget-factory">For more details on the widget factory, visit the jQuery UI planning wiki.</a></p>
124139
</div><!-- End demo-description -->
125140

0 commit comments

Comments
 (0)