diff --git a/etemplate/js/et2_widget_itempicker.js b/etemplate/js/et2_widget_itempicker.js index b8d659b8c2..ef8e8aae21 100755 --- a/etemplate/js/et2_widget_itempicker.js +++ b/etemplate/js/et2_widget_itempicker.js @@ -234,15 +234,45 @@ var et2_itempicker = et2_inputWidget.extend({ updateItemList: function(data) { var list = $j(document.createElement("ul")); var item_count = 0; + var _self = this; for(var id in data) { var item = $j(document.createElement("li")); - item.attr("id", id); if(item_count%2 == 0) { item.addClass("row_on"); } else { item.addClass("row_off"); } - item.html(data[id]); + item.attr("id", id) + .html(data[id]) + .click(function(e) { + if(e.ctrlKey || e.metaKey) { + // add to selection + $j(this).addClass("selected"); + } else if(e.shiftKey) { + // select range + var start = $j(this).siblings(".selected").first(); + if(start == 0) { + // no start item - cannot select range - select single item + $j(this).addClass("selected"); + return true; + } + var end = $j(this); + // swap start and end if start appears after end in dom hierarchy + if(start.index() > end.index()) { + var startOld = start; + start = end; + end = startOld; + } + // select start to end + start.addClass("selected"); + start.nextUntil(end).addClass("selected"); + end.addClass("selected"); + } else { + // select single item + $j(this).siblings(".selected").removeClass("selected"); + $j(this).addClass("selected"); + } + }); list.append(item); item_count++; } diff --git a/etemplate/templates/default/etemplate2.css b/etemplate/templates/default/etemplate2.css index edbede21e2..91ca114b03 100644 --- a/etemplate/templates/default/etemplate2.css +++ b/etemplate/templates/default/etemplate2.css @@ -881,8 +881,19 @@ div.et2_progress > div { margin: 0; padding: 4px; color: #284d8a; + -webkit-touch-callout: none; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; } .et2_itempicker_itemlist li.row_on { background-color: #f2f9fe; } + +.et2_itempicker_itemlist li.selected { + color: #ffffff; + background-color: #3875d7; +}