Merge pull request #5 from Brightspace/dbatiste/unique-id

Dbatiste/unique
BrightspaceUI · Jul 29, 2016 · f667e1e · f667e1e
2 parents 5b72959 + b8ef1ad
commit f667e1e
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -29,10 +29,13 @@ Include the [webcomponents.js](http://webcomponents.org/polyfills/) "lite" polyf
 ```javascript
 // returns null or the closest ancestor that fulfills the specified predicate fxn
 D2L.Dom.findComposedAncestor(node, predicate);
+
 // gets the composed children (including shadow children & distributed children)
 D2L.Dom.getComposedChildren(element);
+
 // gets the composed parent (including shadow host & insertion points)
 D2L.Dom.getComposedParent(node);
+
 // returns true/false whether the specified ancestorNode is an ancestor of node
 D2L.Dom.isComposedAncestor(ancestorNode, node);
 ```
@@ -42,12 +45,16 @@ D2L.Dom.isComposedAncestor(ancestorNode, node);
 ```javascript
 // get first focusable child or descendant
 D2L.Dom.Focus.getFirstFocusableDescendant(element);
+
 // get last focusable child or descendant
 D2L.Dom.Focus.getLastFocusableDescendant(element);
+
 // get the next focusable child, sibling, etc.
 D2L.Dom.Focus.getNextFocusable(element);
+
 // get the previous focusable child, sibling, etc.
 D2L.Dom.Focus.getPreviousFocusable(element);
+
 // check is focusable (tabindex or white-listed elements)
 D2L.Dom.Focus.isFocusable(element);
 ```
@@ -60,6 +67,13 @@ D2L.Dom.Focus.isFocusable(element);
 D2L.Dom.Visibility.isVisible(element);
 ```
 
+**D2L.Id**
+
+```javascript
+// gets a unique indexed id (for lifetime of page)
+D2L.Id.getUniqueId();
+```
+
 ### Usage in Production
 
 In production, it's recommended to use a build tool like [Vulcanize](https://github.com/Polymer/vulcanize) to combine all your web components into a single import file. [More from the Polymer Docs: Optimize for Production](https://www.polymer-project.org/1.0/tools/optimize-for-production.html)...

diff --git a/d2l-id.html b/d2l-id.html
@@ -0,0 +1,23 @@
+<script>
+(function() {
+	'use strict';
+
+	var Id = {
+
+		getUniqueId: function() {
+
+			if (window.D2L.Id._unique_index === undefined) {
+				window.D2L.Id._unique_index = 0;
+			}
+			window.D2L.Id._unique_index++;
+			return 'd2l-uid-' + window.D2L.Id._unique_index;
+
+		}
+
+	};
+
+	window.D2L = window.D2L || {};
+	window.D2L.Id = Id;
+
+})();
+</script>
diff --git a/test/id.html b/test/id.html
@@ -0,0 +1,29 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title>d2l-id tests</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+		<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+		<script src="../../web-component-tester/browser.js"></script>
+		<link rel="import" href="../d2l-id.html">
+	</head>
+	<body>
+
+		<script>
+
+			describe('d2l-id', function() {
+
+				describe('getUniqueId', function() {
+
+					it('gets different id each time called', function() {
+						expect(D2L.Id.getUniqueId()).not.to.equal(D2L.Id.getUniqueId());
+					});
+
+				});
+
+			});
+
+		</script>
+	</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -14,7 +14,8 @@
 			'dom-visibility.html',
 			'dom-visibility.html?dom-shadow',
 			'dom-focus.html',
-			'dom-focus.html?dom=shadow'
+			'dom-focus.html?dom=shadow',
+			'id.html'
 		]);
 		</script>
 	</body>