seven-segment.js

class SevenSegment extends HTMLDivElement {
	static get observedAttributes() {
		return [ 'mode', 'value' ]
	}

	constructor() {
		super()

		this.setMode(this.getAttribute('mode'))

		this.shadow = this.attachShadow({ mode: 'open' })

		this.wrapper = document.createElement('span')
		this.wrapper.classList.add('wrapper')

		const style = document.createElement('style')
		style.textContent = this.getCSS()

		this.a = document.createElement('span')
		this.b = document.createElement('span')
		this.c = document.createElement('span')
		this.d = document.createElement('span')
		this.e = document.createElement('span')
		this.f = document.createElement('span')
		this.g = document.createElement('span')

		this.wrapper.appendChild(this.a)
		this.wrapper.appendChild(this.b)
		this.wrapper.appendChild(this.c)
		this.wrapper.appendChild(this.d)
		this.wrapper.appendChild(this.e)
		this.wrapper.appendChild(this.f)
		this.wrapper.appendChild(this.g)

		this.shadow.appendChild(style)
		this.shadow.appendChild(this.wrapper)
	}

	setMode(mode) {
		if (typeof mode === 'string') mode = mode.toUpperCase()

		this.mode = SevenSegment.prototype.MODES[mode]

		if (typeof this.mode === 'undefined') {
			this.mode = SevenSegment.prototype.MODES.COMBI
		}
	}

	update() {
		let a, b, c, d, e, f, g

		const map = { '0': 0b1111110
		            , '1': 0b0110000
		            , '2': 0b1101101
		            , '3': 0b1111001
		            , '4': 0b0110011
		            , '5': 0b1011011
		            , '6': 0b1011111
		            , '7': 0b1110000
		            , '8': 0b1111111
		            , '9': 0b1111011
		            , 'a': 0b1110111
		            , 'b': 0b0011111
		            , 'c': 0b1001110
		            , 'd': 0b0111101
		            , 'e': 0b1001111
		            , 'f': 0b1000111
		            , 'h': 0b0110111
		            , 'i': 0b0000110
		            , 'j': 0b0111000
		            , 'l': 0b0001110
		            , 'n': 0b1110110
		            , 'o': 0b0011101
		            , 'p': 0b1100111
		            , 'r': 0b0000101
		            , 's': 0b1011011
		            , 't': 0b0001111
		            , 'u': 0b0111110
		            , 'y': 0b0111011
		            }

		let bits = 0

		if (this.hasAttribute('value')) {
			let value = this.getAttribute('value').toLowerCase()

			if (SevenSegment.prototype.MODES[this.mode] === 'NUMBER') {
				if (value.match(/\D/)) value = undefined
			}
			else if (SevenSegment.prototype.MODES[this.mode] === 'LETTER') {
				if (value.match(/\d/)) value = undefined
			}

			if (map.hasOwnProperty(value)) bits = map[value]
		}

		this.a.classList.toggle('active', bits & 0b1000000)
		this.b.classList.toggle('active', bits & 0b0100000)
		this.c.classList.toggle('active', bits & 0b0010000)
		this.d.classList.toggle('active', bits & 0b0001000)
		this.e.classList.toggle('active', bits & 0b0000100)
		this.f.classList.toggle('active', bits & 0b0000010)
		this.g.classList.toggle('active', bits & 0b0000001)
	}

	attributeChangedCallback(name, oldVal, newVal) {
		if (name.toLowerCase() === 'mode') {
			this.setMode(newVal)
			this.update()
		}
		else if (name.toLowerCase() === 'value') {
			this.update()
		}
	}

	getCSS() {
		return `.wrapper{background:#eee;border:2px solid;width:50px;height:100px;display:inline-block;position:relative}.wrapper>span{background-color:#dfdfdf;display:block;position:absolute}.wrapper>span.active{background-color:red}.wrapper>span:nth-child(1),.wrapper>span:nth-child(4),.wrapper>span:nth-child(7){width:70%;height:5%;left:15%}.wrapper>span:nth-child(2),.wrapper>span:nth-child(3),.wrapper>span:nth-child(5),.wrapper>span:nth-child(6){width:10%;height:35%}.wrapper>span:nth-child(1){top:5%}.wrapper>span:nth-child(2){right:5%;top:11%}.wrapper>span:nth-child(3){right:5%;bottom:11%}.wrapper>span:nth-child(4){bottom:5%}.wrapper>span:nth-child(5){left:5%;bottom:11%}.wrapper>span:nth-child(6){left:5%;top:11%}.wrapper>span:nth-child(7){top:47.5%}`
	}
}

SevenSegment.prototype.MODES = { }
SevenSegment.prototype.MODES[SevenSegment.prototype.MODES.NUMBER = 0] = 'NUMBER'
SevenSegment.prototype.MODES[SevenSegment.prototype.MODES.LETTER = 1] = 'LETTER'
SevenSegment.prototype.MODES[SevenSegment.prototype.MODES.COMBI  = 2] = 'COMBI'

customElements.define('seven-segment', SevenSegment, { extends: 'div' })