Example #1
0
test('custom-element-styles', t => {
  var Element1 = styles(CustomElement().once('created', created), 'h1 { font-size: 50px; }')
  var Element2 = styles(CustomElement().once('created', created), 'h1 { font-size: 72px; }')

  document.registerElement('element-1', Element1)
  document.registerElement('element-2', Element2)
  document.body.appendChild(domify(`
    <style>h1 { font-size: 12px }</style>
    <h1>Unstyled</h1>
    <element-1></element-1>
    <element-2></element-2>
  `))

  var body     = document.querySelector('h1')
  var element1 = document.querySelector('element-1::shadow h1')
  var element2 = document.querySelector('element-2::shadow h1')

  body     = getComputedStyle(body).getPropertyValue('font-size')
  element1 = getComputedStyle(element1).getPropertyValue('font-size')
  element2 = getComputedStyle(element2).getPropertyValue('font-size')

  t.equal(body, '12px')
  t.equal(element1, '50px')
  t.equal(element2, '72px')
  t.end()

  function created(delay) {
    var h1 = document.createElement('h1')
    h1.innerHTML = 'Header!'
    this.createShadowRoot()
    this.shadowRoot.appendChild(h1)
  }
})
Example #2
0
function createElementBase(CodeMirror, opts) {
  var Element = CustomElement()

  opts = opts || {}

  Element.once('created', function() {
    var wrapper  = document.createElement('div')

    this.createShadowRoot()
    this.editor = new CodeMirror(wrapper, xtend(opts, {
      value: ''
    }))

    this.editor.display.wrapper.style.height = 'auto'
    this.shadowRoot.appendChild(wrapper)

    ;['mode'
    , 'width'
    , 'height'
    , 'theme'
    ].forEach(function(name) {
      if (this.hasAttribute(name)) {
        this.attributeChangedCallback(name, null, this.getAttribute(name))
      }
    }, this)
  })

  Element.once('attached', function() {
    var style = document.createElement('style')
    var self  = this

    style.innerHTML = (
      fs.readFileSync(path.join(__dirname, 'index.css'), 'utf8') +
      fs.readFileSync(require.resolve('codemirror/lib/codemirror.css'), 'utf8')
    )

    this.shadowRoot.appendChild(style)
    this.reset()
  })

  Element.on('attribute', function(name, oldValue, newValue) {
    if (name === 'mode') return this.editor.setOption('mode', newValue)
    if (name === 'width') return this.editor.setSize(newValue, null)
    if (name === 'height') return this.editor.setSize(null, newValue)
    if (name === 'theme') return this.editor.setOption('theme', newValue)
  })

  Element.prototype.reset = function() {
    this.value = this.textContent
    this.editor.refresh()
  }

  Object.defineProperty(Element.prototype, 'value', {
    get: function() { return this.editor.getValue() },
    set: function(value) {
      this.editor.setValue(value)
    }
  })

  return Element
}
Example #3
0
const customElement = require('custom-element')
const symbol = require('es6-symbol')

const textContent = symbol('textContent')
const count = symbol('count')

const btn = customElement(window.HTMLButtonElement.prototype)
btn.extends = 'button'

module.exports = btn

btn.on('created', function () {
  this[count] = 0
})

btn.on('attached', function () {
  this[textContent] = this.textContent
  this.textContent = fmtText(this[textContent], this[count])
})

btn.once('attached', function () {
  addClickListener(this)
})

btn.on('attribute', function (name, old, nw) {
  if (name !== 'count') return
  this.count = nw
})

Object.defineProperty(btn.prototype, 'count', {
  get: function () {return this[count]},