Comparing version 0.0.70 to 0.0.71
| { | ||
| "name": "uijet", | ||
| "version": "0.0.70", | ||
| "version": "0.0.71", | ||
| "main": [ | ||
@@ -5,0 +5,0 @@ "src/adapters", |
@@ -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`. | ||
| --> | ||
@@ -87,4 +89,4 @@ #### Data 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. | ||
@@ -103,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: | ||
@@ -131,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: | ||
@@ -148,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: | ||
@@ -166,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). |
| { | ||
| "name": "uijet", | ||
| "description": "Killer UI for web-apps.", | ||
| "version": "0.0.70", | ||
| "version": "0.0.71", | ||
| "main": "src/uijet.js", | ||
@@ -6,0 +6,0 @@ "scripts": { |
@@ -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, |
@@ -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. | ||
@@ -53,0 +53,0 @@ * * `min_date`: min possible date for selection. |
@@ -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'] | ||
| widgets: ['Button'] | ||
| }); | ||
| })); |
@@ -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 @@ } |
@@ -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 @@ |
@@ -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 |
@@ -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 @@ |
@@ -16,3 +16,3 @@ (function (root, factory) { | ||
| * | ||
| * @module extension/zepto-touch | ||
| * @module extensions/zepto-touch | ||
| * @category Module | ||
@@ -19,0 +19,0 @@ * @sub-category Extensions |
@@ -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); |
| (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 @@ }); |
@@ -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_', | ||
@@ -207,3 +203,3 @@ widget_id_index = 0, | ||
| * This effect will continue to propagate recursively. | ||
| * | ||
| * | ||
| * @memberOf BaseWidget | ||
@@ -420,3 +416,3 @@ * @instance | ||
| el = this.$element[0], | ||
| style, position; | ||
| position; | ||
| this.options.extra_class && (classes += ' ' + this.options.extra_class); | ||
@@ -426,7 +422,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); | ||
| } | ||
@@ -436,45 +429,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(); | ||
@@ -486,68 +448,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; | ||
@@ -723,24 +620,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 | ||
@@ -1066,3 +941,2 @@ * declaration. | ||
| this.signals = Object.create(this.signals_cache); | ||
| this.options.state = this.awake ? 'current' : 'asleep'; | ||
| return this; | ||
@@ -1069,0 +943,0 @@ } |
@@ -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 @@ * |
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.17%
548156
- Number of package files
- increased by1.08%
94
- Number of lines in readme file
- increased by5.68%
242
Worsened metrics
- Lines of code
- decreased by-1.73%
10745
No dependency changes