Dialogs - Revision history

Hixie: /* Proposal */

2012-04-04T22:28:51Z

Proposal

← Older revision		Revision as of 22:28, 4 April 2012
Line 248:		Line 248:
	* rely on CSS for all styling except positioning (for now)		* rely on CSS for all styling except positioning (for now)

	* dialog.showModal~~([anchor]); or modal="" and show~~([anchor])		* dialog.showModal([anchor])
	** dialog is focused when displayed		** dialog is focused when displayed
	** everything else in the document is made unfocusable		** everything else in the document is made unfocusable

Hixie: /* Proposal */

2012-04-04T22:28:04Z

Proposal

← Older revision		Revision as of 22:28, 4 April 2012
Line 243:		Line 243:
	** semantically it's like hidden="", the contents aren't considered part of the parent.		** semantically it's like hidden="", the contents aren't considered part of the parent.
	** sectioning root.		** sectioning root.
			*<dialog open> attribute is set when dialog is showing.
			** dialog:not([open]) { display: none; } /* allows authors to do transitions if they want */
			* lightboxes are handled by the <dialog> being width:100%;height:100%; or some such
			* rely on CSS for all styling except positioning (for now)

	* dialog.showModal([anchor]); or modal="" and show([anchor])		* dialog.showModal([anchor]); or modal="" and show([anchor])
	** dialog is focused when displayed		** dialog is focused when displayed
Line 248:		Line 253:
	** escape key fires 'cancel' event; default behaviour is to call close() with empty string as value		** escape key fires 'cancel' event; default behaviour is to call close() with empty string as value
	** dialog.oncancel event handler		** dialog.oncancel event handler
	** dialog::~~cover~~		** push onto fullscreen stack
			** obtain a dialog::backdrop
	*** only active if the dialog was shown with showModal(); has magic positioning that covers the whole viewport under the dialog regardless of scrolling.		*** only active if the dialog was shown with showModal(); has magic positioning that covers the whole viewport under the dialog regardless of scrolling.
	*** animatable separate form the dialog element itself, so you can fade it in then the dialog.		*** animatable separate form the dialog element itself, so you can fade it in then the dialog.
	*** dialog.onclickoutside event handler fires if user clicks on the cover		*** dialog.onclickoutside event handler fires if user clicks on the cover
	** z-index: magic to keep on top of anything displayed before it		** z-index: magic to keep on top of anything displayed before it

	* dialog.show([anchor]);		* dialog.show([anchor]);
	** shows the dialog		** shows the dialog
	* <form method=dialog>
	** only valid inside <dialog>
	** makes submission hide the dialog and call the close callback
	** on submission, dialog.returnValue is set to the value of the submit button that was used
	* lightboxes are handled by the <dialog> being width:100%;height:100%; or some such
	* dialog.close([returnValue]) sets dialog.returnValue if value is given, and closes the dialog
	* dialog.returnValue is a string
	* dialog.onclose event handler
	* dialogs can be opened without anchors		* dialogs can be opened without anchors
	** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.		** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.
Line 272:		Line 272:
	** anchor point comes from 'anchor' property? anchor: (top\|bottom\|left\|right) [center \| <length> [from (top\|bottom\|left\|right)]]; uses given point on margin box edge		** anchor point comes from 'anchor' property? anchor: (top\|bottom\|left\|right) [center \| <length> [from (top\|bottom\|left\|right)]]; uses given point on margin box edge
	** can't be drag moved.		** can't be drag moved.
	*<dialog ~~open> attribute~~ is ~~set when~~ dialog is ~~showing~~.
	** dialog~~:not([open]) { display: none; } /~~* ~~allows authors to do transitions if they want~~ */		* dialog.close([returnValue]) sets dialog.returnValue if value is given, and closes the dialog
	* ~~rely~~ on ~~CSS for all styling except positioning (for now)~~		* dialog.returnValue is a string
			* dialog.onclose event handler

			* <form method=dialog>
			** only valid inside <dialog>
			** makes submission hide the dialog and call the close callback
			** on submission, dialog.returnValue is set to the value of the submit button that was used

	=== Other brainstorms ===		=== Other brainstorms ===

