diff --git a/aria-practices-DeletedSectionsArchive.html b/aria-practices-DeletedSectionsArchive.html index 35148fa7dd..b8075a2fa3 100644 --- a/aria-practices-DeletedSectionsArchive.html +++ b/aria-practices-DeletedSectionsArchive.html @@ -169,168 +169,6 @@

Design Patterns and Widgets

-
-

Accordion

- -

This section has not been updated since it was integrated from the WAI-ARIA Authoring Practices Guide (APG) version 1.0 -- an APG task force review is pending.

- -

- An accordion component is a collection of expandable panels associated with a common outer container. - Panels consist of a header and an associated content region or panel. - The primary use of an Accordion is to present multiple sections of content on a single page without scrolling, where all of the sections are peers in the application or object hierarchy. - The general look is similar to a tree where each root tree node is an expandable accordion header. - The user navigates and makes the contents of each panel visible (or not) by interacting with the Accordion Header. - Terms for understanding accordions include: -

- -
-
accordion component:
-
Collection of panels within a common outer pane.
-
accordion header:
-
Label area of an accordion panel. This is where you find the control to expand or collapse the panels.
-
accordion panel:
-
Contents area associated with an accordion header.
-
- -
-

Keyboard Interaction

- -
    -
  • - Tab - When focus is on an accordion header, pressing the Tab key moves focus in the following manner: -
      -
    1. If interactive glyphs or menus are present in the accordion header, focus moves to each in order.
      2. -
    2. When the corresponding panel is expanded (its aria-expanded state is 'true'), then focus moves to the first focusable element in the panel.
      3. -
    3. If the panel is collapsed (its aria-expanded state is 'false' or missing), OR, when the last interactive element of a panel is reached, the next Tab key press moves focus as follows: -
        -
      • If a subsequent accordion panel is already expanded, focus moves to the first focusable element in this subsequent panel.
        • -
      • If no subsequent accordion panel is expanded, focus moves to the first focusable element outside the accordion component.
        • -
      -
      4. -
    -
    • -
  • - Left arrow -
      -
    • When focus is on the accordion header, a press of up/left arrow keys moves focus to the previous logical accordion header.
      • -
    • When focus reaches the first header, further up/left arrow key presses optionally wrap to the first header.
      • -
    -
    • -
  • - Right arrow -
      -
    • When focus is on the accordion header, a press of down/right moves focus to the next logical accordion header.
      • -
    • When focus reaches the last header, further down/right arrow key presses optionally wrap to the first header.
      • -
    -
    • -
  • - Up arrow - behaves the same as left arrow -
    • -
  • - Down arrow - behaves the same as right arrow -
    • -
  • - Control + Up Arrow - Moves focus from anywhere in the accordion content to its associated accordion header or tab respectively. -
    • -
  • - Control + Page Up - -
      -
    • When focus is inside of an accordion pane, pressing Control + Page Up moves focus to the accordion header of the previous accordion pane.
      • -
    • When focus is in the first accordion header content, pressing Control + Page Up optionally moves focus to the last accordion header.
      • -
    • Focus will simply move to the header and will require Enter/Space to expand/collapse the accordion pane.
      • -
    -
    • -
  • - Control + Page Down - -
      -
    • When focus is inside of an accordion pane, pressing Control + Page Down moves focus to the header of the accordion pane.
      • -
    • When focus is in the last accordion header content, pressing Control + Page Down optionally moves focus to the first accordion header.
      • -
    • In the case of an accordion, focus simply moves to the header and requires Enter/Space to expand/collapse the accordion pane.
      • -
    -
    • -
  • - End - When focus is on the accordion header, an End key press moves focus to the last accordion header. -
    • -
  • - Home - When focus is on the accordion header, a Home key press moves focus to the first accordion header. -
    • -
  • - Enter/Space - When focus is on an accordion header, pressing Enter/Space toggles the expansion of the corresponding panel. -
      -
    • If collapsed, the panel is expanded, and its aria-expanded state is set to 'true'.
      • -
    • If expanded, the panel is collapsed and its aria-expanded state is set to 'false'.
      • -
    -
    • -
  • - Shift + Tab - Generally the reverse of Tab. -
    • -
  • - Alt + Delete - -
      -
    • - When deletion is allowed, with focus anywhere within the tab panel or tab, pressing Alt + Delete will delete the current tab and tab panel from the tabbed interface control. - If additional tabs remain in the tabbed interface, focus goes to the next tab in the tab list. - If no additional tabs remain, then focus moves to the last place that held focus in the previous tab panel. -
      • -
    • - An alternative to providing a keystroke to close a tab is to provide a context menu that is associated with the tab title. - When focus is on the tab, pressing Shift + F10 or pressing the right mouse button will open a context menu with the close choice. -
      • -
    • A warning should be given to the user before allowing the delete to occur.
      • -
    -
    • -
-

- In Firefox, pressing Control + Page Up / Control + Page Down moves between browser tabs. - Firefox also supports Control + Tab and Control + Shift + Tab to move between tabs. - Internet Explorer 7 also uses Control + Tab and Control + Shift + Tab. - There may be advantages to using Control + Page Up/Page Down as the keys to change tabs; it is a recognizable keystroke to at least Firefox users and it is also supported by the Windows operating system to move between panels in a tabbed dialog. -

-

You should be aware of two issues with using Control + Page Up/Page Down:

-
    -
  • - The first arises when the user is within a tabbed interface control on a Web page. - Here they can not easily switch browser tabs without first moving focus outside of the tabbed interface control. - This may be acceptable. -
    • -
  • - The second arises when the entire web page is a tabbed interface control. - In this case the user could not switch browser tabs unless the control on the web page ignored the Control + Page Up/Page Down keypress (and thus letting the browser access it) when the first or last tab was reached. -
    • -
-
- -
-

WAI-ARIA Roles, States, and Properties:

- -
    -
  • - The accordion component must have a role of tablist and have aria-multiselectable="true" - This will enable an assistive technology, such as screen reader, to convey that the tablist is an accordion or a multi selectable tablist. - This will also tell the user that the keyboard navigation matches an accordion and not a tablist. -
    • -
  • Contained within the tablist is a set of tab/tabpanel pairs.
    • -
  • Each header tab in the tablist has a role of tab.
    • -
  • The accordion panel uses the role tabpanel and should have an aria-labelledby relationship referencing the corresponding header having a role of tab
    • -
  • The tabpanel is considered a grouping for all content consisting of that tabpanel.
    • -
  • An accordion should manage the expanded/collapsed state of each tab by maintaining its aria-expanded state.
    • -
  • An accordion should manage the selected state of each tab by maintaining its aria-selected state.
    • -
  • An accordion should convey the visibility of each tabpanel by maintaining its aria-hidden state.
    • -
-
- -
-

Example

- -

- Any examples referenced here that are hosted outside www.w3.org may have changed and may not accurately exemplify the guidance in this section. - The APG task force is developing examples for APG version 1.1 that will be directly incorporated into the guide. -

- -

Open Ajax Alliance Accordion

-
-
-

Auto Complete

This section has not been updated since it was integrated from APG diff --git a/aria-practices.html b/aria-practices.html index 6e03000947..fd4a3ea06d 100644 --- a/aria-practices.html +++ b/aria-practices.html @@ -245,8 +245,76 @@

Generally Applicable Keyboard Recommendations

-

Accordion

-

Drafting this section is issue 53.

+

Accordion (Sections With Show/Hide Functionality)

+

This section is work in progress. Provide feedback in issue 53.

+

An accordion is a vertically stacked set of elements, such as labels or + thumbnails, that allow the user to toggle the display of sections of content. Each + labeling element can be expanded or collapsed to reveal or hide its associated + content. Accordions are commonly used to reduce the need to scroll when presenting + multiple sections of content on a single page.

+

Terms for understanding accordions include:

+
+
Accordion Header:
+
Label for or thumbnail representing a section of content that also serves as a control for showing, and in some implementations, hiding the section of content.
+
Accordion Panel:
+
Section of content associated with an accordion header.
+
+

In some accordions, there are additional elements that are always visible adjacent to the accordion header. + For instance, a menubutton may accompany each accordion header to provide access to actions that apply to that section. + And, in some cases, a snippet of the hidden content may also be visually persistent.

+ +
+

Keyboard Interaction

+
    +
  • Enter or Space: +
      +
    • When focus is on the accordion header for a collapsed panel, + expands its accordion panel. If the implementation allows only one + panel to be expanded and another panel is expanded, collapses that + panel.
      • +
    • When focus is on the accordion header for an expanded panel, + collapses the panel if the implementation supports collapsing. Some + implementations require one panel to be expanded at all times and + allow only one panel to be expanded; so, they do not support a + collapse function.
      • +
    +
  • Control + Page Down (Optional): If focus is inside an + accordion panel or on an accordion header, moves focus to the next accordion + header. If focus is in the last accordion header or panel, either does + nothing or moves focus to the first accordion header.
    • +
  • Control + Page Up (Optional): If focus is inside an + accordion panel, moves focus to the header for that panel. If focus is on an + accordion header, moves focus to the previous accordion header. If focus is + on the first accordion header, either does nothing or moves focus to the + last accordion header.
    • +
  • Home (Optional): When focus is on an accordion header, moves + focus to the first accordion header.
    • +
  • End (Optional): When focus is on an accordion header, moves + focus to the last accordion header.
    • +
+
+ +
+

WAI-ARIA Roles, States, and Properties:

+
    +
  • Each accordion header is contained in an element with role button. + The button label is the label for the associated accordion panel.
    • +
  • The accordion header button element has aria-controls set to the ID of the element containing the accordion panel content.
    • +
  • If the accordion panel associated with an accordion header is visible, the header button element has aria-expanded set to true. + If the panel is not visible, aria-expanded is set to false.
    • +
  • If the accordion panel associated with an accordion header is visible, and if the accordion does not permit the panel to be collapsed, + the header button element has aria-disabled set to true.
    • +
  • Each accordion header button is wrapped in an element with role heading that has a value set for aria-level that is appropriate for the information architecture of the page. + If the native host language has an element with an implicit heading and aria-level, such as an HTML heading tag, a native host language element may be used. + The button element is the only element inside the heading element. + That is, if there are other visually persistent elements, they are not included inside the heading element.
    • +
