parent
b387c2ed80
commit
904ca951a5
@ -0,0 +1,15 @@ |
||||
.sortable { font-size: 80% ; } |
||||
.sortable { list-style-type: none ; margin: 0 ; padding: 0 ; } |
||||
.sortable li { |
||||
margin-bottom: 2px ; padding: 5px ; |
||||
border: 1px dotted #333 ; background: #eee ; |
||||
} |
||||
.sortable li.highlighted { background: #48c8ff ; } |
||||
.sortable li:hover { cursor: pointer ; } |
||||
|
||||
.sortable li input[type="button"] { float: right ; } |
||||
|
||||
.sortable-hint { width:100% ; height: calc(100% - 1.5em) ; font-size: 80% ; font-style: italic ; } |
||||
.sortable-hint p { margin-bottom: 1em ; } |
||||
|
||||
.sortable-trash { margin-left: 5px ; height: 2em ; } |
||||
@ -1,125 +1,117 @@ |
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
function init_sortable( $sortable, on_add, on_edit ) |
||||
( function( $ ) { |
||||
$.fn.sortable2 = function( action, args ) |
||||
{ |
||||
// initialize the support elements
|
||||
var $add = _find_sortable_helper( $sortable, "add" ) ; |
||||
$add.click( on_add ) ; |
||||
$sortable.data( "on_edit", on_edit ) ; |
||||
|
||||
// handle dragging entries to the trash
|
||||
var $trash = _find_sortable_helper( $sortable, "trash" ) ; |
||||
$sortable.sortable( { connectWith: $trash, cursor: "move" } ) ; |
||||
$trash.sortable( { |
||||
receive: function( evt, ui ) { |
||||
ui.item.remove() ; |
||||
update_sortable_hint($sortable) ; |
||||
} |
||||
} ) ; |
||||
} |
||||
var actions = { |
||||
|
||||
"init": function( $sortable2 ) { |
||||
// initialize the sortable2 and support elements
|
||||
$sortable2.data( "on_edit", args.edit ) ; |
||||
var $add = find_helper( $sortable2, "add" ) ; |
||||
$add.click( args.add ) ; |
||||
// handle dragging entries to the trash
|
||||
var $trash = find_helper( $sortable2, "trash" ) ; |
||||
$trash.prop( "src", gImagesBaseUrl + "/trash.png" ) ; |
||||
$sortable2.sortable( { connectWith: $trash, cursor: "move" } ) ; |
||||
$trash.sortable( { |
||||
receive: function( evt, ui ) { |
||||
ui.item.remove() ; |
||||
update_hint( $sortable2 ) ; |
||||
} |
||||
} ) ; |
||||
}, |
||||
|
||||
// --------------------------------------------------------------------
|
||||
"add": function( $sortable2 ) { |
||||
// add a new entry to the sortable2
|
||||
var $entry = $( "<li></li>" ) ; |
||||
$entry.append( args.content ) ; |
||||
$entry.data( "sortable2-data", args.data ) ; |
||||
$sortable2.append( $entry ) ; |
||||
init_entry( $sortable2, $entry ) ; |
||||
// update the hint
|
||||
update_hint( $sortable2 ) ; |
||||
}, |
||||
|
||||
function add_sortable( $sortable, $content, sortable_data ) |
||||
{ |
||||
// add a new entry to the sortable
|
||||
var $entry = $( "<li></li>" ) ; |
||||
$entry.append( $content ) ; |
||||
$entry.data( "sortable-data", sortable_data ) ; |
||||
$sortable.append( $entry ) ; |
||||
init_sortable_entry( $entry ) ; |
||||
"delete": function( $sortable2 ) { |
||||
// delete the entry from the sortable2
|
||||
delete_entry( $sortable2, args.entry ) ; |
||||
}, |
||||
|
||||
// update the hint
|
||||
update_sortable_hint( $sortable ) ; |
||||
"delete-all": function( $sortable2 ) { |
||||
// delete all entries from the sortable2
|
||||
$sortable2.children( "li" ).each( function() { |
||||
$(this).remove() ; |
||||
} ) ; |
||||
update_hint( $sortable2 ) ; |
||||
}, |
||||
|
||||
return $entry ; |
||||
} |
||||
"get-entry-data": function( $sortable2 ) { |
||||
// get the data associated with each sortable2 entry
|
||||
var entry_data = [] ; |
||||
$sortable2.children( "li" ).each( function() { |
||||
entry_data.push( $(this).data( "sortable2-data" ) ) ; |
||||
} ) ; |
||||
return entry_data ; |
||||
}, |
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
} ; |
||||
|
||||
function init_sortable_entry( $entry ) |
||||
{ |
||||
// initialize the sortable entry
|
||||
var $sortable = $entry.parent() ; |
||||
var on_edit = $sortable.data( "on_edit" ) ; |
||||
if ( on_edit ) { |
||||
$entry.dblclick( function() { |
||||
on_edit( $sortable, $entry ) ; |
||||
function init_entry( $sortable2, $entry ) |
||||
{ |
||||
// initialize the sortable2 entry
|
||||
var on_edit = $sortable2.data( "on_edit" ) ; |
||||
if ( on_edit ) { |
||||
$entry.dblclick( function() { // double-click => edit the entry
|
||||
on_edit( $sortable2, $entry ) ; |
||||
} ) ; |
||||
} |
||||
$entry.click( function( evt ) { // ctrl-click => delete the entry
|
||||
if ( evt.ctrlKey ) |
||||
delete_entry( $sortable2, $(this) ) ; |
||||
} ) ; |
||||
} |
||||
$entry.click( function( evt ) { |
||||
if ( evt.ctrlKey ) |
||||
delete_sortable_entry( $(this) ) ; |
||||
} ) ; |
||||
} |
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function update_sortable_hint( $sortable ) |
||||
{ |
||||
// show/hide the hint
|
||||
var $hint = _find_sortable_helper( $sortable, "hint" ) ; |
||||
if ( $sortable.children("li").length === 0 ) { |
||||
$sortable.hide() ; |
||||
$hint.show() ; |
||||
} else { |
||||
$sortable.show() ; |
||||
$hint.hide() ; |
||||
function delete_entry( $sortable2, $entry ) |
||||
{ |
||||
// ask if it's OK to delete the entry
|
||||
$entry.addClass( "highlighted" ) ; |
||||
var caption = $entry.data( "sortable2-data" ).caption ; |
||||
if ( ! caption ) |
||||
caption = $entry.html() ; |
||||
ask( "OK to delete?", escapeHTML(caption), { |
||||
"ok": function() { |
||||
// yup - make it so
|
||||
$entry.remove() ; |
||||
update_hint( $sortable2 ) ; |
||||
}, |
||||
"close": function() { $entry.removeClass("highlighted") ; }, |
||||
} ) ; |
||||
} |
||||
} |
||||
|
||||
// --------------------------------------------------------------------
|
||||
|
||||
function delete_sortable_entry( $entry ) |
||||
{ |
||||
// initialize
|
||||
var $sortable = $entry.parent() ; |
||||
|
||||
// ask if it's OK to delete the entry
|
||||
$entry.addClass( "highlighted" ) ; |
||||
var caption = $entry.data("sortable-data").caption ; |
||||
if ( ! caption ) |
||||
caption = $entry.html() ; |
||||
ask( "OK to delete?", escapeHTML(caption), { |
||||
"ok": function() { |
||||
// yup - make it so
|
||||
$entry.remove() ; |
||||
update_sortable_hint( $sortable ) ; |
||||
}, |
||||
"close": function() { $entry.removeClass("highlighted") ; }, |
||||
} ) ; |
||||
} |
||||
|
||||
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
|
||||
|
||||
function delete_all_sortable_entries( $sortable ) |
||||
{ |
||||
// delete all entries from the sortable
|
||||
$sortable.children("li").each( function() { |
||||
$(this).remove() ; |
||||
} ) ; |
||||
update_sortable_hint( $sortable ) ; |
||||
} |
||||
|
||||
// --------------------------------------------------------------------
|
||||
function update_hint( $sortable2 ) { |
||||
// show/hide the hint
|
||||
var $hint = find_helper( $sortable2, "hint" ) ; |
||||
if ( $sortable2.children("li").length === 0 ) { |
||||
$sortable2.hide() ; |
||||
$hint.show() ; |
||||
} else { |
||||
$sortable2.show() ; |
||||
$hint.hide() ; |
||||
} |
||||
} |
||||
|
||||
function get_sortable_entry_data( $sortable ) |
||||
{ |
||||
// get the data associated with each sortable entry
|
||||
var entry_data = [] ; |
||||
$sortable.children("li").each( function() { |
||||
entry_data.push( $(this).data( "sortable-data" ) ) ; |
||||
} ) ; |
||||
return entry_data ; |
||||
} |
||||
function find_helper( $sortable2, type ) { |
||||
// find a helper element for the sortable2
|
||||
var id = $sortable2.prop( "id" ) ; |
||||
var pos = id.indexOf( "sortable" ) ; |
||||
return $( "#" + id.substring(0,pos) + type+ id.substring(pos+8) ) ; |
||||
} |
||||
|
||||
// --------------------------------------------------------------------
|
||||
// execute the specified action
|
||||
var retval = actions[action]( this ) ; |
||||
|
||||
function _find_sortable_helper( $sortable, type ) |
||||
{ |
||||
// find a support element for the specified sortable
|
||||
var id = $sortable.prop( "id" ) ; |
||||
var pos = id.indexOf( "sortable" ) ; |
||||
return $( "#" + id.substring(0,pos) + type+ id.substring(pos+8) ) ; |
||||
} |
||||
return (retval !== undefined) ? retval : this ; |
||||
} ; |
||||
} ) ( jQuery ) ; |
||||
|
||||
Loading…
Reference in new issue