r3062 committed - merged labs/selectable into dev/selectable
Revision: 3062
Author: joern.zaefferer
Date: Thu Aug 13 05:07:27 2009
Log: merged labs/selectable into dev/selectable
http://code.google.com/p/jquery-ui/source/detail?r=3062
Added:
/branches/dev/selectable/demos/selectable/draggable.html
/branches/dev/selectable/demos/selectable/images
/branches/dev/selectable/demos/selectable/images/1.jpg
/branches/dev/selectable/demos/selectable/images/10.jpg
/branches/dev/selectable/demos/selectable/images/11.jpg
/branches/dev/selectable/demos/selectable/images/12.jpg
/branches/dev/selectable/demos/selectable/images/13.jpg
/branches/dev/selectable/demos/selectable/images/14.jpg
/branches/dev/selectable/demos/selectable/images/15.jpg
/branches/dev/selectable/demos/selectable/images/16.jpg
/branches/dev/selectable/demos/selectable/images/17.jpg
/branches/dev/selectable/demos/selectable/images/18.jpg
/branches/dev/selectable/demos/selectable/images/2.jpg
/branches/dev/selectable/demos/selectable/images/3.jpg
/branches/dev/selectable/demos/selectable/images/4.jpg
/branches/dev/selectable/demos/selectable/images/5.jpg
/branches/dev/selectable/demos/selectable/images/6.jpg
/branches/dev/selectable/demos/selectable/images/7.jpg
/branches/dev/selectable/demos/selectable/images/8.jpg
/branches/dev/selectable/demos/selectable/images/9.jpg
Modified:
/branches/dev/selectable/demos/selectable/default.html
/branches/dev/selectable/demos/selectable/display-grid.html
/branches/dev/selectable/demos/selectable/index.html
/branches/dev/selectable/demos/selectable/serialize.html
/branches/dev/selectable/ui/ui.selectable.js
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/draggable.html Thu Aug 13
05:07:27 2009
@@ -0,0 +1,183 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <title>jQuery UI Selectable - Combined draggable</title>
+ <link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
+ <script type="text/javascript" src="../../jquery-1.3.2.js"></script>
+ <script type="text/javascript" src="../../ui/effects.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.droppable.js"></script>
+ <script type="text/javascript" src="../../ui/ui.selectable.js"></script>
+ <link type="text/css" href="../demos.css" rel="stylesheet" />
+ <style type="text/css">
+
+ .ui-selectable-lasso {
+ border: 1px solid #eee;
+ }
+
+ html, body, div.demo {
+ padding: 0; margin: 0;
+ background: #000;
+ }
+
+ #selectable {
+ margin: 0; padding: 10px;
+ border-left: 2px solid #666; background: black;
+ position: absolute; top: 0px; bottom: 0px; left: 120px; right: 0px;
+ }
+
+ #selectable img {
+ float: left;
+ width: 100px;
+ height: 67px;
+ margin: 10px;
+ }
+
+ #selectable img.ui-state-selected {
+ border: 5px solid #fff;
+ margin: 5px;
+ }
+
+ #basket {
+ position: absolute; top: 10px; left: 10px; bottom: 10px; width: 98px;
+ background: #333; border: 2px dotted #aaa; -moz-border-radius: 5px;
-webkit-border-radius: 5px;
+ color: #eee; text-align: center; padding-top: 10px;
+ }
+
+ #basket.hover {
+ background: #555;
+ }
+
+
+
+ </style>
+ <script type="text/javascript">
+ $(function() {
+
+ $('#basket').droppable({
+ accept: '*',
+ tolerance: 'pointer',
+ hoverClass: 'hover',
+ drop: function(e, ui) {
+
+ $('#basket').empty();
+ $('#selectable').selectable('deselect');
+ ui.draggable.data('draggable').cancelHelperRemoval = true; //TODO:
Find a way to do this via API
+
+ ui.helper.find('img').each(function(i) {
+ $(this).animate({
+ width: 80, height: 60, outlineWidth: 0, margin: 0,
+ left: 20 - ui.offset.left, top: i * 77 - ui.offset.top + 20
+ });
+ });
+
+ $('div.temp').not(ui.helper).fadeOut();
+
+ }
+ });
+
+ $('#selectable img').draggable({
+ cursorAt: { left: -10, top: -10 },
+ appendTo: 'body',
+ helper: function(event) {
+
+ var selected = $("#selectable img.ui-state-selected"),
+ set = $('<div class="temp"></div>').css({ zIndex: 10, width: 80,
height: Math.ceil(selected.length / 5) * 16 }),
+ offset = $(this).offset(),
+ click = { left: event.pageX - offset.left, top: event.pageY -
offset.top };
+
+
+ selected.each(function(i) {
+
+ var row = parseInt(i / 5);
+ var j = i - (row * 5);
+
+ var o = $(this).offset();
+
+ var copy = $(this).clone()
+ .addClass('ui-state-selected')
+ .css({
+ width: $(this).width(), height: $(this).height(),
+ margin: 0, position: 'absolute', outline: '5px solid #fff',
+ left: o.left - event.pageX, top: o.top - event.pageY
+ })
+ .appendTo(set)
+ .animate({
+ width: 10, height: 10,
+ outlineWidth: 1, margin: 1,
+ left: (20 * j), top: (row * 20)
+ }, 500);
+
+ });
+
+
+ return set;
+
+ }
+ });
+
+ //YES! A STANDARD NON-OPTIONS SELECTABLE!
+ $("#selectable").selectable();
+
+ });
+ </script>
+</head>
+<body>
+<div class="demo">
+
+<div id="selectable" tabindex='1' class="ui-helper-clearfix">
+ <img src='images/1.jpg' />
+ <img src='images/2.jpg' />
+ <img src='images/3.jpg' />
+ <img src='images/4.jpg' />
+ <img src='images/5.jpg' />
+ <img src='images/6.jpg' />
+ <img src='images/7.jpg' />
+ <img src='images/8.jpg' />
+ <img src='images/9.jpg' />
+ <img src='images/10.jpg' />
+ <img src='images/11.jpg' />
+ <img src='images/12.jpg' />
+ <img src='images/13.jpg' />
+ <img src='images/14.jpg' />
+ <img src='images/15.jpg' />
+ <img src='images/16.jpg' />
+ <img src='images/17.jpg' />
+ <img src='images/18.jpg' />
+ <img src='images/1.jpg' />
+ <img src='images/2.jpg' />
+ <img src='images/3.jpg' />
+ <img src='images/4.jpg' />
+ <img src='images/5.jpg' />
+ <img src='images/6.jpg' />
+ <img src='images/7.jpg' />
+ <img src='images/8.jpg' />
+ <img src='images/9.jpg' />
+ <img src='images/10.jpg' />
+ <img src='images/11.jpg' />
+ <img src='images/12.jpg' />
+ <img src='images/13.jpg' />
+ <img src='images/14.jpg' />
+ <img src='images/15.jpg' />
+ <img src='images/16.jpg' />
+ <img src='images/17.jpg' />
+ <img src='images/18.jpg' />
+</div>
+
+<div id="basket">
+ Drop here
+</div>
+
+</div><!-- End demo -->
+
+<div class="demo-description">
+
+
+ tbd
+
+
+</div><!-- End demo-description -->
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/1.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/10.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/11.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/12.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/13.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/14.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/15.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/16.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/17.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/18.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/2.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/3.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/4.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/5.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/6.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/7.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/8.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /dev/null
+++ /branches/dev/selectable/demos/selectable/images/9.jpg Thu Aug 13
05:07:27 2009
Binary file, no diff available.
=======================================
--- /branches/dev/selectable/demos/selectable/default.html Fri Feb 20
03:40:25 2009
+++ /branches/dev/selectable/demos/selectable/default.html Thu Aug 13
05:07:27 2009
@@ -5,40 +5,85 @@
<link type="text/css" href="../../themes/base/ui.all.css"
rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
+ <script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.selectable.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
- #feedback { font-size: 1.4em; }
- #selectable .ui-selecting { background: #FECA40; }
- #selectable .ui-selected { background: #F39814; color: white; }
- #selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
- #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; }
+ .ui-selectable-lasso {
+ border: 1px solid rgb(50, 50, 50);
+ background: rgba(100, 100, 100, 0.2);
+ }
+
+ #selectable {
+ list-style: none; margin: 0; padding: 10px;
+ }
+
+ #selectable li {
+ margin: 2px;
+ width: 200px;
+ padding: 3px;
+ }
+
+ #selectable .ui-focused {
+ /*
+ background: green;
+ font-weight: bold;
+ */
+ border: 1px dotted black;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
+
+ #selectable .ui-state-active {
+ background: blue;
+ color: white;
+ border: 1px dotted black;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ }
</style>
<script type="text/javascript">
$(function() {
- $("#selectable").selectable();
+ $("#selectable").selectable({
+ selectedClass: 'ui-state-active',
+ filter: 'li',
+ keyboard: true
+ });
});
</script>
</head>
<body>
<div class="demo">
-<ol id="selectable">
- <li class="ui-widget-content">Item 1</li>
- <li class="ui-widget-content">Item 2</li>
- <li class="ui-widget-content">Item 3</li>
- <li class="ui-widget-content">Item 4</li>
- <li class="ui-widget-content">Item 5</li>
- <li class="ui-widget-content">Item 6</li>
- <li class="ui-widget-content">Item 7</li>
-</ol>
+<ul id="selectable" tabindex='1'>
+ <li><h2>Item 1</h2></li>
+ <li>Item 2</li>
+ <li>Item 3</li>
+ <li>Item 4</li>
+ <li>Item 5</li>
+ <li>Item 6</li>
+ <li>Item 7</li>
+ <li>Item 8</li>
+ <li>Item 9
+ <ul>
+ <li> Sub Item 1</li>
+ <li> Sub Item 2</li>
+ <li> Sub Item 3</li>
+ </ul>
+ </li>
+ <li>Item 10</li>
+ <li>Item 11</li>
+ <li>Item 12</li>
+</ul>
</div><!-- End demo -->
<div class="demo-description">
-Enable a DOM element (or group of elements) to be selectable. Draw a
box with your cursor to select items. Hold down the Ctrl key to make
multiple non-adjacent selections.
+
+ [Insert demo description]
+
</div><!-- End demo-description -->
</body>
=======================================
--- /branches/dev/selectable/demos/selectable/display-grid.html Fri Feb 20
03:40:25 2009
+++ /branches/dev/selectable/demos/selectable/display-grid.html Thu Aug 13
05:07:27 2009
@@ -10,9 +10,9 @@
<style type="text/css">
#feedback { font-size: 1.4em; }
- #selectable .ui-selecting { background: #FECA40; }
- #selectable .ui-selected { background: #F39814; color: white; }
- #selectable { list-style-type: none; margin: 0; padding: 0; }
+ #selectable .ui-focused { background: #FECA40; }
+ #selectable .ui-state-selected { background: #F39814; color: white; }
+ #selectable { list-style-type: none; margin: 0; padding: 0; width:400px; }
#selectable li { margin: 3px; padding: 1px; float: left; width: 100px;
height: 80px; font-size: 4em; text-align: center; }
</style>
<script type="text/javascript">
@@ -24,7 +24,7 @@
<body>
<div class="demo">
-<ol id="selectable">
+<ol id="selectable" tabindex="1">
<li class="ui-state-default">1</li>
<li class="ui-state-default">2</li>
<li class="ui-state-default">3</li>
=======================================
--- /branches/dev/selectable/demos/selectable/index.html Fri Jan 16
13:57:42 2009
+++ /branches/dev/selectable/demos/selectable/index.html Thu Aug 13
05:07:27 2009
@@ -11,7 +11,8 @@
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
<li><a href="serialize.html">Serialize</a></li>
- <li><a href="display-grid.html">Display as grid</a></li>
+ <li><a href="display-grid.html">Display as grid</a></li>
+ <li><a href="draggable.html">With draggables</a></li>
</ul>
</div>
=======================================
--- /branches/dev/selectable/demos/selectable/serialize.html Fri Feb 20
03:40:25 2009
+++ /branches/dev/selectable/demos/selectable/serialize.html Thu Aug 13
05:07:27 2009
@@ -10,19 +10,19 @@
<style type="text/css">
#feedback { font-size: 1.4em; }
- #selectable .ui-selecting { background: #FECA40; }
- #selectable .ui-selected { background: #F39814; color: white; }
+ #selectable .ui-focused { background: #FECA40; }
+ #selectable .ui-state-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
- #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; }
+ #selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height:
18px; width: 40%; }
</style>
<script type="text/javascript">
$(function() {
$("#selectable").selectable({
stop: function(){
var result = $("#select-result").empty();
- $(".ui-selected", this).each(function(){
- var index = $("#selectable li").index(this);
- result.append(" #" + (index + 1));
+ var items = $("#selectable li");
+ items.filter(".ui-state-selected").each(function(){
+ result.append(" #" + (items.index(this) + 1));
});
}
});
@@ -36,7 +36,7 @@
You've selected: <span id="select-result">none</span>.
-<ol id="selectable">
+<ol id="selectable" tabindex='1'>
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
=======================================
--- /branches/dev/selectable/ui/ui.selectable.js Mon Jun 8 17:46:00 2009
+++ /branches/dev/selectable/ui/ui.selectable.js Thu Aug 13 05:07:27 2009
@@ -1,7 +1,7 @@
/*
* jQuery UI Selectable @VERSION
*
- * Copyright (c) 2009 AUTHORS.txt (http://jqueryui.com/about)
+ * Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
* Dual licensed under the MIT (MIT-LICENSE.txt)
* and GPL (GPL-LICENSE.txt) licenses.
*
@@ -12,246 +12,497 @@
*/
(function($) {
-$.widget("ui.selectable", $.extend({}, $.ui.mouse, {
-
- _init: function() {
- var self = this;
-
- this.element.addClass("ui-selectable");
-
- this.dragged = false;
-
- // cache selectee children based on filter
- var selectees;
- this.refresh = function() {
- selectees = $(self.options.filter, self.element[0]);
- selectees.each(function() {
- var $this = $(this);
- var pos = $this.offset();
- $.data(this, "selectable-item", {
- element: this,
- $element: $this,
- left: pos.left,
- top: pos.top,
- right: pos.left + $this.outerWidth(),
- bottom: pos.top + $this.outerHeight(),
- startselected: false,
- selected: $this.hasClass('ui-selected'),
- selecting: $this.hasClass('ui-selecting'),
- unselecting: $this.hasClass('ui-unselecting')
- });
- });
- };
- this.refresh();
-
- this.selectees = selectees.addClass("ui-selectee");
-
- this._mouseInit();
-
- this.helper = $(document.createElement('div'))
- .css({border:'1px dotted black'})
- .addClass("ui-selectable-helper");
- },
-
- destroy: function() {
- this.element
- .removeClass("ui-selectable ui-selectable-disabled")
- .removeData("selectable")
- .unbind(".selectable");
- this._mouseDestroy();
-
- return this;
- },
-
- _mouseStart: function(event) {
- var self = this;
-
- this.opos = [event.pageX, event.pageY];
-
- if (this.options.disabled)
- return;
-
- var options = this.options;
-
- this.selectees = $(options.filter, this.element[0]);
-
- this._trigger("start", event);
-
- $(options.appendTo).append(this.helper);
- // position helper (lasso)
- this.helper.css({
- "z-index": 100,
- "position": "absolute",
- "left": event.clientX,
- "top": event.clientY,
- "width": 0,
- "height": 0
- });
-
- if (options.autoRefresh) {
+ $.widget('ui.selectable', $.extend({}, $.ui.mouse, {
+
+ &n