Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
uijet - npm Package Compare versions
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
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
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