diff --git a/ui (gen4)/css/experimenting.css b/ui (gen4)/css/experimenting.css index ae8d4845..8ad25048 100755 --- a/ui (gen4)/css/experimenting.css +++ b/ui (gen4)/css/experimenting.css @@ -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); diff --git a/ui (gen4)/features/ui-widgets.js b/ui (gen4)/features/ui-widgets.js index bbe0c80d..73933cb8 100755 --- a/ui (gen4)/features/ui-widgets.js +++ b/ui (gen4)/features/ui-widgets.js @@ -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($('
') + .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... diff --git a/ui (gen4)/lib/widget/browse.js b/ui (gen4)/lib/widget/browse.js index 3b19b8c8..1beb9245 100755 --- a/ui (gen4)/lib/widget/browse.js +++ b/ui (gen4)/lib/widget/browse.js @@ -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 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($('
') + .addClass('item-group') + .append($(res))) + return $(res) } @@ -492,6 +501,17 @@ function(data, options){ // // If function will be used as cmp for sorting... // sort: || 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($('') + .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...