1

// widget_jump.ysl2

     2

     3

widget_desc("Jump") {

     4

    longdesc

     5

    ||

     6

    Jump widget brings focus to a different page. Mandatory single argument

     7

    gives name of the page.

     8

     9

    Optional single path is used as new reference when jumping to a relative

    10

    page, it must point to a HMI_NODE.

    11

    12

    "active"+"inactive" labeled elements can be provided and reflect current

    13

    page being shown.

    14

    15

    "disabled" labeled element, if provided, is shown instead of "active" or

    16

    "inactive" widget when pointed HMI_NODE is null.

    17

    ||

    18

    19

    shortdesc > Jump to given page

    20

    21

    arg name="page" accepts="string" > name of page to jump to

    22

    23

    path name="reference" count="optional" accepts="HMI_NODE" > reference for relative jump

    24

}

    25

    26

widget_class("Jump") {

    27

||

    28

        activable = false;

    29

        active = false;

    30

        disabled = false;

    31

        frequency = 2;

    32

    33

        update_activity() {

    34

            if(this.active) {

    35

                 /* show active */ 

    36

                 this.active_elt.style.display = "";

    37

                 /* hide inactive */ 

    38

                 this.inactive_elt.style.display = "none";

    39

            } else {

    40

                 /* show inactive */ 

    41

                 this.inactive_elt.style.display = "";

    42

                 /* hide active */ 

    43

                 this.active_elt.style.display = "none";

    44

            }

    45

        }

    46

    47

        update_disability() {

    48

            if(this.disabled) {

    49

                /* show disabled */ 

    50

                this.disabled_elt.style.display = "";

    51

                /* hide inactive */ 

    52

                this.inactive_elt.style.display = "none";

    53

                /* hide active */ 

    54

                this.active_elt.style.display = "none";

    55

            } else {

    56

                /* hide disabled */ 

    57

                this.disabled_elt.style.display = "none";

    58

                this.update_activity();

    59

            }

    60

        }

    61

    62

        make_on_click() {

    63

            let that = this;

    64

            const name = this.args[0];

    65

            return function(evt){

    66

                /* TODO: in order to allow jumps to page selected through for exemple a dropdown,

    67

                   support path pointing to local variable whom value 

    68

                   would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */

    69

                if(!that.disabled) {

    70

                    const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;

    71

                    fading_page_switch(name, index);

    72

                }

    73

            }

    74

        }

    75

    76

        notify_page_change(page_name, index) {

    77

            if(this.activable) {

    78

                const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;

    79

                const ref_name = this.args[0];

    80

                this.active = ((ref_name == undefined || ref_name == page_name) && index == ref_index);

    81

                this.update_state();

    82

            }

    83

        }

    84

    85

        dispatch(value) {

    86

            this.disabled = !Number(value);

    87

            this.update_state();

    88

        }

    89

||

    90

}

    91

    92

widget_defs("Jump") {

    93

    // TODO: ensure both active and inactive are provided

    94

    const "activity" optional_labels("active inactive");

    95

    const "have_activity","string-length($activity)>0";

    96

    value "$activity";

    97

    98

    const "disability" optional_labels("disabled");

    99

    const "have_disability","$have_activity and string-length($disability)>0";

   100

    value "$disability";

   101

   102

    |     init: function() {

   103

    |         this.element.onclick = this.make_on_click();

   104

    if "$have_activity" {

   105

    |         this.activable = true;

   106

    }

   107

    if "not($have_disability)" {

   108

    |         this.unsubscribable = true;

   109

    }

   110

    >         this.update_state = 

   111

    choose {

   112

        when "$have_disability" {

   113

            > this.update_disability

   114

        }

   115

        when "$have_activity" {

   116

            > this.update_activity

   117

        }

   118

        otherwise > null

   119

    }

   120

    > ;\n

   121

    |     },

   122

   123

}

   124

   125

widget_page("Jump"){

   126

    param "page_desc";

   127

    /* check that given path is compatible with page's reference path */

   128

    if "path" {

   129

        /* TODO: suport local variable containing an HMI_TREE index to jump to a relative page */

   130

        /* when no page name provided, check for same page */

   131

        const "target_page_name" choose {

   132

            when "arg" value "arg[1]/@value";

   133

            otherwise value "$page_desc/arg[1]/@value";

   134

        }

   135

        const "target_page_path" choose {

   136

            when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value";

   137

            otherwise value "$page_desc/path[1]/@value";

   138

        }

   139

   140

        if "not(func:same_class_paths($target_page_path, path[1]/@value))"

   141

            error > Jump id="«@id»" to page "«$target_page_name»" with incompatible path "«path[1]/@value» (must be same class as "«$target_page_path»")

   142

    }

   143

}

   144

   145

emit "cssdefs:jump"

   146

||

   147

.fade-out-page {

   148

    animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;

   149

}

   150

   151

@keyframes fadeOut {

   152

    0% { opacity: 1; }

   153

    100% { opacity: 0; }

   154

}

   155

   156

||

   157

   158

emit "declarations:jump"

   159

||

   160

var jumps_need_update = false;

   161

var jump_history = [[default_page, undefined]];

   162

   163

function update_jumps() {

   164

    page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));

   165

    jumps_need_update = false;

   166

};

   167

   168

||

   169