diff --git a/README.md b/README.md
index 3c7c0c41..7bcdfc65 100644
--- a/README.md
+++ b/README.md
@@ -481,6 +481,52 @@ should be added to the other styles when building:
.pipe(gulp.dest(outputPath));
});
+### Providing additional JavaScript
+
+To provide additional JavaScript for the StyleGuide pages, define its `'
+ ],
+ disableEncapsulation: true
+ ...
+ }))
+ .pipe(gulp.dest(outputPath));
+ });
+
+
+Include other needed scripts, such as libraries, into the same array:
+
+ extraHead: [
+ '',
+ ''
+ ]
+
+This way you can enrich the documented components with JavaScript. Keep in mind that you need to use `disableEncapsulation` parameter to make the components visible for the parent page JavaScript (otherwise they are encapsulated with shadowDOM).
+
+### onRendered event
+
+The components get visible onto the StyleGuide pages dynamically. This means that it takes some time to render them.
+
+In your JavaScript you need to operate components after they had been rendered. Catch `styleguide:onRendered` event on `window` for that:
+
+ $(window).bind("styleguide:onRendered", function(e) {
+ // do anything here
+ // use e.originalEvent.detail.elements to get elements
+ });
+
+This is useful when you need to initialize your components. As this kind of initializing is only needed on the StyleGuide pages, you can provide it with an additional file:
+
+ extraHead: [
+ '',
+ ''
+ ]
+
## Demo
Build demo style guide and start a server on port 3000
diff --git a/lib/app/js/directives/section.js b/lib/app/js/directives/section.js
index b5cc5ae5..cef65982 100644
--- a/lib/app/js/directives/section.js
+++ b/lib/app/js/directives/section.js
@@ -47,6 +47,18 @@ angular.module('sgApp')
$timeout(function() {
updateCurrentReference();
});
+
+ // Emit an event that an element is rendered
+ element.ready(function() {
+ var event = new CustomEvent('styleguide:onRendered', {
+ detail: {
+ elements: element
+ },
+ bubbles: true,
+ cancelable: true
+ });
+ $window.dispatchEvent(event);
+ });
}
};
});