Skip to content

Commit

Permalink
Merge pull request #280 from UX-Alkosto/develop
Browse files Browse the repository at this point in the history 
Lazy Load Components
  • Loading branch information
@miguelcolmenares
miguelcolmenares committed Mar 4, 2022
2 parents 067cb4f + 268a8d5 commit a73abcd
Show file tree
Hide file tree
Showing 43 changed files with 574 additions and 553 deletions.
2 changes: 1 addition & 1 deletion .eslintrc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
"sourceType": "module"
},
"rules": {
"indent": ["error", 4],
"indent": ["error", "tab"],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "single"],
"semi": ["error", "always"]
Expand Down
44 changes: 22 additions & 22 deletions components/acordeon/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
import { LitElement, html } from 'lit';
import { styles } from './css';
export class Acordeon extends LitElement {
constructor(){
super();
this.open=false;
this.title='Escriba un título';
}
static get properties() {
return {
open: {type:String,reflect:true},
title: {type:String}
};
}
static get styles(){
return styles;
}
firstUpdated() {
this.open = isTrueSet(this.getAttribute('open'));
}
render(){
return html`<details ?open="${this.open}">
constructor(){
super();
this.open=false;
this.title='Escriba un título';
}
static get properties() {
return {
open: {type:String,reflect:true},
title: {type:String}
};
}
static get styles(){
return styles;
}
firstUpdated() {
this.open = isTrueSet(this.getAttribute('open'));
}
render(){
return html`<details ?open="${this.open}">
<summary>
<h3>${this.title}</h3>
<k-icon class="expand" icon="alk-icon-abajo"></k-icon>
Expand All @@ -28,9 +28,9 @@ export class Acordeon extends LitElement {
<hr>
<slot></slot>
</details>`;
}
}
}
function isTrueSet(value = '') {
if(typeof value !== 'string') return false;
return value.toLowerCase() === 'true' && true;
if(typeof value !== 'string') return false;
return value.toLowerCase() === 'true' && true;
}
28 changes: 14 additions & 14 deletions components/banner-video/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@ import { html } from 'lit';
import { Banner } from '../banner';
import { styles } from './css';
export class BannerVideo extends Banner {
static get styles() {
return [super.styles, styles];
}
constructor() {
super();
}
render() {
this.loaded = true;
return html`${this._dynamicStyles()}<div class="container">
static get styles() {
return [super.styles, styles];
}
constructor() {
super();
}
render() {
this.loaded = true;
return html`${this._dynamicStyles()}<div class="container">
${this.type == 'left' || this.type == 'left-cut' || this.type == 'full' ? this._getIframe({ height: this.height, src: this.src, type: this.type }) : ''}
<slot class="content"></slot>
${this.type == 'right' || this.type == 'right-cut' ? this._getIframe({ height: this.height, src: this.src, type: this.type }) : ''}
</div>`;
}
_getIframe({height, src, type}) {
if (!src.length) return;
return html`<section class="${type}">
}
_getIframe({height, src, type}) {
if (!src.length) return;
return html`<section class="${type}">
<iframe allowfullscreen frameborder="0" height="${height}" src="${src}" loading="lazy"> </iframe>
</section>`;
}
}
}
78 changes: 39 additions & 39 deletions components/banner/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,58 +1,58 @@
import { LitElement, html } from 'lit';
import { styles } from './css';
export class Banner extends LitElement {
static get properties() {
return {
loaded: { type: Boolean, reflect: true },
height: { type: Number },
src: { type: String },
'mobile-src': { type: String },
type: { type: String },
width: { type: Number }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.height = 0;
this.width = null;
this.loaded = false;
this.src = '';
this['mobile-src'] = '';
this.type = 'left';
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
render() {
this.loaded = true;
const image = this._getImage(this.type);
return html`${this._dynamicStyles()}<div class="container">
static get properties() {
return {
loaded: { type: Boolean, reflect: true },
height: { type: Number },
src: { type: String },
'mobile-src': { type: String },
type: { type: String },
width: { type: Number }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.height = 0;
this.width = null;
this.loaded = false;
this.src = '';
this['mobile-src'] = '';
this.type = 'left';
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
render() {
this.loaded = true;
const image = this._getImage(this.type);
return html`${this._dynamicStyles()}<div class="container">
${this.type == 'left' || this.type == 'left-cut' || this.type == 'full' ? image : ''}
<slot class="content"></slot>
${this.type == 'right' || this.type == 'right-cut' ? image : ''}
</div>`;
}
_dynamicStyles() {
const width = `${(this.width === null) ? 'flex-basis: 50% !important;' : `flex-basis: ${this.width}% !important;`}`;
return html`<style>
}
_dynamicStyles() {
const width = `${(this.width === null) ? 'flex-basis: 50% !important;' : `flex-basis: ${this.width}% !important;`}`;
return html`<style>
@media screen and (min-width: 768px) {
.left,
.right {${width}}
}
</style>`;
}
_getImage(type) {
if (!this.src.length) return;
return html`<section class="${type}">
}
_getImage(type) {
if (!this.src.length) return;
return html`<section class="${type}">
<picture>
${(this['mobile-src'].length) ? html`<source media="(max-width: 768px)" srcset="${this['mobile-src']}">` : ''}
<source media="(min-width: 769px)" srcset="${this.src}">
<img height="${this.height}" src="${this.src}" loading="lazy" />
</picture>
</section>`;
}
}
}
66 changes: 33 additions & 33 deletions components/blog-article/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,37 +2,37 @@ import { html,LitElement } from 'lit';
import { styles } from './css';

export class BlogArticle extends LitElement {
static get properties() {
return {
href: { type: String },
loaded: { type: Boolean, reflect: true },
type: { type: String },
target: { type: String },
shadow: { type: Boolean, reflect: true }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.href = '';
this.loaded = false;
this.target = '_self';
this.type = 'default';
this.shadow = true;
this.addEventListener('click', this._handleClick);
}
render() {
this.loaded = true;
return html`<slot name="image"></slot><div class="text"><slot name="text"></slot></div>`;
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
_handleClick() {
if (this.href === '') return;
return window.open(this.href, this.target);
}
static get properties() {
return {
href: { type: String },
loaded: { type: Boolean, reflect: true },
type: { type: String },
target: { type: String },
shadow: { type: Boolean, reflect: true }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.href = '';
this.loaded = false;
this.target = '_self';
this.type = 'default';
this.shadow = true;
this.addEventListener('click', this._handleClick);
}
render() {
this.loaded = true;
return html`<slot name="image"></slot><div class="text"><slot name="text"></slot></div>`;
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
_handleClick() {
if (this.href === '') return;
return window.open(this.href, this.target);
}
}
70 changes: 35 additions & 35 deletions components/button/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,39 @@ import { common } from '../common';
import { styles } from './css';

export class Button extends LitElement {
static get properties() {
return {
disabled: { type: Boolean },
href: { type: String },
loaded: { type: Boolean, reflect: true },
icon: { type: String },
target: { type: String },
variant: { type: String }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.disabled = false;
this.href = '';
this.loaded = false;
this.icon = '';
this.target = '_self';
this.variant = 'primary';
this.addEventListener('click', this._handleClick);
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
render() {
this.loaded = true;
return common.defaultSlot;
}
_handleClick() {
if (this.href === '') return;
return window.open(this.href, this.target);
}
static get properties() {
return {
disabled: { type: Boolean },
href: { type: String },
loaded: { type: Boolean, reflect: true },
icon: { type: String },
target: { type: String },
variant: { type: String }
};
}
static get styles() {
return styles;
}
constructor() {
super();
this.disabled = false;
this.href = '';
this.loaded = false;
this.icon = '';
this.target = '_self';
this.variant = 'primary';
this.addEventListener('click', this._handleClick);
}
attributeChangedCallback(name, oldval, newval) {
super.attributeChangedCallback(name, oldval, newval);
this.dispatchEvent(new Event(`${name}-changed`));
}
render() {
this.loaded = true;
return common.defaultSlot;
}
_handleClick() {
if (this.href === '') return;
return window.open(this.href, this.target);
}
}

0 comments on commit a73abcd

Please sign in to comment.