// widget_foreach.ysl2 widget_desc("ForEach") { longdesc || ForEach widget is used to span a small set of widget over a larger set of repeated HMI_NODEs. Idea is somewhat similar to relative page, but it all happens inside the ForEach widget, no page involved. Together with relative Jump widgets it can be used to build a menu to reach relative pages covering many identical HMI_NODES siblings. ForEach widget takes a HMI_CLASS name as argument and a HMI_NODE path as variable. Direct sub-elements can be either groups of widget to be spanned, labeled "ClassName:offset", or buttons to control the spanning, labeled "ClassName:+/-number". In case of "ClassName:offset", offset for first element is 1. || shortdesc > span widgets over a set of repeated HMI_NODEs arg name="class_name" accepts="string" > HMI_CLASS name path name="root" accepts="HMI_NODE" > where to find HMI_NODEs whose HMI_CLASS is class_name path name="position" accepts="HMI_INT" > position of HMI_NODE mapped to first item, among similar siblings path name="range" accepts="HMI_INT" count="optional" > count of HMI_NODE siblings path name="size" accepts="HMI_INT" count="optional" > count of visible items } widget_defs("ForEach") { if "count(path) < 1" error > ForEach widget «$hmi_element/@id» must have one HMI path given. if "count(arg) != 1" error > ForEach widget «$hmi_element/@id» must have one argument given : a class name. const "class","arg[1]/@value"; const "base_path","path/@value"; const "hmi_index_base", "$indexed_hmitree/*[@hmipath = $base_path]"; const "hmi_tree_base", "$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]"; const "hmi_tree_items", "$hmi_tree_base/*[@class = $class]"; const "hmi_index_items", "$indexed_hmitree/*[@path = $hmi_tree_items/@path]"; const "items_paths", "$hmi_index_items/@hmipath"; | index_pool: [ foreach "$hmi_index_items" { | «@index»`if "position()!=last()" > ,` } | ], | init: function() { const "prefix","concat($class,':')"; const "buttons_regex","concat('^',$prefix,'[+\-][0-9]+')"; const "buttons", "$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]"; foreach "$buttons" { const "op","substring-after(@inkscape:label, $prefix)"; | id("«@id»").setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click('«$op»', evt)"); } | | this.items = [ const "items_regex","concat('^',$prefix,'[0-9]+')"; const "unordered_items","$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]"; foreach "$unordered_items" { const "elt_label","concat($prefix, string(position()))"; const "elt","$unordered_items[@inkscape:label = $elt_label]"; const "pos","position()"; const "item_path", "$items_paths[$pos]"; | [ /* item="«$elt_label»" path="«$item_path»" */ if "count($elt)=0" error > Missing item labeled «$elt_label» in ForEach widget «$hmi_element/@id» if "count($elt)>1" error > Duplicate item labeled «$elt_label» in ForEach widget «$hmi_element/@id» foreach "func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]" { if "not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))" error > Widget id="«@id»" label="«@inkscape:label»" is having wrong path. Accroding to ForEach widget ancestor id="«$hmi_element/@id»", path should be descendant of "«$item_path»". | hmi_widgets["«@id»"]`if "position()!=last()" > ,` } | ]`if "position()!=last()" > ,` } | ] | }, | range: «count($hmi_index_items)», | size: «count($unordered_items)», | position: 0, } widget_class("ForEach") || items_subscribed = false; unsub_items(){ if(this.items_subscribed){ for(let item of this.items){ for(let widget of item) { widget.unsub(); } } this.items_subscribed = false; } } unsub(){ super.unsub() this.unsub_items(); } sub_items(){ if(!this.items_subscribed){ for(let i = 0; i < this.size; i++) { let item = this.items[i]; let orig_item_index = this.index_pool[i]; let item_index = this.index_pool[i+this.position]; let item_index_offset = item_index - orig_item_index; if(this.relativeness[0]) item_index_offset += this.offset; for(let widget of item) { /* all variables of all widgets in a ForEach are all relative. Really. TODO: allow absolute variables in ForEach widgets */ widget.sub(item_index_offset, widget.indexes.map(_=>true)); } } } } sub(new_offset, relativeness, container_id){ let position_given = this.indexes.length > 1; // sub() will call apply_cache() and then dispatch() // undefining position forces dispatch() to call apply_position() if(position_given) this.position = undefined; super.sub(new_offset, relativeness, container_id); // if position isn't given as a variable // dispatch() to call apply_position() aren't called // and items must be subscibed now. if(!position_given) this.sub_items(); // as soon as subribed apply range and size once for all if(this.indexes.length > 2) this.apply_hmi_value(2, this.range); if(this.indexes.length > 3) this.apply_hmi_value(3, this.size); } apply_position(new_position){ let old_position = this.position; let limited_position = Math.round(Math.max(Math.min(new_position, this.range - this.size), 0)); if(this.position == limited_position){ return false; } this.unsub_items(); this.position = limited_position; this.sub_items(); request_subscriptions_update(); jumps_need_update = true; this.request_animate(); return true; } on_click(opstr, evt) { let new_position = eval(String(this.position)+opstr); if(new_position + this.size > this.range) { if(this.position + this.size == this.range) new_position = 0; else new_position = this.range - this.size; } else if(new_position < 0) { if(this.position == 0) new_position = this.range - this.size; else new_position = 0; } if(this.apply_position(new_position)){ this.apply_hmi_value(1, this.position); } } dispatch(value, oldval, index) { // Only care about position, others are constants if(index == 1){ this.apply_position(value); if(this.position != value){ // widget refused or apply different value, force it back this.apply_hmi_value(1, this.position); } } } ||