+
+ +
+

Example

+

Accordion Example: demonstrates a form divided into three sections using an accordion to show one ssection at a time.

+
diff --git a/examples/accordion/accordion1.html b/examples/accordion/accordion1.html new file mode 100644 index 0000000000..f5d0c18c1c --- /dev/null +++ b/examples/accordion/accordion1.html @@ -0,0 +1,277 @@ + + + + + + +Accordion | WAI-ARIA Authoring Practices 1.1 + + + + + + + + + + + + + + +
+

Accordion

+ +

+ The below example section contains a personal information input form divided into 3 sections + that demonstrates the design pattern for accordion. +

+ +
+

Example

+
+
+
+
+
+ +
+ +
+ +
+ +
+ +
+ +
+
+
+
+
+ +
+

Accessibility Features

+

Please replace this content with a list of accessibility features + demonstrated in this implementation, such as:

+
    +
  • ARIA roles
    • +
  • property and state information
    • +
  • Event handlers
    • +
  • tabindex values
    • +
+
+ +
+

Keyboard Support

+ + + + + + + + + + + + + + + + + + + + + + +
KeyFunction
+ key 1 + Key 1 action
+ key 2 + Key 2 action
+ key 3 + Key 3 action
+
+ +
+

ARIA Roles, Properties, and States

+ + + + + + + + + + + + + + + + + + + + + + + + +
RoleProperty/StateElementUsage
+ role + + element X + +
    +
  • Identify element with the role behavior +
    • +
+
+ aria-xxxxx + + X[role="yyy"] element + +
    +
  • Purpose of aria properties or aria states within example
    • +
+
+
+ +
+

Javascript and CSS Source Code

+ +
+ +
+

HTML Source Code

