-
Notifications
You must be signed in to change notification settings - Fork 13
AngularJS Extras Package Directives Usage
Home / Packages / AngularJS Extras
We recommend appending `data-` to any Stratus HTML data attributes to be most compatible with all browsers. e.g.: ng-model='model' could be written as data-ng-model='model'. For shorthand and readability sake, we will omit appending this from data attributes in this informational.
All widgets are actively under heavy development and options/usages are subject to possible changes.
Not intended for direct usage. This directive intends to provide basic logic for extending the Stratus Auto-Loader for various contextual uses.
Intended to add the DOM events that https://github.com/angular/angular.js/blob/master/src/ng/directive/ngEventDirs.js has missed. Such as:
- focusin
-
stratus-focusin (different than ng-focus) You can focus any element directly so long as you add tabindex="-1"
Otherwise, this will always detect inner children being focused or directly on just input fields as opposed to ng-focus
-
stratus-focusin (different than ng-focus) You can focus any element directly so long as you add tabindex="-1"
- focusout
- stratus-focusout (different than ng-blur) The opposite of stratus-focusin, as it will detect unfocus the current and children of the current element.
<div
stratus-focusin="functionToRunOnFocusIn();"
stratus-focusout="functionToRunOnFocusOut();"
></div>Intended to force an element to be the entire height of a page by adjusting the element's style `height`. Includes option checks to remove from it the height of other specified elements, for example those above or below it.
<div
stratus-full-height
full-height-minus-elements='["#header",".search-filter-top",".sf-toolbar"]'
></div>| Attribute | Type | Default | Description |
|---|---|---|---|
| full-height-minus-elements | string[] (element selectors) | [] | Set the element to retain 100% height of parent element (window/document by default). Also removes from itself the height of specified surrounding elements to maintain a proper. E.g.: `["#header-container"]` to have a 100% page height map minus the height of a header and toolbar. |
| full-height-reference-parent | string | 'document' | Which element should be referred to when processing the full-height of a page. Possible options being `document`, `window`, and any document query selector, e.g. `#body-container` |
Used by adding `stratus-src` to any Element, this directive is useful for altering any Element's background-image (css style) or src (attribute). Additionally, this may also be used to upscale an Sitetheory CDN derived image to a higher quality version based on the current size of the Element that it's loaded on.
Directive added on to any normal image to attempt to progressive-load a higher quality image from Sitetheory CDN
<img stratus-src src="https://domain.com/path/to/image.jpg"/><img
stratus-src
data-src="https://domain.com/path/to/image.jpg"
/><img stratus-src="https://domain.com/path/to/image.jpg"/><div
stratus-src
style="background-image: url(https://domain.com/path/to/image.jpg);background-position: center;"
></div><div
stratus-src="https://domain.com/path/to/image.jpg"
style="background-position: center;"
></div><img
stratus-src="https://domain.com/path/to/image.jpg"
stratus-src-version="false"
/><div
stratus-src="https://domain.com/path/to/image.jpg"
stratus-src-version="false"
style="background-position: center;"
></div>| Attribute | Type | Default | Description |
|---|---|---|---|
| stratus-src | string (url) | Sets the Url of a image to load as a `background-image` or `img` source. Parameter is not required. If a string is provided, it will take priority over the other attributes used. | |
| src | string (url) | Alternative to the above stratus-src. Can alternatively use attribute data-src to Avoid loading as normal image on DOM-load | |
| stratus-src-version |
boolean string |
If Specifically provided `false`, will disable the Progressive-Loading functionality and not attempt to find a larger sized image in a Sitetheory environment. This is useful for images that are not apart of the SiteTheory CDN. |
Used by adding `stratus-string-to-number` to Input Element, this directive is useful for altering/keeping a held model variable as purely a number, while giving the human user a formatted display such as being american comma delimited, forced decimal points, or prevention of non-number characters. Mostly intended for use on a Text type Input field, a human can enter normally unusable strings and they'll be converted into their number counterparts in the back, while removing the usable text.
The bare minimum needed to function will be the directive call and a angular model/variable to bind to. The following will display the inputted number `-123456789` as `-123456789.00`
<input
stratus-string-to-number
ng-model="object.pureNumberVariable"
type="text"
><input
stratus-string-to-number="comma"
positive="true"
integer="true"
ng-model="object.pureNumberVariable"
type="text"
>| Attribute | Type | Default | Description |
|---|---|---|---|
| stratus-string-to-number | string |
By Default, will simply display entries as a plain number. With the option `comma`, a numbers will be delimited with the america comma delimitation schema. |
|
| positive | boolean | false | The displayed and backend number will be forced to always be a positive number. Negatives will be strip out and converted to positive. |
| integer | boolean | false | The displayed and backend number will be forced to be a whole number. Decimals will be removed. |
This directive intends to handle binding of a model to convert value as timestamp to date, the value is persisted into ng-model still timestamp type.
<input
stratus-timestamp-to-date
ng-model="object.dateValue"
type="date"
>This directive intends to handle binding of a model to a function, triggered upon true
<span
stratus-trigger="$parent.itemTurnedTrue(selectedItem)"
ng-model="selectedItem"
></span>