diff --git a/CHANGELOG.md b/CHANGELOG.md index 5013f6a..c7b37c7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## Release 1.2 (March 28, 2016) + +* New configuration option: unhighlightAfterMove. This is enabled by default. +* New configuration option: optionCssClass. This specifies a CSS class which is applied to all <options>s. +* Added the ability to style <option>s individually via their declarations (works independently of, but also can be used in conjunction with, optionCssClass) +* Fixed class names typo in stylesheet.css +* Fixed rendering of demo.html in ancient IE 8 + + ## Release 1.1 (March 27, 2016) * Added support for initializing on pre-existing, pre-populated <select>s diff --git a/README.md b/README.md index 795d2c9..cc50e13 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -PickAndChoose v1.1 +PickAndChoose v1.2 ================== See LICENSE for this software's licensing terms. @@ -76,6 +76,7 @@ See the included HTML file for more in-depth examples. | `buttonSelectAllClass` | The CSS class of the select-all <button> | pacButtonSelectAll | | `buttonDeselectClass` | The CSS class of the deselect <button> | pacButtonDeselect | | `buttonDeselectAllClass` | The CSS class of the deselect-all <button> | pacButtonDeselectAll | +| `optionCssClass` | A CSS class to apply to all <options>s | null | | `buttonSelectText` | The text of the select button | > | | `buttonSelectAllText` | The text of the select-all button | >> | | `buttonDeselectText` | The text of the deselect button | < | @@ -87,6 +88,7 @@ See the included HTML file for more in-depth examples. | `selectedName` | The name of the <select> containing the selected items. If you provide your own <select> elements instead of having them constructed for you, this setting is ignored. | pacSelectedItems | | `unselectedItems` | Key/value pairs of items to populate the unselected items' <select> with. If you provide your own <select> elements instead of having them constructed for you, this setting is ignored. | null | | `selectedItems` | Key/value pairs of items to populate the selected items' <select> with. If you provide your own <select> elements instead of having them constructed for you, this setting is ignored. | null | +| `unhighlightAfterMove` | Determines whether to unhighlight an item after moving it to the other <select>. Highlighted items appear as if they've been clicked. | true | | `onChangeCallback` | A callback function to execute when the user uses the buttons. The callback only fires if the user's action resulted in a change. | null | | `showErrors` | Determines whether to display initialization errors in the page. If set to `true`, your users will see them, so you might choose to treat this as a debug option. Regardless of the setting, the plugin will throw initialization errors as exceptions. | false | diff --git a/css/pickAndChoose.css b/css/pickAndChoose.css index 74b4fe3..2165c69 100644 --- a/css/pickAndChoose.css +++ b/css/pickAndChoose.css @@ -11,35 +11,30 @@ */ -/* containers */ - .pacContainer { display: table; - vertical-align: middle; + height: 250px; } -.pacContainer .msUnselectedContainer { +.pacContainer .pacUnselectedContainer, +.pacContainer .pacSelectedContainer { display: table-cell; - vertical-align:middle; + height: 100%; + vertical-align: middle; } .pacContainer .pacButtonContainer { display: table-cell; + height: 100%; vertical-align: middle; padding-left: 25px; padding-right: 25px; } -.pacContainer .msSelectedContainer { - display: table-cell; - vertical-align:middle; -} - -/* container content */ - -.pacContainer select { +.pacContainer .pacUnselectedContainer select, +.pacContainer .pacSelectedContainer select { width: 200px; - height: 300px; + height: 100%; } .pacContainer .pacButtonContainer button.pacButtonSelect, diff --git a/demo.html b/demo.html index 86a436b..89fc4da 100644 --- a/demo.html +++ b/demo.html @@ -1,7 +1,7 @@ PickAndChoose Demo @@ -33,44 +34,57 @@ color: #FFFFFF !important; } - div#callbackOutput { + #callbackOutput { margin-top: 20px; width: 500px; min-height: 80px; border: 1px solid #000000; } - - - + #widget5 select { + border: 1px solid black; + } - + + + @@ -157,10 +204,12 @@

Successful initialization

Overriding default configuration: ensuring uniqueness of <select> identifiers & altering button properties

-

- Note that for the first time, IDs and names were passed in.
- See README.md or the plugin code for a complete list of customization options. -

+

+ Note that for the first time, IDs and names were passed in. You need to do this if you have more than one widget in + your page, since relying on the default value will result in duplicates. +

+

CSS styling has also been added to the buttons, and their default text has been changed.

+

See README.md or the plugin code for a complete list of customization options.

Demonstrating callback

@@ -168,13 +217,13 @@

Demonstrating callback

Look here after making some selections

Initializing with preexisting <select> elements

-

- Unlike the other examples seen thus far, the <select>s seen here were
- not created by PickAndChoose; they were already present in the page.
- The buttons were still created dynamically. If you go this route, put
- the <select>s adjacent to each other in their own container, with no
+

+ Unlike the other examples seen thus far, the <select>s seen here were + not created by PickAndChoose; they were already present in the page. + The buttons were still created dynamically. If you go this route, put + the <select>s adjacent to each other in their own container, with no other content inside. -

+

+

Styling the selection boxes

+

+ PickAndChoose supports two ways of specifying a CSS class for <option>: +

+
    +
  1. + settings.optionCssClass, which is applied to every <option> + in the widget. Here, a global style is used to make the text white. Of course, + you could also use CSS to target them directly, rather than assigning a class. + That's how the <select>s got their hover colors. Use whichever method + you prefer. +

    +
    2. + +
  2. Individual styles:

    + As of PickAndChoose v1.2, an <option>'s value declaration can be an + object. This allows you to specify additional configuration for an + <option>, which you can use to add a CSS class. Here, individual + styles are used to set the background color. +
    3. +
+
+

Failed initialization

-

- If you attempt to initialize the widget with the same key present in both
- <select>s, the widget will not initialize and an exception will be
- thrown. If showErrors is set to true, the exception message is written
- to the container (see below). If you can't be sure of the integrity of
- your data, and if you want the rest of your page's JavaScript to continue
- in the event of an initialization failure, be sure to wrap the plugin
+

+ If you attempt to initialize the widget with the same key present in both + <select>s, the widget will not initialize and an exception will be + thrown. If showErrors is set to true, the exception message is written + to the container (see below). If you can't be sure of the integrity of + your data, and if you want the rest of your page's JavaScript to continue + in the event of an initialization failure, be sure to wrap the plugin invocation in a try/catch. -

-
+

+

Donations

diff --git a/jquery.pickandchoose.js b/jquery.pickandchoose.js index e4b561e..1f6ece7 100644 --- a/jquery.pickandchoose.js +++ b/jquery.pickandchoose.js @@ -1,5 +1,5 @@ /* - * PickAndChoose v1.1 + * PickAndChoose v1.2 * https://www.github.com/kloverde/jquery-PickAndChoose * * This software is licensed under the 3-clause BSD license. @@ -44,6 +44,9 @@ // The CSS class of the deselect-all