separate page for each option type

ThemeFuse · Sep 21, 2016 · 0e94b0c · 0e94b0c
1 parent b631e13
commit 0e94b0c
Show file tree

Hide file tree

Showing 41 changed files with 1,448 additions and 1,490 deletions.
diff --git a/options/built-in-option-types.rst b/options/built-in-option-types.rst
diff --git a/options/built-in/addable-box.rst b/options/built-in/addable-box.rst
@@ -0,0 +1,38 @@
+Addable Box
+-----------
+
+Addable box with options.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'addable-box',
+        'value' => array(
+            array(
+                'option_1' => 'value 1',
+                'option_2' => 'value 2',
+            ),
+            // ...
+        ),
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'box-options' => array(
+            'option_1' => array( 'type' => 'text' ),
+            'option_2' => array( 'type' => 'textarea' ),
+        ),
+        'template' => 'Hello {{- option_1 }}', // box title
+        'box-controls' => array( // buttons next to (x) remove box button
+            'control-id' => '<small class="dashicons dashicons-smiley"></small>',
+        ),
+        'limit' => 0, // limit the number of boxes that can be added
+        'add-button-text' => __('Add', '{domain}'),
+        'sortable' => true,
+    )
+
+.. rubric:: Custom Events
+
+``fw:option-type:addable-box:box:init`` - Box was initialized. Triggered for each existing box after page load, or when a box was added.
+
+``fw:option-type:addable-box:control:click`` - A custom control was clicked.
diff --git a/options/built-in/addable-option.rst b/options/built-in/addable-option.rst
@@ -0,0 +1,22 @@
+Addable Option
+--------------
+
+Create a list of options.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'addable-option',
+        'value' => array('Value 1', 'Value 2', 'Value 3'),
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'option' => array( 'type' => 'text' ),
+        'add-button-text' => __('Add', '{domain}'),
+        'sortable' => true,
+    )
+
+.. rubric:: Custom Events
+
+``fw:option-type:addable-option:option:init`` - New option was added and initialized.
diff --git a/options/built-in/addable-popup.rst b/options/built-in/addable-popup.rst
@@ -0,0 +1,47 @@
+Addable Popup
+-------------
+
+Addable popup with options.
+
+.. code-block:: php
+
+    array(
+        'type' => 'addable-popup',
+        'value' => array(
+            array(
+                'option_1' => 'value 1',
+                'option_2' => 'value 2',
+            ),
+            // ...
+        ),
+        'label' => __('Addable Popup', '{domain}'),
+        'desc'  => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', '{domain}'),
+        'template' => '{{- demo_text }}',
+        'popup-title' => null,
+        'size' => 'small', // small, medium, large
+        'limit' => 0, // limit the number of popup`s that can be added
+        'add-button-text' => __('Add', '{domain}'),
+        'sortable' => true,
+        'popup-options' => array(
+            'option_1' => array(
+                'label' => __('Text', '{domain}'),
+                'type' => 'text',
+                'value' => 'Demo text value',
+                'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', '{domain}'),
+                'help' => sprintf("%s \n\n'\"<br/><br/>\n\n <b>%s</b>",
+                    __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', '{domain}'),
+                    __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', '{domain}')
+                ),
+            ),
+            'option_2' => array(
+                'label' => __('Textarea', '{domain}'),
+                'type' => 'textarea',
+                'value' => 'Demo textarea value',
+                'desc' => __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', '{domain}'),
+                'help' => sprintf("%s \n\n'\"<br/><br/>\n\n <b>%s</b>",
+                    __('Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', '{domain}'),
+                    __('Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium', '{domain}')
+                ),
+            ),
+        ),
+    )
diff --git a/options/built-in/background-image.rst b/options/built-in/background-image.rst
@@ -0,0 +1,37 @@
+Background Image
+----------------
+
+Choose background image.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'background-image',
+        'value' => 'bg-1',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'choices' => array(
+            'none' => array(
+                'icon' => get_template_directory_uri() . '/images/bg/bg-0.jpg',
+                'css'  => array(
+                    'background-image' => 'none'
+                ),
+            ),
+            'bg-1' => array(
+                'icon'  => get_template_directory_uri() . '/images/bg/bg-1.jpg',
+                'css'  => array(
+                    'background-image'  => 'url("' . get_template_directory_uri() . '/images/bg-1.png' . '")',
+                    'background-repeat' => 'repeat',
+                ),
+            ),
+            'bg-2' => array(
+                'icon' => get_template_directory_uri() . '/images/bg/bg-2.jpg',
+                'css'  => array(
+                    'background-image'  => 'url("' . get_template_directory_uri() . '/images/bg-2.png' . '")',
+                    'background-repeat' => 'repeat-y'
+                ),
+            )
+        )
+    )
diff --git a/options/built-in/checkbox.rst b/options/built-in/checkbox.rst
@@ -0,0 +1,16 @@
+Checkbox
+--------
+
+Single checkbox.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'checkbox',
+        'value' => true, // checked/unchecked
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'text'  => __('Yes', '{domain}'),
+    )
diff --git a/options/built-in/checkboxes.rst b/options/built-in/checkboxes.rst
@@ -0,0 +1,25 @@
+Checkboxes
+----------
+
+A list of checkboxes.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'checkboxes',
+        'value' => array(
+            'choice-1' => false,
+            'choice-2' => true,
+        ),
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'choices' => array( // Note: Avoid bool or int keys http://bit.ly/1cQgVzk
+            'choice-1' => __('Choice 1', '{domain}'),
+            'choice-2' => __('Choice 2', '{domain}'),
+            'choice-3' => __('Choice 3', '{domain}'),
+        ),
+        // Display choices inline instead of list
+        'inline' => false,
+    )
diff --git a/options/built-in/color-picker.rst b/options/built-in/color-picker.rst
@@ -0,0 +1,17 @@
+Color Picker
+------------
+
+Pick a color.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'color-picker',
+        'value' => '#FF0000',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        // palette colors array
+        'palettes' => array( '#ba4e4e', '#0ce9ed', '#941940' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+    )
diff --git a/options/built-in/date-picker.rst b/options/built-in/date-picker.rst
@@ -0,0 +1,18 @@
+Date Picker
+-----------
+
+Pick a date in calendar.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'date-picker',
+        'value' => '',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'monday-first' => true, // The week will begin with Monday; for Sunday, set to false
+        'min-date' => date('d-m-Y'), // By default minimum date will be current day. Set a date in format d-m-Y as a start date
+        'max-date' => null, // By default there is not maximum date. Set a date in format d-m-Y as a start date
+    )
diff --git a/options/built-in/datetime-picker.rst b/options/built-in/datetime-picker.rst
@@ -0,0 +1,23 @@
+Datetime Picker
+---------------
+
+Pick a datetime in calendar.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'datetime-picker',
+        'value' => '',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'datetime-picker' => array(
+            'format'        => 'Y/m/d H:i', // Format datetime.
+            'maxDate'       => false,  // By default there is not maximum date , set a date in the datetime format.
+            'minDate'       => false,  // By default minimum date will be current day, set a date in the datetime format.
+            'timepicker'    => true,   // Show timepicker.
+            'datepicker'    => true,   // Show datepicker.
+            'defaultTime'   => '12:00' // If the input value is empty, timepicker will set time use defaultTime.
+        ),
+    )
diff --git a/options/built-in/datetime-range.rst b/options/built-in/datetime-range.rst
@@ -0,0 +1,34 @@
+Datetime Range
+--------------
+
+Set a datetime range.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'datetime-range',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'datetime-pickers' => array(
+        'from' => array(
+            'minDate' => '1970/01/01', // By default minimum date will be current day, set a date in the datetime format.
+            'maxDate' => '2038/01/19', // By default there is not maximum date , set a date in the datetime format.
+            'format'  => 'Y/m/d H:i',  // Format datetime.
+            'timepicker'  => true,     // Show timepicker.
+            'datepicker'  => true,     // Show datepicker.
+            ),
+        'to' => array(
+            'minDate' => '1970/01/01', // By default minimum date will be current day, set a date in the datetime format.
+            'maxDate' => '2038/01/19', // By default there is not maximum date , set a date in the datetime format.
+            'format'  => 'Y/m/d H:i',  // Format datetime.
+            'timepicker'  => true,     // Show timepicker.
+            'datepicker'  => true,     // Show datepicker.
+            )
+        ),
+        'value' => array(
+            'from' => '',
+            'to' => ''
+        )
+    )
diff --git a/options/built-in/gradient.rst b/options/built-in/gradient.rst
@@ -0,0 +1,18 @@
+Gradient
+--------
+
+Pick gradient colors.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'gradient',
+        'value' => array(
+            'primary'   => '#FF0000',
+            'secondary' => '#0000FF',
+        )
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+    )
diff --git a/options/built-in/hidden.rst b/options/built-in/hidden.rst
@@ -0,0 +1,16 @@
+Hidden
+------
+
+Simple hidden input.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'hidden',
+        'value' => 'default value',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+    )
+
+.. tip::
+
+   The hidden input is not visible, so parameters like ``label``, ``desc`` and ``help`` have no sense here.
diff --git a/options/built-in/html.rst b/options/built-in/html.rst
@@ -0,0 +1,24 @@
+HTML
+----
+
+If you want to display a custom piece of html, use this option type.
+
+.. note::
+
+    This option type has a value stored in a hidden input. Advanced users can create some javascript functionality in html and store the value in that hidden input.
+
+.. code-block:: php
+
+    array(
+        'type'  => 'html',
+        'value' => 'default hidden value',
+        'attr'  => array( 'class' => 'custom-class', 'data-foo' => 'bar' ),
+        'label' => __('Label', '{domain}'),
+        'desc'  => __('Description', '{domain}'),
+        'help'  => __('Help tip', '{domain}'),
+        'html'  => 'My <b>custom</b> <em>HTML</em>',
+    )
+
+.. note::
+
+    There are ``html-fixed`` and ``html-full`` option types as well. They are the same as ``html`` but has **fixed** and **full** :ref:`option width <option-type-width>`.