/*
* Cell widgets
*/
class Widgets {
constructor() {
console.log("widget constructor")
}
get divider(){
return {
$cell: true,
$type: "hr",
class: "mdc-list-divider",
}
}
inputTextFieldOutlined(obj){
function initFunc() {
new mdc.textField.MDCTextField.attachTo(this);
}
let inputType = obj.type ? obj.type: 'text';
let init = obj.init ? obj.init: initFunc;
return {
$cell: true,
$type: "div",
class: "mdc-text-field mdc-text-field--outlined mdc-text-field--dense",
$init: init,
$components:[
{
$type: "input",
type: inputType,
id: obj.id,
class: "mdc-text-field__input",
value: obj.value,
onchange: obj.change
},
{
$type: "label",
class: "mdc-floating-label",
for: obj.id,
$text: obj.label
},
{
$type: "div",
class: "mdc-notched-outline",
$components:[
{
$type: "svg",
$components:[
{
$type: "path",
class: "mdc-notched-outline__path"
}
]
}
]
},
{
$type: "div",
class: "mdc-notched-outline__idle"
}
]
//onclick: obj.onclick
}
}
inputTextFieldStandart(obj){
return {
$cell: true,
$type: "div",
class: "mdc-text-field text-field mdc-ripple-upgraded",
$init: function(){
//new mdc.mdc.notchedOutline.MDCNotchedOutline(document.querySelector('.mdc-notched-outline'));
new mdc.textField.MDCTextField.attachTo(this);
},
$components:[
{
$type: "input",
type: "text",
id: obj.id,
class: "mdc-text-field__input",
value: obj.value,
onchange: obj.change
},
{
$type: "label",
class: "mdc-floating-label",
for: obj.id,
$text: obj.label
},
{
$type: "div",
class: "mdc-line-ripple"
}
]
//onclick: obj.onclick
}
}
headerH3(headertype, label, cssclass) {
return {
$cell: true,
$type: headertype,
class: cssclass,
$text: label
}
}
simpleCard(obj){
let style = 'background-image: url(' + obj.imgSrc + '); background-size: cover; background-repeat: no-repeat; height:' + obj.imgHeight + ';';
var addonClass = obj.addonClass;
if (!addonClass){
addonClass = ''
}
return {
$cell: true,
$type: "div",
$components:[
{
$cell: true,
$type: "div",
class: "mdc-card" +' '+ addonClass,
onclick: obj.onclickfunc,
$components:[
{
$cell: true,
$type: "section",
class: "mdc-card__media",
style: style
},
{
$cell: true,
$type: "section",
class: "mdc-card__supporting-text",
$text: obj.text
}
]
}
]
}
}
listDivider() {
return {
$cell: true,
$type: "hr",
class: "mdc-list-divider mdc-list-divider--inset"
}
}
createListItem(obj) {
return {
$cell: true,
$type: "li",
class: "mdc-list-item",
$components: [
{
$cell: true,
$type: "span",
class: "mdc-list-item__graphic",
$components: [
{
$cell: true,
class: "createItems",
$type: "img",
src: obj.imgSrc,
onclick: obj.onclickfunc
}
]
},
{
$cell: true,
$type: "span",
class: "mdc-list-item__text",
$text: obj.title
// $components: [
// {
// $text: obj.title
// },
// {
// $cell: true,
// $type: "span",
// class: "mdc-list-item__secondary-text",
// $text: obj.subTitle
// }
// ]
}
]
}
}
createCard(obj){
return {
$cell: true,
$type: "div",
$components:[
{
$cell: true,
$type: "div",
class: "mdc-card",
$components:[
{
$cell: true,
$type: "div",
class: "mdc-card__horizontal-block",
$components:[
{
$cell: true,
$type: "section",
class: "mdc-card__primary",
$components:[
{
$cell: true,
$type: "h1",
class: "mdc-card__title mdc-card__title--large",
$text: obj.title
},
{
$cell: true,
$type: "h2",
class: "mdc-card__subtitle",
$text: obj.subTitle
}
]
},
{
$cell: true,
$type: "img",
class: "",
src: obj.imgSrc
}
]
},
{
$cell: true,
$type: "section",
class: "mdc-card__actions",
$components:[
{
$cell: true,
$type: "button",
class: "mdc-button mdc-button--compact mdc-card__action",
$text: obj.actionLabel
}
]
}
]
}
]
}
}
buttonStroked(obj){
return {
$cell: true,
$type: "button",
class: "mdc-button mdc-button--outlined",
$text: obj.label,
onclick: obj.onclick
}
}
buttonRaised(obj){
return {
$cell: true,
$type: "button",
class: "mdc-button mdc-button--raised mdc-ripple-upgraded",
$text: obj.label,
onclick: obj.onclick
}
}
buttonSimple(obj){
return {
$cell: true,
$type: "button",
class: "mdc-button",
$text: obj.label,
onclick: obj.onclick
}
}
sliderDiscrete(obj) {
return {
$cell: true,
$type: "div",
class: "mdc-slider mdc-slider--discrete",
role: "slider",
'aria-valuemin': obj.min,
'aria-valuemax': obj.max,
'aria-label': obj.label,
$init: obj.init,
$components: [
{
$cell: true,
$type: "div",
class: "mdc-slider__track-container",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-slider__track",
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-slider__thumb-container",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-slider__pin",
$components: [
{
$cell: true,
$type: "span",
class: "mdc-slider__pin-value-marker",
}
]
},
{
$cell: true,
$type: "svg",
class: "mdc-slider__thumb",
width: 21,
height: 21,
$components: [
{
$cell: true,
$type: "circle",
cx: 10.5,
cy: 10.5,
r: 7.875
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-slider__focus-ring"
}
]
}
]
}
}
sliderContinuous(obj) {
return {
$cell: true,
$type: "div",
class: "mdc-slider",
role: "slider",
tabindex: 0,
'id': obj.id,
'aria-valuemin': obj.min,
'aria-valuemax': obj.max,
'aria-label': obj.label,
'aria-valuenow': obj.value,
'data-step': obj.step,
$init: obj.init,
$components: [
{
$cell: true,
$type: "div",
class: "mdc-slider__track-container",
$components: [
{
$cell: true,
$type: "div",
class: "mdc-slider__track",
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-slider__thumb-container",
$components: [
{
$cell: true,
$type: "svg",
class: "mdc-slider__thumb",
width: 21,
height: 21,
$components: [
{
$cell: true,
$type: "circle",
cx: 10.5,
cy: 10.5,
r: 7.875
}
]
},
{
$cell: true,
$type: "div",
class: "mdc-slider__focus-ring"
}
]
}
]
}
}
textField(obj) {
return {
class: "mdc-text-field",
style: "width: 100%",
$cell: true,
$type: "div",
$components: [
{
class: "mdc-text-field__input prop-text-field-input",
id: obj.id,
$cell: true,
$type: "input",
type: "text",
value: obj.value,
onchange: obj.funconchange
}
]
}
}
icontoggle(obj) {
var addClass = "";
if (obj.styleClass){
addClass = obj.styleClass;
}
return {
$type: "i",
class: addClass + " mdc-icon-toggle material-icons",
role: "button",
$text: obj.label,
id: obj.id,
'data-toggle-on': obj.on,
'data-toggle-off': obj.off,
'aria-pressed': obj.state,
'aria-hidden': true,
$init: obj.init
}
}
floatActionButton(obj) {
var addClass = "";
if (obj.styleClass){
addClass = obj.styleClass;
}
return {
$cell: true,
$type: "button",
class: "mdc-fab material-icons " + addClass,
onclick: obj.onclickfunc,
$components:[
{
$cell: true,
$type: "span",
class: "mdc-fab__icon",
$text: obj.label
}
]
}
}
iconButton(obj) {
var addClass = "";
if (obj.styleClass){
addClass = obj.styleClass;
}
return {
$cell: true,
$type: "button",
class: "mdc-button" + addClass,
onclick: obj.onclickfunc,
$components:[
{
$cell: true,
$type: "i",
class: "material-icons mdc-button__icon",
$text: obj.label
}
]
}
}
imageButton(obj){
return {
$cell: true,
$type: "button",
class: "mdc-button mdc-button--compact",
onclick: obj.onclickfunc,
$components:[
{
$cell: true,
class: obj.styleClass,
$type: "img",
src: obj.imgSrc
}
]
}
}
gridListItem(obj) {
return {
$cell: true,
$type: "li",
class: "mdc-grid-tile " + obj.styleClass,
$components:[
{
$cell: true,
class: "mdc-grid-tile__primary",
$type: "div",
style: "background-color: transparent;",
$components:[
{
$cell: true,
class: "mdc-grid-tile__primary-content tooltip",
$type: "div",
'aria-label': obj.title,
alt: obj.title,
style: "background-image: url("+ obj.imgSrc + ");",
onclick: obj.onclickfunc,
$components:[
{
$cell: true,
class: "tooltiptext",
$type: "span",
$text: obj.title
}
]
}
]
}
]
}
}
switch(obj) {
return {
$cell: true,
$type: "div",
class: "mdc-switch",
_switch: null,
id: obj.id,
$init: obj.init,
//function(){
// new mdc.switchControl.MDCSwitch(this);
// },
$components: [
{
$type: "div",
class: "mdc-switch__track",
},
{
$type: "div",
class: "mdc-switch__thumb-underlay",
$components:[
{
$type: "div",
class: "mdc-switch__thumb",
$components:[
{
$type: "input",
type: "checkbox",
class: "mdc-switch__native-control",
//$init: obj.init,
//id: "basic-switch",
onchange: obj.onchange,
role: "switch"
}
]
}
]
}
// {
// $type: "div",
// class: "mdc-switch__background",
// $components: [
// {
// $type: "div",
// class: "mdc-switch__knob"
// }
// ]
// }
]
}
}
}
export { Widgets }