Improve inspector docs, add dependencies

modules/system/assets/ui/docs/form.md

@@ -107,7 +107,7 @@ Renders a form
                 <label>Would you like fries with that?</label>
                 <p class="help-block">Use this checkbox to enable the Googie Berry power-up specifically for this page. You can configure the Googie Berry power-up on the System Settings and Dashboard page.</p>
             </div>
-            <label class="custom-switch" onclick="">
+            <label class="custom-switch">
                 <input type="checkbox" />
                 <span><span>On</span><span>Off</span></span>
                 <a class="slide-button"></a>
@@ -118,7 +118,7 @@ Renders a form
         <div class="form-group radio-field span-left is-required">
             <label>Radio List</label>
             <p class="help-block before-field">Where should you propose to your beautiful girl?</p>
-            
+
             <div class="radio custom-radio">
                 <input name="radio" value="1" type="radio" id="radio_1">
                 <label for="radio_1">Paris</label>

modules/system/assets/ui/docs/inspector.md

@@ -1,12 +1,110 @@
-# Inspector
+# Inspector control
+
+Manages properties of inspectable controls.
+
+### Supported data attributes:
+
+- data-inspectable - makes a control inspectable.
+- data-inspector-title - title for the inspector popup
+- data-inspector-description - optional description for the inspector popup
+- data-inspector-class - PHP class name of the inspectable object. Required for drop-down fields with dynamic options.
+- data-inspector-css-class - CSS class name to apply to the Inspector container element.
+- data-inspector-container - specifies a CSS selector for the inspector container. The default container is the document body. The container element should be relative positioned. The 'self' container value allows to inject the inspector to the inspectable element.
+- data-inspector-offset - offset in pixels to add to the calculated position, to make the position more "random"
+- data-inspector-placement - top | bottom | left | right. The placement could automatically be changed if the popover doesn't fit into the desired position.
+- data-inspector-fallback-placement - The placement to use if the default placement and all other possible placements do not work. The default value is "bottom".
+- data-inspector-config - Configuration of the inspector fields as an array in the JSON format.
+    Each element in the array is an object with the following properties:
+    - property
+    - title
+    - group (optional)
+    - type (currently supported types are: string, checkbox, dropdown)
+    - description (optional)
+    - validationPattern (regex pattern for for validating the value, supported by the text editor)
+    - validationMessage (a message to display if the validation fails)
+    - placeholder - placholder text, for text and dropdown properties
+    - default - default value
+    - depends - a list of properties the property depend on, for dropdown lists
+    - options - an option list for dropdown lists, optional. If not provided the options are loaded with AJAX.
+    - showExternalParam - specifies the visibility of the external parameter feature for the property. Default: true.
+    Example of the configuration string (a single property):
+    [{"property":"max-width","title":"Max width","type":"string"}]
+
+The Inspector requires the inspectable element to contain a hidden input element with the attribute "data-inspector-values".
+The inspector uses this field to read and write field values. The field value is a JSON string, an object with keys matching property
+names and values matching property values.
+
+Any HTML element that wraps the inspectable element can have the data-inspector-external-parameters property that enables the external 
+parameters support. External parameters saved with the special syntax {{ paramName }}. The external parameter feature can be toggled
+on per-property basis with the showExternalParam option, visible by default.
+
+### Supported events:
+
+- change - the event is triggered on the inspectable element when it's properties are updated.
+- showing.oc.inspector - triggered before the Inspector is displayed. Allows to cancel the action with e.preventDefault()
+- hiding.oc.inspector - triggered before the Inspector is hidden. Allows to cancel the action with e.preventDefault()
+- hidden.oc.inspector - triggered after the Inspector is hidden.
 
 ## Dependencies
 
-- Form
 - Popover
+- Tooltip
+- Select
+- Checkbox
 
 # Example
 
+    <h5>Basic usage</h5>
+    <button
+        class="btn btn-primary"
+        data-inspectable
+        data-inspector-title="Ttest"
+        data-inspector-description="Test description"
+        data-inspector-config='[{
+            "property":"ocWidgetWidth",
+            "title":"Width (1-10)",
+            "description":"The widget width, a number between 1 and 10.",
+            "type":"dropdown",
+            "validationPattern":"^[0-9]+$",
+            "validationMessage":"Please enter the widget width as a number between 1 and 10.",
+            "options":{"1":"1 column","2":"2 columns","3":"3 columns","4":"4 columns","5":"5 columns","6":"6 columns","7":"7 columns","8":"8 columns","9":"9 columns","10":"10 columns"}
+        },{
+            "property":"ocWidgetNewRow",
+            "title":"Force new row",
+            "description":"Put the widget in a new row.",
+            "type":"checkbox"
+        },{
+            "property":"title",
+            "title":"Widget title",
+            "type":"string",
+            "default":"System status",
+            "validationPattern":"^.+$",
+            "validationMessage":"The Widget Title is required."
+        }]'
+        data-inspector-class=""
+        data-inspector-offset="-3"
+        data-inspector-offset-x="-15"
+        data-inspector-placement="left"
+        data-inspector-fallback-placement="left">
+        <input
+            type="hidden"
+            name="widget_properties[]"
+            data-inspector-values
+            value='{
+                "title":"System status",
+                "ocWidgetWidth":"4",
+                "ocWidgetNewRow":0
+            }' />
+        Open Inspector
+    </button>
+
+
+
+    <hr/>
+
+
+
+    <h5>Manual usage</h5>
     <div id="inspectorContainer">
         <button class="btn btn-primary" id="btn1">
             Open inspector
@@ -37,6 +135,16 @@
                     </div>
                 </td>
             </tr>
+            <tr>
+                <th>Options</th>
+                <td class="dropdown">
+                    <select class="custom-select">
+                        <option value="value1">Value one</option>
+                        <option value="value2">Value two</option>
+                        <option value="value3">Value three</option>
+                    </select>
+                </td>
+            </tr>
             <tr>
                 <th>Posts / page</th>
                 <td class="text"><input type="text" value="20"/></td>

modules/system/assets/ui/js/inspector.js

@@ -3,61 +3,14 @@
 =require ../vendor/mustache/mustache.js
 =require foundation.js
 =require popover.js
+=require tooltip.js
+=require checkbox.js
+=require select.js
 */
-
 /*
  * Inspector control
- * 
- * Manages properties of inspectable controls.
  *
- * Data attributes:
+ * - Documentation: ../docs/inspector.md
- * - data-inspectable - makes a control inspectable.
- * - data-inspector-title - title for the inspector popup
- * - data-inspector-description - optional description for the inspector popup
- * - data-inspector-class - PHP class name of the inspectable object. Required for drop-down 
- *   fields with dynamic options.
- * - data-inspector-css-class - CSS class name to apply to the Inspector container element.
- * - data-inspector-container - specifies a CSS selector for the inspector container. The default container
- *   is the document body. The container element should be relative positioned. The 'self' container value
- *   allows to inject the inspector to the inspectable element.
- * - data-inspector-offset - offset in pixels to add to the calculated position, to make the position more "random"
- * - data-inspector-placement - top | bottom | left | right. The placement could automatically be changed 
-     if the popover doesn't fit into the desired position.
- * - data-inspector-fallback-placement - The placement to use if the default placement
- *   and all other possible placements do not work. The default value is "bottom".
- * - data-inspector-config - Configuration of the inspector fields as an array in the JSON format. 
- *   Each element in the array is an object with the following properties:
- *   - property
- *   - title
- *   - group (optional)
- *   - type (currently supported types are: string, checkbox, dropdown)
- *   - description (optional)
- *   - validationPattern (regex pattern for for validating the value, supported by the text editor)
- *   - validationMessage (a message to display if the validation fails)
- *   - placeholder - placholder text, for text and dropdown properties
- *   - default - default value
- *   - depends - a list of properties the property depend on, for dropdown lists
- *   - options - an option list for dropdown lists, optional. If not provided the options are loaded with AJAX.
- *   - showExternalParam - specifies the visibility of the external parameter feature for the property. Default: true.
- *   Example of the configuration string (a single property):
- *   [{"property":"max-width","title":"Max width","type":"string"}]
- *
- * The Inspector requires the inspectable element to contain a hidden input element with the attribute "data-inspector-values".
- * The inspector uses this field to read and write field values. The field value is a JSON string, an object with keys matching property
- * names and values matching property values.
- *
- * Any HTML element that wraps the inspectable element can have the data-inspector-external-parameters property that enables the external 
- * parameters support. External parameters saved with the special syntax {{ paramName }}. The external parameter feature can be toggled
- * on per-property basis with the showExternalParam option, visible by default.
- *
- * Events
- * - change - the event is triggered on the inspectable element when it's properties are updated.
- * - showing.oc.inspector - triggered before the Inspector is displayed. Allows to cancel the action with e.preventDefault()
- * - hiding.oc.inspector - triggered before the Inspector is hidden. Allows to cancel the action with e.preventDefault()
- * - hidden.oc.inspector - triggered after the Inspector is hidden.
- *
- * Dependences: 
- * - october.popover.js
  */
 +function ($) { "use strict";
     var Base = $.oc.foundation.base,
@@ -1251,7 +1204,7 @@
             })
 
             $element.data('oc.inspector', inspector)
-        } 
+        }
         // else
         //     inspector.init()
     }

modules/system/assets/ui/less/inspector.less

@@ -4,6 +4,9 @@
 
 @import "global.less";
 @import "popover.less";
+@import "tooltip.less";
+@import "checkbox.less";
+@import "select.less";
 
 //
 // Inspector