From 37dbe059fce4578b46b7561e6243b7fdc63ac002 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevin-brown.com>
Date: Sun, 14 Feb 2016 16:14:58 -0500
Subject: [PATCH] Document DOM events

This closes https://github.com/select2/select2/pull/4115.
---
 docs/_includes/options/events/jquery.html | 33 ++++++++++++++++++++++-
 docs/_sass/_dl-panels.scss                | 24 +++++++++++++++++
 docs/css/s2-docs.scss                     |  3 +++
 3 files changed, 59 insertions(+), 1 deletion(-)
 create mode 100644 docs/_sass/_dl-panels.scss

diff --git a/docs/_includes/options/events/jquery.html b/docs/_includes/options/events/jquery.html
index 8023909f..319f1890 100644
--- a/docs/_includes/options/events/jquery.html
+++ b/docs/_includes/options/events/jquery.html
@@ -7,7 +7,38 @@
     What events will Select2 trigger?
   </h3>
 
-  {% include options/not-written.html %}
+  <p>
+    Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions.
+  </p>
+
+  <dl class="s2-docs-panels">
+    <dt>change</dt>
+    <dd>Triggered whenever an option is selected or removed.</dd>
+
+    <dt>select2:close</dt>
+    <dd>Triggered whenever the dropdown is closed.</dd>
+
+    <dt>select2:closing</dt>
+    <dd>Triggered before the dropdown is closed. This event can be prevented.</dd>
+
+    <dt>select2:open</dt>
+    <dd>Triggered whenever the dropdown is opened.</dd>
+
+    <dt>select2:opening</dt>
+    <dd>Triggered before the dropdown is opened. This event can be prevented.</dd>
+
+    <dt>select2:select</dt>
+    <dd>Triggered whenever a result is selected.</dd>
+
+    <dt>select2:selecting</dt>
+    <dd>Triggered before a result is selected. This event can be prevented.</dd>
+
+    <dt>select2:unselect</dt>
+    <dd>Triggered whenever a selection is removed.</dd>
+
+    <dt>select2:unselecting</dt>
+    <dd>Triggered before a selection is removed. This event can be prevented.</dd>
+  </dl>
 
   <h3>
     How can I attach listeners for these events?
diff --git a/docs/_sass/_dl-panels.scss b/docs/_sass/_dl-panels.scss
new file mode 100644
index 00000000..76d5151f
--- /dev/null
+++ b/docs/_sass/_dl-panels.scss
@@ -0,0 +1,24 @@
+.s2-docs-panels {
+    dt, dd {
+        border: 1px solid $panel-default-border;
+    }
+
+    dt {
+        background-color: $panel-default-heading-bg;
+        border-top-left-radius: $panel-border-radius;
+        border-top-right-radius: $panel-border-radius;
+        padding: 5px 7.5px;
+    }
+
+    dd {
+        background-color: $panel-bg;
+        border-bottom-left-radius: $panel-border-radius;
+        border-bottom-right-radius: $panel-border-radius;
+        margin-bottom: 0.75em;
+        padding: 7.5px;
+    }
+
+    dt + dd {
+        border-top: none;
+    }
+}
\ No newline at end of file
diff --git a/docs/css/s2-docs.scss b/docs/css/s2-docs.scss
index 7fe35124..6b66a37c 100644
--- a/docs/css/s2-docs.scss
+++ b/docs/css/s2-docs.scss
@@ -1,6 +1,8 @@
 ---
 ---
 
+@import "vendor/bootstrap/variables";
+
 @import "result-repository";
 @import "sidenav";
 @import "hamburger";
@@ -19,3 +21,4 @@
 @import "prettify";
 @import "syntax-highlighting";
 @import "typography";
+@import "dl-panels";
\ No newline at end of file