added possibility to include trigger char in search (for hashtags)
git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/pickitem-widget@100401 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
parent
f54403ff43
commit
f5779c5372
|
@ -37,18 +37,19 @@ public class PickItem implements EntryPoint {
|
||||||
private void sample() {
|
private void sample() {
|
||||||
HandlerManager eventbus = new HandlerManager(null);
|
HandlerManager eventbus = new HandlerManager(null);
|
||||||
ArrayList<ItemBean> users = new ArrayList<ItemBean>();
|
ArrayList<ItemBean> users = new ArrayList<ItemBean>();
|
||||||
users.add(new ItemBean("id", "test.user1", "Test Foo", "phot URL"));
|
users.add(new ItemBean("id", "test.user1", "TestFoo", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user2", "Test Fie", "phot URL"));
|
users.add(new ItemBean("id", "test.user2", "TestFie", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user3", "Abba Foo", "phot URL"));
|
users.add(new ItemBean("id", "test.user3", "tAbbaFoo", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user4", "ABabba Fie", "phot URL"));
|
users.add(new ItemBean("id", "test.user4", "#ABabbaFie", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user5", "ACaro Foo", "phot URL"));
|
users.add(new ItemBean("id", "test.user5", "#ACaroFoo", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user6", "Dario Fie", "phot URL"));
|
users.add(new ItemBean("id", "test.user6", "#DarioFie", "phot URL"));
|
||||||
users.add(new ItemBean("id", "test.user7", "Ergo Fie", "phot URL"));
|
users.add(new ItemBean("id", "test.user7", "#ErgoFie", "phot URL"));
|
||||||
|
|
||||||
final TextBox tb = new TextBox();
|
final TextBox tb = new TextBox();
|
||||||
final int popUpY = tb.getAbsoluteTop()+30;
|
final int popUpY = tb.getAbsoluteTop()+30;
|
||||||
|
|
||||||
final PickItemsDialog pickUserDlg = new PickItemsDialog('#', users, eventbus, 300, true);
|
final PickItemsDialog pickUserDlg = new PickItemsDialog('#', users, eventbus, 300);
|
||||||
|
pickUserDlg.withTriggerCharIncluded();
|
||||||
tb.addKeyUpHandler(new KeyUpHandler() {
|
tb.addKeyUpHandler(new KeyUpHandler() {
|
||||||
@Override
|
@Override
|
||||||
public void onKeyUp(KeyUpEvent event) {
|
public void onKeyUp(KeyUpEvent event) {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
@external pick-item, pickDialog, pick-label, pickperson, pickperson-selected, pickperson-photo, user-table, user-table-row, user-table-col, user-table-col.content, .user-table-col.smallphoto, user-token, content, smallphoto;
|
@external pickitem-selected, pickitem, pick-item, pickDialog, pick-label, pickperson, pickperson-selected, pickperson-photo, user-table, user-table-row, user-table-col, user-table-col.content, .user-table-col.smallphoto, user-token, content, smallphoto;
|
||||||
|
|
||||||
.pickDialog {
|
.pickDialog {
|
||||||
border: 1px solid #333;
|
border: 1px solid #CCC;
|
||||||
background-color: #FFF;
|
background-color: #FFF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -13,19 +13,18 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.pick-item {
|
.pick-item {
|
||||||
|
padding: 7px 10px 7px;
|
||||||
font-family: 'Helvetica Neue', Arial, sans-serif;
|
font-family: 'Helvetica Neue', Arial, sans-serif;
|
||||||
font-size: 13px;
|
font-size: 15px;
|
||||||
|
line-height: 18px;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
padding: 0 4px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pickperson {
|
.pickperson {
|
||||||
color: #0B61A4;
|
color: #0B61A4;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
cursor: hand;
|
cursor: hand;
|
||||||
background: #FFF;
|
background: #FFF;
|
||||||
|
|
||||||
-webkit-transition: background-color .25s ease-in-out;
|
-webkit-transition: background-color .25s ease-in-out;
|
||||||
-moz-transition: background-color .25s ease-in-out;
|
-moz-transition: background-color .25s ease-in-out;
|
||||||
-o-transition: background-color .25s ease-in-out;
|
-o-transition: background-color .25s ease-in-out;
|
||||||
|
@ -37,6 +36,27 @@
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pickitem-selected {
|
||||||
|
background-color: #0B61A4;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickitem {
|
||||||
|
color: #66757f;
|
||||||
|
cursor: pointer;
|
||||||
|
cursor: hand;
|
||||||
|
background: #FFF;
|
||||||
|
-webkit-transition: background-color .25s ease-in-out;
|
||||||
|
-moz-transition: background-color .25s ease-in-out;
|
||||||
|
-o-transition: background-color .25s ease-in-out;
|
||||||
|
transition: background-color .25s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pickitem:active,.pickitem:focus,.pickitem:hover {
|
||||||
|
background-color: #0B61A4;
|
||||||
|
color: whitesmoke;
|
||||||
|
}
|
||||||
|
|
||||||
.pickperson:active,.pickperson:focus,.pickperson:hover {
|
.pickperson:active,.pickperson:focus,.pickperson:hover {
|
||||||
background-color: #033E6B;
|
background-color: #033E6B;
|
||||||
color: whitesmoke;
|
color: whitesmoke;
|
||||||
|
|
|
@ -9,7 +9,6 @@ import org.gcube.portlets.widgets.pickitem.client.uibinder.SelectableItem;
|
||||||
import org.gcube.portlets.widgets.pickitem.client.uibinder.WithPhotoTemplate;
|
import org.gcube.portlets.widgets.pickitem.client.uibinder.WithPhotoTemplate;
|
||||||
import org.gcube.portlets.widgets.pickitem.shared.ItemBean;
|
import org.gcube.portlets.widgets.pickitem.shared.ItemBean;
|
||||||
|
|
||||||
import com.google.gwt.core.client.GWT;
|
|
||||||
import com.google.gwt.event.dom.client.KeyCodes;
|
import com.google.gwt.event.dom.client.KeyCodes;
|
||||||
import com.google.gwt.event.dom.client.MouseDownEvent;
|
import com.google.gwt.event.dom.client.MouseDownEvent;
|
||||||
import com.google.gwt.event.dom.client.MouseDownHandler;
|
import com.google.gwt.event.dom.client.MouseDownHandler;
|
||||||
|
@ -61,25 +60,29 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
//needed because is selected when it popups
|
//needed because is selected when it popups
|
||||||
private Widget first;
|
private Widget first;
|
||||||
private boolean hasPhoto;
|
private boolean hasPhoto;
|
||||||
|
private boolean includeTriggerChar;
|
||||||
|
|
||||||
static {
|
static {
|
||||||
CssAndImages.INSTANCE.css().ensureInjected();
|
CssAndImages.INSTANCE.css().ensureInjected();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param triggerChar the 'single char' used to trigger the items list show, e.g. '@', '#' ....
|
* @param triggerChar the 'single char' used to trigger the items list show, e.g. '@', '#' ....
|
||||||
* @param the list of user to pick
|
* @param the list of user to pick
|
||||||
* @param eventBus the event bus on where the widget will fire the selected user event
|
* @param eventBus the event bus on where the widget will fire the selected user event
|
||||||
* @param widthInPixel the desired width (grater than 199 pixel)
|
* @param widthInPixel the desired width (grater than 199 pixel)
|
||||||
* @param hasPhoto tell of you have want to show photo for the item or not
|
* @param hasPhoto tell of you have want to show photo for the item or not
|
||||||
|
* @param includeTriggerChar true if your suggestions start with the trigger char (e.g. #anHashTag triggered by #) false otherwise
|
||||||
*/
|
*/
|
||||||
public PickItemsDialog(char triggerChar, ArrayList<ItemBean> users, final HandlerManager eventBus, int widthInPixel, boolean hasPhoto) {
|
public PickItemsDialog(char triggerChar, ArrayList<ItemBean> users, final HandlerManager eventBus, int widthInPixel) {
|
||||||
super(true, false);
|
super(true, false);
|
||||||
if (widthInPixel < 200) {
|
if (widthInPixel < 200) {
|
||||||
throw new IllegalArgumentException("width must be greater than 199");
|
throw new IllegalArgumentException("width must be greater than 199");
|
||||||
}
|
}
|
||||||
this.eventBus = eventBus;
|
this.eventBus = eventBus;
|
||||||
this.triggerChar = ""+triggerChar;
|
this.triggerChar = ""+triggerChar;
|
||||||
this.hasPhoto = hasPhoto;
|
this.includeTriggerChar = false;
|
||||||
|
this.hasPhoto = false;
|
||||||
this.users = users;
|
this.users = users;
|
||||||
focusPanel.setWidth(widthInPixel+"px");
|
focusPanel.setWidth(widthInPixel+"px");
|
||||||
mainPanel.setWidth(widthInPixel+"px");
|
mainPanel.setWidth(widthInPixel+"px");
|
||||||
|
@ -97,8 +100,9 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
focusPanel.addMouseOverHandler(new MouseOverHandler() {
|
focusPanel.addMouseOverHandler(new MouseOverHandler() {
|
||||||
@Override
|
@Override
|
||||||
public void onMouseOver(MouseOverEvent event) {
|
public void onMouseOver(MouseOverEvent event) {
|
||||||
|
String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected";
|
||||||
if (first != null)
|
if (first != null)
|
||||||
first.removeStyleName("pickperson-selected");
|
first.removeStyleName(styleSelected);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
@ -116,7 +120,19 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
|
* use if you have want to show a photo for the item or not, remember to provide it in {@link ItemBean} instances
|
||||||
|
*/
|
||||||
|
public void withPhoto() {
|
||||||
|
hasPhoto = true;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* use to include the trigger char in search if your suggestions start with the trigger char (e.g. #anHashTag triggered by #)
|
||||||
|
*/
|
||||||
|
public void withTriggerCharIncluded() {
|
||||||
|
includeTriggerChar = true;
|
||||||
|
}
|
||||||
|
|
||||||
private void handleMouseDown() {
|
private void handleMouseDown() {
|
||||||
SelectableItem ut = (SelectableItem) mainPanel.getWidget(displayIndexSelected);
|
SelectableItem ut = (SelectableItem) mainPanel.getWidget(displayIndexSelected);
|
||||||
eventBus.fireEvent(new PickedItemEvent(new ItemBean("id", "username", ut.getItemName(), "thumb"), this.triggerChar));
|
eventBus.fireEvent(new PickedItemEvent(new ItemBean("id", "username", ut.getItemName(), "thumb"), this.triggerChar));
|
||||||
|
@ -157,7 +173,10 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
String[] splitted = toSplit.split(triggerChar); //get the interesting part
|
String[] splitted = toSplit.split(triggerChar); //get the interesting part
|
||||||
|
|
||||||
if (splitted[1].trim().length() > 0) {
|
if (splitted[1].trim().length() > 0) {
|
||||||
showSuggestions(splitted[1]);
|
if (includeTriggerChar)
|
||||||
|
showSuggestions(triggerChar+splitted[1]);
|
||||||
|
else
|
||||||
|
showSuggestions(splitted[1]);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
hide();
|
hide();
|
||||||
|
@ -207,7 +226,8 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
for (Suggestion s : response.getSuggestions()) {
|
for (Suggestion s : response.getSuggestions()) {
|
||||||
if (i == 0) {
|
if (i == 0) {
|
||||||
first = getUserTemplate(getUserModelBySuggestion(s), i, hasPhoto);
|
first = getUserTemplate(getUserModelBySuggestion(s), i, hasPhoto);
|
||||||
first.addStyleName("pickperson-selected");
|
String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected";
|
||||||
|
first.addStyleName(styleSelected);
|
||||||
mainPanel.add(first);
|
mainPanel.add(first);
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
@ -241,14 +261,15 @@ public class PickItemsDialog extends PopupPanel {
|
||||||
* @param displayIndex
|
* @param displayIndex
|
||||||
*/
|
*/
|
||||||
public void select(int displayIndex) {
|
public void select(int displayIndex) {
|
||||||
|
String styleSelected = hasPhoto ? "pickperson-selected" : "pickitem-selected";
|
||||||
for (int i = 0; i < mainPanel.getWidgetCount(); i++) {
|
for (int i = 0; i < mainPanel.getWidgetCount(); i++) {
|
||||||
Widget ut = (Widget) mainPanel.getWidget(i);
|
Widget ut = (Widget) mainPanel.getWidget(i);
|
||||||
if (i == displayIndex) {
|
if (i == displayIndex) {
|
||||||
ut.addStyleName("pickperson-selected");
|
ut.addStyleName(styleSelected);
|
||||||
displayIndexSelected = i;
|
displayIndexSelected = i;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
ut.removeStyleName("pickperson-selected");
|
ut.removeStyleName(styleSelected);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue