Git Product home page Git Product logo

silverstripe-spinner-field's Introduction

Spinner field for SilverStripe

A spinner field for SilverStripe using jQuery UI's Spinner Widget providing a nice interface for number input fields and the ability to customize them.

Requirements

"require": {
    "php": "^5.4",
    "silverstripe/framework": "~3.1"
}

Installation

composer require jjjjjjjjjjjjjjjjjjjj/silverstripe-spinner-field

Example usage

SpinnerField::create(

    // Field name
    'Answer',

    // Label
    'What is the answer to the ultimate question of life, the universe, and everything?',

    // Initial value
    rand(0, 42),

    // Optional options (see available options below under heading: UI settings)
    [
        'min'  => 0,
        'max'  => 42,
        'step' => 3 // Increment and decrement in steps of 3
    ]

);

Configuration

UI settings

You can configure the spinner widget's UI by passing an array of options in the constructor like shown above, or you could do something like:

// Setting a batch of options.
$spinnerField->setUIOptions(
    [
        'disabled'  => true,
        'max'       => 314159265359,
        'page'      => 100000000000,
        'icon_up'   => 'ui-icon-plus',
        'icon_down' => 'ui-icon-minus'
    ]
);

// On second thought...
$spinnerField->setUIOption('disabled', false);

Here's a list of available UI options. See https://api.jqueryui.com/spinner/ for detailed description of the options and what they do.

// Available options and their default values
[
    culture      => null,
    disabled     => false,
    icon_down    => 'ui-icon-triangle-1-s',
    icon_up      => 'ui-icon-triangle-1-n',
    incremental  => true,
    max          => null,
    min          => null,
    numberFormat => null, // Currently only 'n'||null is supported
    page         => 10,
    step         => 1
]

Field settings

/**
 * Enforce step validation. Will cause validation to fail if input is
 * not evenly divisible with the 'step' UI option. Example: if 'step'
 * is set to 4, validation will fail for 0 !== $input % 4
 *
 * @var bool
 */
protected $enforceStepValidation = false;
/**
 * Will cause validation to fail if input is below the 'min' UI option.
 *
 * @var bool
 */
protected $enforceBelowMinValidation = true;
/**
 * Will cause validation to fail if input is above the 'max' UI option.
 *
 * @var bool
 */
protected $enforceAboveMaxValidation = true;

Furthermore see NumericField for inherited field settings.

silverstripe-spinner-field's People

Contributors

jjjjjjjjjjjjjjjjjjjj avatar banglashi avatar

Watchers

James Cloos avatar  avatar

silverstripe-spinner-field's Issues

Localization and number format

Setting step to decimal values will cause validation to fail for locales using comma as decimal separator.
Example: $spinnerField->setUIOption('step', 3.14); causes validation to fail for a Swedish locale.

Suggested fix: make use of the UI widget's numberFormat and culture options combined with the field's $locale inherited from NumericField to validate correctly

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.