Hixie: /* Proposal */

2011-08-05T21:30:10Z

Proposal

← Older revision		Revision as of 21:30, 5 August 2011
Line 265:		Line 265:
	* dialogs can be opened without anchors		* dialogs can be opened without anchors
	** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.		** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.
	** dialog can be drag moved which affects the left and top/right		** [let JS do this:] dialog can be drag moved which affects the left and top/right
	* dialogs opened with anchors		* dialogs opened with anchors
	** anchor can be an element or a MouseEvent. If it's an element, the anchor point is the center of the given element's first box. Otherwise it's the mouse position given by the event.		** anchor can be an element or a MouseEvent. If it's an element, the anchor point is the center of the given element's first box. Otherwise it's the mouse position given by the event.

Hixie: /* Proposal */

2011-08-05T21:15:48Z

Proposal

← Older revision		Revision as of 21:15, 5 August 2011
Line 243:		Line 243:
	** semantically it's like hidden="", the contents aren't considered part of the parent.		** semantically it's like hidden="", the contents aren't considered part of the parent.
	** sectioning root.		** sectioning root.
	* dialog.showModal([anchor]);		* dialog.showModal([anchor]); or modal="" and show([anchor])
	** dialog is focused when displayed		** dialog is focused when displayed
	** everything else in the document is made unfocusable		** everything else in the document is made unfocusable
Line 252:		Line 252:
	*** animatable separate form the dialog element itself, so you can fade it in then the dialog.		*** animatable separate form the dialog element itself, so you can fade it in then the dialog.
	*** dialog.onclickoutside event handler fires if user clicks on the cover		*** dialog.onclickoutside event handler fires if user clicks on the cover
			** z-index: magic to keep on top of anything displayed before it
	* dialog.show([anchor]);		* dialog.show([anchor]);
	** shows the dialog		** shows the dialog

Hixie: /* Proposal */

2011-08-05T18:49:32Z

Proposal

← Older revision		Revision as of 18:49, 5 August 2011
Line 241:		Line 241:
	*<dialog>		*<dialog>
	** can be used as flow, or as child of <th> or <dt>. Can't be used in <hx> due to parsing problems (it couldn't contain its own heading).		** can be used as flow, or as child of <th> or <dt>. Can't be used in <hx> due to parsing problems (it couldn't contain its own heading).
	** semantically it's like hidden="", the contents aren't ~~there~~.		** semantically it's like hidden="", the contents aren't considered part of the parent.
	** sectioning root.		** sectioning root.
	* dialog.showModal([anchor]);		* dialog.showModal([anchor]);
Line 273:		Line 273:
	*<dialog open> attribute is set when dialog is showing.		*<dialog open> attribute is set when dialog is showing.
	** dialog:not([open]) { display: none; } /* allows authors to do transitions if they want */		** dialog:not([open]) { display: none; } /* allows authors to do transitions if they want */
			* rely on CSS for all styling except positioning (for now)

	=== Other brainstorms ===		=== Other brainstorms ===

Hixie: /* Proposal */

2011-08-05T18:44:52Z

Proposal

← Older revision		Revision as of 18:44, 5 August 2011
Line 243:		Line 243:
	** semantically it's like hidden="", the contents aren't there.		** semantically it's like hidden="", the contents aren't there.
	** sectioning root.		** sectioning root.
	* dialog.showModal();		* dialog.showModal([anchor]);
	** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.
	** dialog can be drag moved which affects the left and top/right
	** dialog is focused when displayed		** dialog is focused when displayed
	** everything else in the document is made unfocusable		** everything else in the document is made unfocusable
