From d5a76aab261eb880385709ea649cf2a2362d5164 Mon Sep 17 00:00:00 2001 From: Kevin Brown Date: Sat, 30 Jan 2016 18:30:57 -0500 Subject: [PATCH] Switched 4.0 announcement to Jekyll highlighting --- docs/announcements-4.0.html | 126 ++++++++++++++++++------------------ 1 file changed, 63 insertions(+), 63 deletions(-) diff --git a/docs/announcements-4.0.html b/docs/announcements-4.0.html index 2cd64bc4..165af9ee 100644 --- a/docs/announcements-4.0.html +++ b/docs/announcements-4.0.html @@ -152,9 +152,9 @@ slug: announcements-4.0 options that looked like…

-
-<input type="hidden" name="select-boxes" value="1,2,4,6" />
-
+{% highlight html linenos %} + +{% endhighlight %}

It will need to be recreated as a <select> element with @@ -162,14 +162,14 @@ slug: announcements-4.0 attributes that match the old value.

-
-<select name="select-boxes" multiple="multiple">
-  <option value="1" selected="selected">Select2</option>
-  <option value="2" selected="selected">Chosen</option>
-  <option value="4" selected="selected">selectize.js</option>
-  <option value="6" selected="selected">typeahead.js</option>
-</select>
-
+{% highlight html linenos %} + +{% endhighlight %}

The options that you create should have selected="selected" @@ -210,7 +210,7 @@ slug: announcements-4.0 started with the term that was entered, it would look something like…

-
+{% highlight js linenos %}
 function matchStart (term, text) {
   if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
     return true;
@@ -222,7 +222,7 @@ function matchStart (term, text) {
 $("select").select2({
   matcher: matchStart
 })
-
+{% endhighlight %}

Then in Select2 4.0, you would need to wrap the matchStart @@ -230,7 +230,7 @@ $("select").select2({ oldMatcher method that we have created.

-
+{% highlight js linenos %}
 function matchStart (term, text) {
   if (text.toUpperCase().indexOf(term.toUpperCase()) == 0) {
     return true;
@@ -244,7 +244,7 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
     matcher: oldMatcher(matchStart)
   })
 });
-
+{% endhighlight %}

This will work for any matchers that only took in the search term and the @@ -280,12 +280,12 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { value of -1) is the placeholder option…

-
-<select>
-  <option value="-1" selected="selected">Select an option</option>
-  <option value="1">Something else</option>
-</select>
-
+{% highlight html linenos %} + +{% endhighlight %}

You would have previously had to get the placeholder option through the @@ -293,14 +293,14 @@ $.fn.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) { placeholder option by setting an id.

-
+{% highlight js linenos %}
 $("select").select2({
   placeholder: {
     id: "-1",
     placeholder: "Select an option"
   }
 })
-
+{% endhighlight %}

And Select2 will automatically display the placeholder when the value of @@ -359,15 +359,17 @@ $("select").select2({ the id and text matching the selected value.

-
-initSelection : function (element, callback) {
-  var data = [];
-  $(element.val()).each(function () {
-    data.push({id: this, text: this});
-  });
-  callback(data);
+{% highlight js linenos %}
+{
+  initSelection : function (element, callback) {
+    var data = [];
+    $(element.val()).each(function () {
+      data.push({id: this, text: this});
+    });
+    callback(data);
+  }
 }
-
+{% endhighlight %}

When using the new current method of the custom data adapter, @@ -378,7 +380,7 @@ initSelection : function (element, callback) { remote data source).

-
+{% highlight js linenos %}
 $.fn.select2.amd.require([
   'select2/data/array',
   'select2/utils'
@@ -411,7 +413,7 @@ $.fn.select2.amd.require([
     dataAdapter: CustomData
   });
 }
-
+{% endhighlight %}

The new current method of the data adapter works in a similar @@ -436,7 +438,7 @@ $.fn.select2.amd.require([ the changes.

-
+{% highlight js linenos %}
 var $element = $('select').select2(); // the select element you are working with
 
 var $request = $.ajax({
@@ -460,7 +462,7 @@ $request.then(function (data) {
   // Update the selected options that are displayed
   $element.trigger('change');
 });
-
+{% endhighlight %}

Custom data adapters instead of query @@ -487,17 +489,19 @@ $request.then(function (data) { number of times.

-
-query: function (query) {
-  var data = {results: []}, i, j, s;
-  for (i = 1; i < 5; i++) {
-    s = "";
-    for (j = 0; j < i; j++) {s = s + query.term;}
-    data.results.push({id: query.term + i, text: s});
+{% highlight js linenos %}
+{
+  query: function (query) {
+    var data = {results: []}, i, j, s;
+    for (i = 1; i < 5; i++) {
+      s = "";
+      for (j = 0; j < i; j++) {s = s + query.term;}
+      data.results.push({id: query.term + i, text: s});
+    }
+    query.callback(data);
   }
-  query.callback(data);
 }
-
+{% endhighlight %}

This has been replaced by custom data adapters which define a similarly @@ -505,7 +509,7 @@ query: function (query) { below as an example.

-
+{% highlight js linenos %}
 $.fn.select2.amd.require([
   'select2/data/array',
   'select2/utils'
@@ -541,7 +545,7 @@ $.fn.select2.amd.require([
     dataAdapter: CustomData
   });
 }
-
+{% endhighlight %}

The new query method of the data adapter is very similar to @@ -602,7 +606,7 @@ $.fn.select2.amd.require([ text and id properties to the new ones.

-
+{% highlight js linenos %}
 var data = $.map([
   {
     pk: 1,
@@ -618,7 +622,7 @@ var data = $.map([
 
   return obj;
 });
-
+{% endhighlight %}

This will result in an array of data objects that have the id @@ -684,17 +688,17 @@ var data = $.map([ If you previously declared the list of tags as…

-
-<select data-select2-tags='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]'></select>
-
+{% highlight html linenos %} + +{% endhighlight %}

…then you should now declare it as…

-
-<select data-data='[{"id": "1", "text": "One"}, {"id": "2", "text": "Two"}]' data-tags="true"></select>
-
+{% highlight html linenos %} + +{% endhighlight %}

Deprecated and removed methods

@@ -719,9 +723,9 @@ var data = $.map([ .trigger("change") on the element.

-
+{% highlight js linenos %}
 $("select").val("1").trigger("change"); // instead of $("select").select2("val", "1");
-
+{% endhighlight %}

.select2("enable")

@@ -733,9 +737,9 @@ $("select").val("1").trigger("change"); // instead of $("select").select2("val", completely removed in Select2 4.1.

-
+{% highlight js linenos %}
 $("select").prop("disabled", true); // instead of $("select").enable(false);
-
+{% endhighlight %} @@ -745,8 +749,4 @@ $("select").prop("disabled", true); // instead of $("select").enable(false); - - - + \ No newline at end of file