part of ACTION-37: Add @ui-actions element and explain event.receiver as opposed to event.target and element registered as the event listener
authorJames Craig <jcraig@apple.com>
Mon, 17 Dec 2012 11:17:59 -0800
changeset 50a26a506f5392
parent 49 68556cfb8fea
child 51 bbcc560d8a81
part of ACTION-37: Add @ui-actions element and explain event.receiver as opposed to event.target and element registered as the event listener
src/include/terms.html
src/indie-ui-events.html
src/js/respec-transformers.js
     1.1 --- a/src/include/terms.html	Mon Dec 17 11:10:21 2012 -0800
     1.2 +++ b/src/include/terms.html	Mon Dec 17 11:17:59 2012 -0800
     1.3 @@ -8,11 +8,15 @@
     1.4  	<dd class="placeholder">TBD</dd>
     1.5  	
     1.6  	<dt id="def_point_of_regard">Point-of-Regard</dt>
     1.7 -	<dd class="placeholder">TBD</dd>
     1.8 +	<dd class="placeholder">
     1.9 +		TBD
    1.10 +		<p class="ednote">Depending on the context, this is either the element under the pointer (e.g. mouse cursor), the currently focused element (document.activeElement), or an element that the assistive technology determines to be the subject of the user's attention.</p>
    1.11 +	</dd>
    1.12  	
    1.13  	<dt id="def_request_event_receiver">Request Event Receiver</dt>
    1.14 -	<dd>
    1.15 -		<p class="ednote">TBD: need to explain difference between the event.target, the element handler the event (addEventListener), and the "receiver" of the UIRequestEvent. The event "receiver" will be author-defined with an attribute (potentially @actions or @ui-actions) that describes the type of UI actions that can be performed on the element (the UIRequestEvent "receiver") as is a contract declaration of the types of UIRequestEvents that will be received and handled by the web application.</p>
    1.16 +	<dd class="placeholder">
    1.17 +		TBD
    1.18 +		<p class="ednote">Need to explain difference between the event.target, the element handler the event (addEventListener), and the "receiver" of the UIRequestEvent. The event "receiver" will be author-defined with an attribute (potentially @actions or @ui-actions) that describes the type of UI actions that can be performed on the element (the UIRequestEvent "receiver") as is a contract declaration of the types of UIRequestEvents that will be received and handled by the web application.</p>
    1.19  	</dd>
    1.20  	
    1.21  	<dt id="def_user_agent">User Agent</dt>
     2.1 --- a/src/indie-ui-events.html	Mon Dec 17 11:10:21 2012 -0800
     2.2 +++ b/src/indie-ui-events.html	Mon Dec 17 11:17:59 2012 -0800
     2.3 @@ -98,14 +98,46 @@
     2.4  		<!-- :::::::::::::::::::: INTRO :::::::::::::::::::: -->
     2.5  		<section id="intro" class="introductory informative">
     2.6  			<h2>Introduction</h2>
     2.7 -			<p class="placeholder">placeholder for remaining intro explaining background, event registration (addEventListener) versus origination (event.target defined via ~@ui-actions)</p>
     2.8 +			<p>One of the core principles behind <abbr title="User Interface">UI</abbr> Change Request Events is that they operate on a completely backwards-compatible, opt-in basis. In other words, the web application author has to be aware of these events and register event listeners, or the user agents behave as they normally would.</p>
     2.9 +			<p><strong>Change request events do not cause any direct manipulation or mutation of the <abbr title="Document Object Model">DOM</abbr>.</strong> Instead, the event object conveys the user's intent to the web application, and allows the web application to make the appropriate changes to the DOM, on behalf of the user. If a web application is authored to understand the change request event, it can cancel the event using <code>preventDefault()</code>, which informs the user agent that the event has been captured and understood. If a web application does not cancel any change request event, the user agent can then attempt fallback behavior or communicate to the user that the input has not been recognized.</p>
    2.10 +			<p class="placeholder">placeholder for remaining intro explaining background, event registration (addEventListener) versus origination (event.target) and receiver (event.receiver defined via @actions or @ui-actions)</p>
    2.11  		</section>
    2.12 +		<!-- :::::::::::::::::::: END INTRO :::::::::::::::::::: -->
    2.13 +		
    2.14 +		<!-- :::::::::::::::::::: Actions Attribute :::::::::::::::::::: -->
    2.15 +		<section id="actions">
    2.16 +			<h2><abbr title="User Interface">UI</abbr> Actions</h2>
    2.17 +			<p>User interface actions are declared as enumerated attribute values on an element. Each value corresponds to a specific <a href="#RequestEvents">UI Request Event</a>, and declares the web page author's ability to receive and handle each of the request events initiated by the user agent. In order to receive each request event, authors MUST also register for the event using  <code>Element.addEventListener()</code> at this node or higher in the DOM. User agents MUST NOT initiate a <a href="#RequestEvents">UI Request Event</a> when the user's <a href="#def_point_of_regard">point-of-regard</a> is not inside an element with the corresponding defined action.</p>
    2.18 +			<section id="ui-actions">
    2.19 +				<h3>The <code>ui-actions</code> attribute</h3>
    2.20 +				<p>The <code>ui-actions</code> content attribute is an <a href="http://www.w3.org/TR/2011/WD-html5-20110405/common-microsyntaxes.html#enumerated-attribute" class="todo">enumerated attribute</a> accepting zero or more of the following values, separated by whitespace:</p>
    2.21 +				<div data-transform="listActions"><!-- dynamically generates event list --></div>
    2.22 +				<p class="ednote">We could probably combine the 'manipulation' events into a single 'manipulation' action value. I don't foresee a case where an author would want to receive some, but not all of them, and even if that case exists, the author just not listen for those specific events.</p>
    2.23 +				<pre class="example">
    2.24 +					&lt;body <strong>ui-actions="undo redo"</strong>&gt;
    2.25 +					  &lt;div id="mapview" <strong>ui-actions="pan zoom"</strong>&gt; ... &lt;/div&gt;
    2.26 +					  &lt;dialog <strong>ui-actions="dismiss"</strong>&gt; ... &lt;/dialog&gt;
    2.27 +					&lt;/body&gt;
    2.28 +					
    2.29 +					&lt;script type="text/javascript"&gt;
    2.30 +					  // registered on body as an example of event delegation to help illustrate the difference between
    2.31 +					  // event target (document.activeElement or point-of-regard), receiver (element with defined actions), and listener (body)
    2.32 +					  document.body.addEventListener(<strong>'dismissrequest'</strong>, handleDismiss);
    2.33 +					  document.body.addEventListener(<strong>'panrequest'</strong>, handlePan);
    2.34 +					  document.body.addEventListener(<strong>'redorequest'</strong>, handleRedo);
    2.35 +					  document.body.addEventListener(<strong>'undorequest'</strong>, handleUndo);
    2.36 +					  document.body.addEventListener(<strong>'zoomrequest'</strong>, handleZoom);
    2.37 +					&lt;/script&gt;
    2.38 +				</pre>
    2.39 +				<p class="note">In the previous example, 'undorequest' and 'redorequest' events could be fired any time the user's point-of-regard was inside the document. However, the 'dismissrequest' would only be fired when the user's point-of-regard was inside the dialog. Likewise, the 'panrequest' and 'zoomrequest' would only be fired when the user's <a href="#def_point_of_regard">point-of-regard</a> was inside the map view.
    2.40 +			</section>
    2.41 +		</section>
    2.42 +		<!-- :::::::::::::::::::: End Actions Attribute :::::::::::::::::::: -->
    2.43  		
    2.44  		<!-- :::::::::::::::::::: UI Request Event Interfaces :::::::::::::::::::: -->
    2.45  		<section id="RequestEvents">
    2.46  			<h2><abbr title="User Interface">UI</abbr> Request Events</h2>
    2.47 -			<p>The core principle behind <abbr title="User Interface">UI</abbr> Change Request Events is that they operate on a completely backwards-compatible, opt-in basis. In other words, the web application author has to be aware of these events and register event listeners, or the user agent and assistive technology behave as they normally would.</p>
    2.48 -			<p><strong>Change request events do not cause any direct manipulation or mutation of the DOM.</strong> Instead, the event object conveys the user's intent to the web application, and allows the web application to make the appropriate changes to the DOM, on behalf of the user agent. If a web application is authored to understand the change request event, it can cancel the event using <code>preventDefault()</code>, which informs the user agent that the event has been captured and understood. If a web application does not cancel any change request event, the user agent can then attempt fallback behavior or communicate to the user that the input has not been recognized.</p>
    2.49 +			
    2.50  			<p class="ednote">There is purposefully no request event for activating the default action. Authors are encouraged to use a standard <code>click</code> event for default actions.</p>
    2.51  			<p class="ednote">Event fires on point-of-regard (<code>document.activeElement</code>, clicked element, or AT equivalent) if applicable, or otherwise <code>document.body</code>.</p>
    2.52  			<p class="ednote">These events should be asynchronous, but when used in conjunction with keyboard events, should fire after <code>keydown</code>, but before both <code>keyup</code> and <code>keypress</code>.</p>
    2.53 @@ -113,7 +145,7 @@
    2.54  			<!-- :::::::::::::::::::: UIRequestEvent :::::::::::::::::::: -->
    2.55  			<section id="UIRequestEvent">
    2.56  				<h3>Interface UIRequestEvent</h3>
    2.57 -
    2.58 +				<p class="ednote">Separate interface from UIEvent because the @ui-actions attribute will 1) affect when and where these events are fired, and 2) adds the distinction of an event "receiver" element (element declaring the ui-actions attribute) in addition to the "target" element where the event initiates and the "listener" element where the event is registered for and handled.</p>
    2.59  				<dl title="[Constructor] interface UIRequestEvent : UIEvent" class="idl">
    2.60  
    2.61  					<dt>readonly attribute DOMString typeArg</dt>
    2.62 @@ -343,7 +375,7 @@
    2.63  			<!-- :::::::::::::::::::: UIScrollRequestEvent :::::::::::::::::::: -->
    2.64  			<section id="UIScrollRequestEvent">
    2.65  				<h3>Interface UIScrollRequestEvent</h3>
    2.66 -				<div class="ednote">Editorial Note: these constants will likely change based on discussion from the IndieUI Face-to-Face.</div>
    2.67 +				<div class="ednote">Editorial Note: these constants may change, or they may be replaced with x/y deltas.</div>
    2.68  				<dl title="[Constructor] interface UIScrollRequestEvent : UIRequestEvent" class="idl">
    2.69  					
    2.70  					<!-- for custom scroll views or widgets (e.g. carousels, lists, grids)... not intended for native scroll views -->
     3.1 --- a/src/js/respec-transformers.js	Mon Dec 17 11:10:21 2012 -0800
     3.2 +++ b/src/js/respec-transformers.js	Mon Dec 17 11:17:59 2012 -0800
     3.3 @@ -1,12 +1,17 @@
     3.4 -/* listEvents: alphabetically list of event listeners, generated from markup */
     3.5 -function listEvents(r, content) {
     3.6 -	var s = '', eventList = [], nodeList = $$('code.event');
     3.7 +
     3.8 +function events() {
     3.9 +	var eventList = [], nodeList = $$('code.event');
    3.10  	for (index in nodeList) {
    3.11  		var title = nodeList[index].innerText;
    3.12  		if ($$('#'+title).length) eventList.push(title);
    3.13  	}
    3.14 -	s += '<ul>'
    3.15 -	for (index in eventList.sort()){
    3.16 +	return eventList.sort();
    3.17 +}
    3.18 +
    3.19 +/* listEvents: alphabetical list of event listeners, generated from markup e.g. 'collapserequest, deleterequest, ...' */
    3.20 +function listEvents(r, content) {
    3.21 +	var s = '<ul>', eventList = events();
    3.22 +	for (index in eventList){
    3.23  		var title = eventList[index];
    3.24  		var description = '';
    3.25  		var els = $$('#'+title+'+dd>p'); // get the paragraph children of the dd that follows the dt event element.
    3.26 @@ -16,3 +21,15 @@
    3.27  	s += '</ul>'
    3.28  	return content + s;
    3.29  }
    3.30 +
    3.31 +/* listActions: alphabetical list generated from trimmed event names. e.g. 'collapserequest, deleterequest, ...' becomes 'collapse, delete, ...' */
    3.32 +function listActions(r, content) {
    3.33 +	var s = '<ul>', eventList = events();
    3.34 +	for (index in eventList){
    3.35 +		var title = eventList[index];
    3.36 +		s += '<li><code>' +title.replace('request','')+ '</code></li>';
    3.37 +	}
    3.38 +	s += '</ul>'
    3.39 +	return content + s;
    3.40 +}
    3.41 +