--- HOW TO USE THE XDROP AND MULTISELECTXDROP ---

The XDrop is a component that shows ResultEntries in a Searchable List.

The XDrop needs DataProviders and Renderers to work.

See xdrop/dataproviders/ExampleDataProvider and xdrop/renderers/LabelRenderer for a quickstart.


--- EXAMPLE ---

<!--  Include xdrop css or your own css or load it from javascript -->
<link rel="stylesheet" type="text/css" href="<path/to/weblibs>/esko/xdrop/1.0.0/style/xdrop.css"/>

<!-- require.js is required  -->
<script src="<path/to/weblibs>/3rdparty/requirejs/2.3.2/require.js"></script>

<!-- Your require config should have these paths & shims -->
<script>
	require.config({shim:{
		"bootstrap": {
			deps: ["jquery"]
		}}, paths:  {
		 "underscore": "<path/to/weblibs>/3rdparty/underscore/1.8.3/underscore.min",
		 "jquery": "<path/to/weblibs>/3rdparty/jquery/2.2.4/jquery.min", // other jqueries probably also work.
		 "xdrop" : "<path/to/weblibs>/esko/xdrop/1.0.0",
		 "jquery.highlightText" : "<path/to/weblibs>/3rdparty/jquery-highlighttext/1.0.0/jquery.highlightText",
	     "utils/AnimationFrameRenderer": "<path/to/weblibs>/esko/utils/animationframerenderer/1.0.0/AnimationFrameRenderer",
		 "utils/Map" : "<path/to/weblibs>/esko/utils/map/1.0.0/Map",
		 "utils/StringSet": "<path/to/weblibs>/esko/utils/stringset/1.0.0/StringSet",
		 "utils/Observable" : "<path/to/weblibs>/esko/utils/observable/1.0.0/Observable",
		 "utils/Observer" : "<path/to/weblibs>/esko/utils/observer/1.0.0/Observer",
		 "i18n": "<path/to/weblibs>/esko/i18n/1.0.0",
		 "eventemitter2": "<path/to/weblibs>/3rdparty/eventemitter2/4.1.0/eventemitter2",
		 "component/modal" : "<path/to/weblibs>/esko/modal/1.0.0",
		 "lib/PromisePolyfill": "<path/to/weblibs>/3rdparty/promise-polyfill/6.0.2/PromisePolyfill",
		 "bootstrap": "<path/to/weblibs>/3rdparty/bootstrap/3.3.7/js/bootstrap.js"
		},	config: {
		 locale: "fr" // add locale here
		}});

</script>

<script defer async>

require(["xdrop/MultiSelectXDrop", "xdrop/dataproviders/ExampleDataProvider", "xdrop/renderers/LabelRenderer", "jquery"], function(MultiSelectXDrop, ExampleDataProvider, LabelRenderFactory, $){
	
	// Create data provider
	var shared_provider = new ExampleDataProvider();
	
	// Create render Factories
	var renderFactories = {"label": LabelRenderFactory};

	
	var myMultiSelect = new MultiSelectXDrop(shared_provider, renderFactories);
	$("#MULTISELECT_EXAMPLE1").append(myMultiSelect.getElement());

});
</script>
</head>
<body>
<div id="MULTISELECT_EXAMPLE1"></div>
</body>
</html>