nested: added nested accordion example. Fixed Readme

anvk · Aug 31, 2016 · 686855f · 686855f
1 parent 3f0a7e1
commit 686855f
Show file tree

Hide file tree

Showing 3 changed files with 155 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -27,6 +27,61 @@ var myAccordion = new A11yAccordion(options);
 **searchActionType** - "hide" or "collapse". Hide option hides/shows rows based on the search results. Collapse option collapses/uncollapses rows
 **onAreaShow** - custom callback which will be called after making visible an Accordion's area. Argument is jQuery DOM element for an area to become shown  
 **onAreaHide** - user defined callback which will be called after hiding an Accordion's area. Argument is jQuery DOM element for an area to become hidden  
+**hideEffectStyle** - Easing of jQuery slideUp() function  
+**classes** - Classes for the accordion element (look into Default Options to learn more)  
+**labels** - Default labels for the accordion element (look into Default Options to learn more)  
+**ids** - Default ids for the accordion element (look into Default Options to learn more)  
+
+### Default Options
+
+```javascript
+const defaults = {
+  constants,
+  parentSelector: undefined,
+  hideEffectStyle: 'linear',
+  speed: 300,
+  hiddenLinkDescription: '',
+  showSearch: true,
+  showOne: true,
+  searchActionType: constants.SEARCH_ACTION_TYPE_HIDE,
+  overallSearch: false,
+  onAreaShow: () => {},
+  onAreaHide: () => {},
+  classes: {
+    headerClass: 'a11yAccordionItemHeader',
+    accordionItemClass: 'a11yAccordionItem',
+    hiddenAreaClass: 'a11yAccordionHideArea',
+    showHeaderLabelClass: 'a11yAccordionItemHeaderLinkShowLabel',
+    hideHeaderLabelClass: 'a11yAccordionItemHeaderLinkHideLabel',
+    markedTextClass: 'a11yAccordion-markedText',
+    visibleAreaClass: 'visiblea11yAccordionItem',
+    noResultsDivClass: 'a11yAccordionNoResultsItem',
+    searchDivClass: 'a11yAccordionSearchDiv',
+    headerLinkClass: 'a11yAccordionItemHeaderLink',
+    headerTextClass: 'a11yAccordionItemHeaderText',
+    hiddenHeaderLabelDescriptionClass: 'a11yAccordionItemHeaderLinkHiddenLabel',
+    toggleClass: 'toggle',
+    triangleClass: 'a11yAccordion-triangle',
+    searchClass: 'a11yAccordionSearch',
+    accordionHeaderClass: `a11yAccordion-header`,
+    accordionHideAreaClass: `a11yAccordion-area`
+  },
+  labels: {
+    showHeaderLabelText: 'Show',
+    hideHeaderLabelText: 'Hide',
+    searchPlaceholder: 'Search',
+    noResultsText: 'No Results Found',
+    titleText: 'Type your query to search',
+    resultsMessage: 'Number of results found: ',
+    leaveBlankMessage: ' Please leave blank to see all the results.'
+  },
+  ids: {
+    noResultsDivID: `a11yAccordion-noResultsItem`,
+    searchDivID: `a11yAccordion-searchPanel`,
+    rowIdStringPrefix: `a11yAccordion-row-`
+  }
+};
+```
 
 ### Widget default options
 
