|
|
@@ -52,87 +52,95 @@ slug: examples
|
|
|
{% include js-source-states.html %}
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
-var $states = $(".js-source-states");
|
|
|
-var statesOptions = $states.html();
|
|
|
-$states.remove();
|
|
|
+ var $states = $(".js-source-states");
|
|
|
+ var statesOptions = $states.html();
|
|
|
+ $states.remove();
|
|
|
|
|
|
-$(".js-states").append(statesOptions);
|
|
|
+ $(".js-states").append(statesOptions);
|
|
|
|
|
|
-$("[data-fill-from]").each(function () {
|
|
|
- var $this = $(this);
|
|
|
+ $("[data-fill-from]").each(function () {
|
|
|
+ var $this = $(this);
|
|
|
|
|
|
- var codeContainer = $this.data("fill-from");
|
|
|
- var $container = $(codeContainer);
|
|
|
+ var codeContainer = $this.data("fill-from");
|
|
|
+ var $container = $(codeContainer);
|
|
|
|
|
|
- var code = $.trim($container.html());
|
|
|
+ var code = $.trim($container.html());
|
|
|
|
|
|
- $this.text(code);
|
|
|
- $this.addClass("prettyprint linenums");
|
|
|
-});
|
|
|
-
|
|
|
-prettyPrint();
|
|
|
+ $this.text(code);
|
|
|
+ $this.addClass("prettyprint linenums");
|
|
|
+ });
|
|
|
|
|
|
-$.fn.select2.amd.require(
|
|
|
- ["select2/core", "select2/utils", "select2/compat/matcher"],
|
|
|
- function (Select2, Utils, oldMatcher) {
|
|
|
- var $basicSingle = $(".js-example-basic-single");
|
|
|
- var $basicMultiple = $(".js-example-basic-multiple");
|
|
|
- var $limitMultiple = $(".js-example-basic-multiple-limit");
|
|
|
+ prettyPrint();
|
|
|
|
|
|
- var $dataArray = $(".js-example-data-array");
|
|
|
- var $dataArraySelected = $(".js-example-data-array-selected");
|
|
|
+ $.fn.select2.amd.require([
|
|
|
+ "select2/core",
|
|
|
+ "select2/utils",
|
|
|
+ "select2/compat/matcher"
|
|
|
+ ], function (Select2, Utils, oldMatcher) {
|
|
|
+ var $basicSingle = $(".js-example-basic-single");
|
|
|
+ var $basicMultiple = $(".js-example-basic-multiple");
|
|
|
+ var $limitMultiple = $(".js-example-basic-multiple-limit");
|
|
|
|
|
|
- var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
|
|
|
+ var $dataArray = $(".js-example-data-array");
|
|
|
+ var $dataArraySelected = $(".js-example-data-array-selected");
|
|
|
|
|
|
- var $ajax = $(".js-example-data-ajax");
|
|
|
+ var data = [
|
|
|
+ { id: 0, text: 'enhancement' },
|
|
|
+ { id: 1, text: 'bug' },
|
|
|
+ { id: 2, text: 'duplicate' },
|
|
|
+ { id: 3, text: 'invalid' },
|
|
|
+ { id: 4, text: 'wontfix' }
|
|
|
+ ];
|
|
|
|
|
|
- var $disabledResults = $(".js-example-disabled-results");
|
|
|
+ var $ajax = $(".js-example-data-ajax");
|
|
|
|
|
|
- var $tags = $(".js-example-tags");
|
|
|
+ var $disabledResults = $(".js-example-disabled-results");
|
|
|
|
|
|
- var $matcherStart = $('.js-example-matcher-start');
|
|
|
+ var $tags = $(".js-example-tags");
|
|
|
|
|
|
- var $diacritics = $(".js-example-diacritics");
|
|
|
- var $language = $(".js-example-language");
|
|
|
+ var $matcherStart = $('.js-example-matcher-start');
|
|
|
|
|
|
- $.fn.select2.defaults.set("width", "100%");
|
|
|
+ var $diacritics = $(".js-example-diacritics");
|
|
|
+ var $language = $(".js-example-language");
|
|
|
|
|
|
- $basicSingle.select2();
|
|
|
- $basicMultiple.select2();
|
|
|
- $limitMultiple.select2({
|
|
|
- maximumSelectionLength: 2
|
|
|
- });
|
|
|
+ $.fn.select2.defaults.set("width", "100%");
|
|
|
|
|
|
- function formatState (state) {
|
|
|
- if (!state.id) {
|
|
|
- return state.text;
|
|
|
- }
|
|
|
- var $state = $(
|
|
|
- '<span>' +
|
|
|
- '<img src="vendor/images/flags/' +
|
|
|
- state.element.value.toLowerCase() +
|
|
|
- '.png" class="img-flag" /> ' +
|
|
|
- state.text +
|
|
|
- '</span>'
|
|
|
- );
|
|
|
- return $state;
|
|
|
- };
|
|
|
-
|
|
|
- $(".js-example-templating").select2({
|
|
|
- templateResult: formatState,
|
|
|
- templateSelection: formatState
|
|
|
- });
|
|
|
-
|
|
|
- $dataArray.select2({
|
|
|
- data: data
|
|
|
- });
|
|
|
+ $basicSingle.select2();
|
|
|
+ $basicMultiple.select2();
|
|
|
+ $limitMultiple.select2({
|
|
|
+ maximumSelectionLength: 2
|
|
|
+ });
|
|
|
|
|
|
- $dataArraySelected.select2({
|
|
|
- data: data
|
|
|
- });
|
|
|
-
|
|
|
- function formatRepo (repo) {
|
|
|
- if (repo.loading) return repo.text;
|
|
|
+ function formatState (state) {
|
|
|
+ if (!state.id) {
|
|
|
+ return state.text;
|
|
|
+ }
|
|
|
+ var $state = $(
|
|
|
+ '<span>' +
|
|
|
+ '<img src="vendor/images/flags/' +
|
|
|
+ state.element.value.toLowerCase() +
|
|
|
+ '.png" class="img-flag" /> ' +
|
|
|
+ state.text +
|
|
|
+ '</span>'
|
|
|
+ );
|
|
|
+ return $state;
|
|
|
+ };
|
|
|
+
|
|
|
+ $(".js-example-templating").select2({
|
|
|
+ templateResult: formatState,
|
|
|
+ templateSelection: formatState
|
|
|
+ });
|
|
|
+
|
|
|
+ $dataArray.select2({
|
|
|
+ data: data
|
|
|
+ });
|
|
|
+
|
|
|
+ $dataArraySelected.select2({
|
|
|
+ data: data
|
|
|
+ });
|
|
|
+
|
|
|
+ function formatRepo (repo) {
|
|
|
+ if (repo.loading) return repo.text;
|
|
|
|
|
|
var markup = "<div class='select2-result-repository clearfix'>" +
|
|
|
"<div class='select2-result-repository__avatar'><img src='" + repo.owner.avatar_url + "' /></div>" +
|
|
|
@@ -150,97 +158,97 @@ $.fn.select2.amd.require(
|
|
|
"</div>" +
|
|
|
"</div></div>";
|
|
|
|
|
|
- return markup;
|
|
|
- }
|
|
|
+ return markup;
|
|
|
+ }
|
|
|
|
|
|
- function formatRepoSelection (repo) {
|
|
|
- return repo.full_name || repo.text;
|
|
|
- }
|
|
|
+ function formatRepoSelection (repo) {
|
|
|
+ return repo.full_name || repo.text;
|
|
|
+ }
|
|
|
|
|
|
- $ajax.select2({
|
|
|
- ajax: {
|
|
|
- url: "https://api.github.com/search/repositories",
|
|
|
- dataType: 'json',
|
|
|
- delay: 250,
|
|
|
- data: function (params) {
|
|
|
- return {
|
|
|
- q: params.term, // search term
|
|
|
- page: params.page
|
|
|
- };
|
|
|
- },
|
|
|
- processResults: function (data, params) {
|
|
|
- // parse the results into the format expected by Select2
|
|
|
- // since we are using custom formatting functions we do not need to
|
|
|
- // alter the remote JSON data, except to indicate that infinite
|
|
|
- // scrolling can be used
|
|
|
- params.page = params.page || 1;
|
|
|
-
|
|
|
- return {
|
|
|
- results: data.items,
|
|
|
- pagination: {
|
|
|
- more: (params.page * 30) < data.total_count
|
|
|
- }
|
|
|
- };
|
|
|
+ $ajax.select2({
|
|
|
+ ajax: {
|
|
|
+ url: "https://api.github.com/search/repositories",
|
|
|
+ dataType: 'json',
|
|
|
+ delay: 250,
|
|
|
+ data: function (params) {
|
|
|
+ return {
|
|
|
+ q: params.term, // search term
|
|
|
+ page: params.page
|
|
|
+ };
|
|
|
+ },
|
|
|
+ processResults: function (data, params) {
|
|
|
+ // parse the results into the format expected by Select2
|
|
|
+ // since we are using custom formatting functions we do not need to
|
|
|
+ // alter the remote JSON data, except to indicate that infinite
|
|
|
+ // scrolling can be used
|
|
|
+ params.page = params.page || 1;
|
|
|
+
|
|
|
+ return {
|
|
|
+ results: data.items,
|
|
|
+ pagination: {
|
|
|
+ more: (params.page * 30) < data.total_count
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ cache: true
|
|
|
},
|
|
|
- cache: true
|
|
|
- },
|
|
|
- escapeMarkup: function (markup) { return markup; },
|
|
|
- minimumInputLength: 1,
|
|
|
- templateResult: formatRepo,
|
|
|
- templateSelection: formatRepoSelection
|
|
|
- });
|
|
|
+ escapeMarkup: function (markup) { return markup; },
|
|
|
+ minimumInputLength: 1,
|
|
|
+ templateResult: formatRepo,
|
|
|
+ templateSelection: formatRepoSelection
|
|
|
+ });
|
|
|
|
|
|
- $(".js-example-disabled").select2();
|
|
|
- $(".js-example-disabled-multi").select2();
|
|
|
+ $(".js-example-disabled").select2();
|
|
|
+ $(".js-example-disabled-multi").select2();
|
|
|
|
|
|
- $(".js-example-responsive").select2();
|
|
|
+ $(".js-example-responsive").select2();
|
|
|
|
|
|
- $disabledResults.select2();
|
|
|
+ $disabledResults.select2();
|
|
|
|
|
|
- $(".js-example-programmatic").select2();
|
|
|
- $(".js-example-programmatic-multi").select2();
|
|
|
+ $(".js-example-programmatic").select2();
|
|
|
+ $(".js-example-programmatic-multi").select2();
|
|
|
|
|
|
- $eventSelect.select2();
|
|
|
+ $eventSelect.select2();
|
|
|
|
|
|
- $tags.select2({
|
|
|
- tags: ['red', 'blue', 'green']
|
|
|
- });
|
|
|
+ $tags.select2({
|
|
|
+ tags: ['red', 'blue', 'green']
|
|
|
+ });
|
|
|
|
|
|
- $(".js-example-tokenizer").select2({
|
|
|
- tags: true,
|
|
|
- tokenSeparators: [',', ' ']
|
|
|
- });
|
|
|
+ $(".js-example-tokenizer").select2({
|
|
|
+ tags: true,
|
|
|
+ tokenSeparators: [',', ' ']
|
|
|
+ });
|
|
|
+
|
|
|
+ function matchStart (term, text) {
|
|
|
+ if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
|
+ return true;
|
|
|
+ }
|
|
|
|
|
|
- function matchStart (term, text) {
|
|
|
- if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
|
|
|
- return true;
|
|
|
+ return false;
|
|
|
}
|
|
|
|
|
|
- return false;
|
|
|
- }
|
|
|
+ $matcherStart.select2({
|
|
|
+ matcher: oldMatcher(matchStart)
|
|
|
+ });
|
|
|
|
|
|
- $matcherStart.select2({
|
|
|
- matcher: oldMatcher(matchStart)
|
|
|
- });
|
|
|
+ $(".js-example-basic-hide-search").select2({
|
|
|
+ minimumResultsForSearch: Infinity
|
|
|
+ });
|
|
|
|
|
|
- $(".js-example-basic-hide-search").select2({
|
|
|
- minimumResultsForSearch: Infinity
|
|
|
- });
|
|
|
+ $diacritics.select2();
|
|
|
|
|
|
- $diacritics.select2();
|
|
|
+ $language.select2({
|
|
|
+ language: "es"
|
|
|
+ });
|
|
|
|
|
|
- $language.select2({
|
|
|
- language: "es"
|
|
|
- });
|
|
|
+ $(".js-example-theme-single").select2({
|
|
|
+ theme: "classic"
|
|
|
+ });
|
|
|
|
|
|
- $(".js-example-theme-single").select2({
|
|
|
- theme: "classic"
|
|
|
- });
|
|
|
+ $(".js-example-theme-multiple").select2({
|
|
|
+ theme: "classic"
|
|
|
+ });
|
|
|
|
|
|
- $(".js-example-theme-multiple").select2({
|
|
|
- theme: "classic"
|
|
|
+ $(".js-example-rtl").select2();
|
|
|
});
|
|
|
-
|
|
|
- $(".js-example-rtl").select2();
|
|
|
-});
|
|
|
</script>
|
Florian Kissling