820 <xsl:template mode="widget_defs" match="widget[@type='DropDown']"> |
820 <xsl:template mode="widget_defs" match="widget[@type='DropDown']"> |
821 <xsl:param name="hmi_element"/> |
821 <xsl:param name="hmi_element"/> |
822 <xsl:call-template name="defs_by_labels"> |
822 <xsl:call-template name="defs_by_labels"> |
823 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
823 <xsl:with-param name="hmi_element" select="$hmi_element"/> |
824 <xsl:with-param name="labels"> |
824 <xsl:with-param name="labels"> |
825 <xsl:text>text box</xsl:text> |
825 <xsl:text>text box button</xsl:text> |
826 </xsl:with-param> |
826 </xsl:with-param> |
827 </xsl:call-template> |
827 </xsl:call-template> |
828 <xsl:text> dispatch: function(value) { |
828 <xsl:text> dispatch: function(value) { |
829 </xsl:text> |
829 </xsl:text> |
830 <xsl:text> if(!this.opened) this.set_selection(value); |
830 <xsl:text> if(!this.opened) this.set_selection(value); |
831 </xsl:text> |
831 </xsl:text> |
832 <xsl:text> }, |
832 <xsl:text> }, |
833 </xsl:text> |
833 </xsl:text> |
834 <xsl:text> init: function() { |
834 <xsl:text> init: function() { |
835 </xsl:text> |
835 </xsl:text> |
836 <xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text> |
836 <xsl:text> this.button_elt.setAttribute("onclick", "hmi_widgets['</xsl:text> |
837 <xsl:value-of select="$hmi_element/@id"/> |
837 <xsl:value-of select="$hmi_element/@id"/> |
838 <xsl:text>'].on_click()"); |
838 <xsl:text>'].on_button_click()"); |
839 </xsl:text> |
839 </xsl:text> |
840 <xsl:text> this.text_bbox = this.text_elt.getBBox() |
840 <xsl:text> this.text_bbox = this.text_elt.getBBox() |
841 </xsl:text> |
841 </xsl:text> |
842 <xsl:text> this.box_bbox = this.box_elt.getBBox() |
842 <xsl:text> this.box_bbox = this.box_elt.getBBox() |
843 </xsl:text> |
843 </xsl:text> |
844 <xsl:text> lmargin = this.text_bbox.x - this.box_bbox.x; |
844 <xsl:text> lmargin = this.text_bbox.x - this.box_bbox.x; |
845 </xsl:text> |
845 </xsl:text> |
846 <xsl:text> tmargin = this.text_bbox.y - this.box_bbox.y; |
846 <xsl:text> tmargin = this.text_bbox.y - this.box_bbox.y; |
847 </xsl:text> |
847 </xsl:text> |
848 <xsl:text> rmargin = this.box_bbox.width - this.text_bbox.width - lmargin; |
848 <xsl:text> this.margins = [lmargin, tmargin].map(x => Math.max(x,0)); |
849 </xsl:text> |
|
850 <xsl:text> bmargin = this.box_bbox.height - this.text_bbox.height - tmargin; |
|
851 </xsl:text> |
|
852 <xsl:text> this.margins = [lmargin, tmargin, rmargin, bmargin].map(x => Math.max(x,0)); |
|
853 </xsl:text> |
849 </xsl:text> |
854 <xsl:text> this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", |
850 <xsl:text> this.content = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", |
855 </xsl:text> |
851 </xsl:text> |
856 <xsl:text> "eleven", "twelve", "thirteen", "fourteen", "fifteen"]; |
852 <xsl:text> "eleven", "twelve", "thirteen", "fourteen", "fifteen"]; |
857 </xsl:text> |
853 </xsl:text> |
865 </xsl:text> |
861 </xsl:text> |
866 <xsl:text> }, |
862 <xsl:text> }, |
867 </xsl:text> |
863 </xsl:text> |
868 <xsl:text> on_selection_click: function(selection) { |
864 <xsl:text> on_selection_click: function(selection) { |
869 </xsl:text> |
865 </xsl:text> |
|
866 <xsl:text> console.log("selected "+selection); |
|
867 </xsl:text> |
|
868 <xsl:text> this.close(); |
|
869 </xsl:text> |
870 <xsl:text> this.set_selection(selection); |
870 <xsl:text> this.set_selection(selection); |
871 </xsl:text> |
871 </xsl:text> |
872 <xsl:text> }, |
872 <xsl:text> }, |
873 </xsl:text> |
873 </xsl:text> |
874 <xsl:text> on_click: function() { |
874 <xsl:text> on_button_click: function() { |
875 </xsl:text> |
875 </xsl:text> |
876 <xsl:text> if(this.opened){ |
876 <xsl:text> this.open(); |
877 </xsl:text> |
877 </xsl:text> |
878 <xsl:text> //this.close(); |
878 <xsl:text> }, |
879 </xsl:text> |
879 </xsl:text> |
880 <xsl:text> }else{ |
880 <xsl:text> on_backward_click:function(){ |
881 </xsl:text> |
881 </xsl:text> |
882 <xsl:text> this.open(); |
882 <xsl:text> this.move(false); |
|
883 </xsl:text> |
|
884 <xsl:text> }, |
|
885 </xsl:text> |
|
886 <xsl:text> on_forward_click:function(){ |
|
887 </xsl:text> |
|
888 <xsl:text> this.move(true); |
|
889 </xsl:text> |
|
890 <xsl:text> }, |
|
891 </xsl:text> |
|
892 <xsl:text> set_selection: function(value) { |
|
893 </xsl:text> |
|
894 <xsl:text> this.text_elt.firstElementChild.textContent = |
|
895 </xsl:text> |
|
896 <xsl:text> (value >= 0 && value < this.content.length) ? |
|
897 </xsl:text> |
|
898 <xsl:text> this.content[value] : "?"+String(value)+"?"; |
|
899 </xsl:text> |
|
900 <xsl:text> }, |
|
901 </xsl:text> |
|
902 <xsl:text> grow_text: function(up_to) { |
|
903 </xsl:text> |
|
904 <xsl:text> let count = 1; |
|
905 </xsl:text> |
|
906 <xsl:text> let txt = this.text_elt; |
|
907 </xsl:text> |
|
908 <xsl:text> let first = txt.firstElementChild; |
|
909 </xsl:text> |
|
910 <xsl:text> let bounds = svg_root.getBoundingClientRect(); |
|
911 </xsl:text> |
|
912 <xsl:text> this.lift = 0; |
|
913 </xsl:text> |
|
914 <xsl:text> while(count < up_to) { |
|
915 </xsl:text> |
|
916 <xsl:text> let next = first.cloneNode(); |
|
917 </xsl:text> |
|
918 <xsl:text> next.removeAttribute("y"); |
|
919 </xsl:text> |
|
920 <xsl:text> next.setAttribute("dy", "1.1em"); |
|
921 </xsl:text> |
|
922 <xsl:text> next.textContent = "..."; |
|
923 </xsl:text> |
|
924 <xsl:text> txt.appendChild(next); |
|
925 </xsl:text> |
|
926 <xsl:text> let rect = txt.getBoundingClientRect(); |
|
927 </xsl:text> |
|
928 <xsl:text> if(rect.bottom > bounds.bottom){ |
|
929 </xsl:text> |
|
930 <xsl:text> let backup = first.getAttribute("dy"); |
|
931 </xsl:text> |
|
932 <xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em"); |
|
933 </xsl:text> |
|
934 <xsl:text> rect = txt.getBoundingClientRect(); |
|
935 </xsl:text> |
|
936 <xsl:text> if(rect.top > bounds.top){ |
|
937 </xsl:text> |
|
938 <xsl:text> this.lift += 1; |
|
939 </xsl:text> |
|
940 <xsl:text> } else { |
|
941 </xsl:text> |
|
942 <xsl:text> if(backup) |
|
943 </xsl:text> |
|
944 <xsl:text> first.setAttribute("dy", backup); |
|
945 </xsl:text> |
|
946 <xsl:text> else |
|
947 </xsl:text> |
|
948 <xsl:text> first.removeAttribute("dy"); |
|
949 </xsl:text> |
|
950 <xsl:text> txt.removeChild(next); |
|
951 </xsl:text> |
|
952 <xsl:text> return count; |
|
953 </xsl:text> |
|
954 <xsl:text> } |
|
955 </xsl:text> |
|
956 <xsl:text> } |
|
957 </xsl:text> |
|
958 <xsl:text> count++; |
883 </xsl:text> |
959 </xsl:text> |
884 <xsl:text> } |
960 <xsl:text> } |
885 </xsl:text> |
961 </xsl:text> |
886 <xsl:text> }, |
|
887 </xsl:text> |
|
888 <xsl:text> on_backward_click:function(){ |
|
889 </xsl:text> |
|
890 <xsl:text> this.move(false); |
|
891 </xsl:text> |
|
892 <xsl:text> }, |
|
893 </xsl:text> |
|
894 <xsl:text> on_forward_click:function(){ |
|
895 </xsl:text> |
|
896 <xsl:text> this.move(true); |
|
897 </xsl:text> |
|
898 <xsl:text> }, |
|
899 </xsl:text> |
|
900 <xsl:text> set_selection: function(value) { |
|
901 </xsl:text> |
|
902 <xsl:text> this.text_elt.firstElementChild.textContent = |
|
903 </xsl:text> |
|
904 <xsl:text> (value >= 0 && value < this.content.length) ? |
|
905 </xsl:text> |
|
906 <xsl:text> this.content[value] : "?"+String(value)+"?"; |
|
907 </xsl:text> |
|
908 <xsl:text> }, |
|
909 </xsl:text> |
|
910 <xsl:text> grow_text: function(up_to) { |
|
911 </xsl:text> |
|
912 <xsl:text> let count = 1; |
|
913 </xsl:text> |
|
914 <xsl:text> let txt = this.text_elt; |
|
915 </xsl:text> |
|
916 <xsl:text> let first = txt.firstElementChild; |
|
917 </xsl:text> |
|
918 <xsl:text> let bounds = svg_root.getBoundingClientRect(); |
|
919 </xsl:text> |
|
920 <xsl:text> this.lift = 0; |
|
921 </xsl:text> |
|
922 <xsl:text> while(count < up_to) { |
|
923 </xsl:text> |
|
924 <xsl:text> let next = first.cloneNode(); |
|
925 </xsl:text> |
|
926 <xsl:text> next.removeAttribute("y"); |
|
927 </xsl:text> |
|
928 <xsl:text> next.setAttribute("dy", "1.1em"); |
|
929 </xsl:text> |
|
930 <xsl:text> next.textContent = "..."; |
|
931 </xsl:text> |
|
932 <xsl:text> txt.appendChild(next); |
|
933 </xsl:text> |
|
934 <xsl:text> let rect = txt.getBoundingClientRect(); |
|
935 </xsl:text> |
|
936 <xsl:text> if(rect.bottom > bounds.bottom){ |
|
937 </xsl:text> |
|
938 <xsl:text> let backup = first.getAttribute("dy"); |
|
939 </xsl:text> |
|
940 <xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em"); |
|
941 </xsl:text> |
|
942 <xsl:text> rect = txt.getBoundingClientRect(); |
|
943 </xsl:text> |
|
944 <xsl:text> if(rect.top > bounds.top){ |
|
945 </xsl:text> |
|
946 <xsl:text> this.lift += 1; |
|
947 </xsl:text> |
|
948 <xsl:text> } else { |
|
949 </xsl:text> |
|
950 <xsl:text> if(backup) |
|
951 </xsl:text> |
|
952 <xsl:text> first.setAttribute("dy", backup); |
|
953 </xsl:text> |
|
954 <xsl:text> else |
|
955 </xsl:text> |
|
956 <xsl:text> first.removeAttribute("dy"); |
|
957 </xsl:text> |
|
958 <xsl:text> txt.removeChild(next); |
|
959 </xsl:text> |
|
960 <xsl:text> return count; |
|
961 </xsl:text> |
|
962 <xsl:text> } |
|
963 </xsl:text> |
|
964 <xsl:text> } |
|
965 </xsl:text> |
|
966 <xsl:text> count++; |
|
967 </xsl:text> |
|
968 <xsl:text> } |
|
969 </xsl:text> |
|
970 <xsl:text> return count; |
962 <xsl:text> return count; |
971 </xsl:text> |
963 </xsl:text> |
972 <xsl:text> }, |
964 <xsl:text> }, |
973 </xsl:text> |
965 </xsl:text> |
974 <xsl:text> close: function(){ |
966 <xsl:text> close: function(){ |
975 </xsl:text> |
967 </xsl:text> |
976 <xsl:text> this.reset_text(); |
968 <xsl:text> this.reset_text(); |
977 </xsl:text> |
969 </xsl:text> |
978 <xsl:text> this.reset_box(); |
970 <xsl:text> this.reset_box(); |
|
971 </xsl:text> |
|
972 <xsl:text> this.element.appendChild(this.button_elt); |
979 </xsl:text> |
973 </xsl:text> |
980 <xsl:text> this.opened = false; |
974 <xsl:text> this.opened = false; |
981 </xsl:text> |
975 </xsl:text> |
982 <xsl:text> }, |
976 <xsl:text> }, |
983 </xsl:text> |
977 </xsl:text> |
1147 </xsl:text> |
1143 </xsl:text> |
1148 <xsl:text> }, |
1144 <xsl:text> }, |
1149 </xsl:text> |
1145 </xsl:text> |
1150 <xsl:text> adjust_box_to_text: function(){ |
1146 <xsl:text> adjust_box_to_text: function(){ |
1151 </xsl:text> |
1147 </xsl:text> |
1152 <xsl:text> let [lmargin, tmargin, rmargin, bmargin] = this.margins; |
1148 <xsl:text> let [lmargin, tmargin] = this.margins; |
1153 </xsl:text> |
1149 </xsl:text> |
1154 <xsl:text> let m = this.text_elt.getBBox(); |
1150 <xsl:text> let m = this.text_elt.getBBox(); |
1155 </xsl:text> |
1151 </xsl:text> |
1156 <xsl:text> let b = this.box_elt; |
1152 <xsl:text> let b = this.box_elt; |
1157 </xsl:text> |
1153 </xsl:text> |
1158 <xsl:text> b.x.baseVal.value = m.x - lmargin; |
1154 <xsl:text> b.x.baseVal.value = m.x - lmargin; |
1159 </xsl:text> |
1155 </xsl:text> |
1160 <xsl:text> b.y.baseVal.value = m.y - tmargin; |
1156 <xsl:text> b.y.baseVal.value = m.y - tmargin; |
1161 </xsl:text> |
1157 </xsl:text> |
1162 <xsl:text> b.width.baseVal.value = lmargin + m.width + rmargin; |
1158 <xsl:text> b.width.baseVal.value = 2 * lmargin + m.width; |
1163 </xsl:text> |
1159 </xsl:text> |
1164 <xsl:text> b.height.baseVal.value = tmargin + m.height + bmargin; |
1160 <xsl:text> b.height.baseVal.value = 2 * tmargin + m.height; |
1165 </xsl:text> |
1161 </xsl:text> |
1166 <xsl:text> }, |
1162 <xsl:text> }, |
1167 </xsl:text> |
1163 </xsl:text> |
1168 </xsl:template> |
1164 </xsl:template> |
1169 <xsl:template mode="widget_defs" match="widget[@type='ForEach']"> |
1165 <xsl:template mode="widget_defs" match="widget[@type='ForEach']"> |