Socket
Socket
Sign inDemoInstall

uijet

Package Overview
Dependencies
0
Maintainers
1
Versions
5
Alerts
File Explorer

Advanced tools

npm Scripts
License

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.0.70 to 0.0.73

docs/api/bluebird.html
src/mixins/Positioned.js
src/modules/promises/bluebird.js
src/modules/router/_build-context.js

1

bower.json
{
"name": "uijet",
"version": "0.0.70",
"main": [

@@ -5,0 +4,0 @@ "src/adapters",

297

docs-src/api.md

@@ -5,7 +5,8 @@ # uijet

__Note:__ Every module documented here is supported. All others are considered pending for addition/removal.
__Note__: Every module documented here is supported. All others are considered pending for addition/removal.
### Config Options Reference
### Config Option Reference
* All `boolean`'s default to a falsy value (`undefined`).
* All options that allow a `function` value mean that it is possible to set a function that will return the real value to be set - in other words, lazily-computed options.
* All `function`'s are invoked in the context of the instance. Meaning `this` is always the instance.

@@ -22,4 +23,4 @@

* `bind_on_wake` - `boolean`: if `true` `dom_events` will be bound on every `wake()` and unbound on every `sleep()`. Otherwise they will be bound once on `init()`.
* `components` - `Array|function`: list of widget declarations to instantiate as child components of the instance.
* `type_class` - `string|Array`: list of class names to use on the instance's element and wrapper which define its type. Usually defined in the widget class definition.
* `components` - `Object[]|function`: list of widget declarations to instantiate as child components of the instance.
* `type_class` - `string|string[]`: list of class names to use on the instance's element and wrapper which define its type. Usually defined in the widget class definition.
* `extra_class` - `string`: extra classes to set on the instance element.

@@ -29,4 +30,2 @@ * `dont_wrap` - `boolean`: if `true` the instance element will never be wrapped in another element (wrapper) in cases where this is usually performed. In such case `this.$wrapper` is set to `this.$element`.

* `wrapper_class` - `string`: extra classes to set on the wrapper element.
* `position` - `string|Object|function`: used to position the instance. Usually handy for rapid prototyping, otherwise use plain CSS.
* `style` - `Object|function`: used for styling the instance's wrapper element. Usually handy for rapid prototyping or setting dynamic styles, otherwise use plain CSS.
* `signals` - `Object`: a map of signal names to handlers. A handler can either be a `function` or a `string`.

@@ -43,3 +42,4 @@ * `app_events` - `Object`: a map of event names to handlers. A handler can either be a `function` or a `string`.

* `prevent_default` - `boolean`: If `true` `preventDefault()` of the `click` event will be called.
* `disabled` - `boolean`: If `true` this instance will be initially disabled.
* `disabled` - `boolean|function`: If `true` this instance will be initially disabled.
* `activated` - `boolean|function`: If `true` this instance will be initially activated.

@@ -54,7 +54,8 @@ #### Overlay:

* `initial` - `string|Element|Element[]`: Initial child of the instance element to `select()` after initialization.
* `item_selector`: Specifies a selector for item elements. Defaults to `'li'`.
* `click_target`: Specifies a selector for the `click` event target inside the item element. `click()`s will only be delegated from it and to the containing item element.
* `multiselect`: If `true` the instance will behave as a multiselect.
* `align`: Adds an extra class to the instance element prefixed by `'align_'`, for controlling items alignment.
* `item_selector` - `string`: Specifies a selector for item elements. Defaults to `'li'`.
* `click_target` - `string`: Specifies a selector for the `click` event target inside the item element. `click()`s will only be delegated from it and to the containing item element.
* `multiselect` - `boolean`: If `true` the instance will behave as a multiselect.
* `align` - `string`: Adds an extra class to the instance element prefixed by `'align_'`, for controlling items alignment.
<!--
#### Form:

@@ -65,2 +66,3 @@

* `error_selector`: Query selector for finding elements containing error messages and emptying them. Defaults to `.error`.
-->

@@ -71,3 +73,2 @@ #### Data modules:

* `resource_name` - `string`: A key to use when referencing the model's attributes form the `context` object. Defaults to the `resource` option if it's a `string`, otherwise to `'<this.id>_data'`.
* `dont_merge_resource` - `boolean`: Whether to merge the model's attributes to the `context` object or just reference it from there using `resource_name`.
* `data_events` - `Object`: a map of event names to handlers. A handler can either be a `function` or a `string`, depending on the specific module.

@@ -79,4 +80,3 @@ * `dont_bind_data_events` - `boolean`: If `true` the component will not bind its `data_events`, which by default is done on initialization.

* `destroy_resource` - `boolean`: If `true`, when `destroy()`ing the component it will also call `destroy()` in its `resource`.
* `dont_remove_resource` - `boolean`: Unless `true`, if the component's `resource` is a `Model` in a `Collection` it will be removed once the component is `destroy()`ed.
* `sorting` - `Object`: Map of predefined `comparator` functions/strings that can be used to sort the resource.
* `remove_resource` - `boolean`: If `true` and `destroy_resource` is NOT `true`, if the component's `resource` is a `Model` in a `Collection` it will be removed once the component is `destroy()`ed.

@@ -89,4 +89,4 @@ #### Binding modules:

* `bind_options` - `Object`:
* `dont_bind` - `boolean`:
* `bind_options` - `Object`: Configuration options to pass to the `rivets.bind()` call.
* `dont_bind` - `boolean`: If `true` then `rivets.bind()` will not be called automatically on instance initialization.

@@ -105,18 +105,19 @@ #### Animation modules:

#### Engine modules:
#### Engine/lodash and Engine/underscore modules:
* `template` - `string`: .
* `compile_options` - `Object`: Configuration options to pass to `_.template()`.
#### Router/Backbone module:
* `route_name` - `string`:
* `route_name` - `string`: Will be used for the `route` and `route:name` events triggered by the router and history. Defaults to the `widget.id`.
#### Search modules:
* `search`:
* `search` - `Object`: Configuration options for the `SearchIndex` instance.
#### Deferred:
* `promise`:
* `promise` - `Promise|function`: Promise object, or a function that returns one, that once resolved invokes `wake()`. If it's a function it takes the `context` argument as param.
<!--
#### Dragged:

@@ -133,13 +134,18 @@

* `drag_contain`:
* `drag_element`:
* `drag_element`:
-->
#### Floated:
* `float_position`:
* `float_position` - `string|Object|function`: A CSS text (`'<property>: <value>'`) to set on the floated element when it appears. For multiple properties use an `Object`.
#### Layered:
* `keep_layer_awake`:
* `state`:
* `keep_layer_awake` - `boolean`: If `true` this instance will not be put to `.sleep()` when its sibling is `.awake()` and instead only put to the background.
<!--
#### Positioned:
* `position` - `string|Object|function`: used to position the instance. Usually handy for rapid prototyping, otherwise use plain CSS.
#### Preloaded:

@@ -150,12 +156,15 @@

* `preload_img_el`:
-->
#### Routed:
* `route`:
* `alias_routes`:
* `route` - `string`: The route's path to be used for waking the instance.
* `alias_routes` - `string[]`: List of strings of alias paths for this instance's `route`.
#### Scrolled:
* `grid_layout`:
* `horizontal` - `boolean`: Set to `true` if the scroll is horizontal.
* `grid_layout` - `boolean`: When `true` will prevent stretching `this.$element` to contain its content, as done for a `horizontal` instance.
<!--
#### Submitted:

@@ -168,72 +177,220 @@

* `submit_xhr_config`:
-->
#### Templated:
* `template_name`:
* `partials`:
* `partials_dir`:
* `dont_auto_fetch_template`:
* `insert_before`:
* `defer_images`:
* `template` - `string`: A raw template string to be used as the template for the instance. Do not use this option for putting a template string in your js source code! Only as an endpoint for hooking with loaded templates.
* `template_name` - `string`: If `template` is not set, this option will be used as the filename of the template to load. Defaults to `this.id>`. Used together with `uijet.options.templates_path` as prefix and `uijet.options.templates_extension` as suffix to create the path to the template.
* `partials` - `Object`: A map of partial names to their corresponding filename (or path). If the template and its partials are already fetched use the partials as values instead of paths.
* `partials_dir` - `string`: A common directory for looking up partials. This will be used together with `partials` to create the paths.
* `dont_auto_fetch_template` - `boolean`: When `true` templates will not be fetched automatically on `init()`.
* `insert_before` - `HTMLElement|string`: An element or a query selector to insert the rendered content before. By default content is appended to the end `this.$element`'s contents.
* `defer_images` - `boolean`: When `true` `this.$element` will be searched for images to preload and defer waking the instance after loading.
#### Dialog:
* `buttons`:
* `buttons` - `Object[]`: List of component declarations that will be created as children of this instance.
#### Modal:
* `buttons`:
* `underlay`:
* `underlay_type`:
* `buttons` - `Object[]`: List of component declarations that will be created as children of this instance.
* `underlay` - `Object`: Component declaration config overrides for the Overlay instance.
* `underlay_type` - `string`: The widget type to use for the Overlay instance. Defaults to `Overlay`.
#### DropmenuButton:
* `menu`:
* `menu_type`:
* `arrow`:
* `arrow_type`:
* `dont_close`:
* `menu` - `Object`: Component declaration config overrides for the menu List instance.
* `menu_type` - `string`: The widget type to use for the menu instance. Defaults to `List`.
* `arrow` - `boolean|Object`: Component declaration config overrides for the arrow Button instance. If set to `true` then the default component will be created. Otherwise it will not be creaed at all.
* `arrow_type` - `string`: The widget type to use for the arrow button instance. Defaults to `Button`.
* `dont_close` - `boolean`: If `true` the menu will not be closed once an option is selected.
#### Select:
* `menu`:
* `menu_type`:
* `content`:
* `menu` - `Object`: Component declaration config overrides for the menu List instance.
* `menu_type` - `string`: The widget type to use for the menu instance. Defaults to `List`.
* `content` - `string|HTMLElement|HTMLElement[]`: An element or selector for the content element to use. Created by uijet by default.
#### Slider:
* `min`:
* `max`:
* `step`:
* `handle`:
* `handle_type`:
* `vertical`:
* `initial`:
* `min` - `number`: Minimum possible value for the slider. Defaults to `0`.
* `max` - `number`: Maximum possible value for the slider. Defaults to `100`.
* `step` - `number`: Step to allow between possible values of the slider. Defaults to `1`.
* `handle` - `Object`: Component declaration config overrides for the handle Button instance.
* `handle_type` - `string`: The widget type to use for the handle button instance. Defaults to `Button`.
* `vertical` - `boolean`: If `true` this instance will be styled and behave as a vertical slider.
* `initial` - `number`: Initial value to use for instance. Defaults to `min` option.
#### Datepicker:
* `datelist`:
* `datelist_type`:
* `next`:
* `next_type`:
* `prev`:
* `prev_type`:
* `min_date`:
* `max_date`:
* `current_date`:
* `datelist` - `Object`: Component declaration config overrides for the date-list List instance.
* `datelist_type` - `string`: The widget type to use for the date-list instance. Defaults to `List`.
* `next` - `Object`: Component declaration config overrides for the next Button instance.
* `next_type` - `string`: The widget type to use for the next button instance. Defaults to `Button`.
* `prev` - `Object`: Component declaration config overrides for the prev Button instance.
* `prev_type` - `string`: The widget type to use for the prev button instance. Defaults to `Button`.
* `min_date` - `Date|string|number`: Minimum possible date for selection.
* `max_date` - `Date|string|number`: Maximum possible date for selection.
* `current_date` - `string|HTMLElement|HTMLElement[]`: element or selector for the element which will serve as the heading that contains current date.
### iScroll:
#### iScroll:
* `iscroll_options`:
* `iscroll_options` - `Object`: Configuration options for the IScroll instance constructor.
### jqScroll:
#### jqScroll:
* `jqscroll_options`:
* `jqscroll_options` - `Object`: Configuration options for the jqScroll instance constructor.
### jqScrollWheel:
#### jqScrollWheel:
* `jqscroll_options`:
* `jqscroll_options` - `Object`: Configuration options for the jqScroll instance constructor.
### Spin:
#### Spin:
* `spinner_options`:
* `spinner_options` - `Object`: Configuration options for the spinner instance constructor.
---------------------------------------------------------------------------------
### Signals Reference
* If a signal is marked as **_once_: Yes** it will be triggered only _ONCE_ until the end of a lifecycle method execution.
#### BaseWidget
* `post_init`: At end of `.init()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_wake`: At beginning of `.wake()`, after the `context` is updated.
* _arguments_: .
* _return_: If `false` then call to `.render()` will be skipped. Useful when all you want to do is update state.
* _once_: Yes.
* `post_wake`: At end of `.wake()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_render`: At beginning of `.render()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_appear`: At beginning of `.appear()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `post_appear`: At end of `.appear()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_sleep`: At beginning of `.sleep()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `post_sleep`: At end of `.sleep()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `post_disappear`: At end of `.disappear()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_destroy`: At beginning of `.destroy()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
#### Button
* `pre_click`: At beginning of `.click()`.
* _arguments_: The click Event object.
* _return_: If `false` then the click will not be published.
* _once_: No.
#### List
* `pre_select`: At beginning of `.click()`.
* _arguments_: `(selected, event)` - the wrapped selected HTMLElement and the click Event object.
* _return_: If `false` then the selection will be ignored not published, and `post_select` will not be triggered.
* _once_: No.
* `post_select`: At end of `.click()`.
* _arguments_: `(selected, event)` - the wrapped selected HTMLElement and the click Event object.
* _return_: Ignored.
* _once_: No.
#### Animation/uijet-transit module
* `pre_prepareelement`: At the beginning of `.prepareElement()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
* `pre_disappear`: At the beginning of `.disappear()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
#### Templated
* `pre_render`: At the beginning of `.render()`, _AFTER_ the new HTML content is generated.
* _arguments_: `html` - the new HTML string that will be appended to the `$element`.
* _return_: Ignored.
* _once_: Yes.
* `pre_html_insert`: Inside `.render()` _AFTER_ the new HTML content is generated and old contents has been removed from the DOM.
* _arguments_: `html` - the new HTML string that will be appended to the `$element`.
* _return_: If `false` then the new content will not be add to the `$element`. Useful when custom insertion is done inside the handler itself.
* _once_: Yes.
* `post_render`: At the end of `.render()`.
* _arguments_: None.
* _return_: Ignored.
* _once_: Yes.
#### Transitioned
* `post_transit`: At the end of `.transit()`, _AFTER_ the transition animation is done.
* _arguments_: `direction` - a string representing the direction of the transition, either `'in'` or `'out'`.
* _return_: Ignored.
* _once_: Yes.
#### Select
* `pre_select`: At beginning of `.select()`.
* _arguments_: `(selected)` - the wrapped selected HTMLElement and the click Event object.
* _return_: If `false` then the selection will be ignored not published, and `post_select` will not be triggered.
* _once_: No.
* `post_select`: Inside `.select()`, after the selection has been rendered but before it's published.
* _arguments_: `(selected)` - the wrapped selected HTMLElement and the click Event object.
* _return_: If `false` then the selection will _NOT_ be published.
* _once_: No.
---------------------------------------------------------------------------------
### App Event Reference
__Note__: Remember that app events are triggered and executed async, just like a Promise is resolved and its fulfillment handler is triggered on the next task in the event loop.
#### uijet
* `startup`: At the end of `.startup()` which is called at the end of `.init()`.
* _data_: None.
* `app.clicked`: uijet binds a `click` handler on the `uijet.$element` element. It is used internally to hide Toggled widgets.
* _data_: The Event object.
#### Button
* `<this.id>.clicked`: After the instance is clicked, at the end of the `.click()` handler.
* _data_: `{ event: <Event object>, context: <instance's context> }`.
* `app.clicked`: After the instance is clicked, at the end of the `.click()` handler and after the above handler is published.
* _data_: The Event object.
#### List
* `<this.id>.selected`: After an item of the instance is clicked, at the end of the `.click()` handler.
* _data_: If the `pre_select` handler returns anything other then `false` it will be used as the data. If it returns `undefined` then `.getTransfer()`'s return value is used, which defaults to the wrapped selected element(s).
#### Datepicker
* `<this.id>.picked`: At the end of the `pre_select` signal handler on the Datelist widget instance.
* _data_: The current date as a `Date` object.
#### Select
* `<this.id>.selected`: After the instance is clicked, at the end of the `.select()` handler.
* _data_: The wrapped selected element(s).

5

docs-src/guides/adapters.md

@@ -41,6 +41,1 @@ # uijet Adapters

```
## Loading Adapters
If you're using an AMD loader then uijet will load its bundled Adapters automatically.
If you define your own Adapter make sure it's loaded before it's used.

37

docs-src/guides/application.md

@@ -5,11 +5,11 @@ # Authoring an Application with uijet

In this guide we're going to use AMD module loader for the example bellow,
also assuming there's a definition of all the paths to the dependencies
we will use bellow, say, in another file named `main.js` (you can see such
In this guide we're going to use an AMD module loader for the examples below,
also assuming all the paths to the dependencies we will use below are defined,
say, in another file named `main.js` (you can see such
example in the app boilerplates in the `boilerplates` folder).
## Initializing: `uijet.init()`
Every application that uses uijet needs to initialize uijet using it's `init()` method.
## uijet.init()
So a basic uijet-based app will start like this:

@@ -19,3 +19,4 @@

define([
'uijet'
'uijet_dir/uijet'
// ... uijet module dependencies go here ...
], function (uijet) {

@@ -35,11 +36,11 @@

Let's say we choose PubsubJS, When.js and Zepto:
Let's say we choose native ES6 Promises, PubsubJS and Zepto:
```javascript
define([
'uijet',
'uijet_dir/uijet',
'uijet_dir/modules/pubsub/pubsubjs',
'uijet_dir/modules/promises/when',
'uijet_dir/modules/dom/zepto'
], function (uijet, pubsub, when, $) {
'uijet_dir/modules/dom/zepto',
'uijet_dir/modules/promises/es6'
], function (uijet, pubsub, $) {

@@ -51,7 +52,9 @@ uijet.init();

Of course, we are assuming above that we have the PubsubJS, When.js and Zepto packages
Of course, we are assuming above that we have the PubsubJS and Zepto packages
installed in our project.
Now we have the all the basic requirements for a uijet based app.
We're now ready to declare our views and application logic.
We're now ready to declare our application logic.
Lets add a short example:

@@ -61,7 +64,7 @@

define([
'uijet',
'uijet_dir/uijet',
'uijet_dir/modules/pubsub/pubsubjs',
'uijet_dir/modules/promises/when',
'uijet_dir/modules/dom/zepto'
], function (uijet, pubsub, when, $) {
'uijet_dir/modules/dom/zepto',
'uijet_dir/modules/promises/es6',
], function (uijet, pubsub, $) {

@@ -68,0 +71,0 @@ uijet.declare([{

5

docs-src/guides/mixins.md

@@ -97,6 +97,1 @@ # uijet Mixins

```
## Loading Mixins
If you're using an AMD loader then uijet will load its bundled Mixins automatically.
If you define your own Mixin make sure it's loaded before it's used.

64

docs-src/guides/modules.md

@@ -5,3 +5,3 @@ # uijet modules

That's why it leaves the implementation of all the main parts of the application up
That's why it leaves the implementation of all the main parts of the application framework up
to external libraries, of your choice, and glues them together into a coherent interface

@@ -19,3 +19,3 @@ which allows them to be abstracted and easily swappable.

## Example Usage:
### Example Usage:

@@ -26,3 +26,3 @@ An example of an application loading basic modules can look as follows:

define([
'uijet',
'uijet_dir/uijet',
'uijet_dir/modules/dom/jquery',

@@ -61,3 +61,3 @@ 'uijet_dir/modules/pubsub/eventbox',

If we would like later to use When.js for Promises, all we had to do is replace the above
If we would like later to use native ES6 Promise for Promises, all we had to do is replace the above
dependencies:

@@ -68,4 +68,4 @@

...,
'uijet_dir/modules/promises/when'
], function (uijet, $, Ebox, when) {
'uijet_dir/modules/promises/es6'
], function (uijet, $, Ebox) {

@@ -76,2 +76,19 @@ ```

A more Real Life® example would be starting development with jQuery but later wishing to move to Zepto
for better mobile support. And then, to polyfill Promise on old mobile devices swap the Promises module
with Bluebird:
```javascript
define([
'uijet_dir/uijet',
'uijet_dir/modules/dom/zepto',
'uijet_dir/modules/pubsub/eventbox',
'uijet_dir/modules/promises/bluebird'
], function (uijet, $, Ebox) {
```
And no further change to our application code, whatsoever.
### Lazy modules

@@ -86,3 +103,3 @@

'uijet_dir/modules/router/director'
], function (uijet, $, Ebox, when, Router) {
], function (uijet, ..., Router) {

@@ -110,14 +127,17 @@ ```

## modules Best Practices
## Modules Best Practices
It's best to keep modules' specific tangent to your application's code, and separated
from it, as much as possible. This will keep that modules easily swappable and much
more maintainable.
It's best to keep modules' specific code tangent to your application's code, and separated
from it, as much as possible. This will keep that module easily swappable and its related
code much more maintainable.
### Example
A good example for this are models.
Lets say we're using the Backbone `data` module, i.e. using Backbone.js' models and collection
for data management (a.k.a the M in the MVC).
You could insert your model declarations directly to your app's main file, as in:
Lets say we're using the Backbone `data` module, i.e. using Backbone.js' Models and Collections
for data management.
You could insert your Model/Collection declarations directly to your app's main file, as in:
*Bad!*

@@ -128,6 +148,10 @@

```javascript
var Todo = backbone.Mode.extend({ ... });
uijet.init({
resources: {
Todos: backbone.Collection.extend({
url: '/path/to/todos'
url: '/path/to/todos',
model: Todo
})

@@ -150,5 +174,7 @@ }

var Todos = backbone.Collection.extend({
url: '/path/to/todos'
});
var Todo = backbone.Model.extend({ ... }),
Todos = backbone.Collection.extend({
url: '/path/to/todos',
model: Todo
});

@@ -167,3 +193,3 @@ return {

define([
'uijet',
'uijet_dir/uijet',
'resources'

@@ -170,0 +196,0 @@ ], function (uijet, resources) {

137

docs-src/guides/widgets.md
# Using and Creating Widgets
Widgets are declaration of generic and reusable UI components.
In uijet, Widgets are declarations of generic and reusable UI components.

@@ -16,6 +16,3 @@ The basic __Widgets__ that come bundled with uijet are the most basic building blocks

* Overlay
* Form
A view (as in the V in MVC) instance in an application is an instance of a Widget.
## Using Widgets

@@ -30,3 +27,4 @@

define([
'uijet'
'uijet_dir/uijet',
'uijet_dir/widgets/List',
], function (uijet) {

@@ -44,11 +42,11 @@

In the above example we load `uijet` and use it to `declare()` an instance of a `List` widget.
In the above example we load `uijet` and use it to `declare()` an instance of a `List` Widget.
Once uijet starts it will automatically load the `List` Widget, create an instance of it, and bind it
Once uijet starts it will create an instance of the `List` Widget and bind it
to the DOM element set in the `element` option.
The actual `List` view that will be created with the `id`: `groovie_list` is *injected* with
The actual `List` component that will be created with the `id`: `groovie_list` is *injected* with
the `List` Widget and all its *dependencies*.
Note that `uiject.declare()` *does not return an instance* of the created view, rather it
Note that `uiject.declare()` *does not return an instance* of the created component, rather it
*registers* it to the uijet *sandbox*.

@@ -65,11 +63,8 @@ The only way another component can communicate with it is via events.

* Modal
* Slider
* Select
* Datepicker
Using a bundled Composite only requires you to load it beforehand:
```javascript
define([
'uijet',
'uijet_dir/uijet',
'uijet_dir/composites/Modal'

@@ -97,7 +92,7 @@ ], function (uijet) {

The above example will create an instance of a Modal dialog with 2 buttons.
The above example will create an instance of a `Modal` dialog with 2 buttons.
## Creating a view in uijet
## Creating a component in uijet
Creating a view in uijet is comprised of the following steps:
Creating a component in uijet is comprised of the following steps:

@@ -109,4 +104,10 @@ ### Defining a Widget "class"

```javascript
uijet.Widget('KickAssPane', {
// methods and properties for KickAssPane
define([
'uijet_dir/uijet',
'uijet_dir/widgets/Base'
], function (uijet) {
uijet.Widget('KickAssPane', {
// methods and properties for KickAssPane
});
});

@@ -118,7 +119,11 @@ ```

```javascript
uijet.Widget('KickAssList', {
// methods and properties for KickAssList
}, [
'List'
]);
define([
'uijet_dir/uijet',
'uijet_dir/widgets/List'
], function (uijet) {
uijet.Widget('KickAssList', {
// methods and properties for KickAssList
}, 'List');
});
```

@@ -131,7 +136,14 @@

```javascript
uijet.Widget('KickAssList', {
// methods and properties for KickAssList
}, {
widgets: ['List'],
mixins: ['Floated']
define([
'uijet_dir/uijet',
'uijet_dir/widgets/List'
'uijet_dir/mixins/Floated'
], function (uijet) {
uijet.Widget('KickAssList', {
// methods and properties for KickAssList
}, {
widget: 'List',
mixins: ['Floated']
});
});

@@ -145,9 +157,9 @@ ```

### Declaring a view instance:
### Declaring a component instance:
Second, declaring the Widget instance that will define the view registered into uijet:
Second, declaring the Widget instance that will represent the component registered into uijet:
```javascript
define([
'uijet',
'uijet_dir/uijet',
'custom_widgets/KickAssList'

@@ -166,7 +178,7 @@ ], function (uijet) {

Here the `KickAssList` is injected as a dependency to our `kewl_list` view.
Here the `KickAssList` is injected as a dependency to our `kewl_list` component.
### Starting a view instance:
### Starting a component instance:
Under the hood uijet creates an instance of the component created from your view declaration.
Under the hood uijet creates an instance of the component created from your component declaration.
That declaration holds a Widget definition and the sum of all of its dependencies injected to it -

@@ -180,12 +192,29 @@ other Widgets, Mixins, Adapters.

uijet is all about reusing.
The `uijet.Widget()` lets you reuse a *class* (a __definition__) of a generic component. To reuse
an instance (a __declaration__) you use `uijet.Factory()`, as follows:
a blueprint of an instance (a __declaration__) you use `uijet.Factory()`, as follows:
```javascript
uijet.Factory('TransitionedButton', {
type: 'Button',
config: {
mixin: ['Transitioned'],
cloak: true
}
define([
'uijet_dir/uijet',
'uijet_dir/widgets/Button',
'uijet_dir/mixins/Transitioned'
], function (uijet) {
uijet.Factory('TransitionedButton', {
type: 'Button',
config: {
mixins: ['Transitioned'],
cloak: true
}
});
// Which is followed by the declaration:
uijet.declare({
factory: 'TransitionedButton',
config : {
element: '#some_button'
}
});
});

@@ -195,18 +224,16 @@ ```

As you can see in the example above, `uijet.Factory()` is used similarly as `uijet.declare()`,
only difference is it only takes a single declaration object, and requires a `name` as first
only difference is it can only take a single declaration object (not a list of objects), and requires a `name` as first
argument.
## Ad-hoc starting a view:
uijet also has an imperative way to declare and start a view instance, using the
`uijet.start()` method.
This method takes the same arguments as `uijet.declare()`, and will both declare and start
the views declarations provided to it.
## Nesting components:
Since uijet also needs to check whether there are dependencies that needs to be loaded, this
starting process will happen asynchronously once all dependencies are loaded, or simply on
next task of the queue of the JS engine.
If you're sure that all dependencies for the declaration(s) you've provided to `uijet.start()`
are all already loaded you can provide it a second argument `true`, which will cause the
starting to happen immediately and synchronously.
You can nest components in a declarative way. There are 3 ways in uijet for declaring components
## Ad-hoc starting a component:
*Before* uijet is initialized, all calls to `uijet.declare()` declare a component instance what will
later be initialized after uijet does.
*After* uijet is initialized, all calls to `uijet.declare()` (or its alias `uijet.start()`)
will declare and start a component instance ad-hoc. This call will return a `Promise` object
that will resolve once that instance and all its nested components have finished initializing.

2

package.json
{
"name": "uijet",
"description": "Killer UI for web-apps.",
"version": "0.0.70",
"version": "0.0.73",
"main": "src/uijet.js",

@@ -6,0 +6,0 @@ "scripts": {

17

README.md

@@ -39,8 +39,21 @@ # uijet

* Download the source or install via [Bower](http://bower.io/):
* Download the source
* Or install via [npm](https://www.npmjs.com/):
```
> npm install uijet
```
* Or install via [Bower](http://bower.io/):
```
> bower install uijet
```
* Or install via [volo](http://volojs.org/):
```
> volo add uijet
```
__(recommended)__ If you're using an AMD module loader like [RequireJS](http://requirejs.org/) or [curl.js](https://github.com/cujojs/curl),

@@ -161,3 +174,3 @@ Great!

In short, the main difference between Mixins and Adapters is that Mixins are only
aware of uijet, while Adapters my require and be aware of 3rd party API's.
aware of uijet, while Adapters may require and be aware of 3rd party API's.

@@ -164,0 +177,0 @@ *Example*: if you want a List component to be scrolled using a JS based plugin,

4

src/composites/Datepicker.js

@@ -50,3 +50,3 @@ (function (factory) {

* * `current_date`: element or selector for the element which will serve as the heading
* that contains cuurent date.
* that contains current date.
* * `max_date`: max possible date for selection.

@@ -344,4 +344,4 @@ * * `min_date`: min possible date for selection.

}, {
widgets: ['List']
widget: 'List'
});
}));

81

src/composites/DropmenuButton.js

@@ -8,7 +8,9 @@ (function (factory) {

'uijet_dir/widgets/List',
'uijet_dir/mixins/Floated'
'uijet_dir/mixins/Floated',
'uijet_dir/mixins/Toggled'
], function (uijet) {
return factory(uijet);
});
} else {
}
else {
factory(uijet);

@@ -26,5 +28,5 @@ }

uijet.Widget('DropmenuButton', {
options : {
options : {
type_class: ['uijet_button', 'uijet_dropmenubutton'],
dont_wrap : false
dont_wrap : false
},

@@ -37,7 +39,5 @@ /**

* * `menu`: the menu component's config.
* * `menu_type`: the menu component's Widget type. Defaults to `'List'`.
* * `arrow`: the arrow Button component's config.
* * `arrow_type`: the arrow Button component's Widget type. Defaults to `'Button'`.
* Can also be set to `true` and the default arrow button component will be created.
* * `dont_close`: when `true` keeps the menu open on selection. Otherwise its `close()` method is invoked.
* * `dont_close`: when `true` keeps the menu open on selection. Otherwise its `close()` method is invoked.
*

@@ -47,3 +47,3 @@ * @methodOf DropmenuButton

*/
initContained : function () {
initContained: function () {
this._wrap();

@@ -56,10 +56,10 @@

drop_arrow_id, drop_arrow_config,
// configure the dropdown menu
// configure the dropdown menu
drop_menu_config = uijet.utils.extend(true, {
id : drop_menu_id,
container : id,
dont_wake : true,
sync : true,
extra_class : 'uijet_menu',
float_position : function () {
id : drop_menu_id,
container : id,
dont_wake : true,
sync : true,
extra_class : 'uijet_menu',
float_position: function () {
var wrapper = this._wrap().$wrapper[0],

@@ -72,16 +72,16 @@ parent = wrapper.offsetParent || wrapper.parentNode;

},
signals : {
pre_select : function ($selected, e) {
signals : {
pre_select: function ($selected, e) {
e.stopPropagation();
if ( !this.options.dont_close ) {
if ( ! this.options.dont_close ) {
this.sleep();
}
},
pre_sleep : function () {
pre_sleep : function () {
this.opened = false;
}
},
app_events : {
app_events : {
// in order to stay as less obtrusive as possible sleep when this global event is triggered
'app.clicked' : function (event) {
'app.clicked': function (event) {
var target_id = event.target.id;

@@ -95,5 +95,5 @@ if ( this.opened && ! ~ target_id.indexOf(id) ) {

drop_menu_events = drop_menu_config.app_events,
clicked_handler = 'toggleMenu+',
clicked_handler = 'toggle+',
add_arrow = !!options.arrow,
add_arrow = ! ! options.arrow,
drop_menu, drop_arrow;

@@ -107,5 +107,5 @@

drop_arrow_config = uijet.utils.extend(true, {
id : drop_arrow_id,
container : id,
extra_class : 'uijet_droparrow'
id : drop_arrow_id,
container : id,
extra_class: 'uijet_droparrow'
}, uijet.utils.isObj(options.arrow) ? options.arrow : {});

@@ -122,6 +122,6 @@

// ensure all components react to click
if ( !drop_menu_events[id + '.clicked'] ) {
if ( ! drop_menu_events[id + '.clicked'] ) {
drop_menu_events[id + '.clicked'] = clicked_handler;
}
if ( drop_arrow_id && !drop_menu_events[drop_arrow_id + '.clicked'] ) {
if ( drop_arrow_id && ! drop_menu_events[drop_arrow_id + '.clicked'] ) {
drop_menu_events[drop_arrow_id + '.clicked'] = clicked_handler;

@@ -146,28 +146,19 @@ }

// add the arrow button widget to components if needed
add_arrow && components.unshift({ type: options.arrow_type || 'Button', config: drop_arrow_config });
add_arrow && components.unshift({ type: 'Button', config: drop_arrow_config });
// make sure the drop menu is Floated
drop_menu_config.mixins = uijet.utils.putMixin(drop_menu_config.mixins, 'Floated');
drop_menu_config.mixins = uijet.utils.putMixin(
uijet.utils.putMixin(
drop_menu_config.mixins,
'Floated'),
'Toggled');
// create the menu widget
components.unshift({ type: options.menu_type || 'List', config: drop_menu_config });
components.unshift({ type: 'List', config: drop_menu_config });
return this._super.apply(this, arguments);
},
toggleMenu : function (data) {
var target, top;
if ( !data || data === true ) {
this.opened = typeof data == 'boolean' ? data : !this.opened;
}
else {
target = data.event.target;
top = (this.$wrapper || this.$element)[0];
// always close if clicked on the menu, otherwise toggle
this.opened = !(target === top || uijet.$.contains(top, target)) && !this.opened;
}
this.opened ? this.wake(data.context) : this.sleep();
}
}, {
widgets : ['Button']
widget: 'Button'
});
}));

4

src/composites/Select.js

@@ -52,3 +52,3 @@ (function (root, factory) {

}, {
widgets : ['List']
widget : 'List'
});

@@ -195,5 +195,5 @@

}, {
widgets : ['Button']
widget: 'Button'
});
}));

2

src/mixins/Floated.js

@@ -164,3 +164,3 @@ (function (factory) {

bottom_style = document.createElement('style');
bottom_style.innerHTML = css_text;
this._addRule(bottom_style, selector, css_text);
document.head.appendChild(bottom_style);

@@ -167,0 +167,0 @@ }

7

src/mixins/Layered.js

@@ -59,3 +59,3 @@ (function (factory) {

/**
* Disables state of "current" of this layer.
* Moves this layer to the background.
* Removes the `current` class from the top container element.

@@ -87,3 +87,3 @@ *

/**
* Enables state of "current" of this layer.
* Moves this layer to the foreground.
* Adds the `current` class to the top container element, while calling

@@ -128,4 +128,2 @@ * {@link Layered#sleep} on all of its sibling widgets.

if ( sibling.options.keep_layer_awake ) {
// just change state from current to simply awake
sibling.options.state = 'awake';
$top.removeClass('current');

@@ -141,3 +139,2 @@ }

this.options.state = 'current';
$top.addClass('current');

@@ -144,0 +141,0 @@

2

src/mixins/Scrolled.js

@@ -26,3 +26,3 @@ (function (root, factory) {

*
* * `horizontal`: if `true` then then `horizontal` class is added to the element.
* * `horizontal`: if `true` then the `horizontal` class is added to the element.
*

@@ -29,0 +29,0 @@ * @memberOf Scrolled

67

src/modules/binding/rivets-backbone.js

@@ -15,14 +15,7 @@ (function (root, factory) {

}(this, function (uijet, rivets, Backbone) {
'use strict';
var _views_cache = {};
uijet.use({
__getRvView: function (id) {
return _views_cache[id];
}
});
/**
* Rivets-Backbone binding module.
*
*
* @module binding/rivets-backbone

@@ -38,33 +31,16 @@ * @category Module

/*
* Configure rivets to work with Backbone.js
* Configure rivets to work with Backbone.js Models.
*/
rivets.adapters[':'] = {
subscribe : function (obj, keypath, callback) {
if ( obj instanceof Backbone.Collection ) {
obj.on('add remove reset sort', callback);
}
else {
obj.on('change:' + keypath, callback);
}
observe : function (obj, keypath, callback) {
obj.on('change:' + keypath, callback);
},
unsubscribe: function (obj, keypath, callback) {
if ( obj instanceof Backbone.Collection ) {
obj.off('add remove reset sort', callback);
}
else {
obj.off('change:' + keypath, callback);
}
unobserve: function (obj, keypath, callback) {
obj.off('change:' + keypath, callback)
},
read : function (obj, keypath) {
if ( obj instanceof Backbone.Collection ) {
return obj[keypath];
}
else {
return obj.get(keypath);
}
get : function (obj, keypath) {
return obj.get(keypath)
},
publish : function (obj, keypath, value) {
if ( obj instanceof Backbone.Model ) {
obj.set(keypath, value);
}
set : function (obj, keypath, value) {
obj.set(keypath, value)
}

@@ -89,12 +65,12 @@ };

* Triggers data binding on `init()`.
*
*
* #### Related options:
*
*
* * `dont_bind`: if `true` prevents from `bindData()` to be invoked here during `init()` stage.
* If this instance is `templated` then `bindData()` is never called here.
*
*
* @method module:binding/rivets-backbone#register
* @returns {Widget} this
*/
register: function () {
register : function () {
this._super.apply(this, arguments);

@@ -110,3 +86,3 @@

* Unbinds the data from the view
*
*
* @see {@link http://www.rivetsjs.com/docs/#getting-started}

@@ -116,3 +92,3 @@ * @method module:binding/rivets-backbone#destroy

*/
destroy : function () {
destroy : function () {
if ( this.rv_view ) {

@@ -126,5 +102,5 @@ this.rv_view.unbind();

* Binds the data to the view.
*
*
* The bound view is cached on the instance in `this.rv_view`.
*
*
* #### Related options:

@@ -138,3 +114,3 @@ *

* * `bind_options`: config object passed to {@link http://www.rivetsjs.com/docs/#getting-started-creating-views|Rivets.bind()}.
*
*
* @see {@link http://www.rivetsjs.com/docs/}

@@ -144,3 +120,3 @@ * @method module:binding/rivets-backbone#bindData

*/
bindData: function () {
bindData : function () {
var observables = uijet.utils.returnOf(this.options.observe, this),

@@ -194,3 +170,2 @@ resource = this.options.resource,

this.rv_view = rivets.bind(this.$wrapper || this.$element, observables, this.options.bind_options);
_views_cache[this.id] = this.rv_view;
}

@@ -197,0 +172,0 @@

91

src/modules/data/backbone.js

@@ -63,89 +63,2 @@ (function (root, factory) {

/**
* Gets the `context` object or a specific property in it.
*
* If the instance has a resource it's more likely you'll use
* the `context` object to store filters to use for querying the
* resource and use the actual resource to store and get data.
*
* If the resource is a Collection you can use the following:
*
* #### Filter options:
*
* * `where`: argument to delegate to {@link http://backbonejs.org/#Collection-where|Collection.where()}.
* * `filter`: argument to delegate to {@link http://backbonejs.org/#Collection-filter|Collection.filter()}.
* The second `context` argument will be the widget's instance. Can be used in 2 variations:
* * * as `function`: will be used as a filter function run in the instance's context.
* * * as `string`: to reference a method of the collection to use for filtering.
* That will be run in the resource's context and handed the arguments given in `filter_args`.
* * `filter_args`: array of arguments to use in conjunction with `filter` as a `string`.
* * `filtered`: predefined filtered list of models to use. Can be imported from another resource.
*
* If the resource is a Model you get 2 options:
*
* * `dont_merge_resource`=`true`: a reference to the model's attributes will be added to the `context`
* object under the key of calculated `resource_name`.
* * otherwise: the model's attributes will be merged into the `context` object.
*
* #### Related options:
*
* * `dont_merge_resource`: whether to merge the model's attributes to the `context` object or just reference
* it from there using `resource_name`.
* * `resource_name`: a key to use when referencing the model's attributes form the `context` object.
* Defaults to the `resource` option if it's a `string`, otherwise to `'<this.id>_data'`.
*
* @method module:data/backbone.Resourced#getContext
* @param {string} [key] - string for getting a specific property of the data `context` object.
* @returns {Object|Model[]}
*/
getContext : function (key) {
var context = this._super(key),
result_set;
if ( this.resource ) {
if ( this.resource instanceof Backbone.Collection ) {
if ( context.where && uijet.utils.isObj(context.where) ) {
result_set = this.resource.where(context.where);
}
else if ( context.filter && uijet.utils.isFunc(context.filter) ) {
result_set = this.resource.filter(context.filter, this);
}
else if ( typeof context.filter == 'string' ) {
result_set = this.resource[context.filter].apply(this.resource, context.filter_args);
}
else if ( 'filtered' in context ) {
result_set = context.filtered;
}
else {
result_set = this.resource.models;
}
this.setContext(this._resource_name, result_set);
}
else {
this.options.dont_merge_resource ?
this.setContext(this._resource_name, this.resource.attributes) :
this.setContext(this.resource.attributes);
}
}
return context;
},
/**
* Sets the resource's (Collection's) `comparator` and forces sorting
* by calling its {@link http://backbonejs.org/#Collection-sort|sort} method.
*
* #### Related options:
*
* * `sorting`: map of predefined `comparator` functions/strings that can be used to sort the resource.
*
* @see {@link http://backbonejs.org/#Collection-comparator}
* @method module:data/backbone.Resourced#sort
* @param {string} sorting - a key to match a predefined sorting comparator.
* @returns {Widget} this
*/
sort : function (sorting) {
if ( sorting in this.options.sorting ) {
this.resource.comparator = this.options.sorting[sorting];
this.resource.sort();
}
return this;
},
/**
* Binds all data events set in `options.data_events`.

@@ -252,3 +165,3 @@ *

* * `destroy_resource`: Tells the widget to call `destroy()` on its resource. Defaults to `false`.
* * `dont_remove_resource`: Tells the widget NOT `remove()` its resource from its related collection. Defaults to `false`.
* * `remove_resource`: Tells the widget to `remove()` its resource from its related collection. Defaults to `false`.
*

@@ -268,3 +181,3 @@ * @see {@link http://backbonejs.org/#Model-destroy}

// otherwise, if part of a colletction
else if ( collection && ! this.options.dont_remove_resource ) {
else if ( collection && this.options.remove_resource ) {
// just remove from it from its collection

@@ -271,0 +184,0 @@ collection.remove(this.resource);

2

src/modules/extensions/zepto-touch.js

@@ -16,3 +16,3 @@ (function (root, factory) {

*
* @module extension/zepto-touch
* @module extensions/zepto-touch
* @category Module

@@ -19,0 +19,0 @@ * @sub-category Extensions

3

src/modules/router/backbone.js

@@ -5,3 +5,4 @@ (function (root, factory) {

'uijet_dir/uijet',
'backbone'
'backbone',
'uijet_dir/modules/router/_build-context'
], function (uijet, Backbone) {

@@ -8,0 +9,0 @@ return factory(uijet, Backbone);

6

src/modules/router/director.js
(function (root, factory) {
if ( typeof define === 'function' && define.amd ) {
define(['uijet_dir/uijet', 'director'], function (uijet) {
define([
'uijet_dir/uijet',
'director',
'uijet_dir/modules/router/_build-context'
], function (uijet) {
return factory(uijet, root);

@@ -5,0 +9,0 @@ });

156

src/widgets/Base.js

@@ -5,13 +5,11 @@ (function (root, factory) {

define(['uijet_dir/uijet'], function (uijet) {
return (uijet.BaseWidget = factory(uijet, root));
return (uijet.BaseWidget = factory(uijet));
});
}
else {
root.uijet.BaseWidget = factory(root.uijet, root);
root.uijet.BaseWidget = factory(root.uijet);
}
}(this, function (uijet, _window) {
}(this, function (uijet) {
var Object = _window.Object,
// cache the utilities namespace
utils = uijet.utils,
var utils = uijet.utils,
/**

@@ -67,4 +65,2 @@ * Constructor for the base widget class.

},
POSITION_RE = /(fluid|top|bottom|right|left):?(\d+)?([^\d\|]+)?\|?(\d+)?([\D]+)?/,
DIMENSIONS = {top: 'height', bottom: 'height', right: 'width', left: 'width'},
DEFAULT_TYPE_CLASS = '_uijet_widget_',

@@ -100,3 +96,3 @@ widget_id_index = 0,

/**
* Initializes a widget instance.
* Initializes a widget instance and returns a list
*

@@ -121,3 +117,3 @@ * A *lifecycle method*, does all the possible lifting that can be done

* @param {Object} options - config object for the widget.
* @returns {Promise[]|Widget}
* @returns {Promise[]|undefined}
*/

@@ -151,7 +147,7 @@ init : function (options) {

return contained_starts || this;
return contained_starts;
},
/**
* Initializes contained widget instances.
* Returns an array of Promises or `undefined` if the
* Returns a Promise or `undefined` if the
* `components` option is not set.

@@ -168,3 +164,3 @@ *

* @instance
* @returns {Promise[]|undefined}
* @returns {Promise|undefined}
*/

@@ -211,3 +207,3 @@ initContained : function () {

* This effect will continue to propagate recursively.
*
*
* @memberOf BaseWidget

@@ -424,3 +420,3 @@ * @instance

el = this.$element[0],
style, position;
position;
this.options.extra_class && (classes += ' ' + this.options.extra_class);

@@ -430,7 +426,4 @@ this.$element.addClass(classes);

if ( el.ownerDocument.body.contains(el) ) {
style = utils.returnOf(this.options.style, this);
position = utils.returnOf(this.options.position, this);
position && this.position(position);
style && this.style(style);
}

@@ -440,45 +433,14 @@ return this;

/**
* Gets or sets the style of the instance's top container (`this.$wrapper`).
* As a getter this is delegated to {@link uijet.utils#getStyle}.
* As a setter this is delegated to the DOM module's `css()` method.
* Minimal version of {@link extension/position#position} that only
* handles the value `'center'` for the `position` option for centering
* an instance's element.
*
* If no arguments are supplied it returns the entire computed style object of
* the top container of the instance's element.
*
* @memberOf BaseWidget
* @instance
* @param {string|Array|Object} [style] - an attribute name, or names to get, or a map of attributes and values to set.
* @param {string|number|function} [value] - a value to set for the given style attribute in `style`.
* @returns {string|string[]|CSSStyleDeclaration|Widget} - returns the result of {@link uijet.utils#getStyle} or `this`.
*/
style : function (style, value) {
if ( !arguments.length || (value === void 0 && typeof style == 'string') || utils.isArr(style) ) {
return utils.getStyle(this.$wrapper[0], style);
}
this._wrap()
.$wrapper.css(style, value);
return this;
},
/**
* Positions the instance's element with respect to its
* sibling widgets, according to value of `position`:
*
* * `'center'`: centers the widget.
* * `'fluid'`: stretches the widget according to its container and siblings.
* * other `string`: parses `position` and positions the widget according to its container and siblings.
* * `Object`: passes `position` to {@link BaseWidget#style}.
*
* This method will always attempt to {@link BaseWidget#_wrap} the instance's element.
*
* While positioning widgets using this method is handy for scaffolding
* fluid UIs, performance wise it's best to ultimately do positioning
* using CSS, unless dynamic run-time dimensions calculation is required.
*
* @memberOf BaseWidget
* @instance
* @param {string|Object} position - directives for positioning the instance's container element.
* @param {string} position - directives for positioning the instance's container element.
* @returns {Widget}
*/
position : function (position) {
var processed, style, has_fluid_side, exclude = [];
this._wrap();

@@ -490,68 +452,3 @@

}
else if ( position == 'fluid' ) {
uijet._position(this);
}
else {
processed = {};
style = {};
position.split(' ').forEach(function (pair) {
var match = POSITION_RE.exec(pair),
side = match && match[1],
number, size_unit, margin_unit, has_margin;
if ( side ) {
if ( side === 'fluid' ) {
has_fluid_side = true;
return;
}
else {
exclude.push(side);
if ( match[3] == 'fluid' ) {
has_fluid_side = true;
return;
}
}
size_unit = match[3] || 'px';
margin_unit = match[5] || 'px';
// add padding or stick to side
number = +match[4];
// cache the numeric part
processed[side] = { size: number || 0 };
// add the units part for styling
number = number ?
margin_unit ?
number + margin_unit :
number :
0;
has_margin = !!number;
style[side] = number;
// process width/height if found
number = +match[2];
if ( number ) {
// if no margin or using the same unit (no need to calc)
//TODO: add option to use CSS calc
if ( !has_margin || margin_unit === size_unit ) {
// aggregate that dimension's length and add the unit
processed[side].size = (processed[side].size + number);
processed[side].unit = size_unit;
}
style[DIMENSIONS[side]] = number + (size_unit || 0);
}
}
});
// cache the parsed position for quick JIT positioning of fluid siblings
this.processed_position = processed;
style.position = 'absolute';
// continue to next if statement passing the parsed `style` object
position = style;
// use `uijet._position` to position according to this widget's siblings
has_fluid_side && uijet._position(this, exclude);
}
}
if ( utils.isObj(position) ) {
this.style(position);
}
return this;

@@ -727,24 +624,2 @@ },

/**
* Triggers selection (e.g. `click` event) on the given `target`.
* `target` can be an `HTMLElement` or a query selector to be found
* inside the instance's element.
* It can also be a function that returns a wrapped element.
*
* #### Related options:
*
* * `click_event`: space separated event types to use for triggering selection. Defaults to {@link uijet.support.click_events.full}.
*
* @memberOf BaseWidget
* @instance
* @param {function|string|HTMLElement} target - the target element to find or a function returning one.
* @returns {Widget}
*/
select : function (target) {
var event_type = this.options.click_event,
$el;
$el = utils.isFunc(target) ? target.call(this) : this.$element.find(target);
utils.isFunc($el.trigger) && $el.trigger(event_type || uijet.support.click_events.full);
return this;
},
/**
* Sets `this.options` based on class's defaults and instance's

@@ -1070,3 +945,2 @@ * declaration.

this.signals = Object.create(this.signals_cache);
this.options.state = this.awake ? 'current' : 'asleep';
return this;

@@ -1073,0 +947,0 @@ }

15

src/widgets/Button.js

@@ -29,2 +29,3 @@ (function (factory) {

* * `disabled`: whether this button is initially disabled.
* * `activated`: whether this button is initially activated.
* * `click_event`: space separated event types to use for binding the {@link Button#click}.

@@ -39,3 +40,4 @@ *

this.options.disabled && this.disable();
uijet.utils.returnOf(this.options.disabled, this) && this.disable();
uijet.utils.returnOf(this.options.activated, this) && this.activate();

@@ -46,13 +48,2 @@ this.bind(this.options.click_event || uijet.support.click_events.full, this.click);

/**
* Wraps {@see Button#click}.
*
* @memberOf Button
* @instance
* @returns {Button}
*/
select : function () {
this.click();
return this;
},
/**
* A handler for a selection event (e.g. `click`).

@@ -59,0 +50,0 @@ *

docs/api/es6-polyfill.html
src/composites/Slider.js
src/mixins/Dragged.js
src/mixins/Preloaded.js
src/mixins/Submitted.js
src/modules/binding/rivets-each-alt.js
src/modules/loader/requirejs.js
src/widgets/Form.js
src/uijet.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc