gm-web-components
Version:
Web components for GamaSmart
214 lines (213 loc) • 6.58 kB
JavaScript
import { h } from "@stencil/core";
import { IconComponent } from "./icon-component/icon-component";
export class GmAppComponent {
constructor() {
this.showModal = false;
// iconReturn() {
// console.log("iz iconreturna");
// return (
// // <icon-component imga={this.img} urla={this.url} desca={this.desc}>
// // koji kurac ne radi
// // </icon-component>
// <div>
// renderuj nesto {this.img} {this.desc} {this.url}
// <icon-component
// imga={this.img}
// urla={this.url}
// desca={this.desc}
// ></icon-component>
// </div>
// );
// }
this.menuToggle = e => {
this.showModal = !this.showModal;
return e.currentTarget.classList.toggle("change");
};
}
componentWillLoad() {
// this.parseMyObjectProp(this.myObject);
this.parseMyArrayProp(this.myArray);
console.log(this.myInnerArray);
}
componentDidLoad() {
console.log("kad je loudovano", this.myInnerArray);
console.log("kad je loudovano", this.myInnerObject);
}
// @Watch("myObject")
// parseMyObjectProp(newValue: string) {
// console.log("uslo ovde objekat");
// if (newValue) this.myInnerObject = JSON.parse(newValue);
// }
parseMyArrayProp(newValue) {
console.log("uslo ovde arraj");
if (newValue) {
this.myInnerArray = JSON.parse(newValue);
console.log(newValue);
}
}
render() {
// console.log(this.myInnerArray);
return [
h("div", { class: "test-container" },
h("div", { class: "container", onClick: e => this.menuToggle(e) },
h("div", { class: "bar1" }),
h("div", { class: "bar2" }),
h("div", { class: "bar3" })),
h("div", null, this.showModal ? (h("div", { class: "pop-holder-container" }, this.myInnerArray.map(el => (h(IconComponent, { img: el.img, destination: el.destination, title: el.title }))))) : ("")),
h("slot", null))
];
}
static get is() { return "gm-app-component"; }
static get encapsulation() { return "shadow"; }
static get originalStyleUrls() { return {
"$": ["gm-app-component.scss"]
}; }
static get styleUrls() { return {
"$": ["gm-app-component.css"]
}; }
static get properties() { return {
"myObject": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "my-object",
"reflect": false
},
"myArray": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "my-array",
"reflect": false
},
"img": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "img",
"reflect": false
},
"title": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "title",
"reflect": false
},
"destination": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": ""
},
"attribute": "destination",
"reflect": false
}
}; }
static get states() { return {
"myInnerObject": {},
"myInnerArray": {},
"showModal": {}
}; }
static get watchers() { return [{
"propName": "myArray",
"methodName": "parseMyArrayProp"
}]; }
}
{
/* <div class="pop-holder-container">
{this.myInnerArray.map(el => (
<IconComponent
img={el.img}
url={el.destination}
desc={el.title}
></IconComponent>
))} */
}
{
/* <div class="logo-container">
<img src={getAssetPath(`./assets/${this.img}`)} />
<a href={this.url} target="_blank">
{this.desc}
</a>
</div> */
}
{
/* {this.iconReturn()} */
}
{
/* <icon-component
imga={this.img}
urla={this.url}
desca={this.desc}
></icon-component> */
}
{
/* </div> */
}
{
/* <div>
{this.showModal ? (
<div class="pop-holder-container">
{this.myInnerArray.map(imga => (
<div class="logo-container">
<img src={getAssetPath(`./assets/${imga.img}`)} />
<a href={imga.destination} target="_blank">
{imga.title}
</a>
</div>
))}
</div>
) : (
""
)}
</div> */
}