Detect contact type
This commit is contained in:
parent
eb945f5176
commit
fd50556ba8
@ -21,9 +21,10 @@
|
|||||||
>
|
>
|
||||||
</local-business-item>
|
</local-business-item>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
<contact-info-list>
|
<contact-info-list slot="contacts">
|
||||||
{% for contact in business.contacts %}
|
{% for contact in business.contacts %}
|
||||||
<contact-info
|
<contact-info
|
||||||
|
mode="icon"
|
||||||
contact-id="{{contact.id}}"
|
contact-id="{{contact.id}}"
|
||||||
contact-type="{{contact.contact_type}}"
|
contact-type="{{contact.contact_type}}"
|
||||||
content="{{contact.content}}"
|
content="{{contact.content}}"
|
||||||
|
@ -1,8 +1,11 @@
|
|||||||
import "./shared/form-navigation.js";
|
import "./shared/form-navigation.js";
|
||||||
import "./local-businesses.js";
|
|
||||||
import "./login-form.js";
|
import "./login-form.js";
|
||||||
import "./ow-account.js";
|
import "./ow-account.js";
|
||||||
|
|
||||||
|
import "./local-businesses/local-businesses.js";
|
||||||
|
import "./local-businesses/local-business-item";
|
||||||
|
import "./local-businesses/local-business";
|
||||||
|
|
||||||
import "./nav/ow-nav.js";
|
import "./nav/ow-nav.js";
|
||||||
import "./nav/ow-path.js";
|
import "./nav/ow-path.js";
|
||||||
|
|
||||||
|
@ -19,6 +19,10 @@ customElements.define('contact-info-editor', class extends Component {
|
|||||||
display: flex;
|
display: flex;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
|
#icon {
|
||||||
|
align-self: flex-end;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
${ FORM_STYLE }
|
${ FORM_STYLE }
|
||||||
</style>
|
</style>
|
||||||
<section>
|
<section>
|
||||||
@ -34,9 +38,11 @@ customElements.define('contact-info-editor', class extends Component {
|
|||||||
<div id="contact-wrapper">
|
<div id="contact-wrapper">
|
||||||
<label>E-Mail</label>
|
<label>E-Mail</label>
|
||||||
<div id="input">
|
<div id="input">
|
||||||
<contact-type-icon contact-type="email"></contact-type-icon>
|
<div id="icon">
|
||||||
|
<contact-type-icon contact-type="email"></contact-type-icon>
|
||||||
|
</div>
|
||||||
|
|
||||||
<input type="email" id="content" name="content" />
|
<input type="text" id="content" name="content" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@ -49,9 +55,28 @@ customElements.define('contact-info-editor', class extends Component {
|
|||||||
</section>
|
</section>
|
||||||
`);
|
`);
|
||||||
|
|
||||||
|
{
|
||||||
|
let timeout;
|
||||||
|
const input = this.shadowRoot.querySelector('#content');
|
||||||
|
input.addEventListener('change', ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
console.log('change', input.value)
|
||||||
|
this.#updateContactType(input.value, null);
|
||||||
|
});
|
||||||
|
input.addEventListener('keyup', ev => {
|
||||||
|
ev.stopPropagation();
|
||||||
|
if (timeout) clearTimeout(timeout);
|
||||||
|
timeout = setTimeout(() => {
|
||||||
|
timeout = null;
|
||||||
|
console.log('keyup', input.value)
|
||||||
|
this.#updateContactType(input.value, null);
|
||||||
|
}, 1000 / 3)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
this.shadowRoot.querySelector('#contact_type').addEventListener('change', ev => {
|
this.shadowRoot.querySelector('#contact_type').addEventListener('change', ev => {
|
||||||
ev.stopPropagation();
|
ev.stopPropagation();
|
||||||
this.type = ev.target.value;
|
this.#updateContactType(null, ev.target.value);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -60,11 +85,7 @@ customElements.define('contact-info-editor', class extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
set type(v) {
|
set type(v) {
|
||||||
this.setAttribute('type', v);
|
this.#updateContactType(null, v);
|
||||||
const icon = this.shadowRoot.querySelector('contact-type-icon');
|
|
||||||
icon.setAttribute('contact-type', v);
|
|
||||||
this.shadowRoot.querySelector('#contact_type').value = v;
|
|
||||||
this.shadowRoot.querySelector('#content').setAttribute('type', v === 'email' ? 'email' : 'text');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
get content() {
|
get content() {
|
||||||
@ -108,4 +129,23 @@ customElements.define('contact-info-editor', class extends Component {
|
|||||||
form.action = '/contacts/update';
|
form.action = '/contacts/update';
|
||||||
form.querySelector('input[type=submit]').value = 'Zmień';
|
form.querySelector('input[type=submit]').value = 'Zmień';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#updateContactType(value, type) {
|
||||||
|
type = type || this.#resolveContactType(value);
|
||||||
|
this.setAttribute('type', type);
|
||||||
|
const icon = this.shadowRoot.querySelector('contact-type-icon');
|
||||||
|
icon.setAttribute('contact-type', type);
|
||||||
|
this.shadowRoot.querySelector('#contact_type').value = type;
|
||||||
|
}
|
||||||
|
|
||||||
|
#resolveContactType(s) {
|
||||||
|
s = s || '';
|
||||||
|
if (s.match(/http(s)?:\/\/(www\.)?facebook\.com/)) {
|
||||||
|
return 'facebook';
|
||||||
|
}
|
||||||
|
if (s.match(/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/)) {
|
||||||
|
return 'email';
|
||||||
|
}
|
||||||
|
return 'other';
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
@ -3,14 +3,14 @@ import { Component } from "../shared";
|
|||||||
customElements.define('contact-info',
|
customElements.define('contact-info',
|
||||||
class extends Component {
|
class extends Component {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
return ['contact-type', 'content', 'contact-id'];
|
return ['contact-type', 'content', 'contact-id', 'mode'];
|
||||||
}
|
}
|
||||||
|
|
||||||
constructor() {
|
constructor() {
|
||||||
super(`
|
super(`
|
||||||
<style>
|
<style>
|
||||||
:host { display: block; }
|
:host { display: block; }
|
||||||
section {
|
section a {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: start;
|
justify-content: start;
|
||||||
}
|
}
|
||||||
@ -18,11 +18,16 @@ customElements.define('contact-info',
|
|||||||
width: 24px;
|
width: 24px;
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
:host([mode="icon"]) #content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<section>
|
<section>
|
||||||
<contact-type-icon contact-type="email"></contact-type-icon>
|
<a target="_blank">
|
||||||
<div id="content"></div>
|
<contact-type-icon contact-type="email"></contact-type-icon>
|
||||||
|
<div id="content"></div>
|
||||||
|
</a>
|
||||||
</section>
|
</section>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
@ -31,6 +36,8 @@ customElements.define('contact-info',
|
|||||||
if (!v) return;
|
if (!v) return;
|
||||||
this.setAttribute('contact-type', v);
|
this.setAttribute('contact-type', v);
|
||||||
this.shadowRoot.querySelector('contact-type-icon').setAttribute('contact-type', v);
|
this.shadowRoot.querySelector('contact-type-icon').setAttribute('contact-type', v);
|
||||||
|
|
||||||
|
this.#setHref();
|
||||||
}
|
}
|
||||||
|
|
||||||
get contact_type() {
|
get contact_type() {
|
||||||
@ -40,6 +47,8 @@ customElements.define('contact-info',
|
|||||||
set content(v) {
|
set content(v) {
|
||||||
this.setAttribute('content', v);
|
this.setAttribute('content', v);
|
||||||
this.shadowRoot.querySelector('#content').textContent = v;
|
this.shadowRoot.querySelector('#content').textContent = v;
|
||||||
|
|
||||||
|
this.#setHref();
|
||||||
}
|
}
|
||||||
|
|
||||||
get content() {
|
get content() {
|
||||||
@ -53,4 +62,28 @@ customElements.define('contact-info',
|
|||||||
set contact_id(v) {
|
set contact_id(v) {
|
||||||
this.setAttribute('contact-id', v);
|
this.setAttribute('contact-id', v);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
get mode() {
|
||||||
|
return this.getAttribute('mode');
|
||||||
|
}
|
||||||
|
|
||||||
|
// full or icon
|
||||||
|
set mode(v) {
|
||||||
|
this.setAttribute('mode', (v || '').toLocaleLowerCase())
|
||||||
|
}
|
||||||
|
|
||||||
|
#setHref() {
|
||||||
|
this.shadowRoot.querySelector('a').href = this.#createLinkPath();
|
||||||
|
}
|
||||||
|
|
||||||
|
#createLinkPath() {
|
||||||
|
const s = this.shadowRoot.querySelector('#content').textContent || '';
|
||||||
|
switch (this.contact_type) {
|
||||||
|
case 'facebook':
|
||||||
|
case 'other':
|
||||||
|
return s;
|
||||||
|
case 'email':
|
||||||
|
return `mailto:${s}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component, S } from "../shared";
|
import { Component } from "../shared";
|
||||||
|
|
||||||
customElements.define('local-business', class extends Component {
|
customElements.define('local-business', class extends Component {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
@ -22,6 +22,9 @@ customElements.define('local-business', class extends Component {
|
|||||||
<section id="items">
|
<section id="items">
|
||||||
<slot name="item"></slot>
|
<slot name="item"></slot>
|
||||||
</section>
|
</section>
|
||||||
|
<section>
|
||||||
|
<slot name="contacts"></slot>
|
||||||
|
</section>
|
||||||
`);
|
`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,6 +1,4 @@
|
|||||||
import "./local-businesses/local-business-item";
|
import { Component } from "../shared";
|
||||||
import "./local-businesses/local-business";
|
|
||||||
import { Component } from "./shared";
|
|
||||||
|
|
||||||
customElements.define('local-business-list', class extends Component {
|
customElements.define('local-business-list', class extends Component {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
@ -1,4 +1,4 @@
|
|||||||
import { S, FORM_STYLE, Component } from "./shared";
|
import { FORM_STYLE, Component } from "./shared";
|
||||||
|
|
||||||
import "./register-form/register-basic-form";
|
import "./register-form/register-basic-form";
|
||||||
import "./register-form/register-item-form-row.js";
|
import "./register-form/register-item-form-row.js";
|
||||||
|
@ -1,5 +1,3 @@
|
|||||||
export const S = Symbol();
|
|
||||||
|
|
||||||
export const BUTTON_STYLE = `
|
export const BUTTON_STYLE = `
|
||||||
input[type="button"], input[type="submit"], button {
|
input[type="button"], input[type="submit"], button {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { BUTTON_STYLE, Component, S } from "../shared.js";
|
import { BUTTON_STYLE, Component } from "../shared.js";
|
||||||
|
|
||||||
customElements.define('image-input', class extends Component {
|
customElements.define('image-input', class extends Component {
|
||||||
static get observedAttributes() {
|
static get observedAttributes() {
|
||||||
|
@ -856,7 +856,7 @@ UPDATE contacts
|
|||||||
SET
|
SET
|
||||||
contact_type = $3,
|
contact_type = $3,
|
||||||
content = $4
|
content = $4
|
||||||
WHERE id = $1 WHERE owner_id = $2
|
WHERE id = $1 AND owner_id = $2
|
||||||
RETURNING
|
RETURNING
|
||||||
id,
|
id,
|
||||||
owner_id,
|
owner_id,
|
||||||
|
Loading…
Reference in New Issue
Block a user