<@comment>// Copyright (C) 2016 The Qt Company Ltd.</@comment>
<@comment>// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause</@comment>

import QtQuick 1.0

<@comment>/*!
    \qmltype ToggleSwitch
    \inqmlmodule UIComponents
    \brief A component that can be turned on or off.

    A toggle switch has two states: an \c on and an \c off state. The \c off
    state is when the \l on property is set to \c false.

    The ToggleSwitch component is part of the \l {UI Components} module.

    This documentation is part of the \l{componentset}{UIComponents} example.

*/</@comment>
<@type>Item</@type> {
    <@name>id</@name>: <@name>toggleswitch</@name>
    <@name>width</@name>: <@name>background</@name>.<@name>width</@name>; <@name>height</@name>: <@name>background</@name>.<@name>height</@name>

    <@comment>/*!
       Indicates the state of the switch. If \c false, then the switch is in
       the \c off state.

       \omit
            The \qmlproperty &lt;type&gt; &lt;propertyname&gt; is not necessary as QDoc
            will associate this property to the ToggleSwitch

           QDoc will not publish the documentation within omit and endomit.
       \endomit
    */</@comment>
    property <@type>bool</@type> <@name>on</@name>: <@number>false</@number>

    <@comment>/*!
        A method to toggle the switch. If the switch is \c on, the toggling it
        will turn it \c off. Toggling a switch in the \c off position will
        turn it \c on.
    */</@comment>
    <@keyword>function </@keyword><@name>toggle</@name>() {
        <@keyword>if</@keyword> (<@name>toggleswitch</@name>.<@name>state</@name> <@op>==</@op> <@string>&quot;on&quot;</@string>)
            <@name>toggleswitch</@name>.<@name>state</@name> <@op>=</@op> <@string>&quot;off&quot;</@string>;
        <@keyword>else</@keyword>
            <@name>toggleswitch</@name>.<@name>state</@name> <@op>=</@op> <@string>&quot;on&quot;</@string>;
    }

    <@comment>/*!
        \internal

        An internal function to synchronize the switch's internals. This
        function is not for public access. The \internal command will
        prevent QDoc from publishing this comment in the public API.
    */</@comment>
    <@keyword>function </@keyword><@name>releaseSwitch</@name>() {
        <@keyword>if</@keyword> (<@name>knob</@name>.<@name>x</@name> <@op>==</@op> <@number>1</@number>) {
            <@keyword>if</@keyword> (<@name>toggleswitch</@name>.<@name>state</@name> <@op>==</@op> <@string>&quot;off&quot;</@string>) <@keyword>return</@keyword>;
        }
        <@keyword>if</@keyword> (<@name>knob</@name>.<@name>x</@name> <@op>==</@op> <@number>78</@number>) {
            <@keyword>if</@keyword> (<@name>toggleswitch</@name>.<@name>state</@name> <@op>==</@op> <@string>&quot;on&quot;</@string>) <@keyword>return</@keyword>;
        }
        <@name>toggle</@name>();
    }

    <@type>Rectangle</@type> {
        <@name>id</@name>: <@name>background</@name>
        <@name>width</@name>: <@number>130</@number>; <@name>height</@name>: <@number>48</@number>
        <@name>radius</@name>: <@number>48</@number>
        <@name>color</@name>: <@string>&quot;lightsteelblue&quot;</@string>
        <@type>MouseArea</@type> { <@name>anchors</@name>.fill: <@name>parent</@name>; <@name>onClicked</@name>: <@name>toggle</@name>() }
    }

    <@type>Rectangle</@type> {
        <@name>id</@name>: <@name>knob</@name>
        <@name>width</@name>: <@number>48</@number>; <@name>height</@name>: <@number>48</@number>
        <@name>radius</@name>: <@name>width</@name>
        <@name>color</@name>: <@string>&quot;lightblue&quot;</@string>

        <@type>MouseArea</@type> {
            <@name>anchors</@name>.fill: <@name>parent</@name>
            <@name>drag</@name>.target: <@name>knob</@name>; <@name>drag</@name>.axis: <@name>Drag</@name>.<@name>XAxis</@name>; <@name>drag</@name>.minimumX: <@number>1</@number>; <@name>drag</@name>.maximumX: <@number>78</@number>
            <@name>onClicked</@name>: <@name>toggle</@name>()
            <@name>onReleased</@name>: <@name>releaseSwitch</@name>()
        }
    }

    <@name>states</@name>: [
        <@type>State</@type> {
            <@name>name</@name>: <@string>&quot;on&quot;</@string>
            <@type>PropertyChanges</@type> { <@name>target</@name>: <@name>knob</@name>; <@name>x</@name>: <@number>78</@number> }
            <@type>PropertyChanges</@type> { <@name>target</@name>: <@name>toggleswitch</@name>; <@name>on</@name>: <@number>true</@number> }
        },
        <@type>State</@type> {
            <@name>name</@name>: <@string>&quot;off&quot;</@string>
            <@type>PropertyChanges</@type> { <@name>target</@name>: <@name>knob</@name>; <@name>x</@name>: <@number>1</@number> }
            <@type>PropertyChanges</@type> { <@name>target</@name>: <@name>toggleswitch</@name>; <@name>on</@name>: <@number>false</@number> }
        }
    ]

    <@name>transitions</@name>: <@name>Transition</@name> {
        <@type>NumberAnimation</@type> { <@name>properties</@name>: <@string>&quot;x&quot;</@string>; <@name>easing</@name>.type: <@name>Easing</@name>.<@name>InOutQuad</@name>; <@name>duration</@name>: <@number>200</@number> }
    }
}