https://github.com/semantic-org/module-examples
Annotated source of Semantic UI Module Format
https://github.com/semantic-org/module-examples
Last synced: 9 months ago
JSON representation
Annotated source of Semantic UI Module Format
- Host: GitHub
- URL: https://github.com/semantic-org/module-examples
- Owner: Semantic-Org
- Created: 2015-04-27T22:04:48.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-04-27T22:47:39.000Z (over 10 years ago)
- Last Synced: 2025-03-27T12:47:00.818Z (10 months ago)
- Language: JavaScript
- Homepage: http://semantic-org.github.io/Module-Examples/docs/module.html
- Size: 418 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# What's Here
This is the annotated source of the standard module format used to power UI modules in Semantic UI.
You can view the [annotated source](http://semantic-org.github.io/Module-Examples/docs/module.html) online.
## Standard Features
* Standardizes element lifecycle, initialize, bind events, instantiate, destroy, refresh, etc.
* Built in debug tools designed to make developer comments appear as traces during execution
* Built in performance logging that shows diffed time in milliseconds between debug logs
* Designed so that css selectors, metadata, regular expresions, even error messages are passed through as settings and user-editable
## Advanced Features
### Method Lookup
Method invocation automatically converts sentence case to camelCase or nested object during method lookup
```javascript
$('.component').component('set text', 'Foobar');
```
Internally matches against methods
```javascript
set: {
text: function(text) {
// do something
}
}
```
As well as
```javascript
setText: function(Text) {
// do something
}
```
### Mutation Observers
Elements use [DOM Mutation Observers](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver) to allow refreshing cached values after changes
```javascript
if('MutationObserver' in window) {
observer = new MutationObserver(function(mutations) {
module.debug('Element updated refreshing selectors');
module.refresh();
});
observer.observe(element, {
childList : true,
subtree : true
});
module.debug('Setting up mutation observer', observer);
}
```
## Building Docs
```bash
# to get docco
npm install -g docco
# to build
docco src/*.js --css src/css/docco
```