From 2b3f17adeae3034e98eca2989d44021f71008a14 Mon Sep 17 00:00:00 2001
From: Samuel Georges <sam@daftspunk.com>
Date: Fri, 31 Jul 2015 18:05:30 +1000
Subject: [PATCH] Revise Script UI docs

---
 modules/system/assets/ui/docs/checkbox.md     | 10 ++++
 modules/system/assets/ui/docs/drag-scroll.md  | 24 ++++----
 modules/system/assets/ui/docs/drag-sort.md    | 54 +++++++++---------
 modules/system/assets/ui/docs/drag-value.md   | 45 +++++++++++++--
 modules/system/assets/ui/docs/input-hotkey.md | 12 +++-
 .../system/assets/ui/docs/input-monitor.md    |  6 +-
 .../system/assets/ui/docs/input-trigger.md    | 55 ++++++++++++-------
 7 files changed, 139 insertions(+), 67 deletions(-)

diff --git a/modules/system/assets/ui/docs/checkbox.md b/modules/system/assets/ui/docs/checkbox.md
index 7ba2de0cc..addbba6d9 100644
--- a/modules/system/assets/ui/docs/checkbox.md
+++ b/modules/system/assets/ui/docs/checkbox.md
@@ -43,3 +43,13 @@ Allows a user to select from a small set of binary options.
 
         <input type="hidden" name="balloonValue" value="1" />
     </div>
+
+If you don't define `data-control="balloon-selector"` then the control will act as a static list of labels.
+
+    <div class="control-balloon-selector">
+        <ul>
+            <li>Monday</li>
+            <li>Tuesday</li>
+            <li>Happy days!</li>
+        </ul>
+    </div>
diff --git a/modules/system/assets/ui/docs/drag-scroll.md b/modules/system/assets/ui/docs/drag-scroll.md
index 086aa97a4..627b6d946 100644
--- a/modules/system/assets/ui/docs/drag-scroll.md
+++ b/modules/system/assets/ui/docs/drag-scroll.md
@@ -1,23 +1,25 @@
 # Drag.Scroll
 
-Allows the dragging of things.
+Allows the elements with `overflow: hidden` to be dragged.
 
-# Example
+### Example
+
+Drag the area above left-to-right.
 
     <div id="scrollExample">
         <div class="scroll-stripes-example"></div>
     </div>
-    Drag the area above left-to-right
+
 
     <style>
-    #scrollExample {
-        width: 100%; height: 50px; overflow: hidden;
-    }
-    .scroll-stripes-example {
-        height: 50px; width: 5000px;
-        background-image: linear-gradient(90deg, gray, white, gray);
-        background-size: 500px 50px;
-    }
+        #scrollExample {
+            width: 100%; height: 50px; overflow: hidden;
+        }
+        .scroll-stripes-example {
+            height: 50px; width: 5000px;
+            background-image: linear-gradient(90deg, gray, white, gray);
+            background-size: 500px 50px;
+        }
     </style>
 
     <script>
diff --git a/modules/system/assets/ui/docs/drag-sort.md b/modules/system/assets/ui/docs/drag-sort.md
index 0e16e114d..3ddd83bb5 100644
--- a/modules/system/assets/ui/docs/drag-sort.md
+++ b/modules/system/assets/ui/docs/drag-sort.md
@@ -1,8 +1,34 @@
 # Drag.Sort
 
-Allows the dragging of things.
+Allows the dragging and sorting of lists.
 
-### JavaScript API:
+### Example
+
+Sort the buttons
+
+    <ol id="sortExample">
+        <li><a class="btn btn-sm btn-default">First</a></li>
+        <li><a class="btn btn-sm btn-primary">Second</a></li>
+        <li><a class="btn btn-sm btn-success">Third</a></li>
+    </ol>
+
+    <script>
+        $('#sortExample').sortable()
+    </script>
+
+    <style>
+        body.dragging, body.dragging * {
+            cursor: move !important
+        }
+        .dragged {
+            position: absolute; opacity: 0.5; z-index: 2000;
+        }
+        #sortExample li.placeholder {
+            position: relative;
+        }
+    </style>
+
+## JavaScript API:
 
 The `sortable()` method must be invoked on valid containers, meaning they must match the containerSelector option.
 
@@ -80,27 +106,3 @@ Serialize all selected containers. Returns a jQuery object . Use .get() to retri
 - `nested`: If true, search for nested containers within an item.If you nest containers, either the original selector with which you call the plugin must only match the top containers, or you need to specify a group (see the bootstrap nav example)
 
 - `vertical`: If true, the items are assumed to be arranged vertically
-
-# Example
-
-    <ol id="sortExample">
-        <li>First</li>
-        <li>Second</li>
-        <li>Third</li>
-    </ol>
-
-    <script>
-        $('#sortExample').sortable()
-    </script>
-
-    <style>
-        body.dragging, body.dragging * {
-            cursor: move !important
-        }
-        .dragged {
-            position: absolute; opacity: 0.5; z-index: 2000;
-        }
-        #sortExample li.placeholder {
-            position: relative;
-        }
-    </style>
\ No newline at end of file
diff --git a/modules/system/assets/ui/docs/drag-value.md b/modules/system/assets/ui/docs/drag-value.md
index 9a88e7799..00b44fa2c 100644
--- a/modules/system/assets/ui/docs/drag-value.md
+++ b/modules/system/assets/ui/docs/drag-value.md
@@ -1,19 +1,52 @@
 # Drag.Value
 
