widgets.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457
  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. listDivider() {
  59. return {
  60. $cell: true,
  61. $type: "hr",
  62. class: "mdc-list-divider mdc-list-divider--inset"
  63. }
  64. }
  65. createListItem(obj) {
  66. return {
  67. $cell: true,
  68. $type: "li",
  69. class: "mdc-list-item",
  70. $components: [
  71. {
  72. $cell: true,
  73. $type: "span",
  74. class: "mdc-list-item__graphic",
  75. $components: [
  76. {
  77. $cell: true,
  78. class: "createItems",
  79. $type: "img",
  80. src: obj.imgSrc,
  81. onclick: obj.onclickfunc
  82. }
  83. ]
  84. },
  85. {
  86. $cell: true,
  87. $type: "span",
  88. class: "mdc-list-item__text",
  89. $text: obj.title
  90. // $components: [
  91. // {
  92. // $text: obj.title
  93. // },
  94. // {
  95. // $cell: true,
  96. // $type: "span",
  97. // class: "mdc-list-item__secondary-text",
  98. // $text: obj.subTitle
  99. // }
  100. // ]
  101. }
  102. ]
  103. }
  104. }
  105. createCard(obj){
  106. return {
  107. $cell: true,
  108. $type: "div",
  109. $components:[
  110. {
  111. $cell: true,
  112. $type: "div",
  113. class: "mdc-card",
  114. $components:[
  115. {
  116. $cell: true,
  117. $type: "div",
  118. class: "mdc-card__horizontal-block",
  119. $components:[
  120. {
  121. $cell: true,
  122. $type: "section",
  123. class: "mdc-card__primary",
  124. $components:[
  125. {
  126. $cell: true,
  127. $type: "h1",
  128. class: "mdc-card__title mdc-card__title--large",
  129. $text: obj.title
  130. },
  131. {
  132. $cell: true,
  133. $type: "h2",
  134. class: "mdc-card__subtitle",
  135. $text: obj.subTitle
  136. }
  137. ]
  138. },
  139. {
  140. $cell: true,
  141. $type: "img",
  142. class: "",
  143. src: obj.imgSrc
  144. }
  145. ]
  146. },
  147. {
  148. $cell: true,
  149. $type: "section",
  150. class: "mdc-card__actions",
  151. $components:[
  152. {
  153. $cell: true,
  154. $type: "button",
  155. class: "mdc-button mdc-button--compact mdc-card__action",
  156. $text: obj.actionLabel
  157. }
  158. ]
  159. }
  160. ]
  161. }
  162. ]
  163. }
  164. }
  165. buttonStroked(obj){
  166. return {
  167. $cell: true,
  168. $type: "button",
  169. class: "mdc-button mdc-button--stroked mdc-ripple-upgraded",
  170. $text: obj.label,
  171. onclick: obj.onclick
  172. }
  173. }
  174. sliderDiscrete(obj) {
  175. return {
  176. $cell: true,
  177. $type: "div",
  178. class: "mdc-slider mdc-slider--discrete",
  179. role: "slider",
  180. 'aria-valuemin': obj.min,
  181. 'aria-valuemax': obj.max,
  182. 'aria-label': obj.label,
  183. $init: obj.init,
  184. $components: [
  185. {
  186. $cell: true,
  187. $type: "div",
  188. class: "mdc-slider__track-container",
  189. $components: [
  190. {
  191. $cell: true,
  192. $type: "div",
  193. class: "mdc-slider__track",
  194. }
  195. ]
  196. },
  197. {
  198. $cell: true,
  199. $type: "div",
  200. class: "mdc-slider__thumb-container",
  201. $components: [
  202. {
  203. $cell: true,
  204. $type: "div",
  205. class: "mdc-slider__pin",
  206. $components: [
  207. {
  208. $cell: true,
  209. $type: "span",
  210. class: "mdc-slider__pin-value-marker",
  211. }
  212. ]
  213. },
  214. {
  215. $cell: true,
  216. $type: "svg",
  217. class: "mdc-slider__thumb",
  218. width: 21,
  219. height: 21,
  220. $components: [
  221. {
  222. $cell: true,
  223. $type: "circle",
  224. cx: 10.5,
  225. cy: 10.5,
  226. r: 7.875
  227. }
  228. ]
  229. },
  230. {
  231. $cell: true,
  232. $type: "div",
  233. class: "mdc-slider__focus-ring"
  234. }
  235. ]
  236. }
  237. ]
  238. }
  239. }
  240. sliderContinuous(obj) {
  241. return {
  242. $cell: true,
  243. $type: "div",
  244. class: "mdc-slider",
  245. role: "slider",
  246. tabindex: 0,
  247. 'id': obj.id,
  248. 'aria-valuemin': obj.min,
  249. 'aria-valuemax': obj.max,
  250. 'aria-label': obj.label,
  251. 'aria-valuenow': obj.value,
  252. 'data-step': obj.step,
  253. $init: obj.init,
  254. $components: [
  255. {
  256. $cell: true,
  257. $type: "div",
  258. class: "mdc-slider__track-container",
  259. $components: [
  260. {
  261. $cell: true,
  262. $type: "div",
  263. class: "mdc-slider__track",
  264. }
  265. ]
  266. },
  267. {
  268. $cell: true,
  269. $type: "div",
  270. class: "mdc-slider__thumb-container",
  271. $components: [
  272. {
  273. $cell: true,
  274. $type: "svg",
  275. class: "mdc-slider__thumb",
  276. width: 21,
  277. height: 21,
  278. $components: [
  279. {
  280. $cell: true,
  281. $type: "circle",
  282. cx: 10.5,
  283. cy: 10.5,
  284. r: 7.875
  285. }
  286. ]
  287. },
  288. {
  289. $cell: true,
  290. $type: "div",
  291. class: "mdc-slider__focus-ring"
  292. }
  293. ]
  294. }
  295. ]
  296. }
  297. }
  298. icontoggle(obj) {
  299. return {
  300. $cell: true,
  301. $type: "i",
  302. class: "mdc-icon-toggle material-icons "+ obj.styleClass,
  303. role: "button",
  304. $text: obj.label,
  305. id: obj.id,
  306. 'data-toggle-on': obj.on,
  307. 'data-toggle-off': obj.off,
  308. 'aria-pressed': obj.state,
  309. //'aria-hidden': true,
  310. $init: obj.init
  311. }
  312. }
  313. floatActionButton(obj) {
  314. return {
  315. $cell: true,
  316. $type: "button",
  317. class: "mdc-fab material-icons " + obj.styleClass,
  318. onclick: obj.onclickfunc,
  319. $components:[
  320. {
  321. $cell: true,
  322. $type: "span",
  323. class: "mdc-fab__icon",
  324. $text: obj.label
  325. }
  326. ]
  327. }
  328. }
  329. iconButton(obj) {
  330. return {
  331. $cell: true,
  332. $type: "button",
  333. class: "mdc-button",
  334. onclick: obj.onclickfunc,
  335. $components:[
  336. {
  337. $cell: true,
  338. $type: "i",
  339. class: "material-icons mdc-button__icon"+ obj.styleClass,
  340. $text: obj.label
  341. }
  342. ]
  343. }
  344. }
  345. imageButton(obj){
  346. return {
  347. $cell: true,
  348. $type: "button",
  349. class: "mdc-button mdc-button--compact",
  350. onclick: obj.onclickfunc,
  351. $components:[
  352. {
  353. $cell: true,
  354. class: obj.styleClass,
  355. $type: "img",
  356. src: obj.imgSrc
  357. }
  358. ]
  359. }
  360. }
  361. gridListItem(obj) {
  362. return {
  363. $cell: true,
  364. $type: "li",
  365. class: "mdc-grid-tile " + obj.styleClass,
  366. $components:[
  367. {
  368. $cell: true,
  369. class: "mdc-grid-tile__primary",
  370. $type: "div",
  371. style: "background-color: transparent;",
  372. $components:[
  373. {
  374. $cell: true,
  375. class: "mdc-grid-tile__primary-content tooltip",
  376. $type: "div",
  377. 'aria-label': obj.title,
  378. alt: obj.title,
  379. style: "background-image: url("+ obj.imgSrc + ");",
  380. onclick: obj.onclickfunc,
  381. $components:[
  382. {
  383. $cell: true,
  384. class: "tooltiptext",
  385. $type: "span",
  386. $text: obj.title
  387. }
  388. ]
  389. }
  390. ]
  391. }
  392. ]
  393. }
  394. }
  395. switch(obj) {
  396. return {
  397. $cell: true,
  398. $type: "div",
  399. class: "mdc-switch",
  400. $components: [
  401. {
  402. $type: "input",
  403. type: "checkbox",
  404. class: "mdc-switch__native-control",
  405. id: obj.id,
  406. $init: obj.init,
  407. //id: "basic-switch",
  408. onchange: obj.onchange
  409. },
  410. {
  411. $type: "div",
  412. class: "mdc-switch__background",
  413. $components: [
  414. {
  415. $type: "div",
  416. class: "mdc-switch__knob"
  417. }
  418. ]
  419. }
  420. ]
  421. }
  422. }
  423. }
  424. return new Widgets;
  425. })