r2169 - in branches/labs: demos demos/selectable source

r2169 - in branches/labs: demos demos/selectable source


Author: paul.bakaus
Date: Mon Mar 2 06:48:09 2009
New Revision: 2169
Added:
branches/labs/demos/selectable/
branches/labs/demos/selectable/default.html
branches/labs/demos/selectable/draggable.html
branches/labs/demos/selectable/index.html
branches/labs/source/ui.selectable.js
Modified:
branches/labs/demos/index.html
Log:
labs: added experimental selectable demo
Modified: branches/labs/demos/index.html
==============================================================================
--- branches/labs/demos/index.html    (original)
+++ branches/labs/demos/index.html    Mon Mar 2 06:48:09 2009
@@ -2,17 +2,20 @@
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title>jQuery Sky Demos</title>
+    <title>jQuery UI Labs</title>
    <link type="text/css" href="demos.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../../trunk/themes/base/ui.all.css"
type="text/css" media="screen">
    
    <script src="../../../trunk/jquery-1.3.2.js"
type="text/javascript"></script>
    <script src="../../../trunk/ui/ui.core.js"
type="text/javascript"></script>
    <script src="../../../trunk/ui/ui.slider.js" type="text/javascript"
charset="utf-8"></script>
+    <script src="../../../trunk/ui/ui.draggable.js" type="text/javascript"
charset="utf-8"></script>
    
    <script src="../source/ui.carousel.js" type="text/javascript"></script>
    <script src="../source/ui.coverflow.js" type="text/javascript"></script>
    <script src="../source/ui.magnifier.js" type="text/javascript"></script>
+    <script src="../source/ui.selectable.js" type="text/javascript"></script>
+    
    
    <!-- Transformie is a plugin that makes webkit's CSS transforms work in
Internet Explorer (download at http://paulbakaus.com/projects) -->
    <script src="http://transformie.googlecode.com/svn/trunk/sylvester.js"
type="text/javascript"></script>
@@ -152,6 +155,8 @@
    <tr>
        <td class="left-nav">
            <dl class="demos-nav">
+                <dt>Interactions</dt>
+                    <dd><a href="selectable/index.html">Selectable</a></dd>
                <dt>Widgets</dt>
                    <dd><a href="carousel/index.html">Carousel</a></dd>
                    <dd><a href="coverflow/index.html">Coverflow</a></dd>
Added: branches/labs/demos/selectable/default.html
==============================================================================
--- (empty file)
+++ branches/labs/demos/selectable/default.html    Mon Mar 2 06:48:09 2009
@@ -0,0 +1,69 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Selectable - Default functionality</title>
+    <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="../../source/ui.selectable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <style type="text/css">
+    
+        #selectable {
+            list-style: none;
+            margin: 0; padding: 10px;
+            height: 300px;
+        }
+        
+        #selectable li {
+            margin: 2px;
+            width: 200px;
+            padding: 3px;
+        }
+        
+        .ui-selected {
+            background: green;
+            font-weight: bold;
+        }
+    
+    </style>
+    <script type="text/javascript">
+    $(function() {
+
+        $("#selectable").selectable();
+        
+    });
+    </script>
+</head>
+<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><!-- 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.
+




+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/labs/demos/selectable/draggable.html
==============================================================================
--- (empty file)
+++ branches/labs/demos/selectable/draggable.html    Mon Mar 2 06:48:09 2009
@@ -0,0 +1,110 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Selectable - Default functionality</title>
+    <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="../../source/ui.selectable.js"></script>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+    <style type="text/css">
+    
+        #selectable {
+            list-style: none;
+            margin: 0; padding: 10px;
+            height: 300px;
+        }
+        
+        #selectable li {
+            margin: 2px;
+            width: 200px;
+            padding: 3px;
+        }
+    
+    </style>
+    <script type="text/javascript">
+    $(function() {
+
+
+        
+        $('#selectable li').draggable({
+            distance: 1,
+            helper: function(event) {
+                
+                var set = $('<div></div>'),
+                    selected = $("#selectable li.ui-state-active"),
+                    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
+                    };
+                
+                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])
+                        .css({
+                            width: $(this).width(), height: $(this).height(),
+                            padding: 3, margin: 2, position: 'relative', overflow: 'hidden'
+                        })
+                        .appendTo(set)
+                        .animate({
+                            width: 10,
+                            height: 10,
+                            left: (20 * j) + click.left - center.left,
+                            top: (-20 * i) + click.top - center.top + (row * 20)
+                        }, 500);
+                    
+                });
+                
+                
+                return set;
+                
+            }
+        });
+        
+        //YES! A STANDARD NON-OPTIONS SELECTABLE!
+        $("#selectable").selectable();
+        
+    });
+    </script>
+</head>
+<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><!-- 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.
+