Line 254:		Line 252:
	*** animatable separate form the dialog element itself, so you can fade it in then the dialog.		*** animatable separate form the dialog element itself, so you can fade it in then the dialog.
	*** dialog.onclickoutside event handler fires if user clicks on the cover		*** dialog.onclickoutside event handler fires if user clicks on the cover
	** <form method=dialog>		* dialog.show([anchor]);
	*** only valid inside <dialog>		** shows the dialog
	*** makes submission hide the dialog and call the close callback		* <form method=dialog>
	*** on submission, dialog.returnValue is set to the value of the submit button that was used		** only valid inside <dialog>
			** makes submission hide the dialog and call the close callback
			** on submission, dialog.returnValue is set to the value of the submit button that was used
	* lightboxes are handled by the <dialog> being width:100%;height:100%; or some such		* lightboxes are handled by the <dialog> being width:100%;height:100%; or some such
	* dialog.close([returnValue]) sets dialog.returnValue if value is given, and closes the dialog		* dialog.close([returnValue]) sets dialog.returnValue if value is given, and closes the dialog
	* dialog.returnValue is a string		* dialog.returnValue is a string
	* dialog.onclose event handler		* dialog.onclose event handler
	*dialog~~.show~~(~~[anchor]~~)		* dialogs can be opened without anchors
			** causes the dialog to be absolutely positioned with explicit top and left/right (based on rtl) so that its margin box is centered in current viewport, but margin top edge is not above top of viewport.
			** dialog can be drag moved which affects the left and top/right
			* dialogs opened with anchors
	** anchor can be an element or a MouseEvent. If it's an element, the anchor point is the center of the given element's first box. Otherwise it's the mouse position given by the event.		** anchor can be an element or a MouseEvent. If it's an element, the anchor point is the center of the given element's first box. Otherwise it's the mouse position given by the event.
	** displays the dialog, anchored so that its anchor point is at the point given by the show() method argument.		** displays the dialog, anchored so that its anchor point is at the point given by the show() method argument.

Hixie: /* Other */

2011-08-05T18:40:26Z

Other

@@ Line 76: / Line 76: @@
 * http://trailers.apple.com/trailers/independent/therift/ - click "View Trailers" and then "Teaser" - video lightbox, many other examples on trailers.apple.com
 * http://warmetal.wikia.com/wiki/Aegis - click on the picture of the card
 == Code Examples ==

Hixie: /* Tooltips */

2011-08-05T18:31:55Z

Tooltips

← Older revision		Revision as of 18:31, 5 August 2011
Line 64:		Line 64:
	* GMail's contacts list has rich tooltips that appear on mouse over.		* GMail's contacts list has rich tooltips that appear on mouse over.

	* Google Docs ~~has~~ some that appear on load		* Google Docs and GMail have some that appear on load
	<img src=http://junkyard.damowmow.com/482>		<img src=http://junkyard.damowmow.com/482>
			<img src=http://junkyard.damowmow.com/492>

	* Google+ has one for when you add someone -- the rest of the page is still interactive (though using any other widget makes this one go away).		* Google+ has one for when you add someone -- the rest of the page is still interactive (though using any other widget makes this one go away).

Hixie: /* Other Dialogs */

2011-08-05T18:31:29Z

Other Dialogs

← Older revision		Revision as of 18:31, 5 August 2011
Line 44:		Line 44:
	* Google+ circle editor		* Google+ circle editor
	<img src=http://junkyard.damowmow.com/486>		<img src=http://junkyard.damowmow.com/486>

			* Google+ hovercard UI
			<img src=http://junkyard.damowmow.com/490>

	* iCloud's login error message box — note animation during display		* iCloud's login error message box — note animation during display

Hixie: /* Other Dialogs */

2011-08-05T18:30:27Z

Other Dialogs

← Older revision		Revision as of 18:30, 5 August 2011
Line 44:		Line 44:
	* Google+ circle editor		* Google+ circle editor
	<img src=http://junkyard.damowmow.com/486>		<img src=http://junkyard.damowmow.com/486>

			* iCloud's login error message box — note animation during display
			<img src=http://junkyard.damowmow.com/488>
			<img src=http://junkyard.damowmow.com/489>

	=== Tooltips ===		=== Tooltips ===