r2185 - in branches/labs: demos/selectable demos/selectable/images source
Author: paul.bakaus
Date: Tue Mar 3 04:34:41 2009
New Revision: 2185
Added:
branches/labs/demos/selectable/images/
branches/labs/demos/selectable/images/1.jpg (contents, props changed)
branches/labs/demos/selectable/images/10.jpg (contents, props changed)
branches/labs/demos/selectable/images/11.jpg (contents, props changed)
branches/labs/demos/selectable/images/12.jpg (contents, props changed)
branches/labs/demos/selectable/images/13.jpg (contents, props changed)
branches/labs/demos/selectable/images/14.jpg (contents, props changed)
branches/labs/demos/selectable/images/15.jpg (contents, props changed)
branches/labs/demos/selectable/images/16.jpg (contents, props changed)
branches/labs/demos/selectable/images/17.jpg (contents, props changed)
branches/labs/demos/selectable/images/18.jpg (contents, props changed)
branches/labs/demos/selectable/images/2.jpg (contents, props changed)
branches/labs/demos/selectable/images/3.jpg (contents, props changed)
branches/labs/demos/selectable/images/4.jpg (contents, props changed)
branches/labs/demos/selectable/images/5.jpg (contents, props changed)
branches/labs/demos/selectable/images/6.jpg (contents, props changed)
branches/labs/demos/selectable/images/7.jpg (contents, props changed)
branches/labs/demos/selectable/images/8.jpg (contents, props changed)
branches/labs/demos/selectable/images/9.jpg (contents, props changed)
Removed:
branches/labs/demos/selectable/droppable.html
Modified:
branches/labs/demos/selectable/default.html
branches/labs/demos/selectable/draggable.html
branches/labs/demos/selectable/index.html
branches/labs/source/ui.selectable.js
Log:
labs:
- combined draggable and droppable selectable demos into one insanely cool
demo
- selectable now accepts non-adjacent elements (requirement to be adopted
for 1.7)
Modified: branches/labs/demos/selectable/default.html
==============================================================================
--- branches/labs/demos/selectable/default.html (original)
+++ branches/labs/demos/selectable/default.html Tue Mar 3 04:34:41 2009
@@ -10,6 +10,10 @@
<link type="text/css" href="../demos.css" rel="stylesheet" />
<style type="text/css">
+ .ui-selectable-lasso {
+ border: 1px solid black;
+ }
+
#selectable {
list-style: none;
margin: 0; padding: 10px;
@@ -22,7 +26,7 @@
padding: 3px;
}
- .ui-selected {
+ .ui-focused {
background: green;
font-weight: bold;
}
@@ -31,7 +35,10 @@
<script type="text/javascript">
$(function() {
- $("#selectable").selectable();
+ $("#selectable").selectable({
+ selectedClass: 'ui-state-active',
+ filter: 'li'
+ });
});
</script>
@@ -48,7 +55,13 @@
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
<li class="ui-state-default">Item 8</li>
- <li class="ui-state-default">Item 9</li>
+ <li class="ui-state-default">Item 9
+ <ul>
+ <li> Sub Item 1</li>
+ <li> Sub Item 2</li>
+ <li> Sub Item 3</li>
+ </ul>
+ </li>
<li class="ui-state-default">Item 10</li>
<li class="ui-state-default">Item 11</li>
<li class="ui-state-default">Item 12</li>
Modified: branches/labs/demos/selectable/draggable.html
==============================================================================
--- branches/labs/demos/selectable/draggable.html (original)
+++ branches/labs/demos/selectable/draggable.html Tue Mar 3 04:34:41 2009
@@ -5,62 +5,108 @@
<link rel="stylesheet" href="../../../../trunk/themes/base/ui.all.css"
type="text/css" media="screen">
<script type="text/javascript"
src="../../../../trunk/jquery-1.3.2.js"></script>
<script type="text/javascript"
src="../../../../trunk/ui/ui.core.js"></script>
- <script src="../../../../trunk/ui/ui.draggable.js" type="text/javascript"
charset="utf-8"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/effects.core.js"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/ui.draggable.js"></script>
+ <script type="text/javascript"
src="../../../../trunk/ui/ui.droppable.js"></script>
<script type="text/javascript"
src="../../source/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 {
- list-style: none;
margin: 0; padding: 10px;
- height: 300px;
+ 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 li {
- margin: 2px;
- width: 200px;
- padding: 3px;
+ #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 li').draggable({
- distance: 1,
+ $('#selectable img').draggable({
+ cursorAt: { left: -10, top: -10 },
+ appendTo: 'body',
helper: function(event) {
- var set = $('<div></div>'),
- selected = $("#selectable li.ui-state-active"),
+ 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 },
- center = {
- left: (selected.length < 5 ? selected.length / 2 : 2.5) * 20,
- top: ((parseInt((selected.length-1) / 5) + 1) * 20) / 2
- };
+ 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 copy = $('<div></div>')
- .addClass('ui-state-active')
- .html(this.innerHTML.split(' ')[1])
+ var o = $(this).offset();
+
+ var copy = $(this).clone()
+ .addClass('ui-state-selected')
.css({
width: $(this).width(), height: $(this).height(),
- padding: 3, margin: 2, position: 'relative', overflow: 'hidden'
+ 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,
- left: (20 * j) + click.left - center.left,
- top: (-20 * i) + click.top - center.top + (row * 20)
+ width: 10, height: 10,
+ outlineWidth: 1, margin: 1,
+ left: (20 * j), top: (row * 20)
}, 500);
});
@@ -80,28 +126,55 @@
<body>
<div class="demo">
-<ul id="selectable" tabindex='1'>
- <li class="ui-state-default">Item 1</li>
- <li class="ui-state-default">Item 2</li>
- <li class="ui-state-default">Item 3</li>
- <li class="ui-state-default">Item 4</li>
- <li class="ui-state-default">Item 5</li>
- <li class="ui-state-default">Item 6</li>
- <li class="ui-state-default">Item 7</li>
- <li class="ui-state-default">Item 8</li>
- <li class="ui-state-default">Item 9</li>
- <li class="ui-state-default">Item 10</li>
- <li class="ui-state-default">Item 11</li>
- <li class="ui-state-default">Item 12</li>
-</ul>
+<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">
- Takes a container element with a list of images in it and attaches a
magnifier behaviour to them, so when you come near
- the elements with the mouse, the size gets bigger, like the Mac OS X Dock.
+ tbd
</div><!-- End demo-description -->
Added: branches/labs/demos/selectable/images/1.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/10.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/11.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/12.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/13.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/14.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/15.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/16.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/17.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/18.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/2.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/3.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/4.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/5.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/6.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/7.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/8.jpg
==============================================================================
Binary file. No diff available.
Added: branches/labs/demos/selectable/images/9.jpg
==============================================================================
Binary file. No diff available.
Modified: branches/labs/demos/selectable/index.html
==============================================================================
--- branches/labs/demos/selectable/index.html (original)
+++ branches/labs/demos/selectable/index.html Tue Mar 3 04:34:41 2009
@@ -10,8 +10,7 @@
<h4>Examples</h4>
<ul>
<li class="demo-config-on"><a href="default.html">Default
functionality</a></li>
- <li class="demo-config-on"><a href="draggable.html">Combined
draggable</a></li>
- <li class="demo-config-on"><a href="droppable.html">Combined
droppable</a></li>
+ <li class="demo-config-on"><a href="draggable.html">Drag &
Drop</a></li>
</ul>
</div>
Modified: branches/labs/source/ui.selectable.js
==============================================================================
--- branches/labs/source/ui.selectable.js (original)
+++ branches/labs/source/ui.selectable.js Tue Mar 3 04:34:41 2009
@@ -17,10 +17,11 @@
_init: function() {
var self = this;
+ this.items = $(this.options.filter, this.element);
this.element.addClass("ui-selectable");
//Set the currentFocus to the first item
- this.currentFocus = $($(this.options.filter, this.element)[0]);
+ this.currentFocus = this.items.eq(0);
//Refresh item positions
this.refresh();
@@ -98,8 +99,7 @@
});
this.helper = $(document.createElement('div'))
- .css({border:'1px dotted black'})
- .addClass("ui-selectable-helper");
+ .addClass("ui-selectable-lasso");
},
@@ -143,7 +143,7 @@
});
//Tell the intersection that some start selected
- $(this.options.filter,
this.element).filter('.'+this.options.selectedClass).each(function() {
+ this.items.filter('.'+this.options.selectedClass).each(function() {
if(event.metaKey) {
if(this != self.clickedOnItem)
$.data(this, "selectable-item").startSelected = true;
} else self._removeFromSelection($(this), event);
@@ -165,7 +165,7 @@
this.helper.css({left: x1, top: y1, width: x2-x1, height: y2-y1});
//Loop through all items and check overlaps
- $(this.options.filter, this.element).each(function() {
+ this.items.each(function() {
var item = $.data(this, "selectable-item");
@@ -262,11 +262,11 @@
//Clear the previous selection to make room for a shift selection
this._clearSelection(event);
- var dir = $(this.options.filter,
this.element).index(this.latestWithoutModifier[0]) > $(this.options.filter,
this.element).index(this.currentFocus[0]) ? 'prev' : 'next';
- var i = this.latestWithoutModifier.data('selectable-item').selected ?
this.latestWithoutModifier[dir]() : this.latestWithoutModifier;
+ var index = this.items.index(this.latestWithoutModifier[0]) >
this.items.index(this.currentFocus[0]) ? -1 : 1;
+ var i = this.latestWithoutModifier.data('selectable-item').selected ?
this.items.eq(this.items.index(this.latestWithoutModifier[0])+index) :
this.latestWithoutModifier;
while(i.length && i[0] != this.currentFocus[0]) {
i[0] == this.previousFocus[0] ? this._addToSelection(i) :
newlySelected.push(this._addToSelection(i));
- i = i[dir]();
+ i = this.items.eq(this.items.index(i[0])+index);
}
//Readd the item with the current focus
@@ -288,7 +288,7 @@
},
- _updateSelection: function(event, dir) {
+ _updateSelection: function(event, index) {
var newlySelected = [];
@@ -298,12 +298,12 @@
this._removeFromSelection(this.previousFocus, event);
} else {
- var dir2 = $(this.options.filter,
this.element).index(this.latestSelection[0]) > $(this.options.filter,
this.element).index(this.currentFocus[0]) ? 'next' : 'prev';
+ var index2 = this.items.index(this.latestSelection[0]) >
this.items.index(this.currentFocus[0]) ? 1 : -1;
if (!this.previousFocus.data('selectable-item').selected) {
- var i = dir == dir2 ? this.previousFocus[dir2]() :
this.previousFocus;
+ var i = index == index2 ?
this.items.eq(this.items.index(this.previousFocus[0])