Namespace: Widgets

.ALS. Widgets

Contains widgets to add to L.ALS.Widgetables.

Important notes:

  1. Widgets can be added only to L.ALS.Widgetable using L.ALS.Widgetable#addWidget.
  2. Widgets are using rather strange callback system due to limits related to the serialization.
  3. All widgets' public methods returns this, i.e. they can be chained.
  4. Settings will add a revert button to the widgets. You can control this behavior by changing L.ALS.Widgets.BaseWidget#undoable and L.ALS.Widgets.BaseWidget#containerForRevertButton properties.

Please, take a look at example below which explains all these thing.

Example

Create and add some widgets to the Layer's menu

L.ALS.MyLayer = L.ALS.Layer.extend({

     init: function (wizardResults, settings) {
         // Add widgets to the layer
         this.addWidgets(
             // Take a look at last two arguments. Third argument is an object which contains our callback. Fourth argument is a callback name.
             // As a result, when widget's value will change, L.ALS.MyLayer#someCallback0 method will be called.
             (new L.ALS.Widgets.Number("myNumber0", "Number 0", this, "someCallback0")).
             setMin(0).setMax(100).setStep(2).setValue(50), // We can instantiate a widget and set its properties at the same time by chaining all of that. Each setter returns the same widget.

             // L.ALS.Widgetable#addWidgets() accepts numerous widgets. So let's add some more.
             (new L.ALS.Widgets.Number("myNumber1", "Number 1", this, "someCallback1")).setMin(0).setMax(1).setStep(0.1).setValue(0),
             (new L.ALS.Widgets.Color("myColor", "Color", this, "someCallback2")).setValue("red"),
         );
     },

     // Add callbacks which will just console.log() widgets' values
     someCallback0: function (widget) { console.log(widget.getValue()); }, // For "myNumber0" widget
     someCallback1: function (widget) { console.log(widget.getValue()); }, // For "myNumber1" widget
     someCallback2: function (widget) { console.log(widget.getValue()); }, // For "myColor" widget
}

Classes

BaseItemsWidget
BaseWidget
Button
ButtonsGroup
Checkbox
Color
Divider
DropDownList
Email
File
Number
Password
RadioButtonsGroup
SimpleLabel
Spoiler
Text
TextArea
Time
ValueLabel