widgets.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320
  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. simpleCard(obj){
  26. let style = 'background-image: url(' + obj.imgSrc + '); background-size: cover; background-repeat: no-repeat; height:' + obj.imgHeight + ';';
  27. var addonClass = obj.addonClass;
  28. if (!addonClass){
  29. addonClass = ''
  30. }
  31. return {
  32. $cell: true,
  33. $type: "div",
  34. $components:[
  35. {
  36. $cell: true,
  37. $type: "div",
  38. class: "mdc-card" +' '+ addonClass,
  39. onclick: obj.onclickfunc,
  40. $components:[
  41. {
  42. $cell: true,
  43. $type: "section",
  44. class: "mdc-card__media",
  45. style: style
  46. },
  47. {
  48. $cell: true,
  49. $type: "section",
  50. class: "mdc-card__supporting-text",
  51. $text: obj.text
  52. }
  53. ]
  54. }
  55. ]
  56. }
  57. }
  58. createCard(obj){
  59. return {
  60. $cell: true,
  61. $type: "div",
  62. $components:[
  63. {
  64. $cell: true,
  65. $type: "div",
  66. class: "mdc-card",
  67. $components:[
  68. {
  69. $cell: true,
  70. $type: "div",
  71. class: "mdc-card__horizontal-block",
  72. $components:[
  73. {
  74. $cell: true,
  75. $type: "section",
  76. class: "mdc-card__primary",
  77. $components:[
  78. {
  79. $cell: true,
  80. $type: "h1",
  81. class: "mdc-card__title mdc-card__title--large",
  82. $text: obj.title
  83. },
  84. {
  85. $cell: true,
  86. $type: "h2",
  87. class: "mdc-card__subtitle",
  88. $text: obj.subTitle
  89. }
  90. ]
  91. },
  92. {
  93. $cell: true,
  94. $type: "img",
  95. class: "",
  96. src: obj.imgSrc
  97. }
  98. ]
  99. },
  100. {
  101. $cell: true,
  102. $type: "section",
  103. class: "mdc-card__actions",
  104. $components:[
  105. {
  106. $cell: true,
  107. $type: "button",
  108. class: "mdc-button mdc-button--compact mdc-card__action",
  109. $text: obj.actionLabel
  110. }
  111. ]
  112. }
  113. ]
  114. }
  115. ]
  116. }
  117. }
  118. buttonStroked(obj){
  119. return {
  120. $cell: true,
  121. $type: "button",
  122. class: "mdc-button mdc-button--stroked mdc-ripple-upgraded",
  123. $text: obj.label,
  124. onclick: obj.onclick
  125. }
  126. }
  127. sliderDiscrete(obj) {
  128. return {
  129. $cell: true,
  130. $type: "div",
  131. class: "mdc-slider mdc-slider--discrete",
  132. role: "slider",
  133. 'aria-valuemin': obj.min,
  134. 'aria-valuemax': obj.max,
  135. 'aria-label': obj.label,
  136. $init: obj.init,
  137. $components: [
  138. {
  139. $cell: true,
  140. $type: "div",
  141. class: "mdc-slider__track-container",
  142. $components: [
  143. {
  144. $cell: true,
  145. $type: "div",
  146. class: "mdc-slider__track",
  147. }
  148. ]
  149. },
  150. {
  151. $cell: true,
  152. $type: "div",
  153. class: "mdc-slider__thumb-container",
  154. $components: [
  155. {
  156. $cell: true,
  157. $type: "div",
  158. class: "mdc-slider__pin",
  159. $components: [
  160. {
  161. $cell: true,
  162. $type: "span",
  163. class: "mdc-slider__pin-value-marker",
  164. }
  165. ]
  166. },
  167. {
  168. $cell: true,
  169. $type: "svg",
  170. class: "mdc-slider__thumb",
  171. width: 21,
  172. height: 21,
  173. $components: [
  174. {
  175. $cell: true,
  176. $type: "circle",
  177. cx: 10.5,
  178. cy: 10.5,
  179. r: 7.875
  180. }
  181. ]
  182. },
  183. {
  184. $cell: true,
  185. $type: "div",
  186. class: "mdc-slider__focus-ring"
  187. }
  188. ]
  189. }
  190. ]
  191. }
  192. }
  193. sliderContinuous(obj) {
  194. return {
  195. $cell: true,
  196. $type: "div",
  197. class: "mdc-slider",
  198. role: "slider",
  199. tabindex: 0,
  200. 'id': obj.id,
  201. 'aria-valuemin': obj.min,
  202. 'aria-valuemax': obj.max,
  203. 'aria-label': obj.label,
  204. 'aria-valuenow': obj.value,
  205. 'data-step': obj.step,
  206. $init: obj.init,
  207. $components: [
  208. {
  209. $cell: true,
  210. $type: "div",
  211. class: "mdc-slider__track-container",
  212. $components: [
  213. {
  214. $cell: true,
  215. $type: "div",
  216. class: "mdc-slider__track",
  217. }
  218. ]
  219. },
  220. {
  221. $cell: true,
  222. $type: "div",
  223. class: "mdc-slider__thumb-container",
  224. $components: [
  225. {
  226. $cell: true,
  227. $type: "svg",
  228. class: "mdc-slider__thumb",
  229. width: 21,
  230. height: 21,
  231. $components: [
  232. {
  233. $cell: true,
  234. $type: "circle",
  235. cx: 10.5,
  236. cy: 10.5,
  237. r: 7.875
  238. }
  239. ]
  240. },
  241. {
  242. $cell: true,
  243. $type: "div",
  244. class: "mdc-slider__focus-ring"
  245. }
  246. ]
  247. }
  248. ]
  249. }
  250. }
  251. icontoggle(obj) {
  252. return {
  253. $cell: true,
  254. $type: "i",
  255. class: "mdc-icon-toggle material-icons "+ obj.styleClass,
  256. role: "button",
  257. $text: obj.label,
  258. id: obj.id,
  259. 'data-toggle-on': obj.on,
  260. 'data-toggle-off': obj.off,
  261. 'aria-pressed': obj.state,
  262. //'aria-hidden': true,
  263. $init: obj.init
  264. }
  265. }
  266. switch(obj) {
  267. return {
  268. $cell: true,
  269. $type: "div",
  270. class: "mdc-switch",
  271. $components: [
  272. {
  273. $type: "input",
  274. type: "checkbox",
  275. class: "mdc-switch__native-control",
  276. id: obj.id,
  277. $init: obj.init,
  278. //id: "basic-switch",
  279. onchange: obj.onchange
  280. },
  281. {
  282. $type: "div",
  283. class: "mdc-switch__background",
  284. $components: [
  285. {
  286. $type: "div",
  287. class: "mdc-switch__knob"
  288. }
  289. ]
  290. }
  291. ]
  292. }
  293. }
  294. }
  295. return new Widgets;
  296. })