From f00d36d166fcc29eed924f4aad07cbba4aa08abb Mon Sep 17 00:00:00 2001 From: David Manthey Date: Thu, 26 Sep 2024 13:35:54 -0400 Subject: [PATCH] Remove no longer used code; adjust item list slightly. With the addition of #1649, we always use the large_image itemList rather than modifying the base girder item list. We no longer need the code that did that modification. Don't display column titles on an empty list. Make check boxes easier to click. Allow long strings to break more efficiently. --- CHANGELOG.md | 1 + .../web_client/templates/itemList.pug | 37 ++++---- .../web_client/views/configView.js | 16 ++++ .../web_client/views/itemList.js | 87 ++----------------- 4 files changed, 47 insertions(+), 94 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b09dd6197..eff20b494 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ - Better handle images without enough tile layers ([#1648](../../pull/1648)) - Add users option to config files; have a default config file ([#1649](../../pull/1649)) +- Remove no longer used code; adjust item list slightly ([#1651](../../pull/1651)) ### Bug Fixes diff --git a/girder/girder_large_image/web_client/templates/itemList.pug b/girder/girder_large_image/web_client/templates/itemList.pug index 7028911d6..66f4b38b1 100644 --- a/girder/girder_large_image/web_client/templates/itemList.pug +++ b/girder/girder_large_image/web_client/templates/itemList.pug @@ -1,23 +1,24 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '') - var colNames = []; - li.li-item-list-header - if checkboxes - span.li-item-list-header - for column, colidx in itemList.columns - if column.type !== 'image' || hasAnyLargeImage - span.li-item-list-header( - class=((column.type === 'record' && column.value !== 'controls') || column.type === 'metadata' ? 'sortable' : '') + ' ' + (sort && sort[0].type === column.type && ('' + sort[0].value === '' + column.value) ? sort[0].dir : ''), - column_type=column.type, column_value=column.value) - if column.title !== undefined - - colNames[colidx] = column.title - else - - colNames[colidx] = `${column.value.substr(0, 1).toUpperCase()}${column.value.substr(1)}` - = colNames[colidx] + if items.length + li.li-item-list-header + if checkboxes + span.li-item-list-header + for column, colidx in itemList.columns + if column.type !== 'image' || hasAnyLargeImage + span.li-item-list-header( + class=((column.type === 'record' && column.value !== 'controls') || column.type === 'metadata' ? 'sortable' : '') + ' ' + (sort && sort[0].type === column.type && ('' + sort[0].value === '' + column.value) ? sort[0].dir : ''), + column_type=column.type, column_value=column.value) + if column.title !== undefined + - colNames[colidx] = column.title + else + - colNames[colidx] = `${column.value.substr(0, 1).toUpperCase()}${column.value.substr(1)}` + = colNames[colidx] each item in items li.g-item-list-entry(class=(highlightItem && item.id === selectedItemId ? 'g-selected' : ''), public=(isParentPublic ? 'true' : 'false'), style=(itemList.layout || {}).mode == 'grid' ? ('max-width: ' + parseInt((itemList.layout || {})['max-width'] || 250) + 'px') : '') if checkboxes - span.li-item-list-cell - input.g-list-checkbox(type="checkbox", g-item-cid=item.cid) + label.li-item-list-cell(for='g-item-cid-' + item.cid) + input.g-list-checkbox(type="checkbox", g-item-cid=item.cid, id='g-item-cid-' + item.cid) for column, colidx in itemList.columns if column.type !== 'image' || hasAnyLargeImage - @@ -86,7 +87,11 @@ ul.g-item-list.li-item-list(layout_mode=(itemList.layout || {}).mode || '') input.input-sm.form-control.g-widget-metadata-value-input.g-widget-metadata-column(placeholder=column.description || "Value", value=value, title=column.description) else span.large_image_metadata - = value + if column.format === 'text' && value + //- allow long strings to be hyphenated at periods and underscores + != String(value).replace(/&/g, '&').replace(//, '>').replace(/"/, '"').replace(/'/, ''').replace(/\./g, '.­').replace(/_/g, '_­') + else + = value if value span.li-item-list-cell-filter(title="Only show items that match this metadata value exactly", filter-value=value, column-value=column.value) i.icon-filter diff --git a/girder/girder_large_image/web_client/views/configView.js b/girder/girder_large_image/web_client/views/configView.js index 078315957..9ffffd0b7 100644 --- a/girder/girder_large_image/web_client/views/configView.js +++ b/girder/girder_large_image/web_client/views/configView.js @@ -274,6 +274,22 @@ var ConfigView = View.extend({ callback(ConfigView._liconfig); } return val; + }).fail(() => { + // fallback matching server values + const li = { + columns: [ + {type: 'record', value: 'name', title: 'Name'}, + {type: 'record', value: 'controls', title: 'Contols'}, + {type: 'record', value: 'size', title: 'Size'}] + }; + const val = {itemList: li, itemListDialog: li}; + ConfigView._lastliconfig = folderId; + ConfigView._liconfigSettingsRequest = null; + ConfigView._liconfig = val; + if (callback) { + callback(ConfigView._liconfig); + } + return val; }); return ConfigView._liconfigSettingsRequest; }, diff --git a/girder/girder_large_image/web_client/views/itemList.js b/girder/girder_large_image/web_client/views/itemList.js index b1f36788a..4f659dff3 100644 --- a/girder/girder_large_image/web_client/views/itemList.js +++ b/girder/girder_large_image/web_client/views/itemList.js @@ -4,7 +4,6 @@ import Backbone from 'backbone'; import {wrap} from '@girder/core/utilities/PluginUtils'; import {getApiRoot} from '@girder/core/rest'; -import {getCurrentUser} from '@girder/core/auth'; import {AccessType} from '@girder/core/constants'; import {formatSize, parseQueryString, splitRoute} from '@girder/core/misc'; import HierarchyWidget from '@girder/core/views/widgets/HierarchyWidget'; @@ -73,16 +72,19 @@ wrap(ItemListWidget, 'initialize', function (initialize, settings) { }; }); update = true; + } else if (this._confList() && this._confList().defaultSort && this._confList().defaultSort.length) { + this._lastSort = this._confList().defaultSort; } if (query.filter || this._recurse) { this._generalFilter = query.filter; - this._setFilter(); + this._setFilter(false); update = true; } if (update) { this._setSort(); + } else { + this.render(); } - this.render(); }); this.events['click .li-item-list-header.sortable'] = (evt) => sortColumn.call(this, evt); this.events['click .li-item-list-cell-filter'] = (evt) => itemListCellFilter.call(this, evt); @@ -129,55 +131,6 @@ wrap(ItemListWidget, 'render', function (render) { } } - function addLargeImageDetails(item, container, parent, extraInfo) { - var elem; - elem = $('
'); - elem.attr('g-item-cid', item.cid); - container.append(elem); - /* We store the desired src attribute in deferred-src until we actually - * load the image. */ - elem.append($('').attr( - 'deferred-src', getApiRoot() + '/item/' + - item.id + '/tiles/thumbnail?width=160&height=100')); - var access = item.getAccessLevel(); - var extra = extraInfo[access] || extraInfo[AccessType.READ] || {}; - if (!getCurrentUser()) { - extra = extraInfo.null || {}; - } - - /* Set the maximum number of columns we have so that we can let css - * perform alignment. */ - var numColumns = Math.max((extra.images || []).length + 1, parent.attr('large_image_columns') || 0); - parent.attr('large_image_columns', numColumns); - - _.each(extra.images || [], function (imageName) { - elem = $('
'); - container.append(elem); - elem.append($('').attr( - 'deferred-src', getApiRoot() + '/item/' + item.id + - '/tiles/images/' + imageName + '?width=160&height=100&_=' + item.get('updated') - )); - elem.attr('extra-image', imageName); - }); - - $('.large_image_thumbnail', container).each(function () { - var elem = $(this); - /* Handle images loading or failing. */ - $('img', elem).one('error', function () { - $('img', elem).addClass('failed-to-load'); - $('img', elem).removeClass('loading waiting'); - elem.addClass('failed-to-load'); - _loadMoreImages(parent); - }); - $('img', elem).one('load', function () { - $('img', elem).addClass('loaded'); - $('img', elem).removeClass('loading waiting'); - _loadMoreImages(parent); - }); - }); - _loadMoreImages(parent); - } - this._confList = () => { return this._liconfig ? (this.$el.closest('.modal-dialog').length ? this._liconfig.itemListDialog : this._liconfig.itemList) : undefined; }; @@ -234,7 +187,7 @@ wrap(ItemListWidget, 'render', function (render) { return val; }; - this._setFilter = () => { + this._setFilter = (update) => { const val = this._generalFilter; let filter; const usedPhrases = {}; @@ -340,7 +293,9 @@ wrap(ItemListWidget, 'render', function (render) { this._filter = filter; this.collection.params = this.collection.params || {}; this.collection.params.text = this._filter; - this._setSort(); + if (update !== false) { + this._setSort(); + } } }; @@ -431,7 +386,6 @@ wrap(ItemListWidget, 'render', function (render) { largeImageConfig.getSettings((settings) => { var items = this.collection.toArray(); - var parent = this.$el; this._hasAnyLargeImage = !!_.some(items, function (item) { return item.has('largeImage'); }); @@ -442,29 +396,6 @@ wrap(ItemListWidget, 'render', function (render) { if (this._recurse && !((this.collection || {}).params || {}).text) { this._setFilter(); this.render(); - return; - } - render.call(this); - if (settings['large_image.show_thumbnails'] === false || - this.$('.large_image_container').length > 0) { - return this; - } - if (this._hasAnyLargeImage) { - if (!this._confList()) { - _.each(items, (item) => { - var elem = $('
'); - if (item.get('largeImage')) { - item.getAccessLevel(() => { - if (!this._confList()) { - addLargeImageDetails(item, elem, parent, settings.extraInfo); - } - }); - } - var inner = $('').html($('a[g-item-cid="' + item.cid + '"]').html()); - $('a[g-item-cid="' + item.cid + '"]', parent).first().empty().append(elem, inner); - _loadMoreImages(parent); - }); - } } return this; });