@knowark/componarkjs 1.7.3

package/lib/components/splitview/components/splitview.detail.js

@@ -0,0 +1,46 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-splitview-detail'
+export class SplitViewDetail extends Component {
+  constructor() {
+    super()
+    this.addEventListener(
+      'close', this.onClose.bind(this))
+  }
+
+  init(context = {}) {
+    this.binding = 'splitview-detail-listen'
+
+    const [main] = this.slots['general']
+
+    this.main = this.main || main
+
+    if (this.main && this.main.init) {
+      this.main.init(context)
+    }
+
+    return super.init(context)
+  }
+
+  render () {
+    this.content = ''
+    this.append(this.main)
+
+    return super.render()
+  }
+
+  /** @param {Event} event */
+  onClose (event) {
+    event.stopPropagation()
+    this.hide()
+  }
+
+  show () {
+    this.removeAttribute('hidden')
+  }
+
+  hide () {
+    this.setAttribute('hidden', '')
+  }
+}
+Component.define(tag, SplitViewDetail)

package/lib/components/splitview/components/splitview.detail.test.js

@@ -0,0 +1,92 @@
+import { Component } from "base/component"
+import "./splitview.detail.js"
+
+class MockMain extends Component {
+  init(context = {}) {
+    this.name = this.name || context.name || null
+    return super.init(context)
+  }
+
+  render() {
+    if (this.name) {
+      this.content = `${this.name}`
+    }
+    return super.render()
+  }
+}
+Component.define("mock-main", MockMain)
+
+describe("SplitViewDetail", () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement("div")
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it("can be instantiated", () => {
+    container.innerHTML = `
+    <ark-splitview-detail>
+    </ark-splitview-detail>
+    `
+    const detail = container.querySelector("ark-splitview-detail")
+    expect(detail).toBeTruthy()
+
+    expect(detail).toBe(detail.init())
+  })
+
+  it("can be instantiated with an inner main Component", () => {
+    container.innerHTML = /*html */`
+    <ark-splitview-detail>
+      <mock-main>MAIN CONTENT</mock-main>
+    </ark-splitview-detail>
+    `
+    const detail = container.querySelector("ark-splitview-detail")
+
+    expect(detail.firstElementChild.textContent).toEqual("MAIN CONTENT")
+  })
+
+  it("can initialize its main Component", () => {
+    container.innerHTML = /* html */`
+    <ark-splitview-detail>
+      <mock-main></mock-main>
+    </ark-splitview-detail>
+    `
+    const detail = container.querySelector("ark-splitview-detail")
+
+    detail.init({ name: "Servagro" }).render()
+
+    expect(detail.firstElementChild.textContent).toEqual("Servagro")
+  })
+
+  it("can manipulate its hidden attribute", () => {
+    container.innerHTML = /* html */`
+    <ark-splitview-detail>
+      <mock-main></mock-main>
+    </ark-splitview-detail>
+    `
+    const detail = container.querySelector("ark-splitview-detail")
+
+    detail.show()
+    expect(detail.hasAttribute("hidden")).toBeFalsy()
+
+    detail.hide()
+    expect(detail.hasAttribute("hidden")).toBeTruthy()
+  })
+
+  it("listens to close events to hide itself", () => {
+    container.innerHTML = /* html */`
+    <ark-splitview-detail>
+      <mock-main></mock-main>
+    </ark-splitview-detail>
+    `
+    const detail = container.querySelector("ark-splitview-detail")
+    detail.dispatchEvent(new Event('close'))
+
+    expect(detail.hasAttribute('hidden')).toBeTruthy()
+  })
+})

package/lib/components/splitview/components/splitview.js

@@ -0,0 +1,69 @@
+import { Component, css } from '../../../base/component/index.js'
+
+const tag = 'ark-splitview'
+export class SplitView extends Component {
+  constructor() {
+    super()
+    this.binding = 'splitview-listen'
+    this.setDimensions()
+    globalThis.addEventListener('resize', this.setDimensions.bind(this))
+  }
+
+  setDimensions() {
+    this.style.setProperty('--inner-height', `${innerHeight}px`)
+    this.style.setProperty('--inner-width', `${innerWidth}px`)
+  }
+
+  get master () {
+    return this.select('ark-splitview-master')
+  }
+
+  get detail () {
+    return this.select('ark-splitview-detail')
+  }
+
+  render () {
+    this.renderDetail()
+    if (this.master) {
+      this.master.addEventListener(
+        'master-change', this.onMasterChange.bind(this))
+    }
+    return super.render()
+  }
+
+  /** @param {Object} context */
+  renderDetail (context = {}) {
+    if (!this.detail || !this.detail.init) return
+
+    this.detail.init(context).render()
+  }
+
+  /** @param {CustomEvent} event */
+  onMasterChange (event) {
+    event.stopPropagation()
+
+    const context = event.detail
+    this.renderDetail(context)
+    this.detail["show"]()
+
+    this.emit('detail-change', context)
+  }
+}
+
+const styles = css`
+@media (max-width: 960px) {
+  .ark-splitview-detail {
+    position: fixed;
+    overflow: auto;
+    inset: 0 auto auto 0;
+    height: var(--inner-height, 100vh);
+    width: var(--inner-width, 100vh); ;
+  }
+
+  .ark-splitview-detail[hidden] {
+    display: none;
+  }
+}
+`
+
+Component.define(tag, SplitView, styles)

package/lib/components/splitview/components/splitview.master.js

@@ -0,0 +1,26 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-splitview-master'
+export class SplitViewMaster extends Component {
+  constructor () {
+    super()
+    this.addEventListener(
+      this['masterEvent'], this.onMasterEvent.bind(this))
+  }
+  
+  init(context = {}) {
+    this.binding = 'splitview-master-listen'
+    return super.init(context)
+  }
+
+  reflectedProperties () {
+    return ['masterEvent']
+  }
+
+  /** @param {CustomEvent} event */
+  onMasterEvent (event) {
+    event.stopPropagation()
+    this.emit('master-change', event.detail)
+  }
+}
+Component.define(tag, SplitViewMaster)

package/lib/components/splitview/components/splitview.master.test.js

@@ -0,0 +1,55 @@
+import './splitview.master.js'
+
+describe('SplitViewMaster', () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /*html*/`
+    <ark-splitview-master>
+    </ark-splitview-master>
+    `
+    const master = container.querySelector('ark-splitview-master')
+    master.init()
+    master.connectedCallback()
+
+    expect(master).toBeTruthy()
+    expect(master).toBe(master.init())
+    expect(master.getAttribute('master-event')).toBeNull()
+  })
+
+  it('can be instantiated with master-event attribute', () => {
+    container.innerHTML = `
+    <ark-splitview-master master-event="my-event">
+    </ark-splitview-master>
+    `
+    const master = container.querySelector('ark-splitview-master')
+    expect(master.getAttribute('master-event')).toEqual('my-event')
+    expect(master.masterEvent).toEqual('my-event')
+  })
+
+  it('can throw a master-change event', () => {
+    container.innerHTML = `
+    <ark-splitview-master master-event="click">
+      <button>Button</button>
+    </ark-splitview-master>
+    `
+    const master = container.querySelector('ark-splitview-master')
+    const button = master.select('button')
+
+    let masterEvent = null
+    master.addEventListener('master-change', (event) => {masterEvent = event})
+
+    button.click()
+
+    expect(masterEvent).toBeTruthy()
+  })
+})

package/lib/components/splitview/components/splitview.test.js

@@ -0,0 +1,76 @@
+import { Component } from 'base/component'
+import './splitview.js'
+import './splitview.detail'
+import './splitview.master.js'
+
+class NestedMaster extends Component {
+  constructor() {
+    super()
+    this.addEventListener('click', (_) => {
+      this.emit('nested:master', {value: 'NESTED MASTER VALUE'})
+
+    })
+  }
+}
+Component.define('nested-master', NestedMaster)
+
+class NestedDetail extends Component {
+  init(context) {
+    if(!context.value) return super.init()
+
+    this.value = context.value
+    return super.init()
+  }
+
+  render() {
+    this.content = this.value
+    return super.render()
+  }
+}
+Component.define('nested-detail', NestedDetail)
+
+
+describe('SplitView', () => {
+  let container = null
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    container.remove()
+    container = null
+  })
+
+  it('can be instantiated', () => {
+    container.innerHTML = /* html */`
+    <ark-splitview></ark-splitview>
+    `
+    const splitview = container.querySelector('ark-splitview')
+
+    expect(splitview).toBeTruthy()
+    expect(splitview.init()).toBe(splitview)
+  })
+
+  it('can coordinate the master and the detail components', () => {
+    container.innerHTML = /* html */`
+    <ark-splitview>
+      <ark-splitview-master master-event="nested:master">
+        <nested-master></nested-master>
+      </ark-splitview-master>
+      <ark-splitview-detail>
+        <nested-detail></nested-detail>
+      </ark-splitview-detail>
+    </ark-splitview>
+    `
+    const splitview = container.querySelector('ark-splitview')
+
+    const nestedMaster = splitview.select('nested-master')
+
+    nestedMaster.click()
+
+    const nestedDetail = splitview.select('nested-detail')
+
+    expect(nestedDetail.content).toEqual('NESTED MASTER VALUE')
+  })
+})

package/lib/components/splitview/index.js

@@ -0,0 +1,3 @@
+export { SplitViewDetail } from './components/splitview.detail.js'
+export { SplitViewMaster } from './components/splitview.master.js'
+export { SplitView } from './components/splitview.js'

package/lib/components/translate/README.md

@@ -0,0 +1,56 @@
+TRANSLATE
+=========
+
+The `ark-translate` component, provides an easy way to add translations in our app through a select input:
+
+## INSTRUCTIONS
+
+1. Create a folder in your app (named `/locale` by default) and add a folder for each language.
+2. Add a `default.json` file, with the variables you are going to target, and the respective translations as its values.
+
+**example:** 
+
+```json
+{
+  "hello": "Hello",
+  "world": "World",
+  "magic": "Magic"
+}
+```
+
+3. Instantiate the `ark-translate` component with `languages` attribute
+
+```html
+  <ark-translate languages="en,es,fr"></ark-translate>
+```
+
+4.Target the variables on any element you want to apply the translation, using the `data-i18n` attribute:
+
+```html
+  <span data-i18n="hello">Hello</span>
+  <span data-i18n="world">World</span>
+  <span>
+    <strong data-i18n="magic">Magic</strong>
+  </span>
+```
+
+Attributes
+----------
+
+|   Name    | Type  |                          Options                          |    Default     |                           Description                            |
+| :-------: | :---: | :-------------------------------------------------------: | :------------: | :--------------------------------------------------------------: |
+| languages | text  | en (English), es (Español), fr (Français), pt (Português) | 'es' (Español) |                Specifies the available languages                 |
+| endpoint  | text  |                            any                            |   '/locales'   | Specifies a folder in which the translation data will be stored. |
+| namespace | text  |                            any                            |    default     |         The name of the json file with the translations          |
+|   root    | text  |                 any HTML wrapper element                  |     'body'     |   The parent element that wraps the elements to be translated    |
+
+Properties
+----------
+
+|   Name    | Type  |                          Options                          |    Default     |                           Description                            |
+| :-------: | :---: | :-------------------------------------------------------: | :------------: | :--------------------------------------------------------------: |
+| languages | text  | en (English), es (Español), fr (Français), pt (Português) | 'es' (Español) |                Specifies the available languages                 |
+| endpoint  | text  |                            any                            |   '/locales'   | Specifies a folder in which the translation data will be stored. |
+| namespace | text  |                            any                            |   'default'    |         The name of the json file with the translations          |
+|   root    | text  |                 any HTML wrapper element                  |     'body'     |   The parent element that wraps the elements to be translated    |
+

package/lib/components/translate/components/translate.js

@@ -0,0 +1,100 @@
+import { Component } from '../../../base/component/index.js'
+
+const tag = 'ark-translate'
+export class Translate extends Component {
+  init (context = {}) {
+    this.global = context.global || window
+    this.endpoint = context.endpoint || this.endpoint || '/locales'
+    this.namespace = context.namespace || this.namespace || 'default'
+    this.root = context.root || this.root || 'body'
+    this.dictionary = context.dictionary || {}
+
+    const dictionary = this.select('template')
+    if (dictionary) {
+      const content = dictionary.content['textContent']
+      this.dictionary = JSON.parse(content) 
+    }
+
+    return super.init(context)
+  }
+
+  reflectedProperties() {
+    return ['languages', 'endpoint', 'namespace', 'root']
+  }
+
+  render () {
+    const languages = this.languages.split(',').filter(
+      item => Boolean(item) && item.trim())
+    if (!languages.length) return super.render()
+
+    this.content = `
+    <select listen on-change="onLanguageChanged">
+      ${languages.map(code => `
+        <option value="${code}">${LANGUAGE_LIST[code]['name']}</option>
+      `)}
+    </select>
+    `
+    return super.render()
+  }
+
+  async onLanguageChanged(event) {
+    event.stopPropagation()
+    const language = event.target.value
+    await this.transliterate({ language })
+  }
+
+  async transliterate(options = {}) {
+    const language = options.language || 'es'
+    const root = this.global.document.querySelector(
+      options.root || this.root)
+
+    for (const node of root.querySelectorAll('[data-i18n]')) {
+      const { key, namespace } = this.parseKey(node.dataset.i18n)
+      const dictionary = await this.resolveDictionary(language, namespace)
+
+      node.textContent = dictionary[key] || node.textContent
+    }
+  }
+
+  parseKey(value) {
+    let key = value
+    let namespace = this.namespace
+
+    const splitList  = value.split(':')
+    if (splitList.length > 1) {
+      namespace = splitList[0]
+      key = splitList[1]
+    }
+
+    return { key, namespace }
+  }
+
+  async resolveDictionary(language, namespace) {
+    let dictionary = ((this.dictionary[language]
+        || {})[namespace] || null)
+
+    if (dictionary !== null) return dictionary
+
+    if (!this.global.fetch) return {}
+    
+    const url = `${this.endpoint}/${language}/${namespace}.json`
+    const response = await this.global.fetch(url)
+    
+    dictionary = await response.json()
+
+    this.dictionary[language] || (this.dictionary[language] = {})
+    this.dictionary[language][namespace] = dictionary
+
+    return dictionary
+  }
+
+}
+Component.define(tag, Translate)
+
+
+const LANGUAGE_LIST = {
+  es: {name: 'Español'},
+  en: {name: 'English'},
+  fr: {name: 'Français'},
+  pt: {name: 'Português'}
+}