fix spacing of examples.

docs/examples.html

@@ -33,7 +33,7 @@ slug: examples
 
       <pre class="code" data-fill-from=".js-code-basic"></pre>
 
-      <script type="text/x-example-code" class="js-code-basic">
+<script type="text/x-example-code" class="js-code-basic">
 $(document).ready(function() {
   $(".js-example-basic-single").select2();
 });
@@ -64,7 +64,7 @@ $(document).ready(function() {
 
       <pre data-fill-from=".js-code-multiple"></pre>
 
-      <script type="text/x-example-code" class="js-code-multiple">
+<script type="text/x-example-code" class="js-code-multiple">
 $(".js-example-basic-multiple").select2();
 
 <select class="js-example-basic-multiple" multiple="multiple">
@@ -105,16 +105,16 @@ $(".js-example-basic-multiple").select2();
 
       <pre data-fill-from=".js-code-placeholder"></pre>
 
-      <script type="text/javascript" class="js-code-placeholder">
-        $(".js-example-placeholder-single").select2({
-          placeholder: "Select a state",
-          allowClear: true
-        });
+<script type="text/javascript" class="js-code-placeholder">
+$(".js-example-placeholder-single").select2({
+  placeholder: "Select a state",
+  allowClear: true
+});
 
-        $(".js-example-placeholder-multiple").select2({
-          placeholder: "Select a state"
-        });
-      </script>
+$(".js-example-placeholder-multiple").select2({
+  placeholder: "Select a state"
+});
+</script>
     </div>
   </section>
 
@@ -147,7 +147,7 @@ $(".js-example-basic-multiple").select2();
 
       <pre data-fill-from=".js-code-data-array"></pre>
 
-      <script type="text/x-example-code" class="js-code-data-array">
+<script type="text/x-example-code" class="js-code-data-array">
 var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
 
 $(".js-example-data-array").select2({
@@ -207,7 +207,7 @@ $(".js-example-data-array-selected").select2({
         function you specify.
       </p>
 
-      <script type="text/x-example-code" class="js-code-data-ajax">
+<script type="text/x-example-code" class="js-code-data-ajax">
 $(".js-data-example-ajax").select2({
   ajax: {
     url: "https://api.github.com/search/repositories",
@@ -235,7 +235,7 @@ $(".js-data-example-ajax").select2({
 });
 </script>
 
-      <script type="text/x-example-code" class="js-code-data-ajax-html">
+<script type="text/x-example-code" class="js-code-data-ajax-html">
 <select class="js-data-example-ajax">
   <option value="select2/select2" selected="selected">select2/select2</option>
 </select>
@@ -275,17 +275,17 @@ $(".js-data-example-ajax").select2({
 
       <pre data-fill-from=".js-code-disabled"></pre>
 
-      <script type="text/javascript" class="js-code-disabled">
-        $(".js-programmatic-enable").on("click", function () {
-          $(".js-example-disabled").prop("disabled", false);
-          $(".js-example-disabled-multi").prop("disabled", false);
-        });
+<script type="text/javascript" class="js-code-disabled">
+$(".js-programmatic-enable").on("click", function () {
+  $(".js-example-disabled").prop("disabled", false);
+  $(".js-example-disabled-multi").prop("disabled", false);
+});
 
-        $(".js-programmatic-disable").on("click", function () {
-          $(".js-example-disabled").prop("disabled", true);
-          $(".js-example-disabled-multi").prop("disabled", true);
-        });
-      </script>
+$(".js-programmatic-disable").on("click", function () {
+  $(".js-example-disabled").prop("disabled", true);
+  $(".js-example-disabled-multi").prop("disabled", true);
+});
+</script>
     </div>
   </section>
 
@@ -313,7 +313,7 @@ $(".js-data-example-ajax").select2({
 
       <pre data-fill-from=".js-code-disabled-results"></pre>
 
-      <script type="text/x-example-code" class="js-code-disabled-results">
+<script type="text/x-example-code" class="js-code-disabled-results">
 <select class="js-example-disabled-results">
   <option value="one">First</option>
   <option value="two" disabled="disabled">Second (disabled)</option>
@@ -378,21 +378,21 @@ $(".js-data-example-ajax").select2({
 
       <pre data-fill-from=".js-code-programmatic"></pre>
 
-      <script type="text/javascript" class="js-code-programmatic">
-        var $example = $(".js-example-programmatic");
-        var $exampleMulti = $(".js-example-programmatic-multi");
+<script type="text/javascript" class="js-code-programmatic">
+var $example = $(".js-example-programmatic");
+var $exampleMulti = $(".js-example-programmatic-multi");
 
-        $(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
+$(".js-programmatic-set-val").on("click", function () { $example.val("CA").trigger("change"); });
 
-        $(".js-programmatic-open").on("click", function () { $example.select2("open"); });
-        $(".js-programmatic-close").on("click", function () { $example.select2("close"); });
+$(".js-programmatic-open").on("click", function () { $example.select2("open"); });
+$(".js-programmatic-close").on("click", function () { $example.select2("close"); });
 
-        $(".js-programmatic-init").on("click", function () { $example.select2(); });
-        $(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
+$(".js-programmatic-init").on("click", function () { $example.select2(); });
+$(".js-programmatic-destroy").on("click", function () { $example.select2("destroy"); });
 
-        $(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
-        $(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
-      </script>
+$(".js-programmatic-multi-set-val").on("click", function () { $exampleMulti.val(["CA", "AL"]).trigger("change"); });
+$(".js-programmatic-multi-clear").on("click", function () { $exampleMulti.val(null).trigger("change"); });
+</script>
     </div>
   </section>
   <section id="multiple_max" class="row">
@@ -410,7 +410,7 @@ $(".js-data-example-ajax").select2({
 
       <pre data-fill-from=".js-code-multiple-limit"></pre>
 
-      <script type="text/x-example-code" class="js-code-multiple-limit">
+<script type="text/x-example-code" class="js-code-multiple-limit">
 $(".js-example-basic-multiple-limit").select2({
   maximumSelectionLength: 2
   });
@@ -510,7 +510,7 @@ function log (name, args) {
 
       <pre data-fill-from=".js-code-tags"></pre>
 
-      <script type="text/x-example-code" class="js-code-tags">
+<script type="text/x-example-code" class="js-code-tags">
 $(".js-example-tags").select2({
   tags: true
 })
@@ -548,7 +548,7 @@ $(".js-example-tags").select2({
 
       <pre data-fill-from=".js-code-tokenizer"></pre>
 
-      <script type="text/x-example-code" class="js-code-tokenizer">
+<script type="text/x-example-code" class="js-code-tokenizer">
 $(".js-example-tokenizer").select2({
   tags: true,
   tokenSeparators: [',', ' ']
@@ -584,7 +584,7 @@ $(".js-example-tokenizer").select2({
 
       <pre data-fill-from=".js-code-matcher-start"></pre>
 
-      <script type="text/x-example-code" class="js-code-matcher-start">
+<script type="text/x-example-code" class="js-code-matcher-start">
 function matchStart (term, text) {
   if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
     return true;
@@ -632,7 +632,7 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
 
       <pre data-fill-from=".js-code-diacritics"></pre>
 
-      <script type="text/x-example-code" class="js-code-diacritics">
+<script type="text/x-example-code" class="js-code-diacritics">
 $(".js-example-diacritics").select2();
 </script>
     </div>
@@ -665,7 +665,7 @@ $(".js-example-diacritics").select2();
 
       <pre data-fill-from=".js-code-language"></pre>
 
-      <script type="text/x-example-code" class="js-code-language">
+<script type="text/x-example-code" class="js-code-language">
 $(".js-example-language").select2({
   language: "es"
 });
@@ -702,7 +702,7 @@ $(".js-example-language").select2({
 
       <pre data-fill-from=".js-code-theme"></pre>
 
-      <script type="text/x-example-code" class="js-code-theme">
+<script type="text/x-example-code" class="js-code-theme">
 $(".js-example-theme-single").select2({
   theme: "classic"
 });
@@ -736,7 +736,7 @@ $(".js-example-theme-multiple").select2({
 
       <pre data-fill-from=".js-code-rtl"></pre>
 
-      <script type="text/x-example-code" class="js-code-rtl">
+<script type="text/x-example-code" class="js-code-rtl">
 $(".js-example-rtl").select2({
   dir: "rtl"
 });
@@ -809,163 +809,163 @@ $(".js-example-rtl").select2({
 </select>
 
 <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);
+
+$("[data-fill-from]").each(function () {
+  var $this = $(this);
+
+  var codeContainer = $this.data("fill-from");
+  var $container = $(codeContainer);
+
+  var code = $.trim($container.html());
+
+  $this.text(code);
+  $this.addClass("prettyprint linenums");
+});
+
+prettyPrint();
+
+$.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 $dataArray = $(".js-example-data-array");
+  var $dataArraySelected = $(".js-example-data-array-selected");
+
+  var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
+
+  var $ajax = $(".js-example-data-ajax");
+
+  var $disabledResults = $(".js-example-disabled-results");
+
+  var $tags = $(".js-example-tags");
+
+  var $matcherStart = $('.js-example-matcher-start');
+
+  var $diacritics = $(".js-example-diacritics");
+  var $language = $(".js-example-language");
+
+  $basicSingle.select2();
+  $basicMultiple.select2();
+  $limitMultiple.select2({
+    maximumSelectionLength: 2
+  });
 
-  $(".js-states").append(statesOptions);
+  $dataArray.select2({
+    data: data
+  });
+
+  $dataArraySelected.select2({
+    data: data
+  });
+
+  $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
+    },
+    minimumInputLength: 1,
+    templateResult: function (repo) {
+      if (repo.loading) return repo.text;
+
+      var markup = '<div class="clearfix">' +
+        '<div class="col-sm-1">' +
+          '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
+        '</div>' +
+        '<div clas="col-sm-10">' +
+          '<div class="clearfix">' +
+            '<div class="col-sm-6">' + repo.full_name + '</div>' +
+            '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
+            '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
+          '</div>';
+
+      if (repo.description) {
+         markup += '<div>' + repo.description + '</div>';
+      }
+
+      markup += '</div></div>';
+
+      return markup;
+    },
+    templateSelection: function (repo) {
+      return repo.full_name || repo.text;
+    }
+  });
+
+  $(".js-example-disabled").select2();
+  $(".js-example-disabled-multi").select2();
+
+  $disabledResults.select2();
+
+  $(".js-example-programmatic").select2();
+  $(".js-example-programmatic-multi").select2();
+
+  //$eventSelect.select2();
+
+  $tags.select2({
+    tags: ['red', 'blue', 'green']
+  });
+
+  $(".js-example-tokenizer").select2({
+    tags: true,
+    tokenSeparators: [',', ' ']
+  });
+
+  function matchStart (term, text) {
+    if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
+      return true;
+    }
+
+    return false;
+  }
 
-  $("[data-fill-from]").each(function () {
-    var $this = $(this);
+  $matcherStart.select2({
+    matcher: oldMatcher(matchStart)
+  });
+
+  $diacritics.select2();
 
-    var codeContainer = $this.data("fill-from");
-    var $container = $(codeContainer);
+  $language.select2({
+    language: "es"
+  });
 
-    var code = $.trim($container.html());
+  $(".js-example-theme-single").select2({
+    theme: "classic"
+  });
 
-    $this.text(code);
-    $this.addClass("prettyprint linenums");
+  $(".js-example-theme-multiple").select2({
+    theme: "classic"
   });
 
-  prettyPrint();
-
-  $.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 $dataArray = $(".js-example-data-array");
-            var $dataArraySelected = $(".js-example-data-array-selected");
-
-            var data = [{ id: 0, text: 'enhancement' }, { id: 1, text: 'bug' }, { id: 2, text: 'duplicate' }, { id: 3, text: 'invalid' }, { id: 4, text: 'wontfix' }];
-
-            var $ajax = $(".js-example-data-ajax");
-
-            var $disabledResults = $(".js-example-disabled-results");
-
-            var $tags = $(".js-example-tags");
-
-            var $matcherStart = $('.js-example-matcher-start');
-
-            var $diacritics = $(".js-example-diacritics");
-            var $language = $(".js-example-language");
-
-            $basicSingle.select2();
-            $basicMultiple.select2();
-            $limitMultiple.select2({
-              maximumSelectionLength: 2
-            });
-
-            $dataArray.select2({
-              data: data
-            });
-
-            $dataArraySelected.select2({
-              data: data
-            });
-
-            $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
-              },
-              minimumInputLength: 1,
-              templateResult: function (repo) {
-                if (repo.loading) return repo.text;
-
-                var markup = '<div class="clearfix">' +
-                        '<div class="col-sm-1">' +
-                        '<img src="' + repo.owner.avatar_url + '" style="max-width: 100%" />' +
-                        '</div>' +
-                        '<div clas="col-sm-10">' +
-                        '<div class="clearfix">' +
-                        '<div class="col-sm-6">' + repo.full_name + '</div>' +
-                        '<div class="col-sm-3"><i class="fa fa-code-fork"></i> ' + repo.forks_count + '</div>' +
-                        '<div class="col-sm-2"><i class="fa fa-star"></i> ' + repo.stargazers_count + '</div>' +
-                        '</div>';
-
-                if (repo.description) {
-                  markup += '<div>' + repo.description + '</div>';
-                }
-
-                markup += '</div></div>';
-
-                return markup;
-              },
-              templateSelection: function (repo) {
-                return repo.full_name || repo.text;
-              }
-            });
-
-            $(".js-example-disabled").select2();
-            $(".js-example-disabled-multi").select2();
-
-            $disabledResults.select2();
-
-            $(".js-example-programmatic").select2();
-            $(".js-example-programmatic-multi").select2();
-
-            //$eventSelect.select2();
-
-            $tags.select2({
-              tags: ['red', 'blue', 'green']
-            });
-
-            $(".js-example-tokenizer").select2({
-              tags: true,
-              tokenSeparators: [',', ' ']
-            });
-
-            function matchStart (term, text) {
-              if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
-                return true;
-              }
-
-              return false;
-            }
-
-            $matcherStart.select2({
-              matcher: oldMatcher(matchStart)
-            });
-
-            $diacritics.select2();
-
-            $language.select2({
-              language: "es"
-            });
-
-            $(".js-example-theme-single").select2({
-              theme: "classic"
-            });
-
-            $(".js-example-theme-multiple").select2({
-              theme: "classic"
-            });
-
-            $(".js-example-rtl").select2();
-          });
+  $(".js-example-rtl").select2();
+});
 </script>