mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
added option to make list sortable by dragging....
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
aee6234631
commit
712f212f7f
@ -193,6 +193,19 @@ body {
|
||||
.browse-widget .list .item.pinned .pin-unset {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.browse-widget .list .item .sort-handle {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
|
||||
padding-left: 0.2em;
|
||||
padding-right: 0.5em;
|
||||
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.browse-widget .list .item.pinned + :not(.pinned) {
|
||||
border-top: solid 1px rgba(255, 255, 255, 0.3);
|
||||
|
||||
@ -447,6 +447,7 @@ var DialogsActions = actions.Actions({
|
||||
get uiElements(){
|
||||
return this.actions.filter(this.isUIElement.bind(this)) },
|
||||
|
||||
// XXX this knows about action priority and shortcut marker...
|
||||
// XXX should these be more like .getDoc(..) and support lists of actions???
|
||||
getDocPath: ['- Interface/',
|
||||
function(action, clean, join){
|
||||
@ -459,7 +460,9 @@ var DialogsActions = actions.Actions({
|
||||
// remove priority...
|
||||
.map(function(e){
|
||||
return clean ?
|
||||
e.replace(/^[-+]?[0-9]+:\s*/, '')
|
||||
e
|
||||
.replace(/^[-+]?[0-9]+:\s*/, '')
|
||||
.replace(/\$(\w)/g, '$1')
|
||||
: e })
|
||||
return join ? path.join('/') : path
|
||||
}],
|
||||
@ -743,7 +746,7 @@ var BrowseActionsActions = actions.Actions({
|
||||
'Crop/-80:Uncrop and keep crop image order',
|
||||
'Crop/-81:Uncrop all',
|
||||
'Crop/-82:$Uncrop',
|
||||
|
||||
// ...
|
||||
'-40:Interface',
|
||||
'-50:$Workspace',
|
||||
'-60:System',
|
||||
@ -1505,19 +1508,26 @@ var WidgetTestActions = actions.Actions({
|
||||
+'legimus, errem constituam contentiones sed ne, '
|
||||
+'cu has corpora definitionem.'
|
||||
|
||||
var res = []
|
||||
words
|
||||
.split(/\s+/g)
|
||||
.unique()
|
||||
.forEach(function(c){
|
||||
make(c)
|
||||
var e = make(c)
|
||||
// toggle opacity...
|
||||
.on('open', function(){
|
||||
var e = $(this).find('.text')
|
||||
e.css('opacity',
|
||||
e.css('opacity') == 0.3 ? '' : 0.3)
|
||||
})
|
||||
res.push(e[0])
|
||||
})
|
||||
|
||||
$(res).parent()
|
||||
.append($('<div>')
|
||||
.sortable()
|
||||
.append($(res)))
|
||||
|
||||
make.done()
|
||||
},
|
||||
// make the dialog a cloud...
|
||||
@ -1551,7 +1561,10 @@ var WidgetTestActions = actions.Actions({
|
||||
})
|
||||
|
||||
make.Heading('Numbers:')
|
||||
make.EditableList(letters, { list_id: 'letters' })
|
||||
make.EditableList(letters, {
|
||||
list_id: 'letters',
|
||||
sortable: 'y',
|
||||
})
|
||||
|
||||
// NOTE: the dialog's .parent is not yet set at this point...
|
||||
|
||||
|
||||
@ -302,7 +302,7 @@ function(text, options){
|
||||
|
||||
var elem = (options.action ? this.Action : this).call(this, text, options)
|
||||
.on(start_on, function(evt){
|
||||
event.preventDefault()
|
||||
event && event.preventDefault()
|
||||
|
||||
// edit the element...
|
||||
var editable = getEditable()
|
||||
@ -375,6 +375,9 @@ function(text, options){
|
||||
// // if true, disabled items will not get created...
|
||||
// skipDisabledItems: false,
|
||||
//
|
||||
// // if true, group the items into a <span> element...
|
||||
// groupList: true,
|
||||
//
|
||||
// // see: make(..) for additional option info.
|
||||
// ...
|
||||
// }
|
||||
@ -422,6 +425,12 @@ function(data, options){
|
||||
res.push(elem[0])
|
||||
})
|
||||
|
||||
options.groupList !== false
|
||||
&& $(res).parent()
|
||||
.append($('<div>')
|
||||
.addClass('item-group')
|
||||
.append($(res)))
|
||||
|
||||
return $(res)
|
||||
}
|
||||
|
||||
@ -492,6 +501,17 @@ function(data, options){
|
||||
// // If function will be used as cmp for sorting...
|
||||
// sort: <bool> || function(a, b){ ... },
|
||||
//
|
||||
// // Make list sortable...
|
||||
// //
|
||||
// // This can be:
|
||||
// // true - enable sort (both x and y axis)
|
||||
// // 'y' - sort only in y axis
|
||||
// // 'x' - sort only in x axis
|
||||
// // false - disable
|
||||
// //
|
||||
// // NOTE: this will force .groupList to true.
|
||||
// sortable: false,
|
||||
//
|
||||
// // This is called when a new value is added via new_item but
|
||||
// // list length limit is reached...
|
||||
// overflow: function(selected){ ... },
|
||||
@ -685,11 +705,39 @@ function(list, options){
|
||||
.filter(function(b){
|
||||
return ['UP', 'DOWN', 'TO_TOP', 'TO_BOTTOM', 'REMOVE'].indexOf(b) < 0 })
|
||||
|
||||
// if we are sortable then we will need to also be grouped...
|
||||
options.sortable
|
||||
&& (options.groupList = true)
|
||||
|
||||
// make the list...
|
||||
var res = make.List(lst, options)
|
||||
.attr('list-id', id)
|
||||
|
||||
// make sortable...
|
||||
if(options.sortable){
|
||||
// add sort handle...
|
||||
res.find('.button-container')
|
||||
.before($('<span>')
|
||||
.addClass('sort-handle')
|
||||
.html('☰'))
|
||||
// make the block sortable...
|
||||
res.parent().sortable({
|
||||
handle: '.sort-handle',
|
||||
axis: options.sortable === true ? false : options.sortable,
|
||||
forcePlaceholderSize: true,
|
||||
containment: 'parent',
|
||||
tolerance: 'pointer',
|
||||
update: function(evt, ui){
|
||||
var order = ui.item.parent()
|
||||
.find('.item')
|
||||
.map(function(){ return $(this).find('.text').text() })
|
||||
.toArray()
|
||||
var l = dialog.__list[id]
|
||||
l.splice.apply(l, [0, l.length].concat(order))
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// mark items for removal -- if a list is given by user...
|
||||
to_remove.forEach(function(e){
|
||||
dialog.filter('"'+ e +'"')
|
||||
@ -2748,7 +2796,9 @@ var BrowserPrototype = {
|
||||
return this.select(null, filtering)
|
||||
|
||||
} else if(action == 'next' || action == 'prev'){
|
||||
var to = this.select('!', filtering)[action+'All'](pattern).first()
|
||||
var all = this.filter('*')
|
||||
//var to = this.select('!', filtering)[action+'All'](pattern).first()
|
||||
var to = all.eq(all.index(this.select('!', filtering)) + (action == 'next' ? 1 : -1))
|
||||
// range check and overflow...
|
||||
if(to.length == 0){
|
||||
action = action == 'next' ? 'first' : 'last'
|
||||
@ -2758,6 +2808,7 @@ var BrowserPrototype = {
|
||||
|
||||
} else if(action == 'down' || action == 'up'){
|
||||
var from = this.select('!', filtering)
|
||||
var all = this.filter('*')
|
||||
|
||||
// special case: nothing selected -> select first/last...
|
||||
if(from.length == 0){
|
||||
@ -2769,7 +2820,10 @@ var BrowserPrototype = {
|
||||
t = t.top
|
||||
|
||||
// next lines...
|
||||
var to = from[(action == 'down' ? 'next' : 'prev') +'All'](pattern)
|
||||
//var to = from[(action == 'down' ? 'next' : 'prev') +'All'](pattern)
|
||||
var to = (action == 'down' ?
|
||||
all.slice(all.index(from))
|
||||
: $(all.slice(0, all.index(from)).toArray().reverse()))
|
||||
.filter(function(_, e){ return $(e).offset().top != t })
|
||||
|
||||
// special case: nothing below -> select wrap | last/first...
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user