@@ -99,9 +154,9 @@ var defaults = {
 
 > Boolean value which will make Accordion to show only 1 uncollapsed row at a time to the user if true
 
-#### el
+#### refs
 
-> JQuery element which contains DOM markup of the A11yAccordion
+> An object which contains reference to JQuery elements: el - which contains DOM markup of the A11yAccordion, accordionItems, accordionHideAreas, headers.
 
 ## Quick Start
 
@@ -214,7 +269,7 @@ Command will recreate CSS based on LESS file and place it into dist folder
 
 ## Release History
 
-* 2016-08-30   v0.4.1   Fixing code for nested accordions. Fixing focus for links which were not focused before. Do not apply search if search string was not changed. Fixing search for the case when string would match in header but not in body of the accordion item. Fixed some of the tests.  
+* 2016-08-30   v0.4.2   Fixing Readme. Fixing code for nested accordions. Fixing focus for links which were not focused before. Do not apply search if search string was not changed. Fixing search for the case when string would match in header but not in body of the accordion item. Fixed some of the tests. Adding nested accordion example.  
 * 2016-05-03   v0.4.0   Using ES6 instead of ES5. Some code refactoring and cleanup. Adding marking for found text. Adding an option to collapse/uncollapse row based on the search results.  
 * 2014-06-10   v0.3.1   Moving away from the french word "accordeon" and using "accordion" instead.  
 * 2014-06-03   v0.3.0   Refactored the whole component using ideas from the existing Gaia and FireFox components. Created the full Mocha+Chai test suit. Added new Grunt task for recreating CSS file in dist folder. Refactored and fixed issues in style sheets. Significantly improved example.html page. Hosted an example of the widget on my personal github page. Fixed couple of major bugs.  

diff --git a/examples/example.html b/examples/example.html
@@ -59,6 +59,28 @@
 
       accordion5.uncollapseRow(1);
 
+      // nested accordions
+      var accordion1a = new A11yAccordion({
+        parentSelector: '#accordion1a',
+        hiddenLinkDescription: 'row with data in the First Accordion',
+        showSearch: true,
+        searchActionType: 'collapse',
+        overallSearch: true,
+        showOne: false
+      });
+
+      var accordion2b = new A11yAccordion({
+        parentSelector: '#accordion2b',
+        hiddenLinkDescription: 'row with data in the First Accordion',
+        showSearch: true,
+        searchActionType: 'collapse',
+        overallSearch: true,
+        showOne: false
+      });
+
+      accordion1a.uncollapseRow(0);
+      accordion2b.uncollapseRow(0);
+
     };
   </script>
 
@@ -310,6 +332,80 @@ <h3>el</h3>
       </div>
     </li>
   </ul>
+
+  <h3 align="center">Nested accordions</h3>
+
+  <ul id="accordion1a" class="a11yAccordion a11yAccordion-light">
+    <li class="a11yAccordionItem">
+      <div class="a11yAccordionItemHeader">
+        <strong>Random Information</strong>
+      </div>
+      <div class="a11yAccordionHideArea">
+        <h2>My other content</h2>
+        <p>This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
+        <a href="##">This link is also accessible only when the collapsible area is visible.</a>
+
+        <ul id="accordion2b" class="a11yAccordion a11yAccordion-light">
+          <li class="a11yAccordionItem">
+            <div class="a11yAccordionItemHeader">
+              <strong>Random Information</strong>
+            </div>
+            <div class="a11yAccordionHideArea">
+              <h2>My other content</h2>
+              <p>This content is accessible by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
+              <a href="##">This link is also accessible only when the collapsible area is visible.</a>
+            </div>
+          </li>
+
+          <li class="a11yAccordionItem">
+            <div class="a11yAccordionItemHeader">
+              <strong>Dummy Text and Controls</strong>
+            </div>
+            <div class="a11yAccordionHideArea">
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+              <p>These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
+              <input type='test' placeholder='Please enter some info here' style='width: 20%' /><br /><br />
+              <input type='test' placeholder='Another control' />
+            </div>
+          </li>
+
+          <li class="a11yAccordionItem">
+            <div class="a11yAccordionItemHeader">
+              <strong>Header with image</strong>
+            </div>
+            <div class="a11yAccordionHideArea">
+              <img src="imgs/image.jpg" alt="example image for the presentation purposes with a description Y U NO COLLAPSE">
+            </div>
+          </li>
+        </ul>
+
+      </div>
+    </li>
+
+    <li class="a11yAccordionItem">
+      <div class="a11yAccordionItemHeader">
+        <strong>Dummy Text and Controls</strong>
+      </div>
+      <div class="a11yAccordionHideArea">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+
+        <p>These controls are accessible for interaction by Assistive Technology and Screen Readers only when the collapsible area is visible to the user.</p>
+        <input type='test' placeholder='Please enter some info here' style='width: 20%' /><br /><br />
+        <input type='test' placeholder='Another control' />
+      </div>
+    </li>
+
+    <li class="a11yAccordionItem">
+      <div class="a11yAccordionItemHeader">
+        <strong>Header with image</strong>
+      </div>
+      <div class="a11yAccordionHideArea">
+        <img src="imgs/image.jpg" alt="example image for the presentation purposes with a description Y U NO COLLAPSE">
+      </div>
+    </li>
+  </ul>
+
   <script type="text/javascript" src="../node_modules/jquery/dist/jquery.min.js"></script>
   <script type="text/javascript" src="../dist/js/a11yAccordion.js"></script>
 </body>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "a11yAccordion",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "description": "An accessible accordion widget. Building Web with accessibility in mind.",
   "author": "anvk",
   "contributors": [