@operato/contact 1.1.52 → 1.1.53

package/src/ox-contact-view.ts

@@ -1,3 +1,5 @@
+import './ox-pfp-view.js'
+
 import { html, css, LitElement } from 'lit'
 import { customElement, property } from 'lit/decorators.js'
 import { Contact, ContactField, ContactItem } from './ox-contact'
@@ -60,23 +62,10 @@ export class OxContactView extends LitElement {
       font-size: 1.4em;
     }
 
-    :host > div[name] > [monogram] {
+    :host ox-pfp-view {
       display: inline-block;
       width: 100px;
       height: 100px;
-      line-height: 100px;
-      border-radius: 999px;
-      border: 1px solid darkgray;
-      box-sizing: border-box;
-      padding: 0;
-      font-size: 40px;
-      font-family: system-ui;
-      overflow: hidden;
-      text-align: center;
-      vertical-align: center;
-      background-color: gray;
-      color: white;
-      text-transform: uppercase;
     }
 
     :host > div[name] > div[name-content] {
@@ -90,7 +79,7 @@ export class OxContactView extends LitElement {
   @property({ type: Object }) contact: Contact = {}
 
   render() {
-    const { items = [], note } = this.contact || {}
+    const { profile, items = [], note } = this.contact || {}
     var sorted: { [type: string]: ContactItem[] } = {}
 
     items.forEach(item => {
@@ -106,7 +95,8 @@ export class OxContactView extends LitElement {
 
     return html`
       <div name>
-        <div monogram>${names[0]?.value.replace(/\s/g, '').slice(0, 2)}</div>
+        <ox-pfp-view .profile=${profile} .name=${names[0]?.value}></ox-pfp-view>
+
         <div name-content>
           ${names.map(
             item =>

package/src/ox-contact.ts

@@ -2,6 +2,7 @@ import { html, css, LitElement } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import './ox-contact-edit'
 import './ox-contact-view'
+import { Profile } from './ox-pfp-view.js'
 
 export enum ContactField {
   Name = 'name',
@@ -32,6 +33,7 @@ export type ContactItem = {
 }
 
 export type Contact = {
+  profile?: Profile
   items?: ContactItem[]
   note?: string
 }

package/src/ox-pfp-edit.ts

@@ -0,0 +1,351 @@
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { Profile } from './ox-pfp-view'
+import { FileDropHelper } from '@operato/utils'
+
+function getPoint(e: Event): { x: number; y: number } | undefined {
+  if ((e as MouseEvent).button == 0) {
+    return {
+      x: (e as MouseEvent).clientX,
+      y: (e as MouseEvent).clientY
+    }
+  } else if ((e as TouchEvent).touches?.length == 1) {
+    const touch = (e as TouchEvent).touches[0]
+    return {
+      x: touch.clientX,
+      y: touch.clientY
+    }
+  } else {
+    return
+  }
+}
+
+@customElement('ox-pfp-edit')
+export class OxPfpEdit extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+      overflow: hidden;
+    }
+
+    [content] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    [circle] {
+      width: 90%;
+      height: 90%;
+      position: relative;
+    }
+
+    [circle]::after {
+      position: absolute;
+      content: '';
+      width: 100%;
+      height: 100%;
+      box-shadow: 0 0 0 1000px lightgray;
+      border-radius: 50%;
+      opacity: 0.9;
+    }
+
+    [circle]::before {
+      content: '';
+      display: block;
+      position: absolute;
+      text-align: left;
+      line-height: 24px;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background-repeat: no-repeat;
+      background-image: var(
+        --background-image,
+        linear-gradient(var(--primary-color, lightgray), var(--primary-color, lightgray))
+      );
+      transform: var(--image-transform, '');
+      background-size: 100% 100%;
+    }
+
+    [monogram] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 1px solid darkgray;
+      box-sizing: border-box;
+      padding: 0;
+      overflow: hidden;
+      background-color: gray;
+      color: white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [monogram] div {
+      flex: 1;
+      text-transform: uppercase;
+      font-size: 2em;
+      font-family: system-ui;
+      text-align: center;
+      vertical-align: center;
+    }
+
+    [file-load] {
+      position: absolute;
+      left: 0;
+      top: 0;
+
+      display: flex;
+      place-content: center;
+    }
+
+    [file-load]:hover {
+      opacity: 50%;
+    }
+
+    #input-file {
+      display: none;
+    }
+
+    label {
+      display: flex;
+      align-content: center;
+    }
+
+    mwc-icon {
+      align-self: center;
+
+      color: var(--file-uploader-icon-color, black);
+      --mdc-icon-size: var(--file-uploader-icon-size, 20px);
+    }
+  `
+
+  @property({ type: Object }) profile: Profile = {}
+  @property({ type: String }) name?: string
+
+  @query('[circle]') circle!: HTMLDivElement
+
+  private dragStart?: { x: number; y: number }
+  private dragEndHandler = this.onDragEnd.bind(this) as EventListener
+  private dragMoveHandler = this.onDragMove.bind(this) as EventListener
+  private dragStartHandler = this.onDragStart.bind(this) as EventListener
+  private wheelEventHandler = this.onWheelEvent.bind(this) as EventListener
+  private dropFileHandler = this.onDropFile.bind(this) as EventListener
+
+  connectedCallback(): void {
+    super.connectedCallback()
+
+    FileDropHelper.set(this)
+
+    this.addEventListener('mousewheel', this.wheelEventHandler, false)
+
+    this.addEventListener('mousedown', this.dragStartHandler)
+    this.addEventListener('touchstart', this.dragStartHandler)
+
+    document.addEventListener('mouseup', this.dragEndHandler)
+    document.addEventListener('touchend', this.dragEndHandler)
+    document.addEventListener('touchcancel', this.dragEndHandler)
+    document.addEventListener('mousemove', this.dragMoveHandler)
+    document.addEventListener('touchmove', this.dragMoveHandler)
+
+    this.addEventListener('file-drop', this.dropFileHandler)
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('mousewheel', this.wheelEventHandler, false)
+
+    this.removeEventListener('mousedown', this.dragStartHandler!)
+    this.removeEventListener('touchstart', this.dragStartHandler!)
+
+    document.removeEventListener('mouseup', this.dragEndHandler!)
+    document.removeEventListener('touchend', this.dragEndHandler!)
+    document.removeEventListener('touchcancel', this.dragEndHandler!)
+    document.removeEventListener('mousemove', this.dragMoveHandler!)
+    document.removeEventListener('touchmove', this.dragMoveHandler!)
+
+    this.removeEventListener('file-drop', this.dropFileHandler)
+
+    super.disconnectedCallback()
+  }
+
+  render() {
+    return html`
+      <div content>
+        ${this.profile?.picture
+          ? html`<div circle></div>`
+          : html`<div monogram><div>${this.name?.replace(/\s/g, '').slice(0, 2)}</div></div>`}
+      </div>
+
+      <div file-load>
+        <label>
+          <input
+            id="input-file"
+            type="file"
+            accept="image/*"
+            hidden
+            capture="environment"
+            @change=${(e: Event) => this.onChangeFile(e)}
+          />
+          <mwc-icon>image_search</mwc-icon>
+        </label>
+      </div>
+
+      <slot></slot>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    const { picture, zoom = 1, left = 0, top = 0 } = this.profile
+
+    if (picture) {
+      const style = this.style
+
+      style.setProperty('--background-image', `url(${picture})`)
+      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)
+    }
+  }
+
+  get value() {
+    return this.profile
+  }
+
+  set value(value: Profile) {
+    this.profile = value
+  }
+
+  onWheelEvent(e: Event) {
+    e.preventDefault()
+
+    var delta = Math.max(-1, Math.min(1, (e as WheelEvent).deltaY || -(e as WheelEvent).detail))
+
+    const { top = 0, left = 0, zoom = 1, picture } = this.profile
+    this.profile = {
+      top,
+      left,
+      zoom: zoom * (1 - delta / 20),
+      picture
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.profile
+      })
+    )
+  }
+
+  onDragStart(e: Event) {
+    const point = getPoint(e)
+
+    if (point) {
+      this.dragStart = point
+      e.stopPropagation()
+      return false
+    }
+  }
+
+  onDragMove(e: Event) {
+    if (!this.dragStart) {
+      return false
+    }
+
+    const point = getPoint(e)
+
+    if (!point) {
+      return false
+    }
+
+    e.stopPropagation()
+    e.preventDefault()
+
+    const dragStart = point
+    var { x, y } = point
+
+    x -= this.dragStart.x
+    y -= this.dragStart.y
+
+    this.dragStart = dragStart
+
+    const { top = 0, left = 0, zoom = 1, picture } = this.profile
+    const { offsetHeight, offsetWidth } = this
+
+    this.profile = {
+      top: top + (y / offsetHeight) * 100,
+      left: left + (x / offsetWidth) * 100,
+      zoom,
+      picture
+    }
+
+    this.dispatchEvent(
+      new CustomEvent('change', {
+        detail: this.profile
+      })
+    )
+
+    return false
+  }
+
+  onDragEnd(e: Event) {
+    if (this.dragStart) {
+      e.stopPropagation()
+      e.preventDefault()
+
+      delete this.dragStart
+    }
+  }
+
+  onDropFile(e: Event) {
+    const dropFiles = (e as CustomEvent).detail
+    const imageFile = dropFiles[0]
+    if (!imageFile) {
+      return
+    }
+
+    const picture = URL.createObjectURL(imageFile)
+
+    this.profile = {
+      left: 0,
+      top: 0,
+      zoom: 1,
+      picture
+    }
+  }
+
+  onChangeFile(e: Event) {
+    const fileInput = e.currentTarget as HTMLInputElement
+    const imageFile = [...Array.from(fileInput.files as FileList)][0]
+    if (!imageFile) {
+      return
+    }
+
+    const picture = URL.createObjectURL(imageFile)
+
+    this.profile = {
+      left: 0,
+      top: 0,
+      zoom: 1,
+      picture
+    }
+
+    fileInput.files = null
+  }
+
+  fit() {
+    this.profile = {
+      ...this.profile,
+      left: 0,
+      top: 0,
+      zoom: 1
+    }
+  }
+
+  clear() {
+    this.profile = {}
+  }
+}

package/src/ox-pfp-view.ts

@@ -0,0 +1,98 @@
+import { html, css, LitElement, PropertyValues } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+
+export type Profile = {
+  left?: number
+  top?: number
+  zoom?: number
+  picture?: string
+}
+
+@customElement('ox-pfp-view')
+export class OxPfpView extends LitElement {
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    [circle] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      position: relative;
+      background-color: lightgray;
+
+      overflow: hidden;
+    }
+
+    [circle]::before {
+      content: '';
+      display: block;
+      position: absolute;
+      text-align: left;
+      line-height: 24px;
+      top: 0;
+      right: 0;
+      width: 100%;
+      height: 100%;
+      background-repeat: no-repeat;
+      background-image: var(
+        --background-image,
+        linear-gradient(var(--primary-color, gray), var(--primary-color, gray))
+      );
+      transform: var(--image-transform, '');
+      background-size: 100% 100%;
+    }
+
+    [monogram] {
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      border: 1px solid darkgray;
+      box-sizing: border-box;
+      padding: 0;
+      overflow: hidden;
+      background-color: gray;
+      color: white;
+
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    [monogram] div {
+      flex: 1;
+      text-transform: uppercase;
+      font-size: 2em;
+      font-family: system-ui;
+      text-align: center;
+      vertical-align: center;
+    }
+  `
+
+  @property({ type: Object }) profile: Profile = {}
+  @property({ type: String }) name?: string
+
+  @query('[circle]') circle!: HTMLDivElement
+
+  render() {
+    return html`
+      ${this.profile?.picture
+        ? html`<div circle></div>`
+        : html`<div monogram><div>${this.name?.replace(/\s/g, '').slice(0, 2)}</div></div>`}
+
+      <slot></slot>
+    `
+  }
+
+  updated(changes: PropertyValues<this>) {
+    const { picture, zoom = 1, left = 0, top = 0 } = this.profile || {}
+
+    if (picture) {
+      const style = this.style
+
+      style.setProperty('--background-image', `url(${picture})`)
+      style.setProperty('--image-transform', `translate(${left}%, ${top}%) scale(${zoom}, ${zoom})`)
+    }
+  }
+}

package/src/ox-pfp.ts

@@ -0,0 +1,97 @@
+import './ox-pfp-edit.js'
+import './ox-pfp-view.js'
+
+import '@material/mwc-icon-button'
+
+import { html, css, LitElement } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { Profile } from './ox-pfp-view.js'
+import { OxPfpEdit } from './ox-pfp-edit.js'
+
+@customElement('ox-pfp')
+export class OxPfp extends LitElement {
+  static styles = css`
+    :host {
+      display: block;
+
+      --mdc-icon-button-size: 20px;
+      --mdc-icon-size: 20px;
+    }
+
+    ox-pfp-edit,
+    ox-pfp-view {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    [buttons] {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      display: flex;
+    }
+
+    mwc-icon-button {
+      position: absolute;
+    }
+
+    mwc-icon-button[icon='fit_screen'] {
+      bottom: 0;
+      left: 0;
+    }
+
+    mwc-icon-button[icon='save'] {
+      bottom: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='edit'] {
+      bottom: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='cancel'] {
+      top: 0;
+      right: 0;
+    }
+
+    mwc-icon-button[icon='clear'] {
+      top: 0;
+      right: 16px;
+    }
+  `
+
+  @property({ type: Object }) profile: Profile = {}
+  @property({ type: String }) name?: string
+
+  @state() editMode?: boolean = false
+
+  @query('ox-pfp-edit') edit!: OxPfpEdit
+
+  render() {
+    return this.editMode
+      ? html`<ox-pfp-edit .profile=${this.profile} name=${this.name || ''}>
+          <mwc-icon-button icon="fit_screen" @click=${() => this.edit.fit()}></mwc-icon-button>
+          <mwc-icon-button icon="clear" @click=${() => this.edit.clear()}></mwc-icon-button>
+          <mwc-icon-button
+            icon="save"
+            @click=${() => {
+              this.profile = this.edit.profile
+              this.editMode = false
+              this.dispatchEvent(
+                new CustomEvent('change', {
+                  detail: this.profile
+                })
+              )
+            }}
+          ></mwc-icon-button>
+          <mwc-icon-button icon="cancel" @click=${() => (this.editMode = false)}></mwc-icon-button>
+        </ox-pfp-edit> `
+      : html`
+          <ox-pfp-view .profile=${this.profile} name=${this.name || ''}>
+            <mwc-icon-button icon="edit" @click=${() => (this.editMode = true)}></mwc-icon-button>
+          </ox-pfp-view>
+        `
+  }
+}