Skip to content

Commit

Permalink
Merge pull request #7 from alexgorbatchev/master
Browse files Browse the repository at this point in the history 
Added drag and drop support
  • Loading branch information
@vdepizzol
vdepizzol committed Jun 12, 2011
2 parents 0bd48c5 + 1b1db09 commit 678aca8
Show file tree
Hide file tree
Showing 5 changed files with 201 additions and 26 deletions.
15 changes: 15 additions & 0 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,21 @@ <h2 id="theme">Facebook Theme</h2>
</div>


<h2 id="theme">Facebook Theme & Sortable</h2>
<div>
<input type="text" id="demo-input-facebook-theme-sortable" name="blah2" />
<input type="button" value="Submit" />
<script type="text/javascript">
$(document).ready(function() {
$("#demo-input-facebook-theme-sortable").tokenInput("http://shell.loopj.com/tokeninput/tvshows.php", {
theme: "facebook",
makeSortable: true
});
});
</script>
</div>


<h2 id="custom-labels">Custom Labels</h2>
<div>
<input type="text" id="demo-input-custom-labels" name="blah" />
Expand Down
150 changes: 134 additions & 16 deletions src/jquery.tokeninput.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ var DEFAULT_SETTINGS = {
processPrePopulate: false,
parseName: null,
searchColumns: ['name'],
makeSortable: false,
escapeHTML: true,
animateDropdown: true,
onResult: null,
onAdd: null,
Expand All @@ -50,7 +52,9 @@ var DEFAULT_CLASSES = {
dropdownItem: "token-input-dropdown-item",
dropdownItem2: "token-input-dropdown-item2",
selectedDropdownItem: "token-input-selected-dropdown-item",
inputToken: "token-input-input-token"
inputToken: "token-input-input-token",
insertBefore: "token-input-insert-before",
insertAfter: "token-input-insert-after"
};

// Input box position "enum"
Expand Down Expand Up @@ -82,25 +86,25 @@ var KEY = {


// Expose the .tokenInput function to jQuery as a plugin
$.fn.tokenInput = function (url_or_data, options) {
$.fn.tokenInput = function (url_or_data_or_function, options) {
var settings = $.extend({}, DEFAULT_SETTINGS, options || {});

return this.each(function () {
new $.TokenList(this, url_or_data, settings);
new $.TokenList(this, url_or_data_or_function, settings);
});
};


// TokenList class for each input
$.TokenList = function (input, url_or_data, settings) {
$.TokenList = function (input, url_or_data_or_function, settings) {
//
// Initialization
//

// Configure the data source
if(typeof(url_or_data) === "string") {
if(typeof(url_or_data_or_function) === "string") {
// Set the url to query against
settings.url = url_or_data;
settings.url = url_or_data_or_function;

// Make a smart guess about cross-domain if it wasn't explicitly specified
if(settings.crossDomain === undefined) {
Expand All @@ -110,9 +114,11 @@ $.TokenList = function (input, url_or_data, settings) {
settings.crossDomain = (location.href.split(/\/+/g)[1] !== settings.url.split(/\/+/g)[1]);
}
}
} else if(typeof(url_or_data) === "object") {
} else if(typeof(url_or_data_or_function) === "function") {
settings.sourceFunction = url_or_data_or_function;
} else if(typeof(url_or_data_or_function) === "object") {
// Set the local data to search through
settings.local_data = url_or_data;
settings.local_data = url_or_data_or_function;
}

// Build class names
Expand Down Expand Up @@ -397,6 +403,15 @@ $.TokenList = function (input, url_or_data, settings) {
letterSpacing: input_box.css("letterSpacing"),
whiteSpace: "nowrap"
});

// True during dragging process
var dragging = false;

// the dragged Token
var dragToken;

// the destination Token
var dragDestination;

// Pre-populate list if items exist
hidden_input.val("");
Expand Down Expand Up @@ -425,6 +440,7 @@ $.TokenList = function (input, url_or_data, settings) {
//
// Private functions
//


function resize_input() {
if(input_val === (input_val = input_box.val())) {return;}
Expand All @@ -451,13 +467,17 @@ $.TokenList = function (input, url_or_data, settings) {
if(settings.parseName) {
token_name = settings.parseName(object);
} else {
token_name = "<p>"+ object.name +"</p>";
token_name = "<p>"+ escapeHTML(object.name) +"</p>";
}

var this_token = $("<li>"+ token_name +"</li>")
.addClass(settings.classes.token)
.insertBefore(input_token)
.attr('data-uniqueid', uniqueid);
.addClass(settings.classes.token)
.insertBefore(input_token)
.attr('data-uniqueid', uniqueid);

if(settings.makeSortable) {
addDragFunctionality(this_token);
};

// The 'delete token' button
$("<span>" + settings.deleteText + "</span>")
Expand All @@ -479,10 +499,17 @@ $.TokenList = function (input, url_or_data, settings) {

selected_token_index++;

// Update the hidden input
var token_ids = $.map(saved_tokens, function (el) {
return el.id;
});

token_count += 1;

return this_token;
}



// Add a token to the token list based on user input
function add_token (item) {
Expand Down Expand Up @@ -547,9 +574,93 @@ $.TokenList = function (input, url_or_data, settings) {
callback.call(hidden_input,li_data);
}
}


//
// Drag and Drop Functionality
//
function addDragFunctionality(token) {
token.bind('mousedown',function(){
var token = $(this)
dragToken = token;
token.addClass(settings.classes.selectedToken);
dragging= true;
$(document).one('mouseup',function(){
token.removeClass(settings.classes.selectedToken);
dragging=false;
move_token(token, dragDestination);
reindex_results();
});
return false;
})
.bind('mouseover',function(){
if(!dragging) return;
dragDestination = $(this);
if(is_after(dragToken, dragDestination)) {
dragDestination.addClass(settings.classes.insertAfter);
} else {
dragDestination.addClass(settings.classes.insertBefore);
};
}).bind('mouseout', function(){
if(!dragging) return;
$(this).removeClass(settings.classes.insertBefore);
$(this).removeClass(settings.classes.insertAfter);
}).bind('mouseup', function(){
$(this).removeClass(settings.classes.insertBefore);
$(this).removeClass(settings.classes.insertAfter);
});
}


function move_token(token, destinationToken) {
if(token.get(0) == destinationToken.get(0)) return;

if(is_after(token, destinationToken)) {
token.insertAfter(destinationToken);
} else {
token.insertBefore(destinationToken);
}


}

function is_after(first, last) {
index_tokens();
first = $.data(first.get(0), "tokeninput")
last = $.data(last.get(0), "tokeninput")
return last.index > first.index
}


function index_tokens() {
var i = 0;
token_list.find('li').each(function(){
var data = $.data(this, "tokeninput");
if(data){ data.index = i; }
i++;
});
}

function reindex_results() {
var ids = [], tokens = [];
token_list.find('li').each(function(){
var data = $.data(this, "tokeninput");
if(data){
ids.push(data.id);
tokens.push(data);
};
});
saved_tokens = tokens;
update_hidden_input();
}


// end Drag and Drop Functionality



// Select a token in the token list
function select_token (token) {
function select_token(token) {
token.addClass(settings.classes.selectedToken);
selected_token = token.get(0);

Expand All @@ -563,6 +674,7 @@ $.TokenList = function (input, url_or_data, settings) {
// Deselect a token in the token list
function deselect_token (token, position) {
token.removeClass(settings.classes.selectedToken);

selected_token = null;

input_box.css('color', '');
Expand Down Expand Up @@ -739,15 +851,14 @@ $.TokenList = function (input, url_or_data, settings) {
.hide();

$.each(results, function(index, value) {

var token_name;
if(settings.parseName) {
token_name = settings.parseName(value);
} else {
token_name = value.name;
}

var this_li = $("<li>" + highlight_term(token_name, query) + "</li>")
var this_li = $("<li>" + highlight_term(escapeHTML(token_name), query) + "</li>")
.appendTo(dropdown_ul);

if(index % 2) {
Expand Down Expand Up @@ -799,6 +910,13 @@ $.TokenList = function (input, url_or_data, settings) {
item.removeClass(settings.classes.selectedDropdownItem);
selected_dropdown_item = null;
}


function escapeHTML(text) {
if(!settings.escapeHTML) return text;
return $("<p></p>").text(text).html();
}


// Do a search and show the "searching" dropdown if the input is longer
// than settings.minChars
Expand Down
46 changes: 36 additions & 10 deletions styles/token-input-facebook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,10 @@ ul.token-input-list-facebook {
font-size: 12px;
font-family: Verdana;
min-height: 1px;
line-height: 15px;
z-index: 999;
margin: 0;
padding: 0;
padding: 2px 0;
background-color: #fff;
list-style-type: none;
clear: left;
Expand All @@ -20,26 +21,27 @@ ul.token-input-list-facebook {
ul.token-input-list-facebook li input {
border: 0;
width: 100px;
padding: 3px 8px;
padding: 2px 3px;
background-color: white;
margin: 2px 0;
font: inherit;
-webkit-appearance: caret;
}

li.token-input-token-facebook {
overflow: hidden;
height: auto !important;
height: 15px;
margin: 3px;
padding: 1px 3px;
margin: 2px 0 2px 4px;
padding: 1px 1px 1px 3px;
background-color: #eff2f7;
color: #000;
cursor: default;
border: 1px solid #ccd5e4;
font-size: 11px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
float: left;
white-space: nowrap;
}
Expand All @@ -52,9 +54,24 @@ li.token-input-token-facebook p {

li.token-input-token-facebook span {
color: #a6b3cf;
margin-left: 5px;
margin: 1px 0 0 2px;
font-weight: bold;
cursor: pointer;
padding: 2px;
width: 11px;
height: 11px;
line-height: 9px;
display: inline-block;
text-align: center;
vertical-align: top;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}

li.token-input-token-facebook span:hover {
color: #fff;
background: #5670a6;
}

li.token-input-selected-token-facebook {
Expand All @@ -66,10 +83,18 @@ li.token-input-selected-token-facebook {
li.token-input-input-token-facebook {
float: left;
margin: 0;
padding: 0;
padding: 1px;
list-style-type: none;
}

li.token-input-insert-before-facebook {
border-left: 1px solid red;
}

li.token-input-insert-after-facebook {
border-right: 1px solid red;
}

div.token-input-dropdown-facebook {
position: absolute;
width: 400px;
Expand Down Expand Up @@ -119,4 +144,5 @@ div.token-input-dropdown-facebook ul li em {
div.token-input-dropdown-facebook ul li.token-input-selected-dropdown-item-facebook {
background-color: #3b5998;
color: #fff;
}
}

Loading

0 comments on commit 678aca8

Please sign in to comment.