--- a/src/indie-ui-context.html Fri Mar 21 13:32:53 2014 -0700
+++ b/src/indie-ui-context.html Wed Mar 26 22:19:18 2014 -0700
@@ -121,7 +121,7 @@
<dd>
<p class="ednote">Description TBD (esp re: privacy and fingerprinting, and prompt access for certain parameters on a per-domain basis, similar to location sharing)</p>
- <pre class="example" data-transform="syntaxJavaScript">
+ <pre class="example highlight">
// example of settings keys defined within the IndieUI User Context specification.
window.userSetting('user-font-size'); // returns computed value in CSS pixels, e.g. '16px'
window.userSetting('subtitles'); // e.g. returns 'display' if the user wants to see subtitles/captions; otherwise returns 'none'
@@ -178,7 +178,7 @@
<h2>Privacy Model</h2>
<p class="todo">Todo: Explain how the privacy model works: when user prompted, window.userSetting() or window.matchMedia() return the default value or null immediately, and only provides the updated match ansynchronously through matchMedia().addEventListener or on subsequent requests to matchMedia().matches (e.g. on page reload) so there is never any detectable difference between "No" and "You don't need to know." A restricted @media block never prompts unless both the @media block and an included selector matches.</p>
- <p class="todo">Todo: Add justification interface on a per-category setting (possibly meta tag or a partial interface on document). Justification string may be defined by an new JavaScript interface, or perhaps by a meta tag in the document head, such as:<br><code class="html" data-transform="syntaxMarkup"><meta name="userMediaSettings" content="Used to enable captions and display them in your preferred font size and color."></code></p>
+ <p class="todo">Todo: Add justification interface on a per-category setting (possibly meta tag or a partial interface on document). Justification string may be defined by an new JavaScript interface, or perhaps by a meta tag in the document head, such as:<br><code class="highlight"><meta name="userMediaSettings" content="Used to enable captions and display them in your preferred font size and color."></code></p>
<section id="RestrictionCategory">
<h4>Restriction Categories</h4>
@@ -194,7 +194,7 @@
<section class="informative">
<h4>Example Restriction UI</h4>
<p>In the following example, the web author attempts to query two restricted user settings using two different techniques. For the sake of the example, assume the user's setting do match the specified queries.</p>
- <pre class="example javascript" data-transform="syntaxJavaScript">
+ <pre class="example highlight">
// Query matches if screen reader is enabled and user's privacy settings allow the match.
var mediaQueryList = window.matchMedia('screen and (screenreader)');
var mediaMatch = mediaQueryList.matches;
@@ -230,7 +230,7 @@
<section class="informative">
<h4>Example restricted call to <code>window.userSettings()</code></h4>
<p>The following example illustrates the code path that is executed when a user with a preference for audio descriptions visits a web page that uses window.userSetting() to automatically enable the secondary audio track at load time.</p>
- <pre class="example javascript" data-transform="syntaxJavaScript">
+ <pre class="example highlight">
// Author defines a function to handle changes of the audioDescription setting.
function handleAudioDescriptionChanged(key, value) {
@@ -396,7 +396,7 @@
</dl>
<div class="ex" title="Informative">
<p>In this example, the user-defined color and background color are defined through a user style sheet or other means, so override the site theme to respect the user's colors.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
@media (user-color) and (user-background-color) {
html, body {
/* Syntax for the user-pref variables to be specified in one of the CSS 4 modules. */
@@ -408,7 +408,7 @@
</div>
<div class="ex" title="Informative">
<p>In this example, the user-defined background color is dark (luminosity less than 40%), so the author adjusts the site logo element to use an image that looks better on darker background colors.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
/* Use default logo that looks good on lighter background colors. */
.logo { background-image: url(./img/logo_light.png);}
@@ -421,7 +421,7 @@
</div>
<div class="ex" title="Informative">
<p>In this example, the user-defined background color matches a warm palette (hue is not between 100 and 280; a.k.a. not green, blue, or blue-violet), so the author could adjust the rest of the site theme to be complementary.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
/* Note: this example uses the greater-than/less-than syntax likely to be adopted by CSS4. */
@media (user-background-color-hue < 100) or (user-background-color-hue > 280) {
/* User background color palette is red-violet, red, orange, or yellow. */
@@ -468,7 +468,7 @@
<div class="ex" title="Informative">
<p>In this example, the hardware display rendering is inverted, so the web app could <em>double-invert</em> foreground image and video content, which usually looks strange while inverted. This would leave text foreground color, all background colors, and background styles inverted to adhere to user setting.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
@media (colors-inverted) {
img, video {
filter: invert(100%);
@@ -483,7 +483,7 @@
</div>
<div class="ex" title="Informative">
<p>In this example, the hardware display rendering is inverted, so the web app could hide elements styles that resemble "shadows" of physical light, which by default look like white glows while inverted. This media query allows authors to disable settings that don't make sense when the physical display pixels are inverted.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
@media (colors-inverted) {
.page {
box-shadow: none;
@@ -557,7 +557,7 @@
<p>This example illustrates how Microsoft's implementation-specific <a href="http://msdn.microsoft.com/en-us/library/windows/apps/hh465764.aspx"><code>-ms-high-contrast</code></a> proposal can be replaced by three media features that are not implementation-specific.</p>
<p class="ednote">Currently Microsoft does not impose any restrictions on the <code>-ms-high-contrast</code> media feature, but it's possible the <code>user-contrast</code> setting may end up in a restricted category if it's determined to expose the user to privacy or fingerprinting implications.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
/*
adjusting to cover both the Microsoft proposal as well
as other platforms that have a slider value for color variants
@@ -668,7 +668,7 @@
</dl>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
/* Default layout uses 2 columns */
main {
columns: 2;
@@ -926,7 +926,7 @@
</dl>
<div class="ex" title="Informative">
<p>In this example, the user-defined subtitle background color is not sufficiently opaque to to prevent the video noise from making the captions difficult to read, so add a text shadow.</p>
- <pre class="example css" data-transform="syntaxCSS">
+ <pre class="example highlight">
/* Note: this example uses the greater-than/less-than syntax likely to be adopted by CSS4. */
@media (user-subtitle-background-color-alpha < 20) and (user-subtitle-color-luminosity > 50) {
.customRenderedCaptions {
--- a/src/indie-ui-events.html Fri Mar 21 13:32:53 2014 -0700
+++ b/src/indie-ui-events.html Wed Mar 26 22:19:18 2014 -0700
@@ -142,15 +142,13 @@
<section id="intro-example-dismissrequest">
<h4>Dismissing a Modal Dialog</h4>
<p>The following example uses a 'dismissrequest' event to close or cancel out of a modal application dialog.</p>
- <pre class="example">
- <span class="markup" data-transform="syntaxMarkup">
+ <pre class="example highlight">
<!-- Declare which IndieUI event(s) this element receives. -->
<dialog <strong>uiactions="dismiss"</strong> id="myDialog">
...
</dialog>
- <script type="text/javascript"></span><!--
- --><span class="javascript" data-transform="syntaxJavaScript">
+ <script type="text/javascript">
var myDialog = document.getElementById('myDialog');
@@ -169,10 +167,8 @@
e.stopPropagation(); // stop the event from bubbling.
<strong>e.preventDefault();</strong> // let the UA/AT know the event was intercepted successfully.
- }</span>
- <span class="markup" data-transform="syntaxMarkup">
+ }
</script>
- </span>
</pre>
</section>
@@ -180,13 +176,11 @@
<h4>Changing the Value of a Custom Slider</h4>
<p>The following example uses a 'valuechangerequest' event to modify the value of a custom ARIA slider.</p>
<p class="ednote">This example was cut. It needs to be rewritten once we add support for composite widgets with triggers or controllers (so the slider thumb can update the value via pointer-based events). See <a href="https://www.w3.org/WAI/IndieUI/track/actions/79">IndieUI-action-79</a>.</p>
- <pre class="example" hidden>
- <span class="markup" data-transform="syntaxMarkup">
+ <pre class="example highlight" hidden>
<!-- Declare which IndieUI event(s) this element receives. -->
<canvas <strong>uiactions="valuechange"</strong> id="slider" role="slider" aria-valuemin="0" aria-valuemax="100" aria-valuenow="42"></canvas>
- <script type="text/javascript"></span><!--
- --><span class="javascript" data-transform="syntaxJavaScript">
+ <script type="text/javascript">
// register the event at initialization
// <strong>Option #2:</strong> Using event delegation on any node (such as the body) that is higher in the DOM than the receiver element...
@@ -208,10 +202,8 @@
e.stopPropagation(); // stop the event from bubbling
<strong>e.preventDefault();</strong> // let the UA/AT know the event was intercepted successfully
- }</span>
- <span class="markup" data-transform="syntaxMarkup">
+ }
</script>
- </span>
</pre>
</section>
@@ -245,8 +237,7 @@
<p>User agents MUST <a href="#def_reflected_attribute">reflect</a> the <code>uiactions</code> content attribute in the <a href="#uiactions-attribute"><code>uiactions</code> IDL attribute</a>.</p>
<div data-transform="listActions"><!-- dynamically generates event list --></div>
<!-- <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 could just not listen for those specific events.</p> -->
- <pre class="example">
- <span class="markup" data-transform="syntaxMarkup">
+ <pre class="example highlight">
<!-- body element is event listener for all events, but event receiver only for 'delete' actions. -->
<body <strong>uiactions="delete"</strong>>
@@ -258,17 +249,14 @@
</body>
- <script type="text/javascript"></span>
- <span class="javascript" data-transform="syntaxJavaScript">
+ <script type="text/javascript">
// registered all of these on the body as an example of event delegation to help illustrate the difference between event
// target (document.activeElement or other point-of-regard), receiver (element with defined actions), and listener (body)
document.body.addEventListener(<strong>'dismissrequest'</strong>, handleDismiss);
document.body.addEventListener(<strong>'panrequest'</strong>, handlePan);
document.body.addEventListener(<strong>'deleterequest'</strong>, handleDelete);
document.body.addEventListener(<strong>'zoomrequest'</strong>, handleZoom);
- </span><span class="markup" data-transform="syntaxMarkup">
</script>
- </span>
</pre>
<p class="note">In the previous example, the 'deleterequest' event may be fired any time the user's point-of-regard was inside the document, presumably when the user triggered their platform's physical event to initiate a deletion, such as pressing the <kbd>DELETE</kbd> key. 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.</p>
</section>
@@ -855,14 +843,14 @@
<section id="feature-detection-example-dismissrequest">
<h4>Conditionally Assigning a UI Request Event</h4>
<p>The following example conditionally assigns a 'dismissrequest' event based on whether the user agent has support for the feature.</p>
- <pre class="example">
- <span class="javascript" data-transform="syntaxJavaScript">if (typeof document.body.ondismissrequest !== 'undefined') {
+ <pre class="example highlight">
+ if (typeof document.body.ondismissrequest !== 'undefined') {
// okay to use 'dismissrequest'
document.body.addEventListener('dismissrequest', dismissHandler);
} else {
// otherwise catch the ESC key or another platform-specific equivalent event
document.body.addEventListener('keyup', keyHandler);
- }</span>
+ }
</pre>
</section>
<p class="ednote">Note: need to double-check that the above code sample is really the best approach.</p>
--- a/src/js/respec-transformers.js Fri Mar 21 13:32:53 2014 -0700
+++ b/src/js/respec-transformers.js Wed Mar 26 22:19:18 2014 -0700
@@ -86,44 +86,4 @@
}
function linkRestrictionCategory(r, content) {
return linkId(r, content, ("idl-def-RestrictionCategory." + content));
-}
-
-
-/* syntax highlighting for JavaScript examples */
-function syntaxJavaScript(r, content) {
- lines = content.split(/\n/);
- for (var i=0; i<lines.length; i++) {
- // line comments
- if (lines[i].indexOf('//') !== -1) {
- lines[i] = lines[i].replace('//', '<span class="comment linecomment">//').replace(/$/, '</span>');
- }
- // block comments
- lines[i] = lines[i].replace('/*', '<span class="comment blockcomment">/*');
- lines[i] = lines[i].replace('*/', '*/</span>');
- }
- return lines.join('\n'); // reassemble the string
-}
-
-/* syntax highlighting for CSS examples */
-function syntaxCSS(r, content) {
- lines = content.split(/\n/);
- for (var i=0; i<lines.length; i++) {
- // block comments
- lines[i] = lines[i].replace('/*', '<span class="comment blockcomment">/*');
- lines[i] = lines[i].replace('*/', '*/</span>');
- }
- return lines.join('\n'); // reassemble the string
-}
-
-/* syntax highlighting for markup examples */
-function syntaxMarkup(r, content) {
- lines = content.split(/\n/);
- for (var i=0; i<lines.length; i++) {
- // comments
- lines[i] = lines[i].replace('<!--', '<span class="comment blockcomment"><!--');
- lines[i] = lines[i].replace('-->', '--></span>');
- }
- return lines.join('\n'); // reassemble the string
-
-}
-
+}
\ No newline at end of file
--- a/src/obsolete/key-value-context.html Fri Mar 21 13:32:53 2014 -0700
+++ b/src/obsolete/key-value-context.html Wed Mar 26 22:19:18 2014 -0700
@@ -99,7 +99,7 @@
<p class="ednote">Description TBD (esp re: privacy and fingerprinting, and prompt access for certain parameters on a per-domain basis, similar to location sharing)</p>
<p class="ednote">May need an additional "silent fail" parameter when keys are nice-to-have but not important enough to prompt if the user or platform specifies "prompt for access" to a particular key.</p>
<p class="note">An undefined or empty value for the <var>taxonomy</var> parameter indicates the <var>key</var> matches a preference defined in <a href="#UserSettingsKeys">User Settings Keys</a> section of this document. Standard vendor prefixes (<code>ie</code>, <code>moz</code>, <code>o</code>, <code>webkit</code>) are reserved for the <var>taxonomy</var> parameter, and any additional implementation or external taxonomy identifiers will be defined in a supplemental, informative document.</p>
- <pre class="example" data-transform="syntaxJavaScript">
+ <pre class="example highlight">
// example of a preference defined within the IndieUI User Context specification.
window.settings.valueForKey('fontSize'); // e.g. '16px'
window.settings.valueForKey('subtitles'); // e.g. returns true if the user wants to see subtitles or captions by default