Skip to content

add bootstrap theme to select2 #453

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
solomax merged 3 commits into from
Jan 22, 2016
Merged

add bootstrap theme to select2 #453

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
36734d3
add bootstrap theme to select2
reiern70 Jan 15, 2016
d04fcf2
Fix NPE
reiern70 Jan 15, 2016
de1a32f
try to fix white-spaces
reiern70 Jan 15, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion openlayers3-parent/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
<dependency>
<groupId>de.agilecoders.wicket.webjars</groupId>
<artifactId>wicket-webjars</artifactId>
<version>0.5.0</version>
<version>0.5.3</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
Expand Down
6 changes: 6 additions & 0 deletions select2-parent/select2/pom.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,12 @@
<artifactId>slf4j-simple</artifactId>
<scope>test</scope>
</dependency>
<!-- webjars for bootstrap theme -->
<dependency>
<groupId>de.agilecoders.wicket.webjars</groupId>
<artifactId>wicket-webjars</artifactId>
<version>0.5.3</version>
</dependency>
Copy link
Copy Markdown
Contributor

@solomax solomax Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

whitespaces :(
in whole patch

Copy link
Copy Markdown
Contributor Author

@reiern70 reiern70 Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know :-( See my apologies on wicket list ;-) I should fix my settings.

</dependencies>
<build>
<resources>
Expand Down
17 changes: 14 additions & 3 deletions select2-parent/select2/src/main/java/org/wicketstuff/select2/AbstractSelect2Choice.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
import java.util.Collections;
import java.util.List;

import org.apache.wicket.Component;
import org.apache.wicket.IResourceListener;
import org.apache.wicket.ajax.AjaxRequestTarget;
import org.apache.wicket.ajax.json.JSONException;
Expand Down Expand Up @@ -111,7 +112,17 @@ public AbstractSelect2Choice(String id, IModel<M> model, ChoiceProvider<T> provi
{
super(id, model);
this.provider = provider;
add(new Select2ResourcesBehavior());
add(new Select2ResourcesBehavior() {

@Override
public void renderHead(Component component, IHeaderResponse response) {
super.renderHead(component, response);
// render theme related resources if any
if(settings.getTheme() != null) {
settings.getTheme().renderHead(component, response);
}
}
});
setOutputMarkupId(true);
}

Expand Down Expand Up @@ -147,7 +158,7 @@ public final ChoiceProvider<T> getProvider()
return provider;
}

@Override
@Override
public final void convertInput()
{
// AbstractSelect2Choice uses ChoiceProvider to convert IDS into objects.
Expand Down Expand Up @@ -252,7 +263,7 @@ protected void onInitialize()
"function(params) { return { q: params.term, page: params.page, '%s':true, '%s':[window.location.protocol, '//', window.location.host, window.location.pathname].join('')}; }",
WebRequest.PARAM_AJAX, WebRequest.PARAM_AJAX_BASE_URL));
ajax.setProcessResults("function(data, page) { return { results: data.items, pagination: { more: data.more } }; }");
} else if(settings.isStateless())
} else if(settings.isStateless()) //configure stateless mode
{
AjaxSettings ajax = getSettings().getAjax(true);
ajax.setProcessResults("function(data, page) { return { results: data.items, pagination: { more: data.more } }; }");
Expand Down
25 changes: 25 additions & 0 deletions select2-parent/select2/src/main/java/org/wicketstuff/select2/ISelect2Theme.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
package org.wicketstuff.select2;

import org.apache.wicket.Component;
import org.apache.wicket.markup.head.IHeaderResponse;

/**
* Defines a select2 theme.
*
*/
public interface ISelect2Theme {

/**
* Allows theme to contribute headers (e.g. extra CSS resources)
*
* @param component The component
* @param response The header response
*/
void renderHead(final Component component, final IHeaderResponse response);

/**
*
* @return The name of the theme.
*/
String name();
}
40 changes: 40 additions & 0 deletions select2-parent/select2/src/main/java/org/wicketstuff/select2/Select2BootstrapTheme.java
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
package org.wicketstuff.select2;

import de.agilecoders.wicket.webjars.request.resource.WebjarsCssResourceReference;
import org.apache.wicket.Component;
import org.apache.wicket.markup.head.CssHeaderItem;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.apache.wicket.request.resource.CssResourceReference;
import org.apache.wicket.request.resource.ResourceReference;

/**
* Select2BootstrapThemeBehavior. Adds bootstrap look and feel to select2, See
*
* https://github.com/select2/select2-bootstrap-theme
*
* @author Ernesto Reinaldo Barreiro (reirn70@gmail.com)
*
*/
public class Select2BootstrapTheme implements ISelect2Theme {

private boolean useBootstrapWebJar = false;

private static final ResourceReference CSS = new CssResourceReference(Select2BootstrapTheme.class, "/res/bootstrap/select2-bootstrap.css");


public Select2BootstrapTheme(boolean useBootstrapWebJar) {
this.useBootstrapWebJar = useBootstrapWebJar;
}

public void renderHead(final Component varComponent, final IHeaderResponse response) {
if(useBootstrapWebJar) {
response.render(CssHeaderItem.forReference(new WebjarsCssResourceReference("/bootstrap/current/css/bootstrap.css")));
}
response.render(CssHeaderItem.forReference(CSS));
}

@Override
public String name() {
return "bootstrap";
}
}
32 changes: 27 additions & 5 deletions select2-parent/select2/src/main/java/org/wicketstuff/select2/Settings.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,11 @@

import java.io.Serializable;

import org.apache.wicket.Component;
import org.apache.wicket.WicketRuntimeException;
import org.apache.wicket.ajax.json.JSONException;
import org.apache.wicket.ajax.json.JSONStringer;
import org.apache.wicket.markup.head.IHeaderResponse;
import org.wicketstuff.select2.json.Json;

/**
Expand Down Expand Up @@ -53,7 +55,6 @@ public static class Widths
private String initSelection; //TODO this will not work
private String query;
Copy link
Copy Markdown
Contributor

@solomax solomax Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm afraid this change breaks original meaning of 'theme' described here: https://select2.github.io/examples.html#themes-templating-responsive-design

Copy link
Copy Markdown
Contributor Author

@reiern70 reiern70 Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it wont: there is still a setter receiving an String (the name of the theme). To the end user noting changes.

Copy link
Copy Markdown
Contributor Author

@reiern70 reiern70 Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Disregard my comment: I need some time to digest info there.

Copy link
Copy Markdown
Contributor Author

@reiern70 reiern70 Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I still fail to see how it will break it the only thing I think we don't cover is

https://select2.github.io/examples.html#templating

Copy link
Copy Markdown
Contributor

@solomax solomax Jan 15, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actually 'templating' from your last comment is supported by 'templateResult' settings (we are using it in our project)
You are creating 'fake' empty theme if only name was provided, my mistake, comment too early
Could you please update spaces and I'll merge the change

private String width;
private String theme;
private String containerCss, dropdownCss, containerCssClass, dropdownCssClass; //TODO deprecated

private AjaxSettings ajax;
Expand All @@ -63,6 +64,10 @@ public static class Widths
private String[] tokenSeparators;
private boolean selectOnClose;
private boolean dropdownAutoWidth;
/**
* Theme is an interface that might contribute to the headers.
*/
private ISelect2Theme theme;

/**
* If stateless is set to true then component will not be used as context
Expand Down Expand Up @@ -104,7 +109,7 @@ public CharSequence toJson()
Json.writeFunction(writer, "initSelection", initSelection);
Json.writeFunction(writer, "query", query);
Json.writeObject(writer, "width", width);
Json.writeObject(writer, "theme", theme);
Json.writeObject(writer, "theme", theme != null? theme.name(): null);
Json.writeFunction(writer, "containerCss", containerCss);
Json.writeObject(writer, "containerCssClass", containerCssClass);
Json.writeFunction(writer, "dropdownCss", dropdownCss);
Expand Down Expand Up @@ -428,17 +433,34 @@ public Settings setWidth(String width)
return this;
}

public String getTheme()
public ISelect2Theme getTheme()
{
return theme;
}

public Settings setTheme(String theme)
public Settings setTheme(final String theme)
{
this.theme = theme;
this.theme = new ISelect2Theme() {

@Override
public void renderHead(Component varComponent, IHeaderResponse varResponse) {

}

@Override
public String name() {
return theme;
}
};
return this;
}


public Settings setTheme(ISelect2Theme theme) {
this.theme = theme;
return this;
}

public String getContainerCss()
{
return containerCss;
Expand Down
Loading