# jquery-ui-middleman

This gem packages the jQuery UI 1.10.0 assets (JavaScripts, stylesheets, and
images) for middleman, this is a fork of [jquery-ui-rails](https://github.com/joliss/jquery-ui-rails)

See [VERSIONS.md](VERSIONS.md) to see which versions of jquery-ui-rails bundle
which versions of jQuery UI.

## Usage

In your Gemfile, add:

```ruby
gem 'jquery-ui-middleman'
```

## Require Everything

To require all jQuery UI modules, add the following to your application.js:

```javascript
//= require jquery.ui.all
```

Also add the jQuery UI CSS to your application.css:

```css
/*
 *= require jquery.ui.all
 */
```

All images required by jQuery UI are automatically served through the asset
pipeline, so you are good to go! For example, this code will add a
[datepicker](http://jqueryui.com/demos/datepicker/):

```javascript
$(function() {
  $('.datepicker').datepicker();
});
```

## Require Specific Modules

The jQuery UI code weighs 51KB (minified + gzipped) and takes a while to
execute, so for production apps it's recommended to only include the modules
that your application actually uses. Dependencies are automatically resolved.
Simply pick one or more modules from the asset list below.

For example, if you only need the datepicker module, add this to your
application.js:

```javascript
//= require jquery.ui.datepicker
```

In your application.css, require the corresponding CSS module:

```css
/*
 *= require jquery.ui.datepicker
 */
```

## JavaScript Assets

### UI Core

```javascript
//= require jquery.ui.core
//= require jquery.ui.widget
//= require jquery.ui.mouse
//= require jquery.ui.position
```

You usually do not need to require these directly, as they are pulled in by the
other JavaScript modules as needed.

### Interactions

```javascript
//= require jquery.ui.draggable
//= require jquery.ui.droppable
//= require jquery.ui.resizable
//= require jquery.ui.selectable
//= require jquery.ui.sortable
```

For `jquery.ui.resizable` and `jquery.ui.selectable`, remember to `require`
their matching CSS files in your application.css as well.

### Widgets

```javascript
//= require jquery.ui.accordion
//= require jquery.ui.autocomplete
//= require jquery.ui.button
//= require jquery.ui.datepicker
//= require jquery.ui.dialog
//= require jquery.ui.menu
//= require jquery.ui.progressbar
//= require jquery.ui.slider
//= require jquery.ui.spinner
//= require jquery.ui.tabs
//= require jquery.ui.tooltip
```

For all of these, remember to `require` their matching CSS files in your
application.css as well.

#### I18n

Datepicker has optional i18n modules for non-US locales, named
`jquery.ui.datepicker-xx[-YY]`
([list](https://github.com/joliss/jquery-ui-rails/tree/master/app/assets/javascripts)),
for example:

```javascript
//= require jquery.ui.datepicker
//= require jquery.ui.datepicker-pt-BR
```

Note that you still need to include the main datepicker module. It is not
required automatically [for performance
reasons](https://github.com/joliss/jquery-ui-rails/issues/9#issuecomment-6524987).

### Effects

```javascript
//= require jquery.ui.effect.all
//= require jquery.ui.effect
//= require jquery.ui.effect-blind
//= require jquery.ui.effect-bounce
//= require jquery.ui.effect-clip
//= require jquery.ui.effect-drop
//= require jquery.ui.effect-explode
//= require jquery.ui.effect-fade
//= require jquery.ui.effect-fold
//= require jquery.ui.effect-highlight
//= require jquery.ui.effect-pulsate
//= require jquery.ui.effect-scale
//= require jquery.ui.effect-shake
//= require jquery.ui.effect-slide
//= require jquery.ui.effect-transfer
```

## Stylesheet Assets

### UI Core

```css
/*
 *= require jquery.ui.core
 *= require jquery.ui.theme
 */
```

You might want to require these if you do not use any of the following modules,
but still want jQuery UI's basic theming CSS. Otherwise they are automatically
pulled in as dependencies.

### Interactions

```css
/*
 *= require jquery.ui.resizable
 *= require jquery.ui.selectable
 */
```

### Widgets

```css
/*
 *= require jquery.ui.accordion
 *= require jquery.ui.autocomplete
 *= require jquery.ui.button
 *= require jquery.ui.datepicker
 *= require jquery.ui.dialog
 *= require jquery.ui.menu
 *= require jquery.ui.progressbar
 *= require jquery.ui.slider
 *= require jquery.ui.spinner
 *= require jquery.ui.tabs
 *= require jquery.ui.tooltip
 */
```

## Contributing

### Bug Reports

For bugs in jQuery UI itself, head to the [jQuery UI Development
Center](http://jqueryui.com/development).

For bugs in this gem distribution, use the GitHub issue tracker.

## Limitations

*   Only the base theme (Smoothness) is included. Once it becomes possible to
    [generate all theme
    files](https://forum.jquery.com/topic/downloading-bundling-all-themes#14737000003080244)
    from the jQuery UI sources, we can package all the other themes in the
    [ThemeRoller](http://jqueryui.com/themeroller/) gallery.

    Perhaps we can also add helper tasks to help developers generate assets for
    their own custom themes or for third-party themes (like
    [Selene](http://gravityonmars.github.com/Selene/)).

    If you still want a different theme right now, you could probably download
    a custom theme and require the theme CSS *after* requiring any other jQuery
    UI CSS files you need, making sure to serve up the theme images correctly.
    (This is arguably cumbersome, not officially supported by this gem, and
    adds 1 KB overhead as both the base theme and the custom theme are served
    up.)

*   The `jquery.ui.all.js` file is named `jquery-ui.js` in the official
    distribution. We should follow their naming. But jquery-rails provides a
    `jquery-ui.js` asset as well, so until that is removed from the
    jquery-rails gem (see issue
    [#46](https://github.com/rails/jquery-rails/issues/46)), we cannot
    distribute `jquery-ui.js` without risking conflicts.

    To reduce confusion, as long as there is no `jquery-ui.js`, we also do not
    distribute the official `jquery-ui-i18n.js` and `jquery-ui.css`. The latter
    is available as `jquery.ui.all.css` however.