https://www.lesmerveillesdelame.fr/Ext/Resources?a=CLe5H_Yo_xKcOYs…vYgDilVnxK1mNGLmY0uGdBJeOM71D3vYLd6f1OEqWsA

1WS.Namespace.Create('NovAxis.ToggleButton', (function ()
2{
3    /**
4    @class ToggleButton
5    @namespace NovAxis
6    @constructor
7    @param {JQuery Dom} Element Dom element that will be replace by the control. <br/>
8    Must be int the specific form : &lt;div&gt;&lt;span name="on"&gt;On text&lt;/span&gt;&lt;span name="off"&gt;Off text&lt;/span&gt;&lt;/div&gt;<br/>
9    Class "on" is supported to set button value : &lt;div class="on"&gt;&lt;span name="on"&gt;On text&lt;/span&gt;&lt;span name="off"&gt;Off text&lt;/span&gt;&lt;/div&gt;<br/>
10    @param {Boolean} [Value] true, false
11    @param {Array<string>} [Classes] Array of class name to apply to the control.
12    **/
13    var _class = function (Element, Value, Classes)
14    {
15        if (!Element || Element.length == 0) throw "Element control cannot be null.";
16        if (Value && (typeof Value !== "boolean")) throw "Value must be boolean.";
17
18
19        /**
20        Fired when the value is changed.
21
22        @event change
23        @param {Boolean} The new value.
24        **/
25        WS.EventObject.call(this, ['change']);
26
27        // InitData
28        this._Value = false;
29        this.originalElement = Element;
30
31        // Element
32        this._Element = $(CreateControl.call(this, Element));
33        
34        Element.after(this._Element);
35        Element.remove();
36        if (Classes && Classes.length > 0) this._Element.addClass(Classes.join(" "));
37
38        // Events, Bindings
39        AddEvents.apply(this);
40        if (Value != null) this.SetValue(Value);
41    };
42
43    WS.Exts.Inherits(_class, WS.EventObject);
44
45    // Private Method(s)
46    var CreateControl = function (Element)
47    {
48        var Html = [];
49
50        var MyElement = {
51            Button: Element,
52            On: Element.find('span[name=on]'),
53            Off: Element.find('span[name=off]')
54        };
55
56        var On = "";
57
58        if (MyElement.Button.hasClass('on'))
59        {
60            On = "class=\"wsOn\"";
61            this._Value = true;
62        }
63        else
64        {           
65            this._Value = false;
66        }
67
68        Html.push("<div class=\"naToggleButton\">");
69        Html.push("<div " + On + ">");
70        Html.push(MyElement.On[0].outerHTML);
71        Html.push(MyElement.Off[0].outerHTML);
72        Html.push("<div></div>");
73        Html.push("</div>");
74        Html.push("</div>");
75
76        return Html.join("");
77    };
78
79    var AddEvents = function ()
80    {
81        var Me = this;
82        var button = this._Element.find("> div");
83
84        button.off('click').on('click', function ()
85        {
86            var Value = !Me._Value;
87            Me.SetValue(Value);
88            Me.RaiseEvent('change', Value);
89        });
90    };
91
92    // Public Method(s)
93    (function (Methods)
94    {
95        /**
96        Get the selected value (on/off).
97    
98        @method GetValue
99        @return {boolean} Value
100        **/
101        Methods.GetValue = function ()
102        {
103            return this._Value;
104        };
105
106        /**
107        Set the selected value (on/off).
108    
109        @method SetValue
110        @param {boolean} Value
111        **/
112        Methods.SetValue = function (Value)
113        {
114            if (Value == null) throw 'Value cannot be null.';
115            if (Value && (typeof Value !== 'boolean')) throw 'Value must be boolean.';
116
117            this._Value = Value;
118            var button = this._Element.find('> div');
119            button.removeClass('wsOn');
120            if (this._Value) button.addClass('wsOn');
121        };
122
123        /**
124        Disable the control.
125   
126        @method Disable
127        **/
128        Methods.Disable = function ()
129        {
130            this._Element.find('> div').css({ 'pointer-events': 'none', 'background-color': '#5c5c5c' });
131        };
132
133        /**
134        Enable the control.
135 
136        @method Enable
137        **/
138        Methods.Enable = function ()
139        {
140            this._Element.find('> div').css({ 'pointer-events': 'all', 'background-color': '' });
141        };
142
143        /**
144        Destroy the control.
145 
146        @method Destroy
147        **/
148        Methods.Destroy = function ()
149        {
150            this._Element.after(this.originalElement);
151            this._Element.remove();
152            this._Element = null;
153        };
154
155    })(_class.prototype);
156
157    return _class;
158})());