README

A utility Library with minimal interface giving you the ability to create HTML form fields with added functionality.

Form Fields included are

text
multi-text
multi-text-calendar
textarea
select
multi-select
icon
color
calendar
heading
radio
checkbox

Demo

HTML Form Fields DEMO

Getting Started

Prerequisites

PHP - the following PHP dependencies are required for complete working of form fields
- PHP >= 5.4
- "bonzer/exceptions" : "dev-master"
- "oyejorge/less.php" : "v1.7.0.14"
Javascript - the following javacsript dependencies are required for complete working of form fields
- jquery
- jquery-ui
  (Includes: draggable, core, resizable, selectable, sortable, datepicker, menu, selectmenu, button, tooltip)
- chosen (Multi Select)
- spectrum (Color Picker)
CSS - the following CSS dependencies are required for complete working of form fields
- font-awesome
- jquery-ui
- jquery-ui.theme
  (Includes: draggable, core, resizable, selectable, sortable, datepicker, menu, selectmenu, button, tooltip, theme)
- chosen (Multi Select)
- spectrum (Color Picker)

Installing

It can be installed via composer. Run

composer require bonzer/inputs

Configuration

Bonzer\Inputs\config\Configurer::get_instance([
  'load_assets_automatically' => true, // recommended option is false, I have made it true so that library does not break if you don't configure
  'css_excluded' => [ ], // keys for js files you don't want the library to load, You should be responsible for loading them for library
  'js_excluded' => [ ],  // keys for js files you don't want the library to load, You should be responsible for loading them for library
  'env' => 'production', // development | production
  'is_admin' => false // flag you can set to tell library when the fields are opened in ADMIN mode, helpful for Exception handling
  'style' => '1', // 1,2,3
]);

The above code must come before any code related to this Library.

Note: keys to put in js_excluded and css_excluded can be found in src/config.php file

The Library come bundled with required css, js and fonts. As we all know css must go in head tag and for js, recommended option is before </body>. For this Library is offering two methods:

$Assets_Loader = Bonzer\Inputs\Assets_Loader::get_instance();
$Assets_Loader->load_head_fragment();
$Assets_Loader->load_before_body_close_fragment();

but if you intend to use both of these options yourself, turn the 'load_assets_automatically' key in configuration to FALSE. i.e.

'load_assets_automatically' => FALSE

Usage

There is a Factory class Bonzer\Inputs\factories\Input that has create method, The Blueprint of the Method is

  /**
   * --------------------------------------------------------------------------
   * Create the Input field
   * --------------------------------------------------------------------------
   * 
   * @param string $type | input type ('calendar', 'checkbox', 'color', 'heading', 'icon', 'multi-select', 'multi-text', 'multi-text-calendar', 'radio', 'select', 'text', 'textarea',)
   * @param array $args 
   * 
   * @Return string 
   * */
   public function create( $type, $args );

second argument $args has blueprint as follows:

$args = [
   'name' => $field_name,    string
   'id' => $field_id,        string
   'label' => $field_label,  string
   'placeholder' => $field_placeholder,  string
   'value' => $value,        string
   'desc' => $description,   string
   'options' => $options,    array
   'attrs' => $attrs,        array
];

Examples

$input = Bonzer\Inputs\factories\Input::get_instance();
echo $input->create('text', [
  'id' => 'text',
  'placeholder' => 'Hello',
  'value' => '',
]);
echo $input->create('icon', [
  'id' => 'icon',
  'placeholder' => 'select icon',
  'value' => '',
]);
echo $input->create('multi-text', [
  'id' => 'multi-text',
  'placeholder' => 'Hello',
  'value' => '',
]);
echo $input->create('calendar', [
  'id' => 'calendar',
  'placeholder' => 'Calendar',
  'value' => '',
]);
echo $input->create('multi-text-calendar', [
  'id' => 'multi-text-calendar',
  'placeholder' => 'Multi Text Calendar',
  'value' => '',
]);
echo $input->create('textarea', [
  'id' => 'textarea',
  'placeholder' => 'Textarea',
  'value' => '',
]);
echo $input->create('select', [
  'id' => 'select',
  'options' => [
    'hello' => 'Hello',
    'world' => 'World',
  ],
]);
echo $input->create('multi-select', [
  'id' => 'multi-select',
  'options' => [
    'hello' => 'Hello',
    'world' => 'World',
  ],
]);
echo $input->create('color', [
  'id' => 'color',
  'placeholder' => 'Hello',
  'value' => '',
]);

Support

If you are having issues, please let me know.
You can contact me at ralhan.paras@gmail.com

Credits

Font Awesome
Vector Icons -- Pixel Buddha from www.flaticon.com is licensed by CC 3.0 BY

License

The project is licensed under the MIT license.

bonzer / inputs

Maintainers

Details