-Allows the dragging of things.
+Allows the dragging of elements that result in a custom value when dropped.
 
-# Example
-
-    <input placeholder="Drag a button to me" />
+    <p>
+        <input placeholder="Drag a button below to me" class="form-control" />
+    </p>
 
     <button
+        class="btn btn-default"
         data-control="dragvalue"
-        data-text-value="Foo">
+        data-text-value="October">
         Drop "Foo"
     </button>
 
     <button
+        class="btn btn-default"
         data-control="dragvalue"
-        data-text-value="Bar">
+        data-text-value="CMS">
         Drop "Bar"
     </button>
+
+### Clickable
+
+You can make elements clickable from another input by defining `data-drag-click="true"`.
+
+    <p>
+        <input placeholder="Click on me first, then click a label below" class="form-control" />
+    </p>
+
+    <div class="control-balloon-selector">
+        <ul>
+            <li
+                data-control="dragvalue"
+                data-text-value="Richie"
+                data-drag-click="true">
+                Monday
+            </li>
+            <li
+                data-control="dragvalue"
+                data-text-value="Potsie"
+                data-drag-click="true">
+                Tuesday
+            </li>
+            <li
+                data-control="dragvalue"
+                data-text-value="The Fonz"
+                data-drag-click="true">
+                Happy days!
+            </li>
+        </ul>
+    </div>
\ No newline at end of file
diff --git a/modules/system/assets/ui/docs/input-hotkey.md b/modules/system/assets/ui/docs/input-hotkey.md
index d8d435324..7bf4a3e83 100644
--- a/modules/system/assets/ui/docs/input-hotkey.md
+++ b/modules/system/assets/ui/docs/input-hotkey.md
@@ -1,14 +1,20 @@
 # Input Hotkey API
 
-Scripts that manage user input events.
+Allows keyboard shortcuts (hotkeys) to be bound to an element's click event.
 
 # Example
 
-    <button data-hotkey="b" onclick="alert('B is for Banana!')">
+    <button
+        class="btn btn-default"
+        data-hotkey="b"
+        onclick="alert('B is for Banana!')">
         Press "B" on your keyboard
     </button>
 
-    <button data-hotkey="shift+r" onclick="confirm('Shift gears...?')">
+    <button
+        class="btn btn-default"
+        data-hotkey="shift+r"
+        onclick="confirm('Shift gears...?')">
         Press "Shift + R" on your keyboard
     </button>
 
diff --git a/modules/system/assets/ui/docs/input-monitor.md b/modules/system/assets/ui/docs/input-monitor.md
index a2c019b26..40ad9f8c3 100644
--- a/modules/system/assets/ui/docs/input-monitor.md
+++ b/modules/system/assets/ui/docs/input-monitor.md
@@ -1,6 +1,8 @@
 # Input Monitoring
 
-Scripts that manage user input events.
+This will monitor the user input for unsaved changes and show a confirmation box if the user attempts to leave the page.
 
-# Example
+### Example
+
+TBA
 
diff --git a/modules/system/assets/ui/docs/input-trigger.md b/modules/system/assets/ui/docs/input-trigger.md
index f6b3e47d0..1b66f9142 100644
--- a/modules/system/assets/ui/docs/input-trigger.md
+++ b/modules/system/assets/ui/docs/input-trigger.md
@@ -2,7 +2,42 @@
 
 The API allows to change elements' visibility or status (enabled/disabled) basing on other elements' statuses. Example: enable a button if any checkbox inside another element is checked.
 
-### Supported data attributes:
+## Example
+
+### Checked condition
+
+    <input type="checkbox" id="triggerChk1" />
+    <button class="btn disabled"
+        data-trigger-action="enable"
+        data-trigger="#triggerChk1"
+        data-trigger-condition="checked">
+        Check the checkbox
+    </button>
+
+### Value condition
+
+    <p>
+        <input
+            type="text"
+            id="triggerTxt1"
+            value=""
+            placeholder="Enter 'foo' or 'bar' here"
+            class="form-control" />
+    </p>
+
+    <div
+        class="callout callout-success"
+        data-trigger-action="show"
+        data-trigger="#triggerTxt1"
+        data-trigger-condition="value[foo][bar]">
+
+        <div class="content">
+            Passphrase is valid!
+        </div>
+    </div>
+
+
+## Supported data attributes:
 
 - data-trigger-action, values: show, hide, enable, disable, empty
 - data-trigger: a CSS selector for elements that trigger the action (checkboxes)
@@ -38,21 +73,3 @@ Multie value conditions are supported:
         trigger: '#cblist input[type=checkbox]',
         triggerAction: 'enable' 
     })
-
-# Example
-
-    <input type="checkbox" id="triggerChk1" />
-    <button class="btn disabled"
-        data-trigger-action="enable"
-        data-trigger="#triggerChk1"
-        data-trigger-condition="checked">
-        Check the checkbox
-    </button>
-
-    <input type="text" id="triggerTxt1" value="" placeholder="Enter 'foo' or 'bar' here" />
-    <button class="btn disabled"
-        data-trigger-action="enable"
-        data-trigger="#triggerTxt1"
-        data-trigger-condition="value[foo][bar]">
-        Passphrase valid!
-    </button>