widgets.js 16 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478
  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. textField(obj) {
  299. return {
  300. class: "mdc-text-field",
  301. style: "width: 100%",
  302. $cell: true,
  303. $type: "div",
  304. $components: [
  305. {
  306. class: "mdc-text-field__input prop-text-field-input",
  307. id: obj.id,
  308. $cell: true,
  309. $type: "input",
  310. type: "text",
  311. value: obj.value,
  312. onchange: obj.funconchange
  313. }
  314. ]
  315. }
  316. }
  317. icontoggle(obj) {
  318. return {
  319. $cell: true,
  320. $type: "i",
  321. class: "mdc-icon-toggle material-icons "+ obj.styleClass,
  322. role: "button",
  323. $text: obj.label,
  324. id: obj.id,
  325. 'data-toggle-on': obj.on,
  326. 'data-toggle-off': obj.off,
  327. 'aria-pressed': obj.state,
  328. //'aria-hidden': true,
  329. $init: obj.init
  330. }
  331. }
  332. floatActionButton(obj) {
  333. return {
  334. $cell: true,
  335. $type: "button",
  336. class: "mdc-fab material-icons " + obj.styleClass,
  337. onclick: obj.onclickfunc,
  338. $components:[
  339. {
  340. $cell: true,
  341. $type: "span",
  342. class: "mdc-fab__icon",
  343. $text: obj.label
  344. }
  345. ]
  346. }
  347. }
  348. iconButton(obj) {
  349. return {
  350. $cell: true,
  351. $type: "button",
  352. class: "mdc-button",
  353. onclick: obj.onclickfunc,
  354. $components:[
  355. {
  356. $cell: true,
  357. $type: "i",
  358. class: "material-icons mdc-button__icon"+ obj.styleClass,
  359. $text: obj.label
  360. }
  361. ]
  362. }
  363. }
  364. imageButton(obj){
  365. return {
  366. $cell: true,
  367. $type: "button",
  368. class: "mdc-button mdc-button--compact",
  369. onclick: obj.onclickfunc,
  370. $components:[
  371. {
  372. $cell: true,
  373. class: obj.styleClass,
  374. $type: "img",
  375. src: obj.imgSrc
  376. }
  377. ]
  378. }
  379. }
  380. gridListItem(obj) {
  381. return {
  382. $cell: true,
  383. $type: "li",
  384. class: "mdc-grid-tile " + obj.styleClass,
  385. $components:[
  386. {
  387. $cell: true,
  388. class: "mdc-grid-tile__primary",
  389. $type: "div",
  390. style: "background-color: transparent;",
  391. $components:[
  392. {
  393. $cell: true,
  394. class: "mdc-grid-tile__primary-content tooltip",
  395. $type: "div",
  396. 'aria-label': obj.title,
  397. alt: obj.title,
  398. style: "background-image: url("+ obj.imgSrc + ");",
  399. onclick: obj.onclickfunc,
  400. $components:[
  401. {
  402. $cell: true,
  403. class: "tooltiptext",
  404. $type: "span",
  405. $text: obj.title
  406. }
  407. ]
  408. }
  409. ]
  410. }
  411. ]
  412. }
  413. }
  414. switch(obj) {
  415. return {
  416. $cell: true,
  417. $type: "div",
  418. class: "mdc-switch",
  419. $components: [
  420. {
  421. $type: "input",
  422. type: "checkbox",
  423. class: "mdc-switch__native-control",
  424. id: obj.id,
  425. $init: obj.init,
  426. //id: "basic-switch",
  427. onchange: obj.onchange
  428. },
  429. {
  430. $type: "div",
  431. class: "mdc-switch__background",
  432. $components: [
  433. {
  434. $type: "div",
  435. class: "mdc-switch__knob"
  436. }
  437. ]
  438. }
  439. ]
  440. }
  441. }
  442. }
  443. return new Widgets;
  444. })