+
+</div><!-- End demo-description -->
+
+</body>
+</html>
Added: branches/labs/demos/selectable/index.html
==============================================================================
--- (empty file)
+++ branches/labs/demos/selectable/index.html    Mon Mar 2 06:48:09 2009
@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <title>jQuery UI Labs - Selectable Demos</title>
+    <link type="text/css" href="../demos.css" rel="stylesheet" />
+</head>
+<body>
+
+<div class="demos-nav">
+    <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>
+    </ul>
+</div>
+
+</body>
+</html>
Added: branches/labs/source/ui.selectable.js
==============================================================================
--- (empty file)
+++ branches/labs/source/ui.selectable.js    Mon Mar 2 06:48:09 2009
@@ -0,0 +1,425 @@
+/*
+ * jQuery UI Selectable @VERSION
+ *
+ * Copyright (c) 2009 AUTHORS.txt (http://ui.jquery.com/about)
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * http://docs.jquery.com/UI/Selectables
+ *
+ * Depends:
+ *    ui.core.js
+ */
+(function($) {
+
+    $.widget('ui.selectable', $.extend({}, $.ui.mouse, {
+
+        _init: function() {
+
+            var self = this;
+            this.element.addClass("ui-selectable");
+
+            //Set the currentFocus to the first item
+            this.currentFocus = $($(this.options.filter, this.element)[0]);
+            
+            //Refresh item positions
+            this.refresh();
+
+            //Disable text selection
+            this.element.disableSelection();
+
+            //Prepare caret selection
+            if(this.options.lasso) this._mouseInit();
+
+            this.element
+                .bind('mousedown.selectable', function(event) {
+
+                    var item = self._targetIsItem(event.target);
+                    if (!item) return;
+                    
+                    // If item is part of current selection and current
+                 // selection is multiple, return and allow mouseup
+                 // to fire (Windows gets this right too, OSX doesn't)
+                 if(self._selection.length > 1 &&
$(item).hasClass(self.options.selectedClass)) {
+                     return (self._listenForMouseUp = 1);
+                 }
+                    
+                    if(self._trigger('beforeselect', event) === false)
+                        return true;
+
+                    self._select(event, item);
+                    self.element[0].focus();
+                    event.preventDefault();
+                    
+                })
+                .bind('mouseup.selectable', function(event) {
+                    if(self._listenForMouseUp) {
+                        
+                        self._listenForMouseUp = 0;
+                        var item = self._targetIsItem(event.target);
+                        if (!item) return;
+                        
+                        if(self._trigger('beforeselect', event) === false)
+                            return true;
+                        
+                        self._select(event, item);
+                        self.element[0].focus();
+                        event.preventDefault();
+                    }
+                })
+                .bind('focus.selectable', function() {
+                    self.currentFocus.addClass('ui-focused');
+                })
+                .bind('blur.selectable', function() {
+                    self.currentFocus.removeClass('ui-focused');
+                })
+                .bind('keydown.selectable', function(event) {
+
+                    if(!self.options.keyboard)
+                        return;
+                        
+                    if(self._trigger('beforeselect', event) === false)
+                        return true;
+
+                    if (event.keyCode == $.ui.keyCode.DOWN || event.keyCode ==
$.ui.keyCode.RIGHT) {
+                        self.selectNext(event);
+                        event.preventDefault();
+                    }
+
+                    if (event.keyCode == $.ui.keyCode.UP || event.keyCode ==
$.ui.keyCode.LEFT) {
+                        self.selectPrevious(event);
+                        event.preventDefault();
+                    }
+
+                    if ((event.ctrlKey || event.metaKey) && event.keyCode ==
$.ui.keyCode.SPACE) {
+                        self._toggleSelection(self.currentFocus, event);
+                    }
+
+                });
+
+            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();
+        },
+        
+        _mouseCapture: function(event) {
+            //If the item we start dragging on is a selectable, we bail (if
keyboard is used)
+            this.clickedOnItem = this._targetIsItem(event.target);
+            return !this.options.keyboard || !this.clickedOnItem;
+        },
+        
+        _mouseStart: function(event) {
+            
+            var self = this, o = this.options;
+            this.opos = [event.pageX, event.pageY];
+    
+            if (o.disabled)
+                return;
+    
+            //Cache positions
+            this.refresh();
+    
+            //Trigger start event
+            this._trigger("start", event, this._uiHash());
+    
+            // append and position helper (lasso)
+            $('body').append(this.helper);
+            this.helper.css({
+                zIndex: 100,
+                position: "absolute",
+                left: event.clientX,
+                top: event.clientY,
+                width: 0,
+                height: 0
+            });
+
+            //Tell the intersection that some start selected
+            $(this.options.filter,
this.element).filter('.'+this.options.selectedClass).each(function() {
+                if(event.metaKey) {
+                    if(this != self.clickedOnItem)
$.data(this, "selectable-item").startSelected = true;
+                } else self._removeFromSelection($(this), event);
+            });
+                
+        },
+        
+        _mouseDrag: function(event) {
+            
+            var self = this, o = this.options;
+    
+            if (o.disabled)
+                return;
+    
+            //Do the lasso magic
+            var x1 = this.opos[0], y1 = this.opos[1], x2 = event.pageX, y2 =
event.pageY;
+            if (x1 > x2) { var tmp = x2; x2 = x1; x1 = tmp; }
+            if (y1 > y2) { var tmp = y2; y2 = y1; y1 = tmp; }
+            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() {
+                
+          &n