+
+ + +
+ +
+ + + diff --git a/examples/accordion/css/OpenSans-Bold-webfont.eot b/examples/accordion/css/OpenSans-Bold-webfont.eot new file mode 100644 index 0000000000..5d20d91633 Binary files /dev/null and b/examples/accordion/css/OpenSans-Bold-webfont.eot differ diff --git a/examples/accordion/css/OpenSans-Bold-webfont.svg b/examples/accordion/css/OpenSans-Bold-webfont.svg new file mode 100644 index 0000000000..3ed7be4bc5 --- /dev/null +++ b/examples/accordion/css/OpenSans-Bold-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/accordion/css/OpenSans-Bold-webfont.ttf b/examples/accordion/css/OpenSans-Bold-webfont.ttf new file mode 100644 index 0000000000..2109c958e3 Binary files /dev/null and b/examples/accordion/css/OpenSans-Bold-webfont.ttf differ diff --git a/examples/accordion/css/OpenSans-Bold-webfont.woff b/examples/accordion/css/OpenSans-Bold-webfont.woff new file mode 100644 index 0000000000..1205787b0e Binary files /dev/null and b/examples/accordion/css/OpenSans-Bold-webfont.woff differ diff --git a/examples/accordion/css/OpenSans-Italic-webfont.eot b/examples/accordion/css/OpenSans-Italic-webfont.eot new file mode 100644 index 0000000000..0c8a0ae06e Binary files /dev/null and b/examples/accordion/css/OpenSans-Italic-webfont.eot differ diff --git a/examples/accordion/css/OpenSans-Italic-webfont.svg b/examples/accordion/css/OpenSans-Italic-webfont.svg new file mode 100644 index 0000000000..e1075dcc24 --- /dev/null +++ b/examples/accordion/css/OpenSans-Italic-webfont.svg @@ -0,0 +1,1830 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/accordion/css/OpenSans-Italic-webfont.ttf b/examples/accordion/css/OpenSans-Italic-webfont.ttf new file mode 100644 index 0000000000..12d25d9a73 Binary files /dev/null and b/examples/accordion/css/OpenSans-Italic-webfont.ttf differ diff --git a/examples/accordion/css/OpenSans-Italic-webfont.woff b/examples/accordion/css/OpenSans-Italic-webfont.woff new file mode 100644 index 0000000000..ff652e6435 Binary files /dev/null and b/examples/accordion/css/OpenSans-Italic-webfont.woff differ diff --git a/examples/accordion/css/OpenSans-Light-webfont.eot b/examples/accordion/css/OpenSans-Light-webfont.eot new file mode 100644 index 0000000000..14868406aa Binary files /dev/null and b/examples/accordion/css/OpenSans-Light-webfont.eot differ diff --git a/examples/accordion/css/OpenSans-Light-webfont.svg b/examples/accordion/css/OpenSans-Light-webfont.svg new file mode 100644 index 0000000000..11a472ca8a --- /dev/null +++ b/examples/accordion/css/OpenSans-Light-webfont.svg @@ -0,0 +1,1831 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/accordion/css/OpenSans-Light-webfont.ttf b/examples/accordion/css/OpenSans-Light-webfont.ttf new file mode 100644 index 0000000000..63af664cde Binary files /dev/null and b/examples/accordion/css/OpenSans-Light-webfont.ttf differ diff --git a/examples/accordion/css/OpenSans-Light-webfont.woff b/examples/accordion/css/OpenSans-Light-webfont.woff new file mode 100644 index 0000000000..e786074813 Binary files /dev/null and b/examples/accordion/css/OpenSans-Light-webfont.woff differ diff --git a/examples/accordion/css/anton-webfont.eot b/examples/accordion/css/anton-webfont.eot new file mode 100644 index 0000000000..3fd7894cd4 Binary files /dev/null and b/examples/accordion/css/anton-webfont.eot differ diff --git a/examples/accordion/css/anton-webfont.svg b/examples/accordion/css/anton-webfont.svg new file mode 100644 index 0000000000..442f52ce5f --- /dev/null +++ b/examples/accordion/css/anton-webfont.svg @@ -0,0 +1,923 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/accordion/css/anton-webfont.ttf b/examples/accordion/css/anton-webfont.ttf new file mode 100644 index 0000000000..8b0ca78ae2 Binary files /dev/null and b/examples/accordion/css/anton-webfont.ttf differ diff --git a/examples/accordion/css/anton-webfont.woff b/examples/accordion/css/anton-webfont.woff new file mode 100644 index 0000000000..232d0192ff Binary files /dev/null and b/examples/accordion/css/anton-webfont.woff differ diff --git a/examples/accordion/css/customize.css b/examples/accordion/css/customize.css new file mode 100644 index 0000000000..6a244ad5a2 --- /dev/null +++ b/examples/accordion/css/customize.css @@ -0,0 +1,30 @@ + +#accordionGroup dt { + position: relative; + text-transform: uppercase; + background: #63B7C2; + padding: 0.3em 0.5em; + margin-bottom: 1px; +} +#accordionGroup dd { + text-align: center; + background: #FFF; +} + #accordionGroup dd img {width: 150px; vertical-align: middle;} + +#accordionGroup div.content {padding: 1rem;} + +.accAccordion, a.accAccordion:link, a.accAccordion:visited { + display: block; + font-size: 100%; + text-align: left; + text-decoration: none; + color: #000; + background: transparent url(../img/accordion/sprite.svg) right 0.35em no-repeat; + padding: 0.3em 0.5em; + cursor: pointer; +} + +.accAccordion.open, .accAccordion.open:link, .accAccordion.open:visited { + background-position: right -119px; +} diff --git a/examples/accordion/css/global.css b/examples/accordion/css/global.css new file mode 100644 index 0000000000..2184beb26d --- /dev/null +++ b/examples/accordion/css/global.css @@ -0,0 +1,477 @@ + +/* CSS index: + RESET + DEFAULT VALUES + PAGE STRUCTURE + FORMS + NAVIGATION + SPECIFICS + PRINT STYLES + MEDIA QUERIES +*/ + +/* ------------------------------ RESET ---------------------------- */ + +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, font, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, main, figure, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td { + margin: 0; + padding: 0; + border: 0; +} + +article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section { + display: block; +} + +body {overflow-y: scroll;} + + +/* --------------------------------------------------------------------------- */ +/* ----------------------------- DEFAULT VALUES ------------------------------ */ +/* --------------------------------------------------------------------------- */ + +body { + font: 100%/1 Frutiger, "Frutiger Linotype", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #2E3135; +} + +h1 { + font: normal 5.5vw/1.2 Frutiger, "Frutiger Linotype", "Gill Sans", "Gill Sans MT", "DejaVu Sans Condensed", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; + text-transform: capitalize; + color: #CCC; +} + h1 img {width: 50px; vertical-align: middle;} + h1 strong { + font-weight: normal; + color: #C13836; + } + h1 a, h1 a:link, h1 a:visited { + text-decoration: none; + color: #FFF; + background: transparent; + } + +h2 { + font-size: 1.5em; + line-height: 1.3; + font-weight: normal; + text-transform: uppercase; + color: #C13836; + margin: 0 0 1em; +} + h2 small {display: block;} + + +h3 { + font-size: 1.8em; + font-weight: normal; + color: #2E3135; + margin: 1.5em 0 0.5em; +} + aside section h3 {margin: 0 0 0.5em;} + +p, li, dt, dd {font-size: 0.9em; line-height: 1.45;} + +li li {font-size: 100%;} + +a, a:link, a:visited { + text-decoration: none; + color: #000; + background: #F2D3A1; +} +a:hover { + text-decoration: underline; + background: transparent; +} + +*:focus { + color: #000; + background: #FC0; +} + +img {max-width: 100%; border: none;} + +button {border: none; cursor: pointer;} + +code { + font-size: 110%; + color: #000; + background: #E4E4E4; +} +code.block { + display: block; + color: #000; + background: #E4E4E4; + padding: 1rem; + margin: 1rem 0; +} + +code.js, code.html, code.css {display: inline;} + +kbd { + font-size: 110%; + text-transform: uppercase; + padding: 0 0.3em; + border: 2px solid #2E3135; + border-radius: 2px; +} + kbd kbd {padding: 0; border: none;} + + kbd[class] { + border: none; + } + kbd[class]::before { + display: inline-block; + line-height: 1; + padding: 0 0.3em 0.2em; + margin-right: 0.5em; + border: 2px solid #2E3135; + border-radius: 2px; + vertical-align: top; + } + kbd.left::before {content: "\2190";} + kbd.right::before {content: "\2192";} + kbd.up::before {content: "\2191";} + kbd.down::before {content: "\2193";} + kbd.home::before {content: "\21E4";} + kbd.end::before {content: "\21E5";} + + +/* --------------------------------------------------------------------------- */ +/* ----------------------------- PAGE STRUCTURE ------------------------------ */ +/* --------------------------------------------------------------------------- */ + +#container {} + +header { + position: relative; + color: #FFF; + background: #2E3135; + background-image: linear-gradient(rgba(0,0,0,.5), transparent); + padding: 0.5rem 5%; +} + +main, div.apiDocumentationContentSection { + background-color: #F7F7F7; + padding: 2rem 5%; +} + +aside {color: #000; background: #E1E1E1; padding: 2rem 5%;} + +p.baseline {font-size: 0.75em; margin-top: 1.5em;} +p.logo {position: absolute; top: 2rem; left: 50%; width: 100px; margin-left: -50px;} + + p.logo a {background: transparent;} + + +/* --------------- FOOTER --------------- */ + +footer {margin: 1rem 0 2rem; text-align: center;} +p.copyright { + font-size: 0.7em; + text-transform: uppercase; + color: #FFF; + background: transparent; + margin-top: 1rem; +} +footer p:last-child { + font-size: 0.7em; + margin-top: 0.5em; + color: #E0E0E0; +} + footer p:last-child a, footer p:last-child a:link { + text-decoration: underline; + color: #FFF; + background: transparent none repeat scroll 0% 0%; + } + +ul.policies li { + display: inline-block; + position: relative; + list-style-type: none; +} + ul.policies li::after { + position: absolute; + top: 0.7em; + right: -0.35em; + display: block; + content: ""; + width: 5px; + height: 5px; + background: #E2A037; + border-radius: 5px; + } + ul.policies li:last-child::after {content: none;} + +footer button { + color: #FFF; + background: transparent; + border: none; +} + +/* --------------------------------------------------------------------------- */ +/* ---------------------------------- FORMS ---------------------------------- */ +/* --------------------------------------------------------------------------- */ + +form p + p {margin-top: 1em;} + +fieldset {margin-bottom: 2rem;} + +legend { + font: normal 1.5em/1 antonregular, Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; + text-transform: uppercase; + padding-bottom: 1.5rem; +} + +label { + display: block; + font-weight: bold; + padding-bottom: 0.1em; +} + +input { + font-size: 100%; + padding: 2px 3px; + border: 1px solid #C0C0C0; + border-radius: 2px; +} + +.mandatory-info { + text-align: right; +} + +.buttons-bar {text-align: center; margin: 2rem 0 0;} + .buttons-bar input {margin: 0 0.5rem;} + + + .buttons-bar button { + text-transform: uppercase; + color: #FFF; + background: #286278; + padding: 0.3em 0.5em; + border: none; + border-radius: 3px; + box-shadow: 0 1px 2px rgba(0,0,0,.7); + transition: border-radius; + -webkit-transition: border-radius; + } + +input[type=submit], input[type=reset] { + font-size: 100%; + text-transform: uppercase; + color: #FFF; + background: #49182E; + padding: 0.3em 0.5em; + border: none; + box-shadow: 0 1px 2px rgba(0,0,0,.7); + border-radius: 2px; + cursor: pointer; +} +input[type=reset] { + color: #FFF; + background: #555; +} + +input[type=submit]:hover, input[type=reset]:hover { + color: #FFF; + background: #286278; + box-shadow: none; + border-radius: 0; +} + +input[type=submit]:focus {background: #F60;} + + +/* --------------------------------------------------------------------------- */ +/* -------------------------------- NAVIGATION ------------------------------- */ +/* --------------------------------------------------------------------------- */ + +nav {text-align: center; margin-top: 2rem;} + +nav a.permalink, nav a.permalink:link, nav a.permalink:visited { + position: absolute; + left: -9000px; + width: 1px; + padding: 0; +} + +nav h2, aside h2 { + position: absolute; + clip: rect(1px 1px 1px 1px); /* IE6, IE7 */ + clip: rect(1px, 1px, 1px, 1px); + clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); + padding: 0; + border: 0; + height: 1px; + width: 1px; + overflow: hidden; + z-index: -1000; +} + +nav li {list-style-type: none;} +nav button, nav a, nav a:link, nav a:visited { + display: block; + width: 100%; + font: bold 1.2em/1 Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; + text-transform: uppercase; + color: #FFF; + background: #444A51; + padding: 0.5em 0; + border: none; + border-top: 1px solid #CCC; +} +nav button:hover, nav a:hover { + color: #FFF; + background: #C13836; + text-decoration: none; +} + +nav li.active button, nav li.active a, nav li.active a:link, nav li.active a:visited { + color: #FFF; + background: #C13836; +} + + +/* --------------------------------------------------------------------------- */ +/* ------------------------------------- ASIDE ------------------------------- */ +/* --------------------------------------------------------------------------- */ + +section + section {margin-top: 2rem;} + + section.honors h3 a { + display: block; + max-width: 220px; + background: #FFF; + padding: 2rem; + margin: 1rem 0; + } + section.honors h3 img {vertical-align: baseline;} + +section.at-guide { + min-height: 90px; + color: #FFF; + background: #444A51 url(../img/atree.svg) 1rem 0.8rem no-repeat; + padding: 1rem 1rem 1rem 120px; +} + +section.at-guide h3 {margin-bottom: 0.5em;} +section.at-guide h3, section.at-guide h3 a { + color: #FFF; + background: #444A51; +} + +section.at-guide p a {display: block; width: 7em;} + + + +/* --------------------------------------------------------------------------- */ +/* ---------------------------------- ARTICLES/SECTIONS ---------------------- */ +/* --------------------------------------------------------------------------- */ + +article {max-width: 50em;} + +article > h2:first-of-type {margin: 3rem 0 4rem;} +article > .hd:first-of-type h3 {margin-top: 0;} + +article p + p {margin-top: 0.8em;} +article ul, section ul, article ol, section ol {margin: 1em;} +article li, section li {margin: 0 0 0.8em 0;} + + +/* Notes */ + +.note { + padding-top: 1rem; + margin-top: 2rem; + border-top: 1px dotted #2E3135; +} + + +/* --------------------------------------------------------------------------- */ +/* ---------------------------------- UTILITIES ------------------------------ */ +/* --------------------------------------------------------------------------- */ + + + +/* --- KEYBOARD INSTRUCTIONS --- */ + +/* Keyboard aacessible */ + +.keyboard {min-height: 4em; background: url(../img/keyboard.svg) 0 0 no-repeat;} + +.keyboard p {padding: 0.5em 0 1rem 80px;} +.keyboard ul {padding: 1em;} +.keyboard li {padding: 0.3em 0;} + + +/* --------------------------------------------------------------------------- */ +/* ---------------------------------- SPECIFICS ------------------------------ */ +/* --------------------------------------------------------------------------- */ + +/* --- DEMO BLOCK --- */ + +div.demo-block { + clear: both; + padding: 1rem 0; + margin-bottom: 2rem; + border-top: 2px dotted #63B7C2; + border-bottom: 2px dotted #63B7C2; +} + + div.demo-block h3 {margin: 0 0 0.5em;} + +.hidden {display: none;} + +/* --------------------------------------------------------------------------- */ +/* ---------------------------------- QUERIES -------------------------------- */ +/* --------------------------------------------------------------------------- */ + +div.noresp {min-width: 1000px;} + +@media screen and (min-width: 400px) { + .keyboard {padding: 0 0 0 80px;} + .keyboard p {padding: 1rem 0 0;} +} + +@media screen and (min-width: 800px) { + h1 { + position: relative; + top: -1em; + font-size: 1.5em; + white-space: nowrap; + -webkit-transform-origin: bottom right; + -webkit-transform: rotate(-90deg); + -ms-transform-origin: bottom right; + -ms-transform: rotate(-90deg); + transform-origin: bottom right; + transform: rotate(-90deg); + } + #coding-arena { + -webkit-display: flex; + -ms-display: flex; + display: flex; + } + header { + margin-left: -18.5em; + padding: 0 0.5em 0 0; + } + main { + -webkit-flex: 1 1 50%; + -ms-flex: 1 1 50%; + flex: 1 1 50%; + min-height: 22em; + } +} + + +@media screen and (min-width: 1200px) { + div.demo-block {float: left; width: 55%;} + div.keyboard {float: right; width: 30%;} + div.noresp div.demo-block, div.noresp div.keyboard {float: none; width: auto;} +} diff --git a/examples/accordion/css/opensans-regular-webfont.eot b/examples/accordion/css/opensans-regular-webfont.eot new file mode 100644 index 0000000000..6bbc3cf58c Binary files /dev/null and b/examples/accordion/css/opensans-regular-webfont.eot differ diff --git a/examples/accordion/css/opensans-regular-webfont.svg b/examples/accordion/css/opensans-regular-webfont.svg new file mode 100644 index 0000000000..25a3952340 --- /dev/null +++ b/examples/accordion/css/opensans-regular-webfont.svg @@ -0,0 +1,1831 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/accordion/css/opensans-regular-webfont.ttf b/examples/accordion/css/opensans-regular-webfont.ttf new file mode 100644 index 0000000000..c537f8382a Binary files /dev/null and b/examples/accordion/css/opensans-regular-webfont.ttf differ diff --git a/examples/accordion/css/opensans-regular-webfont.woff b/examples/accordion/css/opensans-regular-webfont.woff new file mode 100644 index 0000000000..e231183dce Binary files /dev/null and b/examples/accordion/css/opensans-regular-webfont.woff differ diff --git a/examples/accordion/img/accordion/left.png b/examples/accordion/img/accordion/left.png new file mode 100644 index 0000000000..595680db4c Binary files /dev/null and b/examples/accordion/img/accordion/left.png differ diff --git a/examples/accordion/img/accordion/right.png b/examples/accordion/img/accordion/right.png new file mode 100644 index 0000000000..7e9f6cf182 Binary files /dev/null and b/examples/accordion/img/accordion/right.png differ diff --git a/examples/accordion/img/accordion/sprite.svg b/examples/accordion/img/accordion/sprite.svg new file mode 100644 index 0000000000..810c2afb57 --- /dev/null +++ b/examples/accordion/img/accordion/sprite.svg @@ -0,0 +1,53 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/accordion/img/keyboard.svg b/examples/accordion/img/keyboard.svg new file mode 100644 index 0000000000..de56462e00 --- /dev/null +++ b/examples/accordion/img/keyboard.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/accordion/img/sprite.svg b/examples/accordion/img/sprite.svg new file mode 100644 index 0000000000..cd5cb50c78 --- /dev/null +++ b/examples/accordion/img/sprite.svg @@ -0,0 +1,68 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/accordion/js/helpers.js b/examples/accordion/js/helpers.js new file mode 100644 index 0000000000..4964224fa6 --- /dev/null +++ b/examples/accordion/js/helpers.js @@ -0,0 +1,340 @@ +/* +Helper JavaScript functions Lib +Bryan Garaventa, 07/17/2016 +*/ + +var query = function(s, o, fn){ +if (!o) o = document; +if (typeof fn == 'function') +return forEach(o.querySelectorAll(s), fn); +else +return o.querySelectorAll(s); +}, + +forEach = function(obj, fn) { +var a = obj; +if (typeof fn != 'function') return obj; +if (obj && obj.nodeType === 1) a = [obj]; +if (isArray(a) && a.length){ +for (var i = 0; i < a.length; i++){ +fn.apply(a[i], [i, a[i]]); +} +} +else if (typeof a == 'object'){ +for (var n in a){ +fn.apply(a, [n, a[n]]); +} +} +return obj; +}, + +bind = function( obj, type, fn ) { +if ( obj.attachEvent ) { +obj["e"+type+fn] = fn; +obj[type+fn] = function() { obj["e"+type+fn]( window.event ); } +obj.attachEvent( "on"+type, obj[type+fn] ); +} else if (obj.addEventListener) +obj.addEventListener( type, fn, false ); +return obj; +}, + +unbind = function( obj, type, fn ) { +if ( obj.detachEvent ) { +obj.detachEvent( "on"+type, obj[type+fn] ); + obj[type+fn] = null; +} else if (obj.removeEventListener) +obj.removeEventListener( type, fn, false ); +return obj; +}, + +getEl = function(e){ +if (document.getElementById) return document.getElementById(e); +else if (document.all) return document.all[e]; +else return null; +}, + +getElsByTag = function(tag, root){ +var l = [], +t = tag || '*', +r = root || document; +if (r.getElementsByTagName) +l = r.getElementsByTagName(t); +if (!l || !l.length){ +if (t === '*' && r.all) l = r.all; +else if (r.all && r.all.tags) l = r.all.tags(t); +} +return l; +}, + +createEl = function(t){ +var o = document.createElement(t); +if (arguments.length === 1) return o; +if (arguments[1]) setAttr(o, arguments[1]); +if (arguments[2]) css(o, arguments[2]); +if (arguments[3]) addClass(o, arguments[3]); +if (arguments[4]) o.appendChild(createText(arguments[4])); +return o; +}, + +createText = function(s){ +return document.createTextNode(s); +}, + +getAttr = function(e, n){ +if (!e) return null; +var a; +if (e.getAttribute) +a = e.getAttribute(n); +if (!a && e.getAttributeNode) +a = e.getAttributeNode(n); +if (!a && e[n]) +a = e[n]; +return a; +}, + +remAttr = function(e, n){ +if (!e) return false; +var a = isArray(n) ? n : [n]; +for (var i = 0; i < a.length; i++){ +if (e.removeAttribute) +e.removeAttribute(a[i]); +} +return e; +}, + +setAttr = function(obj, name, value){ +if (!obj) return null; +if (typeof name === 'string'){ +if (obj.setAttribute) +obj.setAttribute(name, value); +} else if (typeof name === 'object'){ +for (n in name){ +if (obj.setAttribute) +obj.setAttribute(n, name[n]); +} +} +return obj; +}, + +css = function(obj, p, v){ +if (!obj) return null; +if (obj.nodeName && typeof p === 'string' && !v) return obj.style && obj.style[p] ? obj.style[p] : xGetComputedStyle(obj, p); +var o = isArray(obj) ? obj : [obj], +check = 'top left bottom right width height'; +for (var i = 0; i < o.length; i++){ +if (typeof p === 'string'){ +try { +o[i].style[xCamelize(p)] = check.indexOf(p) !== -1 && typeof v === 'number' ? v + 'px' : v; +} catch (ex) { +/*@cc_on +@if (@_jscript_version <= 5.7) // IE7 and down +if (p != 'display') continue; +var s = '', +t = o[i].nodeName.toLowerCase(); +switch(t){ +case 'table' : +case 'tr' : +case 'td' : +case 'li' : +s = 'block'; +break; +case 'caption' : +s = 'inline'; +break; +} +o[i].style[p] = s; +@end @*/ +} +} else if (typeof p === 'object'){ +for (var a = 1; a < arguments.length; a++){ +for (var n in arguments[a]){ +try { +o[i].style[xCamelize(n)] = check.indexOf(n) !== -1 && typeof arguments[a][n] === 'number' ? arguments[a][n] + 'px' : arguments[a][n]; +} catch (ex) { +/*@cc_on +@if (@_jscript_version <= 5.7) // IE7 and down +if (n != 'display') continue; +var s = '', +t = o[i].nodeName.toLowerCase(); +switch(t){ +case 'table' : +case 'tr' : +case 'td' : +case 'li' : +s = 'block'; +break; +case 'caption' : +s = 'inline'; +break; +} +o[i].style[n] = s; +@end @*/ +} +} +} +} +} +return obj; +}, + +trim = function(str){ +return str.replace(/^\s+|\s+$/g, ''); +}, + +isArray = function(v){ +return v && typeof v === 'object' && typeof v.length === 'number' && typeof v.splice === 'function' && !(v.propertyIsEnumerable('length')); +}, + +inArray = function(search, stack){ +if (stack.indexOf) return stack.indexOf(search); +for (var i = 0; i < stack.length; i++){ +if (stack[i] === search) return i; +} +return -1; +}, + +hasClass = function(obj, cn){ +if (!obj || !obj.className) return false; +var names = cn.split(' '), +i = 0; +for (var n = 0; n < names.length; n++){ +if (obj.className.indexOf(names[n]) !== -1) i += 1; +} +if (i === names.length) return true; +return false; +}, + +addClass = function(obj, cn){ +if (!obj) return null; +var o = isArray(obj) ? obj : [obj], +names = cn.split(' '); +for (var i = 0; i < o.length; i++){ +for (var n = 0; n < names.length; n++){ +if (!hasClass(o[i], names[n])){ +o[i].className = trim(o[i].className + ' ' + names[n]); +} +} +} +return obj; +}, + +remClass = function(obj, cn){ +if (!obj) return null; +var o = isArray(obj) ? obj : [obj], +names = cn.split(' '); +for (var i = 0; i < o.length; i++){ +if (o[i].nodeType === 1 && o[i].className){ +for (var n = 0; n < names.length; n++){ +var classes = o[i].className.split(' '); +var a = inArray(names[n], classes); +if (a !== -1){ +classes.splice(a, 1); +if (classes.length) o[i].className = trim(classes.join(' ')); +else o[i].className = ''; +} +} +} +} +return obj; +}, + +firstChild = function(e, t){ +var e = e ? e.firstChild : null; +while(e){ +if (e.nodeType === 1 && (!t || t.toLowerCase() === e.nodeName.toLowerCase())) break; +e = e.nextSibling; +} +return e; +}, + +lastChild = function(e, t){ +var e = e ? e.lastChild : null; +while(e){ +if (e.nodeType === 1 && (!t || t.toLowerCase() === e.nodeName.toLowerCase())) break; +e = e.previousSibling; +} +return e; +}, + +nextSib = function(e, t){ +var e = e ? e.nextSibling : null; +while(e){ +if (e.nodeType === 1 && (!t || t.toLowerCase() === e.nodeName.toLowerCase())) break; +e = e.nextSibling; +} +return e; +}, + +prevSib = function(e, t){ +var e = e ? e.previousSibling : null; +while(e){ +if (e.nodeType === 1 && (!t || t.toLowerCase() === e.nodeName.toLowerCase())) break; +e = e.previousSibling; +} +return e; +}, + +getClosest = function(start, targ){ +while(start){ +start = start.parentNode; +if (typeof targ === 'string'){ +if (start.nodeName.toLowerCase() === targ.toLowerCase()) return start; +} else if (targ.nodeType === 1){ +if (start == targ) return start; +} +} +return null; +}, + +insertBefore = function(f, s){ +if (!f) return s; +f.parentNode.insertBefore(s, f); +return s; +}, + +insertAfter = function(f, s){ +if (!f) return s; +if (nextSib(f)) f.parentNode.insertBefore(s, nextSib(f)); +else f.parentNode.appendChild(s); +return s; +}, + +// X Lib functions + +xCamelize = function(cssPropStr){ +var i, c, a, s; +a = cssPropStr.split('-'); +s = a[0]; +for (i=1; i