edouard@2883: // widget_jump.ysl2
Edouard@2779: 
edouard@3241: widget_desc("Jump") {
edouard@3241:     longdesc
edouard@3241:     ||
edouard@3241:     Jump widget brings focus to a different page. Mandatory single argument
edouard@3241:     gives name of the page.
edouard@3241: 
edouard@3241:     Optional single path is used as new reference when jumping to a relative
edouard@3241:     page, it must point to a HMI_NODE.
edouard@3241: 
edouard@3241:     "active"+"inactive" labeled elements can be provided and reflect current
edouard@3241:     page being shown.
edouard@3241: 
edouard@3241:     "disabled" labeled element, if provided, is shown instead of "active" or
edouard@3241:     "inactive" widget when pointed HMI_NODE is null.
edouard@3241:     ||
edouard@3241: 
edouard@3241:     shortdesc > Jump to given page
edouard@3241: 
edouard@3241:     arg name="page" accepts="string" > name of page to jump to
edouard@3241: 
edouard@3241:     path name="reference" count="optional" accepts="HMI_NODE" > reference for relative jump
edouard@3241: }
edouard@3241: 
edouard@3232: widget_class("Jump") {
edouard@3107: ||
edouard@3107:         activable = false;
edouard@3107:         active = false;
edouard@3107:         disabled = false;
edouard@3107:         frequency = 2;
edouard@3107: 
edouard@3107:         update_activity() {
edouard@3107:             if(this.active) {
edouard@3107:                  /* show active */ 
Edouard@3240:                  this.active_elt.style.display = "";
edouard@3107:                  /* hide inactive */ 
Edouard@3240:                  this.inactive_elt.style.display = "none";
edouard@3107:             } else {
edouard@3107:                  /* show inactive */ 
Edouard@3240:                  this.inactive_elt.style.display = "";
edouard@3107:                  /* hide active */ 
Edouard@3240:                  this.active_elt.style.display = "none";
Edouard@3240:             }
Edouard@3240:         }
Edouard@3240: 
Edouard@3240:         update_disability() {
Edouard@3240:             if(this.disabled) {
Edouard@3240:                 /* show disabled */ 
Edouard@3240:                 this.disabled_elt.style.display = "";
Edouard@3240:                 /* hide inactive */ 
Edouard@3240:                 this.inactive_elt.style.display = "none";
Edouard@3240:                 /* hide active */ 
Edouard@3240:                 this.active_elt.style.display = "none";
Edouard@3240:             } else {
Edouard@3240:                 /* hide disabled */ 
Edouard@3240:                 this.disabled_elt.style.display = "none";
Edouard@3240:                 this.update_activity();
edouard@3107:             }
edouard@3107:         }
edouard@3107: 
edouard@3107:         make_on_click() {
edouard@3107:             let that = this;
edouard@3107:             const name = this.args[0];
edouard@3107:             return function(evt){
Edouard@3240:                 /* TODO: in order to allow jumps to page selected through for exemple a dropdown,
Edouard@3240:                    support path pointing to local variable whom value 
Edouard@3240:                    would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
Edouard@3240:                 if(!that.disabled) {
Edouard@3240:                     const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
Edouard@3512:                     fading_page_switch(name, index);
Edouard@3240:                 }
edouard@3107:             }
edouard@3107:         }
edouard@3107: 
edouard@3107:         notify_page_change(page_name, index) {
edouard@3107:             if(this.activable) {
edouard@3107:                 const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
edouard@3107:                 const ref_name = this.args[0];
edouard@3107:                 this.active = ((ref_name == undefined || ref_name == page_name) && index == ref_index);
Edouard@3240:                 this.update_state();
edouard@3107:             }
edouard@3107:         }
edouard@3107: 
edouard@3107:         dispatch(value) {
edouard@3107:             this.disabled = !Number(value);
Edouard@3240:             this.update_state();
edouard@3107:         }
edouard@3107: ||
Edouard@2906: }
Edouard@2906: 
edouard@3232: widget_defs("Jump") {
edouard@3241:     // TODO: ensure both active and inactive are provided
edouard@3107:     const "activity" optional_labels("active inactive");
Edouard@2906:     const "have_activity","string-length($activity)>0";
Edouard@2906:     value "$activity";
edouard@3107: 
edouard@3107:     const "disability" optional_labels("disabled");
Edouard@2906:     const "have_disability","$have_activity and string-length($disability)>0";
Edouard@2906:     value "$disability";
edouard@3107: 
edouard@2883:     |     init: function() {
Edouard@3081:     |         this.element.onclick = this.make_on_click();
Edouard@2906:     if "$have_activity" {
edouard@3107:     |         this.activable = true;
Edouard@2903:     }
Edouard@3240:     if "not($have_disability)" {
Edouard@3240:     |         this.unsubscribable = true;
Edouard@3240:     }
Edouard@3240:     >         this.update_state = 
edouard@2953:     choose {
edouard@2953:         when "$have_disability" {
Edouard@3240:             > this.update_disability
edouard@2953:         }
Edouard@3240:         when "$have_activity" {
Edouard@3240:             > this.update_activity
edouard@2953:         }
Edouard@3240:         otherwise > null
Edouard@2906:     }
Edouard@3240:     > ;\n
edouard@2883:     |     },
Edouard@3240: 
Edouard@2753: }
Edouard@2901: 
edouard@3232: widget_page("Jump"){
Edouard@2901:     param "page_desc";
Edouard@2901:     /* check that given path is compatible with page's reference path */
Edouard@2901:     if "path" {
edouard@3107:         /* TODO: suport local variable containing an HMI_TREE index to jump to a relative page */
Edouard@2901:         /* when no page name provided, check for same page */
Edouard@2901:         const "target_page_name" choose {
Edouard@2901:             when "arg" value "arg[1]/@value";
Edouard@2901:             otherwise value "$page_desc/arg[1]/@value";
Edouard@2901:         }
Edouard@2901:         const "target_page_path" choose {
Edouard@2901:             when "arg" value "$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value";
Edouard@2901:             otherwise value "$page_desc/path[1]/@value";
Edouard@2901:         }
Edouard@2901: 
Edouard@2901:         if "not(func:same_class_paths($target_page_path, path[1]/@value))"
Edouard@2901:             error > Jump id="«@id»" to page "«$target_page_name»" with incompatible path "«path[1]/@value» (must be same class as "«$target_page_path»")
Edouard@2901:     }
Edouard@2901: }
edouard@2942: 
Edouard@3512: emit "cssdefs:jump"
Edouard@3512: ||
Edouard@3512: .fade-out-page {
Edouard@3553:     animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;
Edouard@3512: }
Edouard@3512: 
Edouard@3512: @keyframes fadeOut {
Edouard@3512:     0% { opacity: 1; }
Edouard@3512:     100% { opacity: 0; }
Edouard@3512: }
Edouard@3512: 
Edouard@3512: ||
Edouard@3512: 
edouard@2943: emit "declarations:jump"
edouard@2942: ||
edouard@2942: var jumps_need_update = false;
edouard@2942: var jump_history = [[default_page, undefined]];
edouard@2942: 
edouard@2942: function update_jumps() {
edouard@2942:     page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));
edouard@2942:     jumps_need_update = false;
edouard@2942: };
edouard@2942: 
edouard@2942: ||
edouard@2942: