widgets.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. 'use strict';
  2. define(function () {
  3. /*
  4. * Cell widgets
  5. */
  6. class Widgets {
  7. constructor() {
  8. console.log("widget constructor")
  9. }
  10. get divider(){
  11. return {
  12. $cell: true,
  13. $type: "hr",
  14. class: "mdc-list-divider",
  15. }
  16. }
  17. headerH3(headertype, label, cssclass) {
  18. return {
  19. $cell: true,
  20. $type: headertype,
  21. class: cssclass,
  22. $text: label
  23. }
  24. }
  25. buttonStroked(obj){
  26. return {
  27. $cell: true,
  28. $type: "button",
  29. class: "mdc-button mdc-button--stroked mdc-ripple-upgraded",
  30. $text: obj.label,
  31. onclick: obj.onclick
  32. }
  33. }
  34. sliderDiscrete(obj) {
  35. return {
  36. $cell: true,
  37. $type: "div",
  38. class: "mdc-slider mdc-slider--discrete",
  39. role: "slider",
  40. 'aria-valuemin': obj.min,
  41. 'aria-valuemax': obj.max,
  42. 'aria-label': obj.label,
  43. $init: obj.init,
  44. $components: [
  45. {
  46. $cell: true,
  47. $type: "div",
  48. class: "mdc-slider__track-container",
  49. $components: [
  50. {
  51. $cell: true,
  52. $type: "div",
  53. class: "mdc-slider__track",
  54. }
  55. ]
  56. },
  57. {
  58. $cell: true,
  59. $type: "div",
  60. class: "mdc-slider__thumb-container",
  61. $components: [
  62. {
  63. $cell: true,
  64. $type: "div",
  65. class: "mdc-slider__pin",
  66. $components: [
  67. {
  68. $cell: true,
  69. $type: "span",
  70. class: "mdc-slider__pin-value-marker",
  71. }
  72. ]
  73. },
  74. {
  75. $cell: true,
  76. $type: "svg",
  77. class: "mdc-slider__thumb",
  78. width: 21,
  79. height: 21,
  80. $components: [
  81. {
  82. $cell: true,
  83. $type: "circle",
  84. cx: 10.5,
  85. cy: 10.5,
  86. r: 7.875
  87. }
  88. ]
  89. },
  90. {
  91. $cell: true,
  92. $type: "div",
  93. class: "mdc-slider__focus-ring"
  94. }
  95. ]
  96. }
  97. ]
  98. }
  99. }
  100. sliderContinuous(obj) {
  101. return {
  102. $cell: true,
  103. $type: "div",
  104. class: "mdc-slider",
  105. role: "slider",
  106. tabindex: 0,
  107. 'id': obj.id,
  108. 'aria-valuemin': obj.min,
  109. 'aria-valuemax': obj.max,
  110. 'aria-label': obj.label,
  111. 'aria-valuenow': obj.value,
  112. 'data-step': obj.step,
  113. $init: obj.init,
  114. $components: [
  115. {
  116. $cell: true,
  117. $type: "div",
  118. class: "mdc-slider__track-container",
  119. $components: [
  120. {
  121. $cell: true,
  122. $type: "div",
  123. class: "mdc-slider__track",
  124. }
  125. ]
  126. },
  127. {
  128. $cell: true,
  129. $type: "div",
  130. class: "mdc-slider__thumb-container",
  131. $components: [
  132. {
  133. $cell: true,
  134. $type: "svg",
  135. class: "mdc-slider__thumb",
  136. width: 21,
  137. height: 21,
  138. $components: [
  139. {
  140. $cell: true,
  141. $type: "circle",
  142. cx: 10.5,
  143. cy: 10.5,
  144. r: 7.875
  145. }
  146. ]
  147. },
  148. {
  149. $cell: true,
  150. $type: "div",
  151. class: "mdc-slider__focus-ring"
  152. }
  153. ]
  154. }
  155. ]
  156. }
  157. }
  158. icontoggle(obj) {
  159. return {
  160. $cell: true,
  161. $type: "i",
  162. class: "mdc-icon-toggle material-icons",
  163. role: "button",
  164. $text: obj.label,
  165. id: obj.id,
  166. 'data-toggle-on': obj.on,
  167. 'data-toggle-off': obj.off,
  168. 'aria-pressed': obj.state,
  169. //'aria-hidden': true,
  170. $init: obj.init
  171. }
  172. }
  173. switch(obj) {
  174. return {
  175. $cell: true,
  176. $type: "div",
  177. class: "mdc-switch",
  178. $components: [
  179. {
  180. $type: "input",
  181. type: "checkbox",
  182. class: "mdc-switch__native-control",
  183. id: obj.id,
  184. $init: obj.init,
  185. //id: "basic-switch",
  186. onchange: obj.onchange
  187. },
  188. {
  189. $type: "div",
  190. class: "mdc-switch__background",
  191. $components: [
  192. {
  193. $type: "div",
  194. class: "mdc-switch__knob"
  195. }
  196. ]
  197. }
  198. ]
  199. }
  200. }
  201. }
  202. return new Widgets;
  203. })