123 lines
3.8 KiB
JavaScript
123 lines
3.8 KiB
JavaScript
/*
|
|
* Portal - Item selection.
|
|
*/
|
|
|
|
(function (win, doc, undef)
|
|
{
|
|
"use strict";
|
|
let si = sbm.data.selectItem = sbm.data.selectItem || { items: {}, fn: {}, $dlg: {}, itemIdPrefix: 'Itm_' };
|
|
|
|
//--------------------------------------------------------------
|
|
/*
|
|
* Item selection config:
|
|
* - caption - dialog title.
|
|
* - items - list of objects: { id, name }
|
|
* - itemId - currently selected item.
|
|
* - fnCallback - method to call on completion to store selected item.
|
|
*/
|
|
sbm.fn.selectItem = function (cfg)
|
|
{
|
|
si.cfg = cfg;
|
|
si.itemId = cfg.itemId;
|
|
si.fn.showSelectItem();
|
|
}
|
|
si.fn.showSelectItem = function ()
|
|
{
|
|
$('.SelectedItemName', si.$dlg).text(si.fn.getItemName(si.itemId));
|
|
$('#ifItemFilter', si.$dlg).val('');
|
|
si.fn.displayItems();
|
|
sbm.openDialog(si.$dlg.dialog('option', { title: si.cfg.caption || 'Select Item' }), 480, 640);
|
|
}
|
|
|
|
//--------------------------------------------------------------
|
|
si.fn.compareItems = function (a, b)
|
|
{
|
|
var comparison = a.name.toLowerCase().localeCompare(b.name.toLowerCase());
|
|
if (comparison === 0)
|
|
return a.name.localeCompare(b.name);
|
|
return comparison;
|
|
}
|
|
|
|
//--------------------------------------------------------------
|
|
si.fn.displayItems = function ()
|
|
{
|
|
let filter = $('#ifItemFilter', si.$dlg).val();
|
|
let reFilter = new RegExp(sbm.escapeRegExp((filter || '').trim()), 'i');
|
|
let $itemsAvail = $('.sbm-selectItem-items.AvailableItems').empty();
|
|
let $itemTmpl = $('.sbm-panel-item-template .sbm-panel-item.Item');
|
|
let items = [...si.cfg.items];
|
|
items.sort(si.fn.compareItems);
|
|
for (let rgnIdx = 0; rgnIdx < items.length; rgnIdx++)
|
|
{
|
|
let item = items[rgnIdx];
|
|
let id = item.id;
|
|
if (filter && !item.name.match(reFilter)) continue;
|
|
let $item = $itemTmpl.clone();
|
|
$item.prop('id', si.itemIdPrefix + id).on('click', function () { si.fn.onClickItem(id); }).on('dblclick', function () { si.fn.onDblClickItem(id); }).find('.ItemName').text(item.name).end();
|
|
if (id == si.itemId) $item.addClass('sel');
|
|
$itemsAvail.append($item);
|
|
}
|
|
}
|
|
si.fn.getItem = function (id)
|
|
{
|
|
for (let rgnIdx = 0; rgnIdx < si.cfg.items.length; rgnIdx++)
|
|
{
|
|
let item = si.cfg.items[rgnIdx];
|
|
if (item.id == id) return item;
|
|
}
|
|
}
|
|
si.fn.getItemName = function (id)
|
|
{
|
|
let item = si.fn.getItem(id);
|
|
return item ? item.name : '';
|
|
}
|
|
|
|
//--------------------------------------------------------------
|
|
si.fn.onClickItem = function (id)
|
|
{
|
|
$('.SelectedItemName', si.$dlg).text(si.fn.getItemName(si.itemId = id));
|
|
$('.sbm-panel-item.Item').removeClass('sel');
|
|
$('.sbm-panel-item.Item#' + si.itemIdPrefix + id).addClass('sel');
|
|
}
|
|
si.fn.onDblClickItem = function (id)
|
|
{
|
|
si.itemId = id;
|
|
si.fn.storeSelectItem();
|
|
}
|
|
si.fn.storeSelectItem = function ()
|
|
{
|
|
if (!si.itemId) return;
|
|
let item = si.fn.getItem(si.itemId);
|
|
if (!item) return;
|
|
if (si.cfg.fnCallback) si.cfg.fnCallback(item);
|
|
si.$dlg.dialog('close');
|
|
si.fn.cleanUp();
|
|
}
|
|
si.fn.cleanUp = function ()
|
|
{
|
|
delete si.cfg;
|
|
delete si.itemId;
|
|
}
|
|
|
|
//--------------------------------------------------------------
|
|
si.fn.onDlgSize = function ()
|
|
{
|
|
let $pnl = $('.sbm-selectItem-items.AvailableItems');
|
|
$pnl.outerHeight(Math.floor(si.$dlg.innerHeight() - $pnl.position().top - ($pnl.outerHeight(true) - $pnl.innerHeight())));
|
|
}
|
|
|
|
//--------------------------------------------------------------
|
|
$(function ()
|
|
{
|
|
var opt = sbm.dlgOpts();
|
|
opt.open = function (evt, ui) { si.fn.onDlgSize(); };
|
|
opt.resize = function (evt, ui) { si.fn.onDlgSize(); };
|
|
opt.buttons[sbm.lbl.ok] = function () { si.fn.storeSelectItem(); };
|
|
opt.buttons[sbm.lbl.cancel] = function () { si.fn.cleanUp(); $(this).dialog('close'); };
|
|
si.$dlg = $('#dlgSelectItem').dialog(opt);
|
|
});
|
|
|
|
//--------------------------------------------------------------
|
|
}(window, window.document));
|
|
|
|
/* The End */ |